/* ════════════════════════════════════════════════════════════════
   GNR — 和風 design variants (switchable via Tweaks)
   ────────────────────────────────────────────────────────────────
   Three switchable families, all in the page's 和 palette
   (washi 和紙 · sumi 墨 · vermilion 朱):

   ①  .callout.cv-*    — 柱 (left-spine) annotation frames.
   ②  .demo-stage.pv-* — light-ground (明るい地) panel framing.
   ③  .demo-stage.plate-* — the figure-plate ground (図版地), driven by
                            the CSS var --plate so every canvas follows it.
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   ①  CALLOUT — 柱 (HASHIRA) FAMILY  ·  墨＋朱
   A vertical accent in the left margin, a mincho label, one vermilion
   mark. Type is told by the label text, never by colour.
   ════════════════════════════════════════════════════════════════ */

.callout.cv-hashira, .callout.cv-futo, .callout.cv-shu, .callout.cv-soe,
.callout.cv-ten, .callout.cv-kake, .callout.cv-shirube, .callout.cv-daikake{
  position:relative;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--paper-tint) 48%, var(--paper)),
    color-mix(in srgb, var(--paper-tint) 72%, var(--paper)));
  border:0; border-radius:7px;
  padding:16px 22px 16px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(27,23,17,.05);
}
/* the callout body sits in fuller ink so it reads apart from the lighter
   running text around it */
.callout.cv-hashira p, .callout.cv-futo p, .callout.cv-shu p,
.callout.cv-soe p, .callout.cv-ten p, .callout.cv-kake p,
.callout.cv-shirube p, .callout.cv-daikake p{ color:var(--ink); }
.callout.cv-hashira .co-label, .callout.cv-futo .co-label,
.callout.cv-shu .co-label, .callout.cv-soe .co-label,
.callout.cv-ten .co-label, .callout.cv-kake .co-label,
.callout.cv-shirube .co-label, .callout.cv-daikake .co-label{
  color:var(--ink); font-family:var(--mincho); font-weight:700;
  letter-spacing:.15em; line-height:1.15;
}
/* hide the trailing rule by default (Daikake re-enables it) */
.callout.cv-hashira .co-label::after, .callout.cv-futo .co-label::after,
.callout.cv-shu .co-label::after, .callout.cv-soe .co-label::after,
.callout.cv-ten .co-label::after, .callout.cv-kake .co-label::after,
.callout.cv-shirube .co-label::after{ display:none; }

/* — lozenge-marked spines — */
.callout.cv-hashira .co-label::before, .callout.cv-futo .co-label::before,
.callout.cv-soe .co-label::before, .callout.cv-ten .co-label::before{
  width:8px;height:8px;background:var(--seal);transform:rotate(45deg);border-radius:0;
}

/* 1 ── 柱 Hashira : a fine sumi hairline spine. The quiet original. */
.callout.cv-hashira{ border-left:1px solid var(--rule-2); }

/* 2 ── 太柱 Futobashira : a heavier solid sumi spine — more authority. */
.callout.cv-futo{ border-left:3px solid var(--ink); padding-left:24px; }

/* 3 ── 朱柱 Shubashira : the spine itself is vermilion; no marker. */
.callout.cv-shu{ border-left:2px solid var(--seal); }
.callout.cv-shu .co-label::before{ width:0;height:0;background:transparent;margin:0; }

/* 4 ── 添柱 Soebashira : a double sumi spine (solid + hairline). */
.callout.cv-soe{ border-left:1px solid var(--ink); padding-left:25px; }
.callout.cv-soe::before{
  content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:var(--rule-2);
}

/* 5 ── 点柱 Tenbashira : a dashed sumi spine — a stitched margin rule. */
.callout.cv-ten{ border-left:1px dashed color-mix(in srgb,var(--ink) 55%,transparent); }

/* — TITLE-ALIGNED accents (the vermilion bar stretches to the title's
     line-box, so its height always matches the heading) — */
.callout.cv-kake .co-label::before,
.callout.cv-shirube .co-label::before,
.callout.cv-daikake .co-label::before{
  width:3px; height:auto; align-self:stretch; background:var(--seal);
  transform:none; border-radius:0; flex:none;
}

/* 6 ── 掛柱 Kake : a sumi spine + a vermilion title-bar, both running with
       the heading — the cap is exactly the height of the title. */
.callout.cv-kake{ border-left:1px solid var(--rule-2); }

/* 7 ── 標 Shirube : only the aligned vermilion title-bar — no body spine.
       The barest mark; body indents to sit under the heading. */
.callout.cv-shirube{ border-left:0; padding-left:18px; }

/* 8 ── 題掛 Daikake : the aligned vermilion title-bar opens a masthead —
       a fine sumi rule trails off to the right of the heading. */
.callout.cv-daikake{ border-left:0; }
.callout.cv-daikake .co-label::after{
  display:block; flex:1 1 auto; height:1px; align-self:center; margin-left:6px;
  background:linear-gradient(to right, var(--rule-2), transparent);
}


/* ════════════════════════════════════════════════════════════════
   ②  PANEL — LIGHT-GROUND FAMILY  ·  明るい地の額装
   The ground is washi / paper / silver-grey — never black. The figure
   plates follow --plate (see ③); controls & captions invert to sumi.
   `.pv-light` carries the shared inner inversion (added to every panel).
   ════════════════════════════════════════════════════════════════ */

.demo-stage.pv-light{ color:var(--ink); }

/* every figure plate is CSS-driven (canvas pixels draw on top) */
.demo-stage.pv-light canvas{
  background-color:var(--plate, #322e29) !important;
  background-image:var(--plate-img, none) !important;
  background-size:var(--plate-size, auto) !important;
  background-position:center !important;
  border:none !important;
}

/* ── 図版枠 plate border (optional, tweakable) ─────────────────────
   Default = none (borderless, plate dissolves into the panel ground).
   A thin keyline can be added in one of several washi-friendly inks. */
.demo-stage.pb-sumi.pv-light canvas{ border:1px solid rgba(31,27,20,.34) !important; }
.demo-stage.pb-usuzumi.pv-light canvas{ border:1px solid rgba(31,27,20,.16) !important; }
.demo-stage.pb-shu.pv-light canvas{ border:1px solid rgba(176,52,40,.55) !important; }
.demo-stage.pb-kincha.pv-light canvas{ border:1px solid rgba(150,108,40,.55) !important; }
.demo-stage.pb-ai.pv-light canvas{ border:1px solid rgba(40,66,110,.50) !important; }
.demo-stage.pb-rikyu.pv-light canvas{ border:1px solid rgba(90,96,72,.50) !important; }
.demo-stage.pv-light .gr-3d-wrap canvas{
  background-image:radial-gradient(120% 120% at 50% 30%,
    color-mix(in srgb,var(--plate, #322e29) 78%,#fff) 0%,
    var(--plate, #322e29) 64%,
    color-mix(in srgb,var(--plate, #322e29) 72%,#000) 100%) !important;
  background-size:auto !important;
}
.demo-stage.pv-light .gnr-panel-group{ background:transparent; border:none; padding:0; }
/* control bar → paper */
.demo-stage.pv-light .gnr-controls{
  background:color-mix(in srgb,var(--paper-tint) 72%, var(--paper));
  border:1px solid var(--rule);
}
.demo-stage.pv-light .ctl-label{ color:var(--ink-2); }
.demo-stage.pv-light .ctl-label em{ color:var(--ink-3); }
.demo-stage.pv-light .segmented{ background:rgba(27,23,17,.06); border:1px solid var(--rule); }
.demo-stage.pv-light .segmented .seg{ color:var(--ink-2); }
.demo-stage.pv-light .segmented .seg:hover{ color:var(--ink); }
.demo-stage.pv-light .segmented .seg.active{ color:#fff; }
.demo-stage.pv-light .stepper{
  background:rgba(27,23,17,.04); color:var(--ink-2); border:1px solid var(--rule-2);
}
.demo-stage.pv-light .stepper:hover:not(:disabled){
  color:var(--ink); border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
}
.demo-stage.pv-light .cap{ color:var(--ink-3); }
.demo-stage.pv-light .cap b{ color:var(--ink); }
/* classification readout — hidden in the washi panels per design (the dark
   chip clashed with the sheet; the caption already explains the flip) */
.demo-stage.pv-light .gr-info{ display:none; }
.demo-stage.pv-light .gr-info b{ color:#efe7d8; }

/* ── grounds ──────────────────────────────────────────────────── */

/* 1 ── 和紙 Washi : a warm washi sheet, fine sumi border, soft lift. */
.demo-stage.pv-washi{
  background:radial-gradient(130% 140% at 28% 0%,
    color-mix(in srgb,var(--paper) 97%,#fff), var(--paper) 62%);
  border:1px solid var(--rule-2); border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 14px rgba(0,0,0,.13);
}

/* 2 ── 鳥の子 Torinoko : ivory sheet with a fine inner keyline — formal. */
.demo-stage.pv-torinoko{
  position:relative; background:#f4efe2;
  border:1px solid var(--rule-2); border-radius:4px;
  box-shadow:0 0 14px rgba(0,0,0,.13);
}
.demo-stage.pv-torinoko::before{
  content:"";position:absolute;inset:6px;pointer-events:none;z-index:6;
  border:1px solid var(--rule); border-radius:2px;
}

/* 3 ── 銀鼠 Ginnezu : a cool silver-grey ground under one sumi top rule. */
.demo-stage.pv-ginnezu{
  background:#e6e4de; border:1px solid rgba(27,23,17,.18);
  border-top:2px solid var(--ink); border-radius:3px;
  box-shadow:0 0 14px rgba(0,0,0,.13);
}

/* 4 ── 生成 Kinari : unbleached paper, square corners, vermilion ticks. */
.demo-stage.pv-kinari{
  position:relative; background:var(--paper-tint);
  border:1px solid var(--rule-2); border-radius:1px;
  box-shadow:0 0 14px rgba(0,0,0,.13);
}
.demo-stage.pv-kinari::before{
  content:"";position:absolute;inset:-8px;pointer-events:none;
  background:
    linear-gradient(var(--seal),var(--seal)) 0 0/14px 1.5px no-repeat,
    linear-gradient(var(--seal),var(--seal)) 0 0/1.5px 14px no-repeat,
    linear-gradient(var(--seal),var(--seal)) 100% 0/14px 1.5px no-repeat,
    linear-gradient(var(--seal),var(--seal)) 100% 0/1.5px 14px no-repeat,
    linear-gradient(var(--seal),var(--seal)) 0 100%/14px 1.5px no-repeat,
    linear-gradient(var(--seal),var(--seal)) 0 100%/1.5px 14px no-repeat,
    linear-gradient(var(--seal),var(--seal)) 100% 100%/14px 1.5px no-repeat,
    linear-gradient(var(--seal),var(--seal)) 100% 100%/1.5px 14px no-repeat;
}

/* 5 ── 表装 Hyōsō : a scroll-mounting — a wide washi mat frames the field. */
.demo-stage.pv-hyoso{
  position:relative; background:var(--paper);
  border:16px solid var(--paper-tint); border-radius:3px;
  box-shadow:0 0 0 1px var(--rule-2), 0 0 14px rgba(0,0,0,.13);
}
.demo-stage.pv-hyoso::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  box-shadow:inset 0 0 0 1px var(--rule);
}

/* 6 ── 縹 Hanada : a barely-there indigo wash over paper. */
.demo-stage.pv-hanada{
  background:color-mix(in srgb,#3f5a6b 7%, var(--paper));
  border:1px solid color-mix(in srgb,#3f5a6b 24%, var(--rule)); border-radius:5px;
  box-shadow:0 0 14px rgba(0,0,0,.13);
}


/* ════════════════════════════════════════════════════════════════
   ②b 習字 SHŪJI FAMILY · 下敷き(felt) + 半紙(paper) + 文鎮(bunchin)
   A calligraphy desk. Robust 3-layer build that always paints:
     ·  background  → the hanshi sheet (半紙)  ← element background
     ·  border 16px → the wool under-mat (下敷き)  ← felt frame
     ·  ::after / ::before (z-6, pointer-events:none) → the paperweight(s)
        / printed rule / seal, resting on the sheet's top margin.
   The real content sits straight on the sheet (no z-index gymnastics);
   the felt border holds it like a mat, the bunchin lies across the top.
   ════════════════════════════════════════════════════════════════ */

.demo-stage.pv-bunchin, .demo-stage.pv-rochiku, .demo-stage.pv-sochin,
.demo-stage.pv-tatechin, .demo-stage.pv-keihanshi, .demo-stage.pv-rakkan{
  position:relative;
  padding:34px 18px 20px;
  background-color:#fbf8f0;                         /* hanshi sheet */
  border:16px solid var(--mat, #585b50);            /* felt under-mat (tweakable) */
  border-radius:4px;
  box-shadow:0 0 18px rgba(0,0,0,.14),
             inset 0 0 0 1px rgba(31,27,20,.14),     /* sheet rests on felt */
             inset 0 2px 8px rgba(31,27,20,.05);
}
/* injected real elements (see applyTweaks): the hanshi printed frame / seal.
   (the paperweight bar has been removed per request.) `.shuji-deco` holds them */
.shuji-deco{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.sj-frame{
  position:absolute; inset:8px; border:1px solid rgba(31,27,20,.18); border-radius:2px;
}
.sj-seal{
  position:absolute; right:18px; bottom:18px; width:22px; height:22px;
  background:var(--seal); border-radius:2px; opacity:.92;
  box-shadow:0 1px 2px rgba(31,27,20,.35), inset 0 0 0 1px rgba(255,255,255,.18);
}

/* ── felt frame variants (paper / extras differ; colour follows --mat) ── */
/* A · 文鎮 Bunchin — plain sheet + faint printed frame */
.demo-stage.pv-bunchin{ background-color:#fbf8f0; }
/* B · 老竹 Rōchiku — a hair warmer sheet */
.demo-stage.pv-rochiku{ background-color:#fcfaf3; }
/* C · 双鎮 Sōchin — plain sheet */
.demo-stage.pv-sochin{ background-color:#fbf8f0; }
/* D · 縦鎮 Tatechin — plain sheet */
.demo-stage.pv-tatechin{ background-color:#fbf8f0; }
/* E · 罫半紙 Keihanshi — sheet with a faint printed centre rule + frame */
.demo-stage.pv-keihanshi{
  background-color:#fbf8f0;
  background-image:linear-gradient(rgba(31,27,20,.16),rgba(31,27,20,.16));
  background-repeat:no-repeat; background-position:50% 0; background-size:1px 100%;
}
/* F · 落款 Rakkan — sheet + a small vermilion seal, lower-right */
.demo-stage.pv-rakkan{ background-color:#fbf8f0; }

/* ── 下敷き色 · mat colours (calm, theme-matching washi/sumi tones) ── */
.demo-stage.mat-sumi{      --mat:#3b352e; }   /* 墨    soft charcoal      */
.demo-stage.mat-keshizumi{ --mat:#2e2a25; }   /* 消炭  warm near-black    */
.demo-stage.mat-rikyu{     --mat:#585b50; }   /* 利休鼠 green-grey         */
.demo-stage.mat-ainezu{    --mat:#515b61; }   /* 藍鼠  blue-grey          */
.demo-stage.mat-hatoba{    --mat:#595460; }   /* 鳩羽鼠 purple-grey        */
.demo-stage.mat-konnezu{   --mat:#3c4350; }   /* 紺鼠  deep indigo-grey   */
.demo-stage.mat-kurumi{    --mat:#5b4d3e; }   /* 胡桃  walnut brown       */
.demo-stage.mat-kobicha{   --mat:#54492f; }   /* 媚茶  olive brown        */
.demo-stage.mat-rikyucha{  --mat:#4e4a39; }   /* 利休茶 muted tea-olive    */
.demo-stage.mat-nibi{      --mat:#4a4640; }   /* 鈍色  neutral warm grey  */
/* ── 薄墨系 lighter, washed sumi greys ── */
.demo-stage.mat-chuzumi{   --mat:#565049; }   /* 中墨  mid sumi           */
.demo-stage.mat-usuzumi{   --mat:#6b655b; }   /* 薄墨  diluted sumi       */
.demo-stage.mat-sunezu{    --mat:#7c766b; }   /* 素鼠  plain warm grey    */
.demo-stage.mat-hai{       --mat:#8b8378; }   /* 灰    soft ash           */


/* ════════════════════════════════════════════════════════════════
   ③  FIGURE-PLATE GROUND  ·  図版地  (the "dark part" behind the plots)
   Sets --plate (and optional --plate-img). The drawing is light-on-dark,
   so the plate stays dark — but its tone & texture are yours to pick.
   ════════════════════════════════════════════════════════════════ */

/* 1 ── 墨 Sumi : warm graphite (default). */
.demo-stage.plate-sumi{ --plate:#322e29; --plate-img:none; }

/* 2 ── 鉄 Tetsu : a deep near-black iron ground — the most contrast. */
.demo-stage.plate-tetsu{ --plate:#1b1815; --plate-img:none; }

/* 3 ── 藍墨 Aizumi : a cool slate-indigo ground. */
.demo-stage.plate-aizumi{ --plate:#222a30; --plate-img:none; }

/* 4 ── 生壁 Namakabe : a warm taupe ground — the lightest plate. */
.demo-stage.plate-namakabe{ --plate:#3b362d; --plate-img:none; }

/* 5 ── 方眼 Hōgan : a graphite ground ruled with a faint graph-paper grid. */
.demo-stage.plate-hougan{
  --plate:#2b2823;
  --plate-img:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px);
  --plate-size:22px 22px;
}

/* 6 ── 暈 Bokashi : a graphite ground that deepens to a vignette at the edges. */
.demo-stage.plate-bokashi{
  --plate:#302c27;
  --plate-img:radial-gradient(125% 125% at 50% 42%, transparent 48%, rgba(0,0,0,.42) 100%);
  --plate-size:cover;
}

/* ── LIGHT plot fields ──────────────────────────────────────────
   The figure is now drawn directly with a dark-on-light 和 theme (see
   graphene-nanoribbons.js · window.__gnrLight), so each washi plate just
   sets its paper colour as --plate — the 2-D figures sit on real washi
   tones with hand-picked sumi / 朱 / 藍 lines. The 3-D viewport stays a
   dark plate (its surface palette is tuned for dark). */
.demo-stage.plate-kinari .gr-3d-wrap canvas, .demo-stage.plate-torinoko2 .gr-3d-wrap canvas,
.demo-stage.plate-suna .gr-3d-wrap canvas, .demo-stage.plate-zoge .gr-3d-wrap canvas,
.demo-stage.plate-shironeri .gr-3d-wrap canvas, .demo-stage.plate-haijiro .gr-3d-wrap canvas,
.demo-stage.plate-sunakabe .gr-3d-wrap canvas, .demo-stage.plate-sumijiro .gr-3d-wrap canvas,
.demo-stage.plate-callout .gr-3d-wrap canvas,
.demo-stage.plate-shiro .gr-3d-wrap canvas, .demo-stage.plate-unohana .gr-3d-wrap canvas{
  background-image:radial-gradient(120% 120% at 50% 30%, #26211d 0%, #161310 70%, #100d0b 100%) !important;
  border-color:rgba(255,255,255,.08) !important;
}

/* 7 ── 生成 Kinari : unbleached warm cream. */
.demo-stage.plate-kinari{ --plate:#f4eedd; --plate-img:none; }
/* 8 ── 鳥の子 Torinoko : ivory / eggshell. */
.demo-stage.plate-torinoko2{ --plate:#f6f1e3; --plate-img:none; }
/* 9 ── 砂 Suna : light sandy beige. */
.demo-stage.plate-suna{ --plate:#efe6d3; --plate-img:none; }
/* 10 ── 象牙 Zōge : soft bright ivory. */
.demo-stage.plate-zoge{ --plate:#f7f2e6; --plate-img:none; }
/* 11 ── 白練 Shironeri : warm near-white. */
.demo-stage.plate-shironeri{ --plate:#faf7f0; --plate-img:none; }
/* 12 ── 灰白 Haijiro : a soft warm neutral white (matches the washi ground). */
.demo-stage.plate-haijiro{ --plate:#f1eee5; --plate-img:none; }
/* 13 ── 砂壁 Sunakabe : warm kraft / sand-wall. */
.demo-stage.plate-sunakabe{ --plate:#e9e0cf; --plate-img:none; }
/* 14 ── 墨白 Sumijiro : near-white, editorial. */
.demo-stage.plate-sumijiro{ --plate:#f8f5ee; --plate-img:none; }
/* 15 ── 注釈 Callout : the plot field uses the exact callout block tint. */
.demo-stage.plate-callout{ --plate:color-mix(in srgb, var(--paper-tint) 60%, var(--paper)); --plate-img:none; }
/* 16 ── 白 Shiro : pure white. */
.demo-stage.plate-shiro{ --plate:#ffffff; --plate-img:none; }
/* 17 ── 卯 Unohana : the faintest off-white (near-pure, a hair warm). */
.demo-stage.plate-unohana{ --plate:#fcfbf8; --plate-img:none; }


/* ════════════════════════════════════════════════════════════════
   ④  REFINED 角印 SHAPING + LIGHT-BAR POLISH
   "Square as a basis" — but softened, not sharp. A considered, even
   corner radius throughout, with quiet highlights and shadows so the
   controls and plates feel crafted rather than cut.
   ════════════════════════════════════════════════════════════════ */

/* slider — visible sumi track, a refined soft-square vermilion thumb */
.demo-stage.pv-light input[type=range]{
  background:rgba(27,23,17,.20); border-radius:2px; height:5px;
}
.demo-stage.pv-light input[type=range]::-webkit-slider-thumb{
  width:15px; height:15px; border-radius:4px; background:var(--accent); border:none;
  box-shadow:0 1px 3px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.32);
}
.demo-stage.pv-light input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:4px; background:var(--accent); border:none;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
}

/* control bar — paper with a quiet top highlight */
.demo-stage.pv-light .gnr-controls{
  border-radius:8px; padding:13px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.demo-stage.pv-light .gnr-panel-group{ border-radius:8px; }

/* figure plates — softly lifted, like figures pasted onto the sheet */
.demo-stage.pv-light canvas{
  border-radius:5px !important;
  box-shadow:none !important;
}
.demo-stage.pv-light .gr-info{ border-radius:6px; }

/* segmented edge selector — a crafted, pressed active state */
.demo-stage.pv-light .segmented{ border-radius:9px; padding:3px; }
.demo-stage.pv-light .segmented .seg{ border-radius:6px; }
.demo-stage.pv-light .segmented .seg.active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 3px rgba(0,0,0,.22);
}

/* +/- steppers — soft squares, not circles */
.demo-stage.pv-light .stepper{ border-radius:7px; }

/* in-figure 3D controls — matching soft corners */
.demo-stage .gr-view-group{ border-radius:7px; }
.demo-stage .gr-toggle{ border-radius:7px; }
.demo-stage .gr-toggle-track{ border-radius:6px; }
.demo-stage .gr-toggle-thumb{ border-radius:4px; }
.demo-stage .gr-3d-hint{ border-radius:6px; }

/* panel grounds — soft 角印 corners (squared, never sharp) */
.demo-stage.pv-washi, .demo-stage.pv-torinoko, .demo-stage.pv-ginnezu,
.demo-stage.pv-kinari, .demo-stage.pv-hyoso, .demo-stage.pv-hanada{
  border-radius:7px;
}


/* ════════════════════════════════════════════════════════════════
   ⑤  習字額装の全ページ展開 · the felt panel frame, site-wide
   ────────────────────────────────────────────────────────────────
   The 文鎮 Bunchin frame (墨フェルト下敷き + 半紙) is rolled out beyond
   the GNR page to every Learn module panel. The GNR page keeps its light
   figure plates (it draws dark-on-light via pv-light + plate-shiro); the
   other pages render their figures light-on-dark, so there the figure
   plates stay dark (図版地) while the surrounding controls & captions
   invert to sumi ink on the 半紙 sheet.
   Scope marker: `.pv-bunchin:not(.pv-light)` = the non-GNR pages.
   ════════════════════════════════════════════════════════════════ */

/* mat (下敷き) colour must resolve on .anim-card too — the bundle defines it
   only for .demo-stage. Element-agnostic so the felt colour follows the class. */
.mat-sunezu{ --mat:#7c766b; }

/* the interactive card on Raman / Measurement-error / Spectral-noise
   (.anim-card) wears the same felt frame that .demo-stage does elsewhere */
.anim-card.pv-bunchin{
  position:relative;
  padding:22px 18px 18px;
  background-color:#fbf8f0;                         /* 半紙 sheet */
  border:16px solid var(--mat, #7c766b);            /* 下敷き felt under-mat */
  border-radius:4px;
  box-shadow:0 0 18px rgba(0,0,0,.14),
             inset 0 0 0 1px rgba(31,27,20,.14),
             inset 0 2px 8px rgba(31,27,20,.05);
}

/* ── inner inversion: sumi ink reads on the 半紙 sheet ──────────── */
.pv-bunchin:not(.pv-light){ color:var(--ink); }

/* figures that leaned on the old dark card (translucent canvas grounds)
   now need a solid 図版地 so the light-on-dark drawing still reads */
.pv-bunchin:not(.pv-light) .gr-panel canvas,
.pv-bunchin:not(.pv-light) .gr-bands canvas,
.pv-bunchin:not(.pv-light) .gr-canvas-wide{
  background:#322e29 !important;
  border:1px solid rgba(31,27,20,.18) !important;
}

/* captions, labels & legends → muted ink */
.pv-bunchin:not(.pv-light) .cap,
.pv-bunchin:not(.pv-light) .me-cap,
.pv-bunchin:not(.pv-light) .panel-label,
.pv-bunchin:not(.pv-light) .me-legend,
.pv-bunchin:not(.pv-light) .branch-legend,
.pv-bunchin:not(.pv-light) .legend,
.pv-bunchin:not(.pv-light) .atom-legend,
.pv-bunchin:not(.pv-light) .decomp-label,
.pv-bunchin:not(.pv-light) .mode-explain,
.pv-bunchin:not(.pv-light) .trace-label .eq{ color:var(--ink-3); }
.pv-bunchin:not(.pv-light) .cap b,
.pv-bunchin:not(.pv-light) .me-cap b,
.pv-bunchin:not(.pv-light) .trace-label b,
.pv-bunchin:not(.pv-light) .panel-label b{ color:var(--ink); }

/* slider / control labels & read-outs sitting directly on the sheet */
.pv-bunchin:not(.pv-light) .me-slider label,
.pv-bunchin:not(.pv-light) .atom-slider label,
.pv-bunchin:not(.pv-light) .trace-label{ color:var(--ink-2); }
.pv-bunchin:not(.pv-light) .me-slider output,
.pv-bunchin:not(.pv-light) .atom-slider output{ color:var(--accent); }
.pv-bunchin:not(.pv-light) .trace-op{ color:var(--ink-2); }

/* push-buttons (graphene's Auto-rotate / Reset, etc.) */
.pv-bunchin:not(.pv-light) .demo-btn{
  color:var(--ink-2); border:1px solid var(--rule);
  background:rgba(31,27,20,.03);
}
.pv-bunchin:not(.pv-light) .demo-btn:hover{ color:var(--ink); border-color:var(--accent); }
.pv-bunchin:not(.pv-light) .demo-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* sig-fig output panel (measurement-error) sits on the sheet */
.pv-bunchin:not(.pv-light) .sf-out{ color:var(--ink); }
.pv-bunchin:not(.pv-light) .sf-out .sf-result{ color:var(--ink); }
.pv-bunchin:not(.pv-light) .sf-out .sf-rule{ color:var(--ink-3); }
.pv-bunchin:not(.pv-light) .sf-out .digit-sig{ color:var(--accent); }

/* info boxes that used translucent grounds → keep the tint, darken the ink */
.pv-bunchin:not(.pv-light) .gr-info{ color:#274a73; }
.pv-bunchin:not(.pv-light) .gr-info b{ color:#16335a; }
.pv-bunchin:not(.pv-light) .physics-note{ color:#5b4aa0; }
.pv-bunchin:not(.pv-light) .physics-note b{ color:#3f2f86; }
.pv-bunchin:not(.pv-light) .gr-list li{ color:var(--ink-2); }

/* diagnostics cards (graphene-raman) used a translucent ground */
.pv-bunchin:not(.pv-light) .diag-card{
  background:color-mix(in srgb, var(--paper-tint) 60%, var(--paper));
  border:1px solid var(--rule);
}
.pv-bunchin:not(.pv-light) .diag-card h3{ color:var(--ink); }
.pv-bunchin:not(.pv-light) .diag-card .gr-list li{ color:var(--ink-2); }

/* equation block & comparison table inside a framed panel */
.pv-bunchin:not(.pv-light) .eq-block{ color:var(--ink); }
.pv-bunchin:not(.pv-light) .comparison-table table,
.pv-bunchin:not(.pv-light) .comparison-table td{ color:var(--ink-2); }
.pv-bunchin:not(.pv-light) .comparison-table th{ color:var(--ink); border-bottom-color:var(--rule-2); }


/* ── controls on the 半紙 sheet: the same 角印 (soft-square) treatment the
   GNR panel uses — a visible sumi track + a vermilion soft-square thumb,
   and crafted soft-square buttons. Overrides the dark-theme defaults whose
   translucent-white tracks vanished on paper. ──────────────────────────── */

/* range sliders (raman / measurement-error / spectral-noise) */
.pv-bunchin:not(.pv-light) input[type=range]{
  -webkit-appearance:none; appearance:none;
  height:5px; border-radius:2px; background:rgba(27,23,17,.20);
  cursor:pointer;
}
.pv-bunchin:not(.pv-light) input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; border-radius:4px; background:var(--accent); border:none;
  box-shadow:0 1px 3px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.32);
}
.pv-bunchin:not(.pv-light) input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:4px; background:var(--accent); border:none;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
}

/* push-buttons → crafted soft-square, sumi-on-paper, vermilion when active */
.pv-bunchin:not(.pv-light) .demo-btn{
  border-radius:7px;
  color:var(--ink-2); border:1px solid var(--rule);
  background:rgba(31,27,20,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.pv-bunchin:not(.pv-light) .demo-btn:hover{
  color:var(--ink); border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.pv-bunchin:not(.pv-light) .demo-btn.active{
  background:var(--accent); color:#fff; border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 3px rgba(0,0,0,.22);
}

/* number / select fields (sig-fig tool) → light field on the sheet */
.pv-bunchin:not(.pv-light) .me-field{
  background:color-mix(in srgb, var(--paper-tint) 70%, var(--paper));
  color:var(--ink); border:1px solid var(--rule-2); border-radius:7px;
}
.pv-bunchin:not(.pv-light) .me-field:focus{ border-color:var(--accent); }