:root{color-scheme:light;--paper:#f4efe4;--ink:#23364c;--blue:#536f9b;--orange:#aa5735;--muted:#737980;--line:#cfc9bc}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.6 system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:var(--ink);border:1px solid #b6bcc2;border-radius:6px;background:#fff9ef;padding:10px 14px;touch-action:manipulation}button:hover{background:#e6e9ec;border-color:var(--blue)}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,pre:focus-visible{outline:3px solid var(--orange);outline-offset:3px}a{color:var(--blue);text-decoration:none}header,main,footer{max-width:1240px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:27px 30px 18px}.brand{font:36px Georgia,serif;letter-spacing:-1.5px;color:var(--ink);line-height:1}.brand span{display:block;font:9px/2.5 system-ui,sans-serif;letter-spacing:2.5px;color:var(--orange)}header>div{display:flex;gap:9px}header button{font-size:11px;background:transparent}.intro{padding:22px 30px 28px;display:flex;justify-content:space-between;align-items:end}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--orange);font-weight:700}h1{font:clamp(38px,4.5vw,57px)/1.04 Georgia,serif;letter-spacing:-1.8px;margin:12px 0 0}.intro>p{color:var(--muted);font-size:14px;line-height:1.9;padding-right:8px}#letters{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin:10px 30px 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}#letters button{background:transparent;padding:8px 2px;border:1px solid transparent;border-radius:4px;color:#777a80;font:15px Georgia,serif}#letters button.current{border-color:var(--blue);color:var(--ink);background:#e2e7ec}#letters button.gold:after,#letters button.blue:after{content:'•';display:block;font-size:12px;line-height:.7;color:#b77530}#letters button.blue:after{color:#6483a3}.workshop{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:35px;padding:0 30px}.maildesk{min-width:0}.letter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.letter-header p{margin:0}.letter-header h2{font:29px Georgia,serif;margin:5px 0 0}.letter-header>span{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:4px 12px;color:var(--muted)}.paper{background:url('paper.webp') center/100% 100%;padding:25px 36px 28px;box-shadow:0 8px 28px #4a382519;border-radius:3px;min-height:340px}.envelope-row{display:flex;align-items:center;gap:20px;margin-bottom:19px}#envelope{width:140px;height:126px;object-fit:contain;filter:drop-shadow(0 5px 6px #25384c1a);transition:opacity .25s}.label{font-size:9px;letter-spacing:1.5px;color:var(--blue);font-weight:700;margin:0 0 6px}#stage-copy{font-size:12px;color:#686e77;margin:0;max-width:260px}#layer-dots{display:flex;gap:6px;margin-top:12px}#layer-dots span{width:8px;height:8px;border:1px solid #8396ac;border-radius:50%}#layer-dots span.open{background:#6d88a8}.text-label{display:flex;justify-content:space-between;gap:10px;font-size:8px;letter-spacing:1px;color:#6a7582;border-bottom:1px solid #a8adb45c;padding-bottom:8px}#characters{letter-spacing:0;white-space:nowrap}pre{font:clamp(15px,1.4vw,19px)/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;color:#293d57;min-height:85px;margin:18px 0;max-height:240px;overflow-y:auto}.paper-note{font-size:10px;color:#7f7c73;line-height:1.6;margin:14px 0 0;border-top:1px solid #b2aca254;padding-top:10px}.workbench-controls{display:flex;align-items:center;gap:8px;margin-top:17px}.workbench-controls button{font-size:11px;padding:9px 12px}.workbench-controls>span{margin-left:auto;font-size:11px;color:var(--muted)}#status{font-size:12px;color:var(--blue);min-height:36px;margin:12px 0}.history-wrap{border-top:1px solid var(--line);padding-top:12px}.history-wrap summary{color:var(--muted);font-size:11px;cursor:pointer}.history-wrap summary span{float:right}.history-wrap ol{font-size:11px;padding-left:22px;color:var(--muted)}.history-wrap li{padding:4px 0}.history-wrap li.bad{color:var(--orange)}aside>.eyebrow{margin:2px 0 8px}.tool-intro{color:var(--muted);font-size:12px;margin:0 0 18px}#tools{display:flex;flex-direction:column;gap:8px}.tool{display:flex;width:100%;text-align:left;align-items:center;gap:11px;background:#fbf8f1;padding:11px 12px;border-color:#c5c8cc}.tool .key{font:11px ui-monospace,monospace;border:1px solid #c8cdd4;padding:3px 7px;border-radius:4px;color:var(--blue);background:#f4f5f4}.tool strong{font-size:12px;font-weight:650;display:block}.tool small{font-size:10px;color:var(--muted);display:block;line-height:1.5;margin-top:2px}.tool.suggested{outline:2px solid #b57d53;outline-offset:2px;background:#fff4d9}#extra-tools{margin-top:17px;border-top:1px solid var(--line);padding-top:13px}#extra-tools summary{font-size:11px;color:var(--blue);cursor:pointer}#extra-tools summary span{float:right}#extra-tools p{font-size:10px;color:var(--muted)}#encoders{display:flex;flex-direction:column;gap:6px}#encoders .tool{padding:8px}.keepsake{display:flex;align-items:center;gap:18px;padding-top:25px;margin-top:23px;border-top:1px solid var(--line)}.postmark{flex-shrink:0;display:block;border:2px solid #6b87a1;border-radius:50%;width:92px;height:92px;text-align:center;padding-top:14px;font:8px/1.8 system-ui,sans-serif;letter-spacing:1px;color:#5f7d97;transform:rotate(-12deg)}.postmark strong{font:22px/1.2 Georgia,serif;letter-spacing:0;display:block}.keepsake p{font-size:10px;color:var(--muted);margin:0}#success{border-top:1px solid #c4ad86;padding-top:16px;margin-top:15px}#success h3{font:29px Georgia,serif;margin:5px 0;color:#91572e}#success .eyebrow{margin:0;color:#976a31}#win-copy{font-size:11px;color:#747470;margin:5px 0 14px}#next{background:#536f96;border-color:#536f96;color:white;font-size:12px}#instructions{margin:35px 30px;padding:25px;border:1px solid var(--line);border-radius:10px;background:#faf6ed}#instructions h2{font:29px Georgia,serif;margin:0}#instructions p{color:#626d79;font-size:13px}#reference{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}#reference article{border:1px solid #ccd0d4;padding:13px;border-radius:6px;background:#fdfaf4}#reference h3{font-size:13px;margin:0 0 5px}#reference p{font-size:11px;margin:0}#reference code{display:block;color:#a2643c;overflow-wrap:anywhere;white-space:pre-wrap;font-size:11px;margin-top:10px}footer{border-top:1px solid var(--line);padding:25px 30px;margin-top:47px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}[hidden]{display:none!important}@media(max-width:760px){header{padding:20px}.brand{font-size:31px}header button{font-size:10px;padding:8px}.intro{padding:20px;display:block}.intro h1{font-size:42px}.intro>p{font-size:13px;line-height:1.7;margin-bottom:0}.intro>p br{display:none}#letters{margin:10px 20px 20px;gap:3px;padding:12px 0}#letters button{font-size:12px;padding:8px 0}.workshop{grid-template-columns:1fr;padding:0 14px;gap:22px}.letter-header{padding:0 6px;margin-bottom:13px}.letter-header h2{font-size:25px}.letter-header>span{font-size:10px}.paper{padding:20px 24px;min-height:320px}.envelope-row{gap:12px;margin-bottom:16px}#envelope{width:109px;height:100px}#stage-copy{font-size:11px}.label{font-size:8px}pre{font-size:15px;line-height:1.65;min-height:75px;max-height:225px}.text-label{font-size:7px}.workbench-controls{gap:5px}.workbench-controls button{font-size:10px;padding:9px 8px}.workbench-controls>span{font-size:10px}#status{font-size:11px;margin-left:5px}aside{padding:0 6px}aside>.tool-intro{margin-bottom:12px}#tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tool{padding:11px 9px;gap:8px}.tool strong{font-size:11px}.tool small{font-size:9px}.tool .key{font-size:9px;padding:3px 5px}.keepsake{padding-top:17px;margin-top:18px;justify-content:center;gap:22px}.keepsake p{max-width:210px}.postmark{width:80px;height:80px;font-size:7px;padding-top:12px}.postmark strong{font-size:21px}#instructions{margin:28px 14px;padding:20px}#reference{grid-template-columns:1fr 1fr;gap:9px}footer{padding:24px 20px;gap:18px;margin-top:30px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}