.upload-shell{padding-top:28px;padding-bottom:80px;min-height:75vh}.upload-shell h1{font-size:clamp(32px,4vw,48px);letter-spacing:-1.8px}.upload-kicker{font:10px var(--mono);letter-spacing:1.5px;color:var(--accent);margin-bottom:12px}.upload-subtitle{color:var(--muted);margin-top:16px;font-size:15px}.concept-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:44px;font-size:12px;color:var(--muted);gap:16px}.concept-nav>div{display:flex;gap:6px;background:#0c1330;border:1px solid var(--line);padding:4px;border-radius:9px}.concept-nav>div a{padding:8px 14px;border-radius:6px}.concept-nav [aria-current=page]{background:#293154;color:var(--ink)}.upload-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:16px}.upload-puzzle{border:1px solid var(--line);padding:12px;border-radius:9px;font:12px var(--mono);color:var(--muted)}.concept-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}.concept-card{padding:22px;background:linear-gradient(145deg,#151c3d,#0b1128);border:1px solid #818cf830;border-radius:16px;transition:border-color .2s,transform .2s}.concept-card:hover{border-color:var(--accent);transform:translateY(-3px)}.concept-card>span{display:block;font:11px var(--mono);color:var(--accent);margin-top:24px}.concept-card h2{font-size:23px;letter-spacing:-.7px;margin:12px 0}.concept-card p{font-size:13px;line-height:1.7;color:var(--muted);min-height:50px}.concept-card strong{display:block;font-size:12px;font-weight:500;margin-top:24px}.concept-sketch{height:170px;padding:20px;background:#060b1c;border:1px solid var(--line);border-radius:8px;display:flex;gap:14px}.concept-sketch i{display:block;background:radial-gradient(ellipse at 50% 50%,#5157a0,#182348);border:1px solid #818cf845;border-radius:6px}.concept-sketch b{display:block;height:25px;background:#253053;border-radius:4px}.sketch-studio i{flex:1.4}.sketch-studio>div{flex:1;display:grid;align-content:center;gap:14px}.sketch-guided{flex-direction:column;padding:20px 42px}.sketch-guided>div{display:flex;gap:8px}.sketch-guided b{flex:1;height:4px}.sketch-guided b:first-child{background:var(--accent)}.sketch-guided i{flex:1}.sketch-desk{flex-direction:column;gap:10px}.sketch-desk i{height:42px}.sketch-desk b{height:14px}.sketch-desk b:last-child{width:35%;margin-left:auto;background:#4f46e5}.prototype-note{font-size:12px;color:var(--muted);margin-top:30px;line-height:1.7}.upload-workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}.upload-video-panel{grid-column:1;grid-row:1 / span 2;min-width:0}.upload-scramble{grid-column:2;grid-row:1}.upload-window{grid-column:2;grid-row:2}.drop-zone{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:370px;padding:32px;border:1px dashed #818cf86b;border-radius:14px;background:radial-gradient(ellipse at 50% 35%,#3a3d7040,transparent 75%),#0b122c;cursor:pointer;text-align:center;gap:10px}.drop-zone:hover,.drop-zone.drag-over{border-color:#a5b4fc;background-color:#151e3b}.drop-zone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.drop-zone:focus-within{outline:2px solid var(--accent);outline-offset:4px}.upload-icon{display:grid;place-items:center;width:56px;height:56px;border:1px solid #818cf84b;border-radius:14px;color:var(--accent);font-size:28px;margin-bottom:12px;background:#818cf812}.drop-zone strong{font-size:20px;font-weight:550}.drop-zone>span:not(.upload-icon){font-size:14px;color:var(--accent)}.drop-zone small{font-size:11px;color:var(--muted);margin-top:12px}.sample-button{display:block;margin:14px auto 0;background:none;border:0;color:var(--muted);font-size:12px;padding:6px}.sample-button:hover{color:var(--ink)}.upload-player{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#040812}.upload-player video{display:block;width:100%;max-height:410px;aspect-ratio:16/9;object-fit:contain}.file-line{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;font-size:12px}.file-line>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-line button{border:0;background:none;color:var(--accent);font-size:12px}.upload-player>p{font-size:12px;color:var(--muted);padding:0 16px 16px;line-height:1.6}.form-panel{background:#0c1330a8;border:1px solid var(--line);border-radius:14px;padding:24px;min-width:0}.field-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px;font-weight:550}.field-heading>span:last-child:not(:first-child){font-size:10px;font-weight:400;color:var(--muted)}.field-hint{font-size:12px;line-height:1.7;color:var(--muted);margin:8px 0 16px}.upload-shell textarea,.upload-shell input[type=number]{width:100%;background:#070e23;border:1px solid #344068;border-radius:7px;color:var(--ink);font:14px/1.8 var(--mono);padding:12px;resize:vertical}.upload-shell textarea::placeholder,.upload-shell input::placeholder{color:#727da7}.upload-shell textarea:focus{outline:2px solid var(--accent);outline-offset:2px}.field-feedback{font-size:11px;line-height:1.6;color:var(--muted);margin-top:10px}.field-feedback.invalid{color:#fda4af}.field-feedback.valid{color:#5eead4}.import-note{font-size:11px;margin-top:16px;color:var(--muted)}.import-note summary{cursor:pointer}.import-note p{margin-top:10px;line-height:1.7}.time-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.time-fields label{display:block;font-size:11px;color:var(--muted);margin-bottom:8px}.time-fields>div>div{display:flex;border:1px solid #344068;background:#070e23;border-radius:7px;overflow:hidden}.time-fields input[type=number]{min-width:0;border:0;border-radius:0;padding:9px;font-size:13px}.time-fields button{flex-shrink:0;background:#192342;border:0;border-left:1px solid #344068;color:var(--ink);font-size:10px;padding:0 9px}.window-track{height:5px;background:#1c274b;border-radius:5px;position:relative;margin-top:20px;overflow:hidden}.window-track i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);border-radius:5px}.recording-note{grid-column:1 / -1;font-size:12px;color:var(--muted)}.recording-note summary{cursor:pointer;width:fit-content}.recording-note p{line-height:1.8;max-width:800px;margin-top:12px}.upload-actions{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.upload-actions>p{font-size:12px;line-height:1.6;color:var(--muted);max-width:500px}.upload-actions>div{display:flex;gap:12px;flex-shrink:0}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:12px 20px;border:0;border-radius:8px;font-size:13px;font-weight:550;cursor:pointer}.primary-button{background:#4f46e5;color:white}.primary-button:hover{background:#6366f1}.secondary-button{background:#192342;color:var(--ink)}.upload-shell [hidden]{display:none!important}.upload-steps{list-style:none;display:flex;gap:10px;padding:0;margin:0 0 32px;counter-reset:steps}.upload-steps li{counter-increment:steps;display:flex;align-items:center;gap:10px;flex:1;border-bottom:2px solid var(--line);padding:0 0 16px;font-size:12px;color:var(--muted)}.upload-steps li:before{content:counter(steps);display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:24px;height:24px;font:11px var(--mono)}.upload-steps [aria-current=step]{color:var(--ink);border-color:var(--accent)}.upload-steps [aria-current=step]:before{background:#4f46e5;border-color:#4f46e5;color:white}.variant-2{max-width:850px}.variant-2 .upload-workspace{display:block}.variant-2 .form-panel{padding:30px}.variant-2 .recording-note{margin-top:22px}.variant-2 .upload-video-panel.timing-preview{margin-bottom:20px}.variant-2 .timing-preview video{max-height:260px}.variant-2 .drop-zone{min-height:300px}.variant-3{max-width:1080px}.variant-3 .upload-workspace{grid-template-columns:1fr 1fr;gap:0;background:#0b132c;border:1px solid #818cf835;border-radius:14px;overflow:hidden}.variant-3 .upload-video-panel{grid-row:1;grid-column:1 / -1;padding:20px;border-bottom:1px solid var(--line)}.variant-3 .drop-zone{min-height:130px;padding:18px;gap:6px;background:#111b36}.variant-3 .upload-icon{width:34px;height:34px;font-size:20px;margin:0}.variant-3 .drop-zone strong{font-size:16px}.variant-3 .drop-zone small{display:none}.variant-3 .sample-button{margin-top:8px}.variant-3 .upload-player video{max-height:280px}.variant-3 .upload-scramble{grid-row:2;grid-column:1}.variant-3 .upload-window{grid-row:2;grid-column:2}.variant-3 .form-panel{border:0;background:none;border-radius:0}.variant-3 .upload-window{border-left:1px solid var(--line)}.variant-3 .recording-note{padding:0 24px 24px}.overview-card{display:flex;align-items:center;gap:20px;padding:24px;border:1px solid #818cf838;background:#0c1330;border-radius:14px}.overview-file-icon{font-size:26px;color:var(--accent);padding:12px 18px;background:#192342;border-radius:10px}.overview-card h2{font-size:16px;overflow-wrap:anywhere}.overview-card p{font:11px var(--mono);color:var(--muted);margin-top:10px}.overview-status{margin-left:auto;white-space:nowrap;font-size:11px;color:#a5b4fc;padding:8px 12px;background:#818cf815;border:1px solid #818cf838;border-radius:20px}
@media(max-width:850px){.concept-cards{grid-template-columns:1fr}.concept-card{display:grid;grid-template-columns:180px 1fr;column-gap:24px}.concept-sketch{grid-row:1 / span 4;height:180px}.concept-card>span{margin-top:0}.concept-card strong{margin-top:12px}.upload-workspace{grid-template-columns:1fr}.upload-video-panel,.upload-scramble,.upload-window{grid-column:1;grid-row:auto}.drop-zone{min-height:260px}.upload-player video{max-height:320px}.form-panel{padding:20px}.variant-3 .upload-workspace{grid-template-columns:1fr}.variant-3 .upload-scramble{grid-column:1;grid-row:auto}.variant-3 .upload-window{grid-column:1;grid-row:auto;border-left:0;border-top:1px solid var(--line)}}
@media(max-width:520px){.upload-shell{padding-top:16px;padding-bottom:50px}.concept-nav{align-items:flex-start;flex-direction:column;margin-bottom:30px}.concept-nav>div{width:100%}.concept-nav>div a{flex:1;text-align:center;padding:8px 10px}.upload-heading{margin-bottom:24px}.upload-shell h1{font-size:33px;letter-spacing:-1.2px}.upload-puzzle{display:none}.concept-card{display:block}.concept-sketch{height:150px}.concept-card>span{margin-top:20px}.concept-card p{min-height:0}.upload-actions{align-items:stretch;flex-direction:column;gap:16px}.upload-actions>div{justify-content:flex-end}.upload-actions .primary-button{flex:1}.variant-2 .form-panel{padding:20px}.time-fields{gap:10px}.field-heading{flex-wrap:wrap;gap:6px}.overview-card{flex-wrap:wrap;padding:18px;gap:14px}.overview-status{margin-left:0}.upload-heading>.primary-button{padding:10px;font-size:11px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.concept-card{transition:none}.concept-card:hover{transform:none}}
/* Scramble input is optional when the clip includes an inspection. */
.scramble-modes{border:0;padding:0;margin:16px 0;display:flex;flex-wrap:wrap;gap:8px}.scramble-modes label{display:flex;align-items:center;gap:8px;border:1px solid #344068;border-radius:7px;padding:10px;font-size:11px;cursor:pointer;background:#080f25}.scramble-modes label:has(:checked){border-color:var(--accent);background:#818cf819;color:#eef1ff}.scramble-modes input{accent-color:var(--accent);margin:0}.inspection-visual{display:flex;align-items:center;gap:14px;padding:18px 14px;border-radius:8px;background:linear-gradient(90deg,#2dd4bf18 65%,#818cf818 65%);font:11px var(--mono);color:#5eead4}.inspection-visual span:last-child{color:var(--accent);margin-left:auto}.inspection-visual i{font-style:normal;color:var(--muted)}.inspection-caution{font-size:12px;line-height:1.7;color:#fcd58a;margin:14px 0}.inspection-confirm{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.7;color:var(--muted)}.inspection-confirm input{accent-color:var(--accent);margin-top:5px;flex-shrink:0}
.trim-editor{margin:18px 0 22px}.trim-labels,.trim-scale{display:flex;justify-content:space-between;gap:12px;font:10px var(--mono);color:var(--muted)}.trim-labels{color:#c7d2fe;margin-bottom:8px}.trim-strip{position:relative;height:76px;margin:0 12px;background:repeating-linear-gradient(90deg,#1b274b 0 9%,#0b142a 9% 10%);border-radius:7px;cursor:crosshair;isolation:isolate}.trim-strip canvas{width:100%;height:100%;display:block;border-radius:7px;opacity:.7}.trim-selection{position:absolute;top:0;bottom:0;border-top:3px solid #a5b4fc;border-bottom:3px solid #a5b4fc;background:#818cf812;pointer-events:none}.trim-handle{position:absolute;top:-6px;bottom:-6px;width:28px;transform:translateX(-50%);padding:0;border:0;border-radius:6px;background:transparent;touch-action:none;cursor:ew-resize;z-index:3}.trim-handle:before{content:'';position:absolute;inset:4px 7px;background:#a5b4fc;border-radius:5px;box-shadow:0 1px 6px #0007}.trim-handle span{position:relative;display:block;width:2px;height:22px;background:#1e2851;margin:auto;pointer-events:none}.trim-handle:focus-visible{outline:2px solid #eef1ff;outline-offset:2px}.trim-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 5px #000;pointer-events:none;z-index:2}.trim-inspection{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,#2dd4bf33 0 5px,#2dd4bf0a 5px 10px);border-bottom:3px solid #5eead4;pointer-events:none}.trim-scale{margin-top:8px}.inspection-timing{font-size:11px;color:#5eead4;line-height:1.7;margin-top:12px}.upload-window .window-track{display:none}
.filming-guide{border-top:1px solid var(--line);padding-top:22px}.filming-guide>summary{color:var(--ink);font-size:14px;font-weight:550}.filming-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}.filming-cards article{border:1px solid var(--line);border-radius:12px;background:#0c13309c;overflow:hidden;padding-bottom:18px}.filming-cards svg{display:block;width:100%;height:155px;background:radial-gradient(ellipse at center,#1a2940,#0b142a)}.filming-cards h3{font-size:13px;color:var(--ink);font-weight:550;margin:16px 16px 0}.filming-cards p{font-size:12px;margin:8px 16px 0;line-height:1.7}.filming-guide .filming-footnote{font-size:11px;margin-top:14px}.variant-2 .filming-cards{gap:10px}.variant-2 .filming-cards svg{height:120px}.variant-3 .recording-note{padding-top:10px}
@media(max-width:650px){.filming-cards{grid-template-columns:1fr}.filming-cards article{display:grid;grid-template-columns:115px 1fr;padding:0;column-gap:0}.filming-cards svg,.variant-2 .filming-cards svg{height:100%;min-height:135px;grid-row:1 / span 2}.filming-cards h3{font-size:12px;margin-top:14px}.filming-cards p{font-size:11px;margin-bottom:14px}.scramble-modes{display:grid;grid-template-columns:1fr}.trim-strip{height:68px}.trim-handle{width:40px}.trim-handle:before{inset:4px 12px}}
.boundary-tools{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}.boundary-tools button{border:1px solid #344068;border-radius:6px;background:#0a142d;padding:9px 11px;color:var(--muted);font-size:11px}.boundary-tools button[aria-pressed=true]{background:#818cf82b;border-color:var(--accent);color:var(--ink)}.boundary-tools button[data-boundary=inspection][aria-pressed=true]{border-color:#5eead4;color:#5eead4}.trim-labels{margin-top:15px}.inspection-handle:before{background:#5eead4}.inspection-handle{z-index:4;top:-6px;bottom:-6px}.inspection-input{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px;font-size:11px;color:#5eead4}.inspection-input input[type=number]{max-width:110px;padding:6px 10px}.inspection-input span{color:var(--muted)}.mask-stage{position:relative}.mask-overlay{position:absolute;pointer-events:none;overflow:hidden}.mask-overlay.editing{pointer-events:auto;touch-action:none;cursor:crosshair;background:#0000000a}.exclusion-box{position:absolute;border:2px solid #fbbf24;background:repeating-linear-gradient(135deg,#000b 0 6px,#fbbf2440 6px 8px);pointer-events:none}.exclusion-box span{font:10px var(--mono);background:#fbbf24;color:#101827;padding:2px 4px;white-space:nowrap}.mask-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;border-top:1px solid var(--line)}.mask-toolbar button{padding:8px 10px;border:1px solid #344068;border-radius:6px;background:#101b35;color:var(--ink);font-size:11px}.mask-toolbar button[aria-pressed=true]{border-color:#fbbf24;color:#fbbf24}.mask-toolbar span{font-size:10px;color:var(--muted);margin-left:auto}.upload-player #mask-help{padding:0 14px 14px;font-size:11px;line-height:1.7;color:#fcd58a}.footage-guide{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;align-items:start}.footage-guide figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}.footage-guide img{display:block;width:100%}.footage-guide figcaption{padding:12px;font-size:12px;line-height:1.6;background:#0c1330}.footage-tips article+article{margin-top:20px}.footage-tips h3{font-size:14px;color:var(--ink);font-weight:550}.footage-tips p{font-size:12px;margin-top:6px;line-height:1.7}@media(max-width:650px){.footage-guide{grid-template-columns:1fr}.mask-toolbar{gap:6px}.mask-toolbar button{font-size:10px;padding:8px}.mask-toolbar span{width:100%;margin-left:0}}
.mobile-trim-hint,.mobile-playhead,#mobile-trim-preview{display:none}
@media(max-width:650px){
 .desktop-trim-hint{display:none}.mobile-trim-hint,.mobile-playhead,#mobile-trim-preview{display:block}
 #mobile-trim-preview{margin:16px -8px}.upload-window #mobile-trim-preview video{max-height:245px}
 .trim-editor{display:flex;flex-direction:column}.boundary-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));order:0}
 .boundary-tools button{min-height:48px;font-size:12px;padding:9px 5px}.boundary-tools:has([data-boundary=inspection][hidden]){grid-template-columns:1fr 1fr}
 #place-boundary{grid-column:1 / -1;background:#4f46e5;color:white;border:0;min-height:48px;font-size:13px;margin-top:8px}
 .boundary-tools{display:contents}.boundary-tools [data-boundary]{order:0;min-height:44px;margin-bottom:7px;text-align:left;padding-left:14px}
 #boundary-help{order:1}.mobile-playhead{order:2;margin-top:14px}.trim-labels{order:3}.trim-strip{order:4;height:48px;margin:0;cursor:pointer}.trim-scale{order:5}#place-boundary{order:6;margin-top:18px}#inspection-timing{order:7}
 .trim-handle{display:none!important}.trim-selection{border-width:2px}.trim-inspection{border-bottom-width:2px}
 .mobile-playhead label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.mobile-playhead output{font:13px var(--mono);color:var(--ink)}
 .mobile-playhead input[type=range]{display:block;width:100%;height:44px;margin:4px 0;touch-action:pan-y}
 .mobile-nudges{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 .mobile-nudges button{min-height:46px;padding:0 3px;border:1px solid #344068;border-radius:7px;background:#14203c;color:var(--ink);font-size:11px}
 .upload-window>.time-fields,.upload-window>.inspection-input{display:none!important}
}

@media(max-width:650px){.preview-unavailable .upload-window>.time-fields{display:grid!important}.preview-unavailable .upload-window>.inspection-input:not([hidden]){display:flex!important}}
@media(max-width:650px){
 .trim-editor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 6px}
 .boundary-tools [data-boundary]{padding:8px 5px;text-align:center;min-height:48px;font-size:11px}
 #boundary-help,.mobile-playhead,.trim-labels,.trim-strip,.trim-scale,#inspection-timing,#place-boundary{grid-column:1 / -1}
 #mobile-trim-preview .file-line{display:none}
 #mobile-trim-preview{position:sticky;top:8px;z-index:6;background:#060b1c;border-radius:14px}
}


