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

:root { --ink:#2b3424; --paper:#f8e5b8; --orange:#d96735; }
* { box-sizing:border-box; }
html, body, #app { height:100%; margin:0; overflow:hidden; background:#f7d997; }
canvas { display:block; width:100%; height:100%; }
#wash { position:fixed; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:.21; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
#vignette { position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, transparent 49%, rgba(54,42,23,.12) 100%); }
.title-card { position:fixed; z-index:4; top:50%; left:50%; transform:translate(-50%,-50%); width:min(580px,90vw); padding:42px 35px 35px; text-align:center; color:var(--ink); background:rgba(255,239,194,.74); border:1px solid rgba(67,70,37,.23); box-shadow:0 22px 60px rgba(64,46,24,.16); backdrop-filter:blur(8px); transition:opacity .7s ease, transform .7s ease; }
.title-card::before,.title-card::after { content:'✦'; position:absolute; color:var(--orange); font-size:13px; top:18px; }
.title-card::before { left:20px; }.title-card::after { right:20px; }
.title-card.is-gone { opacity:0; transform:translate(-50%,-45%); pointer-events:none; }
.eyebrow, .hint, .hud { font-family:'DM Mono', monospace; letter-spacing:.13em; }
.eyebrow { font-size:10px; margin:0 0 13px; color:#6d6f42; }
h1 { font-family:'Playfair Display', Georgia, serif; font-size:clamp(43px,7vw,76px); font-weight:500; line-height:.95; letter-spacing:-.055em; margin:0; }
.subtitle { font-family:'Playfair Display', Georgia, serif; font-size:20px; font-style:italic; margin:15px 0 28px; color:#54603d; }
button { appearance:none; border:1px solid var(--ink); border-radius:0; padding:13px 20px 12px; background:var(--ink); color:#fae7b9; font:500 11px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:transform .2s, background .2s; }
button:hover { transform:translateY(-2px); background:#475235; } button span{font-size:17px;vertical-align:-1px;margin-left:8px}
.hint { font-size:9px; margin:22px 0 0; color:#767750; }
.hud { position:fixed; z-index:3; inset:0; pointer-events:none; color:#364026; font-size:9px; text-transform:uppercase; }
.location { position:absolute; top:28px; left:31px; display:flex; flex-direction:column; gap:4px; }.location span { opacity:.65; }.location strong { font-size:10px; font-weight:500; letter-spacing:.17em; }
.controls { position:absolute; bottom:25px; left:50%; transform:translateX(-50%); white-space:nowrap; opacity:.72; }.controls i { font-style:normal; opacity:.7; letter-spacing:.04em; text-transform:none; }
.compass { position:absolute; top:25px; right:30px; width:35px; height:35px; border:1px solid rgba(53,65,37,.4); border-radius:50%; text-align:center; padding-top:3px; font-size:8px; }.compass b { font-weight:500; }.needle { position:absolute; width:1px; height:9px; top:8px; left:16px; background:#c85531; transform-origin:bottom; transform:rotate(24deg); }
@media(max-width:600px) { .controls { display:none; }.title-card { padding:35px 20px 28px; }.location{left:18px;top:20px}.compass{right:18px;top:18px} }