:root{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#252a30;background:#f4f5f7;font-synthesis:none;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;--accent:#5268d8}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;min-height:40px;border:0;border-radius:8px;transition:background .16s,box-shadow .16s,transform .16s}button:active{transform:scale(.96)}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a3aff6;outline-offset:3px}[hidden]{display:none!important}main{max-width:1740px;padding:26px 32px;margin:auto}.url-bar{display:flex;gap:10px;align-items:center;background:white;padding:8px;border-radius:14px;box-shadow:0 0 0 1px #00000006,0 3px 8px #00000003}.url-bar input{flex:1;min-width:0;padding:14px 12px;border:0;background:none;font-size:15px;outline:none}.primary{background:var(--accent);color:white;font-size:13px;font-weight:600;padding:0 22px;min-height:46px;white-space:nowrap}.primary:hover{background:#4356ba}.stop{background:#fff0ed;color:#ba4a36;padding:0 18px}.text-button{background:transparent;color:#68717d;font-size:12px;padding:0 12px}.text-button:hover{background:#f0f2f5}.workspace{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;margin-top:24px}aside{align-self:start;background:white;padding:20px;border-radius:16px;box-shadow:0 0 0 1px #00000005,0 4px 12px #00000003}.tabs,.segments{display:flex;gap:4px;padding:4px;background:#f1f3f6;border-radius:10px}.tabs button,.segments button{flex:1;background:none;color:#78808a;font-size:12px;min-height:40px}.tabs button[aria-selected=true],.segments button[aria-pressed=true]{background:white;color:#344257;box-shadow:0 1px 4px #00000010}.preset-note{padding:20px 0;margin-bottom:4px;display:grid;grid-template-columns:1fr auto;gap:6px;box-shadow:0 1px 0 #00000007}.preset-note strong{font-size:21px;letter-spacing:-.8px;font-weight:550}.preset-note span{font-size:11px;align-self:center;color:#8a929d}.preset-note .locked{grid-column:1/-1;font-size:10px}label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:550;margin:22px 0 10px}output,.unit{color:#8a929d;font-size:11px;font-weight:400}input[type=range]{width:100%;height:40px;appearance:none;background:transparent;accent-color:var(--accent);margin:0;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:#dbe0e9}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--accent)}input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#dbe0e9}input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--accent)}input[type=number],select{background:#fafbfc;border:1px solid #e5e8ed;padding:10px 12px;border-radius:8px;min-height:40px;font-size:12px;color:#374151;width:100%}.scroll-fields{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px}.scroll-fields input{width:80px}.scroll-fields button{padding:0 8px;color:var(--accent)}.advanced{margin-top:22px;padding-top:16px;box-shadow:0 -1px 0 #00000007}summary{font-size:12px;color:#68717d;cursor:pointer;min-height:40px;display:flex;align-items:center;gap:6px}summary::before{content:"▸";font-size:11px}details[open]>summary::before{content:"▾"}summary::-webkit-details-marker{display:none}.advanced label{margin-top:16px}.toggle-row{justify-content:flex-start;font-weight:400;font-size:11px;line-height:1.5;min-height:40px}.toggle-row input{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}#reset{width:100%;margin-top:6px}.preview-area{min-width:0}.previews{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.37fr);gap:20px;align-items:start}.preview-card{padding:16px;background:white;border-radius:16px;box-shadow:0 0 0 1px #00000006,0 4px 12px #00000003}.card-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:8px}.card-heading strong{font-size:13px;font-weight:600}.card-heading span{font-size:10px;color:#959ca6}.image-frame{position:relative;background:#f5f6f8;border-radius:8px;overflow:hidden;outline:1px solid #00000008}.desktop-frame{aspect-ratio:1.7}.mobile-frame{aspect-ratio:5/8}.image-frame img{display:block;width:100%;height:100%;object-fit:cover}.placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#a1a8b2;text-align:center;padding:20px}.frame-icon{font-size:38px;color:#bcc4d1;margin-bottom:8px}.placeholder p{font-size:11px;line-height:1.6}.card-footer{margin-top:14px;display:flex;flex-direction:column;gap:12px}.card-footer>span{font-size:10px;color:#8a929d;min-height:14px}.download{width:100%;background:#f1f3f8;color:#46546a;font-size:12px;font-weight:550;min-height:42px;box-shadow:0 0 0 1px #00000003}.download:hover:enabled{background:#e7ebf5;color:#344dc5}.loading::after{content:'Capturing…';position:absolute;top:10px;right:10px;background:#fffffff2;color:var(--accent);font-size:11px;border-radius:20px;padding:9px 13px;box-shadow:0 2px 8px #00000012;pointer-events:none}.error{margin-top:20px;font-size:12px;line-height:1.6;border-radius:10px;background:#fff0ed;color:#a44f3c;padding:14px 16px}dialog{border:0;border-radius:16px;background:white;width:min(620px,90vw);max-height:90vh;padding:24px;box-shadow:0 20px 100px #0003}dialog::backdrop{background:#17203070;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h2{font-size:20px;font-weight:550;margin:0}.dialog-heading button{background:#f3f5f8;width:40px;font-size:24px}dialog>p{font-size:12px;color:#7b838d;line-height:1.6}.overview-wrap{position:relative;cursor:crosshair}.overview-wrap img{display:block;width:100%}#overview-line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);pointer-events:none;box-shadow:0 0 0 1px #fff8}@media(max-width:1150px){.previews{grid-template-columns:1fr}.mobile-card{width:260px}.workspace{gap:20px;grid-template-columns:250px minmax(0,1fr)}}@media(max-width:700px){main{padding:16px}.workspace{grid-template-columns:1fr;gap:20px}.url-bar{flex-wrap:wrap;gap:6px}.url-bar input{flex-basis:100%;padding:12px 8px}.primary{flex:1}.url-bar .text-button{font-size:11px}.mobile-card{width:100%;max-width:300px}.previews{gap:16px}}@media(prefers-reduced-motion:reduce){button{transition:none}button:active{transform:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Shared panel baseline on the three-column workspace. */
@media(min-width:1151px){
 aside{align-self:stretch;display:flex;flex-direction:column}
 aside #reset{margin-top:auto;padding-top:6px}
 .preview-area{display:flex;flex-direction:column}
 .previews{flex:1;align-items:stretch}
 .preview-card{display:flex;flex-direction:column}
 .image-frame{flex-shrink:0;width:100%}
 .card-footer{margin-top:auto;padding-top:14px}
}
.capture-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.recapture{background:#edf0ff;color:#465cc7;font-size:12px;font-weight:550}.recapture:hover{background:#e1e6ff}.inline-browser-tools{display:flex;align-items:center;gap:4px;margin-top:8px}.inline-browser-tools button{background:#f5f6f8;min-width:40px;font-size:12px;color:#78808c;padding:0 10px}.interaction-toggle{margin:20px 0 10px}.image-frame[role=application]{touch-action:none}.image-frame[role=application]:focus-visible{outline:3px solid #a3aff6;outline-offset:3px}.image-frame.loading::after{content:attr(data-progress)}
.control-section{border-top:1px solid #eef0f3;padding-top:16px;margin-top:20px}.control-section h2{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#88919f;margin:0 0 12px}.control-section label{margin-top:18px}.hint{font-size:12px;line-height:1.5;color:#727d8d;margin:12px 0 0}.mode-switch{margin-bottom:14px}.mode-switch button{font-size:12px}.timeline{padding:14px 0 8px;border-top:1px solid #edf0f4;margin-top:12px}.timeline-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px}.timeline-heading button{font-size:11px;padding:6px 8px}.timeline input[type=range]{margin:0 0 4px}.timeline-labels{display:flex;justify-content:space-between;color:#8a93a0;font-size:10px;font-variant-numeric:tabular-nums}.inline-browser-tools button:hover{background:#e9edf5}

.image-frame[contenteditable]{caret-color:transparent;cursor:default}.image-frame img{user-select:none;-webkit-user-drag:none}

.moment-time{display:flex;align-items:center;gap:4px;margin:0;font-size:11px}.moment-time input{width:66px;min-height:40px;padding:5px 7px;font-size:12px;text-align:center}.timeline-labels{align-items:center}
.shot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 16px}.shot{position:relative;min-width:0;padding:4px;border-radius:8px;background:#f4f5f8;box-shadow:inset 0 0 0 1px #00000008;transition:background .16s,box-shadow .16s,transform .16s}.shot img{display:block;width:100%;height:48px;object-fit:contain;background:#e8ecf1;border-radius:5px;outline:1px solid #0000000d}.shot span{display:block;padding:5px 0 2px;color:#758094;font-size:10px;font-variant-numeric:tabular-nums}.shot:hover{background:#e9edfb}.shot[aria-pressed=true]{background:#e8edff;box-shadow:inset 0 0 0 2px #5268d8}.shot[aria-pressed=true] span{color:#465cc7;font-weight:650}.scrub-label{font-size:10px;color:#7f8897;margin:0 0 8px;font-weight:500}.scrub-label span{font-weight:400;color:#a0a7b2}.mobile-card .shot-grid{grid-template-columns:repeat(5,minmax(40px,1fr));gap:5px}.mobile-card .shot{padding:3px}.mode-switch button{min-height:40px;font-size:11px}.shot-grid:empty{display:none}
@media(max-width:1150px){.mobile-card .shot-grid{gap:6px}.mobile-card .shot img{height:55px}}

.url-bar:focus-within{box-shadow:0 0 0 2px #a3aff6,0 3px 8px #00000003}.timeline[inert]{opacity:.65}.shot:focus-visible{outline-offset:1px}
@media(max-width:340px){.shot-grid,.mobile-card .shot-grid{grid-template-columns:repeat(4,minmax(40px,1fr))}}