@font-face{font-family:Pretendard;src:url(../fonts/PretendardVariable.woff2) format("woff2");font-weight:100 900;font-display:swap}:root{font-family:Pretendard,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#eef2f8;background:#060914;color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-height:100svh;background:radial-gradient(900px 500px at 50% 0%,rgba(49,130,246,.14),transparent 68%),radial-gradient(700px 500px at 86% 70%,rgba(139,124,255,.08),transparent 72%),#060914}button,input{font:inherit}button{color:inherit}.app-shell{min-height:100svh}.topbar{height:64px;padding:0 clamp(16px,3vw,42px);display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid rgba(255,255,255,.09);background:#060914c7;backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:11px;min-width:0}.brand-mark{width:32px;height:32px;border-radius:10px;flex:0 0 auto;background:linear-gradient(145deg,#3182f6,#7568ec 56%,#3dd6a8);box-shadow:0 0 24px #527aff52}.brand div{display:flex;flex-direction:column;min-width:0}.brand strong{font-size:14px;letter-spacing:-.015em}.brand span:not(.brand-mark){margin-top:2px;color:#748096;font-size:10px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}.live-badge{display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 11px;color:#aeb9c9;font-size:10px;font-weight:800;letter-spacing:.08em}.live-badge i{width:6px;height:6px;border-radius:50%;background:#3dd6a8;box-shadow:0 0 10px #3dd6a8}.stage-wrap{width:min(1500px,calc(100vw - 28px));margin:clamp(16px,2.2vw,30px) auto 0}.stage{aspect-ratio:16 / 9;width:100%;position:relative;overflow:hidden;border-radius:24px;background:#050812;border:1px solid rgba(255,255,255,.13);box-shadow:0 42px 120px #00000075,0 0 100px -60px #7fb2ff}.start-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:16px;border:0;background:#03070f9e;backdrop-filter:blur(8px);cursor:pointer}.start-overlay>span:last-child{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.start-overlay b{font-size:clamp(17px,2vw,26px);letter-spacing:-.03em}.start-overlay small{margin-top:6px;color:#9ca8ba;font-size:clamp(10px,1vw,13px)}.start-orb{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#08101d;background:#fff;font-size:18px;box-shadow:0 0 46px #7fb2ff59}.source-badge{position:absolute;left:14px;top:14px;z-index:9;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#050912ad;backdrop-filter:blur(12px);padding:7px 10px;font-size:10px;font-weight:800;letter-spacing:.09em;color:#b7c4d6;pointer-events:none}.sections{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-top:11px}.section{min-width:0;min-height:58px;display:grid;grid-template-columns:26px minmax(0,1fr);gap:7px;align-items:center;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:#ffffff07;padding:9px;text-align:left;cursor:pointer;transition:.18s ease}.section:hover{background:#ffffff0f;border-color:#ffffff29}.section.active{background:#3182f621;border-color:#7fb2ff8c;box-shadow:inset 0 0 24px #3182f60f}.section em{font-style:normal;color:#66758d;font-size:10px;font-weight:800}.section.active em{color:#87b8ff}.section span{min-width:0;display:flex;flex-direction:column}.section b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;letter-spacing:-.015em}.section small{margin-top:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#66758d;font-size:8px;font-weight:700;letter-spacing:.07em}.transport{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;gap:14px;align-items:center;margin-top:10px}.transport-buttons{display:flex;gap:7px}.transport button{height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;padding:0 13px;font-size:11px;font-weight:760;cursor:pointer}.transport button:hover:not(:disabled){background:#ffffff13;border-color:#ffffff2e}.transport button:disabled{opacity:.28;cursor:default}.transport button.primary{border:0;background:linear-gradient(135deg,#3182f6,#7568ec);color:#fff;min-width:102px}.scrubber{min-width:0}.time{display:flex;justify-content:space-between;color:#69768b;font-size:9px;font-variant-numeric:tabular-nums;margin:0 1px 4px}.scrubber input{--progress: 0%;appearance:none;width:100%;height:5px;display:block;margin:0;border-radius:999px;background:linear-gradient(90deg,#7fb2ff 0 var(--progress),rgba(255,255,255,.09) var(--progress) 100%);cursor:pointer}.scrubber input::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 12px #7fb2ffa6}.scrubber input::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}.utility{display:flex;gap:7px}.utility button{width:40px;padding:0}.hint{color:#58667c;font-size:9px;text-align:right;margin:9px 2px 24px}@media(max-width:900px){.stage-wrap{width:calc(100vw - 16px);margin-top:9px}.stage{border-radius:15px}.sections{display:flex;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.sections::-webkit-scrollbar{display:none}.section{flex:0 0 142px}.transport{grid-template-columns:1fr auto}.scrubber{grid-column:1 / -1;grid-row:1}.transport-buttons,.utility{grid-row:2}}@media(max-width:560px){.topbar{height:56px;padding:0 11px}.brand span:not(.brand-mark),.live-badge{display:none}.brand-mark{width:28px;height:28px}.stage-wrap{width:calc(100vw - 10px);margin-top:6px}.source-badge{top:8px;left:8px;padding:5px 8px;font-size:8px}.start-overlay{flex-direction:column;gap:10px;padding:20px}.start-overlay>span:last-child{align-items:center;text-align:center}.start-overlay small{max-width:290px}.start-orb{width:46px;height:46px}.section{flex-basis:128px;min-height:53px}.transport{gap:8px}.transport-buttons{width:100%}.transport-buttons button{flex:1;padding:0 8px}.transport button{height:38px}.utility button{width:38px}.hint{text-align:center;margin-bottom:16px}}