:root{--bg:#070a10;--surface:#0e141d;--surface-2:#131b26;--surface-3:#18212e;--border:#1e2835;--border-strong:#2b3a4d;--text:#e7eef8;--text-dim:#93a4bb;--text-mute:#64748b;--cyan:#22d3ee;--blue:#3b82f6;--green:#4ade80;--danger:#f87171;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--r-sm:6px;--r-md:10px;--r-lg:16px;--font-sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--shadow-card:0 1px 0 #ffffff0a inset, 0 18px 40px -24px #000000e6;--ring:0 0 0 3px #22d3ee2e;--t-fast:.14s cubic-bezier(.22, 1, .36, 1);--t-med:.26s cubic-bezier(.22, 1, .36, 1)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{min-height:100vh;padding:var(--sp-7) var(--sp-4);font-family:var(--font-sans);color:var(--text);background-color:var(--bg);-webkit-font-smoothing:antialiased;background-image:radial-gradient(900px 480px at 50% -10%,#3b82f61f,#0000 70%),radial-gradient(600px 320px at 90% 0,#22d3ee14,#0000 70%),linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:100% 100%,100% 100%,44px 44px,44px 44px;background-attachment:fixed;margin:0;font-size:15px;line-height:1.5}#app{max-width:880px;margin:0 auto}.mono{font-family:var(--font-mono);font-variant-ligatures:none}h1,h2{margin:0}.masthead{margin-bottom:var(--sp-5)}.brand{align-items:center;gap:var(--sp-3);display:flex}.brand__mark{border-radius:var(--r-md);filter:drop-shadow(0 6px 16px #22d3ee38);flex:none;width:44px;height:44px}.brand__name{font-family:var(--font-mono);letter-spacing:-.02em;background:linear-gradient(100deg, var(--text) 30%, var(--cyan));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:26px;font-weight:700}.brand__tag{color:var(--text-mute);margin:2px 0 0;font-size:13px}.card{padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg, var(--surface-2), var(--surface));box-shadow:var(--shadow-card);position:relative}.card+.card{margin-top:var(--sp-4)}.card__head{gap:var(--sp-2);padding-bottom:var(--sp-3);margin-bottom:var(--sp-4);border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.card__title{letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);font-size:12px;font-weight:600}.card__hint{align-items:center;gap:var(--sp-2);letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);font-size:11px;display:inline-flex}.card__hint:before{content:"";background:var(--green);width:6px;height:6px;box-shadow:0 0 10px var(--green);border-radius:50%}.card__meta{align-items:center;gap:var(--sp-2);display:flex}.summary{padding:var(--sp-1) var(--sp-2);color:var(--cyan);border-radius:var(--r-sm);background:#22d3ee14;border:1px solid #22d3ee33;font-size:13px;font-weight:500}.tag{padding:3px var(--sp-2);letter-spacing:.08em;text-transform:uppercase;color:var(--danger);background:#f871711a;border:1px solid #f8717140;border-radius:999px;font-size:10px}.card__flash{border-radius:inherit;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 1px var(--green), 0 0 36px -6px #4ade8073;position:absolute;inset:0}.card--results.is-stale{border-color:#f8717147}.card--results.is-stale .results{opacity:.45;filter:saturate(.5)}.card--results .results,.card--results{transition:opacity var(--t-med), filter var(--t-med), border-color var(--t-med)}.tabs{gap:var(--sp-1);margin-bottom:var(--sp-4);border-bottom:1px solid var(--border);display:flex}.tab{padding:var(--sp-3) var(--sp-4);font-family:var(--font-mono);letter-spacing:.02em;color:var(--text-mute);border-radius:var(--r-sm) var(--r-sm) 0 0;cursor:pointer;transition:color var(--t-fast), background-color var(--t-fast);background:0 0;border:0;font-size:13px;font-weight:500;position:relative}.tab:hover{color:var(--text);background:#ffffff08}.tab[aria-selected=true]{color:var(--cyan);background:linear-gradient(#0000,#22d3ee14);font-weight:700}.tab[aria-selected=true]:after{content:"";right:var(--sp-3);bottom:-1px;left:var(--sp-3);background:linear-gradient(90deg, var(--cyan), var(--blue));border-radius:2px 2px 0 0;height:2px;position:absolute;box-shadow:0 0 12px #22d3ee80}.tab:focus-visible{color:var(--text);box-shadow:var(--ring);outline:none}.fields{gap:var(--sp-4);grid-template-columns:1fr 160px;display:grid}.fields[hidden]{display:none}.fields--single{grid-template-columns:1fr}.field__label{margin-bottom:var(--sp-2);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-size:11px;font-weight:500;display:block}.field__control{border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg);transition:border-color var(--t-fast);align-items:center;display:flex;position:relative}.field__control:focus-within{border-color:var(--cyan)}.field__glow{border-radius:inherit;pointer-events:none;opacity:0;box-shadow:var(--ring), 0 0 24px -4px #22d3ee8c;position:absolute;inset:-1px}.field__slash{padding-left:var(--sp-3);color:var(--text-mute);font-size:18px}.field__input{width:100%;padding:var(--sp-3) var(--sp-4);letter-spacing:.02em;color:var(--text);border-radius:inherit;background:0 0;border:0;outline:none;font-size:16px;font-weight:500}.field--cidr .field__input{padding-left:var(--sp-2)}.field__input::placeholder{color:#3f4d61}.card--reference{padding:0}.ref__heading{font-size:inherit;font-weight:inherit;margin:0}.ref__toggle{align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-3) var(--sp-5);font-family:var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);text-align:left;border-radius:var(--r-lg);cursor:pointer;transition:color var(--t-fast);background:0 0;border:0;font-size:12px;font-weight:600;display:flex}.ref__toggle:hover{color:var(--text)}.ref__toggle:focus-visible{color:var(--text);box-shadow:var(--ring);outline:none}.ref__chevron{width:15px;height:15px;color:var(--cyan);transition:transform var(--t-med);flex:none}.ref__toggle[aria-expanded=true] .ref__chevron{transform:rotate(180deg)}.ref__family{padding:2px var(--sp-2);font-family:var(--font-mono);letter-spacing:.06em;text-transform:none;color:var(--cyan);border-radius:var(--r-sm);background:#22d3ee14;border:1px solid #22d3ee33;margin-left:auto;font-size:10px;font-weight:500}.ref__panel{overflow:hidden}.ref__body{padding:0 var(--sp-5) var(--sp-5);border-top:1px solid var(--border);padding-top:var(--sp-4)}.ref__body[hidden]{display:none}.ref__table{border-collapse:collapse;width:100%;font-size:13px}.ref__table th,.ref__table td{padding:var(--sp-2) var(--sp-3);text-align:left}.ref__table thead th{font-family:var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);border-bottom:1px solid var(--border);font-size:10px;font-weight:500}.ref__table tbody th{font-family:var(--font-mono);color:var(--cyan);font-weight:700}.ref__table tbody td{font-family:var(--font-mono);color:var(--text-dim)}.ref__table tbody tr+tr th,.ref__table tbody tr+tr td{border-top:1px solid #ffffff0a}.ref__table tbody tr:hover th,.ref__table tbody tr:hover td{background:#ffffff08}.ref__list{gap:var(--sp-2);margin:0;display:grid}.ref__row{gap:var(--sp-3);grid-template-columns:56px 1fr;align-items:baseline;display:grid}.ref__row dt{color:var(--cyan);font-size:13px;font-weight:700}.ref__row dd{color:var(--text-dim);margin:0;font-size:13px}.ref__note{margin:var(--sp-4) 0 0;padding-top:var(--sp-3);color:var(--text-mute);border-top:1px solid var(--border);font-size:12px}.ref__note code{color:var(--green)}.tip{width:14px;height:14px;margin-left:var(--sp-2);font-family:var(--font-sans);color:var(--text-mute);vertical-align:middle;border:1px solid var(--border-strong);cursor:help;transition:color var(--t-fast), border-color var(--t-fast);background:0 0;border-radius:50%;place-items:center;padding:0;font-size:9px;font-weight:700;line-height:1;display:inline-grid}.tip:hover,.tip:focus-visible{color:var(--cyan);border-color:var(--cyan);outline:none}.tip:after{content:attr(data-tip);z-index:5;padding:var(--sp-2) var(--sp-3);font-family:var(--font-sans);letter-spacing:0;text-transform:none;color:var(--text);background:var(--surface-3);border:1px solid var(--border-strong);border-radius:var(--r-sm);opacity:0;pointer-events:none;transition:opacity var(--t-fast), transform var(--t-fast);font-size:11px;font-weight:400;line-height:1.45;position:absolute;bottom:calc(100% + 6px);left:0;right:0;transform:translateY(4px);box-shadow:0 14px 30px -14px #000000eb}.tip:hover:after,.tip:focus-visible:after{opacity:1;transform:translateY(0)}.banner{align-items:center;gap:var(--sp-2);margin:var(--sp-4) 0 0;padding:var(--sp-3) var(--sp-4);color:var(--danger);border:1px solid #f8717140;border-left:3px solid var(--danger);border-radius:var(--r-md);background:#f8717114;font-size:14px;display:flex}.banner[hidden]{display:none}.banner:before{content:"!";width:18px;height:18px;font-family:var(--font-mono);color:var(--bg);background:var(--danger);border-radius:50%;flex:none;place-items:center;font-size:12px;font-weight:700;display:grid}.results{gap:var(--sp-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.cell{padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-3);transition:border-color var(--t-fast), transform var(--t-fast);position:relative}.cell:hover{border-color:var(--border-strong)}.cell--wide{grid-column:1/-1}.cell__label{margin-bottom:var(--sp-2);letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);font-size:11px;font-weight:500}.cell__value{color:var(--text-dim);word-break:break-all;font-size:15px;font-weight:500}.cell--primary{background:linear-gradient(180deg, var(--surface-3), var(--surface-2));border-color:var(--border-strong)}.cell--primary .cell__value{letter-spacing:-.01em;color:var(--accent,var(--text));font-size:22px;font-weight:700}.cell--primary:before{content:"";border-radius:var(--r-md) 0 0 var(--r-md);background:var(--accent,var(--border-strong));width:2px;position:absolute;inset:0 auto 0 0}.cell[data-accent=cyan]{--accent:var(--cyan)}.cell[data-accent=cyan] .cell__value{text-shadow:0 0 26px #22d3ee4d}.cell[data-accent=blue]{--accent:var(--blue)}.cell[data-accent=blue] .cell__value{text-shadow:0 0 26px #3b82f652}.cell[data-accent=green]{--accent:var(--green)}.cell[data-accent=green] .cell__value{text-shadow:0 0 26px #4ade8047}.cell__value .sep{margin:0 var(--sp-2);color:var(--text-mute);font-weight:400}.copy{top:var(--sp-2);right:var(--sp-2);width:28px;height:28px;color:var(--text-mute);border-radius:var(--r-sm);cursor:pointer;opacity:0;transition:opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);background:0 0;border:1px solid #0000;place-items:center;padding:0;display:grid;position:absolute}.cell:hover .copy,.copy:focus-visible{opacity:1}.copy:hover{color:var(--cyan);border-color:var(--border-strong)}.copy:focus-visible{color:var(--cyan);border-color:var(--cyan);box-shadow:var(--ring);outline:none}.copy.is-copied{color:var(--green);opacity:1}.copy svg{width:14px;height:14px}.foot{margin-top:var(--sp-5);text-align:center;color:var(--text-mute);font-size:12px}@media (width<=620px){body{padding:var(--sp-5) var(--sp-4)}.card{padding:var(--sp-4)}.fields,.results{grid-template-columns:1fr}.card__head{align-items:flex-start}.cell--primary .cell__value{font-size:19px}.copy{opacity:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}
