.qnf-layer{--qnf-ink:#1f1a17;--qnf-paper:#f3ead8;--qnf-paper-2:#e9dcc4;--qnf-muted:#5b4a3a;--qnf-accent:#c4383f;--qnf-ochre:#dda63c;--qnf-top:max(14px, env(safe-area-inset-top));--qnf-bottom:max(18px, env(safe-area-inset-bottom));--qnf-side:max(14px, env(safe-area-inset-left));z-index:7;pointer-events:none;color:var(--qnf-ink);font:400 15px / 1.5 var(--font-body,"Hanken Grotesk", system-ui, sans-serif);position:absolute;inset:0}.qnf-panel{top:calc(var(--qnf-top) + 84px);left:var(--qnf-side);width:min(420px, calc(100vw - 2 * var(--qnf-side)));max-height:calc(100dvh - var(--qnf-top) - 58px - var(--qnf-bottom) - 80px);border:2.5px solid var(--qnf-ink);background:var(--qnf-paper);box-shadow:5px 5px 0 var(--qnf-ink), 0 18px 40px -18px #1f1a1780;pointer-events:auto;transform-origin:0 0;border-radius:10px;flex-direction:column;display:flex;position:absolute}.qnf-panel[hidden]{display:none}.qnf-panel.is-open{animation:.42s cubic-bezier(.16,1,.3,1) both qnf-unfold}@keyframes qnf-unfold{0%{clip-path:inset(0 0 100% round 10px);transform:translateY(-6px)rotate(-.6deg)}to{clip-path:inset(0 round 10px);transform:none}}.qnf-panel:before{content:"";border-bottom:2px solid var(--qnf-ink);background:linear-gradient(90deg,#2a9d8f 0 18%,#dda63c 18% 30%,#7fae6a 30% 56%,#c4383f 56% 68%,#a8825f 68% 82%,#3446a6 82%);border-radius:7px 7px 0 0;flex:none;height:10px}.qnf-head{padding:14px 58px 8px 18px}.qnf-kicker{font:800 .78rem / 1 var(--font-display,"Archivo", sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--qnf-muted);margin:0 0 4px;font-stretch:75%}.qnf-title{font:800 1.5rem / 1.05 var(--font-display,"Archivo", sans-serif);letter-spacing:.01em;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere;margin:0;font-stretch:68%}.qnf-title:focus{outline:none}.qnf-title:focus-visible{outline:3px solid var(--qnf-ochre);outline-offset:3px}.qnf-close{border:2.5px solid var(--qnf-ink);background:var(--qnf-paper);width:36px;height:36px;color:var(--qnf-ink);box-shadow:2px 2px 0 var(--qnf-ink);cursor:pointer;border-radius:6px;place-items:center;padding:0;display:grid;position:absolute;top:18px;right:10px}.qnf-close svg{width:18px;height:18px}.qnf-close:hover{background:#fff7e6}.qnf-close:focus-visible,.qnf-btn:focus-visible,.qnf-pick:focus-visible{outline:3px solid var(--qnf-ochre);outline-offset:3px}.qnf-body{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--qnf-muted) transparent;padding:4px 18px 18px;overflow-y:auto}.qnf-lede{overflow-wrap:anywhere;max-width:60ch;margin:0 0 12px}.qnf-meta{font:500 .82rem / 1.3 var(--font-mono,"JetBrains Mono", monospace);font-variant-numeric:tabular-nums;color:var(--qnf-muted);flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;display:flex}.qnf-meta strong{color:var(--qnf-ink);font-weight:700}.qnf-dot{border:2px solid var(--qnf-ink);background:var(--qnf-dot,var(--qnf-accent));vertical-align:-1px;border-radius:50%;width:11px;height:11px;margin-right:6px;display:inline-block}.qnf-label{font:800 .8rem / 1 var(--font-display,"Archivo", sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--qnf-muted);margin:14px 0 6px;font-stretch:75%}.qnf-actions{flex-wrap:wrap;gap:10px;margin:4px 0 6px;display:flex}.qnf-btn{border:2.5px solid var(--qnf-ink);background:var(--qnf-paper);min-height:44px;color:var(--qnf-ink);box-shadow:3px 3px 0 var(--qnf-ink);font:800 .9rem / 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:.45em;padding:0 14px;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}.qnf-btn:hover{box-shadow:4px 4px 0 var(--qnf-ink);background:#fff7e6;transform:translate(-1px,-1px)}.qnf-btn:active{box-shadow:1px 1px 0 var(--qnf-ink);transform:translate(2px,2px)}.qnf-btn-primary{background:var(--qnf-accent);color:#fff8ee}.qnf-btn-primary:hover{background:#d4464d}.qnf-nav{font:600 .8rem / 1.2 var(--font-mono,"JetBrains Mono", monospace);color:var(--qnf-muted);border-top:2px dashed #1f1a1759;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 0;padding-top:12px;display:flex}.qnf-nav .qnf-btn{min-width:44px;padding:0 12px}.qnf-legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:0;padding:0;font-size:.86rem;line-height:1.25;list-style:none;display:grid}.qnf-legend li{align-items:flex-start;gap:8px;display:flex}.qnf-legend small{font:500 .72rem / 1.25 var(--font-mono,"JetBrains Mono", monospace);color:var(--qnf-muted);display:block}.qnf-legend li[aria-current=true]{font-weight:700}.qnf-swatch{border:2px solid var(--qnf-ink);background:var(--qnf-dot,var(--qnf-ochre));border-radius:6px;flex:none;width:12px;height:22px;margin-top:1px}.qnf-note{color:var(--qnf-muted);max-width:60ch;margin:10px 0 0;font-size:.82rem}.qnf-tags{flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none;display:flex}.qnf-tags li{border:2px solid var(--qnf-ink);background:var(--qnf-paper-2);font:600 .74rem / 1.3 var(--font-mono,"JetBrains Mono", monospace);border-radius:999px;padding:2px 8px}.qnf-picks{gap:6px;margin:0;padding:0;list-style:none;display:grid}.qnf-pick{border:2px solid var(--qnf-ink);background:var(--qnf-paper);width:100%;min-height:44px;color:var(--qnf-ink);font:600 .88rem / 1.25 var(--font-body,"Hanken Grotesk", system-ui, sans-serif);text-align:left;cursor:pointer;border-radius:6px;align-items:center;gap:10px;padding:6px 10px;display:flex}.qnf-pick:hover{background:#fff7e6}.qnf-pick[aria-pressed=true]{background:var(--qnf-paper-2);box-shadow:inset 4px 0 0 var(--qnf-dot,var(--qnf-accent));font-weight:800}.qnf-pick time{font:500 .74rem / 1 var(--font-mono,"JetBrains Mono", monospace);color:var(--qnf-muted);flex:none;margin-left:auto}.qnf-pick .qnf-cord{border:1.5px solid var(--qnf-ink);background:var(--qnf-dot,var(--qnf-accent));border-radius:3px;flex:none;width:6px;height:26px}.qnf-pick-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.qnf-code{border:2px solid var(--qnf-ink);background:var(--qnf-paper-2);font:500 .8rem / 1.4 var(--font-mono,"JetBrains Mono", monospace);border-radius:8px;margin:0 0 12px;padding:8px 12px}@media (width<=640px){.qnf-panel{top:calc(var(--qnf-top) + 80px);width:auto;max-height:52dvh;left:10px;right:10px}.qnf-title{font-size:1.25rem}.qnf-legend{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.qnf-panel.is-open{animation:none}.qnf-btn{transition:none}}