:root{color-scheme:dark;--bg:#080b10;--panel:#121821;--panel2:#171f2a;--line:#2a3748;--text:#f2f7ff;--muted:#9caabd;--blue:#36c6ff;--cyan:#54e3d1;--danger:#ff8a9d}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 10% 0,#123853 0,transparent 31rem),radial-gradient(circle at 96% 80%,#123b3c 0,transparent 29rem),var(--bg);color:var(--text);font:16px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}.topbar,.shell{width:min(1220px,calc(100% - 36px));margin:auto}.topbar{min-height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.12em;font-size:.88rem}.brand span,.brand b{color:var(--cyan)}.api-note{color:var(--muted);font-size:.76rem}.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:end;padding:54px 0 34px}.eyebrow{margin:0 0 7px;color:var(--cyan);font-size:.7rem;letter-spacing:.16em;font-weight:800}.hero h1{margin:0 0 13px;font-size:clamp(2.5rem,6vw,5rem);line-height:.94;letter-spacing:-.065em}.hero em{color:var(--blue);font-style:normal;text-shadow:0 0 35px #36c6ff55}.hero p:not(.eyebrow){max-width:580px;margin:0;color:var(--muted);font-size:1.05rem}.how,.panel{background:linear-gradient(145deg,#172330e8,#10161fe8);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 45px #0004}.how{padding:20px 22px}.how ol{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:10px;color:#c8d4e3;font-size:.9rem}.how b{display:inline-grid;place-items:center;width:21px;height:21px;margin-right:7px;border-radius:50%;background:#17445c;color:var(--cyan);font-size:.73rem}.video-card{padding:20px}.video-load label,label{display:block;margin-bottom:7px;color:#c8d3e2;font-size:.83rem;font-weight:700}.video-load>div,.save-actions,.loop-actions,.transport{display:flex;gap:10px}.video-load input{flex:1}.status{min-height:1.3em;margin:10px 0 0;color:var(--muted);font-size:.84rem}.status.error{color:#ff9baa}.status.ok{color:var(--cyan)}input,textarea,button{font:inherit}input[type=text],textarea{width:100%;border:1px solid #334358;border-radius:10px;background:#0b1017;color:var(--text);padding:12px;outline:none}input:focus,textarea:focus,button:focus-visible{outline:3px solid #36c6ff80;outline-offset:2px}button{border:1px solid #3c4c60;border-radius:10px;background:#202b39;color:#eaf3ff;padding:10px 13px;cursor:pointer;font-size:.87rem;font-weight:750}button:hover{border-color:#58d8ff;background:#27394b}.primary{background:linear-gradient(135deg,#128bc5,#21bfc9);border-color:#48ddeb;color:#03131a}.big{padding:13px 22px;font-size:1rem}.player-wrap{position:relative;aspect-ratio:16/9;margin-top:16px;overflow:hidden;border-radius:12px;background:#05080c}.player-wrap #player,.player-wrap iframe{width:100%;height:100%}.workspace{display:grid;grid-template-columns:1.32fr .68fr;gap:18px;margin:18px 0 50px}.left-col,.right-col{display:grid;gap:18px;align-content:start}.control-panel,.loop-panel,.metronome,.save-panel{padding:20px}.panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:17px}.panel-title h2{margin:0;font-size:1.35rem;letter-spacing:-.04em}.time{font-variant-numeric:tabular-nums;font-weight:800;color:#e7f8ff}.time.current{padding:8px 12px;border:1px solid #2d5870;border-radius:10px;background:#0c1d27;color:var(--cyan);font-size:1.16rem}.speed-group{display:flex;flex-wrap:wrap;gap:7px}.speed-group button.active{background:#24566b;border-color:var(--cyan);color:#baf7ff}.readout{margin:13px 0 0;color:var(--muted);font-size:.86rem}.readout strong{color:var(--cyan)}.badge{border:1px solid #415168;border-radius:99px;padding:4px 9px;color:var(--muted);font-size:.74rem;font-weight:700}.badge.on{color:#9affe9;border-color:var(--cyan);background:#103d3b}.points{display:grid;grid-template-columns:1fr 1fr;gap:12px}.point{display:grid;grid-template-columns:auto 1fr;gap:7px;align-items:center;padding:13px;border:1px solid #314056;border-radius:13px;background:#0c121a}.point>span{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#1b4a62;color:#8ae8ff;font-weight:900}.point-b>span{background:#235451;color:#a4ffec}.point button{grid-column:1/-1}.fine-tune{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:15px}.fine-tune h3{margin:0 0 7px;color:#b9c9dc;font-size:.82rem}.adjust{display:flex;flex-wrap:wrap;gap:6px}.adjust button{padding:7px 8px;font-size:.73rem}.loop-actions{flex-wrap:wrap;align-items:center;margin-top:17px}.loop-actions span{margin-left:auto;color:var(--muted);font-size:.83rem}.loop-actions strong{color:var(--cyan)}.metronome label{display:flex;justify-content:space-between;margin-top:16px}.metronome output{color:var(--cyan)}input[type=range]{width:100%;accent-color:var(--cyan)}.toggle[aria-pressed=true]{background:#17554f;border-color:var(--cyan);color:#abfff1}.hint{margin:14px 0 0;color:var(--muted);font-size:.78rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.save-panel>label{margin-top:12px}.save-actions{margin-top:14px;flex-wrap:wrap}.saved-list{display:grid;gap:9px;margin-top:18px}.saved-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border-top:1px solid #2a3748;padding-top:12px}.saved-item h3{margin:0;color:#eaf6ff;font-size:.92rem}.saved-item p{margin:2px 0 0;color:var(--muted);font-size:.77rem}.saved-buttons{display:flex;gap:6px}.saved-buttons button{padding:7px 8px;font-size:.74rem}.empty{color:var(--muted);font-size:.83rem}@media(max-width:800px){.hero,.workspace{grid-template-columns:1fr}.hero{padding-top:36px}.how{max-width:600px}.right-col{grid-template-columns:1fr 1fr}.save-panel{grid-column:1/-1}}@media(max-width:580px){.topbar,.shell{width:min(100% - 24px,1220px)}.api-note{display:none}.video-load>div,.transport{flex-direction:column}.video-load button{width:100%}.points,.fine-tune,.form-grid,.right-col{grid-template-columns:1fr}.loop-actions span{width:100%;margin:3px 0 0}.hero h1{font-size:2.75rem}.control-panel,.loop-panel,.metronome,.save-panel,.video-card{padding:15px}.adjust button{padding:7px}.saved-item{grid-template-columns:1fr}.saved-buttons{justify-content:flex-start}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}