:root{color-scheme:dark;--cream:#f5f0e7;--muted:#a9b0a6;--gold:#c8a879;--panel:rgba(23,30,26,.95);font-family:'DM Sans',sans-serif}*{box-sizing:border-box}body{margin:0;background:#171d1a;color:var(--cream);overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button{border:0}button:disabled{opacity:.5;cursor:wait}#view{position:fixed;inset:0;width:100%;height:100%;touch-action:none}header{position:fixed;z-index:3;top:0;left:0;right:0;height:104px;padding:28px 40px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#0c100ebb,transparent);pointer-events:none}.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--cream);pointer-events:auto}.brand>b{font:28px Georgia,serif;border:1px solid #b9a88b88;width:48px;height:48px;display:grid;place-items:center}.brand>span{font-size:14px;letter-spacing:3px}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:7px;color:#d0cbbf}.header-actions{display:flex;align-items:center;gap:14px;pointer-events:auto}.header-actions button{width:34px;height:34px;border:1px solid #ffffff33;background:#17221a77;border-radius:50%;font-size:18px}.live{font-size:10px;letter-spacing:2px;margin-right:12px;display:flex;align-items:center;gap:9px}.live i,#status>i{width:5px;height:5px;background:#bfc79f;border-radius:50%;box-shadow:0 0 10px #afbd8c77}
#panel{position:fixed;z-index:3;left:32px;top:123px;bottom:108px;width:330px;padding:28px 26px 16px;background:var(--panel);border:1px solid #e4dfcd22;border-radius:3px;backdrop-filter:blur(18px);overflow:auto;scrollbar-width:thin;scrollbar-color:#6a6f5e transparent;box-shadow:0 18px 60px #0002}.eyebrow{font-size:8px;letter-spacing:2px;color:var(--gold);font-weight:600}h1{font:34px/1.16 Georgia,serif;letter-spacing:-.6px;margin:17px 0 14px;font-weight:400}.intro{font-size:11px;line-height:1.8;color:#bdc2b7;margin:0}.divider{height:1px;background:#ffffff1a;margin:23px 0}.section-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.8px;color:#b9c0b4}.section-label span{color:#798476}.variants{display:grid;gap:7px;margin:13px 0 20px}.variant{display:flex;gap:12px;align-items:center;text-align:left;padding:12px 10px;background:#ffffff03;border:1px solid #ffffff13;border-radius:3px;transition:background .2s,border .2s}.variant:hover{background:#ffffff09;border-color:#c8a87966}.variant.active{background:#a68f5c17;border-color:#bda17488}.num{font-size:9px;color:#9aa08f}.variant.active .num{color:var(--gold)}.variant svg{width:39px;height:31px;stroke:#bba887;fill:none;stroke-width:1}.variant b{font-size:11px;display:block;font-weight:500}.variant small{font-size:9px;color:#8f9b8f;display:block;margin-top:4px}.variant i{width:6px;height:6px;border:1px solid #777f70;border-radius:50%;margin-left:auto}.variant.active i{background:var(--gold);border-color:var(--gold)}.specs{display:flex;border-top:1px solid #ffffff18;padding-top:18px;justify-content:space-between}.specs b{font:21px Georgia,serif}.specs em{font:11px 'DM Sans',sans-serif;color:#a7aa97}.specs span{display:block;font-size:6px;letter-spacing:1.7px;color:#8d988a;margin-top:7px}.note{font-size:8px;color:#929e8f;margin:15px 0 18px}.primary{display:flex;align-items:center;justify-content:space-between;background:var(--gold);color:#20261c;width:100%;padding:14px 16px;border-radius:2px;font-size:11px;font-weight:600;transition:background .2s}.primary:hover{background:#dfc498}.subtle{display:block;background:none;color:#8f9c8d;font-size:9px;letter-spacing:.3px;margin:12px auto 0}#expand{position:fixed;z-index:4;left:32px;top:125px;background:var(--panel);border:1px solid #ffffff30;border-radius:3px;padding:13px 16px;color:var(--gold)}#expand span{font-size:11px;margin-left:8px}
#views{position:fixed;z-index:3;bottom:30px;left:50%;transform:translateX(-50%);display:flex;background:#18211ce8;border:1px solid #ffffff24;backdrop-filter:blur(14px);padding:5px;border-radius:5px;white-space:nowrap;box-shadow:0 8px 40px #0004}#views button{padding:13px 17px;background:transparent;color:#bbc2b6;font-size:10px;border-radius:2px;transition:.2s}#views button:hover{color:white;background:#ffffff0b}#views button.selected{background:#f3ecdc;color:#242e23}#status{position:fixed;bottom:115px;left:394px;display:flex;gap:9px;align-items:center;font-size:11px;letter-spacing:.4px;text-shadow:0 2px 8px black;pointer-events:none}#status small{display:block;position:absolute;top:25px;left:14px;font-size:9px;letter-spacing:0;color:#e1ddcf;white-space:nowrap}#minimap{position:fixed;right:32px;bottom:112px;background:#18211cdb;border:1px solid #ffffff22;padding:9px;border-radius:3px;backdrop-filter:blur(8px)}#minimap canvas{display:block;width:160px;height:84px}#minimap span{display:block;text-align:center;color:#abb5a4;font-size:7px;letter-spacing:2px;padding:5px 0 2px}#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-size:20px;opacity:.6;pointer-events:none;text-shadow:0 0 8px #000}#walkHint{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#18211cee;border:1px solid #ffffff22;border-radius:3px;z-index:5;padding:12px 16px;font-size:10px;white-space:nowrap}#walkHint button{background:none;margin-left:22px;font-size:10px;color:var(--gold)}kbd{font:9px 'DM Sans',sans-serif;padding:2px 5px;border:1px solid #c6cbbb44;border-radius:2px;margin:0 2px}.walking #views{display:none}.walking #panel{display:none}.walking #status{left:32px;bottom:95px}.walking #expand{display:none}.walking #minimap{bottom:95px}dialog{background:#1d2921;color:var(--cream);border:1px solid #c8a87966;padding:40px;width:min(460px,90vw);border-radius:6px;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#080e0bbd;backdrop-filter:blur(7px)}dialog h2{font:30px Georgia,serif;margin:20px 0}dialog p{font-size:12px;line-height:1.8;color:#b8c2b1}dialog h3{font-size:12px;color:var(--gold);margin-top:24px}dialog .muted{font-size:10px;color:#8f9e88}#closeHelp{position:absolute;right:14px;top:9px;background:none;font-size:25px;color:#b3beaa}#helpDone{margin-top:25px}#toast{position:fixed;top:105px;left:50%;transform:translate(-50%,-10px);padding:12px 20px;z-index:8;background:#1d2921ef;border:1px solid #bba37666;font-size:12px;border-radius:3px;opacity:0;pointer-events:none;transition:.3s}#toast.show{opacity:1;transform:translate(-50%,0)}
#loading{position:fixed;inset:0;z-index:10;background:#19221b;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .7s}.monogram{border:1px solid #c8a87977;font:42px Georgia,serif;width:90px;height:90px;display:grid;place-items:center;color:var(--gold)}#loading p{letter-spacing:5px;font-size:11px;margin:25px 0 5px}#loading h1{font-size:32px;margin:20px 0 30px}.track{width:220px;height:2px;background:#ffffff15;margin-bottom:18px}.track i{display:block;height:100%;width:5%;background:var(--gold);transition:width .3s}#loadText{font-size:10px;color:#9ba88e;letter-spacing:.5px}#retry{margin-top:20px;padding:12px 22px;background:var(--gold);color:#18211c;border-radius:3px}#touchControls{position:fixed;z-index:5;bottom:90px;left:25px;width:150px;display:grid;grid-template-columns:repeat(3,45px);gap:4px}#touchControls button{width:45px;height:45px;background:#18211cce;border:1px solid #e8e2cc44;border-radius:4px;font-size:20px;touch-action:none}#touchControls button:first-child{grid-column:2}#touchControls button:nth-child(2){grid-column:1;grid-row:2}#touchControls button:nth-child(3){grid-column:2;grid-row:2}#touchControls button:nth-child(4){grid-column:3;grid-row:2}[hidden]{display:none!important}
@media(min-width:761px){#panel h1{font-size:28px;margin:12px 0}.intro{font-size:10px;line-height:1.6}.divider{margin:15px 0}.variant{padding:9px 8px}.variants{margin:12px 0 15px}.note{margin:12px 0}.specs{padding-top:13px}#walk{position:sticky;bottom:0;box-shadow:0 8px 8px #17201a}}@media(max-height:850px) and (min-width:761px){#panel{top:103px;padding:18px 22px;bottom:102px;width:310px}.intro{display:none}.divider{margin:14px 0}.variants{gap:5px;margin:10px 0 13px}.note{margin:10px 0 12px}.specs{padding-top:12px}.subtle{margin-top:8px}#status{left:370px}}@media(max-width:1050px){#minimap{right:20px;width:133px}#minimap canvas{width:112px;height:60px}#status small{max-width:260px;white-space:normal}#views button{padding:12px 10px;font-size:9px}}@media(max-width:760px){header{height:78px;padding:17px 18px}.brand>b{height:39px;width:39px;font-size:23px}.brand>span{font-size:11px;letter-spacing:2px}.brand small{font-size:6px;letter-spacing:1px}.live{display:none}.header-actions{gap:8px}#panel{left:14px;top:auto;bottom:84px;width:240px;max-height:48vh;padding:18px}h1{font-size:25px}.intro,.divider,.specs,.note{display:none}.section-label{margin-top:16px}.variant{padding:8px}.variant svg{width:29px;height:24px}.variant b{font-size:10px}.variant small{font-size:8px}.variants{gap:5px;margin-bottom:14px}.eyebrow{font-size:6px;letter-spacing:1px}.primary{font-size:10px;padding:12px}#views{bottom:16px;max-width:calc(100% - 22px);overflow:auto}#views button{padding:12px 9px;font-size:8px}#status{left:20px;bottom:73px;font-size:9px}#status small{display:none}#minimap{bottom:92px;right:13px;width:105px;padding:5px}#minimap canvas{width:94px;height:50px}#minimap span{font-size:5px;letter-spacing:1px}#expand{left:17px;top:92px}#walkHint{bottom:20px;white-space:normal;width:calc(100% - 30px);text-align:center;line-height:2}#walkHint span{display:none}#walkHint button{margin:0}#toast{top:83px;width:80%;text-align:center;font-size:10px}.walking #status{bottom:78px}.walking #minimap{bottom:90px}}
@media(max-width:760px){#panel{width:calc(100% - 28px);max-height:60vh;padding:14px}#panel h1{font-size:22px;line-height:1.12;margin:8px 0}#panel h1 br{display:none}#panel .section-label{margin-top:10px}.variants{grid-template-columns:1fr 1fr;gap:5px;margin:9px 0 10px}.variant{gap:8px;min-height:38px}.variant small{display:none}.variant b{font-size:10px}.variant svg{width:25px}.subtle{margin:9px auto 0}}@media(max-width:450px){.variant svg{display:none}.variant{padding:9px 8px}.variant b{font-size:9px}}
@media(max-width:760px){#walkHint span{display:block;font-size:8px;line-height:1.7}}

.brand>img{display:block;width:228px;height:auto;max-width:46vw;object-fit:contain}.brand{flex-shrink:0}@media(max-width:760px){.brand>img{width:180px;max-width:50vw}}