:root { color-scheme:light; --bg:#f7f6f1; --paper:#fffefa; --ink:#243b36; --muted:#53675e; --line:#d3ddd4; --mint:#e6f0e9; --accent:#a64422; }
:root[data-theme=dark] { color-scheme:dark; --bg:#13221d; --paper:#1d3028; --ink:#ecf4ed; --muted:#b4c8bb; --line:#486252; --mint:#314b3a; --accent:#ffad8c; }
* { box-sizing:border-box }
[hidden] { display:none !important }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 Georgia,serif; -webkit-tap-highlight-color:transparent }
.app { max-width:760px; margin:auto; padding:16px max(16px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)) }
header { display:flex; justify-content:space-between; align-items:center; gap:10px }
a { color:var(--ink); text-underline-offset:4px }
header a,.eyebrow { font:12px/1.5 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.12em }
h1 { font-size:clamp(32px,7vw,46px); line-height:1.2; letter-spacing:-.065em; margin:8px 0 }
.edition { font-size:16px; letter-spacing:0; font-weight:400; color:var(--muted) }
h2 { font-size:24px; line-height:1.25; letter-spacing:-.035em; margin:0 0 12px }
p { margin:10px 0 16px }
.intro { font-size:20px; color:var(--muted) }
.card { border:1px solid var(--line); background:var(--paper); padding:clamp(16px,4vw,28px); border-radius:20px; margin:18px 0 }
.compact { padding:16px; margin-bottom:10px }
.note { color:var(--muted); font:13px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
.eyebrow { color:var(--muted) }
button { font:600 14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--mint); border:1px solid var(--line); border-radius:12px; min-height:44px; padding:10px 15px; cursor:pointer }
button:disabled { opacity:.5; cursor:default }
button:focus-visible,input:focus-visible { outline:3px solid var(--accent); outline-offset:3px }
.primary { background:var(--ink); color:var(--paper); margin-top:12px }
.check { display:flex; align-items:start; gap:12px; margin:18px 0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
input[type=checkbox] { width:22px; height:22px; flex:none; margin:2px 0; accent-color:#31654b }
.error { background:var(--paper); border:2px solid var(--accent); border-radius:12px; padding:14px; color:var(--accent) }
summary { cursor:pointer }.app > details { margin:12px 0; font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
#launch-code { display:block; width:100%; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:8px; padding:10px; margin:8px 0; font:inherit }
.actions { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch }
.actions > button { margin-block:0 }
#review > .actions,#draft-panel > .actions { margin-top:12px }
.workspace { width:100%; height:clamp(220px,40dvh,420px); position:relative; border:1px solid var(--line); border-radius:20px; background:#fffefa; overflow:hidden; box-shadow:0 3px 16px #243b3610 }
#paper { display:block; width:100%; height:100%; touch-action:none }
.cursor { position:absolute; width:12px; height:12px; border:2px solid #a64422; background:#fffefa; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 2px #fffefa; pointer-events:none }
.cursor.down { background:#a64422 }
.tools { padding:12px 0 }
.tools .actions { justify-content:center }
.hold { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:80px; width:100%; margin:12px 0; border:0; border-radius:19px; color:var(--paper); background:var(--ink); touch-action:none; user-select:none; -webkit-user-select:none; box-shadow:0 5px 0 #111d17 }
.hold strong { font-size:20px }.hold span { font-size:12px; font-weight:400 }
.hold.down { transform:translateY(3px); box-shadow:0 2px 0 #111d17 }
#preview,.drafts img { width:100%; display:block; border:1px solid var(--line); border-radius:12px; background:#fffefa }
.drafts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }.drafts button { width:100%; margin-top:6px; padding:8px 4px }
.code { font:700 clamp(20px,5vw,32px)/1.4 ui-monospace,monospace; letter-spacing:.1em; overflow-wrap:anywhere }
ul { padding-left:22px; font:13px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
@media(max-width:380px) { .app { padding-inline:12px }.card { padding:14px }.drafts { gap:6px }button { padding-inline:10px } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto } }