html{scroll-behavior:auto}body{background:#0d0915;font-family:Arial,sans-serif}#demo-root{width:100%;min-height:100vh}.real-demo-top{padding:12px 20px;display:flex;justify-content:space-between;gap:15px;background:#181020;border-bottom:1px solid #432d55;font-size:11px;color:#c4accf}.real-demo-top .eyebrow{font-size:9px}.real-demo-body{min-height:490px;grid-template-columns:1fr 340px}.sample-app{min-height:490px}.sample-title{font-size:36px;width:fit-content;margin:0 0 0 -7px;line-height:1.1;padding:5px 6px;letter-spacing:-1.7px;font-family:Arial,sans-serif}.sample-title>span:before,.sample-title>span:after{display:none}.sample-title:focus-visible,.project-card:focus-visible{outline:2px solid #9a55de;outline-offset:3px}.sample-cta{position:absolute;top:94px;right:30px}.sample-copy{margin:10px 0 28px}.project-card{cursor:pointer}.project-art{height:158px}.picking [data-demo-target]{cursor:crosshair}.picking [data-demo-target]:hover{outline:2px solid #a66bea;outline-offset:3px}.fixture-caption{padding:24px 0 0;color:#706e73;font-size:11px;display:flex;flex-direction:column;gap:4px}.fixture-caption>b{color:#47404e}.real-spot>code{display:block;overflow-wrap:anywhere;font:9px/1.5 var(--mono);color:#a991be;padding:6px 3px}.spot-row{font-size:10px;overflow-wrap:anywhere}.inspector{min-width:0}.inspector-title{padding:15px}.panel-block{padding:13px 15px}.selected-block{max-height:195px;overflow:auto}.page-capture{background:#15101c;color:#d2c0e0;border:1px solid #4f3c5f;border-radius:4px;width:100%;margin-top:11px;padding:9px;font-size:11px}.change-block textarea{font-size:11px}.local-note{font-size:10px}.real-captures{padding:22px;border-top:1px solid #49325c}.real-captures h2,.prompt-output h2{letter-spacing:1.5px;line-height:1.5}.capture-pipeline{font-size:9px;letter-spacing:1px;color:#b093c8}.capture-explainer,.session-warning{font-size:12px;line-height:1.6;color:#b3a0c2;margin:12px 0 20px}.session-warning{font-size:11px;margin-bottom:0;border-top:1px solid #32223e;padding-top:15px}.shot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.capture-empty{padding:25px;border:1px dashed #56366b;border-radius:5px;font-size:13px;color:#b8a0c9;line-height:1.8;grid-column:1/-1}.shot{border:1px solid #4d315e;background:#150d1e;border-radius:6px;overflow:hidden;min-width:0}.shot-heading{display:flex;justify-content:space-between;gap:10px;padding:10px;font:9px var(--mono);color:#c8a9e0;background:#21142d}.shot>a{display:block;background:#21172a}.shot>a>img{display:block;width:100%;height:175px;object-fit:contain}.shot-placeholder{min-height:135px;display:grid;place-items:center;font-size:12px;line-height:1.5;padding:20px;color:#d3bddf;overflow-wrap:anywhere}.shot-detail{padding:12px}.shot-detail>strong{font-size:12px;color:#e2d3ed;display:block;overflow-wrap:anywhere}.shot-detail>span{display:block;font:10px var(--mono);color:#ac8fc2;margin:7px 0}.shot-detail label{display:block;color:#b9a0c9;font-size:11px;margin-top:11px}.shot-detail textarea{display:block;margin-top:6px;font-size:11px;min-height:52px}.shot-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.shot-action{display:inline-flex;align-items:center;justify-content:center;padding:7px 9px;border:1px solid #65427d;border-radius:4px;background:#2a183a;color:#e1c6f5;font-size:10px}.annotate-trigger:after{content:'Mark up';margin-left:5px}.annotate-trigger>svg{width:13px;height:13px}.real-status{font-size:12px;color:#cdb2e1;padding:0 22px 18px;margin:0;min-height:30px}.annotation-overlay{position:fixed;inset:0;background:#050208df;z-index:200}.annotation-dialog{position:fixed;z-index:201;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100vw - 30px);max-width:1000px;max-height:94vh;display:flex;flex-direction:column;gap:16px;padding:24px;background:#15101d;color:#e9dff0;border:1px solid #72528e;border-radius:10px;overflow:auto}.annotation-title{font-size:19px;letter-spacing:-.4px;margin:0;line-height:1.3}.annotation-description{font-size:12px;color:#b9a4c9;margin:8px 30px 0 0}.annotation-close{position:absolute;right:12px;top:12px;border:0;background:transparent;color:#dac6eb;padding:4px}.annotation-dialog button{font-family:Arial,sans-serif}.annotation-dialog svg{max-width:18px;max-height:18px}.annotation-dialog canvas{max-width:100%;height:auto}.annotation-dialog h2{font-family:Arial,sans-serif}.prompt-output pre{font-size:12px}.shot-action:hover,.page-capture:hover{filter:brightness(1.2)}
@media(max-width:760px){.real-demo-top{padding:12px 15px;flex-direction:column;gap:6px}.real-demo-body{grid-template-columns:1fr}.sample-app{min-height:420px}.sample-content{padding:20px}.sample-title{font-size:30px}.sample-cta{top:89px;right:20px;font-size:9px;padding:10px 9px}.sample-copy{font-size:10px;margin-bottom:25px}.project-art{height:130px}.fixture-caption{font-size:10px;padding-top:20px}.selected-block{max-height:180px}.real-captures{padding:18px 15px}.capture-pipeline{display:none}.shot-grid{grid-template-columns:1fr}.real-status{padding:0 15px 15px}.annotation-dialog{padding:18px 13px;width:calc(100vw - 16px)}.annotation-description{font-size:11px}.prompt-output pre{font-size:10px}.output-heading{align-items:center}.local-note{font-size:10px}}@media(max-width:370px){.sample-cta{position:relative;top:auto;right:auto;margin-bottom:18px}.sample-copy{margin-bottom:14px}}