:root{--ink:#3f493b;--soft:#7f8775;--accent:#ce6245;--cream:#fff9eb;--line:#d6d8c8;--green:#71876c;--paper:#fffdf4;--shadow:0 18px 50px #4d554818;font-family:'Segoe UI','Malgun Gothic',sans-serif;font-synthesis:none;color:var(--ink);background:#f5ede0;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-height:100svh;overflow-x:hidden;background:radial-gradient(ellipse at 71% 36%,#fff9df 0%,#f3eddd 33%,transparent 63%),linear-gradient(155deg,#e9eee5 0%,#f5eddd 48%,#e8eadc 100%)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0}button:disabled{cursor:default;opacity:.52}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #789871;outline-offset:5px}button svg{width:20px;height:20px;flex-shrink:0}.sky-grain{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E")}
.topbar{height:104px;position:relative;z-index:4;padding:25px 4.5vw;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{text-decoration:none;display:flex;align-items:center;gap:12px;font-size:18px;font-weight:750;letter-spacing:-.5px;flex-shrink:0}.brand-mark{width:44px;height:44px;border-radius:14px;background:var(--accent);color:#fff7e7;display:grid;place-items:center;font-size:24px;box-shadow:0 5px 0 #b54d3422;transform:rotate(-5deg)}.brand small{display:block;font-size:8px;font-weight:600;letter-spacing:2px;margin-top:5px;color:#858574}.session-label{font-size:12px;color:#78806d;display:flex;align-items:center;gap:9px;max-width:340px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.session-label:before{content:'';width:5px;height:5px;background:var(--accent);border-radius:50%;flex-shrink:0}.world-tools{display:flex;gap:9px}.icon-button{width:38px;height:38px;display:grid;place-items:center;background:#fffdf660;border:1px solid #b7c1ae65;border-radius:50%;color:var(--ink);transition:background .2s,transform .2s}.icon-button:hover{background:#fffdf6;transform:translateY(-2px)}.icon-button[aria-pressed=true]{background:#dde8d4;border-color:#91a683}
#world-frame{position:absolute;top:95px;right:0;width:71%;height:calc(100svh - 270px);min-height:440px;z-index:1;overflow:hidden;touch-action:pan-y}#world{display:block;width:100%;height:100%;outline:none;cursor:grab;touch-action:pan-y}#world:active{cursor:grabbing}.world-caption{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.6px;color:#879079;white-space:nowrap;display:flex;align-items:center;gap:10px;pointer-events:none}.live-dot{height:5px;width:5px;background:#8ba478;border-radius:50%;box-shadow:0 0 0 4px #81986a0c}.caption-line{width:30px;height:1px;background:#abb39b}
#app{position:relative;z-index:2;min-height:calc(100svh - 160px);padding:0 4.5vw 90px;pointer-events:none}#app button,#app input,#app a,#app textarea,#app select,#app summary,.panel,.recipient-dock,.gallery{pointer-events:auto}.hero{padding-top:clamp(40px,8vh,100px);width:34%;max-width:435px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:2.1px;color:#8d987e;font-weight:650}.eyebrow:before{content:'';width:26px;height:1px;background:#a1ae8f}h1{font-size:clamp(34px,4vw,59px);letter-spacing:-2.4px;font-weight:650;line-height:1.28;margin:22px 0 19px}h1 em{font-style:normal;color:var(--accent);position:relative}h1 em:after{content:'';height:5px;background:#ce62451b;position:absolute;bottom:3px;left:0;right:0;border-radius:50%}h2{font-weight:650;letter-spacing:-.6px}p{line-height:1.8}.hero-copy{font-size:13px;color:#7e8475;line-height:1.95;max-width:305px;margin:0 0 24px}.hero-copy b{font-weight:550;color:#546447}.badge{display:inline-flex;align-items:center;gap:7px;border-radius:7px;font-size:10px;font-weight:500;background:#e5eadb;padding:7px 11px;color:#718164}.demo-badge{color:#a96a40;background:#eddfc640}.session-badge{background:#fff9eb70;border:1px solid #ced6c1}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:var(--accent);color:#fffbed;border:1px solid #bb5335;border-radius:13px;padding:16px 22px;font-size:13px;font-weight:650;min-height:51px;box-shadow:0 5px 0 #ac4e3226,0 12px 24px #b0612b17;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}.primary-button:hover{transform:translateY(-3px);box-shadow:0 8px 0 #ac4e321a,0 16px 30px #b0612b24;background:#d66b4d}.primary-button:active{transform:translateY(1px);box-shadow:0 2px 0 #ac4e3220}.primary-button svg{width:17px;height:17px}.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px;min-height:45px;border-radius:10px;background:#fffcf570;border:1px solid #b5c0a960;color:#68765e;font-size:12px;transition:background .2s,transform .2s}.secondary-button:hover{background:#fffaf0;transform:translateY(-2px)}.text-button{background:none;color:#7a8670;padding:7px 0;font-size:11px;letter-spacing:.1px}.text-button:hover{color:var(--accent)}.hero-notice{font-size:10px;color:#9a9d8d;margin-top:20px;display:flex;align-items:center;gap:6px}.steps{display:flex;margin-top:34px;gap:12px;align-items:center;font-size:10px;color:#9ca38f}.steps span{display:flex;align-items:center;gap:6px}.steps b{font-size:9px;font-weight:600;border:1px solid #bac5ac;border-radius:50%;height:19px;width:19px;display:grid;place-items:center}.steps .active{color:#657a56}.steps .active b{color:#fff9e8;background:#859b72;border-color:#859b72}.steps i{width:14px;height:1px;background:#b3bda5}.intro-counter{margin-top:30px;display:flex;align-items:center;gap:12px}.avatar-stack{display:flex}.avatar-stack span{width:27px;height:27px;border-radius:50%;background:#d7dfc8;border:2px solid #f3eedf;display:grid;place-items:center;font-size:10px;margin-left:-7px}.avatar-stack span:first-child{margin-left:0}.intro-counter small{color:#8b937e;font-size:10px}.intro-counter strong{color:#637859;font-weight:650}
.recipient-dock{position:relative;margin-top:clamp(72px,12vh,140px);width:100%;display:flex;align-items:center;gap:22px;padding:19px 23px;border-radius:19px;border:1px solid #fffdf4;background:#fffdf58c;box-shadow:0 6px 30px #747e5310;backdrop-filter:blur(14px)}.dock-title{font-size:10px;color:#8d977f;width:115px;flex-shrink:0;line-height:1.7}.dock-title strong{display:block;font-size:13px;color:#566748;font-weight:600;margin-bottom:2px}.recipient-list{display:flex;gap:11px;overflow-x:auto;flex:1;scrollbar-width:thin;scrollbar-color:#c6cfb6 transparent;padding:3px}.recipient{display:flex;align-items:center;gap:10px;position:relative;border:1px solid transparent;background:#f4f5eb;border-radius:11px;padding:11px 17px 11px 10px;color:#7e8773;flex-shrink:0;font-size:12px;min-width:114px;transition:transform .2s,background .2s,border-color .2s}.recipient:hover{transform:translateY(-3px);background:#e8eddc}.recipient[aria-pressed=true]{background:#edf0e0;border-color:#9ead7a;color:#526044;box-shadow:0 3px 10px #69795710}.recipient-avatar{width:34px;height:34px;display:grid;place-items:center;background:var(--person-color,#dfdfa8);border-radius:11px;font-size:20px;transform:rotate(-5deg)}.recipient-name{display:flex;flex-direction:column;gap:3px;align-items:flex-start}.recipient-name small{font-size:8px;color:#939c82}.recipient-check{position:absolute;right:4px;top:2px;color:#75935e;font-size:10px}.dock-more{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #b9c6ab55;border-radius:50%;background:#fffdf780;color:#71845d;flex-shrink:0}.progress-row{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#89947c}.progress-rail{height:3px;background:#d7dfc9;width:140px;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:#90a16e;width:0;transition:width .8s}.deadline-info{display:flex;gap:10px;align-items:center}.deadline-info b{font-weight:500;color:#748265}.bottom-bar{height:56px;padding:0 4.5vw;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;color:#919a83;position:relative;z-index:3;border-top:1px solid #b5c0a929;background:#edf0e650}.bottom-location{font-size:8px;letter-spacing:2px}.tiny-lock{font-size:12px;margin-right:5px}.toast{position:fixed;left:50%;bottom:74px;z-index:30;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#354a39;color:#fff9eb;box-shadow:var(--shadow);font-size:12px;padding:13px 21px;border-radius:12px;max-width:calc(100vw - 30px);transition:transform .25s,opacity .25s;line-height:1.6}.toast.visible{transform:translate(-50%,0);opacity:1}.flight-caption{position:fixed;left:50%;top:24%;transform:translateX(-50%);z-index:8;font-size:18px;font-weight:600;color:var(--accent);pointer-events:none;opacity:0;transition:opacity .3s;letter-spacing:-.5px;text-align:center}.flight-caption small{display:block;font-size:10px;font-weight:400;color:#8d977b;margin-top:10px;letter-spacing:1px}body.is-flying .hero,body.is-flying .recipient-dock,body.is-flying .progress-row{opacity:0;transition:opacity .35s}body.is-flying #world-frame{z-index:5}
 dialog{border:0;padding:0;color:var(--ink);box-shadow:0 30px 100px #37463430}dialog::backdrop{background:#6570533b;backdrop-filter:blur(7px)}dialog[open]{animation:dialog-in .36s cubic-bezier(.2,.8,.2,1)}.letter-dialog{width:min(600px,calc(100vw - 30px));max-height:calc(100svh - 40px);border-radius:5px 22px 22px 22px;background:var(--paper);overflow:auto;transform-origin:50% 100%}.letter-dialog:before{content:'';display:block;height:7px;background:repeating-linear-gradient(130deg,#c96d55 0 12px,transparent 12px 24px,#829976 24px 36px,transparent 36px 48px);opacity:.65}.letter-inner{padding:26px 34px 27px;position:relative;background:linear-gradient(90deg,transparent 34px,#de937f25 34px,#de937f25 35px,transparent 35px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#879278;font-size:9px;letter-spacing:2px}.dialog-close{width:31px;height:31px;border-radius:50%;background:#e9ebdf80;color:#7b886b;display:grid;place-items:center;font-size:20px}.letter-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px}.letter-heading h2{font-size:25px;margin:0;color:#5a6a4b}.letter-heading h2 span{font-size:13px;font-family:Georgia,serif;font-style:italic;color:#a5aa92;margin-right:10px}.postage{width:62px;height:76px;border:1px dashed #82966e;outline:4px solid #e5ebd6;background:#e5ebd6;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;transform:rotate(7deg);font-size:23px;color:#6c835d;flex-shrink:0}.postage small{font-size:6px;letter-spacing:1px}.letter-prompt{font-size:11px;color:#9ba18c;margin:17px 0 9px}.letter-textarea{border:0;background:repeating-linear-gradient(transparent 0px,transparent 31px,#d1d7c648 31px,#d1d7c648 32px);width:100%;min-height:224px;padding:5px 0;font-size:15px;line-height:32px;color:#556448;resize:vertical;outline:0}.letter-textarea::placeholder{color:#b0b79f;font-size:13px}.letter-textarea:focus-visible{outline:0;box-shadow:-3px 0 #99a986}.letter-heading+.letter-prompt{margin-top:17px}.letter-bottom{display:flex;justify-content:space-between;align-items:center;color:#97a087;font-size:10px;margin-top:5px}.paper-palette{display:flex;gap:9px;align-items:center}.paper-swatch{width:17px;height:17px;background:var(--swatch);border-radius:50%;border:2px solid #fffefa;box-shadow:0 0 0 1px #b6c0a533}.paper-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #899b74}.letter-sign{font-size:12px;color:#829071;margin-top:22px;text-align:right}.letter-sign em{font-family:Georgia,serif;font-size:15px;margin-right:10px;color:#adb39a}.letter-rule{height:1px;background:#dce1d0;margin:22px 0 16px}.privacy-copy{font-size:10px;line-height:1.7;color:#919c83;max-width:320px;margin:0}.letter-actions{display:flex;justify-content:space-between;align-items:center;gap:20px}.letter-actions .primary-button{min-height:45px;padding:13px 19px;flex-shrink:0}.saved-paper{font-size:14px;line-height:2.15;white-space:pre-wrap;overflow-wrap:anywhere;min-height:140px;margin:25px 0}.letter-dialog.folding{animation:fold-letter .55s cubic-bezier(.4,0,.5,1) forwards;overflow:hidden}.info-dialog{width:min(460px,calc(100vw - 32px));border-radius:20px;background:#fffbed;padding:29px;max-height:calc(100svh - 36px);overflow:auto}.info-dialog h2{font-size:23px;margin:15px 0}.info-dialog p{font-size:12px;color:#869075;line-height:1.9}.info-dialog label{font-size:12px;display:block;margin:16px 0 8px}.info-dialog input,.admin-input{width:100%;padding:12px;border:1px solid #bdc9ae;border-radius:9px;color:var(--ink);background:#fffdf4;min-height:43px}.info-dialog .primary-button{width:100%;margin-top:15px}.info-dialog .secondary-button{margin-top:10px}.help-step{display:flex;gap:13px;margin:21px 0;align-items:flex-start}.help-step b{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:#71865a;background:#e5ebd5;flex-shrink:0;font-size:13px}.help-step p{margin:0;font-size:11px}.help-step strong{display:block;font-size:13px;font-weight:550;color:#5c6e4c;margin-bottom:4px}
.success-card{position:relative;background:#fffdf2b0;border:1px solid #fffdfa;border-radius:20px;padding:24px 25px;width:330px;backdrop-filter:blur(14px);pointer-events:auto;animation:success-in .7s cubic-bezier(.1,.8,.2,1)}.success-icon{width:47px;height:47px;background:#e7edd7;color:#7f985e;border-radius:50%;display:grid;place-items:center;font-size:23px;margin-bottom:17px}.success-card h2{font-size:23px;margin:0 0 11px}.success-card p{font-size:12px;color:#8b967c;line-height:1.9;margin:0 0 20px}.success-card .primary-button{width:100%;font-size:12px;background:#81996c;border-color:#748c62;box-shadow:0 4px 0 #73876322}.success-card .text-button{display:block;width:100%;margin-top:12px}.success-card small{display:block;font-size:9px;color:#a2aa92;margin-top:14px;text-align:center}.success-hero{padding-top:80px}.own-notes{font-size:11px;margin-top:16px}.own-notes summary{color:#8d967f;cursor:pointer}.own-notes-list{display:flex;flex-direction:column;gap:5px;padding:9px 0}.own-notes-list button{background:#fff9ef75;border-radius:7px;padding:9px 11px;text-align:left;color:#73855e;font-size:11px;display:flex;align-items:center;justify-content:space-between}.game-hint{position:absolute;right:8vw;top:calc(100svh - 280px);font-size:9px;letter-spacing:.4px;color:#9ca28d;pointer-events:none}.game-hint span{display:inline-block;background:#fffdf860;border:1px solid #bfcaab50;border-radius:5px;padding:3px 5px;margin-right:5px}.demo-controls{display:flex;gap:10px;margin-top:16px}.demo-controls .text-button{font-size:10px}.gallery-heading{width:40%;padding-top:40px}.gallery-heading h1{font-size:43px}.gallery{position:relative;margin-top:80px;max-width:1050px;padding:24px 0}.gallery-filters{display:flex;gap:8px;overflow-x:auto;padding:4px 0 16px;scrollbar-width:thin}.filter-chip{padding:9px 15px;min-height:37px;border-radius:20px;border:1px solid #c4ccb4;background:#fff9ea80;color:#7b876c;font-size:11px;white-space:nowrap}.filter-chip[aria-pressed=true]{background:#80926c;border-color:#80926c;color:#fffbed}.letter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.postcard{padding:20px;text-align:left;background:var(--card-color,#fff9e8);border:1px solid #fffdf1;border-radius:4px 13px 13px 13px;box-shadow:0 8px 22px #6d794613;min-height:190px;position:relative;transform:rotate(var(--tilt,0deg));transition:transform .25s,box-shadow .25s;color:#586848}.postcard:hover{transform:translateY(-7px) rotate(0deg);box-shadow:0 16px 30px #6d794624}.postcard .mini-stamp{position:absolute;right:16px;top:15px;width:31px;height:37px;border:1px dashed #9cac82;display:grid;place-items:center;font-size:16px;color:#899a72}.postcard h3{font-size:15px;font-weight:550;max-width:70%;margin:5px 0 16px}.postcard h3 span{font-family:Georgia,serif;font-style:italic;font-size:11px;color:#a2ab8d;margin-right:6px}.postcard p{font-size:11px;line-height:1.95;color:#859173;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}.postcard small{display:block;font-size:9px;color:#9aa58a;margin-top:15px}.gallery-empty{padding:30px;background:#fff9ec70;border-radius:15px;font-size:12px;color:#859477}.gallery-mode #world-frame{height:510px;opacity:.6}.gallery-mode .world-caption{display:none}.admin-mode #world-frame{opacity:.18;position:fixed}.admin-mode #app{pointer-events:auto;max-width:1150px;margin:auto}.admin-hero{max-width:800px;width:auto;padding-top:35px}.admin-hero h1{font-size:36px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:25px}.panel{padding:25px;border:1px solid #fffaf0;background:#fffaf1d9;border-radius:17px;box-shadow:var(--shadow)}.panel h2{font-size:20px;margin:0 0 20px}.panel p{font-size:12px;color:#859375}.admin-form label{font-size:11px;display:block;margin:17px 0 8px;color:#81916e}.admin-form .primary-button{margin-top:22px}.admin-form input{width:100%;padding:13px;border:1px solid #c2ccb5;border-radius:9px;background:#fffdf5;color:var(--ink)}.session-list{display:flex;flex-direction:column;gap:11px}.session-card{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:17px;text-align:left;background:#f0f2e5;border:1px solid #dbe1cd;border-radius:10px;color:#667956;transition:transform .2s}.session-card:hover{transform:translateX(4px)}.session-card small{font-size:10px;color:#99a589;display:block;margin-top:6px}.invite{padding:15px;border:1px dashed #b9c7a9;border-radius:9px;margin:14px 0;overflow-wrap:anywhere;font-size:12px}.invite a{color:#799265}.admin-tools{display:flex;align-items:center;gap:10px;margin:20px 0;flex-wrap:wrap}.danger-button{font-size:11px;color:#ac705d;background:#f2e2d7;border:1px solid #e8d0c1;border-radius:9px;padding:12px 17px;min-height:42px}.note-moderate{margin-top:13px}.admin-notes{margin-top:35px}.error-state{padding-top:80px;max-width:420px}.error-state p{font-size:13px;color:#89957c}.css-island{position:absolute;left:50%;top:50%;width:250px;height:100px;background:#bac898;border-radius:50%;transform:translate(-50%,-50%) rotate(-10deg);box-shadow:0 25px #adbb83,0 45px #e1d0af}.css-house{position:absolute;bottom:50px;left:70px;width:100px;height:105px;background:#fbefd6;border-radius:8px;font-size:50px;text-align:center;color:#c66243;box-shadow:0 -15px #cc704c}.css-island span{position:absolute;right:-45px;bottom:20px;font-size:80px;color:#fffaf0}
@keyframes dialog-in{from{opacity:0;transform:translateY(24px) rotate(-2deg) scale(.95)}to{opacity:1;transform:none}}@keyframes success-in{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}@keyframes fold-letter{0%{transform:perspective(900px) rotateX(0) scale(1);opacity:1}65%{transform:perspective(900px) rotateX(45deg) scale(.66);opacity:.9}100%{transform:perspective(900px) rotateX(75deg) scale(.3);opacity:0}}
@media(min-width:1500px){#world-frame{right:1%;width:69%}.recipient-dock{max-width:1280px}.hero{padding-top:12vh}.recipient-dock{margin-top:15vh}}
@media(max-height:750px) and (min-width:761px){.hero{padding-top:35px}h1{font-size:43px}.hero-copy{font-size:12px}.steps{margin-top:24px}.recipient-dock{margin-top:60px}#world-frame{height:calc(100svh - 220px);min-height:380px}.intro-counter{margin-top:20px}.game-hint{top:calc(100svh - 200px)}}
@media(max-width:1050px){.hero{width:37%}h1{font-size:42px}#world-frame{width:67%;right:0}.session-label{max-width:220px;font-size:10px}.recipient{min-width:100px;padding-right:12px}.recipient-dock{gap:14px}.dock-title{width:90px}.letter-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.topbar{height:82px;padding:17px 23px;gap:12px}.brand{font-size:16px;gap:9px}.brand-mark{width:37px;height:37px;font-size:22px;border-radius:12px}.brand small{font-size:6px;letter-spacing:1.4px}.session-label{display:none}.icon-button{width:32px;height:32px}.world-tools{gap:6px}.icon-button svg{width:16px;height:16px}#app{padding:0 23px 25px;min-height:calc(100svh - 132px)}.hero{padding-top:25px;width:100%;max-width:none}.eyebrow{font-size:8px;letter-spacing:1.6px}h1{font-size:37px;letter-spacing:-1.9px;margin:16px 0 13px;max-width:310px}.hero-copy{font-size:11px;line-height:1.8;max-width:280px;margin-bottom:17px}.hero-actions .primary-button{padding:13px 18px;min-height:46px;font-size:12px}.hero-notice{font-size:9px;margin-top:13px}.steps{margin-top:19px;font-size:9px;gap:8px}.steps b{width:17px;height:17px}.steps i{width:9px}.intro-counter{margin-top:16px}.intro-counter small{font-size:9px}.intro-counter .avatar-stack span{width:24px;height:24px}#world-frame{top:290px;width:100%;right:0;height:350px;min-height:0}.world-caption{bottom:5px;font-size:8px}.recipient-dock{margin-top:300px;padding:15px 13px;gap:10px;display:block;border-radius:14px}.dock-title{width:auto;display:flex;justify-content:space-between;gap:10px;align-items:center;margin:0 1px 8px;font-size:9px}.dock-title strong{font-size:11px;margin:0}.recipient-list{gap:8px;padding:4px 1px}.recipient{min-width:99px;padding:9px 12px 9px 8px;font-size:11px}.recipient-avatar{width:29px;height:29px;border-radius:9px;font-size:18px}.recipient-name small{font-size:7px}.dock-more{display:none}.progress-row{font-size:8px;align-items:flex-start;gap:8px;margin-top:12px}.progress-rail{width:70px}.deadline-info{gap:5px;flex-wrap:wrap;max-width:190px;line-height:1.7}.bottom-bar{height:50px;padding:0 23px;font-size:8px}.bottom-location{display:none}.bottom-bar .text-button{font-size:9px}.game-hint{top:606px;right:8vw;font-size:8px}.letter-inner{padding:22px 23px;background:none}.letter-dialog{width:calc(100vw - 26px);max-height:calc(100svh - 30px)}.letter-heading{margin-top:16px}.letter-heading h2{font-size:22px}.postage{width:45px;height:56px;font-size:20px}.postage small{font-size:5px}.letter-textarea{font-size:14px;min-height:192px}.letter-actions{align-items:stretch;flex-direction:column;gap:15px}.privacy-copy{font-size:9px;max-width:none}.letter-actions .primary-button{width:100%;min-height:48px}.letter-prompt{font-size:10px}.letter-sign{margin-top:17px}.letter-rule{margin:19px 0 14px}.letter-bottom{font-size:9px}.success-hero{padding-top:24px}.success-card{width:100%;padding:22px}.success-card h2{font-size:22px}.success-icon{width:38px;height:38px;font-size:20px;margin-bottom:12px}.success-card p{font-size:11px;margin-bottom:16px}.success-hero+.recipient-dock{margin-top:290px}body.is-flying #world-frame{top:130px;height:500px}.flight-caption{top:13%;font-size:16px;white-space:nowrap}.gallery-heading{width:100%;padding-top:20px}.gallery-heading h1{font-size:35px}.gallery-mode #world-frame{top:210px;height:350px;opacity:.7}.gallery{margin-top:270px;padding-top:0}.letter-grid{grid-template-columns:1fr 1fr;gap:12px}.postcard{padding:14px;min-height:175px}.postcard h3{font-size:12px;margin-top:35px;max-width:100%;margin-bottom:12px}.postcard .mini-stamp{width:24px;height:29px;font-size:12px;top:10px;right:12px}.postcard p{font-size:10px}.postcard small{font-size:8px;margin-top:12px}.gallery-filters{gap:7px}.filter-chip{font-size:10px;padding:8px 12px}.admin-grid{grid-template-columns:1fr;gap:16px}.panel{padding:21px}.admin-hero h1{font-size:29px}.admin-hero{padding-top:20px}.admin-mode #world-frame{top:170px}.admin-mode .letter-grid{grid-template-columns:1fr}.info-dialog{padding:25px}.error-state{padding-top:35px}.error-state h1{font-size:31px}.demo-controls{margin-top:11px}.own-notes{margin-top:13px;font-size:10px}}
@media(max-width:360px){.topbar{padding:15px 18px}#app{padding-left:18px;padding-right:18px}h1{font-size:33px}.letter-grid{grid-template-columns:1fr}.recipient{min-width:94px}.icon-button{width:29px;height:29px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.letter-dialog.folding{opacity:0}}body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}

.post-office-photo{display:block;width:100%;border-radius:12px;margin:15px 0;border:1px solid #d7dfc7}.info-dialog:has(.post-office-photo){width:min(650px,calc(100vw - 32px))}

/* Keep the island in the mobile reading flow, never underneath the composer CTA. */
#world-frame{top:0;pointer-events:auto}
.hero,.recipient-dock,.progress-row,.gallery,.admin-grid,.admin-notes,.admin-tools{position:relative;z-index:2}
#world-fallback[hidden]{display:none}
@media(max-width:760px){
 #world-frame{position:relative;top:auto;right:auto;left:-23px;width:calc(100% + 46px);height:330px;margin:5px 0 16px;z-index:1}
 h1{font-size:34px;max-width:none}
 .hero .steps,.hero .intro-counter{display:none}
 .hero-notice{margin-bottom:12px}
 .hero .badge{font-size:8px;padding:5px 9px}
 .recipient-dock,.success-hero+.recipient-dock{margin-top:0}
 .game-hint{position:static;right:auto;top:auto;text-align:center;margin:12px 0 0}
 .gallery-mode #world-frame{position:relative;top:auto;height:270px;margin:0 0 15px;opacity:.85}
 .gallery{margin-top:10px}
 body.is-flying #world-frame{position:fixed;top:130px;left:0;right:0;width:100%;height:500px;margin:0}
 .admin-mode #world-frame{position:fixed;top:120px;left:0;width:100%;pointer-events:none}
}
@media(max-width:360px){#world-frame{left:-18px;width:calc(100% + 36px)}}
/* A complete first view on a laptop: keep the recipient dock above the fold. */
@media(min-width:761px){
 #app{padding-bottom:44px}
 .hero{padding-top:clamp(34px,4.8vh,55px)}
 h1{font-size:clamp(34px,3.2vw,49px)}
 .hero-copy{margin-bottom:20px}
 .hero-notice{margin-top:15px}
 .steps{margin-top:24px}
 .intro-counter{margin-top:20px}
 .demo-controls{margin-top:12px}
 .recipient-dock{margin-top:48px}
 .world-caption{bottom:112px}
 .game-hint{position:relative;top:auto;right:auto;text-align:right;margin-top:12px}
}
.primary-button{max-width:100%}.primary-button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recipient-name>span{max-width:85px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.letter-heading h2{overflow-wrap:anywhere}.gallery-heading .hero-copy{white-space:pre-line}
@media(min-width:761px) and (max-height:780px){.hero{padding-top:22px}.hero .steps{display:none}.intro-counter{margin-top:15px}.hero-notice{margin-top:10px}.recipient-dock{margin-top:27px;padding-top:15px;padding-bottom:15px}.demo-controls{margin-top:8px}.game-hint{margin-top:8px}.world-caption{bottom:98px}}

/* Visual stage 01 — paper, ink and editorial typography. */
@font-face{font-family:'Post Myeongjo';src:url('/fonts/NanumMyeongjo-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Post Myeongjo';src:url('/fonts/NanumMyeongjo-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{--ink:#34483c;--soft:#657260;--accent:#b84f36;--cream:#f9f3e7;--line:#cbd0bb;--green:#5f795c;--paper:#fffaf0;--type-display:'Post Myeongjo','Batang',serif;--type-body:'Segoe UI','Malgun Gothic',sans-serif;--shadow:0 18px 50px #34483c16;font-family:var(--type-body);background:#f4eee1}
body{background:radial-gradient(ellipse at 70% 36%,#fff9e7 0%,#f7f1e2 34%,transparent 68%),linear-gradient(145deg,#e8eee3 0%,#f5edde 53%,#e4e9da 100%)}
.sky-grain{opacity:.048}
h1,h2,.brand>span:last-child,.postcard h3,.flight-caption{font-family:var(--type-display);font-weight:700;text-wrap:balance}
h1{letter-spacing:-.065em;line-height:1.38;color:var(--ink)}
h1 em{color:var(--accent)}h1 em:after{height:7px;background:#b84f3616;bottom:1px;border-radius:0;transform:rotate(-1deg)}
.brand{letter-spacing:-.035em}.brand small{font-family:var(--type-body);font-weight:600;letter-spacing:.19em;font-size:9px;color:#687660}
.brand-mark{background:var(--accent);box-shadow:0 4px 0 #883e2921;color:#fff8e9}
.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:600;color:#5f775b}.eyebrow:before{background:#839377}
.hero-copy{font-size:14px;line-height:1.95;letter-spacing:-.015em;color:#657260;max-width:320px}.hero-copy b{font-weight:650;color:#405a42}
.primary-button{background:var(--accent);border-color:#a04530;color:#fffaf0;font-size:14px;font-weight:650;letter-spacing:-.015em;box-shadow:0 4px 0 #883e292b,0 12px 26px #994a2c18}.primary-button:hover{background:#a94731}
.secondary-button{color:#4f694f;border-color:#a9b79b;background:#fffaf099;font-size:12px}.text-button{color:#5f735b}
.hero-notice{font-size:11px;color:#657260;line-height:1.7}.steps{color:#74826b;font-size:11px}.steps .active{color:#3f6142}.steps .active b{background:#617d59;border-color:#617d59}
.session-label,.intro-counter small,.world-caption,.game-hint,.progress-row,.bottom-bar{color:#66765e}.intro-counter small{font-size:11px}.intro-counter strong{color:#456243}
.badge{font-size:11px;color:#506647;background:#e4ead7}.demo-badge{color:#8a5237;background:#eee1cc}.session-badge{background:#fff9edb3}
.recipient-dock{background:#fffaf0b8;border-color:#fffdf5;box-shadow:0 7px 28px #4659400e}.dock-title{font-size:11px;color:#637459}.dock-title strong{font-size:14px;color:#3e5940}
.recipient{color:#4f6449;background:#edf0e3;font-size:13px}.recipient[aria-pressed=true]{color:#344f36;background:#e3ead5;border-color:#819666}.recipient-name small{font-size:10px;color:#667859}.recipient-check{color:#426b40}.recipient:hover{background:#e2e9d3}
.progress-row{font-size:11px}.progress-rail{background:#ced7bd}.progress-fill{background:#698451}.deadline-info b{color:#506b49}.bottom-bar{font-size:11px;background:#e7ecde80}.bottom-location{font-size:9px}
.letter-dialog{background:var(--paper);box-shadow:0 26px 90px #34483c33}.letter-dialog:before{opacity:.8;background:repeating-linear-gradient(130deg,#b84f36 0 12px,transparent 12px 24px,#63805d 24px 36px,transparent 36px 48px)}
.letter-heading h2{font-size:27px;color:#3d5940;letter-spacing:-.05em}.dialog-top{color:#63745d;font-size:10px;letter-spacing:.14em}.letter-prompt{color:#64735d;font-size:12px;line-height:1.8}.letter-textarea{font-family:var(--type-display);font-weight:400;color:#34483c;font-size:17px;letter-spacing:-.025em;line-height:32px;caret-color:var(--accent)}.letter-textarea::placeholder{color:#7d8872;opacity:1}
.letter-bottom,.privacy-copy,.letter-sign{color:#61725a}.privacy-copy{font-size:11px;line-height:1.8}.letter-sign{font-family:var(--type-display)}.postage{color:#58704b;border-color:#7d9466;outline-color:#e3e9d5}
.postcard{color:#3d5940;border-color:#f9f6e9;box-shadow:0 8px 24px #465b4214}.postcard h3{font-size:17px;letter-spacing:-.035em}.postcard p{font-family:var(--type-display);font-size:14px;font-weight:400;line-height:1.9;color:#4e6448}.postcard small{font-size:10px;color:#65775b}.filter-chip{color:#52694b}.filter-chip[aria-pressed=true]{background:#5d7856;border-color:#5d7856}
.success-card h2{color:#3d5940;letter-spacing:-.05em}.success-card p,.panel p{color:#61725a}.panel h2{color:#3d5940}.admin-form label{color:#5c7154}.info-dialog p{color:#596f52;line-height:1.9}
@media(min-width:761px){h1{font-size:clamp(33px,3.05vw,46px)}.gallery-heading h1{font-size:42px}}
@media(max-width:760px){h1{font-size:33px;line-height:1.4;letter-spacing:-.065em}.hero-copy{font-size:13px;max-width:310px}.hero-notice{font-size:10px}.hero-actions .primary-button{font-size:13px}.brand small{font-size:7px;letter-spacing:.14em}.eyebrow{font-size:9px}.dock-title strong{font-size:13px}.dock-title{font-size:10px}.recipient{font-size:12px}.recipient-name small{font-size:9px}.progress-row{font-size:10px}.bottom-bar{font-size:10px}.letter-heading h2{font-size:24px}.letter-textarea{font-size:16px}.letter-prompt{font-size:11px}.privacy-copy{font-size:10px}.postcard h3{font-size:15px}.postcard p{font-size:13px}.postcard small{font-size:9px}.gallery-heading h1{font-size:33px}.world-caption{font-size:9px}.game-hint{font-size:10px}}
@media(max-width:360px){h1{font-size:30px}.brand small{font-size:6px}}

/* Stage 03 — folding paper, wax seal and a gentle delivery rhythm. */
.letter-dialog.folding{animation:mail-release .95s cubic-bezier(.4,0,.2,1) forwards;perspective:900px;overflow:hidden}
.letter-dialog.folding .letter-inner{animation:ink-away .95s ease forwards}
.folded-mail{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;z-index:5}
.fold-panel{position:absolute;left:0;right:0;height:50%;background:var(--paper);backface-visibility:hidden;box-shadow:0 1px 8px #5a61461a;border:1px solid #ddd6c1}
.fold-top{top:0;transform-origin:50% 100%;animation:paper-top .95s ease-in-out forwards;background:linear-gradient(180deg,#fffdf4,var(--paper))}
.fold-bottom{bottom:0;transform-origin:50% 0;animation:paper-bottom .95s ease-in-out forwards;background:linear-gradient(0deg,#eee5d3,var(--paper))}
.wax-seal{position:absolute;top:calc(50% - 23px);left:calc(50% - 23px);width:46px;height:46px;border-radius:48% 52% 45% 55%;display:grid;place-items:center;background:#b84f36;border:3px double #d88460;color:#ffeac9;box-shadow:0 3px 6px #783e2b30;font-size:20px;opacity:0;animation:seal-press .95s ease forwards}
@keyframes ink-away{0%,12%{opacity:1}38%,100%{opacity:0}}
@keyframes paper-top{0%,10%{transform:rotateX(-90deg);opacity:0}15%{opacity:1}55%,100%{transform:rotateX(0);opacity:1}}
@keyframes paper-bottom{0%,30%{transform:rotateX(90deg);opacity:0}35%{opacity:1}70%,100%{transform:rotateX(0);opacity:1}}
@keyframes seal-press{0%,58%{opacity:0;transform:scale(1.8) rotate(-15deg)}76%{opacity:1;transform:scale(.90) rotate(-8deg)}86%,100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes mail-release{0%,60%{transform:perspective(900px) scale(1);opacity:1}78%{transform:perspective(900px) rotateX(12deg) scale(.72);opacity:1}100%{transform:perspective(900px) rotateX(30deg) translateY(-70px) scale(.24);opacity:0}}
.success-icon{animation:arrival-mark .65s cubic-bezier(.2,.8,.3,1.3) both}.success-card h2{animation:arrival-copy .5s .12s both}.success-card p{animation:arrival-copy .5s .20s both}
@keyframes arrival-mark{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes arrival-copy{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.letter-dialog.folding,.letter-dialog.folding .letter-inner,.fold-panel,.wax-seal,.success-icon,.success-card h2,.success-card p{animation:none!important}.folded-mail{display:none}}
body.reduce-motion .folded-mail{display:none}body.reduce-motion .success-icon,body.reduce-motion .success-card h2,body.reduce-motion .success-card p{animation:none}

/* Stage 04 — selection next to its action, comfortable touch and focused delivery. */
.dock-write{display:none}.draft-status{font-family:var(--type-body);font-size:10px;line-height:1.7;color:#6f7d66;margin:7px 0 0}
.dialog-close{width:40px;height:40px;flex-shrink:0}.paper-palette{gap:3px}.paper-swatch{position:relative;width:36px;height:36px;background:transparent;border:0;box-shadow:none!important;display:grid;place-items:center}.paper-swatch:before{content:'';width:20px;height:20px;border-radius:50%;background:var(--swatch);border:2px solid #fffdf5;box-shadow:0 0 0 1px #a6b59666}.paper-swatch[aria-pressed=true]:before{box-shadow:0 0 0 2px #607a52}.paper-swatch[aria-pressed=true]:after{content:'✓';position:absolute;font-size:12px;color:#4c6843}
.recipient{min-height:58px}.recipient:focus-visible{outline-offset:0}.recipient-list{scroll-snap-type:x proximity}.recipient{scroll-snap-align:start}
.success-card{border:1px solid #fffdf4;background:linear-gradient(140deg,#fffdf4ee,#f3f2e6d9)}.success-card .primary-button{background:#5f7957;border-color:#516c4a;box-shadow:0 4px 0 #3d5f3820}.success-card .primary-button:hover{background:#526d4c}
.saved-paper{font-family:var(--type-display);font-size:17px;line-height:2.05;letter-spacing:-.025em;color:#34483c}.postcard{min-height:220px}.postcard p{-webkit-line-clamp:4}.gallery-filters{position:relative;z-index:3}.filter-chip{min-height:42px}
body.is-flying .bottom-bar,body.is-flying .game-hint{opacity:0;pointer-events:none}body.is-flying .hero,body.is-flying .recipient-dock,body.is-flying .progress-row{pointer-events:none}
@media(max-width:760px){
 #app{display:flex;flex-direction:column}.hero{order:0}#world-frame{order:2}.recipient-dock{order:1;margin-top:20px!important}.progress-row{order:3}.game-hint{order:4}.gallery{order:3}
 .recipient-dock{padding:16px 13px 13px;background:#fffaf0dc}.dock-write{display:flex;width:100%;margin-top:12px;min-height:46px;font-size:13px;padding:12px 15px}.recipient-list{padding-bottom:8px}.recipient{min-height:60px}.recipient-name>span{max-width:110px}
 #world-frame{height:300px;margin-top:12px;margin-bottom:4px}.success-hero{padding-top:12px}.success-card{padding:21px}.success-card h2{font-size:23px;margin:10px 0 13px}.success-card p{font-size:12px;line-height:1.9}.success-card .text-button{min-height:40px}.success-card small{line-height:1.8}
 .draft-status{font-size:10px}.paper-swatch{width:40px;height:40px}.letter-textarea{min-height:192px}.letter-inner{padding-top:20px}.dialog-close{width:40px;height:40px}.info-dialog input,.admin-form input{font-size:16px}
 .flight-caption{top:96px;font-size:18px;width:calc(100% - 36px);white-space:normal;line-height:1.5}.flight-caption small{margin-top:6px;font-size:9px}
 body.is-flying #world-frame{position:fixed;top:160px;left:0;width:100%;height:calc(100svh - 190px);min-height:240px;margin:0;z-index:5}.is-flying .world-caption{display:none}
 .toast{bottom:18px;max-width:calc(100vw - 36px);padding:12px 17px;font-size:12px}.gallery-mode .recipient-dock{display:none}.gallery-mode #world-frame{order:1;height:230px}.letter-grid{grid-template-columns:1fr;gap:16px}.postcard{min-height:185px;padding:22px}.postcard h3{margin-top:0;max-width:80%;font-size:18px}.postcard p{font-size:15px}.postcard .mini-stamp{width:30px;height:36px;right:17px;top:17px}.saved-paper{font-size:16px;line-height:2}
}
@media(prefers-reduced-motion:reduce){.recipient-list{scroll-behavior:auto}}
@media(max-width:760px){#world-frame{order:1}.recipient-dock{order:2}.gallery-mode #world-frame{order:1}.gallery{order:3}}
@media(max-width:760px){.gallery-heading>.secondary-button{display:flex;width:100%;margin-top:14px}.gallery-heading .badge{margin-top:4px}.recipient-list{scrollbar-width:none}.recipient-list::-webkit-scrollbar{display:none}.gallery-filters{scrollbar-width:none}.gallery-filters::-webkit-scrollbar{display:none}}
@media(min-width:761px) and (max-height:900px){.hero .steps{display:none}.recipient-dock{margin-top:24px}.intro-counter{margin-top:16px}.hero-notice{margin-top:12px}}
.garden-entry{display:block;width:fit-content;margin-top:12px;font-size:12px;line-height:1.8;color:#4d7057;text-underline-offset:4px;pointer-events:auto}

.hero h1{word-break:keep-all;overflow-wrap:anywhere}