/* Halves V2 · skin "ink" — 1930s rubber-hose genre, hand-inked (DESIGN.md §9.6, §9.8 "Ink skin").
   Genre only: no existing characters, studio look-alikes or brand marks. Mascot "Penny" (coin/piggy bank) is original.
   Every rule is scoped to html[data-skin="ink"]. Art + frames are generated by ink.js:
     --ink-l0..2 / --ink-d0..2  three pre-drawn rough frames (light/dark ink) as SVG data-URI border-images
     --ink-fr / --ink-frs       the frame currently shown (UI / inside .sm); ink.js swaps them = line boil
     --ink-hold                 4-frame "held pose" stepped spring (stop motion)
     #inkw-ui / #inkw-sm        feTurbulence+feDisplacementMap wobble for inline SVG art (seed cycled = boil)
     #ink-smear / #ink-smear-x  directional blur (kept for small elements only; no large-area smear since V2r1)
   V2r1 (§9.1a): "1930s title card with swagger", not a kids' cartoon. Grandstander dropped → Archivo (UI) + Bebas Neue (numbers);
   Limelight only for page titles/brand. Light hero = maroon with cream type (green/red only in status pills). Stop motion is
   labelled experimental and toned down (frames boil at 6fps, reading surfaces never boil, grain 4fps, no full-screen flicker).
   Penny is deadpan: small half-lidded eyes, no cheeks, mostly still, shown rarely. */

/* ============ Tokens: light = sepia paper, black ink, maroon ============ */
html[data-skin="ink"]{
  --font-ui:"Archivo",system-ui,sans-serif; --font-display:"Limelight",Georgia,serif; --font-num:"Bebas Neue","Oswald","Arial Narrow",sans-serif;
  --ink-hero-bg:var(--primary); --ink-hero-on:var(--on-primary); --ink-hero-ring:#EED59C;
  --bg:#EFE2C6; --surface:#F8EFDB; --s1:#EADBBB; --s2:#E1CFAA; --s3:#D5C097;
  --text:#1E1612; --muted:#5B4736; --outline:#3A2C22;
  --primary:#7A1E2C; --on-primary:#FBF2E0; --primary-c:#EBCDBD; --on-primary-c:#4A0E18;
  --you:#8E2A33; --you-c:#EDC9BC; --you-t:#7A1E2C; --sam:#3E3229; --sam-c:#D9CBB0; --sam-t:#3E3229;
  --coral:#EDCDBF; --on-coral:#4A0E18; --teal:#D3D6C3; --on-teal:#1F2A22;
  --lilac:#DDCDC5; --on-lilac:#2E1F25; --sun:#EED59C; --on-sun:#3A2A00;
  --sage:#D8D4B2; --on-sage:#262410; --sky:#D0D2CB; --on-sky:#1C2226;
  --good:#3B5A1C; --good-c:#DCE0B8; --warn:#7A4A00; --warn-c:#F0D79E; --bad:#8E1B22; --bad-c:#F0C9BC;
  --scrim:rgba(30,22,18,.5); --shadow:3px 4px 0 rgba(30,22,18,.88);
  --r-xl:16px; --r-l:15px; --r-m:10px;
  /* ink-only tokens */
  --ink:#1E1612; --ink-paper:#FFFBF0; --ink-shadow:rgba(30,22,18,.88);
  --pn-line:#1E1612; --pn-dark:#1A120E; --pn-coin:#E3BC72; --pn-pink:#E79AA0;
  --ink-f0:var(--ink-l0); --ink-f1:var(--ink-l1); --ink-f2:var(--ink-l2);
  --ink-fr:var(--ink-f0); --ink-frs:var(--ink-fr);
  --ink-hold:steps(4,jump-end); --pn-ease:cubic-bezier(.45,0,.55,1); --pn-pop:cubic-bezier(.3,1.5,.5,1);
  --grain-a:.2;
  color-scheme:light;
}
/* ============ dark = charcoal, cream ink, pink ============ */
html[data-skin="ink"][data-theme="dark"]{
  --bg:#1D1A18; --surface:#27231F; --s1:#2E2925; --s2:#38322D; --s3:#443D37;
  --text:#F1E4C8; --muted:#C9B999; --outline:#E6D7B8;
  --primary:#F4A3B8; --on-primary:#3A0D1A; --primary-c:#5E2536; --on-primary-c:#FFDCE5;
  --you:#F4A3B8; --you-c:#5A2434; --you-t:#F7B9C8; --sam:#D8C9A8; --sam-c:#423B33; --sam-t:#E6D9BC;
  --coral:#56303A; --on-coral:#FFDCE5; --teal:#33392F; --on-teal:#DCE3CF;
  --lilac:#45343C; --on-lilac:#F1DDE6; --sun:#4E4022; --on-sun:#F6E2AE;
  --sage:#3A3A26; --on-sage:#E4E0BD; --sky:#33373A; --on-sky:#DDE2E4;
  --good:#B5D195; --good-c:#2C3322; --warn:#EBC57E; --warn-c:#4A3A14; --bad:#FFA3AE; --bad-c:#5A1F28;
  --scrim:rgba(0,0,0,.6); --shadow:3px 4px 0 rgba(0,0,0,.7);
  --ink:#F1E4C8; --ink-paper:#FFFBF0; --ink-shadow:rgba(0,0,0,.7);
  --pn-line:#F1E4C8; --pn-coin:#DDB466; --pn-pink:#F4A3B8;
  --ink-f0:var(--ink-d0); --ink-f1:var(--ink-d1); --ink-f2:var(--ink-d2);
  --ink-hero-bg:var(--s1); --ink-hero-on:var(--text); --ink-hero-ring:var(--primary);
  --grain-a:.16;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){html[data-skin="ink"]:not([data-theme="light"]){
  --bg:#1D1A18; --surface:#27231F; --s1:#2E2925; --s2:#38322D; --s3:#443D37;
  --text:#F1E4C8; --muted:#C9B999; --outline:#E6D7B8;
  --primary:#F4A3B8; --on-primary:#3A0D1A; --primary-c:#5E2536; --on-primary-c:#FFDCE5;
  --you:#F4A3B8; --you-c:#5A2434; --you-t:#F7B9C8; --sam:#D8C9A8; --sam-c:#423B33; --sam-t:#E6D9BC;
  --coral:#56303A; --on-coral:#FFDCE5; --teal:#33392F; --on-teal:#DCE3CF;
  --lilac:#45343C; --on-lilac:#F1DDE6; --sun:#4E4022; --on-sun:#F6E2AE;
  --sage:#3A3A26; --on-sage:#E4E0BD; --sky:#33373A; --on-sky:#DDE2E4;
  --good:#B5D195; --good-c:#2C3322; --warn:#EBC57E; --warn-c:#4A3A14; --bad:#FFA3AE; --bad-c:#5A1F28;
  --scrim:rgba(0,0,0,.6); --shadow:3px 4px 0 rgba(0,0,0,.7);
  --ink:#F1E4C8; --ink-paper:#FFFBF0; --ink-shadow:rgba(0,0,0,.7);
  --pn-line:#F1E4C8; --pn-coin:#DDB466; --pn-pink:#F4A3B8;
  --ink-f0:var(--ink-d0); --ink-f1:var(--ink-d1); --ink-f2:var(--ink-d2);
  --ink-hero-bg:var(--s1); --ink-hero-on:var(--text); --ink-hero-ring:var(--primary);
  --grain-a:.16;
  color-scheme:dark;
}}
/* frame-by-frame where the motion mode says so (mascot easing + boiling frames inside .sm in hybrid) */
html[data-skin="ink"][data-motion="stop"],html[data-skin="ink"][data-motion="hybrid"] .sm{--pn-ease:steps(2,jump-end);--pn-pop:steps(2,jump-end)}
html[data-skin="ink"][data-motion="hybrid"] .sm{--ink-fr:var(--ink-frs)}

/* ============ Film: grain + vignette + flicker (fixed overlays, compositor-only animation) ============ */
html[data-skin="ink"] body::before,html[data-skin="ink"] body::after{content:"";position:fixed;pointer-events:none;z-index:39}
html[data-skin="ink"] body::before{inset:0;background:radial-gradient(120% 95% at 50% 45%,transparent 58%,rgba(40,24,10,.30) 100%);
  animation:ink-flicker-slow 7s ease-in-out infinite}
html[data-skin="ink"] body::after{inset:-120px;background-image:var(--ink-grain,none);background-size:220px 220px;opacity:var(--grain-a)}
html[data-skin="ink"][data-motion="stop"] body::after{animation:ink-grain 1s steps(1,end) infinite} /* 4fps: texture, not strobe */
@keyframes ink-flicker-slow{0%,100%{opacity:.9}50%{opacity:1}}
@keyframes ink-flicker{0%{opacity:1}11%{opacity:.82}22%{opacity:.96}33%{opacity:.88}44%{opacity:1}55%{opacity:.8}66%{opacity:.94}77%{opacity:.86}88%{opacity:.98}}
@keyframes ink-grain{0%{transform:translate(0,0)}25%{transform:translate(-37px,23px)}50%{transform:translate(29px,-41px)}75%{transform:translate(-13px,-17px)}}

/* ============ Type: title-card display for titles only; sober grotesk UI; condensed gothic numbers ============ */
html[data-skin="ink"] body{font-size:16px;letter-spacing:0;font-variation-settings:normal}
html[data-skin="ink"] :is(.ptitle,.fhead h1,.nudge-f h2,.treepane h2){font-family:var(--font-display);font-weight:400;font-variation-settings:normal;letter-spacing:.02em;
  text-shadow:2px 2px 0 color-mix(in srgb,var(--primary) 30%,transparent)}
html[data-skin="ink"] .sheet h3{font-family:var(--font-ui);font-weight:700;font-variation-settings:normal;letter-spacing:-.01em}
html[data-skin="ink"] :is(.row-x .tx b,.node .nm b,.tcard .tx b){font-weight:600}
html[data-skin="ink"] .ptitle{font-size:32px}
html[data-skin="ink"] .fhead h1{font-size:30px}
html[data-skin="ink"] :is(h2.sec,.set-h){font-family:var(--font-ui);font-weight:700;letter-spacing:.16em;color:var(--primary);font-size:12px}
html[data-skin="ink"] :is(h2.sec,.set-h)::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px;flex:none;display:inline-block;margin-right:2px;vertical-align:middle}
html[data-skin="ink"] .topbar .brand{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.04em;font-variation-settings:normal}
html[data-skin="ink"] :is(.hero .amt,.today .big,.det-hero .v,.tgt-card .big,.drill-sum b.num,.fnet b,.treepane .mini-bal b,.stat b,.amt-disp .v,.amt-disp .cur,.key,.dial-bubble b){font-family:var(--font-num);font-weight:400;font-variation-settings:normal;letter-spacing:.01em}
html[data-skin="ink"] .hero .amt{font-size:clamp(52px,15vw,72px);line-height:1}
html[data-skin="ink"] .today .big{font-size:clamp(48px,13vw,64px);line-height:1}
html[data-skin="ink"] .amt-disp .v{font-size:72px}
html[data-skin="ink"] .key{font-size:28px}
@media (max-height:720px){html[data-skin="ink"] .amt-disp .v{font-size:54px}}
html[data-skin="ink"] .proto{font-family:var(--font-display);letter-spacing:.14em;border:1.5px solid var(--on-sun)}

/* ============ Ink frames: 3 pre-drawn rough outlines as border-images (boil = swapping them) ============ */
/* L = cards / panels, S = controls. background-clip keeps paper inside the ink line. */
html[data-skin="ink"] :is(.hero,.today,.tgt-card,.tcard,.drill-sum,main .tree,.sheet .tree,.stat,.subtile,.bars,.kv,.list,.toolbar,.nudge-b,.snack,.dial-bubble,.coach,.suggest,.treepane .mini-bal,.sheet.sheet){
  border:3px solid transparent;border-image-source:var(--ink-fr);border-image-slice:36;border-image-width:18px;border-image-repeat:round;
  background-clip:padding-box;border-radius:var(--r-l)}
html[data-skin="ink"] :is(.pill-btn,.save,.chip,.dchip,.key:not(.fn),.seg button,.bgroup button,.ae-top input,.field input[type=text],.date-row input,.tagnew input,.rem-add input,.crumb:not(:last-child),.days button,.hero-tgt,.toolbar .tb[aria-current="true"],.dial-opt,.catb[aria-pressed="true"] .ic){
  border:2.5px solid transparent;border-image-source:var(--ink-fr);border-image-slice:36;border-image-width:12px;border-image-repeat:round;
  background-clip:padding-box;border-radius:10px}
/* reading surfaces never boil (body text must stay put) */
html[data-skin="ink"] :is(.kv,.sheet.sheet){border-image-source:var(--ink-f0)}
/* V2r2: day-group lists are NOT inked panels (a stack of heavy frames read as cartoon panels). A hairline pen rule instead;
   the heavy hand-drawn frame is kept for hero, sheet and cards. */
html[data-skin="ink"] .list.list.list{border:1.5px solid color-mix(in srgb,var(--ink) 28%,transparent);border-image:none;border-radius:12px}
html[data-skin="ink"] .pendl{font-size:12px;letter-spacing:.1em}
html[data-skin="ink"][data-mascot="rare"] .hero .ornament[data-slot="hero"]{display:none}
html[data-skin="ink"] .hstat{border:1.5px solid currentColor;background:transparent}
html[data-skin="ink"] .sheet.sheet.sheet{border-bottom:0;border-radius:var(--r-xl) var(--r-xl) 0 0}
@media (min-width:960px){html[data-skin="ink"] .sheet.sheet.sheet{border-bottom:3px solid transparent;border-radius:var(--r-xl)}}
html[data-skin="ink"] .sheet::after{background:var(--surface)}
html[data-skin="ink"] .subtile.add{opacity:.85}
html[data-skin="ink"] .catb[aria-pressed="true"] .ic{outline:0;clip-path:none}
html[data-skin="ink"] :is(.hero,.today){box-shadow:4px 5px 0 var(--ink-shadow)}
html[data-skin="ink"] :is(.tcard,.tgt-card,.stat,.subtile,.drill-sum){box-shadow:2px 3px 0 color-mix(in srgb,var(--ink-shadow) 55%,transparent)}
html[data-skin="ink"] .hero .blob{display:none}
html[data-skin="ink"] .hero{--hero-bg:var(--ink-hero-bg);--hero-on:var(--ink-hero-on)}
html[data-skin="ink"] .hero.over{--hero-bg:var(--bad-c);--hero-on:var(--text)}
html[data-skin="ink"] .hero .ring.ok .val{stroke:var(--ink-hero-ring)}
html[data-skin="ink"] .hero:not(.over) .ring.warn .val{stroke:var(--ink-hero-ring);stroke-dasharray:3 2}
html[data-skin="ink"] .hero .lbl{font-family:var(--font-ui);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
html[data-skin="ink"] .hero .of{font-family:var(--font-ui);letter-spacing:.04em}
html[data-skin="ink"] .hero .row .pill-btn,html[data-skin="ink"] .hero-owe .pill-btn{background-color:color-mix(in srgb,var(--hero-on) 10%,transparent)}
html[data-skin="ink"] .hero-owe{border-top:2px dashed color-mix(in srgb,var(--hero-on) 30%,transparent)}
/* rows: one inked list, rows split by a dashed pen line */
html[data-skin="ink"] .list{gap:0;background-color:var(--surface);overflow:hidden}
html[data-skin="ink"] .list .row-x{border-radius:0!important;background:transparent}
html[data-skin="ink"] .list .row-x+.row-x{border-top:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent)}
html[data-skin="ink"] .list .row-x:hover{background:var(--s1)}
html[data-skin="ink"] .node.child::before{border-color:color-mix(in srgb,var(--ink) 55%,transparent);border-left-style:dashed}
html[data-skin="ink"] .tagc{background:transparent;border:1.5px solid color-mix(in srgb,var(--ink) 40%,transparent);color:var(--muted);border-radius:6px 9px 7px 10px}
html[data-skin="ink"] .stpill{border:1.5px solid currentColor;border-radius:7px 10px 8px 11px}
html[data-skin="ink"] :is(.pill-btn.filled,.save){box-shadow:2px 3px 0 var(--ink-shadow)}
html[data-skin="ink"] .snack{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
html[data-skin="ink"] .snack button{color:var(--primary)}
html[data-skin="ink"] .nudge-b{background:var(--surface);color:var(--text)}
html[data-skin="ink"] .nudge-b .pill-btn{background-color:var(--s1)}
html[data-skin="ink"] .nudge-b .pill-btn.filled{background-color:var(--primary);color:var(--on-primary)}
html[data-skin="ink"] .nb-ic{background:var(--s2)}
html[data-skin="ink"] .dial-bubble{background:var(--surface);color:var(--text)}
html[data-skin="ink"] .nf-ic{display:none}
html[data-skin="ink"] .switch{border:2.5px solid var(--ink)}
html[data-skin="ink"] .switch::after{background:var(--ink);top:2px;left:2px}
html[data-skin="ink"] .switch[aria-checked="true"]::after{background:var(--on-primary)}
html[data-skin="ink"] .grab i{background:var(--ink);height:4px;border-radius:2px 3px 2px 3px;width:44px}
html[data-skin="ink"] .bar .track,html[data-skin="ink"] .bar2{border:1.5px solid color-mix(in srgb,var(--ink) 50%,transparent)}
html[data-skin="ink"] :is(.ring,.spark){filter:url(#inkw-ui)}
html[data-skin="ink"] .ring .val{stroke-linecap:butt}
html[data-skin="ink"] .split-bar{border:2.5px solid var(--ink);border-radius:14px;gap:0}
html[data-skin="ink"] .split-bar div{border-radius:0!important;box-shadow:none!important}
html[data-skin="ink"] .split-bar div+div{border-left:2.5px solid var(--ink)}

/* ============ Round inked things: FAB + cartoon dial (inline SVG rings from ink.js) ============ */
html[data-skin="ink"] :is(.fab,.dial-core){clip-path:none;border-radius:50%;filter:none;position:relative}
html[data-skin="ink"] .fab{box-shadow:3px 4px 0 var(--ink-shadow)}
html[data-skin="ink"] .ink-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
html[data-skin="ink"] .ink-ring path{fill:var(--ink);display:none}
html[data-skin="ink"] .ink-ring .v0,html[data-skin="ink"][data-ink-ui="1"] .ink-ring .v1,html[data-skin="ink"][data-ink-ui="2"] .ink-ring .v2{display:inline}
html[data-skin="ink"][data-ink-ui="1"] .ink-ring .v0,html[data-skin="ink"][data-ink-ui="2"] .ink-ring .v0{display:none}
html[data-skin="ink"] .dial-ring{background:radial-gradient(circle at 50% 50%,var(--surface) 0 55%,var(--s2) 56% 100%)}
html[data-skin="ink"] .dial-ring::after{box-shadow:none}
html[data-skin="ink"] .dial.turning .dial-ring{background:radial-gradient(circle at 50% 50%,var(--surface) 0 55%,var(--primary-c) 56% 100%)}
html[data-skin="ink"] .dial-ticks i{background:var(--ink);opacity:.7;width:2.5px;border-radius:1px 2px}
html[data-skin="ink"] .dial-ticks i:nth-child(even){height:6px;top:9px;opacity:.45}
html[data-skin="ink"] .dial-ticks i:first-child{opacity:0}
html[data-skin="ink"] .ink-glove{position:absolute;left:50%;top:1px;width:30px;height:36px;margin-left:-15px;overflow:visible;pointer-events:none;
  transform-origin:50% 73px;transition:transform .35s var(--spring)}
html[data-skin="ink"] .dial.turning .ink-glove{transform:scale(1.12,.9)}
@media (max-height:720px){html[data-skin="ink"] .ink-glove{transform-origin:50% 61px;width:26px;height:31px;margin-left:-13px}}
html[data-skin="ink"] .dial-core{box-shadow:2px 3px 0 var(--ink-shadow)}
html[data-skin="ink"] .dial.adjust .dial-core{background:var(--text);color:var(--bg)}
html[data-skin="ink"] .dial.commit .dial-core{background:var(--sun);color:var(--on-sun)}
html[data-skin="ink"] .dial-opt{background-color:var(--surface)}

/* ============ Squash & stretch (rubber-hose press) ============ */
html[data-skin="ink"] :is(.pill-btn,.save,.fab,.key,.chip,.dchip,.seg button,.icon-btn,.days button,.dial-core){transform-origin:50% 85%}
html[data-skin="ink"] :is(.pill-btn,.save,.fab,.key,.chip,.dchip,.seg button,.icon-btn,.days button,.tb,.catb .ic):active,
html[data-skin="ink"] .key.hit{transform:scale(calc(1 + .07 * var(--bounce)),calc(1 - .12 * var(--bounce)))}
html[data-skin="ink"] .fab:hover .ms{transform:rotate(90deg) scale(1.1)}
html[data-skin="ink"] .dial.pressed .dial-core{transform:scale(calc(1 + .06 * var(--bounce)),calc(.86 - .04 * var(--bounce)))}
html[data-skin="ink"] :is(.row-x,.node,.tcard,.subtile,.hero-main):active{transform:scale(calc(1 - .02 * var(--bounce)),calc(1 - .05 * var(--bounce)))}
/* follow-through: the sheet lands with a squash, its contents arrive a beat later and overshoot */
html[data-skin="ink"] .sheet{transform-origin:50% 100%}
/* V2r1: no squash / follow-through on the sheet body (it moved the keypad under a fast thumb). Bounce lives on the grab handle. */
html[data-skin="ink"] .sheet.on .grab i{animation:ink-swing calc(.7s + .25s * var(--bounce)) var(--spring) .06s both}
@keyframes ink-swing{from{transform:rotate(-8deg) scaleX(.7)}}
html[data-skin="ink"] .row-x.new{animation:ink-pop .8s var(--spring)}
@keyframes ink-pop{0%{transform:scale(.4,.2) translateY(30px);opacity:0}40%{transform:scale(1.08,.9);opacity:1}70%{transform:scale(.97,1.04)}}

/* ============ Stop motion: held poses (4 frames), smear frames ============ */
html[data-skin="ink"][data-motion="stop"] :is(.pill-btn,.save,.fab,.key,.chip,.dchip,.seg button,.tb,.tb .lbl,.node,.row-x,.tcard,.subtile,.kids,.snack,.nudge-b,.nf-in,.dial-core,.dial-ring,.dial-opt,.dial-bubble,.bgroup button,.hero-main,.hero-tgt,.icon-btn,.chev,.bar .fill,.bar2 i,.ring .val,.pdot::before,.switch::after,.ink-glove){transition-timing-function:var(--ink-hold)!important}
html[data-skin="ink"][data-motion="stop"] :is(.in,.row-x.new,.sheet.on .grab i,.editor>.pane:not(.keypad)){animation-timing-function:var(--ink-hold)!important}
html[data-skin="ink"][data-motion="stop"]::view-transition-new(main),html[data-skin="ink"][data-motion="stop"]::view-transition-old(main){animation-timing-function:var(--ink-hold)}
html[data-skin="ink"] .ink-smear{filter:url(#ink-smear);scale:1 1.1}
html[data-skin="ink"] .ink-smear-x{filter:url(#ink-smear-x);scale:1.05 1}

/* ============ Decoration slots: mascot "Penny" + ornaments ============ */
html[data-skin="ink"] .mascot{z-index:1}
html[data-skin="ink"] .hero .mascot,html[data-skin="ink"] .today .mascot{--mascot-size:66px;right:10px;top:8px}
html[data-skin="ink"]:not([data-mascot="rare"]) :is(.hero,.today) .lbl{padding-right:70px}
html[data-skin="ink"] .ink-art{display:block;overflow:visible;width:100%;height:100%}
html[data-skin="ink"] .boil.ink-art{rotate:calc(var(--boil-j,0) * .5deg)}
html[data-skin="ink"] .ornament{position:absolute;display:block;z-index:0}
html[data-skin="ink"] :is(.hero,.today) .ornament{right:2px;top:0;width:110px;height:92px;z-index:-1}
html[data-skin="ink"] .fhead .ornament{left:78px;bottom:-14px;width:150px;height:18px}
html[data-skin="ink"] .empty{position:relative;isolation:isolate}
html[data-skin="ink"] .empty .ornament{left:50%;top:14px;width:150px;height:150px;margin-left:-75px;z-index:-1}
html[data-skin="ink"] .empty .shape{clip-path:none;border-radius:50%;background:var(--surface);border:3px solid var(--ink);box-shadow:3px 4px 0 var(--ink-shadow)}
html[data-skin="ink"] .nf-in .ornament{left:50%;top:-62px;width:160px;height:70px;margin-left:-80px}
html[data-skin="ink"] .nf-in .mascot{--mascot-size:132px}
html[data-skin="ink"] .nudge-b .mascot{--mascot-size:44px}

/* ornament strokes */
html[data-skin="ink"] .ink-orn .ln{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html[data-skin="ink"] .ink-orn .acc{fill:var(--primary);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
html[data-skin="ink"] .ink-orn .pap{fill:var(--sun);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
html[data-skin="ink"] .ink-orn .ray{fill:color-mix(in srgb,var(--primary) 22%,transparent);stroke:none}
html[data-skin="ink"] .ink-orn .tw{transform-box:fill-box;transform-origin:50% 50%;animation:ink-twinkle 2.4s var(--pn-ease) 2}
html[data-skin="ink"] .ink-orn .tw:nth-of-type(2n){animation-delay:-.9s}
@keyframes ink-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.6) rotate(20deg)}}
html[data-skin="ink"] .ink-orn .spin{transform-box:view-box;transform-origin:0 0;animation:ink-spin 24s linear infinite}
html[data-skin="ink"][data-motion="stop"] .ink-orn .spin,html[data-skin="ink"][data-motion="hybrid"] .sm .ink-orn .spin{animation-timing-function:steps(96,end)}
@keyframes ink-spin{to{transform:rotate(360deg)}}

/* ---- Penny: shared art, per-mood poses. Fluid = smooth springs; stop / hybrid(.sm) = held frames via steps() ---- */
html[data-skin="ink"] .penny .pn-line{fill:none;stroke:var(--pn-line);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html[data-skin="ink"] .penny .pn-hose{fill:none;stroke:var(--pn-line);stroke-width:2.6;stroke-linecap:round}
html[data-skin="ink"] .penny .pn-lid{fill:var(--pn-coin);stroke:var(--pn-dark);stroke-width:1.8;stroke-linejoin:round}
html[data-skin="ink"] .penny .pn-coin{fill:var(--pn-coin);stroke:var(--pn-line);stroke-width:2.8}
html[data-skin="ink"] .penny .pn-rim{fill:none;stroke:var(--pn-dark);stroke-width:1.3;stroke-dasharray:1.5 3.2;opacity:.55}
html[data-skin="ink"] .penny .pn-dk{fill:var(--pn-dark)}
html[data-skin="ink"] .penny .pn-shoe{fill:var(--pn-line)}
html[data-skin="ink"] .penny .pn-shine{fill:#FFFBF0;opacity:.75}
html[data-skin="ink"] .penny .pn-eye{fill:#FFFBF0;stroke:var(--pn-dark);stroke-width:1.8}
html[data-skin="ink"] .penny .pn-dl{fill:none;stroke:var(--pn-dark);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html[data-skin="ink"] .penny .pn-pink{fill:var(--pn-pink)}
html[data-skin="ink"] .penny .pn-snout{fill:var(--pn-pink);stroke:var(--pn-dark);stroke-width:1.8}
html[data-skin="ink"] .penny .pn-cheek{fill:var(--pn-pink);opacity:.7}
html[data-skin="ink"] .penny .pn-glove{fill:#FFFBF0;stroke:var(--pn-dark);stroke-width:1.6;stroke-linejoin:round}
html[data-skin="ink"] .penny .pn-fl{fill:none;stroke:var(--pn-dark);stroke-width:1.1;stroke-linecap:round}
html[data-skin="ink"] .penny .pn-shadow{fill:var(--pn-line);opacity:.18}
html[data-skin="ink"] .penny .pn-star{fill:var(--primary);stroke:var(--pn-line);stroke-width:1.2;stroke-linejoin:round}
html[data-skin="ink"] .penny .pn-drop{fill:#FFFBF0;stroke:var(--pn-line);stroke-width:1.6}
/* moving parts */
html[data-skin="ink"] .penny :is(.pn-jump,.pn-squash,.pn-arm,.pn-eyes,.pn-z,.pn-stars,.pn-drop,.pn-shadow,.pn-smear){transform-box:view-box}
html[data-skin="ink"] .penny .pn-squash{transform-origin:60px 110px}
html[data-skin="ink"] .penny .pn-jump{transform-origin:60px 110px}
html[data-skin="ink"] .penny .pn-shadow{transform-origin:60px 113px}
html[data-skin="ink"] .penny .pn-eyes{transform-origin:60px 51px}
html[data-skin="ink"] .penny .pn-arm{transform-origin:31px 64px;transform:rotate(var(--a))}
html[data-skin="ink"] .penny .pn-arm-l{--a:var(--al,6deg)}
html[data-skin="ink"] .penny .pn-arm-r{--a:var(--ar,6deg)}
/* expression toggles. V2r1 deadpan: half-lidded by default, a raised brow instead of a grin, no cheeks */
html[data-skin="ink"] .penny :is(.pn-shut,.pn-brows,.pn-brow1,.pn-m,.pn-drop,.pn-z,.pn-stars,.pn-smear,.pn-cheek){display:none}
html[data-skin="ink"] .mascot:is([data-mood="idle"],:not([data-mood])) .pn-m-smile,
html[data-skin="ink"] .mascot[data-mood="happy"] :is(.pn-m-smile,.pn-brow1),
html[data-skin="ink"] .mascot[data-mood="cheer"] :is(.pn-m-smile,.pn-brow1,.pn-stars),
html[data-skin="ink"] .mascot[data-mood="worried"] :is(.pn-brows,.pn-m-wavy,.pn-drop),
html[data-skin="ink"] .mascot[data-mood="sleepy"] :is(.pn-shut,.pn-m-o,.pn-z){display:inline}
html[data-skin="ink"] .mascot[data-mood="sleepy"] .pn-eyes{display:none}
html[data-skin="ink"] .mascot[data-mood="worried"] .pn-lid{display:none} /* wide-eyed only when it matters */
/* idle: still. One slow blink every ~6s */
html[data-skin="ink"] .penny .pn-eyes{animation:pn-blink 6s steps(1,end) infinite}
@keyframes pn-blink{0%,94%{transform:none}96%{transform:scaleY(.12)}98%,100%{transform:none}}
@keyframes pn-wave{from{transform:rotate(calc(var(--a) - 10deg))}to{transform:rotate(calc(var(--a) + 8deg))}}
/* happy: no hop, no wave. A raised brow and a hand in the pocket (arm down) */
html[data-skin="ink"] .mascot[data-mood="happy"]{--ar:-2deg;--al:-2deg}
/* worried (over target): one hand to the head, a couple of sweat drops, then still */
html[data-skin="ink"] .mascot[data-mood="worried"]{--al:-2deg;--ar:150deg}
html[data-skin="ink"] .mascot[data-mood="worried"] .pn-drop{animation:pn-drip 1.6s var(--pn-ease) 2 both}
@keyframes pn-drip{0%{transform:translateY(-3px);opacity:0}25%{opacity:1}80%{transform:translateY(10px);opacity:1}100%{transform:translateY(14px);opacity:0}}
/* sleepy (nudge): droop, slow breath, floating Zs */
html[data-skin="ink"] .mascot[data-mood="sleepy"]{--al:-3deg;--ar:-3deg}
html[data-skin="ink"] .mascot[data-mood="sleepy"] .pn-jump{transform:rotate(-5deg)}
html[data-skin="ink"] .mascot[data-mood="sleepy"] .pn-squash{animation:pn-snore 3s var(--pn-ease) infinite}
html[data-skin="ink"] .mascot[data-mood="sleepy"] .pn-z{animation:pn-z 3s var(--pn-ease) infinite}
@keyframes pn-snore{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.96)}}
@keyframes pn-z{0%{transform:translate(-4px,6px);opacity:0}30%{opacity:1}100%{transform:translate(6px,-12px);opacity:0}}
/* cheer (logged / settled): ONE small hop with squash & stretch, one arm up, one star. Then still. */
html[data-skin="ink"] .mascot[data-mood="cheer"]{--al:-2deg;--ar:140deg}
html[data-skin="ink"] .mascot[data-mood="cheer"] .pn-jump{animation:pn-jump .7s var(--pn-pop) 1}
html[data-skin="ink"] .mascot[data-mood="cheer"] .pn-squash{animation:pn-sqst .7s var(--pn-ease) 1}
html[data-skin="ink"] .mascot[data-mood="cheer"] .pn-shadow{animation:pn-shad .7s var(--pn-ease) 1}
html[data-skin="ink"] .mascot[data-mood="cheer"] .pn-stars{transform-origin:60px 40px;animation:pn-burst .9s var(--pn-pop) 1 both}
@keyframes pn-jump{0%,8%{transform:translateY(0)}38%{transform:translateY(-8px)}62%,100%{transform:translateY(0)}}
@keyframes pn-sqst{0%{transform:scale(1.08,.92)}12%{transform:scale(.94,1.08)}38%{transform:scale(1,1)}62%{transform:scale(1.08,.92)}88%,100%{transform:scale(1,1)}}
@keyframes pn-shad{0%,8%,62%,100%{transform:scale(1)}38%{transform:scale(.7)}}
@keyframes pn-burst{0%{transform:scale(.4);opacity:0}30%{transform:scale(1.1);opacity:1}80%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}

/* ============ Reduced motion: no boil, no flicker, no grain crawl ============ */
@media (prefers-reduced-motion:reduce){
  html[data-skin="ink"] body::before,html[data-skin="ink"] body::after{animation:none!important}
  html[data-skin="ink"] .ink-smear,html[data-skin="ink"] .ink-smear-x{filter:none;scale:none}
  html[data-skin="ink"] .boil.ink-art{rotate:none}
}