:root{
  --bg0:#030b13;
  --bg1:#02060a;
  --panel0:#06101a;
  --panel1:#040a10;
  --surface0: rgba(6,16,26,.80);
  --surface1: rgba(4,10,16,.58);
  --stage-bg:#030603;

  --neon-rgb: 0,229,255;
  --neon2-rgb: 124,77,255;
  --bad-rgb: 255,77,125;
  --text-rgb: 216,246,255;

  --neon: rgb(var(--neon-rgb));
  --neon2: rgb(var(--neon2-rgb));
  --bad: rgb(var(--bad-rgb));
  --text: rgb(var(--text-rgb));
  --muted: rgba(var(--text-rgb), .70);

  --grid: rgba(var(--neon-rgb), .10);
  --grid2: rgba(var(--neon2-rgb), .07);

  --glow-outer: .24;
  --glow-inner: .16;
  --edge-weak: .28;
  --edge: .42;
  --edge-strong: .78;

  --scan:.07;
  --scanline-thick: 1px;
  --scanline-step: 3px;
  --scanline-color: rgba(255,255,255,.04);

  --bg-overlay: none;
  --bg-overlay-size: auto;
  --bg-overlay-pos: 0 0;
  --bg-overlay-opacity: 0;
  --bg-overlay-blend: screen;
  --bg-overlay-blur: 0px;
  --bg-overlay-sat: 1.35;
  --bg-overlay-anim: none;

  --fx-img: none;
  --fx-opacity: 0;
  --fx-size: cover;
  --fx-pos: 50% 50%;
  --fx-repeat: no-repeat;
  --fx-blend: screen;
  --fx-filter: none;
  --fx-anim: none;

  --frame-overlay:
    linear-gradient(90deg, transparent 0 20%, var(--grid) 20% 21%, transparent 21% 40%, var(--grid) 40% 41%, transparent 41% 60%, var(--grid) 60% 61%, transparent 61% 80%, var(--grid) 80% 81%, transparent 81% 100%),
    linear-gradient(0deg, transparent 0 20%, var(--grid) 20% 21%, transparent 21% 40%, var(--grid) 40% 41%, transparent 41% 60%, var(--grid) 60% 61%, transparent 61% 80%, var(--grid) 80% 81%, transparent 81% 100%);
  --frame-overlay-opacity: .84;
  --frame-overlay-mask: linear-gradient(#000, transparent 70%);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html[data-theme="tron"]{
  --glow-outer: .30;
  --glow-inner: .20;
  --edge-weak: .34;
  --edge: .50;
  --scan:.06;
  --fx-img: url("/static/img/calc-theme-tron.svg?v=20260131-3");
  --fx-opacity: .50;
  --fx-filter: drop-shadow(0 0 20px rgba(var(--neon-rgb), .26)) drop-shadow(0 0 42px rgba(var(--neon2-rgb), .16));
  --fx-anim: drift 26s ease-in-out infinite;

  --bg-overlay:
    repeating-linear-gradient(90deg, rgba(var(--neon-rgb), .11) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(var(--neon-rgb), .08) 0 1px, transparent 1px 84px),
    radial-gradient(900px 520px at 70% 15%, rgba(var(--neon2-rgb), .16) 0%, transparent 62%),
    radial-gradient(900px 520px at 20% 80%, rgba(var(--neon-rgb), .16) 0%, transparent 62%);
  --bg-overlay-opacity: .36;
  --bg-overlay-anim: drift 26s ease-in-out infinite;
}

html[data-theme="ares"]{
  --bg0:#09060c;
  --bg1:#020104;
  --panel0:#120a06;
  --panel1:#070304;
  --surface0: rgba(18,8,6,.86);
  --surface1: rgba(6,2,2,.64);
  --stage-bg:#070204;
  --neon-rgb: 255,140,0;
  --neon2-rgb: 255,0,98;
  --bad-rgb: 255,70,70;
  --text-rgb: 255,240,228;
  --glow-outer: .32;
  --glow-inner: .20;
  --edge-weak: .34;
  --edge: .54;
  --scan:.06;

  --bg-overlay:
    repeating-linear-gradient(135deg, rgba(var(--neon-rgb), .16) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(45deg, rgba(var(--neon2-rgb), .12) 0 1px, transparent 1px 26px),
    radial-gradient(900px 520px at 50% 15%, rgba(var(--neon2-rgb), .18) 0%, transparent 62%);
  --bg-overlay-opacity: .30;
  --bg-overlay-anim: drift 18s ease-in-out infinite;

  --frame-overlay:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(var(--neon-rgb), .16) 14px 16px),
    linear-gradient(180deg, rgba(var(--neon2-rgb), .10), transparent 60%);
  --frame-overlay-opacity: .60;

  --fx-img: url("/static/img/calc-theme-ares.svg?v=20260131-3");
  --fx-opacity: .52;
  --fx-filter: drop-shadow(0 0 22px rgba(var(--neon-rgb), .22)) drop-shadow(0 0 40px rgba(var(--neon2-rgb), .12));
  --fx-anim: drift 18s ease-in-out infinite;
}

html[data-theme="doom"]{
  --bg0:#0b0503;
  --bg1:#020101;
  --panel0:#160a06;
  --panel1:#060202;
  --surface0: rgba(20,9,6,.88);
  --surface1: rgba(6,2,2,.66);
  --stage-bg:#080202;
  --neon-rgb: 255,110,0;
  --neon2-rgb: 250,220,90;
  --bad-rgb: 255,0,0;
  --text-rgb: 255,236,224;
  --glow-outer: .30;
  --glow-inner: .20;
  --edge-weak: .34;
  --edge: .52;
  --scan:.05;

  --bg-overlay:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(900px 520px at 65% 10%, rgba(var(--neon-rgb), .20) 0%, transparent 62%),
    radial-gradient(800px 520px at 30% 95%, rgba(var(--bad-rgb), .16) 0%, transparent 62%);
  --bg-overlay-size: 44px 44px, auto, auto;
  --bg-overlay-pos: 0 0, 0 0, 0 0;
  --bg-overlay-opacity: .24;
  --bg-overlay-anim: drift 16s ease-in-out infinite;

  --frame-overlay:
    repeating-linear-gradient(0deg, rgba(var(--neon2-rgb), .10) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(var(--neon-rgb), .08) 0 1px, transparent 1px 34px);
  --frame-overlay-opacity: .46;

  --fx-img: url("/static/img/calc-theme-doom.svg?v=20260131-3");
  --fx-opacity: .56;
  --fx-filter: drop-shadow(0 0 26px rgba(var(--neon-rgb), .22)) drop-shadow(0 0 50px rgba(var(--bad-rgb), .10));
  --fx-anim: drift 16s ease-in-out infinite;
}

html[data-theme="lightning"]{
  --bg0:#04060f;
  --bg1:#01030a;
  --panel0:#070a1a;
  --panel1:#030410;
  --surface0: rgba(6,10,24,.86);
  --surface1: rgba(2,4,12,.64);
  --stage-bg:#02040d;
  --neon-rgb: 80,220,255;
  --neon2-rgb: 150,120,255;
  --bad-rgb: 255,220,90;
  --text-rgb: 220,245,255;
  --glow-outer: .34;
  --glow-inner: .22;
  --edge-weak: .36;
  --edge: .56;
  --scan:.06;

  --bg-overlay:
    conic-gradient(from 220deg at 70% 20%, rgba(var(--neon-rgb), .18), transparent 18%, rgba(var(--neon2-rgb), .16), transparent 55%, rgba(var(--neon-rgb), .18)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 30px),
    radial-gradient(900px 520px at 30% 10%, rgba(var(--neon-rgb), .20) 0%, transparent 62%);
  --bg-overlay-opacity: .22;
  --bg-overlay-anim: drift 14s ease-in-out infinite;

  --frame-overlay:
    repeating-linear-gradient(120deg, rgba(var(--neon-rgb), .14) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(60deg, rgba(var(--neon2-rgb), .12) 0 1px, transparent 1px 28px);
  --frame-overlay-opacity: .44;

  --fx-img: url("/static/img/calc-theme-lightning.svg?v=20260131-3");
  --fx-opacity: .62;
  --fx-filter: drop-shadow(0 0 26px rgba(var(--neon-rgb), .28)) drop-shadow(0 0 56px rgba(var(--neon2-rgb), .18));
  --fx-anim: storm 2.6s ease-in-out infinite;
}

html[data-theme="nebula"]{
  --bg0:#08051a;
  --bg1:#020108;
  --panel0:#0d0a28;
  --panel1:#050210;
  --surface0: rgba(10,8,30,.86);
  --surface1: rgba(4,2,16,.64);
  --stage-bg:#04020a;
  --neon-rgb: 180,110,255;
  --neon2-rgb: 255,90,200;
  --bad-rgb: 255,92,92;
  --text-rgb: 242,232,255;
  --glow-outer: .32;
  --glow-inner: .22;
  --edge-weak: .34;
  --edge: .54;
  --scan:.07;

  --bg-overlay:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(980px 560px at 18% 8%, rgba(var(--neon2-rgb), .22) 0%, transparent 62%),
    radial-gradient(900px 520px at 92% 84%, rgba(var(--neon-rgb), .20) 0%, transparent 62%),
    radial-gradient(900px 520px at 50% -20%, rgba(var(--bad-rgb), .12) 0%, transparent 60%);
  --bg-overlay-size: 34px 34px, auto, auto, auto;
  --bg-overlay-pos: 0 0, 0 0, 0 0, 0 0;
  --bg-overlay-opacity: .26;
  --bg-overlay-anim: drift 28s ease-in-out infinite;

  --fx-img: url("/static/img/calc-theme-nebula.svg?v=20260131-3");
  --fx-opacity: .68;
  --fx-filter: saturate(1.60) brightness(1.08) drop-shadow(0 0 34px rgba(var(--neon2-rgb), .22)) drop-shadow(0 0 82px rgba(var(--neon-rgb), .14));
  --fx-anim: drift 28s ease-in-out infinite;
}

html[data-theme="ember"]{
  --bg0:#120805;
  --bg1:#040202;
  --panel0:#1a0d07;
  --panel1:#070303;
  --surface0: rgba(18,8,6,.86);
  --surface1: rgba(6,2,2,.64);
  --stage-bg:#070302;
  --neon-rgb: 255,150,70;
  --neon2-rgb: 255,60,120;
  --bad-rgb: 255,70,70;
  --text-rgb: 255,244,228;
  --glow-outer: .34;
  --glow-inner: .22;
  --edge-weak: .36;
  --edge: .56;
  --scan:.06;

  --bg-overlay:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(900px 520px at 55% 0%, rgba(var(--neon-rgb), .22) 0%, transparent 62%),
    radial-gradient(900px 520px at 10% 90%, rgba(var(--neon2-rgb), .16) 0%, transparent 62%);
  --bg-overlay-size: 48px 48px, auto, auto;
  --bg-overlay-pos: 0 0, 0 0, 0 0;
  --bg-overlay-opacity: .22;
  --bg-overlay-anim: drift 20s ease-in-out infinite;

  --fx-img: url("/static/img/calc-theme-ember.svg?v=20260131-3");
  --fx-opacity: .72;
  --fx-filter: saturate(1.55) brightness(1.10) drop-shadow(0 0 34px rgba(var(--neon-rgb), .20)) drop-shadow(0 0 86px rgba(var(--neon2-rgb), .10));
  --fx-anim: drift 20s ease-in-out infinite;
}

html[data-theme="sakura"]{
  --bg0:#12040b;
  --bg1:#040104;
  --panel0:#180610;
  --panel1:#070205;
  --surface0: rgba(22,6,14,.84);
  --surface1: rgba(6,2,6,.64);
  --stage-bg:#050106;
  --neon-rgb: 255,115,170;
  --neon2-rgb: 190,130,255;
  --bad-rgb: 255,80,110;
  --text-rgb: 255,240,250;
  --glow-outer: .32;
  --glow-inner: .22;
  --edge-weak: .34;
  --edge: .54;
  --scan:.08;

  --bg-overlay:
    radial-gradient(circle at 12px 10px, rgba(var(--neon-rgb), .18) 0 2px, transparent 3px),
    radial-gradient(circle at 22px 28px, rgba(var(--neon2-rgb), .14) 0 1px, transparent 3px),
    radial-gradient(900px 520px at 20% 15%, rgba(var(--neon-rgb), .16) 0%, transparent 62%),
    radial-gradient(900px 520px at 90% 85%, rgba(var(--neon2-rgb), .14) 0%, transparent 62%);
  --bg-overlay-size: 52px 52px, 72px 72px, auto, auto;
  --bg-overlay-pos: 0 0, 0 0, 0 0, 0 0;
  --bg-overlay-opacity: .24;
  --bg-overlay-anim: drift 30s ease-in-out infinite;
  --frame-overlay-opacity: .66;

  --fx-img: url("/static/img/calc-theme-sakura.svg?v=20260131-3");
  --fx-opacity: .70;
  --fx-filter: saturate(1.55) brightness(1.08) drop-shadow(0 0 30px rgba(var(--neon-rgb), .20)) drop-shadow(0 0 82px rgba(var(--neon2-rgb), .12));
  --fx-anim: drift 30s ease-in-out infinite;
}

html[data-theme="ice"]{
  --bg0:#020813;
  --bg1:#000308;
  --panel0:#031426;
  --panel1:#01060d;
  --surface0: rgba(4,14,28,.84);
  --surface1: rgba(1,6,14,.64);
  --stage-bg:#010510;
  --neon-rgb: 140,240,255;
  --neon2-rgb: 120,160,255;
  --bad-rgb: 255,120,140;
  --text-rgb: 235,250,255;
  --glow-outer: .32;
  --glow-inner: .22;
  --edge-weak: .34;
  --edge: .54;
  --scan:.06;

  --bg-overlay:
    repeating-conic-gradient(from 30deg at 50% 50%, rgba(var(--neon-rgb), .10) 0 10deg, transparent 10deg 22deg),
    radial-gradient(980px 560px at 70% 10%, rgba(var(--neon-rgb), .18) 0%, transparent 62%),
    radial-gradient(900px 520px at 15% 85%, rgba(var(--neon2-rgb), .16) 0%, transparent 62%);
  --bg-overlay-opacity: .18;
  --bg-overlay-anim: drift 24s ease-in-out infinite;

  --frame-overlay:
    repeating-linear-gradient(0deg, rgba(var(--neon-rgb), .10) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(var(--neon2-rgb), .08) 0 1px, transparent 1px 24px);
  --frame-overlay-opacity: .48;

  --fx-img: url("/static/img/calc-theme-ice.svg?v=20260131-3");
  --fx-opacity: .68;
  --fx-filter: saturate(1.50) brightness(1.08) drop-shadow(0 0 34px rgba(var(--neon-rgb), .22)) drop-shadow(0 0 86px rgba(var(--neon2-rgb), .10));
  --fx-anim: drift 24s ease-in-out infinite;
}

html[data-theme="terminal"]{
  --bg0:#020806;
  --bg1:#000302;
  --panel0:#03110a;
  --panel1:#010504;
  --surface0: rgba(3,16,10,.84);
  --surface1: rgba(1,5,4,.64);
  --stage-bg:#000000;
  --neon-rgb: 110,255,140;
  --neon2-rgb: 255,210,90;
  --bad-rgb: 255,90,90;
  --text-rgb: 220,255,230;
  --glow-outer: .18;
  --glow-inner: .14;
  --edge-weak: .30;
  --edge: .44;
  --scan:.14;
  --scanline-thick: 1px;
  --scanline-step: 4px;
  --scanline-color: rgba(var(--neon-rgb), .10);
  --font: var(--font-mono);

  --bg-overlay:
    repeating-linear-gradient(90deg, rgba(var(--neon-rgb), .10) 0 1px, transparent 1px 44px),
    radial-gradient(900px 520px at 50% -10%, rgba(var(--neon-rgb), .14) 0%, transparent 62%);
  --bg-overlay-opacity: .12;
  --bg-overlay-blend: screen;
  --bg-overlay-anim: drift 34s ease-in-out infinite;

  --frame-overlay:
    repeating-linear-gradient(0deg, rgba(var(--neon-rgb), .12) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(var(--neon-rgb), .08) 0 1px, transparent 1px 28px);
  --frame-overlay-opacity: .36;

  --fx-img: url("/static/img/calc-theme-terminal.svg?v=20260131-3");
  --fx-opacity: .34;
  --fx-filter: drop-shadow(0 0 18px rgba(var(--neon-rgb), .22)) drop-shadow(0 0 46px rgba(var(--neon-rgb), .10));
  --fx-anim: drift 34s ease-in-out infinite;
}

html[data-theme="acid"]{
  --bg0:#050a10;
  --bg1:#010205;
  --panel0:#071321;
  --panel1:#020610;
  --surface0: rgba(6,12,26,.86);
  --surface1: rgba(2,4,12,.64);
  --stage-bg:#02040d;
  --neon-rgb: 180,255,0;
  --neon2-rgb: 255,0,220;
  --bad-rgb: 255,80,80;
  --text-rgb: 232,255,220;
  --glow-outer: .36;
  --glow-inner: .22;
  --edge-weak: .36;
  --edge: .58;
  --scan:.07;

  --bg-overlay:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 0 1px, transparent 2px),
    conic-gradient(from 180deg at 50% 40%, rgba(var(--neon-rgb), .20), rgba(var(--neon2-rgb), .18), rgba(var(--bad-rgb), .12), rgba(var(--neon-rgb), .20)),
    radial-gradient(900px 520px at 20% 10%, rgba(var(--neon2-rgb), .18) 0%, transparent 62%);
  --bg-overlay-size: 28px 28px, auto, auto;
  --bg-overlay-pos: 0 0, 0 0, 0 0;
  --bg-overlay-opacity: .20;
  --bg-overlay-anim: drift 16s ease-in-out infinite;

  --frame-overlay:
    repeating-linear-gradient(135deg, rgba(var(--neon-rgb), .14) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(45deg, rgba(var(--neon2-rgb), .12) 0 1px, transparent 1px 22px);
  --frame-overlay-opacity: .46;

  --fx-img: url("/static/img/calc-theme-acid.svg?v=20260131-3");
  --fx-opacity: .78;
  --fx-filter: saturate(1.65) brightness(1.10) drop-shadow(0 0 34px rgba(var(--neon-rgb), .20)) drop-shadow(0 0 98px rgba(var(--neon-rgb), .12));
  --fx-anim: drift 16s ease-in-out infinite;
}

html{
  height:100%;
  color-scheme: dark;
}

html,body{height:100%}
body{
  margin:0;
  font-family: var(--font);
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(var(--neon-rgb), .18) 0%, transparent 62%),
    radial-gradient(900px 600px at 92% 82%, rgba(var(--neon2-rgb), .18) 0%, transparent 58%),
    radial-gradient(900px 520px at 50% -10%, rgba(var(--bad-rgb), .12) 0%, transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(180deg, var(--scanline-color) 0 var(--scanline-thick), transparent var(--scanline-thick) var(--scanline-step));
  opacity: var(--scan);
  mix-blend-mode: overlay;
  z-index:1;
}
body:after{
  content:"";
  position:fixed;
  inset:-2px;
  pointer-events:none;
  background: var(--bg-overlay);
  background-size: var(--bg-overlay-size);
  background-position: var(--bg-overlay-pos);
  opacity: var(--bg-overlay-opacity);
  mix-blend-mode: var(--bg-overlay-blend);
  filter: blur(var(--bg-overlay-blur)) saturate(var(--bg-overlay-sat));
  transform: translate3d(0,0,0) scale(1.04);
  animation: var(--bg-overlay-anim);
  will-change: transform;
  z-index:0;
}

::selection{
  background: rgba(var(--neon-rgb), .32);
  color: rgba(0,0,0,.88);
}

.shell{
  width:min(1120px, calc(100vw - 32px));
  position:relative;
  z-index:2;
}

.themeFx{
  position:absolute;
  inset:-22px;
  border-radius: 28px;
  pointer-events:none;
  z-index:0;
  background-image: var(--fx-img);
  background-position: var(--fx-pos);
  background-size: var(--fx-size);
  background-repeat: var(--fx-repeat);
  opacity: var(--fx-opacity);
  mix-blend-mode: var(--fx-blend);
  filter: var(--fx-filter);
  animation: var(--fx-anim);
  will-change: transform, filter;
}
.shell > :not(.themeFx){
  position:relative;
  z-index:1;
}

@keyframes drift{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1.05) }
  50%{ transform: translate3d(2%, 1%, 0) scale(1.08) }
  100%{ transform: translate3d(-2%, -1%, 0) scale(1.05) }
}

@keyframes storm{
  0%{ transform: translate3d(-1.5%, -0.8%, 0) scale(1.06); filter: var(--fx-filter) brightness(1.00) saturate(1.30) }
  11%{ transform: translate3d(1.2%, 0.6%, 0) scale(1.08); filter: var(--fx-filter) brightness(1.08) saturate(1.55) }
  12%{ filter: var(--fx-filter) brightness(1.50) saturate(1.85) }
  13%{ filter: var(--fx-filter) brightness(1.00) saturate(1.25) }
  56%{ transform: translate3d(1.6%, -0.6%, 0) scale(1.07); filter: var(--fx-filter) brightness(1.06) saturate(1.55) }
  57%{ filter: var(--fx-filter) brightness(1.42) saturate(1.78) }
  58%{ filter: var(--fx-filter) brightness(0.98) saturate(1.25) }
  100%{ transform: translate3d(-1.5%, -0.8%, 0) scale(1.06); filter: var(--fx-filter) brightness(1.00) saturate(1.30) }
}

.topbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.topbar a{
  color:var(--neon);
  text-decoration:none;
  border:1px solid rgba(var(--neon-rgb), var(--edge-weak));
  background: linear-gradient(180deg, rgba(var(--neon-rgb), .10), rgba(0,0,0,.18));
  padding:8px 10px;
  border-radius:10px;
  box-shadow:0 0 18px rgba(var(--neon-rgb), var(--glow-inner)) inset, 0 0 26px rgba(var(--neon-rgb), .10);
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.topbar a:hover{
  border-color: rgba(var(--neon-rgb), var(--edge));
  box-shadow:0 0 22px rgba(var(--neon-rgb), var(--glow-inner)) inset, 0 0 34px rgba(var(--neon-rgb), .16);
}
.topbar a:active{ transform: translateY(1px) }
.topbar .title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  flex:1 1 auto;
  min-width:200px;
}
.topbar h1{
  margin:0;
  font-size:18px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: rgba(var(--text-rgb), .96);
}
.subtitle{
  margin:0;
  font-size:12px;
  color:var(--muted);
}
.subtitle .sep{ margin:0 7px; opacity:.70 }
#calcThemeName{ color: rgba(var(--neon-rgb), .92) }

.themePick{
  position:relative;
  display:flex;
  align-items:center;
}
.themePick:after{
  content:"▾";
  position:absolute;
  right:14px;
  top:50%;
  transform: translateY(-52%);
  pointer-events:none;
  color:rgba(255,255,255,.78);
  font-size:13px;
}
.themeSelect{
  appearance:none;
  border:1px solid rgba(var(--neon-rgb), var(--edge-weak));
  background:
    radial-gradient(320px 160px at 20% 0%, rgba(var(--neon2-rgb), .16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(var(--neon-rgb), .12), rgba(0,0,0,.18));
  color:rgba(255,255,255,.92);
  border-radius:999px;
  padding:11px 42px 11px 14px;
  cursor:pointer;
  font-size:13px;
  font-weight:780;
  letter-spacing:.06em;
  line-height:1.1;
  text-transform:none;
  text-shadow: 0 0 18px rgba(var(--neon-rgb), .12);
  box-shadow:0 0 0 1px rgba(var(--neon2-rgb), .14) inset, 0 0 26px rgba(var(--neon-rgb), .14);
}
.themeSelect option{
  background:#05070a;
  color: rgba(255,255,255,.94);
}
.themeSelect:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(var(--neon-rgb), .12), 0 0 0 1px rgba(var(--neon-rgb), .18) inset;
}

.modeSwitch{
  display:flex;
  gap:10px;
  align-items:center;
}
.modeBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:var(--text);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  font-size:11px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
  user-select:none;
}
.modeBtn:hover{
  border-color: rgba(var(--neon-rgb), .30);
  box-shadow:0 0 0 3px rgba(var(--neon-rgb), .10);
}
.modeBtn:active{transform: translateY(1px)}
.modeBtn.active{
  border-color: rgba(var(--neon-rgb), var(--edge-strong));
  background:linear-gradient(180deg, rgba(var(--neon-rgb), .16), rgba(var(--neon2-rgb), .10));
  box-shadow:0 0 0 1px rgba(var(--neon-rgb), .18) inset, 0 0 24px rgba(var(--neon-rgb), .16);
}

.mode{min-width:0}
.basicWrap{
  width:min(520px, calc(100vw - 32px));
  margin:0 auto;
}

.frame{
  border:1px solid rgba(var(--neon-rgb), var(--edge));
  border-radius:18px;
  padding:16px;
  background:
    linear-gradient(180deg, var(--panel0), var(--panel1));
  box-shadow:
    0 0 46px rgba(var(--neon-rgb), var(--glow-outer)),
    0 0 0 1px rgba(var(--neon2-rgb), .18) inset;
  position:relative;
  overflow:hidden;
}
.frame:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: var(--frame-overlay);
  opacity: var(--frame-overlay-opacity);
  pointer-events:none;
  mask: var(--frame-overlay-mask);
}
.frame:after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(420px 240px at 20% 0%, rgba(var(--neon-rgb), .16) 0%, transparent 64%),
    radial-gradient(520px 280px at 90% 10%, rgba(var(--neon2-rgb), .14) 0%, transparent 68%),
    linear-gradient(135deg, transparent 0 40%, rgba(255,255,255,.06) 50%, transparent 60% 100%);
  opacity:.95;
  mix-blend-mode: screen;
}

.display{
  position:relative;
  border:1px solid rgba(var(--neon-rgb), var(--edge));
  border-radius:14px;
  padding:14px 14px 12px;
  background:
    radial-gradient(420px 220px at 50% -10%, rgba(var(--neon-rgb), .16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.44));
  box-shadow:0 0 28px rgba(var(--neon-rgb), var(--glow-inner)) inset;
  margin-bottom:14px;
}
.expr{
  font-size:14px;
  opacity:.75;
  min-height:18px;
  word-wrap:break-word;
}
.out{
  font-size:34px;
  font-weight:650;
  letter-spacing:0.02em;
  margin-top:6px;
  word-break:break-all;
  text-shadow: 0 0 22px rgba(var(--neon-rgb), .18);
}

.keys{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.btn{
  appearance:none;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(var(--neon-rgb), var(--edge-weak));
  background:
    radial-gradient(240px 160px at 50% -20%, rgba(var(--neon-rgb), .18) 0%, transparent 60%),
    radial-gradient(220px 140px at 20% 0%, rgba(var(--neon2-rgb), .14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.28));
  color:var(--text);
  border-radius:14px;
  padding:14px 10px;
  font-size:16px;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow:
    0 0 0 1px rgba(var(--neon2-rgb), .16) inset,
    0 10px 26px rgba(0,0,0,.32);
  text-shadow: 0 0 14px rgba(var(--neon-rgb), .10);
}
.btn:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: linear-gradient(120deg, transparent 0 40%, rgba(255,255,255,.10) 50%, transparent 60% 100%);
  transform: translateX(-18%);
  opacity:0;
  transition: opacity .18s ease, transform .30s ease;
}
.btn:hover{
  border-color: rgba(var(--neon-rgb), var(--edge));
  box-shadow:
    0 0 18px rgba(var(--neon-rgb), .18),
    0 0 0 1px rgba(var(--neon2-rgb), .20) inset,
    0 12px 30px rgba(0,0,0,.34);
}
.btn:hover:before{
  opacity:1;
  transform: translateX(18%);
}
.btn:active{ transform: translateY(1px) }
.btn.op{ color: rgba(var(--neon-rgb), .86) }
.btn.ac{
  color:rgba(var(--bad-rgb), .96);
  border-color: rgba(var(--bad-rgb), .50);
  background:
    radial-gradient(260px 160px at 50% -20%, rgba(var(--bad-rgb), .20) 0%, transparent 60%),
    linear-gradient(180deg, rgba(var(--bad-rgb), .14), rgba(0,0,0,.32));
  text-shadow: 0 0 14px rgba(var(--bad-rgb), .18);
}
.btn.eq{
  grid-column: span 2;
  border-color: rgba(var(--neon-rgb), var(--edge-strong));
  background:
    radial-gradient(320px 200px at 30% 0%, rgba(var(--neon2-rgb), .20) 0%, transparent 62%),
    linear-gradient(180deg, rgba(var(--neon-rgb), .22), rgba(var(--neon2-rgb), .12));
  box-shadow:0 0 30px rgba(var(--neon-rgb), .20), 0 0 0 1px rgba(var(--neon-rgb), .26) inset;
}
.hint{
  margin-top:12px;
  font-size:12px;
  opacity:.75;
}
.shake{
  animation: shake .18s linear 0s 2;
}
@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  50%{transform:translateX(3px)}
  75%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}

.hidden{display:none}

/* Graphing calculator */
.card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(var(--neon-rgb), .18);
  border-radius:18px;
  background:linear-gradient(180deg, var(--surface0), var(--surface1));
  padding:16px;
  box-shadow:0 26px 70px rgba(0,0,0,.50), 0 0 50px rgba(var(--neon-rgb), .10);
  backdrop-filter: blur(10px);
}
.card:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(760px 320px at 20% 0%, rgba(var(--neon-rgb), .18) 0%, transparent 65%),
    radial-gradient(760px 320px at 90% 0%, rgba(var(--neon2-rgb), .14) 0%, transparent 70%);
  opacity:.90;
  mix-blend-mode: screen;
}
.card > *{ position:relative; z-index:1 }

.graphLayout{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:16px;
  align-items:start;
}

.graphHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.graphHeader h2{
  margin:0;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(var(--text-rgb), .92);
}
.graphHint{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}
.graphActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.ctl{
  appearance:none;
  border:1px solid rgba(var(--neon-rgb), var(--edge-weak));
  background:
    radial-gradient(320px 180px at 25% 0%, rgba(var(--neon2-rgb), .14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(var(--neon-rgb), .10), rgba(0,0,0,.20));
  color:rgba(255,255,255,.94);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:860;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
  user-select:none;
}
.ctl:hover{
  border-color: rgba(var(--neon-rgb), var(--edge));
  box-shadow:0 0 0 3px rgba(var(--neon-rgb), .14), 0 0 0 1px rgba(var(--neon-rgb), .20) inset, 0 0 22px rgba(var(--neon-rgb), .14);
}
.ctl:active{transform: translateY(1px)}
.ctl.secondary{
  border-color: rgba(255,255,255,.14);
  color:rgba(255,255,255,.88);
}
.ctl.secondary:hover{
  border-color: rgba(var(--neon-rgb), .30);
  box-shadow:0 0 0 3px rgba(var(--neon-rgb), .10);
}

.graphStage{
  position:relative;
  border-radius:16px;
  border:1px solid rgba(var(--neon-rgb), .18);
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(var(--neon-rgb), .12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.62)),
    var(--stage-bg);
  overflow:hidden;
}
.graphStage canvas{
  display:block;
  width:100%;
  aspect-ratio: 3 / 2;
}
.trace{
  position:absolute;
  left:10px;
  bottom:10px;
  font-size:12px;
  color:rgba(255,255,255,.78);
  background:rgba(0,0,0,.26);
  border:1px solid rgba(var(--neon-rgb), .22);
  border-radius:12px;
  padding:8px 10px;
  backdrop-filter: blur(8px);
  max-width: calc(100% - 20px);
}
.trace code{color:rgba(255,255,255,.92)}

.graphHud{min-width:0}
.section + .section{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
}
.section h3{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}

.fnRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.16);
}
.fnRow + .fnRow{margin-top:10px}
.swatch{
  width:10px;
  height:10px;
  border-radius:999px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  flex:0 0 auto;
}
.swatch.s1{background: var(--neon)}
.swatch.s2{background: var(--neon2)}
.swatch.s3{background: var(--bad)}
.fnLabel{
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.82);
  white-space:nowrap;
}
.fnRow input{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.92);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
}
.fnRow input:focus{
  border-color: rgba(var(--neon-rgb), .34);
  box-shadow: 0 0 0 3px rgba(var(--neon-rgb), .12);
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.field label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.60);
}
.field input{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  color:rgba(255,255,255,.92);
  padding:10px 12px;
  border-radius:14px;
  outline:none;
}
.field input:focus{
  border-color: rgba(var(--neon-rgb), .34);
  box-shadow: 0 0 0 3px rgba(var(--neon-rgb), .12);
}

.checks{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.16);
  cursor:pointer;
  user-select:none;
}
.check input{
  width:16px;
  height:16px;
  accent-color: var(--neon);
}
.check span{color:rgba(255,255,255,.86); font-size:13px}

.mini{
  font-size:12px;
  color:rgba(255,255,255,.70);
  line-height:1.5;
}
.mini code{color:rgba(255,255,255,.88)}

.msg{
  margin-top:14px;
  min-height:18px;
  font-size:12px;
  color:rgba(255,255,255,.74);
}
.msg.bad{color: rgba(var(--bad-rgb), .92)}

@media (max-width: 980px){
  .graphLayout{grid-template-columns: 1fr}
  .topbar .title{order:3; width:100%}
}

@media (max-width: 560px){
  .shell{width:calc(100vw - 24px)}
  .grid2{grid-template-columns: 1fr}
  .modeSwitch{width:100%; justify-content:space-between}
  .themePick{width:100%}
  .themeSelect{width:100%}
}

@media (prefers-reduced-motion: reduce){
  .btn,.modeBtn,.ctl{transition:none}
  body:after{animation:none}
  .themeFx{animation:none}
}