@font-face{font-family:Letter;src:url('./letter.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--bg:#eae5d9;--paper:#fcf9ee;--edge:#c6bdac;--accent:#e6c76e;--ui:'Pretendard Variable','Apple SD Gothic Neo',sans-serif;--letter:Letter,cursive;color-scheme:light}
*{box-sizing:border-box}html{overflow-anchor:none;scroll-behavior:auto}body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:#000;font-family:var(--ui);font-weight:400;-webkit-text-size-adjust:100%;overflow-anchor:none}button,a,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button,select{font:inherit;color:#000}button{cursor:pointer}a{color:#000}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #000;outline-offset:5px}[hidden]{display:none!important}button{border:0}h1,h2,p{margin:0}h1{font-weight:400;font-size:35px;letter-spacing:-.055em;line-height:1.35}h2{font-weight:700}a{text-decoration:none}.site-header{height:calc(76px + env(safe-area-inset-top));padding:calc(17px + env(safe-area-inset-top)) 26px 15px;display:flex;align-items:center;justify-content:space-between;max-width:900px;margin:auto}.brand{font-size:22px;font-family:Georgia,serif;font-style:italic;letter-spacing:-1px}.edition{font-size:10px;letter-spacing:.17em}.cover{max-width:600px;margin:auto;min-height:calc(100dvh - 76px - env(safe-area-inset-top));padding:48px 22px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}.kicker{font-size:10px;letter-spacing:.25em;margin-bottom:20px}.lead{font-size:13px;line-height:1.8;margin-top:17px}.envelope{padding:0;background:none;position:relative;display:block;width:min(100%,330px);height:230px;margin:55px auto 24px;perspective:900px;color:#000}.env-base{position:absolute;left:4%;right:4%;top:28px;bottom:8px;background:#eee5cf;box-shadow:0 18px 26px -15px #48402e55;transform:rotate(-4deg);border:1px solid #c3b99f}.env-back{position:absolute;inset:0;background:linear-gradient(150deg,#f7f0de,#e5d8ba)}.env-letter{position:absolute;inset:-9px 24px 25px;background:var(--paper);border:1px solid var(--edge);display:flex;justify-content:center;padding:34px 15px;font-family:var(--letter);font-size:22px;transform:rotate(2deg);transition:transform .65s,opacity .65s}.env-letter::after{content:'';position:absolute;left:24px;right:24px;top:70px;height:40px;background:repeating-linear-gradient(transparent 0 12px,#0002 12px 13px,transparent 13px 14px);opacity:.4}.env-front{position:absolute;inset:0;background:linear-gradient(32deg,#e6dac0 49.5%,transparent 50%) bottom left/51% 100% no-repeat,linear-gradient(-32deg,#ede2c9 49.5%,transparent 50%) bottom right/51% 100% no-repeat;z-index:2}.env-flap{position:absolute;inset:0 0 auto;height:110px;background:#f4ead3;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 1px 0 #b3a68e);transform-origin:top;transition:transform .65s;z-index:3}.seal{position:absolute;top:88px;left:calc(50% - 17px);width:34px;height:34px;border:1px solid #95876b;border-radius:50%;z-index:4;display:grid;place-items:center;background:var(--accent);font-family:Georgia,serif;font-style:italic;font-size:14px;transition:opacity .2s}.envelope:hover .env-letter{transform:translateY(-7px) rotate(2deg)}.envelope.opening .env-flap{transform:rotateX(178deg);z-index:0}.envelope.opening .seal{opacity:0}.envelope.opening .env-letter{transform:translateY(-100px) rotate(0)}.hint{font-size:12px;line-height:1.8}.hint span{display:block;font-size:10px;margin-top:5px}.cover-foot{margin-top:auto;padding-top:45px;font-size:10px;letter-spacing:.15em;display:flex;gap:10px;align-items:center}.cover-foot::before,.cover-foot::after{content:'';width:22px;height:1px;background:#0004}.pencil-object{position:absolute;width:176px;height:11px;right:0;bottom:4px;background:linear-gradient(#dfc06b 0 30%,#f0d885 30% 65%,#bf9e44 65%);border-radius:2px;transform:rotate(-29deg);box-shadow:0 5px 5px #0002;z-index:5;pointer-events:none}.pencil-object::before{content:'';position:absolute;left:-22px;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;border-right:22px solid #c9aa82}.pencil-object::after{content:'';position:absolute;left:-22px;top:4px;border-top:1.5px solid transparent;border-bottom:1.5px solid transparent;border-right:6px solid #000}.sketch{width:86px;height:22px;margin:13px auto 0;opacity:.6}.sketch path{fill:none;stroke:#000;stroke-width:1;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:160;animation:sketch 1.6s .2s forwards}@keyframes sketch{to{stroke-dashoffset:0}}
.reader{max-width:700px;margin:0 auto;padding:0 16px calc(45px + env(safe-area-inset-bottom))}.toolbar{position:sticky;top:0;z-index:20;background:var(--bg);padding:calc(8px + env(safe-area-inset-top)) 0 8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.tool{min-height:44px;background:#ffffff85;border:1px solid #0002;border-radius:5px;padding:0 12px;font-size:12px;display:flex;align-items:center;justify-content:center;gap:5px}.speed-label{flex:1}.speed-label select{border:0;background:none;max-width:70px;font-size:12px;padding:7px 2px}.skip{flex:1.4}.music{width:44px;flex:none;padding:8px}.music-bars{display:flex;gap:3px;height:16px;align-items:center}.music-bars i{display:block;width:2px;height:5px;background:#000}.music[data-state=playing] i{animation:wave .9s infinite alternate}.music i:nth-child(2){animation-delay:-.5s}.music i:nth-child(3){animation-delay:-.2s}.music i:nth-child(4){animation-delay:-.7s}@keyframes wave{to{height:16px}}.music[data-state=error] .music-bars{opacity:.35}.music[data-state=error]::after{content:'!';font-size:11px}.music-message{font-size:11px;flex-basis:100%;line-height:1.5;padding:2px 4px}.follow{width:100%;min-height:44px;font-size:12px;background:transparent;border:1px dashed #0004;border-radius:4px}.paper{position:relative;background:var(--paper);padding:34px 25px 38px;box-shadow:0 9px 34px #3b352617;border:1px solid #d6cdbb;isolation:isolate;min-width:0;scroll-margin-top:100px}.paper::before{content:'';position:absolute;inset:0;background-image:url('./grain.svg');opacity:.5;z-index:-1;pointer-events:none}.paper-label{font:10px var(--ui);letter-spacing:.16em;margin-bottom:27px;display:flex;justify-content:space-between}.paper h2{font-family:var(--letter);font-size:28px;line-height:1.5;margin-bottom:27px}.writing-window{overflow:hidden;position:relative}.visual-copy{font-family:var(--letter);font-size:22px;line-height:1.72;font-weight:400;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;letter-spacing:0}.letter-body,.signature{font:inherit;white-space:pre-wrap}.signature{text-align:right;margin-top:28px}.char{visibility:hidden}.char.shown{visibility:visible}.pencil .char.fresh{animation:graphite .22s ease-out}.caret{display:none;position:absolute;pointer-events:none;width:20px;height:4px;transform:rotate(-45deg);transform-origin:0 0;background:linear-gradient(90deg,#000 0 12%,#ba945e 12% 24%,#d5b45c 24%);border-radius:0 2px 2px 0;transition:top .04s}.writing .caret{display:block}.paper-footer{margin-top:34px;border-top:1px solid #0002;padding-top:16px;display:flex;justify-content:space-between;font:10px var(--ui);letter-spacing:.1em}.reader-footer{display:flex;justify-content:space-between;align-items:center;padding:25px 4px 0;font-size:11px}.reader-footer a{min-height:44px;display:flex;align-items:center}.to-top{background:none;font-size:11px;min-height:44px}.reading-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:pre-wrap}.js:not(.opened) .reader{display:none}.opened .cover{display:none}.opened .site-header{height:calc(62px + env(safe-area-inset-top));padding-top:calc(10px + env(safe-area-inset-top))}.no-js{font-size:12px;padding:16px;text-align:center}#music-host,#music-host iframe{position:fixed;left:-100px;bottom:0;width:1px;height:1px;border:0;opacity:0;pointer-events:none}@keyframes paper-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}@keyframes graphite{from{opacity:.2;filter:blur(.6px)}to{opacity:1;filter:none}}
/* 02 / ribbon ink, mechanical impression and carriage return */
.typewriter{--bg:#dce2dc;--paper:#fffef4;--edge:#aeb8ac;--accent:#c0cabe;--letter:Letter,'Courier New',monospace}.typewriter .cover{padding-top:34px}.typewriter .kicker{border:1px solid #0005;padding:7px 11px;letter-spacing:.15em}.typewriter h1{font-family:var(--letter);font-size:31px;letter-spacing:-.05em}.typewriter .envelope{margin-top:39px;height:269px}.typewriter .env-base{top:22px;bottom:84px;left:8%;right:8%;transform:rotate(-3deg);background:#f8f5e8;border:1px solid #8b9185;padding:7px;box-shadow:0 6px 12px #0001}.typewriter .env-back{inset:5px;background:repeating-linear-gradient(125deg,#a9b8aa 0 9px,#f8f5e8 9px 18px,#bd8e75 18px 27px,#f8f5e8 27px 36px)}.typewriter .env-letter{inset:8px;background:#fffdf1;font-size:17px;padding:34px 5px}.typewriter .env-letter::after{top:70px;height:30px}.typewriter .env-front{background:linear-gradient(31deg,#e8e6d5 49.5%,transparent 50%) bottom left/51% 100% no-repeat,linear-gradient(-31deg,#f3f0e2 49.5%,transparent 50%) bottom right/51% 100% no-repeat}.typewriter .env-flap{background:#f8f4e5;height:95px}.typewriter .seal{border-radius:0;background:#bd8e75;top:70px;font-style:normal;width:30px;height:30px;left:calc(50% - 15px);font-size:10px;border:1px solid #0003}.machine{position:absolute;bottom:0;left:2%;width:96%;height:108px;z-index:6;pointer-events:none}.machine::before{content:'';position:absolute;inset:0 18px auto;height:15px;border-radius:8px;background:#525d54;box-shadow:-13px 1px 0 -1px #525d54,13px 1px 0 -1px #525d54}.machine-body{position:absolute;inset:20px 0 0;background:#9eafa1;clip-path:polygon(9% 0,91% 0,100% 88%,98% 100%,2% 100%,0 88%);border-radius:10px;box-shadow:inset 0 -10px 0 #7e9382}.machine-keys{position:absolute;left:26px;right:26px;top:40px;height:40px;background:radial-gradient(circle at 6px 6px,#efece0 0 4px,#535c53 4px 5px,transparent 6px) 0 0/18px 18px}.machine-keys::after{content:'';position:absolute;width:90px;height:7px;background:#e9e6db;border:1px solid #535c53;bottom:-9px;left:calc(50% - 45px);border-radius:3px}.typewriter .paper{padding-left:27px;padding-right:27px;border-color:#aeb8ac;border-top:6px solid #5b685d;background-image:linear-gradient(90deg,transparent 17px,#b88c7344 17px 18px,transparent 18px)}.typewriter .paper h2{font-size:25px}.typewriter .visual-copy{font-size:17px;line-height:1.95;letter-spacing:0;font-variant-ligatures:none}.typewriter .char.fresh{display:inline-block;animation:strike .12s cubic-bezier(.1,.8,.3,1)}.typewriter .caret{width:11px;height:2px;transform:none;background:#000;border-radius:0}.typewriter .paper.carriage{animation:carriage .16s ease-out}.typewriter .paper-footer{letter-spacing:0}@keyframes strike{0%{transform:translateY(-2px) scale(.93,1.15);text-shadow:0 1px 0 #0009}70%{transform:translateY(1px)}100%{transform:none}}@keyframes carriage{0%{transform:translateX(2px)}100%{transform:none}}
/* 03 / a letter that opens one fold at a time */
.free{--bg:#e7e5ef;--paper:#fffdf8;--edge:#c6becf;--accent:#d2c6e1}.free .cover::before{content:'';position:absolute;top:60px;width:310px;height:380px;border:1px solid #b6acc955;border-radius:50% 50% 44% 44%;z-index:-1;transform:rotate(20deg)}.free .cover{padding-top:52px}.free .lead{margin-top:14px}.free .envelope{margin-top:47px;height:245px;width:300px}.free .env-base{inset:20px 28px 14px;transform:rotate(-8deg);background:#cec5de;border:0;box-shadow:4px 13px 24px #55416a28}.free .env-back{background:linear-gradient(120deg,#e0d8ec,#c5b8d7)}.free .env-letter{inset:13px 15px 25px;transform:rotate(12deg);font-size:23px;background:#fffdf8;box-shadow:0 3px 8px #0001;padding-top:32px}.free .env-front{background:linear-gradient(45deg,#c7b9d7 49.5%,transparent 50%) bottom left/51% 100% no-repeat,linear-gradient(-45deg,#d5cbe4 49.5%,transparent 50%) bottom right/51% 100% no-repeat}.free .env-flap{background:#ded5e9;height:122px;clip-path:polygon(0 0,100% 0,50% 100%)}.free .seal{top:101px;background:#f5f0fa;border-color:#b4a7c8;width:38px;height:38px;left:calc(50% - 19px)}.free .seal::before{content:'';width:18px;height:18px;border:1px solid #0007;transform:rotate(45deg)}.free .seal span{position:absolute;font-size:12px}.free .paper{border:0;padding:35px 26px 38px;background-image:repeating-linear-gradient(180deg,transparent 0 225px,#6d547b10 226px,#fff8 228px,transparent 232px 458px);box-shadow:0 15px 40px #51416a16}.free .paper::after{position:absolute;content:'';height:20px;inset:auto 0 -10px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 60%,90% 90%,80% 60%,70% 90%,60% 60%,50% 90%,40% 60%,30% 90%,20% 60%,10% 90%,0 60%);z-index:-1}.fold-panel{display:block;transform-origin:top;visibility:hidden;white-space:pre-wrap}.fold-panel.unfolded{visibility:visible;animation:unfold .75s cubic-bezier(.2,.6,.2,1) both}.free .writing-window{perspective:1100px}.free .caret{display:none}.free .paper-label span:last-child{border:1px solid #0003;border-radius:50%;padding:4px;margin-top:-5px}.free .paper h2{margin-bottom:30px}@keyframes unfold{0%{transform:rotateX(-68deg);opacity:0;filter:brightness(.88)}100%{transform:none;opacity:1;filter:none}}
@media(min-width:700px){.cover{padding-top:50px}.envelope{width:350px;height:245px;margin-top:50px}.paper{padding:54px 62px}.visual-copy{font-size:24px}.paper h2{font-size:32px}.typewriter .paper{padding:48px 65px}.typewriter .visual-copy{font-size:19px}.free .paper{padding:52px 60px}.toolbar{gap:9px}.tool{flex:0 1 auto}.speed-label{margin-left:auto}.skip{flex:none}.music{width:48px}.site-header{padding-left:36px;padding-right:36px}}
@media(max-width:360px){h1{font-size:31px}.cover{padding-left:17px;padding-right:17px}.reader{padding-left:10px;padding-right:10px}.paper{padding-left:21px;padding-right:21px}.tool{padding:0 9px;font-size:11px}.music{padding:8px}.typewriter .visual-copy{font-size:16px}.cover{padding-top:28px}.envelope{margin-top:34px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.sketch path{stroke-dashoffset:0}.caret{display:none!important}}

.env-caption{position:absolute;left:6px;right:6px;bottom:26px;z-index:4;font:22px var(--letter);text-align:center;transform:rotate(1deg);white-space:nowrap}.typewriter .env-caption{font-size:17px;bottom:25px}.free .env-caption{font-size:22px;bottom:27px}.pencil-object{bottom:35px;right:-5px}

html{overflow-x:clip}.free .cover::before{width:260px;height:340px}.free .cover{overflow:clip}.typewriter .char:not(.whitespace){display:inline}.typewriter .char.whitespace{display:inline}

.speed-label{white-space:nowrap;min-width:88px}.speed-label select{width:44px;max-width:44px}#letter-title:focus{outline:none}
.typewriter .char,.typewriter .char.fresh{display:inline;position:relative}
@keyframes strike{0%{top:-2px;opacity:.5;text-shadow:0 1px 0 #0009}65%{top:1px;opacity:1}100%{top:0;opacity:1;text-shadow:none}}