@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root{--ink:#f5eedc;--muted:rgba(245,238,220,.59);--gold:#f3c57a;--coral:#ed947d;--night:#111922;--glass:rgba(15,25,32,.72);--mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--serif:'Playfair Display',Georgia,serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111922;color:var(--ink);font-family:var(--sans)}button,a{-webkit-tap-highlight-color:transparent}#experience{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 52% 48%,#394d53 0%,#1a2932 38%,#111922 76%)}#world{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.sky-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.21;background-image:radial-gradient(rgba(252,233,197,.7) .55px,transparent .8px);background-size:83px 91px;background-position:21px 15px;mask-image:linear-gradient(180deg,#000 0%,transparent 74%)}
.topbar,.welcome,.shard-counter,.bottombar,.nearby-hint,.toast,.content-panel,.complete-screen,.joystick{position:absolute;z-index:3}.topbar{inset:0 0 auto;height:94px;padding:26px 40px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.identity{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);pointer-events:auto}.identity-mark{width:38px;height:38px;border:1px solid rgba(243,197,122,.68);border-radius:50%;display:grid;place-items:center;color:#f4ce8e;font:italic 600 16px var(--serif);position:relative}.identity-mark span{position:absolute;right:-5px;top:-5px;color:#e98f78;font-size:12px}.identity-copy{display:flex;flex-direction:column;gap:5px}.identity-copy b{font:500 10px var(--mono);letter-spacing:.18em}.identity-copy small{font:400 8px var(--mono);letter-spacing:.12em;color:var(--muted)}.top-tools{display:flex;align-items:center;gap:9px;pointer-events:auto}.day-pill,.sound-button{height:34px;border:1px solid rgba(245,238,220,.16);background:rgba(17,25,34,.4);backdrop-filter:blur(12px);border-radius:99px;color:var(--ink)}.day-pill{display:flex;gap:9px;align-items:center;padding:0 13px;font:9px var(--mono);letter-spacing:.1em}.sun-icon{width:10px;height:10px;border-radius:50%;background:#ffd088;box-shadow:0 0 12px #f3b876}.sound-button{width:35px;font-size:19px;cursor:pointer;color:#dfceb0;line-height:1}.sound-button:hover{border-color:rgba(243,197,122,.6);color:var(--gold)}
.welcome{top:24%;left:5.3%;pointer-events:none;text-shadow:0 2px 30px rgba(10,18,21,.38)}.eyebrow,.panel-kicker{font:9px var(--mono);letter-spacing:.2em;color:#d9bd8d;margin:0 0 17px;display:flex;align-items:center;gap:9px}.eyebrow-dash{height:1px;width:19px;background:var(--coral);display:inline-block}.welcome h1{font:500 clamp(34px,4vw,58px)/1.06 var(--serif);letter-spacing:-.045em;margin:0 0 15px}.welcome h1 em,.complete-card h2 em{font-weight:500;color:#edbd8b}.welcome-note{font:13px/1.7 var(--sans);color:rgba(245,238,220,.71);letter-spacing:.025em;margin:0}.shard-counter{right:40px;top:112px;display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid rgba(245,238,220,.18);border-radius:8px;background:rgba(16,26,32,.47);backdrop-filter:blur(10px)}.counter-gem{color:var(--coral);font-size:15px;text-shadow:0 0 13px #ea967d}.counter-label{font:8px var(--mono);letter-spacing:.15em;color:var(--muted)}.shard-counter strong{font:11px var(--mono);font-weight:400;margin-left:6px}.shard-counter strong i{font-style:normal;color:#7f8d8c}
.bottombar{inset:auto 0 0;height:78px;padding:0 40px 26px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.key-instructions{display:flex;align-items:center;gap:10px;color:rgba(245,238,220,.66);font-size:10px;letter-spacing:.02em}.key-cluster{display:flex;gap:3px}.key-cluster kbd{min-width:17px;height:19px;border:1px solid rgba(245,238,220,.27);border-radius:4px;display:inline-grid;place-items:center;color:#f2dfb9;font:9px var(--mono);padding:0 3px}.instruction-dot{color:#df947e;margin:0 2px}.mobile-instructions{display:none}.world-note{font:8px var(--mono);letter-spacing:.17em;color:rgba(245,238,220,.45);display:flex;gap:8px;align-items:center}.orbit-dot{width:5px;height:5px;border-radius:50%;background:#e9a578;box-shadow:0 0 7px #e9a578}.landmark-labels{position:absolute;inset:0;z-index:2;pointer-events:none}.landmark-label{position:absolute;transform:translate(-50%,-100%);font:8px var(--mono);letter-spacing:.16em;color:#fae8bf;padding:5px 8px;border-radius:3px;background:rgba(16,27,31,.64);border:1px solid rgba(243,197,122,.22);white-space:nowrap;text-shadow:0 1px 8px #111;opacity:.85;transition:opacity .2s}.landmark-label.near{opacity:1;border-color:rgba(243,197,122,.67);color:#fff0cc}.nearby-hint{bottom:98px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:4px;background:rgba(18,27,32,.82);border:1px solid rgba(245,238,220,.16);color:var(--muted);font:10px var(--sans);opacity:0;transition:opacity .2s;pointer-events:auto;white-space:nowrap;cursor:pointer}.nearby-hint.visible{opacity:1}.hint-key{font:9px var(--mono);color:#f4d092;border:1px solid rgba(243,197,122,.42);padding:3px 6px;border-radius:3px}.toast{left:50%;top:17%;transform:translate(-50%,-10px);padding:10px 16px;border-radius:4px;background:rgba(19,31,35,.86);border:1px solid rgba(243,197,122,.32);color:#f9dfaa;font:10px var(--mono);letter-spacing:.08em;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
.content-panel{right:30px;top:50%;width:min(390px,calc(100% - 60px));max-height:min(74vh,680px);overflow:auto;transform:translate(20px,-50%);padding:35px 35px 24px;background:rgba(21,31,35,.91);border:1px solid rgba(243,197,122,.3);border-radius:7px;box-shadow:0 25px 90px rgba(4,11,13,.4);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .3s,transform .35s,visibility .3s}.content-panel.open{opacity:1;visibility:visible;transform:translate(0,-50%)}.panel-close{position:absolute;right:15px;top:12px;width:30px;height:30px;background:transparent;border:1px solid rgba(245,238,220,.17);border-radius:50%;font-size:21px;line-height:1;color:var(--muted);cursor:pointer}.panel-close:hover{color:var(--ink);border-color:var(--gold)}.panel-spark{font-size:22px;color:var(--coral);margin:0 0 14px}.panel-kicker{margin:0 0 9px;font-size:8px}.content-panel h2{font:500 35px var(--serif);margin:0 0 16px;letter-spacing:-.03em}.panel-rule{height:1px;background:rgba(245,238,220,.14);margin:0 0 21px}.panel-rule span{display:block;width:36px;height:1px;background:#e9a17f}.panel-content{font:13px/1.75 var(--sans);color:#e0ded1}.panel-content p{margin:0 0 15px}.panel-content ul{padding:0;list-style:none;margin:0}.panel-content li{padding:0 0 13px;margin:0 0 13px;border-bottom:1px solid rgba(245,238,220,.1)}.panel-content li:last-child{border:0;margin-bottom:0}.panel-content strong{color:#f2c98a;font-weight:600}.panel-content em{font-family:var(--serif);color:#f0c893}.panel-content a{color:#f3c57a}.panel-foot{border-top:1px solid rgba(245,238,220,.13);padding-top:15px;margin:23px 0 0;color:rgba(245,238,220,.43);font:8px var(--mono);letter-spacing:.08em}
.complete-screen{inset:0;display:grid;place-items:center;background:rgba(10,18,22,.4);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;z-index:6}.complete-screen.show{opacity:1;visibility:visible}.complete-card{text-align:center;width:min(440px,calc(100% - 36px));padding:38px 34px 32px;border:1px solid rgba(243,197,122,.4);background:rgba(20,31,34,.93);border-radius:8px;box-shadow:0 22px 90px rgba(3,8,10,.45)}.complete-orbit{width:58px;height:58px;border:1px solid rgba(243,197,122,.55);border-radius:50%;display:grid;place-items:center;margin:0 auto 24px;color:#ffd68e;font-size:23px;box-shadow:0 0 35px rgba(243,197,122,.12)}.complete-card .eyebrow{justify-content:center;margin-bottom:12px}.complete-card h2{font:500 38px/1.12 var(--serif);margin:0 0 16px}.complete-card>p:not(.eyebrow){font-size:12px;color:var(--muted);margin:0 auto 23px}.complete-card button{border:0;border-radius:4px;padding:12px 17px;background:#edbe83;color:#202923;font:500 11px var(--sans);cursor:pointer}.complete-card button span{margin-left:14px}.joystick{display:none;z-index:4;left:24px;bottom:82px;text-align:center;touch-action:none;user-select:none}.stick-ring{width:100px;height:100px;border-radius:50%;border:1px solid rgba(245,238,220,.28);background:rgba(17,25,30,.35);display:grid;place-items:center;backdrop-filter:blur(3px)}.stick-knob{width:39px;height:39px;border-radius:50%;background:rgba(241,199,136,.68);border:1px solid rgba(255,233,191,.7);box-shadow:0 0 18px rgba(241,199,136,.2);transform:translate(0,0)}.joystick small{display:block;margin-top:7px;font:8px var(--mono);letter-spacing:.18em;color:rgba(245,238,220,.55)}
.mobile-instructions{display:none}@media(max-width:700px){.topbar{height:70px;padding:17px 17px}.identity-mark{width:33px;height:33px;font-size:14px}.identity-copy b{font-size:9px}.identity-copy small{font-size:7px;letter-spacing:.07em}.top-tools{gap:6px}.day-pill{height:30px;font-size:7px;padding:0 9px;gap:6px}.sound-button{height:30px;width:30px}.welcome{top:11%;left:6%;}.welcome h1{font-size:clamp(31px,9vw,44px);margin-bottom:9px}.welcome .eyebrow{font-size:8px;margin-bottom:12px}.welcome-note{display:none}.desktop-break{display:none}.shard-counter{top:82px;right:15px;padding:8px 10px;gap:7px}.counter-label{font-size:7px}.shard-counter strong{font-size:10px}.world-note{display:none}.bottombar{height:68px;padding:0 15px 17px}.key-instructions{font-size:9px;gap:7px}.desktop-instructions,.desktop-look{display:none}.mobile-instructions{display:inline}.key-cluster kbd{min-width:15px;height:17px;font-size:8px}.instruction-dot{margin:0}.joystick{display:block;left:17px;bottom:80px}.stick-ring{width:90px;height:90px}.stick-knob{width:36px;height:36px}.nearby-hint{bottom:194px;font-size:9px}.content-panel{right:12px;top:auto;bottom:14px;width:calc(100% - 24px);max-height:65vh;transform:translateY(14px);padding:24px 25px 17px}.content-panel.open{transform:translateY(0)}.panel-spark{margin-bottom:8px}.content-panel h2{font-size:30px;margin-bottom:10px}.panel-rule{margin-bottom:14px}.panel-content{font-size:12px;line-height:1.65}.panel-content li{padding-bottom:9px;margin-bottom:9px}.panel-foot{margin-top:15px;padding-top:10px}.landmark-label{font-size:7px;padding:4px 6px}.toast{top:13%;font-size:9px}.complete-card{padding:30px 23px 26px}.complete-card h2{font-size:33px}}
@media(max-height:650px) and (max-width:700px){.welcome{top:14%}.welcome h1{font-size:30px}.joystick{bottom:65px}.nearby-hint{bottom:168px}.bottombar{padding-bottom:11px}}