:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#202b26;color:#f0e9d3}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}#landscape{position:fixed;inset:0;width:100%;height:100%}#viewport{position:absolute;width:900px;height:1800px;transform-origin:top left;overflow:hidden;box-shadow:0 0 0 1px #d2d4af20,0 0 90px #101a1b99;pointer-events:none}.hud{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 42px;pointer-events:auto}header{top:0;height:110px;background:linear-gradient(#172b28ed,#172b28b3,transparent)}.identity{display:flex;align-items:center;gap:18px}.sigil{display:grid;place-items:center;width:52px;height:52px;font-size:37px;color:#d6d39a;border:1px solid #d6d39a52;border-radius:16px;background:#263c32b3}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:700;color:#c2cda7}h1{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:6px 0 0;letter-spacing:.2px}.map-id{display:flex;gap:14px;align-items:center;font-size:11px;letter-spacing:2px;color:#d3d8bb;position:absolute;left:50%;transform:translateX(-50%)}.status-dot{width:6px;height:6px;background:#c2d995;border-radius:50%;box-shadow:0 0 12px #bbd98b55}.divider{height:14px;width:1px;background:#d9dfb43b}.controls{display:flex;gap:10px}button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #cad3b638;border-radius:12px;background:#223b33a8;color:#e5e8cc;cursor:pointer;font:italic 23px Georgia,serif;transition:background .15s,border-color .15s}button:hover{background:#435645;border-color:#ced6b688}button:focus-visible{outline:3px solid #efdf9b;outline-offset:4px}button svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.5}footer{bottom:0;height:74px;background:linear-gradient(transparent,#142b24dc);font-size:11px;letter-spacing:2px}.map-label{display:flex;align-items:center;gap:15px}.small-diamond{font-size:24px;color:#d8d5aa}.muted,.version{color:#a5b69b}.footer-note{font-family:Georgia,serif;font-style:italic;letter-spacing:.5px;font-size:17px;color:#d3d6bc}.version{font-size:10px}#map-info{position:absolute;right:42px;top:100px;width:330px;padding:28px;background:#1b302bf5;border:1px solid #bac6a744;border-radius:16px;box-shadow:0 12px 40px #10201955;pointer-events:auto}#map-info h2{font:26px Georgia,serif;margin:15px 0}#map-info p{font-size:15px;line-height:1.65;color:#ccd3bb}#map-info p:last-child{margin-bottom:0}

/* One portrait composition, scaled together on every screen. */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
header{height:230px;align-items:flex-start!important;padding-top:48px!important}
.identity{gap:20px}.sigil{width:76px;height:76px;font-size:48px}
.eyebrow{font-size:20px;letter-spacing:3px}h1{font-size:42px;margin-top:10px}
.map-id{top:155px;font-size:22px;gap:20px}.status-dot{width:10px;height:10px}
.controls{gap:16px}button{width:110px;height:110px;font-size:46px;border-radius:22px;touch-action:manipulation}button svg{width:38px}button[hidden]{display:none}
footer{height:160px;flex-wrap:wrap;align-content:center;gap:22px;font-size:21px}
.footer-note{order:3;width:100%;text-align:center;font-size:28px}.version{font-size:18px}.small-diamond{font-size:32px}
#map-info{top:235px;left:42px;right:42px;width:auto;padding:42px;border-radius:24px}#map-info h2{font-size:42px}#map-info p{font-size:30px;line-height:1.6}