*{box-sizing:border-box} :root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#162d34;background:#f5f1e8;font-size:16px}body{margin:0}main{max-width:1180px;margin:auto;padding:48px 30px 24px}header{max-width:770px}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;font-weight:700;color:#68736e}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(2.8rem,7vw,5rem);line-height:1.03;margin:20px 0}h1 span{color:#c55d36}.intro{font-size:1.15rem;color:#53625e;line-height:1.65}h2{font-family:Georgia,serif;font-size:1.8rem;font-weight:400;line-height:1.3}p{line-height:1.6}nav{display:flex;gap:8px;border-bottom:1px solid #d9d8cc;padding:20px 0 15px;margin-bottom:30px}button,.button,select,input,textarea{font:inherit}button,.button{min-height:48px;padding:11px 20px;border:1px solid #c8cec5;background:transparent;border-radius:7px;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:600}button:hover,.button:hover{background:#e7e9df}button:disabled{opacity:.45;cursor:default}.primary,nav .active{background:#183e3b;color:white;border-color:#183e3b}.primary:hover,nav .active:hover{background:#28514a}label{display:block;font-weight:600;margin-bottom:10px}input,textarea,select{background:#fffdf7;border:1px solid #bbc7bd;border-radius:7px;color:inherit;padding:13px;width:100%;min-height:48px}textarea{resize:vertical;line-height:1.5}select{max-width:200px}.workspace{display:grid;grid-template-columns:minmax(270px,.85fr) minmax(320px,1.15fr);gap:44px;align-items:start}.controls{max-width:430px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.muted{font-size:.86rem;color:#62706a}.paper-wrap{background:#e8e7dd;border-radius:12px;padding:18px}.paper-wrap svg{width:100%;height:auto;display:block;background:white;box-shadow:0 4px 20px #14202a0c}#paper{max-height:900px;overflow:auto}details{border-top:1px solid #d9d8cc;margin-top:26px;padding:18px 0}summary{cursor:pointer;font-weight:600}#trail{display:block;max-width:100%;background:white;margin-top:16px}#photo{position:absolute;width:1px;height:1px;opacity:0}#photo:focus+button{outline:2px solid #183e3b}#photo-canvas{max-width:100%;height:auto;display:block;max-height:750px;object-fit:contain;touch-action:manipulation}#photo-canvas:empty{display:none}.read-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);gap:30px}#result{padding:22px;background:#e6ecdf;border-radius:10px;align-self:start}#decoded{white-space:pre-wrap;overflow-wrap:anywhere}#game-paper{max-width:650px}#clue{background:#e6ecdf;padding:20px;border-radius:8px;font-size:1.1rem}.answer-row{display:flex;gap:10px;max-width:600px}#app-status{color:#a14f32;min-height:24px}footer{border-top:1px solid #d9d8cc;margin-top:45px;padding-top:20px;font-size:.8rem;color:#68736e;display:flex;justify-content:space-between;gap:20px}#revision{white-space:nowrap;font-size:.65rem} [hidden]{display:none!important}button:focus-visible,.button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #c55d36;outline-offset:3px}@media(max-width:720px){main{padding:30px max(18px,env(safe-area-inset-right)) 20px max(18px,env(safe-area-inset-left))}.workspace,.read-layout{grid-template-columns:1fr;gap:22px}.controls{max-width:none}.paper-wrap{padding:10px}nav button{flex:1}.actions button,.actions .button{flex:1}.answer-row{flex-wrap:wrap}.answer-row button{width:100%}footer{padding-bottom:env(safe-area-inset-bottom)}}@media print{body{background:white}main{padding:0;max-width:none}header,nav,.controls,footer,#app-status,.paper-wrap>.eyebrow,#read,#play,#shared-settings{display:none!important}.workspace{display:block}.paper-wrap{padding:0;background:white}#paper{max-height:none;overflow:visible}#paper svg{box-shadow:none;width:100%;max-height:95vh}}

#encoding-mode{max-width:100%;margin-bottom:18px}#xor-example{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:460px}#xor-example figure{margin:0}#xor-example svg{width:100%;display:block}#xor-example figcaption{text-align:center;font-size:.75rem;padding-top:8px;color:#62706a}@media print{#xor-settings{display:none!important}}

#game-paper.cryptogram{max-width:100%;display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 0;background:#fffdf7;padding:18px}.crypto-word{display:inline-flex;gap:3px;align-items:flex-end;white-space:nowrap}.word-space{width:18px;height:1px}.crypto-symbol{padding:0;display:flex;flex-direction:column;border-radius:5px;border:1px solid #d7dbd1;background:white;width:48px;min-height:76px;flex-shrink:0}.crypto-symbol svg{width:46px;height:46px;display:block}.guess-letter{font-family:ui-monospace,monospace;font-size:1.05rem;padding:2px 0 7px}.crypto-symbol.given{background:#e6ecdf;border-color:#a3b4a0}.crypto-punctuation{padding-bottom:10px;font-size:1.3rem}.hint-glyph{display:inline-block;width:45px;height:45px;vertical-align:middle;background:white;border-radius:5px;margin:0 8px}.hint-glyph svg{width:100%;height:100%}.selected-guess{display:flex;align-items:center;gap:24px;max-width:400px;margin-top:24px}#selected-symbol{width:120px;flex-shrink:0;background:white;border-radius:10px}#selected-symbol svg{width:100%;display:block}#letter-guess{width:80px;text-transform:uppercase}#game-working{font-family:ui-monospace,monospace;letter-spacing:.08em;white-space:pre-wrap;overflow-wrap:anywhere;padding:16px;background:#e6ecdf;border-radius:8px}@media(max-width:720px){#game-paper.cryptogram{padding:12px}.crypto-word{gap:2px}.crypto-symbol{width:36px;min-height:62px}.crypto-symbol svg{width:34px;height:34px}.word-space{width:12px}#selected-symbol{width:100px}}

.ciphertext{font-family:ui-monospace,monospace;letter-spacing:.1em;line-height:1.9;padding:18px;background:#eee6d7;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}.cipher-letter{font-family:ui-monospace,monospace;font-size:.65rem;color:#8a6944}.crypto-symbol:has(.cipher-letter){min-height:90px}@media(max-width:720px){.crypto-symbol:has(.cipher-letter){min-height:76px}}

#print-size{max-width:100%}@media print{body[data-print-size="card"] #paper{width:85.6mm;height:54mm;overflow:visible}body[data-print-size="card"] #paper svg{width:85.6mm;height:54mm;max-width:none;max-height:none;box-shadow:none;display:block}}

#format-settings{margin:24px 0}#encoding-mode{max-width:100%}@media print{#format-settings{display:none!important}}


.reader-card{display:block;width:100%;max-width:648px;height:auto;background:white;margin:18px 0}.reader-card+.button{margin-bottom:10px}

.secret-entry{display:flex;gap:8px;align-items:stretch}.secret-entry input{min-width:0;flex:1}.secret-entry button{flex-shrink:0}#saved-card{position:absolute;width:1px;height:1px;opacity:0}label.button:has(+input:disabled){opacity:.45;pointer-events:none}

.machine-panel{border:1px solid #c8cec5;border-radius:14px;padding:22px;margin:30px 0;background:#eee6d7}.drop-zone{padding:22px;border:2px dashed #9eaf9d;border-radius:9px;background:#fffdf7;text-align:center;cursor:pointer;min-height:70px}.machine-images{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:420px}.machine-glyph{aspect-ratio:1;background:white;border-radius:8px;overflow:hidden}.machine-glyph svg{width:100%;height:100%}#machine-threshold{max-width:130px}#machine-chart{display:block;width:100%;max-width:600px;height:auto;border-radius:8px}#machine-secret{max-width:300px;text-transform:uppercase}.secret-bag{font-family:ui-monospace,monospace;letter-spacing:.16em;font-size:1.5rem;background:#fffdf7;padding:16px;border-radius:8px}.staging-bank,.staging-slots,.staging-reference{display:grid;grid-template-columns:repeat(auto-fit,minmax(65px,1fr));gap:8px;margin:20px 0}.staging-symbol,.staging-slot{padding:6px;display:flex;flex-direction:column;min-height:82px;background:white}.staging-symbol svg,.staging-slot svg,.staging-reference svg{width:100%;max-width:75px;display:block}.staging-slot.placed{background:#dfe9d9}.staging-reference>div{text-align:center;background:white;padding:5px}.drag-ghost{position:fixed;width:72px;height:72px;z-index:1000;pointer-events:none;background:white;box-shadow:0 5px 20px #0005;border-radius:8px}.drag-ghost svg{width:100%;height:100%}[data-drag-symbol]{touch-action:none;cursor:grab}#staging-cards{max-width:648px}@media(max-width:720px){.machine-panel{padding:14px}.machine-images{gap:12px}.staging-slots,.staging-bank{grid-template-columns:repeat(4,minmax(0,1fr))}.secret-bag{font-size:1.15rem}}

.sound-toggle{display:flex;align-items:center;gap:10px;margin-top:18px}.sound-toggle input{width:22px;min-height:22px;accent-color:#183e3b}

.staging-puzzle{display:flex;flex-wrap:wrap;gap:12px 0;margin:16px 0;padding:12px;background:white;border-radius:12px}.staging-puzzle .crypto-symbol.placed{background:#dcebdc;border-color:#3a7650}.staging-puzzle .crypto-symbol{touch-action:manipulation}

.symbol-comparator{margin:16px 0;padding:14px;border:1px solid #c8cec5;border-radius:12px;background:#fffdf7}.comparator-boxes{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:440px}.comparator-boxes p{margin:0 0 8px}.comparator-box{aspect-ratio:1;border:2px dashed #9eaf9d;border-radius:10px;background:white;display:flex;align-items:center;justify-content:center;min-width:0;color:#53625e}.comparator-box svg{width:100%;height:100%;display:block}.comparator-actions button{min-height:44px}.comparator-actions{gap:8px;flex-wrap:wrap}