:root[data-theme=light]{--text-1:#1d302d;--text-2:#677873;--text-3:#466f3a;--text-4:#f8fcf3;--bg-1:#f0f3eb;--bg-2:#e7ede1;--bg-3:#d9e1d5;--bg-4:#466f3a;--bg-5:#cbd5c5;--bg-6:#f7f9f2;color-scheme:light}:root[data-theme=dark]{--text-1:#eef3ed;--text-2:#9ca9a7;--text-3:#b7db9c;--text-4:#142015;--bg-1:#11181b;--bg-2:#182226;--bg-3:#222f32;--bg-4:#b7db9c;--bg-5:#31413e;--bg-6:#0d1417;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg-1);color:var(--text-1);font-family:Inter,Segoe UI,Microsoft YaHei,sans-serif}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--bg-5);background:var(--bg-2);color:var(--text-1);border-radius:9px;padding:10px 15px;transition:background .15s}button:hover{background:var(--bg-3)}button:focus-visible,input:focus-visible{outline:2px solid var(--text-3);outline-offset:3px}button:disabled{opacity:.45;cursor:wait}.primary,button.active{background:var(--bg-4);color:var(--text-4);border-color:var(--bg-4)}button.primary:hover,button.active:hover{background:var(--bg-4)}.shell{height:100dvh;min-height:640px;display:flex;flex-direction:column}.header{height:88px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid var(--bg-5)}.brand{display:flex;align-items:center;gap:16px}.brand-mark{border:1px solid var(--text-3);color:var(--text-3);border-radius:50%;height:39px;width:39px;display:grid;place-items:center;font-size:25px}.brand strong{font-size:20px;letter-spacing:3px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--text-2);margin-top:6px}.header-actions{display:flex;gap:8px}.workspace{display:flex;flex:1;min-height:0}.sidebar{width:280px;padding:35px 28px;display:flex;flex-direction:column;gap:22px;border-right:1px solid var(--bg-5);flex-shrink:0}.collection{display:grid;gap:9px}.collection button{text-align:left;font-size:12px;letter-spacing:1px;padding:15px}.description h1{font-size:34px;font-weight:500;line-height:1.3;letter-spacing:-1px;margin:0 0 20px}.description p{font-size:13px;line-height:1.95;color:var(--text-2);margin:0}.description .number{font-family:Georgia,serif;color:var(--text-3);font-size:53px;margin-bottom:16px;font-style:italic}.side-bottom{margin-top:auto;color:var(--text-2);font-size:11px;line-height:1.9}.tag{display:inline-block;border:1px solid var(--bg-5);border-radius:30px;padding:5px 11px;font-size:10px;color:var(--text-3);letter-spacing:1px;margin-bottom:12px}.stage{flex:1;position:relative;min-width:0;background:radial-gradient(ellipse at 55% 42%,var(--bg-3),var(--bg-1) 70%)}.viewport{position:absolute;inset:0}.viewport canvas{display:block;touch-action:none}.stage-top{position:absolute;top:23px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.phase{font-size:12px;letter-spacing:1px;color:var(--text-3)}.view-buttons{display:flex;gap:5px;pointer-events:auto}.view-buttons button{font-size:11px;padding:8px 12px}.hint{position:absolute;bottom:16px;left:0;width:100%;text-align:center;color:var(--text-2);font-size:11px;pointer-events:none}.loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:var(--bg-1);z-index:2;font-size:13px;color:var(--text-2)}.loader[hidden]{display:none}.spinner{width:27px;height:27px;border:2px solid var(--bg-5);border-top-color:var(--text-3);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.footer{flex-shrink:0;padding:20px 32px 24px;border-top:1px solid var(--bg-5);background:var(--bg-6)}.timeline{display:flex;align-items:center;gap:18px}.timeline input{flex:1;min-width:0}.time{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-2);width:90px;text-align:right}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:14px}.toolbar-group{display:flex;align-items:center;gap:12px}.speed-group{font-size:12px;color:var(--text-2);display:flex;gap:10px;align-items:center}.speed-group input{width:90px}input[type=range]{accent-color:var(--bg-4);cursor:pointer;height:4px}input[type=checkbox]{accent-color:var(--bg-4)}.auto{font-size:12px;color:var(--text-2);display:flex;align-items:center;gap:5px}.toast{position:fixed;left:50%;bottom:154px;transform:translate(-50%);background:var(--bg-4);color:var(--text-4);padding:11px 20px;border-radius:30px;font-size:12px;z-index:5;white-space:nowrap}.toast:empty{display:none}.footer button{font-size:12px}#play{min-width:90px}#speed-value{min-width:34px;font-variant-numeric:tabular-nums}@media(max-width:760px){.shell{min-height:660px}.header{height:68px;padding:0 16px}.brand{gap:10px}.brand strong{font-size:16px;letter-spacing:1px}.brand-mark{width:30px;height:30px;font-size:20px}.eyebrow{font-size:8px;letter-spacing:1px}.header-actions button{font-size:11px;padding:8px 10px}.workspace{flex-direction:column}.sidebar{width:100%;padding:12px 16px;border-right:none;border-bottom:1px solid var(--bg-5);gap:0}.collection{grid-template-columns:1fr 1fr;gap:8px}.collection button{padding:12px}.sidebar>.eyebrow,.description,.side-bottom{display:none}.stage{min-height:320px}.stage-top{top:14px;left:16px;right:16px}.view-buttons button{padding:7px 10px}.phase{font-size:10px}.hint{font-size:9px;bottom:12px}.footer{padding:14px 16px 18px}.toolbar{flex-wrap:wrap;gap:13px}.toolbar-group{gap:8px}.footer button{font-size:11px;padding:9px 11px}.speed-group{font-size:11px;gap:6px}.speed-group input{width:63px}.auto{font-size:11px}.toolbar-group:last-child{width:100%;justify-content:space-between}.time{font-size:10px}.toast{bottom:170px}}