

:root{
color-scheme:dark;
--ink-void:#000000;--ink-black:#000000;--ink-1:#060606;--ink-2:#0c0c0c;--ink-3:#131313;
--paper:#f4f2ee;--paper-2:#d7d3cc;--paper-muted:#a6a19a;--paper-faint:#86817a;--ink-on-paper:#000000;
--line-soft:rgba(244,242,238,.04);--line:rgba(244,242,238,.075);--line-strong:rgba(244,242,238,.14);
--edge:rgba(255,255,255,.055);
--accent:#ff2b2b;--accent-hi:#ff6060;--accent-dim:#8f1a1a;--accent-wash:rgba(255,43,43,.12);
--ok:#b0b0b0;--danger:#ff6060;--danger-text:#f4d1c8;--danger-wash:rgba(255,107,107,.15);
--r:2px;
--font-display:'Instrument Serif','Iowan Old Style',Georgia,ui-serif,serif;
--font-sans:'IBM Plex Sans',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--dur-1:120ms;--dur-2:220ms;--dur-3:420ms;--dur-4:560ms;
--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
--shadow-1:0 1px 1px rgba(0,0,0,.5),0 2px 6px -2px rgba(0,0,0,.5);
--shadow-2:0 12px 32px -14px rgba(0,0,0,.9),0 2px 8px -4px rgba(0,0,0,.6);
--shadow-3:0 32px 80px -32px rgba(0,0,0,.95),0 4px 16px -8px rgba(0,0,0,.7);
--inset-edge:inset 0 1px 0 var(--edge);
--inset-well:inset 0 1px 2px rgba(0,0,0,.55);
--surface:linear-gradient(180deg,#0a0a0a 0%,#030303 100%);
}

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/instrument-serif-latin-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-wght.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-500.woff2') format('woff2')}

html,body{background:#000}
body{font-family:var(--font-sans);background:var(--ink-black);color:var(--paper)}
::selection{background:var(--accent-wash);color:var(--paper)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:rgba(244,242,238,.22)}

*,*::before,*::after{border-radius:var(--r)!important}
.loading-dot,.family-member-avatar{border-radius:50%!important}

.vignette{display:none}
.hero-ascii{color:rgba(244,242,238,.32)}
#loading-screen{background:var(--ink-black)}
.loading-bar{background:linear-gradient(to top,transparent,rgba(244,242,238,.05))}

.navbar{background:#000;border-bottom-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
.navbar.scrolled{background:#000;border-bottom-color:var(--line-strong)}
.navbar-link{color:var(--paper-muted);font-size:.85rem;letter-spacing:.01em}
.navbar-link:hover{color:var(--paper);background:rgba(244,242,238,.045)}
.navbar-link::after{background:var(--accent-hi)}
.navbar-logo{font-family:var(--font-mono);font-weight:500;letter-spacing:.16em;background:none;-webkit-text-fill-color:var(--paper);color:var(--paper)}

.brand-x,.navbar-logo-accent,.loading-logo-accent{color:var(--accent)!important;-webkit-text-fill-color:var(--accent)!important}
.navbar-user-badge{background:var(--ink-1);border:1px solid var(--line);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-muted);padding:5px 12px}
.hamburger-line{background:var(--paper-muted)}

.breadcrumbs li{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint)}
.breadcrumbs li+li::before{color:var(--line-strong)}
.breadcrumbs a{color:var(--paper-muted)}
.breadcrumbs a:hover{color:var(--paper)}

.loading-logo{font-family:var(--font-mono);font-weight:500;letter-spacing:.2em}
.loading-logo-text{background:none;-webkit-text-fill-color:var(--paper);animation:none}

.loading-subtitle{color:var(--paper-faint);font-size:.7rem;letter-spacing:.32em}

.login-card,.coming-card,.discord-card,.dash-search-form,.dash-results,.dash-lookup-card,.dash-account-card,.dash-usage-section,.acct-card,.hist-card,.admin-card{position:relative;background:var(--surface);border:1px solid var(--line);box-shadow:var(--inset-edge);-webkit-backdrop-filter:none;backdrop-filter:none}
.login-card:hover,.discord-card:hover{box-shadow:var(--inset-edge),var(--shadow-2)}
.dash-result-card,.dash-cat,.discord-stat,.family-member,.family-group-hdr,.admin-user-row,.dash-ratelimit,.discord-invite,.coming-feature-icon{position:relative;background:var(--ink-1);border:1px solid var(--line-soft);box-shadow:var(--inset-edge)}
.dash-result-card:hover,.family-member:hover,.admin-user-row:hover{background:var(--ink-2);border-color:var(--line)}
.dash-cat:hover{border-color:var(--line)}

@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
.login-card::before,.coming-card::before,.discord-card::before,.dash-search-form::before,.dash-results::before,.dash-lookup-card::before,.dash-account-card::before,.dash-usage-section::before,.acct-card::before,.hist-card::before,.admin-card::before,.dash-result-card::before,.dash-cat::before,.discord-stat::before,.family-member::before,.family-group-hdr::before,.admin-user-row::before,.dash-ratelimit::before,.discord-invite::before{content:'';position:absolute;inset:0;padding:1px;pointer-events:none;background-image:radial-gradient(92px 92px at 0% 0%,rgba(255,255,255,.96),transparent 74%),radial-gradient(92px 92px at 100% 0%,rgba(255,255,255,.96),transparent 74%),radial-gradient(92px 92px at 0% 100%,rgba(255,255,255,.42),transparent 74%),radial-gradient(92px 92px at 100% 100%,rgba(255,255,255,.42),transparent 74%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;transition:opacity var(--dur-3) var(--ease)}
.login-card:hover::before,.login-card:focus-within::before,.coming-card:hover::before,.discord-card:hover::before,.dash-search-form:focus-within::before,.dash-results:hover::before,.admin-card:hover::before{opacity:1}
}

.login-card::after,.coming-card::after,.discord-card::after,.dash-search-form::after,.dash-results::after,.dash-lookup-card::after,.dash-account-card::after,.dash-usage-section::after,.acct-card::after,.hist-card::after,.admin-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(240px 240px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.05),transparent 70%);opacity:0;transition:opacity var(--dur-3) var(--ease)}
.login-card:hover::after,.coming-card:hover::after,.discord-card:hover::after,.dash-search-form:hover::after,.dash-results:hover::after,.dash-lookup-card:hover::after,.dash-account-card:hover::after,.dash-usage-section:hover::after,.acct-card:hover::after,.hist-card:hover::after,.admin-card:hover::after{opacity:1}

@property --flx-beam{syntax:'<angle>';inherits:false;initial-value:0deg}
.specular-button{--sb-radius:2px!important;border:1px solid var(--line-strong);background:var(--ink-1);box-shadow:var(--inset-edge),var(--shadow-1);transition:transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease)}
.specular-button:hover{border-color:var(--line-strong);box-shadow:var(--inset-edge),var(--shadow-2)}
.specular-button:active{transform:translateY(1px);box-shadow:var(--inset-edge)}
.specular-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.login-btn-wrap .specular-button,.dash-submit-wrap .specular-button,.dash-lookup-row .specular-button{background:var(--paper);border-color:var(--paper);color:var(--ink-on-paper)}
.login-btn-wrap .specular-button:hover,.dash-submit-wrap .specular-button:hover,.dash-lookup-row .specular-button:hover{background:#fff;border-color:#fff}
.specular-button__fx::before{animation:none;opacity:0;transition:opacity var(--dur-2) var(--ease)}
.specular-button:hover .specular-button__fx::before{animation:sbShine 900ms var(--ease) 1;opacity:1}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
.specular-button::after{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;background:conic-gradient(from var(--flx-beam),transparent 0deg,transparent 38deg,rgba(255,255,255,.14) 54deg,rgba(255,255,255,.94) 64deg,rgba(255,255,255,.14) 74deg,transparent 90deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity var(--dur-2) var(--ease)}
.specular-button:hover:not(:disabled)::after,.specular-button:focus-visible::after{opacity:1;animation:flxBeamTurn 2200ms linear infinite}
.login-btn-wrap .specular-button::after,.dash-submit-wrap .specular-button::after,.dash-lookup-row .specular-button::after{background:conic-gradient(from var(--flx-beam),transparent 0deg,transparent 38deg,rgba(120,120,120,.18) 54deg,rgba(0,0,0,.9) 64deg,rgba(120,120,120,.18) 74deg,transparent 90deg,transparent 360deg)}
}
@keyframes flxBeamTurn{from{--flx-beam:0deg}to{--flx-beam:360deg}}

.login-title,.coming-title,.dash-title,.admin-title,.discord-title,.dash-lookup-title,.admin-card-title,.dash-usage-title,.acct-title,.hist-title{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;color:var(--paper)}
.coming-title span{background:none;-webkit-text-fill-color:var(--paper)}
.hero-tagline{font-family:var(--font-mono);font-size:clamp(.6rem,2vw,.72rem);font-weight:400;color:var(--paper-faint);letter-spacing:.34em}
.login-label,.dash-field-label,.admin-label,.footer-col-title,.dash-apikey-label,.dash-form-title,.dash-account-card-label,.discord-code-label{font-family:var(--font-mono);font-weight:400;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint)}
.loading-logo,.navbar-logo,.discord-code,.footer-logo,.navbar-user-badge,.dash-apikey-value,.dash-result-conf,.dash-usage-endpoint code,.dash-usage-status,.dash-usage-ms,.dash-usage-time,.family-count,.admin-user-name,.dash-account-card-value,.dash-results-took,.dash-capped-badge,.dash-source-badge{font-family:var(--font-mono)}
.dash-usage-table,.hist-table{font-variant-numeric:tabular-nums}
.login-input,.dash-tab,.dash-clear-btn,.dash-cat-hdr,.dash-input,.dash-lookup-type{font-family:var(--font-sans)}
.login-subtitle,.coming-desc,.discord-desc,.discord-subtitle,.login-forgot,.dash-lookup-desc,.admin-subtitle,.admin-card-desc,.discord-stat-label{color:var(--paper-muted);font-weight:400}
.dash-result-detail,.family-member-detail,.family-age,.admin-user-date{color:var(--paper-faint)}

.login-input,.dash-input{border:1px solid var(--line-strong);background:var(--ink-black);box-shadow:var(--inset-well);border-radius:2px;color:var(--paper);transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease)}
.login-input:hover,.dash-input:hover{border-color:rgba(244,242,238,.22)}
.login-input:focus,.dash-input:focus{border-color:var(--accent-dim);background:var(--ink-black);box-shadow:var(--inset-well),0 0 0 3px var(--accent-wash)}
.login-input::placeholder,.dash-input::placeholder{color:var(--paper-faint)}
.login-remember input[type='checkbox'],.dash-flexible-toggle input[type='checkbox']{border:1px solid var(--line-strong);background:var(--ink-black)}
.login-remember input:checked,.dash-flexible-toggle input:checked{background:var(--accent);border-color:var(--accent)}
.login-remember input:checked::after,.dash-flexible-toggle input:checked::after{color:var(--ink-on-paper)}
.login-remember,.dash-flexible-toggle{color:var(--paper-muted)}
.login-divider{color:var(--paper-faint);font-family:var(--font-mono);letter-spacing:.2em}
.login-divider::before,.login-divider::after{background:var(--line)}

.login-error,.dash-error{background:var(--danger-wash);border:1px solid var(--accent-dim);color:var(--danger-text);border-radius:2px}
.admin-msg{border-radius:2px}
.admin-msg.success{background:rgba(176,176,176,.10);border:1px solid rgba(176,176,176,.22);color:#cfcfcf}
.admin-msg.error{background:var(--danger-wash);border:1px solid var(--accent-dim);color:var(--danger-text)}
.admin-msg.info{background:var(--ink-1);border:1px solid var(--line);color:var(--paper-muted)}
.dash-result-conf{color:var(--paper-muted);background:var(--ink-2);border:1px solid var(--line)}
.dash-result-conf.high{color:#cfcfcf;background:rgba(176,176,176,.12);border-color:rgba(176,176,176,.24)}
.dash-result-conf.mid{color:var(--accent-hi);background:var(--accent-wash);border-color:rgba(255,43,43,.34)}
.dash-result-conf.low{color:var(--danger-text);background:var(--danger-wash);border-color:var(--accent-dim)}
.dash-usage-status.ok{color:#cfcfcf;background:rgba(176,176,176,.12)}
.dash-usage-status.err{color:var(--danger-text);background:var(--danger-wash)}
.dash-capped-badge{color:var(--accent-hi);background:var(--accent-wash)}
.coming-badge,.dash-source-badge{background:var(--ink-2);border:1px solid var(--line);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:var(--paper-faint);border-radius:2px}
.admin-role-badge{-webkit-backdrop-filter:none;backdrop-filter:none;font-family:var(--font-mono);letter-spacing:.12em;border-radius:2px}
.admin-role-badge.owner{background:var(--accent-wash);color:var(--accent-hi);border-color:rgba(255,43,43,.34)}
.admin-role-badge.admin{background:var(--ink-2);color:var(--paper-2);border-color:var(--line)}
.admin-role-badge.user{background:transparent;color:var(--paper-faint);border-color:var(--line-soft)}
.admin-user-del{background:transparent;border:1px solid var(--line-soft);color:var(--paper-faint)}
.admin-user-del:hover{background:var(--danger-wash);border-color:var(--accent-dim);color:var(--danger-text)}
.dash-result-name,.dash-lookup-title,.admin-user-name,.family-member-name,.family-addr{color:var(--paper-2)}
.dash-no-results,.admin-empty,.dash-loading,.family-no-addr{color:var(--paper-faint)}
#changePasswordMsg{font-family:var(--font-mono);font-size:.75rem}

.dash-tab{color:var(--paper-faint);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid transparent;border-radius:2px 2px 0 0;font-weight:400}
.dash-tab:hover{color:var(--paper-muted);background:rgba(244,242,238,.03)}
.dash-tab.active{color:var(--paper);border-bottom-color:var(--accent);background:transparent}
.dash-tabs{border-bottom:1px solid var(--line)}
.dash-cat-hdr{background:var(--ink-1);color:var(--paper-2);font-weight:400}
.dash-cat-hdr:hover{background:var(--ink-2);color:var(--paper)}
.dash-cat-cnt,.family-count{background:var(--ink-2);color:var(--paper-faint);font-size:.62rem;border:1px solid var(--line-soft);border-radius:2px}
.dash-lookup-type{background:var(--ink-1);border:1px solid var(--line);color:var(--paper-muted)}
.dash-lookup-type:hover{background:var(--ink-2);color:var(--paper-2)}
.dash-lookup-type.active{background:var(--accent-wash);border-color:rgba(255,43,43,.34);color:var(--accent-hi)}
.dash-clear-btn{color:var(--paper-faint);border-radius:2px}
.dash-clear-btn:hover{color:var(--paper-2);background:rgba(244,242,238,.04)}
.dash-usage-table th,.hist-table th{color:var(--paper-faint);font-family:var(--font-mono);font-weight:400;letter-spacing:.12em;border-bottom:1px solid var(--line)}
.dash-usage-table td,.hist-table td{color:var(--paper-muted);border-bottom:1px solid var(--line-soft)}
.hist-filter{font-family:var(--font-sans);border-color:var(--line-soft);color:var(--paper-faint)}
.hist-filter:hover{background:var(--ink-2);color:var(--paper-2)}
.hist-filter.active{background:var(--ink-2);border-color:var(--line);color:var(--paper)}
.hist-clear,.hist-rerun{font-family:var(--font-sans);background:var(--ink-1);border-color:var(--line);color:var(--paper-muted)}
.hist-clear:hover{background:var(--danger-wash);border-color:var(--accent-dim);color:var(--danger-text)}
.hist-rerun:hover{background:var(--ink-2);border-color:var(--line-strong);color:var(--paper)}
.hist-chip{background:var(--ink-1);border-color:var(--line-soft);color:var(--paper-2)}
.hist-chip b,.hist-stat,.hist-date small,.hist-sub,.hist-empty{color:var(--paper-faint)}
.hist-stat{background:var(--ink-1);border-color:var(--line-soft)}
.hist-stat b,.hist-date,.hist-num{color:var(--paper-2)}
.hist-num--zero,.hist-num--muted{color:var(--paper-faint)}
.hist-kind{background:var(--ink-1);border-color:var(--line-soft);color:var(--paper-muted)}
.hist-kind--search{background:var(--accent-wash);border-color:var(--accent-dim);color:var(--accent-hi)}
.hist-table tbody tr:hover{background:var(--ink-1)}
.dash-chevron{color:var(--paper-faint)}
.dash-submit-wrap,.dash-results-hdr{border-top-color:var(--line-soft);border-bottom-color:var(--line-soft)}
.dash-ratelimit{background:var(--ink-1);border-color:var(--line-soft)}
.dash-ratelimit-item{color:var(--paper-faint)}

.family-connector-line,.family-group-sep{background:var(--line)}
.family-group-sep{height:1px}

.coming-progress{height:2px;background:var(--ink-3);border-radius:2px}
.coming-progress-bar{background:linear-gradient(90deg,transparent,var(--accent-hi),transparent);border-radius:2px;animation:progressFill 3.6s var(--ease) infinite}
.coming-feature{color:var(--paper-muted)}
.coming-feature-icon{color:var(--paper-faint);font-family:var(--font-mono)}
.discord-header{border-bottom:1px solid var(--line)}
.discord-icon svg{filter:none;opacity:.85}
.discord-stat-value{font-family:var(--font-display);color:var(--paper-2)}
.discord-code{background:var(--ink-black);border:1px solid var(--line);color:var(--paper-2);border-radius:2px}

.footer{border-top:1px solid var(--line)}
.footer-logo{color:var(--paper);letter-spacing:.16em}
.footer-tagline,.footer-bottom p{color:var(--paper-faint)}
.footer-link{color:var(--paper-faint)}
.footer-link:hover{color:var(--paper-2)}
.footer-bottom{border-top:1px solid var(--line-soft)}

.reveal{transform:translateY(12px);transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
.page-enter-active{transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)!important}
.dash-tab-content{animation:none}

@media(max-width:700px){
.navbar-links{background:var(--ink-1);border-left:1px solid var(--line);box-shadow:var(--shadow-3);-webkit-backdrop-filter:none;backdrop-filter:none}
.navbar-link{border-radius:2px}
.navbar-link:active{background:rgba(244,242,238,.06);color:var(--paper)}
}
