/* ============================================================================
   skin-pop.css — the website's look, for the app.
   Active when <html data-skin="pop"> (set by ?skin=pop — the site's live
   preview uses it). Every rule is scoped, so the default dark skin is
   untouched. Tokens, type and shapes are the site's: tailwind.config.ts and
   globals.css in the site repo — ink outlines, hard "sticker" shadows,
   Baloo 2 + Nunito, the POP palette.
   ========================================================================== */

@font-face{
  font-family:"Baloo 2";src:url("../fonts/baloo2-latin.woff2") format("woff2");
  font-weight:500 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Nunito";src:url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* the site never shows these marks in the default skin */
.pop-mark{display:none}
[data-skin="pop"] .sk-dark{display:none}
[data-skin="pop"] .sk-pop{display:inline}

[data-skin="pop"]{
  --c-ink:#1A1030;--c-cream:#FFF8EE;--c-magenta:#FF2D95;--c-lime:#B6FF2E;--c-lime-deep:#7ED000;
  --c-sun:#FFD200;--c-sky:#2E7BFF;--c-grape:#8A3FFC;--c-danger:#FF3B30;

  --bg:var(--c-cream);--raise:#fff;--sheet:var(--c-cream);
  --fill-1:#fff;--fill-2:rgba(26,16,48,.07);--fill-3:rgba(26,16,48,.14);
  --hair:rgba(26,16,48,.14);--hair-strong:rgba(26,16,48,.3);
  --ink:var(--c-ink);--ink-2:rgba(26,16,48,.78);--ink-3:rgba(26,16,48,.62);--ink-4:rgba(26,16,48,.45);
  --calm:var(--c-lime-deep);--warm:var(--c-sun);--hot:var(--c-danger);

  --sans:"Nunito",ui-rounded,system-ui,sans-serif;
  --display:"Baloo 2","Nunito",ui-rounded,system-ui,sans-serif;
  --mono:"Baloo 2","Nunito",ui-rounded,system-ui,sans-serif;

  --pop-sm:0 3px 0 0 var(--c-ink);--pop:0 5px 0 0 var(--c-ink);--pop-lg:0 8px 0 0 var(--c-ink);
  --edge:3px solid var(--c-ink);
  --r-panel:26px;--r-btn:999px;--r-row:20px;
  color-scheme:light;
}
[data-skin="pop"] body{background:var(--bg);letter-spacing:0;font-weight:600}
[data-skin="pop"] h1,[data-skin="pop"] h2,[data-skin="pop"] h3{font-family:var(--display);font-weight:800;letter-spacing:-.01em}
[data-skin="pop"] ::selection{background:var(--c-magenta);color:#fff}

/* sticker text — white/yellow fill with a thick ink stroke, as in the site hero */
[data-skin="pop"] .outline{-webkit-text-stroke:3px var(--c-ink);paint-order:stroke fill}

/* ══ BUTTONS ══ */
[data-skin="pop"] .btn{
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  border:var(--edge);border-radius:999px;box-shadow:var(--pop);padding:12px 20px 11px;font-size:16px;
  transition:transform .15s ease-out,box-shadow .15s ease-out;
}
[data-skin="pop"] .btn:hover:not(:disabled){transform:translateY(-2px)}
[data-skin="pop"] .btn:active:not(:disabled){transform:translateY(5px);box-shadow:none}
[data-skin="pop"] .btn:disabled{opacity:.45}
[data-skin="pop"] .btn-lg{font-size:19px;padding:15px 24px 13px}
[data-skin="pop"] .btn-sm{font-size:13.5px;padding:8px 14px 7px;box-shadow:var(--pop-sm)}
[data-skin="pop"] .btn-primary{background:var(--c-magenta);color:#fff}
[data-skin="pop"] .btn-primary:not(:disabled):hover{background:var(--c-magenta)}
[data-skin="pop"] .btn-ghost{background:#fff;color:var(--c-ink)}
[data-skin="pop"] .btn-ghost:not(:disabled):hover{background:#fff;color:var(--c-ink)}
[data-skin="pop"] .btn-danger{background:var(--c-danger);color:#fff;border-color:var(--c-ink)}
[data-skin="pop"] .btn-quiet{border:0;box-shadow:none;background:none;color:var(--ink-3);text-transform:none;font-size:14px}
[data-skin="pop"] .btn-quiet:active:not(:disabled){transform:none}
/* calibrate is the friendly lime "go"; asking is the magenta drama button */
[data-skin="pop"] body[data-mode="ready"] #primaryBtn{background:var(--c-lime);color:var(--c-ink)}
[data-skin="pop"] body[data-mode="live"] #primaryBtn{background:var(--c-magenta);color:#fff;animation:none}
[data-skin="pop"] body[data-mode="live"] #primaryBtn:hover{background:var(--c-magenta)}

[data-skin="pop"] .iconbtn{
  background:#fff;border:var(--edge);color:var(--c-ink);box-shadow:var(--pop-sm);
  -webkit-backdrop-filter:none;backdrop-filter:none;width:36px;height:36px;
}
[data-skin="pop"] .iconbtn svg{stroke-width:2.2}
[data-skin="pop"] .infobtn{background:var(--c-sun);border:2px solid var(--c-ink);color:var(--c-ink);
  font-family:var(--display);font-weight:800;width:22px;height:22px}

/* the loud verdict chip, shared by home, readout and result */
[data-skin="pop"] .pop-chip{
  display:inline-block;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  border:var(--edge);border-radius:999px;box-shadow:var(--pop-sm);padding:4px 13px 2px;
  background:#fff;color:var(--c-ink);transform:rotate(-2deg);white-space:nowrap;line-height:1.3;
}
[data-skin="pop"] .pop-chip[data-tone="lime"]{background:var(--c-lime)}
[data-skin="pop"] .pop-chip[data-tone="sun"]{background:var(--c-sun)}
[data-skin="pop"] .pop-chip[data-tone="magenta"]{background:var(--c-magenta);color:#fff}
[data-skin="pop"] .pop-chip[data-tone="danger"]{background:var(--c-danger);color:#fff}
[data-skin="pop"] .pop-chip[data-tone="none"]{background:#fff;color:var(--ink-3)}

/* the face */
[data-skin="pop"] .mood-face{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 4px 0 var(--c-ink))}

/* ══ HOME ══ the site hero, as an app screen */
[data-skin="pop"] .home{
  background-color:var(--c-sky);
  background-image:radial-gradient(rgba(26,16,48,.14) 2px,transparent 2px);background-size:22px 22px;
}
[data-skin="pop"] .home-mark{display:none}
[data-skin="pop"] .pop-mark{display:block;width:42px;height:42px;filter:drop-shadow(0 3px 0 var(--c-ink))}
[data-skin="pop"] .home-head{margin-bottom:18px}
[data-skin="pop"] .home-hero{text-align:center}
[data-skin="pop"] .home-tag{
  font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:12.5px;color:var(--c-ink);
  background:var(--c-sun);border:var(--edge);border-radius:999px;box-shadow:var(--pop-sm);
  padding:5px 13px 3px;transform:rotate(-3deg);margin-bottom:18px;letter-spacing:.02em;
}
[data-skin="pop"] .home-tag i{width:10px;height:10px;background:var(--c-danger);border:2px solid var(--c-ink)}
[data-skin="pop"] .home-title{font-family:var(--display);font-weight:800;font-size:clamp(26px,11.2vw,50px);line-height:.95;
  text-transform:uppercase;letter-spacing:-.005em}
[data-skin="pop"] .home-title span{-webkit-text-stroke:3px var(--c-ink);paint-order:stroke fill}
[data-skin="pop"] .home-title .ht-a{color:#fff}
[data-skin="pop"] .home-title .ht-b{color:var(--c-sun);margin-top:6px}
[data-skin="pop"] .home-sub{color:rgba(255,255,255,.95);font-weight:700;font-size:16.5px;margin:16px auto 0;
  max-width:30ch;text-align:center}

[data-skin="pop"] .home-meter{
  position:relative;background:#fff;border:var(--edge);border-radius:32px;box-shadow:0 10px 0 0 var(--c-ink);
  padding:20px 20px 22px;margin-top:24px;max-width:340px;
}
[data-skin="pop"] .home-meter::before{
  content:"THE TRUTH-O-METER™";font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.14em;
  color:rgba(26,16,48,.5);margin-bottom:6px;
}
[data-skin="pop"] .hm-face{display:block;width:112px;margin:4px 0 6px}
[data-skin="pop"] .hm-track{stroke:var(--c-ink);stroke-width:26}
[data-skin="pop"] .hm-arc{stroke-width:16}
[data-skin="pop"] .hm-s0{stop-color:#7ED000}[data-skin="pop"] .hm-s1{stop-color:#B6FF2E}
[data-skin="pop"] .hm-s2{stop-color:#FFD200}[data-skin="pop"] .hm-s3{stop-color:#FF8A00}
[data-skin="pop"] .hm-s4{stop-color:#FF3B30}
[data-skin="pop"] .hm-lbl{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:0}
[data-skin="pop"] .hm-lbl-l{fill:var(--c-ink)}
[data-skin="pop"] .hm-lbl-r{fill:var(--c-danger)}
[data-skin="pop"] .hm-needle,[data-skin="pop"] .hm-hub{fill:var(--c-ink)}
[data-skin="pop"] .hm-hub-dot{fill:var(--c-cream)}
[data-skin="pop"] .hm-num{font-family:var(--display);font-weight:800;font-size:54px;letter-spacing:-.02em;line-height:.95}
[data-skin="pop"] .hm-pc{font-family:var(--display);font-weight:800;font-size:28px;color:rgba(26,16,48,.7)}
[data-skin="pop"] .home-meter .pop-chip{font-size:18px;margin-top:4px}
[data-skin="pop"] .hm-cap{color:rgba(26,16,48,.5);font-weight:700;font-size:12px;margin-top:12px}
[data-skin="pop"] .home-start{margin-top:14px}
[data-skin="pop"] .home-hint{color:#fff;font-weight:700;opacity:.9}
[data-skin="pop"] .home-recent .cap{color:#fff;font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em}
[data-skin="pop"] .home-recent .btn-quiet{color:#fff}
[data-skin="pop"] .home-foot{color:rgba(255,255,255,.85);font-weight:600}
[data-skin="pop"] .home-foot b{color:#fff;font-weight:800}
[data-skin="pop"] .linkish{color:#fff;font-weight:800}

/* shared list rows (home recent, history) */
[data-skin="pop"] .hist-rows{background:#fff;border:var(--edge);border-radius:var(--r-row);box-shadow:var(--pop)}
[data-skin="pop"] .hs-row + .hs-row::before{background:rgba(26,16,48,.12);height:2px}
[data-skin="pop"] .hs-q{color:var(--c-ink);font-weight:700}
[data-skin="pop"] .hs-pct{font-family:var(--display);font-weight:800;font-size:18px}
[data-skin="pop"] .hs-when,[data-skin="pop"] .hs-stat{font-family:var(--display);font-weight:700;color:var(--ink-3)}

/* ══ ONBOARDING ══ one colour block per page, like the site's sections */
[data-skin="pop"] .onboard{background:var(--c-sky)}
[data-skin="pop"] .ob-track{height:100%}
[data-skin="pop"] .ob-page{
  padding-bottom:calc(var(--sab) + 180px);
  background-image:radial-gradient(rgba(26,16,48,.14) 2px,transparent 2px);background-size:22px 22px;
}
[data-skin="pop"] .ob-page:nth-child(1){background-color:var(--c-sky)}
[data-skin="pop"] .ob-page:nth-child(2){background-color:var(--c-magenta)}
[data-skin="pop"] .ob-page:nth-child(3){background-color:var(--c-grape)}
[data-skin="pop"] .ob-foot{position:absolute;left:0;right:0;bottom:0;background:none}
[data-skin="pop"] .ob-page h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:36px;
  line-height:.98;color:#fff;-webkit-text-stroke:3px var(--c-ink);paint-order:stroke fill;max-width:12ch}
[data-skin="pop"] .ob-page h2 em{color:var(--c-sun);background:none;-webkit-background-clip:initial;background-clip:initial}
[data-skin="pop"] .ob-page p{color:rgba(255,255,255,.95);font-weight:700;font-size:16px}
[data-skin="pop"] .ob-art{filter:drop-shadow(0 5px 0 var(--c-ink))}
[data-skin="pop"] .ob-line{stroke:var(--c-sun);stroke-width:7}
[data-skin="pop"] .ob-pen{fill:var(--c-lime);stroke:var(--c-ink);stroke-width:3.5}
[data-skin="pop"] #obBars rect{stroke:var(--c-ink);stroke-width:4}
[data-skin="pop"] .ob-art-3 rect:first-child,[data-skin="pop"] .ob-art-3 path{stroke:#fff;stroke-width:5}
[data-skin="pop"] .ob-art-3 rect + path + rect{fill:var(--c-lime);opacity:1;stroke:var(--c-ink);stroke-width:4}
[data-skin="pop"] .ob-art-3 circle{fill:var(--c-ink)}
[data-skin="pop"] .ob-art-3 path:last-child{stroke:var(--c-ink)}
[data-skin="pop"] .ob-warn{background:var(--c-sun);color:var(--c-ink);border:var(--edge);border-radius:20px;
  box-shadow:var(--pop);font-weight:700}
[data-skin="pop"] .ob-warn b{color:var(--c-ink);font-weight:900}
[data-skin="pop"] .ob-dots i{background:rgba(255,255,255,.5);border:2px solid var(--c-ink);width:10px;height:10px}
[data-skin="pop"] .ob-dots i.on{background:var(--c-lime);width:28px}
[data-skin="pop"] .ob-foot .btn-primary{background:var(--c-lime);color:var(--c-ink)}
[data-skin="pop"] .ob-foot .btn-quiet{color:#fff}

/* ══ COVERS (camera access, loading, error) ══ */
[data-skin="pop"] .cover{
  background-color:var(--c-sky);
  background-image:radial-gradient(rgba(26,16,48,.14) 2px,transparent 2px);background-size:22px 22px;
}
[data-skin="pop"] .cover-in{background:#fff;border:var(--edge);border-radius:32px;box-shadow:0 10px 0 0 var(--c-ink);
  padding:30px 26px 26px}
[data-skin="pop"] .cover-icon{background:var(--c-lime);border:var(--edge);color:var(--c-ink);box-shadow:var(--pop-sm);
  width:58px;height:58px;border-radius:18px}
[data-skin="pop"] .cover-icon svg{stroke-width:2.2;width:28px;height:28px}
[data-skin="pop"] .cover-icon-bad{background:var(--c-danger);color:#fff}
[data-skin="pop"] .cover h2{font-size:30px;line-height:1.05;color:var(--c-ink)}
[data-skin="pop"] .cover p{color:var(--ink-2);font-weight:600}
[data-skin="pop"] .loader i{background:var(--c-magenta);width:9px;height:9px;border:2px solid var(--c-ink)}
[data-skin="pop"] .loadbar{height:12px;border:var(--edge);border-radius:999px;background:#fff}
[data-skin="pop"] .loadbar > i{background:var(--c-magenta)}

/* ══ LIVE SCREEN ══ */
[data-skin="pop"] .mark{display:none}
[data-skin="pop"] .hud-top .pop-mark{width:38px;height:38px}
[data-skin="pop"] .pill{
  background:#fff;border:var(--edge);color:var(--c-ink);box-shadow:var(--pop-sm);height:32px;
  -webkit-backdrop-filter:none;backdrop-filter:none;font-family:var(--display);font-weight:800;font-size:13px;
}
[data-skin="pop"] .pill-q #qualTxt{color:var(--c-ink);font-family:var(--display);font-size:12.5px}
[data-skin="pop"] .dot{width:9px;height:9px;border:2px solid var(--c-ink)}
[data-skin="pop"] .dot.ok{background:var(--c-lime)}
[data-skin="pop"] .dot.live{background:var(--c-danger)}
[data-skin="pop"] .dot.warn{background:var(--c-sun)}
[data-skin="pop"] .qbars i{background:rgba(26,16,48,.2)}
[data-skin="pop"] .qbars i.on{background:var(--c-lime-deep)}

[data-skin="pop"] .dock-grip{background:#fff;border:var(--edge);color:var(--c-ink);box-shadow:var(--pop-sm);
  font-family:var(--display);font-weight:800;-webkit-backdrop-filter:none;backdrop-filter:none}
[data-skin="pop"] .panel{background:#fff;border:var(--edge);box-shadow:var(--pop-lg);
  -webkit-backdrop-filter:none;backdrop-filter:none}
[data-skin="pop"] .panel section + section{border-top:2px dashed rgba(26,16,48,.2)}
[data-skin="pop"] .cap{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(26,16,48,.5);font-size:12px}

[data-skin="pop"] .g-track{stroke:rgba(26,16,48,.1);stroke-width:10}
[data-skin="pop"] .g-arc{stroke-width:10}
[data-skin="pop"] #gaugeTicks line{stroke:rgba(26,16,48,.35)}
[data-skin="pop"] .g-tip{fill:var(--c-ink)}
[data-skin="pop"] .gauge-center .pct{display:none}
[data-skin="pop"] .mood-slot{display:block;width:60%}
[data-skin="pop"] .pop-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
[data-skin="pop"] .pop-num{font-family:var(--display);font-weight:800;font-size:38px;line-height:.9;color:var(--c-ink)}
[data-skin="pop"] .pop-num::after{content:"%";font-size:.5em;opacity:.6;margin-left:1px}
[data-skin="pop"] .pop-row .pop-chip{font-size:14px}
[data-skin="pop"] .verdict{font-family:var(--display);font-weight:700;font-size:16px;color:var(--c-ink) !important;line-height:1.15}
[data-skin="pop"] .conf{color:var(--ink-3);font-weight:700}
[data-skin="pop"] .conf b{color:var(--c-ink);font-weight:900}

[data-skin="pop"] .sig-name{color:var(--c-ink);font-weight:700}
[data-skin="pop"] .track{height:12px;background:#fff;border:2px solid var(--c-ink);border-radius:999px}
[data-skin="pop"] .fill{border-radius:0}
[data-skin="pop"] .track .dz{background:rgba(26,16,48,.4);width:2px;top:0;bottom:0}
[data-skin="pop"] .sig-val{font-family:var(--display);font-weight:800;color:var(--c-ink);font-size:14px}
[data-skin="pop"] .deadband-note{color:var(--ink-3);font-weight:600}

/* on phones this line sits straight on the camera feed; on wide screens it's on cream */
[data-skin="pop"] .disclaimer-mini{color:var(--ink-3);font-weight:700}
@media(max-width:959px){
  [data-skin="pop"] .disclaimer-mini{color:#fff;opacity:.9;text-shadow:0 1px 3px rgba(0,0,0,.7)}
}

/* ══ COUNTDOWN ══ */
[data-skin="pop"] .phase{background:rgba(26,16,48,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
[data-skin="pop"] .phase-inner{background:#fff;border:var(--edge);border-radius:32px;box-shadow:0 10px 0 0 var(--c-ink);
  padding:28px 26px 24px;width:min(340px,100%)}
[data-skin="pop"] .ring-timer{margin-bottom:20px}
[data-skin="pop"] .rt-bg{stroke:rgba(26,16,48,.1);stroke-width:10}
[data-skin="pop"] .rt-fg{stroke:var(--c-lime-deep);stroke-width:10}
[data-skin="pop"] body[data-mode="reading"] .rt-fg{stroke:var(--c-magenta)}
[data-skin="pop"] .rt-num{font-family:var(--display);font-weight:800;color:var(--c-ink);font-size:52px}
[data-skin="pop"] .phase-title{font-family:var(--display);font-weight:800;color:var(--c-ink);font-size:23px;line-height:1.1}
[data-skin="pop"] .phase-sub{color:var(--ink-3);font-weight:700}
[data-skin="pop"] .phase .btn{margin-top:20px}

/* ══ SHEETS ══ */
[data-skin="pop"] .sheet-scrim{background:rgba(26,16,48,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-skin="pop"] .sheet-card{background:var(--c-cream);border:var(--edge);border-bottom:0;border-radius:30px 30px 0 0}
[data-skin="pop"] .sheet-grip{background:rgba(26,16,48,.3);height:5px;width:44px}
[data-skin="pop"] .sheet-head h2{font-size:28px;color:var(--c-ink)}
[data-skin="pop"] .sheet-fine{color:var(--ink-3);font-weight:700}

[data-skin="pop"] .r-face-slot{display:block;width:118px;margin:2px auto 16px}
[data-skin="pop"] .result-band{display:none}
[data-skin="pop"] .r-chip{font-size:20px;margin-bottom:12px}
[data-skin="pop"] .result-pct{font-family:var(--display);font-weight:800;font-size:96px;line-height:.85;letter-spacing:-.02em;
  color:var(--reading);-webkit-text-stroke:4px var(--c-ink);paint-order:stroke fill}
[data-skin="pop"] .result-pct::after{-webkit-text-stroke:0;color:var(--c-ink);opacity:.55;font-size:.32em;vertical-align:.95em}
[data-skin="pop"] .result-verdict{font-family:var(--display);font-weight:800;font-size:22px;color:var(--c-ink);line-height:1.1}
[data-skin="pop"] .result-meta{color:var(--ink-3);font-weight:700}
[data-skin="pop"] .qlabel > span{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(26,16,48,.55)}
[data-skin="pop"] .qlabel input{background:#fff;border:var(--edge);border-radius:999px;box-shadow:var(--pop-sm);
  font-weight:700;padding:13px 18px}
[data-skin="pop"] .qlabel input:focus{border-color:var(--c-magenta);background:#fff}
[data-skin="pop"] .rbar-name{color:var(--c-ink);font-weight:700;width:126px;white-space:nowrap;font-size:13.5px}
[data-skin="pop"] .rbar-track{height:12px;background:#fff;border:2px solid var(--c-ink);border-radius:999px}
[data-skin="pop"] .rbar-fill{border-radius:0}
[data-skin="pop"] .rbar-val{font-family:var(--display);font-weight:800;color:var(--c-ink);font-size:14px}
[data-skin="pop"] .result-notes{background:#fff;border:var(--edge);border-radius:20px;padding:4px 16px;box-shadow:var(--pop-sm)}
[data-skin="pop"] .result-notes li{color:var(--c-ink);font-weight:700}
[data-skin="pop"] .result-notes li + li{border-top:2px dashed rgba(26,16,48,.16)}

[data-skin="pop"] .hist-empty{color:var(--ink-2);font-weight:700}

[data-skin="pop"] .set-group h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(26,16,48,.55)}
[data-skin="pop"] .set-list{background:#fff;border:var(--edge);border-radius:22px;box-shadow:var(--pop-sm)}
[data-skin="pop"] .set-row + .set-row::before{background:rgba(26,16,48,.12);height:2px}
[data-skin="pop"] .set-name{font-weight:800;color:var(--c-ink)}
[data-skin="pop"] .set-hint{color:var(--ink-3);font-weight:600}
[data-skin="pop"] .set-note{color:var(--ink-3);font-weight:600}
[data-skin="pop"] .set-static{color:var(--ink-2);font-weight:600}
[data-skin="pop"] .set-static b{color:var(--c-ink);font-weight:900}
[data-skin="pop"] .range-wrap output{font-family:var(--display);font-weight:800;color:var(--c-ink);font-size:16px}
[data-skin="pop"] input[type=range]::-webkit-slider-runnable-track{height:8px;background:#fff;border:2px solid var(--c-ink);border-radius:999px}
[data-skin="pop"] input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px;background:var(--c-magenta);
  border:3px solid var(--c-ink);box-shadow:0 2px 0 var(--c-ink)}
[data-skin="pop"] input[type=range]::-moz-range-track{height:8px;background:#fff;border:2px solid var(--c-ink);border-radius:999px}
[data-skin="pop"] input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--c-magenta);border:3px solid var(--c-ink)}
[data-skin="pop"] .sw{width:50px;height:30px}
[data-skin="pop"] .sw i{background:#fff;border:var(--edge)}
[data-skin="pop"] .sw i::after{top:2px;left:2px;width:20px;height:20px;background:var(--c-ink);box-shadow:none}
[data-skin="pop"] .sw input:checked + i{background:var(--c-lime)}
[data-skin="pop"] .sw input:checked + i::after{transform:translateX(20px)}
[data-skin="pop"] .seg{background:#fff;border:2px solid var(--c-ink);border-radius:999px;padding:3px}
[data-skin="pop"] .seg button{font-family:var(--display);font-weight:800;color:var(--ink-3);border-radius:999px}
[data-skin="pop"] .seg button.on{background:var(--c-sun);color:var(--c-ink);box-shadow:inset 0 0 0 2px var(--c-ink)}

[data-skin="pop"] .info-body{color:var(--ink-2);font-weight:600}
[data-skin="pop"] .info-body b{color:var(--c-ink);font-weight:900}
[data-skin="pop"] .info-sig{border-top:2px dashed rgba(26,16,48,.16)}
[data-skin="pop"] .info-sig .k{font-family:var(--display);font-weight:800;color:var(--c-ink)}
[data-skin="pop"] .info-sig .v{color:var(--ink-2)}

[data-skin="pop"] .toast{background:#fff;border:var(--edge);border-radius:999px;box-shadow:var(--pop);color:var(--c-ink);
  font-family:var(--display);font-weight:800;-webkit-backdrop-filter:none;backdrop-filter:none}

@media(min-width:960px) and (min-height:560px){
  [data-skin="pop"] .stage{border:var(--edge);box-shadow:var(--pop-lg)}
  [data-skin="pop"] .sheet-card{border-bottom:var(--edge);border-radius:30px}
}