@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');
:root{--ink:#343c31;--muted:#878979;--accent:#58634c;--paper:#f5f0e7;--line:#dcdcd0}*{box-sizing:border-box}body{margin:0;background:#eee8dc;color:var(--ink);font:14px 'DM Sans',sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--line);border-radius:7px;background:transparent;padding:11px 15px;transition:.2s}button:hover{background:#e9e8dc;transform:translateY(-1px)}button:focus-visible,a:focus-visible{outline:3px solid #b28d49;outline-offset:3px}.dark{background:var(--ink);border-color:var(--ink);color:#fff}.dark:hover{background:#536048}header{height:84px;display:flex;align-items:center;padding:0 36px;border-bottom:1px solid #d8d6c8;gap:30px;background:#f7f4ed}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font:30px Georgia}.brand span{font-size:23px}.brand small{display:block;font:7px 'DM Sans';letter-spacing:2px;margin-top:4px}.project-name{margin:auto;font-size:13px}.project-name span{color:#9b9a8b}.actions{display:flex;gap:8px}main{height:calc(100dvh - 84px);display:grid;grid-template-columns:340px 1fr}aside{background:#f7f4ed;padding:30px 25px 15px;overflow-y:auto;border-right:1px solid #d8d6c8}.eyebrow{font-size:9px;letter-spacing:2.4px;color:#8d907a}h1{font:36px/1.12 'Playfair Display',Georgia;margin:17px 0 10px;font-weight:400}h1 i{font-weight:400;color:#7c8664}.intro{color:var(--muted);font-size:12px;margin-bottom:28px}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:24px}.tabs button{font-size:11px;border:0;border-radius:0;padding:10px 3px;flex:1;color:#8f9184}.tabs .active{border-bottom:2px solid var(--ink);color:var(--ink)}label{display:block;font-size:9px;letter-spacing:1.3px;margin:20px 0 9px;color:#777e6d}.templates{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.templates button{padding:13px 3px;font-size:10px;background:#efeee5;border-color:transparent}.templates b{display:block;font:28px Georgia;margin-bottom:9px;color:var(--accent)}.templates small{font-size:7px;display:block;margin-top:5px;color:#949580}.templates .chosen{border-color:var(--accent);background:#e3e7da}input:not([type=checkbox]),textarea,select{width:100%;border:1px solid #deded1;border-radius:6px;background:#fffdf8;padding:11px;color:var(--ink);outline:none}input:focus,textarea:focus,select:focus{border-color:var(--accent)}textarea{resize:vertical;line-height:1.6}.two{display:flex;gap:10px}.two>*{flex:1;min-width:0}.swatches{display:flex;gap:12px}.swatches button{background:var(--sw);width:29px;height:29px;border:4px solid #f6f3e9;box-shadow:0 0 0 1px #d1d3c6;padding:0;border-radius:50%}.swatches .selected{box-shadow:0 0 0 2px #656e57}.editor-footer{font-size:9px;color:#8c907d;margin-top:25px;display:flex;align-items:center;gap:8px}.dot{width:5px;height:5px;border-radius:50%;background:#869277}.workspace{min-width:0;position:relative;display:flex;flex-direction:column;background:radial-gradient(ellipse at 48% 40%,#faf7ee 0,#e6e4d6 65%,#dadccf 100%);overflow:hidden}.workspace:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23656550' filter='url(%23n)' opacity='.4' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.workspace-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.6px;padding:25px 32px;z-index:2;color:#7e8570}.stage-wrap{flex:1;min-height:250px;position:relative;display:flex;align-items:center;justify-content:center;perspective:1300px}#scene{width:min(94%,950px);transition:opacity .8s,transform 1.2s;position:relative;z-index:1;filter:drop-shadow(0px 25px 22px #484d3930)}#scene svg{display:block;width:100%;max-height:53vh;overflow:visible}.popup{transform-origin:400px 405px;transition:transform 1.5s cubic-bezier(.22,.7,.18,1),opacity 1s}.closed .popup{transform:scaleY(.03);opacity:0}.closed #scene{opacity:0;transform:translateY(30px) scale(.8)}.half .popup{transform:scaleY(.05)}.ambient{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none}.ambient.one{width:300px;height:300px;background:#fff7d540;top:0;right:15%}.ambient.two{width:260px;height:260px;background:#bcc6a540;left:10%;bottom:15%}.caption{text-align:center;z-index:2;padding:0 15px 20px}.caption span{font-size:8px;letter-spacing:2px;color:#8c927b}.caption h2{font:30px 'Playfair Display',Georgia;font-weight:400;margin:10px 0}.caption p{font-size:11px;color:#929581;margin:0}.bottom-bar{display:flex;align-items:center;justify-content:space-between;padding:17px 32px;border-top:1px solid #d4d7c8;z-index:2}.bottom-bar button{font-size:11px}.bottom-bar #reset{border:0;color:#7c836e}.progress{display:flex;gap:7px}.progress i{display:block;width:5px;height:5px;background:#c0c5b3;border-radius:50%}.progress i.on{background:#59694a;width:16px;border-radius:3px}.upload{padding:14px;border:1px dashed #bfc5b0;border-radius:7px;text-align:center;letter-spacing:0;font-size:12px;cursor:pointer;background:#eeeee3}.subtle{padding:6px;border:0;font-size:10px;color:#818773}.hint{font-size:11px;line-height:1.6;color:#878e79}.hint-box{margin:20px 0;padding:15px;background:#e9ecdf;border-radius:6px;font-size:11px;line-height:1.7}.check{display:flex;align-items:center;font-size:12px;gap:7px}.order-row{display:flex;align-items:center;gap:10px;margin:8px 0;background:#eceee3;padding:10px;border-radius:5px}.order-row span{flex:1}.order-row button{padding:5px 9px}#envelope{position:absolute;width:350px;height:230px;z-index:4;transition:transform 1.2s,opacity .7s;transform:rotate(-7deg);filter:drop-shadow(4px 24px 18px #51543c40)}.envelope-back{position:absolute;inset:0;background:#d9cdb2;border:1px solid #c3b797}.envelope-front{position:absolute;inset:0;background:linear-gradient(150deg,#f2e9d4,#dfd0ad);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}.envelope-flap{position:absolute;inset:0;background:#e5d8ba;clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top;transition:transform .9s}.letter-slip{position:absolute;left:20px;right:20px;top:15px;height:190px;background:#fcf6e8;display:flex;align-items:center;justify-content:center;font:22px Georgia;color:#8c856d;transition:transform .9s}.unsealed .envelope-flap{transform:rotateX(180deg)}.unsealed .letter-slip{transform:translateY(-60px)}#seal{position:absolute;z-index:5;left:148px;top:105px;width:55px;height:55px;border-radius:50%;background:#8b5146;color:#f4dfc3;box-shadow:inset 0 0 0 5px #a36c5e,3px 4px 4px #51392d30;border:1px solid #81483e;font-size:23px;padding:0}#envelopeTo{position:absolute;top:173px;left:0;right:0;text-align:center;font:italic 17px Georgia;color:#7f7258}.opened #envelope{opacity:0;pointer-events:none;transform:translateY(220px) rotate(-13deg) scale(.7)}dialog{border:1px solid #d8ceba;background:#fffaf0;color:var(--ink);border-radius:3px;width:min(90vw,480px);padding:38px;text-align:center;box-shadow:0 25px 100px #26302140}dialog::backdrop{background:#35412e65;backdrop-filter:blur(6px)}dialog h2{font:italic 29px Georgia}dialog p{font:18px/1.7 Georgia;white-space:pre-wrap}dialog img{max-width:100%;max-height:40vh;border:8px solid white;box-shadow:0 5px 20px #0002}#closeReveal{position:absolute;right:9px;top:8px;border:0;font-size:20px}#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);padding:12px 24px;background:#303c2d;color:white;border-radius:30px;opacity:0;transition:.3s;z-index:30;pointer-events:none;font-size:12px}#toast.visible{opacity:1;transform:translate(-50%,0)}body.recipient main{grid-template-columns:1fr}body.recipient aside{display:none}body.recipient .workspace-top{justify-content:space-between}body.recipient .workspace-top>span:nth-child(2){display:none}body.recipient .actions #preview{display:none}.hotspot{cursor:pointer;transition:filter .2s}.hotspot:hover{filter:brightness(1.1)}@media(max-width:850px){header{padding:0 16px;height:64px}.project-name{display:none}.brand span{font-size:19px}.brand small{font-size:6px}.actions{margin-left:auto}.actions button{font-size:10px;padding:9px}main{height:auto;min-height:calc(100dvh - 64px);display:flex;flex-direction:column}.workspace{order:0;min-height:58dvh}aside{order:1;padding:24px;overflow:visible;border:0}.workspace-top{padding:18px;font-size:8px}.workspace-top>span:nth-child(2){display:none}.stage-wrap{min-height:240px}#scene svg{max-height:40vh}#scene{width:100%}.caption{padding-bottom:10px}.caption h2{font-size:24px}.bottom-bar{padding:10px 16px}.caption p{font-size:10px}h1{font-size:30px}h1 br{display:none}.templates{max-width:none}.tabs{margin-bottom:15px}.recipient .workspace{min-height:calc(100dvh - 64px)}.recipient .stage-wrap{min-height:45vh}#envelope{transform:rotate(-6deg) scale(.8)}.progress{gap:4px}.editor-footer{margin-bottom:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media(max-width:850px){h1 i:before{content:' '}.brand small{letter-spacing:1.5px}.actions button{white-space:nowrap;padding:9px 7px}}
/* Paper theatre — immersive second edition */
body{background:#1c2525;color:#efe4ce}header{background:transparent;position:absolute;top:0;left:0;right:0;z-index:7;border-bottom:1px solid #ffffff12;color:#e8dcc7;height:85px}.brand small{color:#b6ad99}.project-name{color:#d4cbb6}.project-name span{color:#8f968b}.actions button{border-color:#ffffff25;background:#eee3ca0a;color:#efe4ce}.actions .dark{background:#c5a571;color:#262e28}.actions #save{display:none}.workspace{background:radial-gradient(ellipse at 58% 40%,#35413c,#172221 75%);height:100dvh;min-height:650px}.workspace:after{opacity:.06}.workspace-top{position:absolute;top:100px;left:0;right:0;color:#b2b8a5;padding:20px 35px;pointer-events:none}.workspace-top button{pointer-events:auto;color:#e6d5b6}main{display:block;height:100dvh}.stage-wrap{position:absolute;inset:0;min-height:0}.ambient{display:none}#scene{width:100%;height:100%;position:absolute;inset:0;filter:none!important;opacity:1!important;transform:none!important}#scene canvas{display:block;width:100%;height:100%;touch-action:none}#envelope{display:none}.caption{position:absolute;left:35px;bottom:110px;text-align:left;pointer-events:none;max-width:400px;padding:0}.caption span{color:#b3bba6}.caption h2{font-size:39px;color:#f0e4ce;margin:13px 0}.caption p{color:#b0b5a5;font-size:11px}.bottom-bar{position:absolute;bottom:0;left:0;right:0;height:80px;border-top:1px solid #ffffff16;background:#17222188;backdrop-filter:blur(10px)}.bottom-bar .dark{background:#d9bf8e;color:#25342c;border:0;padding:14px 25px}.bottom-bar #reset{color:#b2b8a8}.progress i.on{background:#d9bf8e}aside{position:absolute;z-index:9;top:0;left:0;bottom:0;width:350px;transform:translateX(-101%);transition:transform .45s cubic-bezier(.2,.7,.2,1);color:#343c31;box-shadow:15px 0 70px #0005;padding-top:45px;border-right:none}.editing aside{transform:translateX(0)}.editing .caption{opacity:0}.editing #scene{left:175px;width:calc(100% - 175px)}#closeEditor{position:absolute;right:12px;top:10px;border:0;font-size:22px}.editing header .brand{opacity:0}.editing .actions #save{display:block}.editing .project-name{opacity:0}.workspace:after{pointer-events:none}.recipient .workspace{height:100dvh}#threeStatus{position:absolute;top:48%;left:15%;right:15%;text-align:center;font:20px Georgia;z-index:3;pointer-events:none}.recipient #openEditor{display:none}dialog{box-shadow:0 20px 150px #0009}dialog::backdrop{background:#111b1bcc}.upload,input,select,textarea,aside button{color:#343c31}.hotspot-hint{color:#e0d0af}@media(max-width:850px){header{height:72px;padding:0 15px;gap:10px}.brand{font-size:21px;gap:4px}.brand span{font-size:17px}.brand small{font-size:5px}.actions{gap:6px}.actions #preview{display:none}.actions button{padding:9px;font-size:10px}.workspace{min-height:100dvh}.workspace-top{top:75px;padding:15px 20px;font-size:8px}.caption{left:22px;bottom:103px;max-width:280px}.caption h2{font-size:30px}.caption p{font-size:10px;line-height:1.6}.bottom-bar{height:75px;padding:12px 16px}.bottom-bar .dark{padding:13px 16px}.stage-wrap{min-height:0}aside{width:100%;top:34dvh;bottom:0;transform:translateY(101%);border-radius:22px 22px 0 0;padding:25px 22px;overflow-y:auto}.editing aside{transform:translateY(0)}.editing #scene{left:0;width:100%;height:48dvh}.editing header .brand{opacity:1}.editing .bottom-bar{display:none}.editing .workspace-top{display:none}aside h1{font-size:26px;margin:15px 0 0}aside .intro{margin:8px 0 12px}.recipient .workspace{min-height:100dvh}.recipient .stage-wrap{min-height:0}}
#messageFormed{position:absolute;top:21%;left:24%;right:24%;text-align:center;color:#efe2c8;font:italic 25px/1.6 'Playfair Display',Georgia;z-index:3;pointer-events:none;text-shadow:0 2px 20px #18251c;max-height:30vh;overflow:auto}#messageFormed:empty{display:none}body.courier-mode .caption h2{font-size:31px}body.courier-mode #envelope{display:none}@media(max-width:850px){#messageFormed{top:20%;left:8%;right:8%;font-size:20px;max-height:25vh}.editing #messageFormed{display:none}.editing aside .tabs{margin-top:18px}}
#editor details{padding:16px 0;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;margin:20px 0}#editor summary{cursor:pointer;color:#e6cfa4}#editor input[type=range]{padding:0;accent-color:#d2b67d;width:100%;height:25px}#editor details button{margin:8px 0}.courier-mode #messageFormed{font-size:clamp(16px,2vw,26px);max-width:65%;pointer-events:none;opacity:.7}#video{white-space:nowrap}@media(max-width:600px){.actions{gap:4px}.actions button{padding:8px;font-size:11px}.project-name{display:none}}
/* Focused full-screen HUD: one tool at a time. */
#hudTools{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:32;display:flex;flex-direction:column;gap:8px;padding:8px;background:#182c24dd;backdrop-filter:blur(18px);border:1px solid #ffffff18;border-radius:20px}#hudTools button{width:65px;padding:12px 4px;border:0;background:transparent;color:#e9dfc8;font-size:22px;border-radius:12px}#hudTools span{display:block;font-size:10px;margin-top:5px}#hudTools button.selected{background:#c8ad7733;color:#ecd5a6}body.editing #editor{left:112px;width:350px;top:110px;bottom:100px;height:auto;border-radius:18px;padding:24px;box-shadow:0 20px 70px #0005}.tabs,.editor-footer{display:none!important}body[data-hud=compose] [data-panel],body[data-hud=compose] .tabs{display:none!important}body[data-hud=room] #composeFields,body[data-hud=objects] #composeFields,body[data-hud=details] #composeFields{display:none}body[data-hud=objects] [data-panel=world]>:not(details){display:none}body[data-hud=room] [data-panel=world]>details{display:none}body[data-hud=room] [data-panel=world]>label,body[data-hud=room] [data-panel=world]>input,body[data-hud=room] [data-panel=world]>.two,body[data-hud=room] [data-panel=world]>.swatches,body[data-hud=room] [data-panel=world]>select{display:none}.room-colors{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.room-colors label{flex:1}.room-colors input[type=color]{height:40px;padding:3px}.caption{pointer-events:none}body.courier-mode .caption{opacity:.5}#messageFormed{display:none!important}.templates{grid-template-columns:1fr 1fr!important}#editor h1{font-size:30px}
@media(max-width:650px){#hudTools{top:auto;bottom:76px;left:50%;transform:translateX(-50%);flex-direction:row;padding:4px;border-radius:16px}#hudTools button{width:55px;padding:7px 3px;font-size:18px}#hudTools span{font-size:9px}body.editing #editor{left:8px;right:8px;top:auto;bottom:148px;width:auto;height:42dvh;padding:20px;border-radius:18px}.caption{bottom:170px!important;left:20px!important}.caption h2{font-size:22px}.workspace-top{padding:12px}.actions #openEditor{display:none}.brand small{display:none}.brand{font-size:15px}.actions button{font-size:10px;padding:7px}.bottom-bar{height:65px}}
body.editing #editor{background:#20382ff5;color:#eee6d4;border:1px solid #ffffff21}#editor label,#editor .hint{color:#bdc9bf}#editor input,#editor textarea,#editor select{background:#172b23;color:#eee6d4;border-color:#c6d5c530}#editor button{color:#eee6d4;border-color:#c6d5c530;background:#2c4438}#editor .templates button.chosen{background:#786b4b}#editor summary{color:#e6cfa4}.courier-mode .caption{display:none}.caption{left:125px}.room-size input{width:100%}
body.editing #editor{position:fixed;transform:none;overflow-y:auto;z-index:31}body.editing #scene{left:0;width:100%;height:100%}body.editing header .brand{opacity:1}
@media(max-width:650px){body.editing #editor{top:40dvh;bottom:148px;height:auto}body.editing #scene{height:38dvh;top:0}.editing .stage-wrap{height:calc(100dvh - 72px)}#hudTools{z-index:40}}
header .brand{width:190px;flex-shrink:0}header .brand .delivery-logo{width:100%;height:74px;object-fit:contain;display:block}header{min-height:84px}@media(max-width:650px){header .brand{width:118px}header .brand .delivery-logo{height:58px}header{min-height:72px}}