/* Shot workspace: warm graphite, court-orange accents, measured progress. */
.workspace{background:#161713;border-color:#36382e;border-radius:22px;box-shadow:0 24px 80px #0003}
.editor-heading h2{font-size:24px;letter-spacing:-.8px}.editor-heading #replace{border:1px solid #44463c;border-radius:100px;padding:10px 15px;min-height:44px;white-space:nowrap}
#editor,#editor:has(#effects:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr);gap:20px 28px;padding:0 26px 26px}
#editor:has(#effects:not([hidden])){grid-template-columns:minmax(0,1fr) 270px}
#editor .editor-heading{grid-column:1/-1;padding:24px 0 0;min-width:0}
#editor .player{grid-column:1;grid-row:2;margin:0;aspect-ratio:4/3;border:1px solid #ffffff13;border-radius:14px;background:#080907}
#editor #effects{grid-column:2;grid-row:2/4;padding:18px 0 0 24px;border-left:1px solid var(--line)}
#editor #status-panel{grid-column:1;grid-row:3;padding:20px;border:1px solid #3b3c30;border-radius:14px;background:linear-gradient(115deg,#242319,#191a15);min-width:0}
.status-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px}.status-heading>div{min-width:0}.status-kicker{display:block;color:#c6a77b;font-size:9px;font-weight:700;letter-spacing:1.8px;margin-bottom:5px}
#status-title{font-size:19px;letter-spacing:-.4px;color:#f7f2e8;line-height:1.25}.status-orbit{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#ff8b2b17;color:#ff9b50}.status-orbit svg{width:32px;height:32px;stroke:currentColor;stroke-width:1.2}
.is-busy .status-orbit svg{animation:court-roll 4s linear infinite}#progress-value{margin-left:auto;font-size:20px;font-variant-numeric:tabular-nums;color:#ffaf70;font-weight:600}
#status-panel #status{font-size:13px;line-height:1.5;color:#c2c2b5;margin:0 0 12px}
#status-panel progress{display:block;appearance:none;-webkit-appearance:none;width:100%;max-width:none;height:5px;border:0;border-radius:20px;overflow:hidden;margin:15px 0;background:#444438;color:#ff9b50}
progress::-webkit-progress-bar{background:#444438;border-radius:20px}progress::-webkit-progress-value{background:#ff9b50;border-radius:20px;transition:width .3s}progress::-moz-progress-bar{background:#ff9b50;border-radius:20px}
#status-panel progress:indeterminate{background:linear-gradient(90deg,#444438 0 30%,#ff9b50 50%,#444438 70%);background-size:220% 100%;animation:court-load 2s ease-in-out infinite}progress:indeterminate::-webkit-progress-bar{background:transparent}
.status-footer{display:flex;justify-content:space-between;gap:12px;color:#96998a;font-size:11px;line-height:1.5;margin-top:14px}#status-elapsed{white-space:nowrap;font-variant-numeric:tabular-nums}#status-panel:not(.is-busy) .status-footer{display:none}
#status-panel button{min-height:44px;margin-right:12px}#status-panel #cancel-job{color:#b9bcad;text-decoration:underline;text-underline-offset:4px}#status-panel[data-phase=error]{border-color:#8e573b;background:#2c211a}#status-panel[data-phase=ready]{border-color:#46533d;background:#1d241a}
#editor #hoop-panel{grid-column:1;grid-row:2;padding:0;min-width:0}#editor.choosing-hoop .player{display:none}#hoop-panel h2{font-size:24px}#hoop-panel>p{font-size:13px}#hoop-panel .hoop-frame{border:1px solid #44463c;border-radius:12px;overflow:hidden;margin:16px 0}#hoop-panel #hoop-confirm{border-radius:100px;min-height:46px;padding:12px 22px}#hoop-panel .text-button{padding:12px;min-height:44px}#hoop-frame-label{font-size:11px;color:#a5a797}#hoop-boxes button{background:#171912b3;box-shadow:0 0 0 4px #ff861b30;font-weight:bold}
#editor #trim-panel{grid-column:1/-1;padding:20px 0}#effects .section-heading h2{font-size:18px}#effects .section-heading>span{line-height:1.5}.is-busy #effects{opacity:.55}
@keyframes court-roll{to{transform:rotate(360deg)}}@keyframes court-load{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(max-width:760px){header{height:auto;min-height:76px;padding:18px 20px;gap:16px}header nav{gap:18px}main{padding:0 14px}.intro{padding:30px 0 24px}.intro h1{font-size:34px;letter-spacing:-1.6px}.intro p{font-size:14px}.workspace{border-radius:18px}.stepbar{padding:16px}#editor,#editor:has(#effects:not([hidden])){grid-template-columns:minmax(0,1fr);gap:16px;padding:0 14px 18px}#editor .editor-heading{padding:18px 0 0;gap:10px}.editor-heading h2{font-size:20px}.editor-heading p{max-width:180px}#editor .player,#editor:has(#effects:not([hidden])) .player{grid-column:1;grid-row:2;aspect-ratio:4/3}#editor #status-panel{grid-row:3;padding:16px}#editor #effects,#editor:has(#effects:not([hidden])) #effects{grid-column:1;grid-row:4;border:0;border-top:1px solid var(--line);padding:18px 0 0}#editor #trim-panel{grid-row:4}#status-title{font-size:18px}.status-footer{font-size:10px}.status-heading{gap:10px}.status-orbit{width:38px;height:38px;flex-basis:38px}#editor #hoop-panel{grid-column:1;grid-row:2}#hoop-panel h2{font-size:22px}.editor-heading #replace{font-size:11px;padding:8px 12px}#effects .effect-list{margin:22px 0 12px}}
@media(prefers-reduced-motion:reduce){.is-busy .status-orbit svg,#status-panel progress:indeterminate{animation:none}progress::-webkit-progress-value{transition:none}}

/* Direct hoop selection: detector bounds are the visible control; no numbered badge. */
#hoop-boxes button{transform:none;min-width:0;min-height:0;padding:0;border:2px solid #ff861b;border-radius:3px;background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation}
#hoop-boxes button::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}
#hoop-boxes button[aria-pressed=true]{border:3px solid #57ed9c;background:#57ed9c18;box-shadow:0 0 0 1px #1118}
#hoop-boxes button:focus-visible{outline:2px solid white;outline-offset:4px}