.qn-hud{--qn-ink:#1f1a17;--qn-paper:#f3ead8;--qn-paper-2:#e9dcc4;--qn-cloth:#d8b46a;--qn-muted:#5b4a3a;--qn-accent:#c4383f;--qn-ochre:#dda63c;--qn-shadow:3px 3px 0 var(--qn-ink);--qn-top:max(14px, env(safe-area-inset-top));--qn-bottom:max(18px, env(safe-area-inset-bottom));--qn-side:max(14px, env(safe-area-inset-left));pointer-events:none;color:var(--qn-ink);font:400 15px / 1.5 var(--font-body,"Hanken Grotesk", system-ui, sans-serif);z-index:5;position:absolute;inset:0}.qn-hud.is-night{--qn-ink:#1b2340;--qn-paper:#efe6d6;--qn-paper-2:#ddd3c6;--qn-muted:#3f4466}.qn-hud>*{pointer-events:auto}.qn-hud ::selection{background:var(--qn-ochre);color:var(--qn-ink)}.qn-hud kbd{min-width:1.6em;height:1.6em;font:700 .78em / 1 var(--font-mono,"JetBrains Mono", monospace);background:var(--qn-paper);color:var(--qn-ink);border:2px solid;border-radius:4px;place-items:center;padding:0 .3em;display:inline-grid}.qn-btn{border:2.5px solid var(--qn-ink);background:var(--qn-paper);min-height:44px;color:var(--qn-ink);box-shadow:var(--qn-shadow);font:800 .95rem / 1 var(--font-display,"Archivo", sans-serif);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:.5em;padding:0 16px;font-stretch:75%;text-decoration:none;transition:transform .12s cubic-bezier(.2,.9,.3,1),box-shadow .12s cubic-bezier(.2,.9,.3,1),background-color .16s;display:inline-flex}.qn-btn:hover{box-shadow:4px 4px 0 var(--qn-ink);background:#fff7e6;transform:translate(-1px,-1px)}.qn-btn:active{box-shadow:1px 1px 0 var(--qn-ink);transform:translate(2px,2px)}.qn-btn:focus-visible{outline:3px solid var(--qn-ochre);outline-offset:3px}.qn-btn-primary{background:var(--qn-accent);color:#fff8ee}.qn-btn-primary:hover{background:#d4464d}.qn-icon{width:44px;padding:0}.qn-icon svg{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.qn-icon svg.is-fill{fill:currentColor;stroke:none}.qn-toast{top:var(--qn-top);border:2.5px solid var(--qn-ink);background:var(--qn-cloth);box-shadow:var(--qn-shadow);font:800 1.15rem / 1.1 var(--font-display,"Archivo", sans-serif);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;border-radius:6px;padding:10px 20px 9px;font-stretch:72%;transition:opacity .24s cubic-bezier(.16,1,.3,1),transform .36s cubic-bezier(.16,1,.3,1);position:absolute;left:50%;transform:translate(-50%,-16px)}.qn-toast.is-on{opacity:1;transform:translate(-50%)}.qn-prompt{left:50%;bottom:calc(var(--qn-bottom) + 8px);min-height:50px;padding:0 20px 0 10px;font-size:1.05rem;animation:1.8s ease-in-out infinite qn-bob;position:absolute;transform:translate(-50%)}.qn-prompt:hover,.qn-prompt:active{transform:translate(-50%)}.qn-prompt kbd{font-size:.95rem}@keyframes qn-bob{0%,to{translate:0}50%{translate:0 -3px}}.qn-panel{top:calc(var(--qn-top) + 58px);left:var(--qn-side);width:min(400px, calc(100vw - 2 * var(--qn-side)));max-height:calc(100dvh - var(--qn-top) - 58px - var(--qn-bottom) - 80px);border:2.5px solid var(--qn-ink);background:var(--qn-paper);box-shadow:5px 5px 0 var(--qn-ink), 0 18px 40px -18px #1f1a1780;transform-origin:0 0;border-radius:10px;flex-direction:column;display:flex;position:absolute}.qn-panel.is-open{animation:.42s cubic-bezier(.16,1,.3,1) both qn-unfold}@keyframes qn-unfold{0%{clip-path:inset(0 0 100% round 10px);transform:translateY(-6px)rotate(-.6deg)}to{clip-path:inset(0 round 10px);transform:none}}.qn-panel:before{content:"";border-bottom:2px solid var(--qn-ink);background:linear-gradient(90deg,#c4383f 0 20%,#dda63c 20% 32%,#3446a6 32% 58%,#2a9d8f 58% 70%,#a8825f 70% 82%,#c4383f 82%);border-radius:7px 7px 0 0;flex:none;height:10px}.qn-panel-close{width:36px;min-height:36px;box-shadow:2px 2px 0 var(--qn-ink);position:absolute;top:18px;right:10px}.qn-panel-body{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--qn-muted) transparent;padding:14px 18px 18px;overflow-y:auto}.qn-head{align-items:center;gap:12px;margin-bottom:10px;padding-right:40px;display:flex}.qn-swatch{border:2px solid var(--qn-ink);background:var(--dye);border-radius:7px;flex:none;width:14px;height:40px}.qn-title{font:800 1.55rem / 1 var(--font-display,"Archivo", sans-serif);letter-spacing:.01em;text-transform:uppercase;text-wrap:balance;margin:0;font-stretch:68%}.qn-sub,.qn-period,.qn-num{font-family:var(--font-mono,"JetBrains Mono", monospace);font-variant-numeric:tabular-nums}.qn-sub{color:var(--qn-muted);margin:4px 0 0;font-size:.82rem}.qn-lede{max-width:60ch;margin:0 0 12px}.qn-label{font:800 .85rem / 1 var(--font-display,"Archivo", sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--qn-muted);margin:14px 0 6px;font-stretch:75%}.qn-metric{border:2px solid var(--qn-ink);background:var(--qn-paper-2);border-radius:8px;align-items:baseline;gap:10px;margin:0 0 12px;padding:8px 12px;font-size:.88rem;line-height:1.35;display:flex}.qn-metric strong{font:800 1.9rem / 1 var(--font-display,"Archivo", sans-serif);color:var(--qn-accent);white-space:nowrap;font-stretch:70%}.qn-cords{gap:14px;margin:0;padding:0;list-style:none;display:grid}.qn-cord{padding-left:18px;position:relative}.qn-cord:before{content:"";background:var(--dye);width:4px;box-shadow:0 0 0 1.5px var(--qn-ink);border-radius:2px;position:absolute;top:4px;bottom:2px;left:4px}.qn-cord.is-sub{margin-left:12px}.qn-role{font:700 1rem / 1.25 var(--font-body,sans-serif);margin:0}.qn-period{color:var(--qn-muted);margin:2px 0 0;font-size:.78rem}.qn-tag{border:1.5px solid var(--qn-ink);background:#cfe9e4;border-radius:999px;margin:6px 0 0;padding:1px 8px;font-size:.75rem;font-weight:600;display:inline-block}.qn-summary{margin:6px 0 8px;font-size:.92rem}.qn-knots,.qn-uses{gap:7px;margin:0;padding:0;list-style:none;display:grid}.qn-knot-row{grid-template-columns:22px 1fr;align-items:start;gap:8px;font-size:.88rem;line-height:1.4;display:grid}.qn-knot{flex-direction:column;align-items:center;gap:1px;padding-top:4px;display:flex}.qn-knot i{border:1.5px solid var(--qn-ink);background:var(--dye);border-radius:50%;width:11px;height:7px}.qn-knot.is-long i{border-radius:3px;width:12px;height:4px}.qn-knot-text b{color:var(--qn-accent);font-weight:700}.qn-stack{flex-wrap:wrap;gap:4px;margin:8px 0 0;display:flex}.qn-stack span{border:1.5px solid var(--qn-ink);font:500 .72rem / 1.5 var(--font-mono,monospace);background:var(--qn-paper-2);border-radius:4px;padding:1px 7px}.qn-uses li{border-bottom:1.5px dashed #1f1a1740;gap:1px;padding-bottom:7px;font-size:.9rem;display:grid}.qn-uses li:last-child{border-bottom:0}.qn-uses .qn-num{color:var(--qn-muted);font-size:.76rem;font-weight:600}.qn-actions{flex-wrap:wrap;gap:10px;margin:4px 0 12px;display:flex}.qn-email{margin:0 0 10px;font-size:.85rem}.qn-socials{gap:10px;margin:0;padding:0;list-style:none;display:flex}.qn-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px;display:grid}.qn-stat{border:2px solid var(--qn-ink);background:var(--qn-paper-2);border-radius:8px;flex-direction:column-reverse;padding:8px 10px;display:flex}.qn-stat dt{color:var(--qn-muted);font-size:.78rem;line-height:1.3}.qn-stat dd{font:800 1.9rem / 1 var(--font-display,"Archivo", sans-serif);color:var(--qn-accent);margin:0;font-stretch:70%}.qn-tools{top:var(--qn-top);right:var(--qn-side);gap:8px;display:flex;position:absolute}.qn-map{top:calc(var(--qn-top) + 58px);right:var(--qn-side);border:2.5px solid var(--qn-ink);width:156px;box-shadow:var(--qn-shadow);background:#e6efd9;border-radius:10px;margin:0;padding:6px;transition:width .32s cubic-bezier(.16,1,.3,1);position:absolute}.qn-hud.is-night .qn-map{background:#2a3358}.qn-map-canvas{aspect-ratio:1;width:100%;display:block}.qn-map-cap{min-height:1.3em;font:800 .72rem / 1.3 var(--font-display,sans-serif);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--qn-ink);margin-top:2px;font-stretch:75%}.qn-hud.is-night .qn-map-cap{color:#e9e4ff}.qn-map.is-expanded{width:min(420px, calc(100vw - 2 * var(--qn-side)))}.qn-help{background:#1f1a1747;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.qn-help[hidden]{display:none}.qn-card{border:2.5px solid var(--qn-ink);background:var(--qn-paper);box-shadow:5px 5px 0 var(--qn-ink);border-radius:10px}.qn-help-card{width:min(460px,100%);padding:22px 22px 20px}.qn-help-list{gap:6px;margin:14px 0 18px;padding-left:1.1em;display:grid}.qn-hud.qn-game-layer{z-index:1000;position:fixed}.qn-game{z-index:10;background:#16171d;flex-direction:column;display:flex;position:absolute;inset:0}.qn-game[hidden]{display:none}.qn-game-bar{padding:10px max(14px, env(safe-area-inset-left));background:var(--qn-cloth);border-bottom:2.5px solid #1f1a17;justify-content:space-between;align-items:center;gap:12px;display:flex}.qn-game-bar .qn-title{font-size:1.25rem}.qn-game-host{flex:1;min-height:0;padding:12px;overflow:auto}.qn-game-loading{color:#efe6d6;font:600 .95rem var(--font-mono,monospace);text-align:center;margin-top:30vh}.qn-hud.has-game>:not(.qn-game){display:none}@media (width<=640px){.qn-panel{top:calc(var(--qn-top) + 54px);width:auto;max-height:48dvh;left:10px;right:10px}.qn-map{width:104px}.qn-hud.has-panel .qn-map:not(.is-expanded){display:none}.qn-title{font-size:1.3rem}.qn-toast{font-size:1rem}.qn-prompt{bottom:calc(var(--qn-bottom) + 132px)}}@media (prefers-reduced-motion:reduce){.qn-prompt,.qn-panel.is-open{animation:none}.qn-toast,.qn-btn,.qn-map{transition:none}}@media (height<=520px) and (width>=641px){.qn-panel{top:calc(var(--qn-top) + 44px);width:min(360px,46vw);max-height:max(180px, calc(100dvh - var(--qn-top) - 44px - var(--qn-bottom) - 12px))}}