:root{font-family:Inter,"Noto Sans TC",system-ui,sans-serif;color:#e5ece6;background:#111a1b;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0}a{color:#a2d5cb;text-decoration:none}header{max-width:1160px;margin:auto;padding:26px 30px;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.1em;border-bottom:1px solid #2b3737}header span{color:#8a9f9b}main{max-width:1160px;margin:auto;padding:32px 30px}.intro{margin:0 0 26px}.eyebrow{color:#a2c5b5;font-size:11px;letter-spacing:.2em}h1{font-size:clamp(24px,3.4vw,38px);font-weight:550;letter-spacing:.02em;margin:12px 0}.intro>p:last-child{color:#91a4a0;font-size:14px}.workbench{display:grid;grid-template-columns:210px 1fr;gap:20px}nav{display:flex;flex-direction:column;gap:7px}button,select{font:inherit;color:inherit;background:#213032;border:1px solid #3c4d4b;border-radius:7px;padding:9px 13px;cursor:pointer}button:hover{border-color:#a1cbbd}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #b6efdc;outline-offset:3px}button:disabled{opacity:.4;cursor:wait}nav button{text-align:left;padding:13px 15px;display:flex;align-items:center;gap:13px;background:#192426;border-color:#2c3b3b}nav button[aria-pressed=true]{background:#2c403e;border-color:#93bfb2}nav .number{font-size:11px;color:var(--accent)}nav strong{font-size:14px;font-weight:550}nav small{display:block;color:#91a7a0;font-size:11px;margin-top:5px}.viewer{position:relative;min-width:0;background:#192426;border:1px solid #354544;border-radius:12px;overflow:hidden}.viewer-top{position:absolute;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:flex-start;z-index:1}.viewer-top span{color:#a6bbb4;font-size:11px}h2{font-size:20px;font-weight:550;margin:5px 0}label{font-size:12px;color:#b6c9c1}input[type=checkbox]{accent-color:#b5e9d7}canvas{display:block;width:100%;height:390px;image-rendering:pixelated;touch-action:none;cursor:grab}.viewer-hint{position:absolute;top:362px;left:24px;font-size:11px;color:#9bafa8;pointer-events:none}#description{padding:0 24px;font-size:13px;color:#c4d4cc}.playback{padding:5px 24px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.playback button,.playback select{font-size:12px}.timeline{padding:18px 24px;display:flex;align-items:center;gap:13px}.timeline input{flex:1;min-width:50px;accent-color:#b6d9c7}.timeline output{font-size:11px;font-variant-numeric:tabular-nums;width:53px}#loading{position:absolute;inset:130px 0 auto;text-align:center;padding:20px;color:#d9ede5;background:#15211fe6}#loading[hidden]{display:none}footer{display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:12px;color:#91a7a0}@media(max-width:700px){main{padding:22px 16px}header{padding:20px 16px}.workbench{grid-template-columns:1fr}nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}nav button{padding:10px 8px;gap:6px}nav small{display:none}nav strong{font-size:12px}canvas{height:350px}.viewer-hint{top:322px}footer{flex-direction:column}.viewer-top{left:16px;right:16px}}

.combo-stages{display:flex;gap:6px;flex-wrap:wrap;padding:0 24px 14px}.combo-stages span{font-size:11px;padding:6px 9px;border:1px solid #41534f;border-radius:5px;color:#8fa39b}.combo-stages span[data-active=true]{color:#f0ffe9;background:#3b5550;border-color:#acd5b6}