:root{--paper: #e7dcc6;--paper-deep: #d4c4a4;--ink: #2a241c;--ink-soft: #5a4e3e;--cinnabar: #a83a32}*{box-sizing:border-box}html,body,#app,.page{margin:0;height:100%}body{background:var(--paper-deep);color:var(--ink);font-family:Noto Sans TC,sans-serif}.page{display:grid;grid-template-rows:auto auto 1fr auto}.head{display:flex;align-items:baseline;gap:.85rem 1.4rem;padding:.9rem 1.3rem .35rem;flex-wrap:wrap}h1{margin:0;font-family:"Noto Serif TC",serif;font-weight:700;font-size:clamp(1.7rem,3vw,2.35rem);letter-spacing:.22em}.lede{margin:0;color:var(--ink-soft);font-size:.86rem;letter-spacing:.12em}.bar{display:flex;align-items:center;gap:.45rem .7rem;padding:.1rem 1.3rem .55rem;flex-wrap:wrap}button,.file-btn{appearance:none;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:"Noto Serif TC",serif;font-size:.86rem;letter-spacing:.14em;padding:.24rem .7rem .18rem;cursor:pointer}button:hover,.file-btn:hover,button.active{background:var(--ink);color:var(--paper)}button:disabled{opacity:.35;cursor:default}button:disabled:hover{background:transparent;color:var(--ink)}.file-btn{display:inline-block}.file-btn input{display:none}.dial{display:flex;align-items:center;gap:.35rem;font-size:.76rem;letter-spacing:.12em;color:var(--ink-soft)}.dial input[type=range]{width:7rem;accent-color:var(--cinnabar)}.stage{display:block;width:100%;height:100%;min-height:0;cursor:crosshair;touch-action:none}.foot{padding:.4rem 1.3rem .7rem;font-size:.78rem;letter-spacing:.05em;color:var(--ink-soft);display:flex;justify-content:space-between;gap:1rem}.count{color:var(--cinnabar)}
