:root{font-family:Inter,"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:#e1e7de;background:#101f27;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{height:68px;border-bottom:1px solid #47616a;display:flex;align-items:center;gap:30px;padding:0 max(24px,calc((100vw - 1240px)/2));font-size:12px;letter-spacing:.12em;background:#142630}header a{color:#dfc897;text-decoration:none}header b{margin-left:auto;color:#aac8bd}main{max-width:1240px;margin:auto;padding:36px 24px 60px}.eyebrow{font-size:11px;letter-spacing:.22em;color:#d4b878}h1{font-size:clamp(26px,3.5vw,43px);font-weight:650;letter-spacing:.04em;margin:12px 0}p{color:#abbfbd;font-size:14px;line-height:1.9;margin:12px 0 20px}.layout{display:grid;grid-template-columns:235px 1fr;gap:22px;margin:25px 0}aside,.stage{border:1px solid #45616a;background:#142730;border-radius:8px}aside{padding:20px}aside label{display:block;font-size:12px;letter-spacing:.07em;margin:15px 0 9px;color:#bfd1c7}aside label:first-child{margin-top:0}select{width:100%;padding:10px 8px;background:#203740;border:1px solid #526f73;border-radius:4px;color:#e1e5d9}button{border:1px solid #526e71;background:#254047;color:#e6e6d5;padding:8px 4px;border-radius:4px;cursor:pointer;min-height:39px}button.active{background:#abbd9f;color:#192d30;border-color:#d4dabc}button:hover{border-color:#d9c99e}#directions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:17px}.controls #play{grid-column:span 2;background:#b3ba95;color:#1c3237;font-weight:700}.check{display:flex!important;gap:8px;align-items:center;line-height:1.5}input[type=range]{width:100%;accent-color:#caba89;cursor:pointer}#status{font-size:12px;line-height:1.65;border-top:1px solid #435c65;padding-top:16px}#open-sheet{color:#e0c792;font-size:12px;text-decoration:none}.stage{overflow:hidden;display:flex;flex-direction:column}#preview{width:100%;height:auto;display:block;aspect-ratio:920/650}.timeline{display:flex;align-items:center;gap:14px;background:#1c303a;padding:14px 18px}.timeline input{flex:1}.timeline strong{font:11px ui-monospace,monospace;white-space:nowrap;color:#e0cc9f}#spec{font-size:11px;line-height:1.8;letter-spacing:.045em;color:#b5c8c4;padding:14px 18px;border-top:1px solid #435963;overflow-wrap:anywhere}.input-guide{border-top:1px solid #47616a;padding-top:14px}h2{font-size:18px;font-weight:600}.method{border-left:3px solid #a99672;padding:8px 16px;background:#1b2c34}code{color:#e0c88d}@media(max-width:760px){header{gap:10px;padding:0 15px;height:62px;font-size:10px}header span{display:none}main{padding:24px 14px}h1{font-size:27px}.layout{grid-template-columns:1fr;gap:14px}.stage{grid-row:1}aside{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:15px}aside label,aside select{margin:0}aside label[for=actor],aside label[for=clip]{grid-row:1}#actor,#clip{grid-row:2}#directions,.controls,.check,#status,#open-sheet{grid-column:span 2}aside>label:not([for=actor]):not([for=clip]){grid-column:span 2}#speed,#size{grid-column:span 2}.timeline{padding:10px}#spec{padding:11px}}
