/* CADENCE — PIXEL theme. Ported from the Writing Hub "Pixel Arcade" spec (DESIGN.md s11 +
   theme-arcade.css), judged against its approved mockup rather than as a re-tint of Clay.
   The failure mode named in that spec is "you washed it out": keep the deep saturated wells and
   the hard bevels.

   EVERYTHING here is scoped under [data-theme="pixel"], so the other three themes cannot be
   touched by it. Loaded after app.css; one attribute of extra specificity wins every tie.

   Two halves:
     1. hand-written: tokens, frames, controls, fonts
     2. GENERATED by tools/pixel-theme-build.mjs: type sizes, re-emitted from app.css.
        Edit the tool, not the block -- the tests fail if the block is stale. */

/* ---------- tokens ---------- */
[data-theme="pixel"]{
  --page:#0a0e17; --card:#1b2435; --card2:#141b29;
  --ink:#eef3fc; --sub:#c3d1ea; --faint:#8ea3c8; --line:#26324a;
  --track:#0f1520; --checkline:#3d5076; --navoff:#8ea3c8;
  --a:#1e90ff; --on:#ffffff; --soft:#123a6b;
  --blocksoft:rgba(195,209,234,.10);
  --danger:#ff5a6e;
  --ok:#38e0a0;
  /* scanlines over a glow from the top, on the app column (.app paints var(--page) over the body,
     so a body background would never be seen) */
  --wash:linear-gradient(#ffffff05 1px,transparent 1px) 0 0/100% 4px,radial-gradient(ellipse at 50% 0,#13213a,transparent 70%);
  /* THE FRAME RECIPE, F(edge,hi,lo,w): four hard outer shadows in the edge colour -- so the corner
     pixel stays empty, like a sprite -- plus an inset top highlight and bottom shade for the bevel.
     The tokens carry the generic versions; stateful elements write their own below, because a
     custom property is resolved where it is DEFINED, so a token cannot pick up a per-row colour. */
  --sh-card:0 -3px 0 0 #06090f,0 3px 0 0 #06090f,-3px 0 0 0 #06090f,3px 0 0 0 #06090f,inset 0 3px 0 0 #3a4b6b,inset 0 -3px 0 0 #0f1520;
  --sh-row:0 -3px 0 0 #06090f,0 3px 0 0 #06090f,-3px 0 0 0 #06090f,3px 0 0 0 #06090f,inset 0 3px 0 0 #26324a,inset 0 -3px 0 0 #0a0e17;
  --sh-nav:0 -3px 0 0 #06090f,0 3px 0 0 #06090f,-3px 0 0 0 #06090f,3px 0 0 0 #06090f,inset 0 3px 0 0 #3a4b6b,inset 0 -3px 0 0 #0f1520,0 12px 30px #000c;
  --sh-acc:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #58b4ff,inset 0 -2px 0 0 #0d4a96,0 0 12px #1e90ff77;
  --sh-inset:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #05080d,inset 0 -2px 0 0 #1a2333;
  --sh-peb:0 0 0 2px #06090f,inset 0 2px 0 0 #26324a;
  --sh-pebon:0 0 0 2px #06090f,inset 0 2px 0 0 #58b4ff,inset 0 -2px 0 0 #0d4a96,0 0 8px #1e90ff88;
  --sh-tile:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #4a608c,inset 0 -2px 0 0 #121a2a;
  --pipink:#eef3fc; --pipring:#06090f;
  --dotbg:#0f1520; --dotink:#c3d1ea;
  --swborder:#06090f; --swring:#ffffff;
  --r-xl:0px; --r-lg:0px; --r-md:0px; --r-sm:0px; --r-nav:0px;
  --px:'Jersey 10',Quicksand,system-ui,sans-serif;
}

/* ---------- SQUARE, everywhere ----------
   35 radii in app.css are hardcoded rather than tokenised -- 18 of them border-radius:50% -- so
   zeroing the tokens alone would leave circles all over a pixel screen. One rule, every element
   and pseudo-element, and a test that asserts it stays here. */
[data-theme="pixel"] *,[data-theme="pixel"] *::before,[data-theme="pixel"] *::after{border-radius:0!important}
/* the progress box is an SVG <rect rx>, which border-radius cannot reach */
[data-theme="pixel"] .pbox rect{rx:0;ry:0}

/* ---------- frames ----------
   border-color:transparent rather than border:0, so every box keeps its exact size: a pixel theme
   must not move a single row, or the locked layouts (month = 62vh, the nav, the sheet) move too.
   The background still fills under the transparent border, so it reads as one solid tile. */
[data-theme="pixel"] :is(.card,.hero,.tlwrap,.nowtimer,.cp-panel,.pvatot,
  .row,.set,.stat,.qcard,.grow,.pvagrp,.frow,.tbox,.tile,.runnow,.noterow,.segrow,.frzbanner,.nextchip,.fm-opt){
  border-color:transparent}
[data-theme="pixel"] :is(.card,.hero,.tlwrap,.nowtimer,.cp-panel,.pvatot){box-shadow:var(--sh-card)}
[data-theme="pixel"] :is(.row,.set,.stat,.qcard,.grow,.pvagrp,.frow,.tbox,.tile,.runnow,.noterow,.segrow,.nextchip,.fm-opt){box-shadow:var(--sh-row)}
/* A SCROLLER CLIPS WHAT HANGS OUTSIDE IT. The frame is drawn OUTSIDE each box, and a row inside a
   swipe track (every habit on Home) or a chip in a sideways scroller would lose its top and bottom
   edge to the clip. Padding makes the room; the matching negative margin gives it back, so the
   list is exactly as long as it was. */
[data-theme="pixel"] .swipe{padding:3px;margin:-3px -3px 3px;scroll-padding:0 3px}
[data-theme="pixel"] :is(.chips.chipgrid,.hcats,.chips.planchips,.sheetscroll){padding:3px;margin-left:-3px;margin-right:-3px}

/* states used to live on the BORDER colour; with the border gone they move onto the bevel.
   CAREFUL WITH :is() HERE. It takes the specificity of its MOST specific argument, so one heavy
   selector in a list lifts every light one with it. The drag selectors were in this list and made
   the running state outrank the paused rule below -- a paused card glowed exactly like a running
   one. They have a rule of their own now. */
[data-theme="pixel"] :is(.nowtimer,.runnow,.tbox.running,.tile.paused,.segrow.live,.frzbanner){
  box-shadow:0 -3px 0 0 #06090f,0 3px 0 0 #06090f,-3px 0 0 0 #06090f,3px 0 0 0 #06090f,inset 0 3px 0 0 #1e90ff,inset 0 -3px 0 0 #0b2246,0 0 12px #1e90ff55}
[data-theme="pixel"] .swipe.dragging>.row,[data-theme="pixel"] .tbox.dragging{
  box-shadow:0 -3px 0 0 #06090f,0 3px 0 0 #06090f,-3px 0 0 0 #06090f,3px 0 0 0 #06090f,inset 0 3px 0 0 #1e90ff,inset 0 -3px 0 0 #0b2246,0 0 18px #1e90ff88}
[data-theme="pixel"] :is(.runnow.paused,.tbox.paused){
  box-shadow:0 -3px 0 0 #06090f,0 3px 0 0 #06090f,-3px 0 0 0 #06090f,3px 0 0 0 #06090f,inset 0 3px 0 0 #4a5a78,inset 0 -3px 0 0 #0a0e17}
[data-theme="pixel"] :is(.noterow.lapse,.frow.flapse,.hrow.arow.lapsed){
  box-shadow:0 -3px 0 0 #06090f,0 3px 0 0 #06090f,-3px 0 0 0 #06090f,3px 0 0 0 #06090f,inset 0 3px 0 0 #ff5a6e,inset 0 -3px 0 0 #3a1622}
/* overdue is stated, not shouted -- amber, as everywhere else in the app */
[data-theme="pixel"] .hrow.tlate{
  box-shadow:0 -3px 0 0 #06090f,0 3px 0 0 #06090f,-3px 0 0 0 #06090f,3px 0 0 0 #06090f,inset 0 3px 0 0 #ffc24a,inset 0 -3px 0 0 #3a2f12}

/* the strip of light along the top of a panel, from the mockup */
[data-theme="pixel"] .card::before,[data-theme="pixel"] .tlwrap::before{content:"";display:block;height:3px;margin:-9px 8px 6px;
  background:linear-gradient(90deg,transparent,#4fd2ff 20%,#1e90ff 50%,#4fd2ff 80%,transparent);box-shadow:0 0 10px #1e90ff;opacity:.85}
[data-theme="pixel"] .tlwrap::before{margin:0}

/* ---------- controls ---------- */
/* raised: the steel button.
   States that MEAN something are excluded from this list (.due:not(.late)) rather than restated after
   it at a higher specificity. :is() takes its heaviest argument's specificity, so this rule outranks
   app.css's state rules; a restatement can be out-ranked again by the next selector anyone adds to
   the list, an exclusion cannot. A late quest's chip stayed steel instead of red until this. */
[data-theme="pixel"] :is(.btn.ghost,.xbtn,.tbox .tbb,.runnow .rnb,.ntbtn,.icob,.zoomb button,.mnavb button,.qrow .nowb,
  .sacts .sa,.tb-back,.sheet h3 .x,.durs button,.daychips button,.qcar,.chip,.subcn,.due:not(.late),.mlabel){
  border-color:transparent;background:#26324a;color:var(--ink);
  box-shadow:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #4a608c,inset 0 -2px 0 0 #121a2a}
/* pressed / primary: lit blue */
[data-theme="pixel"] :is(.btn:not(.ghost),.chip.on,.chip.go,.durs button.on,.daychips button.on,.seg button.on,.tbox .tbb.pri,
  .icob.on,.ntbtn.stop,.planadd,.satc.on,.check.on,.segk.sgadd,.ggoal.met,.lvl,.hrow .xbtn.hq.on){
  border-color:transparent;background:#1673d6;color:#fff;text-shadow:0 0 6px #9fd6ff;
  box-shadow:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #58b4ff,inset 0 -2px 0 0 #0d4a96,0 0 10px #1e90ff88}
[data-theme="pixel"] :is(.btn:not(.ghost),.ntbtn.stop,.planadd,.chip.go,.tbox .tbb.pri,.icob.on) svg{stroke:#fff}
/* the browse tile keeps its dashed "more" edge, but on the steel button */
[data-theme="pixel"] .icob-browse{border-color:#4a608c!important}
/* destructive: red text on a dark plum plate, never a red FILL -- a filled red button reads as an alarm */
[data-theme="pixel"] :is(.tbox .tbb.stp,.runnow .rnb.stp,.sacts .sa.danger){
  background:#2a1621;color:var(--danger);
  box-shadow:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #4a2232,inset 0 -2px 0 0 #1a0d14}
/* a segmented control is a WELL the buttons sit down in */
[data-theme="pixel"] .seg{background:#0d1320;padding:4px;gap:4px;
  box-shadow:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #0c111b,inset 0 -2px 0 0 #222d42}
[data-theme="pixel"] .seg button:not(.on){background:#141b29;color:var(--sub);
  box-shadow:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #26324a,inset 0 -2px 0 0 #0c111b}
/* dashed means "nothing chosen yet" in this app; keep it readable on steel */
[data-theme="pixel"] .chips.qi-unset .chip,[data-theme="pixel"] .chip.alt.add{background:#141b29;outline:1px dashed #4a608c;outline-offset:-4px}

/* ---------- wells: bars, checks, inputs ---------- */
[data-theme="pixel"] :is(.bar,.qbar,.pvbar,.baltrack,.check:not(.on),.satc:not(.on)){
  background:#070b12;border-color:transparent;
  box-shadow:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #05080d,inset 0 -2px 0 0 #1a2333}
[data-theme="pixel"] .bar,[data-theme="pixel"] .qbar{height:10px}
/* the XP bar: the spec's blue-to-white charge */
[data-theme="pixel"] .bar i{background:linear-gradient(90deg,#0d5fc0,#1e90ff 70%,#bfe9ff 96%,#fff);box-shadow:0 0 8px #1e90ff}
/* a quest bar keeps its band colour (set inline, by hours logged) and gains a bevel of its own */
[data-theme="pixel"] :is(.qbar i,.pvbar i,.balfill){box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.35)}
[data-theme="pixel"] :is(.tin,.stepin,.notein,.timein input,.setime .fg input,.ib-search,.cp-hex,.pmaprow select){
  background:#0f1520;border-color:transparent;
  box-shadow:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #05080d,inset 0 -2px 0 0 #1a2333}
[data-theme="pixel"] :is(.tin,.stepin,.notein,.timein input,.setime .fg input,.ib-search,.cp-hex):focus{
  border-color:transparent;
  box-shadow:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #05080d,inset 0 -2px 0 0 #1a2333,0 0 0 2px #1e90ff,0 0 10px #1e90ff88}
[data-theme="pixel"] .pmaprow select.set{outline:2px solid #1e90ff;outline-offset:-2px}
[data-theme="pixel"] .subrow .stedit:focus{background:#0f1520;border-color:#1e90ff}

/* ---------- small square tiles: badges, pips, swatches ---------- */
[data-theme="pixel"] :is(.buddy,.dotc.ic,.row .dot,.tbox .tbic,.runnow .rnic,.ntic,.tile .tic){
  border-color:transparent;box-shadow:0 0 0 2px #06090f,inset 0 2px 0 0 #26324a,inset 0 -2px 0 0 #05080d}
[data-theme="pixel"] .buddy{background:#123a6b}
[data-theme="pixel"] .buddy svg{stroke:#4fd2ff}
[data-theme="pixel"] .lvl b,[data-theme="pixel"] .lvl small{color:#fff}
[data-theme="pixel"] .peb{width:14px;height:14px}
[data-theme="pixel"] .swc{box-shadow:0 0 0 2px #06090f,inset 0 2px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.3)}
[data-theme="pixel"] .fm-opt .tile{background:#26324a;border-color:transparent;color:#4fd2ff}
[data-theme="pixel"] .balmark{box-shadow:0 0 0 2px #06090f}

/* ---------- chrome: nav, sheet, toast ---------- */
[data-theme="pixel"] .nav{border-color:transparent}
[data-theme="pixel"] .nav a.on{color:#4fd2ff;text-shadow:0 0 8px #1e90ff}
[data-theme="pixel"] .nav .fab{border-color:transparent;background:#1673d6;
  box-shadow:0 -3px 0 0 #06090f,0 3px 0 0 #06090f,-3px 0 0 0 #06090f,3px 0 0 0 #06090f,inset 0 3px 0 0 #58b4ff,inset 0 -3px 0 0 #0d4a96,0 0 14px #1e90ff88}
[data-theme="pixel"] .nav .fab svg{stroke:#fff}
[data-theme="pixel"] .nav .fab.x{background:#0d1320;box-shadow:0 -3px 0 0 #06090f,0 3px 0 0 #06090f,-3px 0 0 0 #06090f,3px 0 0 0 #06090f,inset 0 3px 0 0 #1e90ff,inset 0 -3px 0 0 #0b2246}
[data-theme="pixel"] .nav .fab.x svg{stroke:#4fd2ff}
/* the sheet's lit edge is an OUTER shadow: an inset one would be painted under the sticky title,
   which carries its own background, and vanish */
[data-theme="pixel"] .sheet{border-top-color:transparent;box-shadow:none}
/* only while OPEN: a closed sheet sits just below the viewport, and its upward shadow drew a blue
   line along the bottom of every screen */
[data-theme="pixel"] .sheet.open{box-shadow:0 -3px 0 0 #1e90ff,0 -6px 0 0 #06090f,0 -10px 18px #1e90ff55}
[data-theme="pixel"] .toast{box-shadow:0 -3px 0 0 #06090f,0 3px 0 0 #06090f,-3px 0 0 0 #06090f,3px 0 0 0 #06090f,inset 0 3px 0 0 #58b4ff,inset 0 -3px 0 0 #0d4a96,0 0 16px #1e90ff55}
[data-theme="pixel"] .backdrop{background:rgba(3,6,12,.72)}

/* ---------- states the broad lists above would flatten ----------
   The raised-button and well rules are deliberately broad, which makes them outrank some of
   app.css's state rules. Each state that carries meaning is restated here, so the meaning survives
   the restyle: a late quest is still red, a clean abstain habit is still an empty red outline. */
[data-theme="pixel"] .due.late{background:#ff5a6e;color:#fff;border-color:transparent;
  box-shadow:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #ff9aa8,inset 0 -2px 0 0 #a8283a}
[data-theme="pixel"] .hrow.arow .check,[data-theme="pixel"] .hrow.arow .check.on{background:transparent;
  box-shadow:0 0 0 2px #06090f,inset 0 0 0 2px #ff5a6e}
[data-theme="pixel"] .hrow.arow.lapsed .check{background:#ff5a6e;box-shadow:0 0 0 2px #06090f,inset 0 2px 0 0 #ff9aa8}
[data-theme="pixel"] .ntphase{color:#4fd2ff;background:#26324a;border-color:transparent;
  box-shadow:0 -2px 0 0 #06090f,0 2px 0 0 #06090f,-2px 0 0 0 #06090f,2px 0 0 0 #06090f,inset 0 2px 0 0 #4a608c,inset 0 -2px 0 0 #121a2a}
[data-theme="pixel"] .nowtimer.pomo.over .ntphase{background:#1673d6;color:#fff}
[data-theme="pixel"] .mnavb button.mtoday{color:#4fd2ff}
/* the streak-freeze badge. Its flame has no size rule in app.css, in ANY theme, so it renders as
   a speck beside the number; sized here for pixel. */
[data-theme="pixel"] .freeze{display:inline-flex;align-items:center;gap:3px;border-color:transparent;color:#4fd2ff;padding:1px 6px;
  box-shadow:0 0 0 2px #06090f,inset 0 2px 0 0 #26324a,inset 0 -2px 0 0 #05080d;background:#123a6b}
[data-theme="pixel"] .freeze svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0}

/* ---------- colours that app.css hardcodes, retuned for the pixel palette ----------
   Same meanings, same rule as everywhere else in the app: amber for "still to go", green for met,
   red only for a real lapse. Never red or orange for an amount of time you put in. */
[data-theme="pixel"] .bal.down .balfill{background:#ffc24a}
[data-theme="pixel"] .bal.down .ballbl b,[data-theme="pixel"] .hrow.tlate .mt{color:#ffc24a}
[data-theme="pixel"] .gheat .gc.ok{background:#1f6b4c}
[data-theme="pixel"] .pvv.met,[data-theme="pixel"] .pvbar i.met{color:#38e0a0}
[data-theme="pixel"] .pvbar i.met{background:#38e0a0}
[data-theme="pixel"] .pvv.owed{color:#ffc24a} [data-theme="pixel"] .pvbar i.owed{background:#ffc24a}
[data-theme="pixel"] .pvv.extra{color:#4fd2ff} [data-theme="pixel"] .pvbar i.extra{background:#4fd2ff}
[data-theme="pixel"] .hrow .rw.streak{color:#ffc24a}
[data-theme="pixel"] .nowline,[data-theme="pixel"] .nowline::before{background:#4fd2ff;box-shadow:0 0 6px #1e90ff}

/* ---------- type ----------
   JERSEY 10 IS THE BASE FONT, inherited by everything. It used to go only on what the APP says --
   controls, labels, clocks -- while names you typed stayed in Quicksand (the spec's "the pixel B
   reads as 8"). On a real screen that read as half-finished: every habit row was the old font with
   a pixel number beside it. So the theme is pixel all the way through.
   The ONE exception is text inside calendar blocks. Those keep their locked sizes in columns a
   seventh of the screen wide, and Jersey at 9-11px is unreadable; Quicksand at the same size is not.
   Jersey has one weight; synthesised bold smears the pixels, so it is switched off. */
[data-theme="pixel"] body,[data-theme="pixel"] :is(button,input,textarea,select){
  font-family:var(--px);font-weight:400;font-synthesis:none;letter-spacing:.02em}
/* tracking: .02em for running text so dense meta lines still fit ("not started · 10h estimated"
   truncated at the reference's .04em); headings and labels keep the wider spacing */
[data-theme="pixel"] :is(.h1,.lbl,.editlbl,.satlbl,.fday,.hero .tag,.sheet h3,.tb-title,.stat span,.nav a){letter-spacing:.04em}
/* the base size, for anything that sets none: Jersey reads ~two thirds of Quicksand at the same px */
[data-theme="pixel"] body{font-size:22px}
[data-theme="pixel"] :is(.blk,.mev,.mlap,.msat){font-family:Quicksand,system-ui,sans-serif;letter-spacing:normal;font-synthesis:weight}
[data-theme="pixel"] :is(.h1,.tb-title,.burst b){text-shadow:0 0 10px #1e90ff88}
[data-theme="pixel"] .fclock{text-shadow:0 0 14px #1e90ff66}

/* ---------- icons ----------
   The 49 icons the app draws itself are re-drawn on a 12x12 pixel grid (pixel-icons.js). The
   habit-icon LIBRARY (1,995 Lucide glyphs) cannot be, so it is rendered square-capped and
   crisp-edged instead: still vector, but with no soft rounding left on it. */
[data-theme="pixel"] svg{shape-rendering:crispEdges}
[data-theme="pixel"] svg:not(.px) :is(path,line,polyline,polygon,rect,circle,ellipse){stroke-linecap:square;stroke-linejoin:miter}
[data-theme="pixel"] svg.px{fill:none!important}

/* ============ GENERATED: type sizes (tools/pixel-theme-build.mjs) ============ */
[data-theme="pixel"] .h1{font-size:27px}
[data-theme="pixel"] .h1 small{font-size:18px}
[data-theme="pixel"] .lbl{font-size:18px}
[data-theme="pixel"] .lvl small{font-size:13px}
[data-theme="pixel"] .lvl b{font-size:23px}
[data-theme="pixel"] .xpi .r{font-size:18px}
[data-theme="pixel"] .pl{font-size:18px}
[data-theme="pixel"] .freeze{font-size:18px}
[data-theme="pixel"] .hero .tag{font-size:18px}
[data-theme="pixel"] .hero h2{font-size:24px}
[data-theme="pixel"] .hero p{font-size:18px}
[data-theme="pixel"] .btn{font-size:20px}
[data-theme="pixel"] .row .nm{font-size:19px}
[data-theme="pixel"] .row .mt{font-size:18px}
[data-theme="pixel"] .row .rw{font-size:18px}
[data-theme="pixel"] .empty{font-size:20px}
[data-theme="pixel"] .nav a{font-size:18px}
[data-theme="pixel"] .set .nm{font-size:21px}
[data-theme="pixel"] .set .mt{font-size:18px}
[data-theme="pixel"] .seg button{font-size:18px}
[data-theme="pixel"] .cstep .cnum{font-size:20px}
[data-theme="pixel"] .fm-opt .ml{font-size:20px}
[data-theme="pixel"] .sheet h3{font-size:22px}
[data-theme="pixel"] .chip{font-size:19px}
[data-theme="pixel"] #sheet .stepin{font-size:calc(21px * var(--sd-fs))}
[data-theme="pixel"] #sheet h3{font-size:calc(22px * var(--sd-fs))}
[data-theme="pixel"] #sheet .chip{font-size:calc(19px * var(--sd-fs))}
[data-theme="pixel"] #sheet .durs button{font-size:calc(20px * var(--sd-fs))}
[data-theme="pixel"] #sheet .nowb{font-size:calc(18px * var(--sd-fs))}
[data-theme="pixel"] #sheet .lprev{font-size:calc(20px * var(--sd-fs))}
[data-theme="pixel"] #sheet .notein{font-size:calc(20px * var(--sd-fs))}
[data-theme="pixel"] #sheet .btn{font-size:calc(20px * var(--sd-fs))}
[data-theme="pixel"] #sheet .satlbl{font-size:calc(18px * var(--sd-fs))}
[data-theme="pixel"] #sheet .timein label{font-size:calc(18px * var(--sd-fs))}
[data-theme="pixel"] #sheet .setime .fg label{font-size:calc(18px * var(--sd-fs))}
[data-theme="pixel"] #sheet .setime .fg input{font-size:calc(23px * var(--sd-fs))}
[data-theme="pixel"] #sheet .timein input{font-size:calc(23px * var(--sd-fs))}
[data-theme="pixel"] #sheet .timein label{font-size:calc(18px * var(--sd-fs))}
[data-theme="pixel"] #sheet .editlbl{font-size:calc(18px * var(--sd-fs))}
[data-theme="pixel"] #sheet .seg button{font-size:calc(18px * var(--sd-fs))}
[data-theme="pixel"] #sheet .daychips button{font-size:calc(18px * var(--sd-fs))}
[data-theme="pixel"] #sheet .empty{font-size:calc(20px * var(--sd-fs))}
[data-theme="pixel"] #sheet .qmeta{font-size:calc(18px * var(--sd-fs))}
[data-theme="pixel"] #sheet .nextchip{font-size:calc(18px * var(--sd-fs))}
[data-theme="pixel"] .durs button{font-size:20px}
[data-theme="pixel"] .toast{font-size:20px}
[data-theme="pixel"] .dayh small{font-size:18px}
[data-theme="pixel"] .dayh b{font-size:19px}
[data-theme="pixel"] .nextchip{font-size:18px}
[data-theme="pixel"] .hlbl{font-size:14px}
[data-theme="pixel"] .fname{font-size:20px}
[data-theme="pixel"] .fclock{font-size:73px}
[data-theme="pixel"] .ballbl{font-size:18px}
[data-theme="pixel"] .ballbl b{font-size:18px}
[data-theme="pixel"] .fphase{font-size:18px}
[data-theme="pixel"] .trimprev{font-size:18px}
[data-theme="pixel"] .trimfrom{font-size:18px}
[data-theme="pixel"] .fnote{font-size:18px}
[data-theme="pixel"] .segk{font-size:18px}
[data-theme="pixel"] .segt{font-size:18px}
[data-theme="pixel"] .segd{font-size:18px}
[data-theme="pixel"] .gnm{font-size:20px}
[data-theme="pixel"] .ggoal{font-size:18px}
[data-theme="pixel"] .gstk{font-size:18px}
[data-theme="pixel"] .gstk small{font-size:18px}
[data-theme="pixel"] .gwk{font-size:18px}
[data-theme="pixel"] .gwk small{font-size:18px}
[data-theme="pixel"] .nmeta{font-size:18px}
[data-theme="pixel"] .ntxt{font-size:19px}
[data-theme="pixel"] .qcn{font-size:18px}
[data-theme="pixel"] .qsteps .subrow .st{font-size:19px}
[data-theme="pixel"] .pvn{font-size:19px}
[data-theme="pixel"] .pva.sub .pvn{font-size:18px}
[data-theme="pixel"] .pvv{font-size:18px}
[data-theme="pixel"] .fday{font-size:18px}
[data-theme="pixel"] .fday .fdr{font-size:18px}
[data-theme="pixel"] .frow .nm{font-size:20px}
[data-theme="pixel"] .frow .mt{font-size:18px}
[data-theme="pixel"] .frow .famt{font-size:18px}
[data-theme="pixel"] .frow .fwarn{font-size:18px}
[data-theme="pixel"] .satlbl{font-size:18px}
[data-theme="pixel"] .notein{font-size:20px}
[data-theme="pixel"] .frzbanner .nm{font-size:20px}
[data-theme="pixel"] .frzbanner .mt{font-size:18px}
[data-theme="pixel"] .sacts .sa{font-size:18px}
[data-theme="pixel"] .lgd{font-size:18px}
[data-theme="pixel"] .planadd{font-size:21px}
[data-theme="pixel"] .chip.alt{font-size:18px}
[data-theme="pixel"] .mlabel{font-size:20px}
[data-theme="pixel"] .mnavb button{font-size:18px}
[data-theme="pixel"] .mwds span{font-size:18px}
[data-theme="pixel"] .mdn{font-size:18px}
[data-theme="pixel"] .pmapn{font-size:19px}
[data-theme="pixel"] .pmaprow select{font-size:18px}
[data-theme="pixel"] .pmapc{font-size:18px}
[data-theme="pixel"] .timein label{font-size:18px}
[data-theme="pixel"] .timein input{font-size:23px}
[data-theme="pixel"] .setime .fg label{font-size:18px}
[data-theme="pixel"] .setime .fg input{font-size:23px}
[data-theme="pixel"] .qrow .nowb{font-size:18px}
[data-theme="pixel"] .lprev{font-size:20px}
[data-theme="pixel"] .stat b{font-size:22px}
[data-theme="pixel"] .stat span{font-size:18px}
[data-theme="pixel"] .qcard .nm{font-size:21px}
[data-theme="pixel"] .due{font-size:18px}
[data-theme="pixel"] .qmeta{font-size:18px}
[data-theme="pixel"] .tin{font-size:22px}
[data-theme="pixel"] .stepin{font-size:21px}
[data-theme="pixel"] .stepin::placeholder{font-size:18px}
[data-theme="pixel"] .subrow .st{font-size:20px}
[data-theme="pixel"] .rescue{font-size:18px}
[data-theme="pixel"] .ntn{font-size:18px}
[data-theme="pixel"] .ntclock{font-size:36px}
[data-theme="pixel"] .tile .tnm{font-size:20px}
[data-theme="pixel"] .tile .tst{font-size:18px}
[data-theme="pixel"] .ntphase{font-size:18px}
[data-theme="pixel"] .subcn{font-size:18px}
[data-theme="pixel"] .tb-title{font-size:24px}
[data-theme="pixel"] .tbox .tbname{font-size:20px}
[data-theme="pixel"] .tbox .tbclock{font-size:34px}
[data-theme="pixel"] .tbox.idle .tbclock{font-size:25px}
[data-theme="pixel"] .tbox .tbstatus{font-size:18px}
[data-theme="pixel"] .tbox .tbmode{font-size:14px}
[data-theme="pixel"] .tbox .tbb{font-size:18px}
[data-theme="pixel"] .tbox .tbphase{font-size:18px}
[data-theme="pixel"] .runnow .rnn{font-size:18px}
[data-theme="pixel"] .runnow .rnc{font-size:25px}
[data-theme="pixel"] .runnow .rnarr{font-size:18px}
[data-theme="pixel"] .editlbl{font-size:18px}
[data-theme="pixel"] .daychips button{font-size:18px}
[data-theme="pixel"] .burst b{font-size:41px}
[data-theme="pixel"] .burst span{font-size:21px}
[data-theme="pixel"] .ib-search{font-size:23px}
[data-theme="pixel"] .cp-hex{font-size:18px}
/* ============ END GENERATED ============ */