:root {
  --page: #14171b;
  --bg: #1b1f25;
  --key: #2c3139;
  --key-hi: #343a43;
  --key-edge: #4c535e;
  --key-ink: #dde1e7;
  --num: #7d8b9b;
  --num-hi: #8a98a8;
  --num-edge: #a3afbd;
  --num-ink: #f3f6f9;
  --op: #eceff2;
  --op-edge: #ffffff;
  --op-ink: #1b1f25;
  --teal: #35c7b2;
  --shift: #ffd23f;
  --alpha: #4da6ff;
  --lcd: #000000;
  --lcd-hi: #031008;
  --lcd-ink: #00ff41;
  --lcd-dim: #12a33a;
  --lcd-mute: #0f8f33;
  --lcd-line: #0e5f24;
  --lcd-status: #0b7a2a; --lcd-mode: #19b845; --lcd-flash: #0b3d1a; --lcd-slot: #0f8f33;
  --lcd-box: #06200e; --lcd-box-on: #0b3a19; --lcd-bg-a: #04140a; --lcd-bg-b: #000;
  --lcd-edge: #1f3b29; --lcd-scan: rgba(0, 0, 0, .18); --lcd-tglow: rgba(0, 255, 65, .45); --lcd-inset: rgba(0, 255, 65, .08);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--page); color: #cfd2d8; font-family: var(--font); }
body { min-height: 100vh; }
.stage { display: flex; gap: 32px; justify-content: center; align-items: flex-start; padding: 20px 16px 40px; }

/* ---------- phone ---------- */
.phone {
  width: min(440px, 100%);
  padding: 12px 10px 18px;
  border-radius: 28px;
  background: var(--bg);
  box-shadow: 0 30px 70px -25px #000c, inset 0 1px 0 #ffffff14;
  user-select: none; -webkit-user-select: none;
}

/* ---------- LCD ---------- */
.lcd {
  height: clamp(210px, 30vh, 280px); padding: 6px 12px 10px;
  display: flex; flex-direction: column;
  background: linear-gradient(var(--lcd-hi), var(--lcd));
  color: var(--lcd-ink); border-radius: 10px;
  box-shadow: inset 0 3px 8px #0005, 0 0 0 4px #14171b, 0 0 0 5px #2b3038;
  font-variant-numeric: tabular-nums; overflow: hidden;
}
.status { display: flex; gap: 8px; font-size: 10px; font-weight: 700; color: var(--lcd-status); min-height: 15px; align-items: center; letter-spacing: .3px; }
.status .on { color: var(--lcd-ink); }
.status .sp { flex: 1; }
.status .mode { color: var(--lcd-mode); letter-spacing: 1px; }
.status .flash { color: var(--lcd-ink); background: var(--lcd-flash); padding: 0 6px; border-radius: 6px; }
.lcd .body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.inp { flex: 1; min-height: 0; font-size: 24px; line-height: 1.4; overflow: hidden; word-break: break-all; padding-top: 4px; }
.inp sup { font-size: .62em; line-height: 0; position: relative; top: -.5em; vertical-align: baseline; }
.inp sup.ph { opacity: .55; }
.inp .si { font-style: normal; font-size: .75em; margin-left: 1px; }
.res { text-align: right; font-size: 34px; line-height: 1.15; min-height: 52px; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; font-weight: 500; }
.res sup, .row sup { font-size: .55em; position: relative; top: -.55em; line-height: 0; vertical-align: baseline; }
.res i, .row i { font-style: italic; font-family: Georgia, "Times New Roman", serif; margin-left: 1px; }
.caret { display: inline-block; width: 2px; height: 1.05em; background: var(--lcd-ink); vertical-align: text-bottom; margin: 0 -1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.err { font-size: 26px; text-align: right; font-weight: 600; }
.errhint { font-size: 11px; text-align: right; color: var(--lcd-mute); padding-bottom: 2px; }

.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 2px; line-height: 1.05; font-size: .85em; }
.frac .n { border-bottom: 2px solid currentColor; padding: 0 3px 1px; }
.frac .d { padding: 1px 3px 0; }
.ov { border-top: 1.6px solid currentColor; padding: 0 1px; margin-left: 1px; }

/* natural-display templates */
.tfrac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 2px; line-height: 1.05; font-size: .85em; }
.tfrac .tn { border-bottom: 2px solid currentColor; padding: 0 3px 1px; min-width: .8em; text-align: center; }
.tfrac .td { padding: 1px 3px 0; min-width: .8em; text-align: center; }
.slot { display: inline-block; width: .62em; height: .85em; border: 1.5px dashed var(--lcd-slot); border-radius: 2px; color: transparent; overflow: hidden; vertical-align: baseline; margin: 0 1px; }
.inp .ov { padding: 0 2px; }
.inp sup.idx { margin-right: -1px; }
.bar { font-weight: 300; margin: 0 1px; }
.inp sub { font-size: .6em; vertical-align: baseline; position: relative; top: .35em; }
.tint, .tsg, .tdv, .tlm { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 2px; }
.ilim { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; margin-right: 2px; }
.ilim .up, .ilim .lo, .ilim .lt { font-size: .62em; min-height: .9em; white-space: nowrap; }
.ilim .lt { font-size: .8em; }
.isig { font-size: 1.9em; line-height: .95; font-weight: 200; }
.tint .ifn, .tsg .ifn, .tlm .ifn { padding: 0 2px; }
.tint .dx { margin-left: 2px; }
.tdv .par { font-size: 1.15em; }
.tdv .at { font-size: .6em; align-self: flex-end; margin-left: 1px; white-space: nowrap; position: relative; top: .3em; border-left: 1.5px solid currentColor; padding-left: 2px; }
.ang { margin: 0 3px; }

/* special results */
.res.stackres { flex-direction: column; align-items: flex-end; justify-content: center; font-size: 18px; line-height: 1.3; font-weight: 500; }
.brow, .mrow { display: flex; gap: 12px; justify-content: flex-end; }
.brow span, .mrow span { color: var(--lcd-dim); font-size: .8em; min-width: 3em; text-align: left; }
.brow.cur b { text-decoration: underline; }
.brow b, .mrow b { font-family: var(--mono); font-weight: 600; letter-spacing: .5px; }
.mrow b { font-family: inherit; }
.res.matres { font-size: 25px; }
.mbox { display: inline-block; border-left: 2px solid currentColor; border-right: 2px solid currentColor; padding: 0 5px; border-radius: 5px; }
table.mat { border-collapse: collapse; }
table.mat td { padding: 1px 9px; text-align: right; line-height: 1.15; }

/* menus / lists / forms */
.title { font-size: 12px; font-weight: 700; padding: 3px 0 4px; border-bottom: 1px solid var(--lcd-line); margin-bottom: 3px; display: flex; justify-content: space-between; }
.title small { font-weight: 500; color: var(--lcd-mute); }
.rows { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.row { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 6px; font-size: 17px; border-radius: 4px; }
.row .k { min-width: 2.2em; color: var(--lcd-mute); font-size: 14px; }
.row .v { flex: 1; text-align: right; }
.row.sel { background: var(--lcd-ink); color: var(--lcd); }
.row.sel .k { color: var(--lcd); }
.row.cell { display: grid; grid-template-columns: 2.4em 1fr 1fr; }
.row.head { font-size: 12px; font-weight: 700; color: var(--lcd-mute); min-height: 20px; border-bottom: 1px solid var(--lcd-line); border-radius: 0; }
.row .ed { flex: 1; text-align: right; font-size: 20px; }
.row .box { flex: 1; padding: 0 3px; border-radius: 3px; background: var(--lcd-box); min-height: 24px; text-align: right; font-size: 18px; line-height: 24px; }
.row .box.on { outline: 2px solid var(--lcd-ink); background: var(--lcd-box-on); }
.row .mt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .mt small, .title small { opacity: .75; }
.hrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; max-height: 40px; overflow: hidden; font-size: 14px; }
.hrow b { font-weight: 600; }
.hrow .he { opacity: .8; overflow: hidden; }
.msg { font-size: 11px; color: var(--lcd-mute); padding: 1px 4px; min-height: 15px; }
.foot { font-size: 10.5px; color: var(--lcd-mute); padding: 1px 4px 0; display: flex; justify-content: space-between; }

/* ---------- toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 2px 14px; }
.toolbar button {
  appearance: none; border: 0; cursor: pointer; font: inherit; color: #e4e8ee; background: var(--key-hi);
  height: 38px; min-width: 38px; border-radius: 12px; padding: 0 12px; font-size: 14px; letter-spacing: .3px;
  box-shadow: inset 0 0 0 1px #ffffff12;
}
.toolbar button:active { background: #3e4551; }
.toolbar .ico { background: transparent; box-shadow: none; padding: 0 8px; display: grid; place-items: center; }
.toolbar .sigma { background: var(--key); box-shadow: inset 0 0 0 1px #ffffff14; font-size: 24px; padding: 0 12px; }
.toolbar .pill { background: linear-gradient(90deg, #3a82f7, #27d6d0); color: #fff; font-weight: 600; border-radius: 14px; padding: 0 16px; flex: 0 0 auto; }
.toolbar .chip { background: var(--key); font-size: 13px; padding: 0 9px; }
.toolbar .chip.off { color: #98a1ad; }
.toolbar .chip:first-of-type { margin-left: auto; }

/* ---------- keys ---------- */
.keys { display: block; }
.grid6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px 7px; }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px 8px; margin-top: 8px; }
.key { display: flex; flex-direction: column; min-width: 0; }
.tags { display: flex; justify-content: space-between; align-items: flex-end; height: 19px; padding: 0 1px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--shift); }
.tags .s, .tags .a { display: inline-flex; align-items: baseline; transition: filter .1s, transform .1s; }
.tags .s { color: var(--shift); }
.tags .a { color: var(--alpha); }
.tags sup, .tags sub { font-size: .7em; }
.key button {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  height: 44px; border-radius: 13px; color: var(--key-ink); font-size: 14.5px;
  border: 2px solid var(--key-edge);
  background: linear-gradient(var(--key-hi), var(--key));
  box-shadow: 0 3px 0 #0a0c0f, 0 0 0 1px #0007;
  padding: 0 2px; display: grid; place-items: center; white-space: nowrap;
  transition: transform .04s, box-shadow .04s;
}
.key button:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a0c0f, 0 0 0 1px #0007; }
.key button sup, .key button sub { font-size: .62em; line-height: 0; }
.key button sup { position: relative; top: -.65em; }
.key button sub { position: relative; top: .35em; }
.key.num button { background: linear-gradient(var(--num-hi), var(--num)); border-color: var(--num-edge); color: var(--num-ink); font-size: 27px; height: 52px; border-radius: 15px; }
.key.num button[data-i="3"], .key.num button[data-i="4"] { font-size: 22px; }
.key.op button { background: linear-gradient(#fff, var(--op)); border-color: var(--op-edge); color: var(--op-ink); font-size: 27px; height: 52px; border-radius: 15px; }
.key.shift button { background: linear-gradient(#ffe785, var(--shift)); border-color: #fff0ae; color: #2b2100; }
.key.alpha button { background: linear-gradient(#8cc6ff, var(--alpha)); border-color: #bddcff; color: #04182e; }
.key.lit button { outline: 3px solid #fff; outline-offset: 2px; }
.q { display: inline-block; width: .6em; height: .6em; background: currentColor; border-radius: 1.5px; vertical-align: baseline; margin: 0 1px; }
.tags .q { width: .55em; height: .55em; }
.ifr { display: inline-flex; flex-direction: column; gap: 2px; align-items: center; }
.ifr .q { width: .7em; height: .7em; display: block; }
.ifr::before { content: ""; order: 1; width: 1.1em; height: 2px; background: currentColor; }
.ifr .q:first-child { order: 0; } .ifr .q:last-child { order: 2; }

/* ---------- history panel (desktop) ---------- */
.tape { width: 300px; padding-top: 6px; }
.tape h2 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #8b919c; margin: 0 0 10px; font-weight: 600; }
.tape-list { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow: auto; }
.tape-item { text-align: left; border: 1px solid #2a2d33; background: #1d2025; border-radius: 10px; color: #e3e6ea; padding: 8px 12px; cursor: pointer; font: inherit; }
.tape-item:hover { border-color: #4a4f59; }
.tape-item .e { font-size: 13px; color: #9aa1ac; word-break: break-all; }
.tape-item .r { font-size: 20px; text-align: right; margin-top: 2px; }
.tape-item sup { font-size: .6em; }
.tape-empty { color: #666c77; font-size: 13px; }
.hint { font-size: 12px; color: #7d838e; line-height: 1.9; margin-top: 20px; }
kbd { background: #23262c; border: 1px solid #353941; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font: 11px ui-monospace, Menlo, monospace; color: #c3c8d0; }

@media (max-width: 800px) {
  .tape { display: none; }
  .stage { padding: 0; }
  .phone { border-radius: 0; width: 100%; max-width: 480px; box-shadow: none; padding-top: max(10px, env(safe-area-inset-top)); }
  .lcd { height: clamp(200px, 34vh, 300px); }
}
@media (max-width: 400px) {
  .tags { font-size: 10px; }
  .key button { font-size: 13px; }
}

.key button .lb { display: inline-flex; align-items: center; justify-content: center; gap: 1px; line-height: 1; }
.tags sup { position: relative; top: -.45em; vertical-align: baseline; line-height: 0; }
.tags sub { position: relative; top: .3em; vertical-align: baseline; line-height: 0; }
.key button .lb sup { position: relative; top: -.5em; align-self: flex-start; margin-top: .2em; }
.key button .lb sub { position: relative; top: .5em; align-self: flex-end; margin-bottom: .1em; }
.key button .lb .q { width: .5em; height: .5em; }
.key button .lb sup .q, .key button .lb sub .q { width: .4em; height: .4em; }
.key button .lb sup .q, .key button .lb sub .q { width: .85em; height: .85em; }

/* symbolic results (derivatives / antiderivatives) */
.res.symres { font-size: 27px; justify-content: flex-end; text-align: right; line-height: 1.4; font-weight: 500; padding: 2px 0; }
.symout { display: inline; }
.symout sup { font-size: .6em; }

.row { min-height: 30px; }
.row .v .frac, .row .v .tfrac { font-size: .8em; }

/* ---------- matrix screen ---------- */
.lcd {
  background: radial-gradient(120% 90% at 50% 0%, var(--lcd-bg-a) 0%, var(--lcd-bg-b) 70%);
  color: var(--lcd-ink);
  text-shadow: 0 0 7px var(--lcd-tglow);
  box-shadow: inset 0 0 28px var(--lcd-inset), inset 0 3px 10px #0008, 0 0 0 4px #14171b, 0 0 0 5px var(--lcd-edge), 0 0 22px var(--lcd-inset);
  position: relative;
}
.lcd::after {                                    /* faint scan lines */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, var(--lcd-scan) 0 1px, transparent 1px 3px);
}
.caret { background: var(--lcd-ink); box-shadow: 0 0 8px var(--lcd-ink); }
.row.sel { text-shadow: none; }
.row.sel .k { color: #000; }
.status .on { text-shadow: 0 0 8px var(--lcd-ink); }
.status .flash { color: var(--lcd-ink); border: 1px solid var(--lcd-line); }
.res i, .row i { color: inherit; }
::selection { background: #00ff4150; }

/* highlight the label set that SHIFT / ALPHA will pick */
.keys.sh-on .tags .s { filter: brightness(1.25) drop-shadow(0 0 5px var(--shift)); transform: scale(1.12); }
.keys.sh-on .tags .a { opacity: .35; }
.keys.al-on .tags .a { filter: brightness(1.25) drop-shadow(0 0 5px var(--alpha)); transform: scale(1.12); }
.keys.al-on .tags .s { opacity: .35; }

/* ---------- phone / installed-app layout ---------- */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body { overscroll-behavior: none; -webkit-touch-callout: none; }
button { -webkit-touch-callout: none; touch-action: manipulation; }

@media (max-width: 800px) {
  body { min-height: 100vh; min-height: 100dvh; }
  .stage { min-height: 100vh; min-height: 100dvh; align-items: stretch; }
  .phone {
    display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; width: 100%; max-width: 520px; margin: 0 auto;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .lcd { flex: 1 1 auto; height: auto; min-height: 150px; max-height: 300px; }
  .toolbar { padding: 8px 2px 8px; flex: 0 0 auto; }
  .toolbar button { height: 36px; }
  .keys { flex: 0 0 auto; }
  .tags { height: 15px; font-size: 10.5px; }
  .key button { height: clamp(31px, 4.2vh, 44px); height: clamp(31px, 4.2dvh, 44px); font-size: 14px; }
  .key.num button, .key.op button { height: clamp(38px, 5.2vh, 52px); height: clamp(38px, 5.2dvh, 52px); font-size: 25px; }
  .key.num button[data-i="3"], .key.num button[data-i="4"] { font-size: 21px; }
  .grid6 { gap: 2px 6px; }
  .grid5 { gap: 2px 7px; margin-top: 5px; }
}
@media (display-mode: standalone) {
  .stage { padding: 0; }
}

.legal { font-size: 11.5px; color: #6b727d; line-height: 1.6; margin: 18px 0 0; }

/* ---------- GraphMax: bigger screen ---------- */
.lcd { height: clamp(250px, 36vh, 350px); }
@media (max-width: 800px) {
  .lcd { height: auto; min-height: 190px; max-height: 380px; }
  .key button { height: clamp(30px, 3.9vh, 44px); height: clamp(30px, 3.9dvh, 44px); }
  .key.num button, .key.op button { height: clamp(36px, 4.8vh, 52px); height: clamp(36px, 4.8dvh, 52px); }
}
.toolbar .gbtn { background: var(--key); box-shadow: inset 0 0 0 1px #ffffff14; padding: 0 9px; color: #e4e8ee; }

/* ---------- GraphMax: graph screen ---------- */
.gslot { flex: 1; min-height: 0; display: flex; }
.gview { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.gcanvas { position: relative; flex: 1; min-height: 0; border-radius: 6px; overflow: hidden; }
.gcanvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

.gview.is-full .gfsbtn { display: none; }
.gsl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; padding: 3px 4px 0; }
.gsl[hidden], .gfsbar[hidden] { display: none; }
.sl-row { display: flex; align-items: center; gap: 6px; font-size: 12px; min-height: 22px; font-family: var(--mono); }
.sl-n { width: 1.2em; font-weight: 700; text-align: center; }
.sl-row output { width: 4.2em; text-align: right; color: var(--lcd-dim); font-size: 11px; }
.sl-row input[type=range] { flex: 1; min-width: 0; height: 22px; accent-color: var(--lcd-ink); background: transparent; margin: 0; }
.gfsbar { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 12px); padding: 5px; border-radius: 14px; background: rgba(0, 12, 4, .82); border: 1px solid var(--lcd-line); z-index: 4; }
.gfsbar button { appearance: none; min-width: 36px; height: 34px; padding: 0 9px; border-radius: 10px; border: 1px solid var(--lcd-line); background: #04200c; color: var(--lcd-ink); font: inherit; font-size: 14px; cursor: pointer; text-shadow: none; }
.gfsbar button:active { background: #0b3d1a; }
.gpop { position: absolute; bottom: calc(100% + 6px); right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 6px; border-radius: 12px; background: rgba(0, 12, 4, .96); border: 1px solid var(--lcd-line); }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.lcd.full { position: fixed; inset: 0; z-index: 50; height: auto !important; max-height: none !important; border-radius: 0; box-shadow: none; padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
body.lcd-full { overflow: hidden; }

/* ---------- SHIFT / ALPHA: lit labels brighter, everything else darker ---------- */
.key button { transition: transform .04s, box-shadow .04s, filter .12s; }
.keys.sh-on .key button, .keys.al-on .key button { filter: brightness(.66) saturate(.9); }
.keys.sh-on .key.shift button, .keys.al-on .key.alpha button { filter: none; }
.keys.sh-on .tags .s { color: #ffe14d; filter: brightness(1.2) drop-shadow(0 0 7px #ffd23f); transform: scale(1.2); font-weight: 800; opacity: 1; }
.keys.sh-on .tags .a { opacity: .22; filter: brightness(.7); transform: none; }
.keys.al-on .tags .a { color: #62b8ff; filter: brightness(1.2) drop-shadow(0 0 7px #4da6ff); transform: scale(1.2); font-weight: 800; opacity: 1; }
.keys.al-on .tags .s { opacity: .22; filter: brightness(.7); transform: none; }

.gfsbtn, .gthemebtn { position: absolute; top: 3px; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--gline); background: var(--gpanel); color: var(--gfg); font-size: 15px; line-height: 1; cursor: pointer; z-index: 3; padding: 0; opacity: .85; text-shadow: none; }
.gfsbtn { right: 3px; }
.gthemebtn { right: 33px; }
.gview.is-full .gthemebtn { right: 3px; }
.sl-row output { color: var(--gdim); }
.sl-row input[type=range] { accent-color: var(--gfg); }
.lcd.gl-light .sl-row input[type=range] { accent-color: #0a6fd1; }
.gfsbar { background: var(--gpanel); border-color: var(--gline); }
.gfsbar button { border-color: var(--gline); background: var(--gbtn); color: var(--gfg); }
.gfsbar button:active { background: var(--gbtn-hi); }
.gfsbar button.wide { padding: 0 12px; }
.gpop { background: var(--gpanel); border-color: var(--gline); }

/* ---------- panels on the full-screen graph ---------- */
.gpanel { position: absolute; left: 6px; top: 6px; width: min(calc(100% - 12px), 400px); max-height: 52%; overflow: auto; z-index: 5; padding: 8px;
  background: var(--gpanel); color: var(--gfg); border: 1px solid var(--gline); border-radius: 12px; font-size: 14px; text-shadow: none; box-shadow: 0 6px 24px #0006; }
.gpanel[hidden] { display: none; }
.gpanel .ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.gpanel .px { appearance: none; border: 1px solid var(--gline); background: var(--gbtn); color: var(--gfg); border-radius: 8px; width: 28px; height: 28px; font-size: 14px; cursor: pointer; }
.gmarks .mrow { appearance: none; display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 4px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--gline); background: var(--gbtn); color: var(--gfg); font: inherit; font-size: 14px; text-align: left; }
.gmarks .mrow.on { background: var(--gfg); color: var(--gpanel); border-color: var(--gfg); }
.gmarks .mrow.on .mc { color: inherit; }
.gmarks .ml { font-weight: 700; white-space: nowrap; }
.gmarks .mc { font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.gtn .prow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.gtn label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gdim); }
.gtn select, .gtn input { font: inherit; font-size: 15px; color: var(--gfg); background: var(--gbtn); border: 1px solid var(--gline); border-radius: 8px; padding: 5px 7px; }
.gtn input { width: 7.5em; font-family: var(--mono); }
.gtn .go { appearance: none; border: 1px solid var(--gline); background: var(--gbtn); color: var(--gfg); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.gtn .pt { font-family: var(--mono); font-size: 13px; margin-bottom: 6px; }
.gtn .pl { display: grid; grid-template-columns: 12px 4.2em 1fr; gap: 6px; align-items: center; padding: 4px 0; font-size: 15px; }
.gtn .pl i { width: 12px; height: 4px; border-radius: 2px; }
.gtn .pl b { font-family: var(--mono); font-weight: 600; }
.gtn .pe { color: var(--gdim); font-size: 13px; }

.gfsbar { left: 6px; right: 6px; transform: none; width: auto; margin: 0 auto; bottom: 6px; gap: 4px; padding: 4px; }
.gfsbar button { min-width: 34px; height: 32px; padding: 0 8px; font-size: 13px; }
.gfsbar button.wide { padding: 0 10px; }
.gpanel { max-height: 36%; }
.gmarks .mrow { padding: 5px 9px; margin-bottom: 3px; font-size: 13px; }
.gmarks .mc { font-size: 13px; }

/* ---------- screen colour schemes (calculator and graph) ---------- */
.lcd { --gfg: var(--lcd-ink); --gline: var(--lcd-line); --gpanel: rgba(0, 12, 4, .95); --gbtn: #04200c; --gbtn-hi: #0b3d1a; --gdim: var(--lcd-mute); }
.lcd.th-light { --lcd: #f6f7f9; --lcd-hi: #f6f7f9; --lcd-ink: #111827; --lcd-dim: #4b5563; --lcd-mute: #6b7280; --lcd-line: #c3cbd8;
  --lcd-status: #6b7686; --lcd-mode: #0b3b8c; --lcd-flash: #e3ecff; --lcd-slot: #6b7280; --lcd-box: #e8ecf3; --lcd-box-on: #d4e2ff;
  --lcd-bg-a: #f6f7f9; --lcd-bg-b: #f6f7f9; --lcd-edge: #2b3038; --lcd-scan: transparent; --lcd-tglow: transparent; --lcd-inset: transparent;
  --gpanel: rgba(255, 255, 255, .97); --gbtn: #eef1f6; --gbtn-hi: #dfe5ee; --gdim: #5b6676; }
.lcd.th-navy { --lcd: #0f2147; --lcd-hi: #0f2147; --lcd-ink: #e8f0ff; --lcd-dim: #9db2e6; --lcd-mute: #8097cf; --lcd-line: #34508f;
  --lcd-status: #8da3d8; --lcd-mode: #ffffff; --lcd-flash: #20418e; --lcd-slot: #8097cf; --lcd-box: #17306a; --lcd-box-on: #20418e;
  --lcd-bg-a: #132a5c; --lcd-bg-b: #0f2147; --lcd-edge: #223a74; --lcd-scan: transparent; --lcd-tglow: transparent; --lcd-inset: transparent;
  --gpanel: rgba(8, 17, 42, .96); --gbtn: #17306a; --gbtn-hi: #20418e; --gdim: #9db2e6; }
.lcd.th-graphite { --lcd: #1c1f24; --lcd-hi: #1c1f24; --lcd-ink: #f1f3f5; --lcd-dim: #aeb4bd; --lcd-mute: #8b929c; --lcd-line: #3a4048;
  --lcd-status: #8b929c; --lcd-mode: #7fd0ff; --lcd-flash: #2f353d; --lcd-slot: #8b929c; --lcd-box: #272c33; --lcd-box-on: #343b45;
  --lcd-bg-a: #23272d; --lcd-bg-b: #1c1f24; --lcd-edge: #30353c; --lcd-scan: transparent; --lcd-tglow: transparent; --lcd-inset: transparent;
  --gpanel: rgba(14, 16, 19, .96); --gbtn: #272c33; --gbtn-hi: #343b45; --gdim: #aeb4bd; }
.lcd.th-amber { --lcd: #120c02; --lcd-hi: #120c02; --lcd-ink: #ffb000; --lcd-dim: #d39000; --lcd-mute: #a87200; --lcd-line: #5c3f06;
  --lcd-status: #a87200; --lcd-mode: #ffc233; --lcd-flash: #3a2703; --lcd-slot: #a87200; --lcd-box: #261a05; --lcd-box-on: #3a2a08;
  --lcd-bg-a: #1c1304; --lcd-bg-b: #100a01; --lcd-edge: #3a2a08; --lcd-scan: rgba(0, 0, 0, .14); --lcd-tglow: rgba(255, 176, 0, .35); --lcd-inset: rgba(255, 176, 0, .07);
  --gpanel: rgba(20, 12, 0, .96); --gbtn: #261a05; --gbtn-hi: #3a2a08; --gdim: #d39000; }
.lcd.th-light, .lcd.th-navy, .lcd.th-graphite { text-shadow: none; }
.lcd.th-light { box-shadow: inset 0 0 0 1px #d5dae3, 0 0 0 4px #14171b, 0 0 0 5px var(--lcd-edge); }
.lcd.th-light .status .on, .lcd.th-light .status .flash { text-shadow: none; }
.lcd.th-light ::selection { background: #0b3b8c33; }
.lcd.th-light .row.sel, .lcd.th-navy .row.sel, .lcd.th-graphite .row.sel, .lcd.th-amber .row.sel { text-shadow: none; }

/* ---------- OK pad (arrows around OK) ---------- */
.keys .grid6 { --kh: clamp(30px, 3.9dvh, 44px); --th: 15px; }
.padwrap { grid-column: span 2; grid-row: span 2; display: grid; place-items: center; min-width: 0; }
.dpad { position: relative; width: min(100%, max(108px, calc(2 * (var(--kh) + var(--th)) + 4px))); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3a414b 0%, #262b32 70%); border: 2px solid var(--key-edge);
  box-shadow: 0 3px 0 #0a0c0f, 0 0 0 1px #0007, inset 0 0 14px #0006; }
.dpad .pd { position: absolute; appearance: none; border: 0; padding: 0; background: transparent; color: var(--key-ink); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.dpad .pd::after { content: ""; position: absolute; inset: -5px; }
.dpad .pd svg { width: 38%; height: auto; min-width: 14px; }
.dpad .pd:active:not(.ok) { color: var(--teal); transform: scale(.92); }
.dpad .up { left: 50%; top: 2%; width: 36%; height: 28%; transform: translateX(-50%); }
.dpad .down { left: 50%; bottom: 2%; width: 36%; height: 28%; transform: translateX(-50%); }
.dpad .left { top: 50%; left: 2%; width: 28%; height: 36%; transform: translateY(-50%); }
.dpad .right { top: 50%; right: 2%; width: 28%; height: 36%; transform: translateY(-50%); }
.dpad .up:active, .dpad .down:active { transform: translateX(-50%) scale(.92); }
.dpad .left:active, .dpad .right:active { transform: translateY(-50%) scale(.92); }
.dpad .ok { left: 50%; top: 50%; width: 40%; height: 40%; transform: translate(-50%, -50%); border-radius: 50%; font: inherit; font-weight: 800; font-size: clamp(12px, 3.6vw, 16px); letter-spacing: .5px;
  background: linear-gradient(#ffffff, #d6dbe2); color: #1b1f25; box-shadow: 0 2px 0 #0a0c0f, 0 0 0 2px #ffffffaa; }
.dpad .ok:active { transform: translate(-50%, -48%) scale(.95); box-shadow: 0 0 0 #0a0c0f, 0 0 0 2px #ffffffaa; }
@media (min-width: 801px) { .keys .grid6 { --kh: 44px; --th: 19px; } }

/* ---------- menu sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: #1b1f25; color: #e7ebf1;
  padding-top: env(safe-area-inset-top); animation: sheet-in .18s ease-out; }
.sheet[hidden] { display: none; }
@keyframes sheet-in { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-h { position: relative; display: flex; align-items: center; justify-content: center; padding: 14px 16px 12px; border-bottom: 1px solid #2c323b; flex: 0 0 auto; }
.sheet-h h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .2px; }
.sheet-x { position: absolute; left: 14px; top: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #2c3139; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 1px #ffffff1a; }
.sheet-b { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 max(24px, env(safe-area-inset-bottom)); max-width: 640px; width: 100%; margin: 0 auto; }
.sh { margin: 18px 18px 6px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #8d97a6; }
.srow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 18px; background: transparent; border: 0; border-bottom: 1px solid #2a2f37; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 64px; }
.srow:active { background: #262b33; }
.srow.on { background: #3ec1f0; color: #06222e; }
.srow.on .mt small { color: #0a3a4d; }
.srow.on .mi { color: #06222e; background: #ffffff55; }
.mi { flex: 0 0 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: #2a3039; color: #cfe3ff; position: relative; font-size: 13px; }
.mt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mt b { font-size: 16px; font-weight: 600; font-family: var(--mono); letter-spacing: .2px; white-space: normal; }
.mt small { font-size: 13px; color: #98a3b3; }
.ic-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 34px; }
.ic-calc i { font-style: normal; font-weight: 800; font-size: 13px; line-height: 15px; text-align: center; border-radius: 4px; background: #4da6ff; color: #04182e; }
.ic-mat { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; font-family: var(--mono); font-weight: 700; font-size: 15px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; padding: 1px 6px; border-radius: 5px; }
.ic-mat i { font-style: normal; }
.ic-poly { font-weight: 700; font-size: 22px; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.ic-poly sup { font-size: 14px; }
.ic-sys { display: flex; align-items: center; gap: 2px; font-family: Georgia, serif; font-style: italic; }
.ic-sys b { font-size: 34px; font-weight: 300; line-height: 1; font-style: normal; }
.ic-sys span { display: flex; flex-direction: column; font-size: 11px; line-height: 1.15; }
.ic-sys i { font-style: italic; white-space: nowrap; }
.ic-ineq { font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 18px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ic-ineq sup { font-size: 11px; }
.ic-ineq em { font-style: normal; font-size: 13px; margin-top: 3px; }
.ic-txt { font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center; }
.ic-txt.mono { font-family: var(--mono); border: 1.5px solid currentColor; border-radius: 6px; padding: 3px 4px; }
.ic-big { font-size: 26px; font-weight: 700; font-family: Georgia, serif; }
.ic-cap { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 9px; font-family: var(--mono); color: inherit; opacity: .9; }
.ic-cap.vec { font-size: 15px; bottom: 21px; font-style: italic; font-family: Georgia, serif; }
.sineq { cursor: default; flex-wrap: nowrap; }
.sineq:active { background: transparent; }
.rels { display: flex; gap: 6px; flex: 0 0 auto; }
.rels button { width: 40px; height: 40px; border-radius: 11px; border: 1px solid #3a4250; background: #2a3039; color: #e7ebf1; font: inherit; font-size: 20px; font-weight: 600; cursor: pointer; }
.rels button:active { background: #3ec1f0; color: #06222e; border-color: #3ec1f0; }
.tsec { padding: 4px 18px 10px; }
.tl { margin: 10px 0 8px; font-size: 14px; font-weight: 600; color: #cfd6e0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tchip { appearance: none; border: 2px solid #3a4250; border-radius: 14px; background: #222830; color: #cfd6e0; padding: 7px 8px 6px; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 5px; font: inherit; cursor: pointer; }
.tchip i { font-style: normal; font-family: var(--mono); font-weight: 700; font-size: 17px; width: 100%; text-align: center; border-radius: 8px; padding: 8px 0; background: var(--tb); color: var(--ti); box-shadow: inset 0 0 0 1px #ffffff22; }
.tchip small { font-size: 12px; }
.tchip.on { border-color: #3ec1f0; color: #fff; box-shadow: 0 0 0 2px #3ec1f044; }
body.sheet-open { overflow: hidden; }

/* area panel */
.gar .pl { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 15px; gap: 10px; }
.gar .pl b { font-family: var(--mono); font-weight: 600; }
.gar .pl.big { font-size: 18px; }
.gar .pl.big b { font-size: 20px; }
.gar .pt { font-size: 12px; margin-bottom: 4px; color: var(--gdim); }
.gar .pe { color: var(--gdim); font-size: 13px; }
.gar label, .gar select, .gar input { font-size: 13px; }
.gar .prow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.gar label { display: flex; align-items: center; gap: 6px; color: var(--gdim); }
.gar select, .gar input { font: inherit; font-size: 15px; color: var(--gfg); background: var(--gbtn); border: 1px solid var(--gline); border-radius: 8px; padding: 5px 7px; }
.gar input { width: 6.5em; font-family: var(--mono); }
.gar .go { appearance: none; border: 1px solid var(--gline); background: var(--gbtn); color: var(--gfg); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }

/* sheet refinements */
.sineq { flex-wrap: wrap; row-gap: 10px; align-items: center; padding-bottom: 14px; }
.sineq .mt { flex: 1 1 0; min-width: 0; }
.sineq .rels { flex: 1 1 100%; margin-left: 66px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: -2px; }
.sineq .rels button { width: 100%; height: 38px; }
.chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tchip { width: 100%; padding: 6px 4px 5px; border-radius: 12px; }
.tchip i { font-size: 15px; padding: 7px 0; }
.tchip small { font-size: 11px; }
.dpad .pd svg { width: 46%; }

.gpanel .ph span { display: flex; gap: 6px; }
.gpanel .pm { appearance: none; border: 1px solid var(--gline); background: var(--gbtn); color: var(--gfg); border-radius: 8px; width: 28px; height: 28px; font-size: 16px; line-height: 1; cursor: pointer; }
.gpanel.min .prow { display: none; }
.gpanel.min { padding-bottom: 4px; }
.dpad .pd svg { width: 64%; }

/* OK pad: more room between the arrows and OK */
.dpad .ok { width: 33%; height: 33%; font-size: clamp(11px, 3.1vw, 14px); }
.dpad .up { top: 0; width: 34%; height: 26%; }
.dpad .down { bottom: 0; width: 34%; height: 26%; }
.dpad .left { left: 0; width: 26%; height: 34%; }
.dpad .right { right: 0; width: 26%; height: 34%; }
.dpad .pd svg { width: 56%; }

/* OK pad: bigger OK and arrows, arrows nudged outward */
.dpad .ok { width: 38%; height: 38%; font-size: clamp(12px, 3.5vw, 16px); }
.dpad .up { top: -3%; width: 36%; height: 29%; }
.dpad .down { bottom: -3%; width: 36%; height: 29%; }
.dpad .left { left: -3%; width: 29%; height: 36%; }
.dpad .right { right: -3%; width: 29%; height: 36%; }
.dpad .pd svg { width: 70%; }

/* ---------- Math / Physics tabs, formula pages ---------- */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 6px; }
.tab { appearance: none; border: 2px solid #343b46; background: #232830; color: #cfd6e0; border-radius: 16px; padding: 12px 10px 10px; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tab b { font-size: 19px; letter-spacing: .3px; }
.tab small { font-size: 12px; color: #8d97a6; }
.tab.on { background: linear-gradient(135deg, #1f7bd8, #26c6c0); border-color: #7fe3ff; color: #fff; box-shadow: 0 4px 14px #19b6d655; }
.tab.on small { color: #e6fbff; }
.srch { padding: 10px 16px 4px; }
.srch input { width: 100%; font: inherit; font-size: 16px; color: #e7ebf1; background: #232830; border: 1px solid #343b46; border-radius: 12px; padding: 12px 14px; outline: none; }
.srch input:focus { border-color: #3ec1f0; }
.mt.sans b { font-family: var(--font); font-size: 16.5px; }
.mt .eqs { font-family: var(--mono); font-size: 12.5px; color: #8fa4c4; white-space: normal; word-break: break-word; }
.chev { color: #6c7686; font-size: 26px; line-height: 1; padding-left: 4px; }
.tile { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 21px; color: #cfe3ff; }
.frow { min-height: 58px; }
.shint { padding: 12px 20px; color: #98a3b3; font-size: 14px; line-height: 1.5; }
.ref { padding: 6px 0 24px; }
.rf { padding: 11px 18px; border-bottom: 1px solid #2a2f37; display: flex; flex-direction: column; gap: 3px; }
.rf b { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #8d97a6; min-height: 1px; }
.rf span { font-size: 15.5px; line-height: 1.5; color: #e7ebf1; font-family: var(--mono); word-break: break-word; }

/* solver */
.eqcard { margin: 14px 16px 6px; padding: 16px 14px; border-radius: 16px; background: #232830; border: 1px solid #343b46; text-align: center; }
.eqt { font-family: var(--mono); font-size: 20px; line-height: 1.4; color: #fff; word-break: break-word; }
.eqn { margin-top: 6px; font-size: 13px; color: #98a3b3; }
.sl2 { margin: 16px 18px 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #8d97a6; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.fchip { appearance: none; border: 1.5px solid #3a4250; background: #232830; color: #cfd6e0; border-radius: 12px; padding: 7px 10px 6px; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 64px; max-width: 150px; }
.fchip b { font-family: Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.1; }
.fchip small { font-size: 10.5px; color: #8d97a6; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip.on { background: #3ec1f0; border-color: #3ec1f0; color: #06222e; }
.fchip.on small { color: #0a3a4d; }
.sflds { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.sfld { display: flex; align-items: center; gap: 10px; }
.sfld label { flex: 1 1 42%; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; color: #e7ebf1; }
.sfld label em { font-family: Georgia, serif; font-size: 13px; color: #8fa4c4; }
.sfi { flex: 1 1 58%; display: flex; align-items: center; gap: 6px; background: #232830; border: 1px solid #343b46; border-radius: 12px; padding: 4px 10px 4px 4px; }
.sfi:focus-within { border-color: #3ec1f0; }
.sfi input, .sfi select { flex: 1; min-width: 0; font: inherit; font-size: 17px; font-family: var(--mono); color: #fff; background: transparent; border: 0; outline: none; padding: 9px 4px; }
.sfi select { font-family: var(--font); font-size: 15px; }
.sfi b { font-weight: 500; font-size: 13px; color: #98a3b3; white-space: nowrap; }
.sgn { appearance: none; border: 0; width: 34px; height: 34px; border-radius: 9px; background: #2e3541; color: #cfd6e0; font: inherit; font-size: 16px; cursor: pointer; flex: 0 0 auto; }
.sgn:active { background: #3ec1f0; color: #06222e; }
.rcard { margin: 18px 16px 8px; padding: 16px; border-radius: 16px; background: #232830; border: 1px solid #343b46; }
.rcard.ok { background: linear-gradient(135deg, #12354a, #163d3a); border-color: #2e8aa8; }
.rcard.bad { border-color: #8a4a4a; background: #2f2226; }
.rl { font-size: 13px; color: #a9b6c9; }
.rl em { font-family: Georgia, serif; color: #8fd6ff; }
.rv { font-size: 34px; font-weight: 700; margin: 6px 0 2px; font-family: var(--mono); color: #fff; word-break: break-word; }
.rv u { text-decoration: none; font-size: 18px; font-weight: 500; color: #9fe3ff; margin-left: 4px; }
.ro { margin-top: 4px; font-size: 14px; color: #c9d6e6; font-family: var(--mono); }
.rw { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ffffff22; font-family: var(--mono); font-size: 13.5px; color: #b5c4d8; word-break: break-word; }
.rh { margin-top: 6px; font-size: 14.5px; color: #98a3b3; line-height: 1.45; }
.racts { margin-top: 12px; display: flex; gap: 8px; }
.racts button { appearance: none; border: 1px solid #5aa7c4; background: #ffffff14; color: #fff; border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.racts button:active { background: #3ec1f0; color: #06222e; }
.sconst { margin: 4px 18px 26px; font-size: 12.5px; color: #8d97a6; line-height: 1.5; }

/* ---------- left drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.dr-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background .18s; }
.drawer.open .dr-scrim { background: rgba(0, 0, 0, .55); }
.dr-panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(84vw, 340px); display: flex; flex-direction: column; background: #20242b; color: #e7ebf1; transform: translateX(-102%); transition: transform .2s ease-out;
  padding-top: env(safe-area-inset-top); box-shadow: 8px 0 30px #0009; }
.drawer.open .dr-panel { transform: none; }
.dr-head { display: flex; align-items: center; gap: 14px; margin: 14px 14px 8px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, #1f7bd8, #19d3e0); color: #fff; }
.dr-head img { width: 48px; height: 48px; border-radius: 12px; }
.dr-head b { font-size: 20px; display: block; }
.dr-head small { font-size: 12px; opacity: .92; line-height: 1.3; display: block; }
.dr-list { flex: 1; overflow-y: auto; padding: 4px 6px; -webkit-overflow-scrolling: touch; }
.dr-item { appearance: none; width: 100%; display: flex; align-items: center; gap: 16px; padding: 14px 14px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 18px; text-align: left; border-radius: 12px; cursor: pointer; }
.dr-item:active { background: #2b313a; }
.dr-ic { width: 28px; display: grid; place-items: center; color: #dfe7f3; }
.dr-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid #2c323b; }
.dr-mini { appearance: none; border: 0; background: #2a3039; color: #dfe7f3; border-radius: 14px; padding: 10px 4px 9px; font: inherit; font-size: 12.5px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; position: relative; }
.dr-mini svg { width: 24px; height: 24px; }
.dr-sw { width: 28px; height: 14px; border-radius: 8px; background: #4a5260; position: relative; display: block; }
.dr-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform .15s; }
.dr-sw.on { background: #3ec1f0; }
.dr-sw.on::after { transform: translateX(14px); }

/* roomier solver fields: label on top, input underneath */
.sflds { gap: 12px; }
.sfld { flex-direction: column; align-items: stretch; gap: 5px; }
.sfld label { flex: none; flex-direction: row; justify-content: space-between; align-items: baseline; font-size: 14px; }
.sfld label em { font-size: 14px; }
.sfi { flex: none; }

/* ---------- Statistics tab ---------- */
.tabs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tab { padding: 10px 6px 8px; }
.tab b { font-size: 17px; }
.tab small { font-size: 11px; text-align: center; }
.sfi.tall { height: auto; align-items: stretch; }
.sfi textarea { width: 100%; box-sizing: border-box; background: transparent; color: inherit; border: 0; outline: 0; font: inherit; font-size: 16px; padding: 10px 12px; resize: vertical; min-height: 44px; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 16px 0; }
.drow { display: flex; flex-direction: column; background: #232830; border: 1px solid #343b46; border-radius: 12px; padding: 8px 12px; }
.drow span { font-size: 12px; color: #8d97a6; }
.drow b { font-size: 18px; margin-top: 2px; word-break: break-all; }
.dnote { padding: 10px 18px 0; font-size: 13px; color: #aab3c0; }
.hist, .box { display: block; width: calc(100% - 32px); margin: 12px 16px 0; }
.hist rect { fill: #26c6c0; }
.hist text, .box text { fill: #8d97a6; font-size: 10px; }
.box line { stroke: #cfd6e0; stroke-width: 2; }
.box rect { fill: #1f7bd855; stroke: #7fe3ff; stroke-width: 2; }
.box .med { stroke: #ffd24a; stroke-width: 3; }
.box circle { fill: #ff6b6b; }
.shint.bad { color: #ff8c8c; }
.hist { max-height: 170px; }
.box { max-height: 60px; }

.dgrid.one { grid-template-columns: 1fr; }
.fhint { font-size: 12px; color: #8d97a6; padding: 4px 4px 0; }
.sfi select { width: 100%; background: transparent; color: inherit; border: 0; font: inherit; font-size: 15px; padding: 10px 6px; outline: 0; }
.sfi select option { color: #111; }
.sfi input[type=text][data-tf] { width: 100%; background: transparent; color: inherit; border: 0; outline: 0; font: inherit; font-size: 16px; padding: 10px 8px; }
.tnotes { padding: 12px 18px 0; color: #aab3c0; font-size: 13px; line-height: 1.45; }
.tnotes h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #8d97a6; }
.tnotes p { margin: 3px 0; }
.tnotes { padding-bottom: 14px; }

.steps { padding: 14px 16px 6px; }
.steps h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .7px; text-transform: uppercase; color: #8d97a6; }
.step { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #2c323c; }
.step .sn { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #1f7bd8; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.step .sb { min-width: 0; flex: 1; }
.step .sb b { display: block; font-size: 15px; margin-bottom: 3px; }
.step .sb p { margin: 3px 0; font-size: 14px; line-height: 1.45; color: #cfd6e0; overflow-wrap: anywhere; }
.step .sb pre { margin: 6px 0 2px; padding: 8px 10px; background: #1b1f25; border: 1px solid #2c323c; border-radius: 10px; font: 12.5px/1.5 ui-monospace, Menlo, monospace; color: #dfe6f0; overflow-x: auto; white-space: pre; }