@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&family=DM+Mono:wght@400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
:root{--ink:#24221e;--muted:#777067;--paper:#f2e8d2;--paper2:#e8dbc0;--desk:#332f29;--desk2:#25231f;--red:#9d3e32;--gold:#bb8e4a;--lamp:#f4c979;--line:rgba(238,223,195,.16);--mono:'DM Mono',monospace;--serif:'Libre Baskerville',Georgia,serif;--hand:'Caveat',cursive}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--desk2);color:#eee6d9}body{font-family:var(--serif);overflow:hidden}.screen{display:none;min-height:100dvh}.screen.active{display:flex}button{font:inherit;cursor:pointer}#title-screen{align-items:center;justify-content:center;flex-direction:column;position:relative;background:linear-gradient(rgba(25,15,12,.52),rgba(20,16,13,.72)),url('assets/dead-letter-office-box-art.png') center/cover no-repeat;text-align:center;padding:24px}#title-screen:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 12%,rgba(15,10,8,.38) 76%);pointer-events:none}#title-screen>*{position:relative;z-index:1}.title-stamp{font:11px var(--mono);letter-spacing:2px;color:#d4a56a;border:1px solid #9d7045;padding:8px 12px;transform:rotate(-2deg);margin-bottom:30px}.title-stamp:after{content:'';display:block;height:1px;background:#9d7045;margin:4px -4px -4px}.title-stamp+h1{font-size:clamp(46px,8vw,104px);line-height:.9;letter-spacing:0;margin:0;color:#f0e3cc;font-weight:400}.title-stamp+h1 em,.summary-wrap h2 em{font-style:italic;color:#c99553}.title-copy{margin:32px 0 38px;color:#b4a99a;line-height:1.8;font-size:14px}.primary{background:var(--red);color:#fff6eb;border:0;padding:14px 20px;min-height:48px;font:500 12px var(--mono);letter-spacing:.5px;text-transform:uppercase;box-shadow:4px 4px 0 rgba(0,0,0,.24);transition:transform .15s,background .15s}.primary:hover{background:#b54c3c;transform:translate(-1px,-1px)}.primary span,.clock-out span{font-size:17px;margin-left:12px}.text-button{background:none;border:0;color:#ae9c83;font:12px var(--mono);margin-top:20px;text-decoration:underline;text-underline-offset:4px}.hidden{display:none!important}.title-meta{position:absolute;bottom:26px;left:28px;right:28px;display:flex;justify-content:space-between;color:#857867;font:10px var(--mono);letter-spacing:1px}.topbar{height:74px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:#272520}.eyebrow{display:block;color:#ad9679;font:10px var(--mono);letter-spacing:1.8px;margin-bottom:5px}.topbar strong{font:500 15px var(--mono);letter-spacing:1px}.header-right{display:flex;align-items:center;gap:18px;color:#ab9b88;font:11px var(--mono)}.icon-button{border:0;background:none;color:#b7a68e;font-size:18px;min-width:38px;min-height:38px}.desk-layout{display:grid;grid-template-columns:226px minmax(460px,1fr) 226px;height:calc(100dvh - 74px)}.left-rail,.right-rail{background:#292722;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.right-rail{border-right:0;border-left:1px solid var(--line);padding:22px 18px}.rail-label{font:10px var(--mono);letter-spacing:1.7px;color:#aa967c;padding:22px 20px 14px;border-bottom:1px solid var(--line)}.letter-list{padding:10px 10px;overflow:auto;flex:1}.letter-item{display:grid;grid-template-columns:28px 1fr;gap:8px;width:100%;text-align:left;border:0;border-bottom:1px solid rgba(239,225,204,.1);padding:12px 10px;background:none;color:#d2c7b7}.letter-item:hover,.letter-item.selected{background:rgba(244,201,121,.1)}.letter-item .index{font:11px var(--mono);color:#a88055}.letter-item .item-name{font:12px var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.letter-item .item-state{display:block;color:#877d72;font:9px var(--mono);margin-top:5px;text-transform:uppercase;letter-spacing:.5px}.letter-item.responded .item-state{color:#b58a61}.letter-item.burned{opacity:.42}.rail-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:16px 8px 20px}.stamp-count,.burn-count{display:flex;flex-direction:column;gap:5px}.stamp-count span,.burn-count span{font:9px var(--mono);color:#938371;letter-spacing:1px}.stamp-count b{color:#e0a760;font:24px var(--mono)}.stamp-count small{font:9px var(--mono);color:#777067;margin-top:-4px}.burn-count b{color:#b26a58;font:24px var(--mono)}.desk{position:relative;overflow:hidden;background:radial-gradient(ellipse at 52% 31%,rgba(230,173,83,.16),transparent 43%),linear-gradient(120deg,#494137,#302d27 65%,#26241f);display:flex;flex-direction:column;align-items:center;padding:48px 36px 28px}.desk:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(91deg,transparent 0,transparent 90px,rgba(255,255,255,.018) 91px,transparent 92px);pointer-events:none}.lamp-glow{position:absolute;top:-100px;left:35%;width:340px;height:380px;background:radial-gradient(ellipse,rgba(242,188,91,.12),transparent 65%);pointer-events:none}.train-line{position:absolute;top:15px;right:26px;color:#887b6a;font:9px var(--mono);letter-spacing:1px}.desk-empty{margin:auto;text-align:center;color:#a69682}.desk-empty .mark{display:block;color:#bb8e4a;font-size:30px;margin-bottom:12px}.desk-empty p{font-size:14px;margin:0 0 7px}.desk-empty small{font:10px var(--mono);color:#766d63}.letter-card{position:relative;width:min(640px,100%);min-height:310px;background:var(--paper);color:var(--ink);padding:29px 38px 32px;box-shadow:10px 15px 24px rgba(0,0,0,.3);transform:rotate(-.7deg);overflow:hidden}.paper-texture{position:absolute;inset:0;pointer-events:none;opacity:.23;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(93,64,31,.08) 4px),repeating-linear-gradient(93deg,transparent 0,transparent 19px,rgba(93,64,31,.04) 20px)}.letter-top,.address-block,.letter-body,.letter-sign,.thread-note{position:relative;z-index:1}.letter-top{display:flex;justify-content:space-between;border-bottom:1px solid rgba(36,34,30,.24);padding-bottom:10px;color:#8b6746;font:10px var(--mono);letter-spacing:1px}.address-block{margin:22px 0 18px;font:10px var(--mono);line-height:1.6}.address-block div:first-child{color:var(--red);font-weight:500;margin-bottom:4px}.address-block #return-address{color:#887c6c;margin-top:8px;font-size:9px}.letter-body{font-size:16px;line-height:1.85;white-space:pre-wrap;min-height:100px}.letter-sign{font:24px var(--hand);margin-top:20px}.thread-note{border-top:1px dashed rgba(157,62,50,.4);margin-top:18px;padding-top:10px;color:var(--red);font:11px var(--mono)}.reply-panel{width:min(640px,100%);margin-top:26px;background:rgba(25,24,21,.65);border:1px solid rgba(238,223,195,.18);padding:18px 19px;z-index:2}.reply-head{display:flex;justify-content:space-between;align-items:start}.reply-head strong{font-size:13px;font-weight:400;color:#e3d4c1}.ink-readout{text-align:right}.ink-readout span{font:9px var(--mono);color:#a18d74}.ink-readout b{display:block;color:#d9a866;font:18px var(--mono);margin-top:3px}.tone-cards{display:flex;gap:7px;margin:18px 0 12px;flex-wrap:wrap}.tone-cards button{background:transparent;border:1px solid #655847;color:#bfae99;padding:8px 11px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.5px}.tone-cards button:hover,.tone-cards button.selected{background:#b37a48;color:#211d18;border-color:#d0a064}.reply-panel textarea{display:block;width:100%;height:92px;resize:none;border:0;border-top:1px solid rgba(239,225,204,.12);border-bottom:1px solid rgba(239,225,204,.12);background:rgba(0,0,0,.12);padding:12px 5px;color:#eadcc9;font:22px/1.25 var(--hand);outline:none}.reply-panel textarea:focus{border-color:#b78a58}.reply-panel textarea::placeholder{color:#807566}.reply-foot{display:flex;align-items:center;justify-content:space-between;padding-top:13px;color:#887c6c;font:10px var(--mono)}.reply-foot .primary{font-size:10px;padding:10px 13px;min-height:40px}.reply-foot .primary:disabled{opacity:.4;cursor:not-allowed}.right-rail .office-log{flex:1;overflow:auto;padding:11px 3px;font:11px/1.7 var(--mono);color:#b9aa96}.office-log p{border-bottom:1px solid rgba(239,225,204,.08);padding:10px 0;margin:0}.office-log .log-muted{color:#71695f}.clock-out{background:none;border:1px solid #665a4e;color:#bea98d;width:100%;min-height:48px;font:10px var(--mono);text-transform:uppercase;letter-spacing:1px;margin-top:15px}.clock-out:hover{border-color:#b58a61;color:#e7c995}.return-wrap,.summary-wrap{margin:auto;width:min(610px,calc(100% - 44px));text-align:center}.return-wrap>.eyebrow,.summary-wrap>.eyebrow{color:#bb8e4a}.return-letter{background:var(--paper);color:var(--ink);margin:35px 0 30px;padding:40px 46px 45px;box-shadow:10px 15px 26px rgba(0,0,0,.35);transform:rotate(.6deg);text-align:left}.return-mark{font:10px var(--mono);color:var(--red);letter-spacing:1.5px;border-bottom:1px solid #a98b6b;padding-bottom:10px}.return-letter h2{font:400 27px var(--serif);margin:28px 0 17px;line-height:1.2}.return-letter p{color:#6c5c4c;font-size:13px;line-height:1.6}.return-body{white-space:pre-wrap;font-size:17px;line-height:1.8;margin-top:22px}.return-sign{font:26px var(--hand);margin-top:22px}.summary-wrap h2{font:400 clamp(31px,5vw,52px);line-height:1.05;margin:28px 0 38px}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:27px}.summary-grid div{padding:17px 8px;border-right:1px solid var(--line)}.summary-grid div:last-child{border-right:0}.summary-grid span{display:block;font:9px var(--mono);color:#a5927c;letter-spacing:1px}.summary-grid b{display:block;font:28px var(--mono);color:#d5a261;margin-top:8px}.summary-wrap p{color:#b7aa99;font-size:14px;line-height:1.7;margin:0 auto 30px;max-width:470px}@media(max-width:900px){body{overflow:auto}.desk-layout{grid-template-columns:1fr;height:auto;min-height:calc(100dvh - 74px)}.left-rail{position:relative;border:0;display:block;min-height:0}.left-rail .rail-label{display:inline-block;border:0;padding:13px 16px 5px}.letter-list{display:flex;gap:4px;padding:5px 10px 10px;overflow-x:auto}.letter-item{min-width:122px;border:1px solid rgba(239,225,204,.12);display:block;padding:9px}.letter-item .index{display:inline;margin-right:5px}.letter-item .item-name{display:block;margin-top:6px}.letter-item .item-state{margin-top:4px}.rail-bottom{position:absolute;right:8px;top:8px;border:0;padding:0;gap:12px}.stamp-count,.burn-count{display:none}.desk{min-height:calc(100dvh - 260px);padding:27px 16px 24px}.letter-card{padding:24px 24px 27px}.reply-panel{margin-top:19px}.right-rail{min-height:190px;border:0;border-top:1px solid var(--line);padding:15px 16px}.right-rail .rail-label{padding:0 0 5px;border:0}.office-log{max-height:100px}.clock-out{margin-top:10px}.title-meta{font-size:8px;left:15px;right:15px}.return-letter{padding:28px 25px 34px}.summary-grid span{font-size:8px;letter-spacing:.4px}}@media(max-width:430px){.topbar{padding:0 14px}.header-right{gap:4px}.header-right>span{display:none}.letter-body{font-size:15px}.reply-foot{gap:8px;align-items:end}.reply-foot .primary{font-size:9px}.tone-cards button{padding:8px 9px}}