:root{--hud-bg: rgba(11, 15, 20, .65);--hud-fg: #e7eef7;--hud-muted: #93a4b7;--accent: #7dd3fc;--menu-bg: rgba(9, 14, 20, .92);--menu-border: rgba(125, 211, 252, .2);--menu-shadow: 0 20px 60px rgba(5, 8, 12, .45)}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;background:radial-gradient(circle at 20% 20%,#122032,#0b0f14 45%,#081019);overflow:hidden;font-family:Space Grotesk,Trebuchet MS,Arial,sans-serif}canvas{display:block;width:100vw;height:100vh}#menu-toggle{position:fixed;top:18px;right:18px;width:44px;height:44px;border-radius:10px;border:1px solid rgba(125,211,252,.25);background:#0b0f1499;color:var(--hud-fg);display:grid;place-items:center;gap:4px;cursor:pointer;z-index:4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#menu-toggle span{width:18px;height:2px;background:var(--hud-fg);border-radius:999px;display:block;transition:transform .3s ease,opacity .3s ease}body.menu-open #menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}body.menu-open #menu-toggle span:nth-child(2){opacity:0}body.menu-open #menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}#menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#070a0e8c;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:2}body.menu-open #menu-backdrop{opacity:1;pointer-events:auto}#menu{position:fixed;top:0;right:0;height:100vh;width:min(320px,80vw);padding:28px 22px;background:var(--menu-bg);border-left:1px solid var(--menu-border);box-shadow:var(--menu-shadow);transform:translate(100%);transition:transform .3s ease;z-index:3;display:flex;flex-direction:column;gap:14px}body.menu-open #menu{transform:translate(0)}.menu-title{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--accent)}.sketch-button{text-align:left;padding:12px 14px;border-radius:12px;border:1px solid rgba(125,211,252,.15);background:#0d141de6;color:var(--hud-fg);font-size:14px;cursor:pointer;transition:border .2s ease,transform .2s ease}.sketch-button:hover{border-color:#7dd3fc73;transform:translate(-2px)}.sketch-button.active{border-color:var(--accent);box-shadow:0 0 0 1px #7dd3fc4d}.menu-footer{margin-top:auto;font-size:12px;color:var(--hud-muted)}#hud{position:fixed;top:18px;left:18px;padding:10px 12px;border:1px solid rgba(125,211,252,.25);border-radius:10px;background:var(--hud-bg);color:var(--hud-fg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1}#hud .title{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}#hud .meta{display:flex;gap:12px;font-size:12px;color:var(--hud-fg);margin-bottom:4px}#hud .meta span:last-child{color:var(--hud-muted)}#hud .hint{font-size:12px;color:var(--hud-muted)}