:root { --bg:#0a0a0a; --fg:#f1efe8; --muted:rgba(241,239,232,.62); }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--bg); color:var(--fg); font-family:Arial,Helvetica,sans-serif; }
body { user-select:none; -webkit-user-select:none; }
#viewport { position:fixed; inset:0; overflow:hidden; touch-action:none; cursor:grab; background:#111; }
#viewport.dragging { cursor:grabbing; }
#world { position:absolute; left:50%; top:50%; width:0; height:0; will-change:transform; }
.tile { position:absolute; overflow:hidden; border-radius:0; background:#1a1a1a; box-shadow:0 0 0 1px rgba(255,255,255,.05); }
.tile img { width:100%; height:100%; display:block; object-fit:cover; pointer-events:none; transform:scale(1.01); }
.tile::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); pointer-events:none; }
.chrome { position:fixed; z-index:20; mix-blend-mode:difference; color:white; }
.brand { left:20px; top:17px; }
.wordmark { color:inherit; text-decoration:none; font-size:28px; font-weight:800; letter-spacing:-1.4px; line-height:1; }
.sub { margin-top:5px; font-size:9px; letter-spacing:.16em; font-weight:700; opacity:.78; }
.actions { right:20px; top:18px; display:flex; gap:16px; align-items:center; font-size:11px; font-weight:800; letter-spacing:.12em; }
.actions a,.actions button { color:inherit; text-decoration:none; background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; cursor:pointer; }
.actions a:hover,.actions button:hover { opacity:.62; }
.hint { left:20px; bottom:18px; font-size:9px; letter-spacing:.15em; font-weight:800; opacity:.72; transition:opacity .4s ease; }
.hint.hidden { opacity:0; }
.grain { position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
@media (max-width:700px){ .brand{left:14px;top:14px}.wordmark{font-size:24px}.actions{right:14px;top:16px;gap:13px}.hint{left:14px;bottom:14px}.sub{font-size:8px} }