/* Open Current design system: tokens + shared components, loaded last on every page. */
:root{
  /* palette: deep river night, river blues, one accent (aqua), semantic colors */
  --abyss:#06111b;--bed:#0a1824;--pool:#0f2130;--pool-2:#14293a;
  --foam:#e9f3f6;--silt:#a3b9c4;--mist:#7d95a3;
  --line:rgba(160,214,236,.11);--line-2:rgba(160,214,236,.22);
  --river-1:#0e3a5c;--river-2:#1d6fa5;--river-3:#4aa8e0;
  --aqua:#5ef2d6;--tide:#8a7dff;--ember:#ff7a59;
  --ok:#3ddc97;--warn:#ffb86b;--danger:#ff5d6c;
  --surface:linear-gradient(180deg,rgba(16,36,54,.82),rgba(10,24,36,.82));
  --surface-flat:rgba(6,17,27,.55);
  /* type: system stacks only, nothing downloaded */
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --text-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --fs-xs:.72rem;--fs-sm:.84rem;--fs-md:1rem;--fs-lg:1.2rem;--fs-xl:1.6rem;--fs-2xl:clamp(1.7rem,6vw,2.6rem);
  /* spacing (4px grid), radii, shadows, motion, layers */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-wave:6px 20px 20px 20px;--r-pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.25);--sh-2:0 10px 30px -12px rgba(0,0,0,.55);
  --dur-1:.12s;--dur-2:.22s;--dur-3:.4s;--ease:cubic-bezier(.2,.8,.2,1);
  --z-nav:50;--z-sheet:80;--z-toast:90;
  --tab-h:60px;--maxw:980px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --abyss:#f3f7fa;--bed:#ffffff;--pool:#e8f0f5;--pool-2:#dde8ef;
  --foam:#0b1d2c;--silt:#33505f;--mist:#4f6878;
  --line:rgba(12,52,84,.12);--line-2:rgba(12,52,84,.22);
  --aqua:#04756e;--tide:#5446c9;--ember:#b93e14;--ok:#0f7a4c;--warn:#94570a;--danger:#c0283a;
  --surface:linear-gradient(180deg,#ffffff,#f6fafc);--surface-flat:rgba(255,255,255,.8);
  --sh-2:0 10px 30px -14px rgba(12,52,84,.25);
  color-scheme:light;
}
@media (prefers-color-scheme:light){:root:not([data-theme]){
  --abyss:#f3f7fa;--bed:#ffffff;--pool:#e8f0f5;--pool-2:#dde8ef;--foam:#0b1d2c;--silt:#33505f;--mist:#4f6878;
  --line:rgba(12,52,84,.12);--line-2:rgba(12,52,84,.22);--aqua:#04756e;--tide:#5446c9;--ember:#b93e14;--ok:#0f7a4c;--warn:#94570a;--danger:#c0283a;
  --surface:linear-gradient(180deg,#ffffff,#f6fafc);--surface-flat:rgba(255,255,255,.8);color-scheme:light}}
html{-webkit-text-size-adjust:100%;scroll-padding-bottom:calc(var(--tab-h) + 20px)}
html,body{background-color:var(--abyss);color:var(--foam);font-family:var(--text-font)}
body{background-color:var(--abyss)}
:root[data-theme="light"] body,:root[data-theme="light"] html{background:var(--abyss)!important}
@media (prefers-color-scheme:light){:root:not([data-theme]) body{background:var(--abyss)!important}}
/* shared surfaces: one card language everywhere */
.panel,.card-in,.net,.res,.st,.ep,.eco a,.snaps a,.coin,.cbox{background:var(--surface)!important;border-color:var(--line)!important}
.panel,.res,.st,.ep{box-shadow:var(--sh-1)}
.pill{background:var(--surface-flat);color:var(--foam);border-color:var(--line-2)}
a.pill,button.pill{min-height:44px}
.pill.primary{background:linear-gradient(90deg,var(--aqua),color-mix(in srgb,var(--aqua) 60%,#fff));color:#03221c}
:root[data-theme="light"] .pill.primary{color:#fff;background:var(--aqua)}
input,select,textarea{background:var(--bed);color:var(--foam);border-color:var(--line-2)}
/* focus + motion */
:focus-visible{outline:2px solid var(--aqua)!important;outline-offset:2px!important;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--aqua);color:#03221c;padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{left:8px}
/* header (sub pages) */
.top{min-height:52px;gap:var(--s2)!important}
.top .name{white-space:nowrap}
.top .acts-r{display:flex;gap:6px;align-items:center;flex:none;min-width:0}
.top .acts-r .pill{min-height:40px;padding:0 12px;font-size:.78rem}
.ui-icon{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--line-2);background:var(--surface-flat);color:var(--foam);cursor:pointer;flex:none}
.ui-icon svg{width:20px;height:20px}
@media (max-width:400px){.top .name{font-size:1rem!important}.top img{width:32px!important;height:32px!important}.top .acts-r .pill{padding:0 10px;font-size:.74rem}}
@media (max-width:360px){.top .name em{display:none}}
/* desktop nav row */
.navlinks a{min-height:36px;display:inline-flex;align-items:center}
@media (max-width:759px){.navlinks{display:none!important}}
/* mobile bottom tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--abyss) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line-2)}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;color:var(--silt);text-decoration:none;font:600 .66rem/1 var(--text-font);background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tabbar svg{width:22px;height:22px}
.tabbar [aria-current="page"]{color:var(--aqua)}
.tabbar [aria-current="page"] svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--aqua) 60%,transparent))}
@media (min-width:760px){.tabbar{display:none}}
@media (max-width:759px){body{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}}
/* sheet (More) */
.sheet-bg{position:fixed;inset:0;z-index:var(--z-sheet);background:rgba(2,8,14,.55);opacity:0;pointer-events:none;transition:opacity var(--dur-2)}
.sheet-bg.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-sheet) + 1);max-width:560px;margin:0 auto;background:var(--bed);border:1px solid var(--line-2);border-bottom:0;border-radius:22px 22px 0 0;padding:10px 14px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform var(--dur-3) var(--ease);box-shadow:var(--sh-2);max-height:85dvh;overflow:auto}
.sheet.on{transform:none}
.sheet .grab{width:42px;height:5px;border-radius:99px;background:var(--line-2);margin:2px auto 10px}
.sheet h2{font:600 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin:12px 4px 8px}
.sheet .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sheet .grid a{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-height:76px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--foam);text-decoration:none;font-size:.8rem;font-weight:600;text-align:center;padding:6px}
.sheet .grid a svg{width:22px;height:22px;color:var(--aqua)}
.sheet .row2{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media (min-width:760px){.sheet{bottom:auto;top:70px;border-radius:22px;border-bottom:1px solid var(--line-2)}.sheet .grid{grid-template-columns:repeat(4,1fr)}}
/* page header pattern */
.pagehead{display:flex;align-items:center;gap:8px;font:600 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin:2px 0 6px}
.pagehead .live{display:inline-flex;align-items:center;gap:6px;color:var(--ok)}
.pagehead .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:oc-beat 2s infinite}
@keyframes oc-beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* disclaimer banner (Breaking, Coin Radar, Map, Stories) */
.warn,.disclaimer{border-radius:var(--r-wave)!important;border:1px solid color-mix(in srgb,var(--warn) 50%,transparent)!important;background:color-mix(in srgb,var(--warn) 9%,transparent)!important;color:var(--foam)!important}
/* chips, badges, skeleton, empty/error, toast */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--line-2);font:600 .64rem/1.4 var(--mono);color:var(--silt)}
.skel{background:linear-gradient(90deg,var(--pool) 0,var(--pool-2) 50%,var(--pool) 100%);background-size:200% 100%;animation:oc-sk 1.2s linear infinite;border-radius:var(--r-md);min-height:18px}
@keyframes oc-sk{to{background-position:-200% 0}}
.state{padding:22px 12px;text-align:center;color:var(--silt)}
.oc-toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;z-index:var(--z-toast);background:var(--foam);color:var(--abyss);padding:10px 16px;border-radius:var(--r-pill);font-weight:700;font-size:.85rem;transition:all var(--dur-2) var(--ease);pointer-events:none}
.oc-toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:760px){.oc-toast{bottom:24px}}
/* footer */
.oc-foot{max-width:var(--maxw);margin:28px auto 0;padding:18px 16px 26px;border-top:1px solid var(--line);color:var(--mist);font-size:.8rem;line-height:1.6}
.oc-foot nav{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:10px}
.oc-foot nav a{color:var(--silt);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.oc-foot nav a:hover{color:var(--aqua)}
.oc-ca{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 6px 5px 12px;max-width:100%;width:fit-content;background:var(--surface-flat)}
.oc-ca b{font:700 .72rem var(--mono);color:var(--foam)}
.oc-ca code{font:500 .66rem var(--mono);color:var(--silt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(52vw,360px)}
.oc-ca button{min-height:32px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;color:var(--foam);font:600 .7rem var(--text-font);padding:0 12px;cursor:pointer}
/* light-theme fixes for hard-coded dark details */
:root[data-theme="light"] .navlinks a,:root[data-theme="light"] .note{color:var(--silt)}
:root[data-theme="light"] h1 em,:root[data-theme="light"] .top .name em{color:var(--aqua)}
:root[data-theme="light"] .mapbox path{fill:#d5e3ec;stroke:#a9c2d2}
:root[data-theme="light"] .mapbox{background:#eef5f9}
:root[data-theme="light"] pre{background:#0b1d2c;color:#e9f3f6}
:root[data-theme="light"] .tot .n,:root[data-theme="light"] .hero .big em{-webkit-text-fill-color:var(--aqua);background:none}
.navlinks .navmore{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--silt);background:none;padding:6px 10px;border:1px dashed var(--line-2);border-radius:999px;cursor:pointer;min-height:36px}
.navlinks{gap:6px!important}
/* reels stays a dark cinema in both themes */
body[data-nofoot]{--abyss:#050f12;--foam:#eaf4ef;--silt:#9db6b0;background:#000!important;color:#eaf4ef}
@media (max-width:759px){.hero .tools{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}.hero .tools::-webkit-scrollbar{display:none}.hero .tools a{flex:none}}
/* disclaimer style shared by Coin Radar */
.disc{border-radius:var(--r-wave)!important;border:1px solid color-mix(in srgb,var(--ember) 55%,transparent)!important;background:color-mix(in srgb,var(--ember) 10%,transparent)!important;color:var(--foam)!important}
.disc b,.warn b{color:var(--foam)!important}
/* light theme: surfaces that were hard-coded dark */
:root[data-theme="light"] :is(.icon-btn,.ca-bar a,.source-toggle,.more,.speed,.story-pop,.tools a,.ms-k div,.rd-btn,.status div,.mstat div,.kp div,.stat,.sbox input,.dpick input,.oc-ca,.hostchip,.badge2){background:var(--bed)!important;color:var(--foam)}
:root[data-theme="light"] .dock{background:color-mix(in srgb,var(--abyss) 92%,transparent)!important}
:root[data-theme="light"] .card{background:linear-gradient(160deg,#ffffff,#f4f9fb)!important;box-shadow:0 1px 3px rgba(12,52,84,.08)}
:root[data-theme="light"] .card .body,:root[data-theme="light"] .card h2 a,:root[data-theme="light"] .card h2{color:var(--foam)}
:root[data-theme="light"] .hero .waves{opacity:.35}
:root[data-theme="light"] #topics button,:root[data-theme="light"] #langs button,:root[data-theme="light"] .chips button{background:var(--bed);color:var(--silt)}
:root[data-theme="light"] .ca-bar{background:var(--bed)!important}
:root[data-theme="light"] .ca-bar code{color:var(--silt)}
:root[data-theme="light"] dialog{background:var(--bed);color:var(--foam)}
:root[data-theme="light"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){background:#fff!important;color:var(--foam)!important;border-color:var(--line-2)!important}
:root[data-theme="light"] :is(input,textarea)::placeholder{color:var(--mist)}
:root[data-theme="light"] .nets span{filter:brightness(.55) saturate(1.5);background:#fff}
:root[data-theme="light"] #ca-copy{color:#fff!important;background:#04756e!important}

/* ==========================================================================
   Glass & glow layer (Nov 2026). Frosted chrome, neon-river edges, aurora.
   GPU-cheap: the aurora only animates transform/opacity, pauses when the tab
   is hidden, and is off for reduced motion and data saver.
   ========================================================================== */
:root{
  --glass:rgba(10,26,40,.58);--glass-strong:rgba(8,20,32,.78);--glass-edge:rgba(120,220,255,.16);
  --glow-a:rgba(94,242,214,.55);--glow-b:rgba(74,168,224,.5);--glow-c:rgba(138,125,255,.45);
  --edge-grad:linear-gradient(135deg,rgba(94,242,214,.55),rgba(74,168,224,.25) 40%,rgba(138,125,255,.4));
  --sh-glass:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -22px rgba(0,0,0,.75);
  --sh-glow:0 0 0 1px rgba(94,242,214,.22),0 0 24px -4px rgba(94,242,214,.35);
  --blur:saturate(160%) blur(16px);
  --z-aurora:-1;
}
:root[data-theme="light"]{
  --glass:rgba(255,255,255,.66);--glass-strong:rgba(255,255,255,.86);--glass-edge:rgba(12,84,120,.16);
  --glow-a:rgba(4,117,110,.35);--glow-b:rgba(29,111,165,.3);--glow-c:rgba(84,70,201,.25);
  --edge-grad:linear-gradient(135deg,rgba(4,117,110,.45),rgba(29,111,165,.2) 40%,rgba(84,70,201,.3));
  --sh-glass:0 1px 0 rgba(255,255,255,.7) inset,0 14px 34px -22px rgba(12,52,84,.35);
  --sh-glow:0 0 0 1px rgba(4,117,110,.25),0 0 20px -6px rgba(4,117,110,.35);
}
/* aurora: two soft light fields drifting very slowly behind everything */
body::before,body::after{content:"";position:fixed;z-index:var(--z-aurora);pointer-events:none;inset:-25vmax;opacity:.55;will-change:transform;contain:strict}
body::before{background:radial-gradient(38vmax 30vmax at 22% 18%,rgba(29,111,165,.38),transparent 70%),radial-gradient(30vmax 26vmax at 80% 30%,rgba(94,242,214,.16),transparent 70%);animation:oc-drift-a 48s ease-in-out infinite alternate}
body::after{background:radial-gradient(34vmax 28vmax at 70% 82%,rgba(138,125,255,.20),transparent 70%),radial-gradient(26vmax 22vmax at 15% 75%,rgba(14,58,92,.45),transparent 70%);animation:oc-drift-b 64s ease-in-out infinite alternate;opacity:.6}
:root[data-theme="light"] body::before{opacity:.35}:root[data-theme="light"] body::after{opacity:.3}
@keyframes oc-drift-a{from{transform:translate3d(-3%,-2%,0) rotate(0deg)}to{transform:translate3d(4%,3%,0) rotate(8deg)}}
@keyframes oc-drift-b{from{transform:translate3d(3%,2%,0) scale(1)}to{transform:translate3d(-4%,-3%,0) scale(1.08)}}
html.oc-hidden body::before,html.oc-hidden body::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none!important}}
body.saver::before,body.saver::after,html.oc-saver body::before,html.oc-saver body::after{animation:none!important;opacity:.35}
body[data-bare]::before,body[data-bare]::after{display:none}

/* frosted chrome: header, dock, tab bar, sheets, pills, toasts (blur only on fixed/sticky layers) */
.top,.hero .brand,.dock,.tabbar,.sheet,.oc-sheet,.oc-toast,#toast,.banner,dialog{-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.dock{background:var(--glass)!important;border-bottom:1px solid var(--glass-edge)!important;box-shadow:var(--sh-glass)}
.tabbar{background:var(--glass-strong)!important;border-top:1px solid var(--glass-edge)!important}
.top{background:color-mix(in srgb,var(--abyss) 62%,transparent)!important;border-bottom:1px solid var(--glass-edge)}
dialog{background:var(--glass-strong)!important;border:1px solid var(--glass-edge)!important;box-shadow:var(--sh-glass)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dock,.tabbar,.top,dialog,.banner{background:var(--bed)!important}
}
/* glass surfaces + gradient edge (no blur on scrolling cards: keeps 60fps) */
.panel,.card-in,.net,.res,.st,.ep,.eco a,.snaps a,.coin,.cbox,.spike{position:relative;background:linear-gradient(180deg,rgba(18,40,60,.72),rgba(9,22,34,.72))!important;border:1px solid var(--glass-edge)!important;box-shadow:var(--sh-glass)!important}
:root[data-theme="light"] :is(.panel,.card-in,.net,.res,.st,.ep,.eco a,.snaps a,.coin,.cbox,.spike){background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,250,252,.88))!important}
.panel::before,.card-in::before,.coin::before,.res::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--edge-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;pointer-events:none;transition:opacity var(--dur-2) var(--ease)}
@media (hover:hover){
  .panel:hover::before,.card-in:hover::before,.coin:hover::before,.res:hover::before{opacity:.9}
  .card-in:hover,.coin:hover,.res:hover{box-shadow:var(--sh-glass),0 0 28px -10px var(--glow-a)!important}
}
/* micro-interactions: press + hover glow, transform/opacity only */
:is(.pill,.ui-icon,.icon-btn,.chip,.source-toggle,.speed button,.live-pill,.auto-pill,.tabbar a,.tabbar button,.rd-btn,.more,.banner,#ca-copy){transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2),background-color var(--dur-2)}
:is(.pill,.ui-icon,.icon-btn,.chip,.source-toggle,.speed button,.live-pill,.auto-pill,.rd-btn,.more,.banner,#ca-copy):active{transform:scale(.96)}
@media (hover:hover){:is(.pill,.ui-icon,.icon-btn,.chip,.live-pill,.auto-pill,.rd-btn,.more,#ca-copy):hover{box-shadow:var(--sh-glow);border-color:color-mix(in srgb,var(--aqua) 55%,transparent)}}
.tabbar [aria-current="page"],.tabbar .on{color:var(--aqua)}
.tabbar [aria-current="page"] svg,.tabbar .on svg{filter:drop-shadow(0 0 6px var(--glow-a))}
/* live indicators: tasteful glow pulse (opacity/transform on a pseudo ring) */
.beacon,.pagehead .live i,.live-dot,.bb-dot,.herenow .dot{position:relative}
.beacon::after,.live-dot::after,.bb-dot::after,.herenow .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 2px currentColor;color:var(--ember);opacity:0;animation:oc-ping 2.4s var(--ease) infinite}
.herenow .dot::after,.live-dot::after{color:var(--aqua)}
@keyframes oc-ping{0%{transform:scale(.6);opacity:.7}80%,100%{transform:scale(1.8);opacity:0}}
html.oc-hidden :is(.beacon,.live-dot,.bb-dot,.herenow .dot)::after{animation-play-state:paused}
/* card entry: fade/slide via transform only (no layout change) */
.live-in{animation:oc-enter .5s var(--ease) both}
@keyframes oc-enter{from{opacity:0;transform:translate3d(0,-8px,0) scale(.985)}to{opacity:1;transform:none}}
/* refined type */
h1,h2,.top .name{letter-spacing:-.01em;text-wrap:balance}
p,li{text-wrap:pretty}
.big,.k b,.kp b,.status b,#pps,#tps,.tot .n,[id^="st-"],[id^="k-"]{font-variant-numeric:tabular-nums}
h1 em,.top .name em{background:linear-gradient(90deg,var(--aqua),var(--river-3) 55%,var(--tide));-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] h1 em,:root[data-theme="light"] .top .name em{background:linear-gradient(90deg,#04756e,#1d6fa5);-webkit-background-clip:text;background-clip:text;color:transparent}
/* logo halo */
.hero .mark,.top img[src*="logo"]{filter:drop-shadow(0 0 10px rgba(74,168,224,.45))}
/* new-posts pill: always fixed so it never moves the page */
.banner{position:fixed!important;left:50%!important;transform:translateX(-50%);top:auto!important;bottom:calc(var(--tab-h) + 18px + env(safe-area-inset-bottom))!important;z-index:var(--z-toast)!important;margin:0!important;background:linear-gradient(90deg,rgba(94,242,214,.92),rgba(74,168,224,.92))!important;color:#03221c!important;box-shadow:0 10px 30px -10px rgba(94,242,214,.6)!important;min-height:44px}
.banner:active{transform:translateX(-50%) scale(.96)}
@media (min-width:760px){.banner{bottom:28px!important}}
/* auto-flow toggle */
.auto-pill{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-flat);color:var(--silt);font:600 .74rem var(--text-font);cursor:pointer}
.auto-pill[aria-pressed="true"]{color:#03221c;background:var(--aqua);border-color:var(--aqua)}
:root[data-theme="light"] .auto-pill[aria-pressed="true"]{color:#fff}
/* page transitions: soft cross-fade + rise (View Transitions; browsers without it just navigate) */
::view-transition-old(root){animation:oc-vt-out .2s var(--ease) both}
::view-transition-new(root){animation:oc-vt-in .28s var(--ease) both}
@keyframes oc-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes oc-vt-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}}
.banner{white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}

/* ==========================================================================
   Degen layer (Nov 2026): acid accents, terminal numerics, grain, ticker tape,
   bento dashboard, number flashes, wave burst. Transform/opacity only.
   ========================================================================== */
:root{--acid:#b6ff3b;--dn:#ff5d7a;--up:var(--acid)}
:root[data-theme="light"]{--acid:#2f6b00;--dn:#c0283a}
@media (prefers-color-scheme:light){:root:not([data-theme]){--acid:#2f6b00;--dn:#c0283a}}
/* grain: static SVG noise, data URI (no request), barely visible */
html::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="light"]::after{opacity:.035}
body[data-bare]::after,html[data-bare]::after{display:none}
/* oversized display headings on pages */
body h1{font-size:clamp(2.1rem,9vw,3.6rem);font-weight:700;letter-spacing:-.035em;line-height:.98}
/* terminal numerics */
.num,.tape,.bento small,.tile ol{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ticker tape */
.tape{position:relative;margin:12px 0 0;height:30px;overflow:hidden;border-radius:10px;border:1px solid var(--line-2);
  background:rgba(3,10,14,.6);color:var(--foam);font-size:12px;font-weight:600;line-height:28px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
:root[data-theme="light"] .tape{background:rgba(255,255,255,.75)}
.tape-track{display:flex;width:max-content;animation:oc-tape 50s linear infinite;will-change:transform}
.tape:hover .tape-track{animation-play-state:paused}
.tape-run{display:flex;flex:none;white-space:nowrap}
.tape-run span{padding:0 9px}
.tape .sep{color:var(--aqua);opacity:.6;padding:0 2px}
.tape b{color:var(--foam)}
.acid,.tape i.acid{color:var(--acid);font-style:normal}
em.up,.tape em.up{color:var(--acid);font-style:normal}
em.dn,.tape em.dn{color:var(--dn);font-style:normal}
@keyframes oc-tape{to{transform:translateX(-50%)}}
html.oc-hidden .tape-track{animation-play-state:paused}
/* bento dashboard */
.bento{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:96px 122px 48px;gap:8px;margin-top:10px}
.tile{position:relative;overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:16px;
  background:var(--surface,var(--pool));border:1px solid var(--line-2);color:var(--foam);text-decoration:none;
  transition:transform .15s ease,border-color .2s,box-shadow .2s}
.tile:hover{border-color:color-mix(in srgb,var(--aqua) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--aqua) 25%,transparent),0 10px 30px -12px color-mix(in srgb,var(--aqua) 45%,transparent)}
.tile:active{transform:scale(.985)}
.tile small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.t-pulse,.t-break{grid-column:1/-1}
.t-pulse{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;column-gap:14px}
.t-pulse small{grid-column:1/-1}
.t-pulse b{font-size:clamp(30px,9vw,42px);line-height:1;font-weight:800;letter-spacing:-.03em;align-self:center}
.t-pulse canvas{grid-column:2;grid-row:2/4;display:block;width:100%;height:46px;align-self:center}
.t-pulse em{font-style:normal;font-size:11px;color:var(--silt)}
.t-pulse::before{content:"";position:absolute;right:-40px;top:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acid) 22%,transparent),transparent 70%);pointer-events:none}
.tile ol{list-style:none;margin:4px 0 0;padding:0;font-size:12.5px}
.tile ol li{display:flex;align-items:center;gap:7px;line-height:24px;min-width:0}
.tile ol .rk{color:var(--mist);width:10px}
.tile ol b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-empty{color:var(--mist);font-size:11.5px;line-height:1.35!important;margin:4px 0 0;font-family:var(--text-font)}
#d-langs{display:flex;flex-direction:column;gap:5px;margin-top:5px}
.lbar{display:grid;grid-template-columns:minmax(0,62px) 1fr 30px;align-items:center;gap:6px;font-size:11.5px}
.lbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbar i{display:block;height:6px;width:var(--w);border-radius:3px;background:linear-gradient(90deg,var(--aqua),var(--acid))}
.lbar b{font-family:var(--mono);font-weight:600;color:var(--silt);text-align:right}
.t-break{flex-direction:row;align-items:center;gap:10px}
.t-break small{flex:none}
.t-break span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.t-break .hot{color:var(--dn);animation:oc-ping 1.6s ease-out infinite}
@media (min-width:760px){.bento{grid-template-columns:1.35fr 1.15fr 1fr;grid-template-rows:124px 46px}.t-pulse{grid-column:auto}}
/* green / red flash on changing numbers (color only, no layout) */
.num.up{animation:oc-fl-up .9s ease-out}
.num.dn{animation:oc-fl-dn .9s ease-out}
@keyframes oc-fl-up{from{color:var(--acid);text-shadow:0 0 14px color-mix(in srgb,var(--acid) 60%,transparent)}}
@keyframes oc-fl-dn{from{color:var(--dn);text-shadow:0 0 14px color-mix(in srgb,var(--dn) 60%,transparent)}}
/* premium $OPC bar */
.ca-bar{box-shadow:0 0 0 1px color-mix(in srgb,var(--aqua) 30%,transparent),0 12px 36px -16px color-mix(in srgb,var(--acid) 45%,transparent)}
.ca-bar .ca-chart{color:var(--acid)!important;border-color:color-mix(in srgb,var(--acid) 45%,transparent)!important}
/* wave burst on copy / share */
.oc-burst{position:fixed;width:0;height:0;pointer-events:none;z-index:2147482000}
.oc-burst i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;border:2px solid var(--aqua);opacity:0;animation:oc-burst .7s cubic-bezier(.2,.7,.3,1) forwards}
.oc-burst i:nth-child(3n){border-color:var(--acid)}
.oc-burst i:nth-child(4n){border-radius:2px;border-color:#4aa8e0}
@keyframes oc-burst{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2)}}
@media (prefers-reduced-motion:reduce){
  .tape-track{animation:none}.tape{overflow-x:auto}
  .num.up,.num.dn,.t-break .hot{animation:none}
  .oc-burst{display:none}
}
body.saver .tape-track,html.oc-saver .tape-track{animation:none}
/* fix: the More sheet stayed visible on desktop (top-anchored, translateY only moved it down) */
.sheet{visibility:hidden;transition:transform var(--dur-3) var(--ease),opacity var(--dur-2),visibility 0s linear var(--dur-3)}
.sheet.on{visibility:visible;transition:transform var(--dur-3) var(--ease),opacity var(--dur-2),visibility 0s}
@media (min-width:760px){.sheet{transform:translateY(-12px);opacity:0}.sheet.on{transform:none;opacity:1}}

/* ==========================================================================
   Art tab (Nov 2026): masterpiece of the moment, NFT corner, gallery layout
   ========================================================================== */
.art-panel{margin:14px 0 6px;display:grid;gap:12px}
.art-panel[hidden]{display:none}
.art-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.art-head h2{margin:0;font-family:var(--display);font-size:clamp(1.9rem,8vw,3rem);line-height:1;letter-spacing:-.035em;font-weight:700}
.art-head h2 em{font-style:italic;background:linear-gradient(90deg,#ff9de2,var(--aqua),var(--acid));-webkit-background-clip:text;background-clip:text;color:transparent}
.art-head p{margin:6px 0 0;color:var(--silt);font-size:.86rem;line-height:1.45;max-width:60ch}
.art-head .auto-pill{flex:none;position:static;transform:none}
.mp{display:grid;grid-template-columns:1fr;gap:10px;padding:10px;border-radius:18px;background:var(--surface,var(--pool));border:1px solid var(--line-2);position:relative;overflow:hidden}
.mp::before{content:"";position:absolute;inset:-40% -10% auto auto;width:60%;height:120%;background:radial-gradient(circle,color-mix(in srgb,#ff9de2 18%,transparent),transparent 70%);pointer-events:none}
.mp-img{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#05080c}
.mp-img img{width:100%;height:100%;object-fit:contain;display:block}
.mp-img.sk{background:linear-gradient(90deg,var(--pool),var(--pool-2),var(--pool));background-size:200% 100%;animation:oc-sk 1.4s linear infinite}
@keyframes oc-sk{to{background-position:-200% 0}}
.mp-saver{color:var(--mist);font-size:.8rem;padding:20px;text-align:center}
.mp-meta{display:flex;flex-direction:column;gap:3px;min-width:0;position:relative}
.mp-meta small{font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.mp-meta b{font-family:var(--display);font-size:1.25rem;line-height:1.15}
.mp-meta span{color:var(--silt);font-size:.85rem}
.mp-meta .mp-mus{font-family:var(--mono);font-size:.75rem;color:var(--aqua)}
.mp-meta .src-link{margin-top:6px;align-self:flex-start}
@media (min-width:760px){.mp{grid-template-columns:1.4fr 1fr;align-items:center}.mp-img{aspect-ratio:16/10}}
.mp-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;min-height:58px}
.mp-strip button{flex:none;max-width:200px;text-align:left;border:1px solid var(--line-2);background:var(--surface,var(--pool));color:var(--foam);border-radius:12px;padding:8px 11px;font:600 .8rem/1.25 var(--text-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.mp-strip button small{display:block;font:500 .7rem var(--text-font);color:var(--mist);overflow:hidden;text-overflow:ellipsis}
.mp-strip button:hover{border-color:color-mix(in srgb,#ff9de2 55%,transparent)}
.nft{padding:12px;border-radius:18px;background:var(--surface,var(--pool));border:1px solid var(--line-2)}
.nft h3{margin:0;font-size:1rem;display:flex;gap:8px;align-items:baseline}
.nft h3 small{font:600 10.5px var(--mono);color:var(--mist);text-transform:uppercase;letter-spacing:.08em}
.nfa{margin:4px 0 8px;font-size:.76rem;color:var(--warn,#f7b955);line-height:1.4}
.nft-top{display:flex;flex-wrap:wrap;gap:6px;min-height:26px}
.chip-s{font:600 .74rem var(--mono);padding:3px 8px;border-radius:99px;border:1px solid var(--line-2);color:var(--silt)}
.chip-s b{color:var(--acid)}
.nft-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.nft-list li{border-top:1px solid var(--line);padding-top:8px;font-size:.84rem;line-height:1.4;min-width:0}
.nft-list li a{color:var(--foam);text-decoration:none;overflow-wrap:anywhere}
.nft-list li a:hover{color:var(--aqua)}
.nft-by{font:600 .72rem var(--mono);color:var(--mist);margin-bottom:2px}
.nft-by b{color:var(--aqua);text-transform:capitalize}
.nft-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.host-chip{font:600 .72rem var(--mono)!important;padding:4px 9px;min-height:24px;display:inline-flex;align-items:center;border-radius:99px;border:1px solid color-mix(in srgb,var(--acid) 45%,transparent);color:var(--acid)!important}
/* gallery layout: CSS grid of images, aspect ratio reserved (no layout shift), text trimmed to the credit line */
body.art-gal main.feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
@media (min-width:760px){body.art-gal main.feed{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){body.art-gal main.feed{grid-template-columns:repeat(4,minmax(0,1fr))}}
body.art-gal main.feed > :not(article.card){grid-column:1/-1}
body.art-gal main.feed > article.card{margin:0;contain-intrinsic-size:auto 260px}
body.art-gal main.feed article.card .card-in{padding:8px}
body.art-gal main.feed article.card h2,body.art-gal main.feed article.card h3,body.art-gal main.feed article.card .body,body.art-gal main.feed article.card .trail,body.art-gal main.feed article.card .story-chip,body.art-gal main.feed article.card .tr-link,body.art-gal main.feed article.card .lang-badge,body.art-gal main.feed article.card time{display:none}
body.art-gal main.feed article.card .media{aspect-ratio:1/1;margin:6px 0 0;border-radius:10px;overflow:hidden;cursor:zoom-in}
body.art-gal main.feed article.card .media img{width:100%;height:100%;object-fit:cover}
body.art-gal main.feed article.card:not(:has(.media)) h2,body.art-gal main.feed article.card:not(:has(.media)) h3{display:block;font-size:.95rem}
body.art-gal main.feed article.card .card-meta{flex-wrap:wrap;font-size:.72rem}
body.art-gal main.feed article.card .by{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.art-gal main.feed article.card .card-foot{margin-top:6px;font-size:.72rem}
body.art-gal main.feed article.card .card-foot .acts{display:none}
body.art-gal .timeline,body.art-gal .marker{display:none}
.art-lb{border:0;padding:0;background:transparent;max-width:min(96vw,1100px);max-height:94vh;color:var(--foam)}
.art-lb::backdrop{background:rgba(2,6,10,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.art-lb figure{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.art-lb img{max-width:96vw;max-height:80vh;object-fit:contain;border-radius:12px;background:#000}
.art-lb figcaption{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;font-size:.85rem;background:var(--bed);border:1px solid var(--line-2);border-radius:14px;padding:8px 12px}
body.art-on .bento,body.art-on .tape{display:none}
body.art-gal main.feed{padding-left:0!important}
body.art-gal main.feed::before,body.art-gal main.feed article.card::before,body.art-gal main.feed article.card::after{display:none}
body.art-gal main.feed article.card{padding:0!important;border-radius:14px!important;box-shadow:none}
body.art-gal main.feed article.card .card-in{padding:8px 9px 7px!important;border:0!important;background:none!important;box-shadow:none!important}
body.art-gal main.feed article.card .media{margin:6px -1px 0}
body.art-gal main.feed article.card .src-badge{font-size:.66rem}

/* quiet $OPC mention on landing and about */
.opc-mention{margin:20px 0 0;padding:10px 0 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;line-height:1.55;color:var(--mist);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.opc-mention code{font:inherit;color:var(--silt);word-break:break-all}
.opc-mention button{flex:none;border:1px solid var(--line);border-radius:8px;padding:3px 8px;font:600 .7rem var(--text-font);background:transparent;color:var(--silt);cursor:pointer}
.opc-mention button:hover{border-color:var(--silt);color:var(--foam)}
.opc-mention .opc-naf{flex:1 0 100%;margin:0;color:var(--mist);font-size:.7rem}