:root{--paper: #eadfc2;--ink: #2b2420;--wash: #d9cba6}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--paper);color:var(--ink);font:16px/1.45 Georgia,Times New Roman,serif}.app{display:flex;flex-direction:column;height:100%;padding:12px 16px;gap:10px}.app h1{margin:0;font-size:22px;font-style:italic}.app p{margin:0;font-size:14px}.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.bar button{font:inherit;font-size:14px;color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:4px;padding:6px 10px;min-height:40px;cursor:pointer}.bar button.on{background:var(--ink);color:var(--paper)}.status{font-size:13px;opacity:.8;margin-left:auto}.stage{position:relative;flex:1;min-height:240px;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--wash);touch-action:none}.stage canvas{display:block;width:100%;height:100%}.pad{position:absolute;right:12px;bottom:12px;display:none;gap:10px}.pad button{width:72px;height:72px;border-radius:50%;border:2px solid var(--ink);background:#eadfc2d9;font:inherit;font-size:14px;color:var(--ink);touch-action:none}@media(pointer:coarse){.pad{display:flex}}