:root{--ivory: #F6F1E7;--cream: #F3EBDD;--ink: #1E2440;--brass: #C29B5C;--brass-text: #D9B67A;--emerald: #0F3D33;--night: #171f22;--card: #1d2629;--serif: "Cormorant Garamond", Georgia, serif;--arabic: "Amiri", serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:var(--night);color:var(--ivory);font-family:var(--serif);touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}#c{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.hidden{display:none!important}button{font-family:var(--serif);cursor:pointer}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:20;background:radial-gradient(120% 90% at 50% 30%,#1d2629,#12181a 60%,#0c1012);padding:16px}.title-block{width:min(420px,86vw);text-align:center}.title-block h1{font-weight:400;font-size:clamp(34px,7vw,52px);margin:0 0 6px;letter-spacing:.01em}.fromto{margin:0 0 26px;font-size:15px;color:#b9b2a5}.fromto em{color:var(--brass-text);font-size:17px}.fromto i{display:inline-block;width:1px;height:12px;background:#555;margin:0 8px;vertical-align:-1px}.bar{height:2px;background:#2b3438;overflow:hidden}#load-bar{height:100%;width:0;background:linear-gradient(90deg,var(--brass),var(--brass-text));transition:width .3s}.bar-label{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#8b8579;letter-spacing:.04em}.card{background:#f6f1e7f7;color:var(--ink);border-radius:14px;padding:20px 22px;width:min(460px,94vw);max-height:94vh;overflow:auto;box-shadow:0 30px 80px #00000080}.join-card h2{margin:0 0 12px;font-weight:500;font-size:26px;text-align:center}.presets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.preset{border:1.5px solid #d8cfbf;background:#fbf8f2;border-radius:10px;padding:10px;font-size:18px;color:var(--ink)}.preset.on{border-color:var(--brass);background:#f1e6d2}.preset canvas{display:block;margin:0 auto 4px;width:72px;height:72px}.field{display:block;margin:6px 0 10px}.field span,.swatch-row>span{display:block;font-size:13px;color:#6e604f;margin-bottom:4px;letter-spacing:.03em}.field input{width:100%;font:18px var(--serif);padding:9px 12px;border:1.5px solid #d8cfbf;border-radius:8px;background:#fff;color:var(--ink)}.swatch-row{margin-bottom:10px}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatches button{width:30px;height:30px;border-radius:50%;border:2px solid rgba(0,0,0,.12)}.swatches button.on{outline:2px solid var(--brass);outline-offset:2px}.chips{display:flex;gap:6px;flex-wrap:wrap}.chips button{padding:6px 12px;border-radius:999px;border:1.5px solid #d8cfbf;background:#fbf8f2;color:var(--ink);font-size:15px}.chips button.on{border-color:var(--brass);background:#f1e6d2}.toggle{display:flex;gap:8px;align-items:center;font-size:15px;margin:6px 0 14px}.btn-primary{width:100%;padding:12px;font-size:19px;border:0;border-radius:999px;background:var(--ink);color:var(--ivory)}@media (max-height: 520px) and (orientation: landscape){.join-card{width:min(720px,96vw);display:grid;grid-template-columns:1fr 1fr;column-gap:18px;padding:14px 18px}.join-card h2{grid-column:1 / -1;font-size:22px;margin-bottom:8px}.presets{grid-row:2 / span 5;margin:0;align-content:start}.preset canvas{width:92px;height:92px}.field{margin-top:0}.toggle{margin:2px 0 10px;font-size:14px}}.round.small.muted{position:relative}.round.small.muted:after{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;background:currentColor;transform:rotate(-45deg)}#rotate{z-index:40;text-align:center;font-size:20px}.rotate-icon{width:46px;height:78px;border:2px solid var(--brass-text);border-radius:9px;margin:0 auto 16px;animation:tilt 2.2s ease-in-out infinite}@keyframes tilt{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}#hud{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}#hud>*{pointer-events:auto}.place{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%);pointer-events:none!important;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#f6f1e7d9;text-shadow:0 1px 6px rgba(0,0,0,.6)}.joy{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:22px;width:118px;height:118px;border-radius:50%;border:1.5px solid rgba(246,241,231,.35);background:#171f222e}#joy-knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#f6f1e7eb;box-shadow:0 2px 10px #0000004d}.round{width:62px;height:62px;border-radius:50%;border:0;background:#f6f1e7e6;color:var(--ink);font-size:26px;box-shadow:0 2px 12px #00000040}.round.on{background:var(--brass);color:var(--ivory)}.run{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:30px}.side{position:absolute;right:max(18px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:10px}.round.small{width:44px;height:44px;font-size:15px;background:#171f228c;color:var(--ivory);border:1px solid rgba(246,241,231,.25)}.round.small.on{background:var(--brass)}.round.small.muted{opacity:.6}.act{position:absolute;left:50%;bottom:26px;transform:translate(-50%);padding:12px 22px;border-radius:999px;border:0;background:var(--ivory);color:var(--ink);font-size:18px;box-shadow:0 6px 24px #00000059}.partner{position:absolute;left:max(16px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));font-size:14px;color:#f6f1e7cc;pointer-events:none!important}.toast{position:absolute;left:50%;top:22%;transform:translate(-50%);padding:10px 18px;border-radius:999px;background:#171f22cc;color:var(--ivory);font-size:17px;opacity:0;transition:opacity .4s;pointer-events:none!important;white-space:nowrap}.toast.show{opacity:1}.viewer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;background:#0a0d0eb8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:14px}.viewer-inner{position:relative;max-width:94vw;max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:10px}.viewer img,.viewer video{max-width:88vw;max-height:74vh;border:10px solid #111;box-shadow:0 20px 60px #0009;background:#111}.viewer .caption{font-size:18px;font-style:italic;color:var(--cream);text-align:center}.pill{padding:8px 16px;border-radius:999px;border:1px solid rgba(246,241,231,.4);background:#171f22b3;color:var(--ivory);font-size:15px}.letter{background:#12181a;border:1px solid #2c3539;padding:clamp(18px,4vw,34px) clamp(20px,5vw,46px);width:min(620px,90vw);max-height:76vh;overflow:auto;text-align:center;box-shadow:0 20px 60px #0009}.letter .kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#8b8579}.letter h3{font-weight:400;font-size:clamp(30px,6vw,44px);margin:6px 0 14px;color:var(--ivory)}.letter p{font-size:19px;line-height:1.55;color:#ddd5c6;white-space:pre-line;margin:0 0 16px}.letter .sign{font-style:italic;color:var(--brass-text);font-size:20px}.letter .ayah{font-family:var(--arabic);font-size:30px;line-height:1.9;color:var(--brass-text);direction:rtl;margin:14px 0 0}.hold{position:absolute;right:max(100px,calc(env(safe-area-inset-right) + 100px));bottom:38px;padding:10px 16px;border-radius:999px;border:0;background:#f6f1e7eb;color:var(--ink);font-size:16px;box-shadow:0 4px 16px #0000004d}.hold.on{background:var(--brass);color:var(--ivory)}.keys{position:absolute;left:50%;bottom:8px;transform:translate(-50%);font-size:13px;color:#f6f1e799;pointer-events:none!important;display:none;white-space:nowrap}.viewer a.pill{text-decoration:none}.letter.ask input{width:100%;font:20px var(--serif);padding:10px 14px;border-radius:8px;border:1px solid #3a4448;background:#0e1315;color:var(--ivory);margin-bottom:12px}.letter.ask .btn-primary{background:var(--brass)}@media (hover: hover) and (pointer: fine){.joy{display:none}.keys{display:block}.run{bottom:40px}}@media (min-width: 900px) and (min-height: 600px){.joy{width:150px;height:150px;left:40px;bottom:40px}#joy-knob{width:58px;height:58px;margin:-29px 0 0 -29px}.round{width:72px;height:72px}.run{right:40px;bottom:50px}.round.small{width:52px;height:52px}.side{top:22px;right:26px;gap:12px}.act{font-size:21px;padding:14px 28px;bottom:44px}.place{font-size:18px;top:22px}.partner{font-size:16px;top:24px;left:30px}.hold{right:140px;bottom:60px;font-size:18px}}@media (max-height: 500px){.side{gap:6px;top:max(8px,env(safe-area-inset-top))}.round.small{width:38px;height:38px;font-size:13px}.round.small svg{width:16px;height:16px}}@media (display-mode: standalone),(display-mode: fullscreen){#btn-full{display:none}}.btn-install{width:100%;margin-top:8px;padding:10px;font-size:16px;border-radius:999px;border:1.5px solid var(--brass);background:transparent;color:var(--ink)}.ios-tip{margin:8px 0 0;font-size:14px;color:#6e604f;text-align:center}@media (max-height: 520px) and (orientation: landscape){.btn-install,.ios-tip,#enter{grid-column:2}}@media (min-width: 900px) and (min-height: 600px){.card.join-card{width:min(620px,80vw);padding:30px 34px}.join-card h2{font-size:34px}.preset{font-size:22px}.preset canvas{width:96px;height:96px}.chips button{font-size:17px;padding:8px 14px}.swatches button{width:36px;height:36px}.field input{font-size:20px}.btn-primary{font-size:21px;padding:14px}}input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text;touch-action:manipulation}.album{background:#12181a;border:1px solid #2c3539;padding:18px 18px 22px;width:min(980px,92vw);max-height:80vh;overflow:auto;text-align:center;-webkit-overflow-scrolling:touch;touch-action:pan-y}.album .kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#8b8579}.album h3{font-weight:400;font-size:clamp(24px,4vw,36px);margin:4px 0 14px}.album .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.album .thumb{padding:0;border:0;background:#0c1012;aspect-ratio:1;overflow:hidden;border-radius:4px}.album .thumb img{width:100%;height:100%;object-fit:cover;display:block;border:0;box-shadow:none;max-width:none;max-height:none}.viewer .one{display:flex;flex-direction:column;align-items:center;gap:8px}.viewer .one .nav{display:flex;gap:10px}.viewer .one .nav .pill{font-size:18px;min-width:52px}@media (min-width: 900px){.album .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}.run{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.run .run-label{font-size:11px;letter-spacing:.08em;margin-top:-2px}.home{position:absolute;left:50%;top:max(40px,calc(env(safe-area-inset-top) + 36px));transform:translate(-50%);padding:6px 14px;border-radius:999px;border:1px solid rgba(246,241,231,.35);background:#171f228c;color:var(--ivory);font-size:15px}.home{left:max(16px,env(safe-area-inset-left));transform:none;top:max(34px,calc(env(safe-area-inset-top) + 30px))}@media (min-width: 900px) and (min-height: 600px){.home{left:30px;top:52px;font-size:16px}}