:root{
  --stage1:#FFFFFF; --stage2:#ECE7F5; --slide1:rgba(255,255,255,.96); --slide2:rgba(236,231,246,.9); --frost1:#E9E4F2; --frost2:#F1EDF7; --navbg:rgba(245,243,249,.88);
  --glass:#F5F3F9; --paper:#FFFFFF; --ink:#24173A; --ink2:#5A5070; --line:#DDD7E8;
  --stain:#6D3FA8; --stain-soft:#C9B8E6; --fire:#C2417F; --fire-soft:#F6D5E4;
  --dark:#1C1230; --dark2:#2A1D44; --dark-line:#3E2F5C; --dark-ink:#EDE7F7; --dark-ink2:#B9AED0;
  --sans:'Familjen Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--glass);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
canvas,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--stain);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.caption{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;color:var(--ink2);margin:0}
.caption b{font-style:normal;font-weight:400;color:var(--ink)}
.muted{color:var(--ink2)}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* banner */
.banner{background:var(--ink);color:#fff;font-size:15px;text-align:center;padding:9px 16px}
.banner b{color:var(--stain-soft);font-weight:600}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:var(--navbg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand svg{width:28px;height:28px}
.nav nav{display:flex;gap:26px;font-size:16px}
.nav nav a{text-decoration:none;color:var(--ink2)} .nav nav a:hover{color:var(--ink)}
.nav .right{display:flex;gap:10px;align-items:center}
.chip{font-size:14px;color:var(--ink2);padding:6px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;font-family:var(--sans);font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;border:1.5px solid var(--ink);background:transparent;color:var(--ink);transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:var(--glass)}
.btn.solid{background:var(--stain);border-color:var(--stain);color:#fff}
.btn.solid:hover{background:var(--ink);border-color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--glass)}
.btn.small{min-height:38px;padding:0 14px;font-size:15px}

/* hero */
.hero{padding:56px 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:center}
.hero h1{margin:0;font-weight:600;font-size:clamp(42px,5.4vw,76px);line-height:.95;letter-spacing:-.035em}
.hero h1 .light{font-weight:400;color:var(--ink2)}
.lede{margin:24px 0 0;max-width:44ch;font-size:20px;color:var(--ink2)}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.stage{position:relative;height:520px}
.stage canvas{width:100%;height:100%;cursor:grab}
.stage canvas:active{cursor:grabbing}
.stage .tag{position:absolute;left:12px;bottom:10px;right:12px}
.stage .loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink2);font-family:var(--serif);font-style:italic}

/* mint card */
.mint{margin-top:34px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;grid-template-columns:1fr;gap:16px;max-width:560px}
.mint .stats{display:flex;gap:28px;flex-wrap:wrap}
.mint .stat span{display:block;font-size:14px;color:var(--ink2)}
.mint .stat strong{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.progress{grid-column:1/-1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;background:var(--stain);width:0;transition:width .6s}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--glass);font-size:20px;cursor:pointer;color:var(--ink)}
.qty output{min-width:28px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.mint .actions{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mint .actions .btn{flex:1;max-width:260px}
.status{grid-column:1/-1;font-size:15px;color:var(--ink2);min-height:1.4em;margin:0}
.status.err{color:#9b1c4a}
.status.ok{color:#2c6b3f}

section{padding:110px 0}
h2{margin:0 0 18px;font-weight:600;font-size:clamp(34px,4.2vw,56px);line-height:1;letter-spacing:-.03em;max-width:18ch}
.intro{max-width:58ch;color:var(--ink2);margin:0}

/* my neurons */
.mine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:32px}
.mini{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:left;cursor:pointer;font-family:var(--sans);color:var(--ink)}
.mini:hover{border-color:var(--stain-soft)}
.mini strong{display:block;font-size:17px}
.mini small{font-family:var(--serif);font-style:italic;color:var(--ink2);font-size:14px}
.mini canvas{width:100%;height:60px;margin-top:8px}

/* neuron viewer */
.viewer{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;margin-top:40px;align-items:start}
.lookup{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px}
.lookup label{font-size:16px;color:var(--ink2)}
.lookup input{height:46px;width:140px;border-radius:999px;border:1.5px solid var(--line);padding:0 18px;font-family:var(--sans);font-size:17px;background:var(--paper);color:var(--ink)}
.slide{position:relative;background:linear-gradient(135deg,var(--slide1),var(--slide2));border:1px solid var(--line);border-radius:12px;aspect-ratio:3/1.2;display:grid;grid-template-columns:28% 1fr;overflow:hidden;box-shadow:0 1px 0 #fff inset,0 18px 40px -24px rgba(36,23,58,.35)}
.slide .label{background:repeating-linear-gradient(45deg,var(--frost1) 0 2px,var(--frost2) 2px 5px);border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.slide .label .id{font-weight:700;font-size:26px;letter-spacing:-.02em}
.slide .label .who{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink2);line-height:1.4}
.slide canvas{width:100%;height:100%}
.record{margin-top:18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px}
.record canvas{width:100%;height:120px}
.record .head{display:flex;justify-content:space-between;font-size:15px;color:var(--ink2);margin-bottom:6px}
.traits{margin:0;display:grid;grid-template-columns:1fr auto;border-top:1.5px solid var(--ink)}
.traits dt,.traits dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
.traits dt{color:var(--ink2)} .traits dd{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.pct{display:inline-block;margin-left:8px;font-size:13px;color:var(--stain);font-weight:600}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:52px;position:relative}
.steps svg.wire{position:absolute;left:0;right:0;top:15px;width:100%;height:30px;pointer-events:none}
.step{padding-right:36px}
.step .n{width:32px;height:32px;border-radius:50%;background:var(--glass);border:1.5px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:15px;position:relative;z-index:1}
.step h3{margin:24px 0 10px;font-size:26px;font-weight:600;letter-spacing:-.02em}
.step p{margin:0;color:var(--ink2);max-width:32ch}

/* cortex */
.field{background:var(--dark);color:var(--dark-ink)}
.field h2{color:#fff} .field .intro{color:var(--dark-ink2)}
.field .caption{color:#A99DC2} .field .caption b{color:var(--dark-ink)}
.cortex{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;margin-top:48px;align-items:start}
.picker{display:flex;flex-direction:column;gap:10px}
.picker .list{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto;padding-right:4px}
.unit{display:flex;justify-content:space-between;align-items:center;min-height:58px;padding:10px 14px;border-radius:10px;border:1px solid var(--dark-line);background:transparent;color:var(--dark-ink);font-family:var(--sans);font-size:16px;cursor:pointer;text-align:left;width:100%}
.unit[aria-pressed="true"]{background:var(--dark2);border-color:#B9A3DB}
.unit small{display:block;font-family:var(--serif);font-style:italic;font-size:14px;color:#A99DC2}
.unit .dot{width:12px;height:12px;border-radius:50%;border:1.5px solid #B9A3DB;flex-shrink:0}
.unit[aria-pressed="true"] .dot{background:var(--fire);border-color:var(--fire)}
.range{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--dark-ink2)}
.range input{width:100%;accent-color:#C9B8E6;height:40px}
.field .btn{border-color:var(--dark-ink);color:var(--dark-ink)}
.field .btn:hover{background:var(--dark-ink);color:var(--dark)}
.field .btn.solid{background:var(--dark-ink);color:var(--dark);border-color:var(--dark-ink)}
.field .btn.solid:hover{background:var(--fire);border-color:var(--fire);color:#fff}
.scope{background:#150D25;border:1px solid var(--dark-line);border-radius:14px;padding:16px 16px 10px}
.scope-head{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--dark-ink2);padding-bottom:10px}
.scope-body{display:grid;grid-template-columns:30px 1fr}
.layers{display:grid;grid-template-rows:repeat(6,1fr);font-family:var(--serif);font-style:italic;font-size:15px;color:#8F82AB}
.layers span{display:flex;align-items:center}
.scope canvas{width:100%;height:320px}
.bar{height:4px;border-radius:9px;background:var(--dark-line);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;width:0;background:var(--fire)}
.result{margin-top:14px;display:none;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:18px;align-items:center;padding:14px 16px;border-radius:12px;background:var(--dark2);border:1px solid #4A3970}
.result.show{display:grid}
.result div span{display:block;font-size:14px;color:#A99DC2}
.result div strong{font-weight:600;font-variant-numeric:tabular-nums;word-break:break-all;font-size:15px}
.fires{margin-top:28px}
.fires h3{font-size:18px;margin:0 0 10px;color:#fff}
.fires ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px;color:var(--dark-ink2)}

/* brain */
.brain{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:center}
.brain-stage{background:radial-gradient(circle at 50% 40%,#fff,#ECE7F5 70%);border:1px solid var(--line);border-radius:18px;height:460px;position:relative}
.brain-stage canvas{width:100%;height:100%;cursor:grab}
.legend{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:16px}
.legend i{width:14px;height:14px;border-radius:3px;background:var(--fire);flex-shrink:0}
.legend i.glass{background:#CFC2EA}
.toggles{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

/* ledger */
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:44px}
.col{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px}
.col h3{margin:0 0 6px;font-size:22px;font-weight:600}
.col ul{margin:0;padding:0;list-style:none}
.col li{padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink2)}
.col li:last-child{border-bottom:0}
.col h3::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:10px;vertical-align:2px}
.col.real h3::before{background:var(--stain)} .col.model h3::before{border:1.5px solid var(--stain)}

footer{border-top:1px solid var(--line);padding:52px 0 68px;background:var(--paper)}
footer .wrap{display:grid;grid-template-columns:1.1fr 2.2fr 1fr;gap:40px}
footer h4{margin:0 0 12px;font-size:16px;font-weight:600}
footer p,footer li{margin:0;font-size:14.5px;color:var(--ink2)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}

@media (max-width:960px){
  .nav nav{display:none}
  .hero-grid,.viewer,.brain,.cortex,.ledger{grid-template-columns:1fr}
  .stage{height:380px}
  .steps{grid-template-columns:1fr;gap:36px} .steps svg.wire{display:none}
  .result{grid-template-columns:1fr 1fr}
  footer .wrap{grid-template-columns:1fr}
  section{padding:80px 0}
  .mint{grid-template-columns:1fr}
  .mint .actions{justify-content:flex-start}
}
@media (max-width:520px){ .wrap{padding:0 20px} .chip{display:none} .brand span{display:none} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* 3D controls */
.stage .hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:13.5px;color:var(--ink2);margin:0;pointer-events:none}
.stage-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.slider{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink2);flex:1;min-width:180px}
.slider input{flex:1;accent-color:var(--stain);height:36px}
.slider span{white-space:nowrap}
.tip{position:fixed;z-index:50;pointer-events:none;background:#24173A;color:#fff;font-size:14px;padding:6px 10px;border-radius:8px;transform:translate(12px,12px);max-width:260px}
.explorer{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:28px;margin-top:36px;align-items:start}
.brain-stage{background:radial-gradient(circle at 50% 40%,var(--stage1),var(--stage2) 72%);border:1px solid var(--line);border-radius:18px;height:560px;position:relative;overflow:hidden}
.brain-stage canvas{width:100%;height:100%;cursor:grab;touch-action:none}
.views{position:absolute;top:12px;left:12px;display:flex;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px}
.views button{border:0;background:transparent;font-family:var(--sans);font-size:14px;padding:7px 12px;border-radius:999px;cursor:pointer;color:var(--ink)}
.views button:hover{background:var(--glass)}
.info{position:absolute;left:12px;right:12px;bottom:12px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:4px;max-width:420px}
.info strong{font-size:18px}
.info span{font-size:15px;color:var(--ink2)}
.linkish{justify-self:start;border:0;background:none;padding:0;margin-top:4px;font-family:var(--sans);font-size:14px;color:var(--stain);text-decoration:underline;cursor:pointer}
.panel{display:grid;gap:18px}
.panel fieldset{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0;background:var(--paper)}
.panel legend{font-weight:600;font-size:16px;padding:0 6px}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:6px 0 4px}
.seg button{border:1px solid var(--line);background:var(--glass);border-radius:10px;padding:9px 8px;font-family:var(--sans);font-size:14.5px;cursor:pointer;color:var(--ink)}
.seg button[aria-checked="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.regions{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;max-height:250px;overflow:auto}
.regions li{display:flex;align-items:center;gap:8px}
.regions .pick{flex:1;display:flex;align-items:center;gap:10px;border:1px solid transparent;background:none;border-radius:8px;padding:6px 8px;font-family:var(--sans);font-size:15px;cursor:pointer;text-align:left;color:var(--ink)}
.regions .pick:hover{background:var(--glass)}
.regions .pick[aria-pressed="true"]{border-color:var(--stain-soft);background:var(--glass)}
.regions .sw{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.regions .eye{border:0;background:none;cursor:pointer;width:32px;height:32px;border-radius:8px;color:var(--ink2);font-size:14px}
.regions .eye[aria-pressed="false"]{opacity:.35}
@media (max-width:960px){ .explorer{grid-template-columns:1fr} .brain-stage{height:420px} }

/* dark theme: follows the system, or data-theme on <html> */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --glass:#16101F; --paper:#201830; --ink:#EDE7F7; --ink2:#B4A9CB; --line:#382C4E; --stain:#A07BE0; --stain-soft:#5C4690;
    --stage1:#2A2040; --stage2:#16101F; --slide1:#2A2140; --slide2:#1E172E; --frost1:#2C2342; --frost2:#241C36; --navbg:rgba(22,16,31,.88);
  }
}
:root[data-theme="dark"]{
  --glass:#16101F; --paper:#201830; --ink:#EDE7F7; --ink2:#B4A9CB; --line:#382C4E; --stain:#A07BE0; --stain-soft:#5C4690;
  --stage1:#2A2040; --stage2:#16101F; --slide1:#2A2140; --slide2:#1E172E; --frost1:#2C2342; --frost2:#241C36; --navbg:rgba(22,16,31,.88);
}
body{background:var(--glass)}
.btn:hover{color:var(--glass)}
.btn.solid{color:#fff}
.banner{background:#24173A}
/* phones: keep content clear of system bars */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
.nav{top:env(safe-area-inset-top,0px)}

/* comfortable tap targets */
.nav nav a{padding:10px 2px}
.views button{min-height:40px;padding:0 14px}
.regions .pick{min-height:42px}
.regions .eye{width:42px;height:42px}
.brand{min-height:44px}
/* cortex: raster draws in */
#cx-canvas{transition:opacity .2s}
.hero .kicker{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink2);margin:0 0 18px}

.record canvas.sec{height:46px}
.fires li{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.verify{border:1px solid var(--dark-line);background:transparent;color:var(--dark-ink);border-radius:999px;padding:0 12px;min-height:34px;font-family:var(--sans);font-size:14px;cursor:pointer}
.verify:hover{border-color:#B9A3DB}
.vres.ok{color:#8FE3A8} .vres.bad{color:#FF8FA3}
/* contrast fixes (checked with axe in both themes) */
.banner b{color:#C9B8E6}
.seg button[aria-checked="true"]{color:var(--glass)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn.solid{color:#16101F} }
:root[data-theme="dark"] .btn.solid{color:#16101F}
footer h3.fh{margin:0 0 12px;font-size:16px;font-weight:600}
footer ul a{display:inline-block;padding:9px 0;min-height:40px}

.btn.icon{width:40px;padding:0;font-size:22px;line-height:1}
.lookup-actions{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#24173A;color:#fff;padding:10px 16px;border-radius:999px;font-size:15px;z-index:60}
@media (max-width:700px){ .lookup-actions{margin-left:0;width:100%} }

/* cortex tabs + 3D view */
.scope-head{align-items:center}
.scope-tabs{display:flex;gap:4px;background:#1f1535;border:1px solid var(--dark-line);border-radius:999px;padding:3px}
.scope-tabs button{border:0;background:transparent;color:var(--dark-ink2);font-family:var(--sans);font-size:14px;padding:0 14px;min-height:36px;border-radius:999px;cursor:pointer}
.scope-tabs button[aria-selected="true"]{background:var(--dark-ink);color:var(--dark)}
.scope-3d{position:relative;height:360px;border-radius:10px;background:radial-gradient(circle at 50% 45%,#261a40,#120b1f 75%)}
.scope-3d canvas{width:100%;height:100%;cursor:grab;touch-action:none}
.layer-key{position:absolute;left:10px;bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--dark-ink2)}
.layer-key i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-left:6px}
@media (max-width:520px){ .scope-head{flex-direction:column;align-items:flex-start;gap:8px} .scope-3d{height:300px} }

/* gallery */
.filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:28px}
.filters label{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink2)}
.filters select{height:42px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;padding:0 14px}
.g-count{margin-left:auto;font-family:var(--serif);font-style:italic;color:var(--ink2);font-size:15px}
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:22px}
.g-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:left;cursor:pointer;font-family:var(--sans);color:var(--ink);display:grid;gap:2px}
.g-card:hover{border-color:var(--stain-soft);transform:translateY(-1px)}
.g-card canvas{width:100%;height:54px;margin:4px 0 6px}
.g-card strong{font-size:16px}
.g-card small{font-family:var(--serif);font-style:italic;color:var(--ink2);font-size:14px}
.g-card .stat{font-size:14px;color:var(--ink2);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){ .g-card:hover{transform:none} }

/* names */
.namefm{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border:1px dashed var(--stain-soft);border-radius:14px;max-width:760px}
.namefm label{font-weight:600;font-size:15px}
.namefm input{height:42px;border-radius:999px;border:1.5px solid var(--line);padding:0 16px;font-family:var(--sans);font-size:16px;background:var(--paper);color:var(--ink);min-width:220px;flex:1}
.namefm .status{margin:0;grid-column:auto}
.vname{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:var(--stain);margin-top:4px;letter-spacing:0}

/* rarity */
.tier{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.01em;color:#fff;background:#8A8298}
.tier-legendary{background:linear-gradient(135deg,#A8326A,#9A4A1C)}
.tier-epic{background:#6D3FA8}
.tier-rare{background:#2F6FC9}
.tier-uncommon{background:#2C8A6B}
.tier-common{background:#6E667E}
.rarity{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:14px;min-height:28px}
.rarity .rank{font-size:15px;color:var(--ink2)} .rarity .rank b{color:var(--ink)}
.title1{font-size:14px;font-weight:600;color:var(--fire)}
.g-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.g-rank{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}
.g-title{font-size:13px;font-weight:600;color:var(--fire)}
.tier-uncommon{background:#23725A}
:root{--titlec:#A8326A}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--titlec:#FF9CC8} }
:root[data-theme="dark"]{--titlec:#FF9CC8}
.title1,.g-title{color:var(--titlec)}
.caption a{display:inline-block;padding:10px 0;margin:-10px 0}

/* listen */
.listen{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.listen .btn svg{flex-shrink:0}
.speed{display:flex;gap:4px;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:3px}
.speed button{border:0;background:transparent;color:var(--ink2);font-family:var(--sans);font-size:14px;padding:0 12px;min-height:36px;border-radius:999px;cursor:pointer}
.speed button[aria-checked="true"]{background:var(--ink);color:var(--glass)}
.listen-status{font-size:14px;color:var(--ink2)}
.record canvas.strip{height:40px;margin-top:8px}