/* ═══════════════════════════════════════════════════════════════
   KOBAKO — four visual directions.
   Each block is a complete design system: paper, ink, accent,
   type pairing, edge treatment, ornament set, and the tokens the
   app-interface mockups inherit.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* geometry shared by all directions */
  --pad: clamp(24px, 4.4vw, 68px);
  --gap-kicker: 26px;
  --body-size: 15.5px;
  --panel-gap: 26px;
  --sys-pad-top: 78px;

  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --apple-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 7.2 12 3l9 4.2v9.6L12 21l-9-4.2V7.2Zm9 1.9 6.1-2.8L12 4.6 5.9 7.3 12 9.1Zm-7 0v7.1l6 2.8v-7.2L5 9.1Zm8 9.9 6-2.8V9.1l-6 2.8v7.1Z'/%3E%3C/svg%3E");

  --ok: #2f7a4f;
  --warn: #b4761c;
}

/* ═══════════════════════════════════════════════════════════════
   01 — 朱 SHU · Vermilion Atelier
   Washi cream, sumi ink, one loud vermilion. High-contrast didone
   against a grid of hairlines. Editorial, confident, a little severe.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="shu"] {
  --paper: #F4EFE4;
  --paper-2: #EBE4D5;
  --panel: #F9F5EC;
  --ink: #16130F;
  --ink-soft: #564E43;
  --ink-faint: #8C8375;
  --accent: #E03A22;
  --accent-on: #FDF8EF;
  --accent-2: #1F3A34;
  --line: rgba(22,19,15,.16);
  --accent-line: rgba(224,58,34,.42);
  --rule: 1px solid rgba(22,19,15,.16);

  --grain-opacity: .055;
  --grain-blend: multiply;

  --font-display: "Bodoni Moda", serif;
  --font-text: "EB Garamond", Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --font-jp: "Zen Kaku Gothic New", sans-serif;
  --wm-weight: 500; --wm-track: .16em;
  --h1-weight: 500; --h1-track: -.02em; --h1-style: normal;
  --h2-weight: 400; --h2-track: -.01em;
  --sub-style: italic; --sub-track: 0;

  --rail-bg: rgba(249,245,236,.9); --rail-line: rgba(22,19,15,.18);
  --rail-radius: 4px; --rail-hover: rgba(22,19,15,.07);
  --rail-shadow: 0 12px 34px rgba(40,26,12,.16);

  --btn-bg: #16130F; --btn-fg: #F4EFE4; --btn-line: transparent;
  --btn-radius: 3px; --btn-shadow: 5px 5px 0 var(--accent);

  --plate-radius: 2px;
  --plate-border: 1px solid rgba(22,19,15,.5);
  --plate-shadow: 14px 14px 0 rgba(22,19,15,.09);
  --plate-filter: none;
  --plate-glow: none; --plate-glow-blend: normal;

  --seal-display: flex; --seal-bg: var(--accent); --seal-fg: #FDF8EF;
  --seal-shadow: none;

  --orn-hinomaru: block; --hinomaru-opacity: 1; --hinomaru-blend: normal;
  --orn-diagonal: block;
  --orn-tategaki: block;

  --player-bg: rgba(249,245,236,.92); --player-line: rgba(22,19,15,.22);
  --player-radius: 3px; --player-shadow: 10px 10px 0 rgba(22,19,15,.07);
  --disc-bg: #16130F; --viz-fill: var(--accent);

  --panel-pad: 30px; --panel-border: 1px solid rgba(22,19,15,.16);
  --panel-radius: 2px; --panel-shadow: none;
  --sw-radius: 2px;

  --phone-border: 1px solid rgba(22,19,15,.55);
  --phone-shadow: 12px 12px 0 rgba(22,19,15,.08);
  --app-bg: #F9F5EC; --app-ink: #16130F; --app-ink-soft: #8C8375;
  --app-card: #FFFDF7; --app-card-border: 1px solid rgba(22,19,15,.14);
  --app-card-shadow: none; --app-line: rgba(22,19,15,.16);
  --app-accent: var(--accent);
  --app-radius: 2px; --app-check-radius: 1px; --app-dot-radius: 0; --app-fab-radius: 2px;
  --app-bubble-bg: #16130F; --app-bubble-fg: #F4EFE4; --app-bubble-radius: 2px;
  --app-room-filter: saturate(.95);
  --pri-hi: #E03A22; --pri-mid: #C08A1E; --pri-lo: #4C6B5C;

  --note-bg: #E03A22; --note-fg: #FDF8EF; --note-ring: rgba(224,58,34,.4);
}
[data-theme="shu"] .orn--hinomaru { left: 47%; top: 6%; width: min(30vw, 360px); }

/* ═══════════════════════════════════════════════════════════════
   02 — 喫茶 KISSATEN · Lo-Fi Jazz Kissa
   The 1970s Japanese coffee shop: aged paper, bottle green, burnt
   orange, mustard. Heavy mincho display, thick rules, record-sleeve
   printing. Warm, analogue, slightly loud.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="kissaten"] {
  --paper: #E9DCC2;
  --paper-2: #DCCBA9;
  --panel: #F0E6D2;
  --ink: #241C13;
  --ink-soft: #5C4B36;
  --ink-faint: #907B5D;
  --accent: #C2521F;
  --accent-on: #F7EEDB;
  --accent-2: #1E4034;
  --line: rgba(36,28,19,.22);
  --accent-line: rgba(194,82,31,.5);
  --rule: 2px solid rgba(36,28,19,.24);

  --grain-opacity: .1;
  --grain-blend: multiply;

  --font-display: "Zen Old Mincho", serif;
  --font-text: "Archivo", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --font-jp: "Zen Old Mincho", serif;
  --wm-weight: 700; --wm-track: .1em;
  --h1-weight: 900; --h1-track: -.015em; --h1-style: normal;
  --h2-weight: 700; --h2-track: -.01em;
  --sub-style: normal; --sub-track: .01em;

  --rail-bg: rgba(240,230,210,.94); --rail-line: rgba(36,28,19,.3);
  --rail-radius: 22px; --rail-hover: rgba(36,28,19,.09);
  --rail-shadow: 0 14px 34px rgba(50,32,12,.24);

  --btn-bg: #1E4034; --btn-fg: #F7EEDB; --btn-line: transparent;
  --btn-radius: 30px; --btn-shadow: 0 6px 0 rgba(30,64,52,.35);

  --plate-radius: 14px;
  --plate-border: 4px solid #241C13;
  --plate-shadow: 0 18px 0 -4px rgba(36,28,19,.18);
  --plate-filter: saturate(1.12) contrast(1.04) sepia(.12);
  --plate-glow: radial-gradient(120% 80% at 70% 20%, rgba(217,162,39,.24), transparent 60%);
  --plate-glow-blend: multiply;

  --seal-display: flex; --seal-bg: #1E4034; --seal-fg: #F7EEDB;
  --seal-shadow: 0 6px 0 rgba(30,64,52,.3);

  --orn-hinomaru: block; --hinomaru-opacity: .72; --hinomaru-blend: multiply;
  --orn-diagonal: none;
  --orn-tategaki: block;

  --player-bg: #1E4034; --player-line: rgba(247,238,219,.28);
  --player-radius: 18px; --player-shadow: 0 10px 0 rgba(30,64,52,.32);
  --disc-bg: #16130F; --viz-fill: #D9A227;

  --panel-pad: 28px; --panel-border: 2px solid rgba(36,28,19,.26);
  --panel-radius: 16px; --panel-shadow: 0 8px 0 -2px rgba(36,28,19,.14);
  --sw-radius: 10px;

  --phone-border: 5px solid #241C13;
  --phone-shadow: 0 16px 0 -4px rgba(36,28,19,.2);
  --app-bg: #F0E6D2; --app-ink: #241C13; --app-ink-soft: #907B5D;
  --app-card: #FBF4E4; --app-card-border: 1.5px solid rgba(36,28,19,.22);
  --app-card-shadow: 0 3px 0 rgba(36,28,19,.12); --app-line: rgba(36,28,19,.22);
  --app-accent: #C2521F;
  --app-radius: 12px; --app-check-radius: 6px; --app-dot-radius: 50%; --app-fab-radius: 50%;
  --app-bubble-bg: #1E4034; --app-bubble-fg: #F7EEDB; --app-bubble-radius: 12px 12px 12px 3px;
  --app-room-filter: saturate(1.15) sepia(.1);
  --pri-hi: #C2521F; --pri-mid: #D9A227; --pri-lo: #1E4034;

  --note-bg: #D9A227; --note-fg: #241C13; --note-ring: rgba(217,162,39,.45);
}
/* the hinomaru becomes a record */
[data-theme="kissaten"] .orn--hinomaru {
  left: 52%; top: 4%; width: min(28vw, 340px);
  background:
    radial-gradient(circle at 50% 50%, #D9A227 0 8%, transparent 8.5%),
    repeating-radial-gradient(circle at 50% 50%, rgba(36,28,19,.9) 0 2px, rgba(36,28,19,.55) 2px 5px);
}
[data-theme="kissaten"] .player__label,
[data-theme="kissaten"] .player__time,
[data-theme="kissaten"] .player__note { color: rgba(247,238,219,.62); }
[data-theme="kissaten"] .player__title { color: #F7EEDB; }
[data-theme="kissaten"] .player__jp { color: #D9A227; }
[data-theme="kissaten"] .player__idx { color: #D9A227; }
[data-theme="kissaten"] .player__side button { color: rgba(247,238,219,.8); border-color: rgba(247,238,219,.28); }
[data-theme="kissaten"] .player__side button:hover { background: rgba(247,238,219,.14); color: #F7EEDB; }
[data-theme="kissaten"] .player__play { background: #D9A227; color: #241C13; }
[data-theme="kissaten"] { --player-btn-radius: 50%; }
[data-theme="kissaten"] .player__disc { background: #16130F; box-shadow: inset 0 0 0 1px rgba(247,238,219,.3); }
[data-theme="kissaten"] .sw__meta { background: var(--panel); }

/* ═══════════════════════════════════════════════════════════════
   03 — 夕暮 YŪGURE · Blue Hour Riso
   Two inks on cheap paper: indigo and fluorescent coral, printed
   slightly out of register. Rounded grotesque, heavy grain, dotted
   screens. Young, printed, friendly.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="yugure"] {
  --paper: #F1EEE6;
  --paper-2: #E4E0D6;
  --panel: #F7F5EF;
  --ink: #23336B;
  --ink-soft: #4B5A8C;
  --ink-faint: #8B95B4;
  --accent: #FF5747;
  --accent-on: #F7F5EF;
  --accent-2: #23336B;
  --line: rgba(35,51,107,.22);
  --accent-line: rgba(255,87,71,.5);
  --rule: 1px solid rgba(35,51,107,.2);

  --grain-opacity: .13;
  --grain-blend: multiply;

  --font-display: "Familjen Grotesk", system-ui, sans-serif;
  --font-text: "Familjen Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --font-jp: "Zen Maru Gothic", sans-serif;
  --wm-weight: 600; --wm-track: .04em;
  --h1-weight: 700; --h1-track: -.045em; --h1-style: normal;
  --h2-weight: 600; --h2-track: -.03em;
  --sub-style: normal; --sub-track: -.01em;

  --rail-bg: rgba(247,245,239,.93); --rail-line: rgba(35,51,107,.24);
  --rail-radius: 14px; --rail-hover: rgba(35,51,107,.09);
  --rail-shadow: 0 12px 30px rgba(35,51,107,.2);

  --btn-bg: #FF5747; --btn-fg: #FFF8F2; --btn-line: transparent;
  --btn-radius: 12px; --btn-shadow: 4px 4px 0 #23336B;

  --plate-radius: 18px;
  --plate-border: 2px solid #23336B;
  --plate-shadow: 8px 8px 0 rgba(255,87,71,.55);
  --plate-filter: saturate(.72) contrast(1.08) hue-rotate(-6deg);
  --plate-glow: linear-gradient(200deg, rgba(35,51,107,.35), rgba(255,87,71,.22));
  --plate-glow-blend: screen;

  --seal-display: none; --seal-bg: var(--accent); --seal-fg: #fff; --seal-shadow: none;

  --orn-hinomaru: block; --hinomaru-opacity: .82; --hinomaru-blend: multiply;
  --orn-diagonal: none;
  --orn-tategaki: block;

  --player-bg: rgba(247,245,239,.94); --player-line: rgba(35,51,107,.26);
  --player-radius: 14px; --player-shadow: 6px 6px 0 rgba(35,51,107,.16);
  --disc-bg: #23336B; --viz-fill: #FF5747;

  --panel-pad: 28px; --panel-border: 1.5px solid rgba(35,51,107,.24);
  --panel-radius: 18px; --panel-shadow: 5px 5px 0 rgba(35,87,71,.0), 5px 5px 0 rgba(255,87,71,.18);
  --sw-radius: 10px;

  --phone-border: 3px solid #23336B;
  --phone-shadow: 10px 10px 0 rgba(255,87,71,.4);
  --app-bg: #F7F5EF; --app-ink: #23336B; --app-ink-soft: #8B95B4;
  --app-card: #FFFFFF; --app-card-border: 1.5px solid rgba(35,51,107,.2);
  --app-card-shadow: 2px 2px 0 rgba(35,51,107,.1); --app-line: rgba(35,51,107,.2);
  --app-accent: #FF5747;
  --app-radius: 12px; --app-check-radius: 5px; --app-dot-radius: 50%; --app-fab-radius: 12px;
  --app-bubble-bg: #FF5747; --app-bubble-fg: #FFF8F2; --app-bubble-radius: 12px 12px 12px 4px;
  --app-room-filter: saturate(.7) contrast(1.06);
  --pri-hi: #FF5747; --pri-mid: #E5A62E; --pri-lo: #4B5A8C;

  --note-bg: #FF5747; --note-fg: #FFF8F2; --note-ring: rgba(255,87,71,.45);
}
[data-theme="yugure"] .orn--hinomaru { left: 44%; top: 2%; width: min(34vw, 420px); }
/* misregistered second ink under the wordmark */
[data-theme="yugure"] .hero__title-main::before {
  content: attr(data-riso);
  position: absolute; left: 5px; top: 6px;
  color: var(--accent); mix-blend-mode: multiply; z-index: -1;
}

/* ═══════════════════════════════════════════════════════════════
   04 — 無 MU · Sumi Gallery
   Almost nothing: bright paper, hairlines, one seal-red mark and a
   great deal of air. Light Cormorant at gallery scale. The quietest
   reading of the app — closest to the rooms themselves.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="mu"] {
  --paper: #FAF9F5;
  --paper-2: #F2F0EA;
  --panel: #FFFFFF;
  --ink: #1C1B18;
  --ink-soft: #5E5C55;
  --ink-faint: #A5A29A;
  --accent: #A6392C;
  --accent-on: #FAF9F5;
  --accent-2: #6C7A5B;
  --line: rgba(28,27,24,.12);
  --accent-line: rgba(166,57,44,.3);
  --rule: 1px solid rgba(28,27,24,.1);

  --grain-opacity: .028;
  --grain-blend: multiply;

  --font-display: "Cormorant Garamond", serif;
  --font-text: "Cormorant Garamond", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-jp: "Zen Kaku Gothic New", sans-serif;
  --wm-weight: 400; --wm-track: .3em;
  --h1-weight: 300; --h1-track: .04em; --h1-style: normal;
  --h2-weight: 300; --h2-track: .02em;
  --sub-style: italic; --sub-track: .02em;

  --rail-bg: rgba(255,255,255,.86); --rail-line: rgba(28,27,24,.12);
  --rail-radius: 2px; --rail-hover: rgba(28,27,24,.05);
  --rail-shadow: 0 10px 40px rgba(28,27,24,.1);

  --btn-bg: transparent; --btn-fg: #1C1B18; --btn-line: rgba(28,27,24,.35);
  --btn-radius: 1px; --btn-shadow: none;

  --plate-radius: 1px;
  --plate-border: 1px solid rgba(28,27,24,.14);
  --plate-shadow: 0 30px 60px -30px rgba(28,27,24,.3);
  --plate-filter: saturate(.86) brightness(1.04);
  --plate-glow: linear-gradient(to top, rgba(250,249,245,.5), transparent 45%);
  --plate-glow-blend: normal;

  --seal-display: none; --seal-bg: var(--accent); --seal-fg: #fff; --seal-shadow: none;

  --orn-hinomaru: none; --hinomaru-opacity: 1; --hinomaru-blend: normal;
  --orn-diagonal: none;
  --orn-tategaki: block;

  --player-bg: rgba(255,255,255,.8); --player-line: rgba(28,27,24,.12);
  --player-radius: 2px; --player-shadow: 0 20px 50px -30px rgba(28,27,24,.4);
  --disc-bg: #F2F0EA; --viz-fill: var(--ink-soft);

  --panel-pad: 34px; --panel-border: 1px solid rgba(28,27,24,.1);
  --panel-radius: 1px; --panel-shadow: none;
  --sw-radius: 1px;

  --phone-border: 1px solid rgba(28,27,24,.16);
  --phone-shadow: 0 30px 60px -34px rgba(28,27,24,.45);
  --app-bg: #FFFFFF; --app-ink: #1C1B18; --app-ink-soft: #A5A29A;
  --app-card: #FAF9F5; --app-card-border: 1px solid rgba(28,27,24,.08);
  --app-card-shadow: none; --app-line: rgba(28,27,24,.1);
  --app-accent: #A6392C;
  --app-radius: 2px; --app-check-radius: 1px; --app-dot-radius: 50%; --app-fab-radius: 1px;
  --app-bubble-bg: #FAF9F5; --app-bubble-fg: #1C1B18; --app-bubble-radius: 2px;
  --app-room-filter: saturate(.8) brightness(1.05);
  --pri-hi: #A6392C; --pri-mid: #B08D3E; --pri-lo: #6C7A5B;

  --note-bg: #A6392C; --note-fg: #FAF9F5; --note-ring: rgba(166,57,44,.35);
}
[data-theme="mu"] .system { --sys-pad-top: 130px; }
[data-theme="mu"] .system__head { margin-bottom: 70px; }
[data-theme="mu"] .hero__body { max-width: 34ch; }
[data-theme="mu"] .btn:hover { background: var(--ink); color: var(--paper); }

/* ═══════════════════════════════════════════════════════════════
   05 — 和紙 WASHI · Origami & Vermilion
   Shu's palette given a surface. Kozo beige with a quiet tooth and
   three soft creases, as if the page were one folded sheet; Shu's
   vermilion carries every accent; rosewood — not tan — carries the
   weight. Origami rather than hand-made paper: crisp corners, one
   dog-ear, nothing frayed.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="washi"] {
  /* Straw, not oatmeal. The paper sits a step lighter and less saturated than
     the ochre wall in the room art, so the plate still reads as an object
     lying on a sheet rather than melting into it. */
  --paper: #F8F0DA;
  --paper-2: #EADFC2;
  --panel: #FDF8EC;
  --ink: #1C1813;
  --ink-soft: #574B3D;
  /* the faintest step still clears 4.5:1 on --paper — the labels it paints
     (kicker, waitlist small print, chips) are 9–10px, where 3:1 is not enough */
  --ink-faint: #7A6C55;
  --accent: #E03A22;          /* Shu vermilion, unchanged */
  --accent-on: #FCF6EA;
  --accent-2: #7C3C27;        /* rosewood */
  --line: rgba(28,24,19,.15);
  --accent-line: rgba(224,58,34,.4);
  --rule: 1px solid rgba(28,24,19,.14);

  /* rosewood, warm and red — no yellow in it */
  --wood-face: #9A5238;
  --wood-mid: #7C3C27;
  --wood-dark: #5E2A1B;
  --wood-grad:
    repeating-linear-gradient(90deg, rgba(48,16,8,.16) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255,196,166,.11) 0 1px, transparent 1px 19px),
    linear-gradient(178deg, var(--wood-face), var(--wood-mid) 60%, var(--wood-dark));

  /* Origami stock, built from three layers that each do a different job:
     MOTTLE — slow cloudiness, the thing you read as "handmade" at a glance
     FIBRE  — short horizontal strands, structure rather than contrast
     TOOTH  — fine grain, the surface you would feel
     Plus, on the page only, one directional sheen and three creases held
     still by background-attachment: fixed — the site is one folded sheet. */
  /* The texture inks are warm straw, not neutral brown, and they are laid on
     lightly. The first pass used a greyer ink at nearly twice these alphas:
     multiplied over the whole page it read as dirty paper and fought the ochre
     wall in the room art, which is the one thing on the page that has to look
     inviting. Raise these and the grey comes back. */
  --wa-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='4' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.52 0 0 0 0 0.38 0 0 0 0 0.14 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --wa-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028 0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.50 0 0 0 0 0.37 0 0 0 0 0.15 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --wa-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.50 0 0 0 0 0.38 0 0 0 0 0.16 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
  --wa-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' seed='41' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.98 0 0 0 0 0.92 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  --wa-sheen: linear-gradient(104deg, rgba(255,253,246,.42), transparent 38%, rgba(28,24,19,.03));
  --wa-creases:
    linear-gradient(90deg, transparent 0 33.2%, rgba(28,24,19,.05) 33.2% 33.33%, rgba(255,252,244,.55) 33.33% 33.5%, transparent 33.5%),
    linear-gradient(90deg, transparent 0 71.4%, rgba(255,252,244,.6) 71.4% 71.55%, rgba(28,24,19,.045) 71.55% 71.7%, transparent 71.7%),
    linear-gradient(0deg, transparent 0 55.5%, rgba(28,24,19,.04) 55.5% 55.62%, rgba(255,252,244,.5) 55.62% 55.8%, transparent 55.8%);

  --paper-texture:
    var(--wa-creases), var(--wa-sheen),
    var(--wa-tooth), var(--wa-fibre), var(--wa-mottle), var(--wa-light);
  /* panels and cards get the stock, never the creases —
     a folded sheet is folded once, not once per element */
  --panel-texture:
    var(--wa-sheen), var(--wa-tooth), var(--wa-fibre), var(--wa-mottle), var(--wa-light);
  --card-texture: var(--panel-texture);
  --app-surface-texture: var(--panel-texture);

  --grain-opacity: .03;
  --grain-blend: multiply;

  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Newsreader", Georgia, serif;
  --font-mono: "Zen Kaku Gothic New", sans-serif;
  --font-jp: "Shippori Mincho", serif;
  --wm-weight: 500; --wm-track: .14em;
  --h1-weight: 500; --h1-track: -.015em; --h1-style: normal;
  --h2-weight: 500; --h2-track: -.01em;
  --sub-style: italic; --sub-track: 0;

  --rail-bg: rgba(247,241,227,.93); --rail-line: rgba(28,24,19,.17);
  --rail-radius: 3px; --rail-hover: rgba(28,24,19,.07);
  --rail-shadow: 0 14px 34px rgba(60,26,12,.2);

  /* sumi, not vermilion: on this beige a red button and the red seal, wordmark
     and rules all shout at once. Black holds the page and the vermilion rim
     keeps it in the family. */
  --btn-bg: #1C1813; --btn-fg: #FCF6EA; --btn-line: transparent;
  --btn-radius: 2px; --btn-shadow: 0 5px 0 var(--accent), 0 12px 20px rgba(28,24,19,.28);

  --plate-radius: 2px;
  --plate-border: 9px solid #7C3C27;
  --plate-shadow: 0 3px 0 #5E2A1B, 0 22px 34px -16px rgba(60,26,12,.45);
  --plate-filter: saturate(1.02);
  --plate-glow: linear-gradient(to top, rgba(224,58,34,.06), transparent 40%);
  --plate-glow-blend: multiply;

  --seal-display: flex; --seal-bg: var(--accent); --seal-fg: #FCF6EA;
  --seal-shadow: 0 4px 10px rgba(60,26,12,.3);

  --orn-hinomaru: block; --hinomaru-opacity: .92; --hinomaru-blend: multiply;
  --orn-diagonal: none;
  --orn-tategaki: block;

  --player-bg: rgba(247,241,227,.94); --player-line: rgba(28,24,19,.17);
  --player-radius: 3px; --player-shadow: 0 4px 0 #7C3C27, 0 16px 26px -14px rgba(60,26,12,.4);
  --disc-bg: #5E2A1B; --viz-fill: var(--accent);

  --panel-gap: 34px;
  --panel-pad: 30px; --panel-border: 1px solid rgba(28,24,19,.13);
  --panel-radius: 2px; --panel-shadow: 0 14px 26px -18px rgba(60,26,12,.5);
  --sw-radius: 2px;

  --phone-border: 1px solid rgba(28,24,19,.28);
  --phone-shadow: 0 3px 0 #5E2A1B, 0 24px 40px -20px rgba(60,26,12,.5);
  --app-bg: #F7F0E1; --app-ink: #1C1813; --app-ink-soft: #918471;
  --app-card: #FDF9EE; --app-card-border: 1px solid rgba(28,24,19,.12);
  --app-card-shadow: 0 2px 4px rgba(60,26,12,.14); --app-line: rgba(28,24,19,.14);
  --app-accent: var(--accent);
  --app-radius: 2px; --app-check-radius: 1px; --app-dot-radius: 50%; --app-fab-radius: 3px;
  --app-bubble-bg: #FCF7EA; --app-bubble-fg: #1C1813; --app-bubble-radius: 2px;
  --app-room-filter: saturate(1.02);
  --pri-hi: #E03A22; --pri-mid: #C0872A; --pri-lo: #7A6B58;

  --note-bg: #E03A22; --note-fg: #FCF6EA; --note-ring: rgba(224,58,34,.4);
}
[data-theme="washi"] .orn--hinomaru { left: 47%; top: 6%; width: min(29vw, 350px); }

/* sheets rest on a rosewood batten */
[data-theme="washi"] .panel::after,
[data-theme="washi"] .player::after {
  content: ""; position: absolute; z-index: -1;
  left: -7px; right: -7px; bottom: -10px; height: 14px;
  border-radius: 1px 1px 2px 2px;
  background: var(--wood-grad);
  box-shadow: 0 4px 8px rgba(60,26,12,.3);
}
[data-theme="washi"] .panel, [data-theme="washi"] .player { isolation: isolate; }

/* origami, not deckle: corners stay crisp and each sheet is turned once */
[data-theme="washi"] .panel::before {
  content: ""; position: absolute; top: 0; right: 0; width: 30px; height: 30px;
  background: linear-gradient(225deg,
    #E4D7BC 0 43%, #D3C3A2 43% 45%, rgba(28,24,19,.3) 45% 46.6%, transparent 46.6%);
  filter: drop-shadow(-1px 1px 1.5px rgba(28,24,19,.16));
}
[data-theme="washi"] .ui-card,
[data-theme="washi"] .ui-idea,
[data-theme="washi"] .ui-folder { position: relative; overflow: hidden; }
[data-theme="washi"] .ui-card::after,
[data-theme="washi"] .ui-idea::after,
[data-theme="washi"] .ui-folder::after {
  content: ""; position: absolute; top: 0; right: 0; width: 13px; height: 13px;
  background: linear-gradient(225deg,
    #E7DCC4 0 40%, #D6C6A5 40% 43%, rgba(28,24,19,.3) 43% 46%, transparent 46%);
}
[data-theme="washi"] .ui-card--empty::after { display: none; }

/* ── the wooden trays ─────────────────────────────────────── */
[data-theme="washi"] .ui-shelf {
  padding: 9px 9px 11px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: var(--wood-grad);
  box-shadow:
    inset 0 1px 0 rgba(255,206,178,.3),
    inset 0 -4px 7px rgba(46,14,6,.34),
    0 2px 0 #4E2216;
}
[data-theme="washi"] .ui-shelf::after {
  content: ""; position: absolute;
  left: -3px; right: -3px; bottom: -6px; height: 7px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(#5E2A1B, #451B10);
  box-shadow: 0 4px 7px rgba(60,26,12,.34);
}
[data-theme="washi"] .ui-shelf > *:last-child { margin-bottom: 0; }
[data-theme="washi"] .ui-card,
[data-theme="washi"] .ui-idea,
[data-theme="washi"] .ui-folder { box-shadow: 0 2px 3px rgba(48,18,6,.32); }
[data-theme="washi"] .ui-card--empty {
  border-color: rgba(255,232,212,.4); color: rgba(255,240,226,.78);
  background: rgba(70,26,12,.2); box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   06 — カセット KASETTO · Tape Deck
   Hardware, not stationery. A late-80s Japanese deck: bone plastic,
   brushed panels, transport keys you want to press, a VU meter that
   moves, hazard tape where a hairline would be. Deliberately not
   sterile — scanlines, grain, bevels, screws.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="kasetto"] {
  --paper: #E7E0D0;
  --paper-2: #D5CBB5;
  --panel: #EFE9DA;
  --ink: #1E1B17;
  --ink-soft: #4E473D;
  --ink-faint: #8A8172;
  --accent: #E2452B;          /* transport red */
  --accent-on: #FFF6E9;
  --accent-2: #5C6F93;        /* cold metal */
  --hazard: #E9B32C;
  --line: rgba(30,27,23,.28);
  --accent-line: rgba(226,69,43,.5);
  --rule: 2px solid rgba(30,27,23,.32);

  --chassis: linear-gradient(176deg, #2B2721, #1B1814 60%, #23201B);
  --brushed:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #F4EEE0, #DED5C1);
  --hazard-tape: repeating-linear-gradient(45deg, var(--hazard) 0 11px, #1E1B17 11px 22px);

  /* CRT scanlines + tape grain, so no surface is ever flat */
  --paper-texture:
    repeating-linear-gradient(180deg, rgba(30,27,23,.055) 0 1px, transparent 1px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' seed='19'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.18 0 0 0 0 0.15 0 0 0 0 0.11 0 0 0 -0.86 0.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --panel-texture: repeating-linear-gradient(180deg, rgba(30,27,23,.035) 0 1px, transparent 1px 3px);
  --card-texture: var(--panel-texture);
  --app-surface-texture: var(--panel-texture);

  --grain-opacity: .1;
  --grain-blend: multiply;

  --font-display: "Anton", Impact, sans-serif;
  --font-text: "Archivo", system-ui, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, monospace;
  --font-jp: "Dela Gothic One", sans-serif;
  --wm-weight: 400; --wm-track: .05em;
  --h1-weight: 400; --h1-track: -.005em; --h1-style: normal;
  --h2-weight: 400; --h2-track: .005em;
  --sub-style: normal; --sub-track: .02em;

  --rail-bg: #23201B; --rail-line: rgba(255,246,233,.22);
  --rail-radius: 6px; --rail-hover: rgba(255,246,233,.12);
  --rail-shadow: 0 6px 0 #100E0C, 0 18px 34px rgba(0,0,0,.45);

  --btn-bg: #E2452B; --btn-fg: #FFF6E9; --btn-line: #1E1B17;
  --btn-radius: 4px;
  --btn-shadow: 0 5px 0 #8E230F, 0 6px 0 #1E1B17, 0 12px 16px rgba(0,0,0,.3);

  --plate-radius: 10px;
  --plate-border: 13px solid #26221D;
  --plate-shadow:
    0 0 0 2px #100E0C, 0 6px 0 #100E0C, 0 26px 40px -14px rgba(0,0,0,.55);
  --plate-filter: saturate(1.18) contrast(1.1);
  --plate-glow:
    repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 8%, rgba(233,179,44,.18), transparent 55%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.45));
  --plate-glow-blend: normal;

  --seal-display: flex; --seal-bg: var(--hazard); --seal-fg: #1E1B17;
  --seal-shadow: 0 4px 0 #A8791A, 0 5px 0 #1E1B17;

  --orn-hinomaru: block; --hinomaru-opacity: 1; --hinomaru-blend: normal;
  --orn-diagonal: none;
  --orn-tategaki: block;

  --player-bg: #23201B; --player-line: rgba(255,246,233,.2);
  --player-radius: 8px;
  --player-btn-radius: 4px;
  --player-shadow: 0 7px 0 #100E0C, 0 20px 30px -12px rgba(0,0,0,.5);
  --disc-bg: #14120F; --viz-fill: var(--hazard);

  --panel-pad: 28px; --panel-border: 2px solid #1E1B17;
  --panel-radius: 6px;
  --panel-shadow: 0 5px 0 #1E1B17, 0 14px 22px -12px rgba(0,0,0,.4);
  --sw-radius: 3px;

  --phone-border: 4px solid #1E1B17;
  --phone-shadow: 0 7px 0 #1E1B17, 0 22px 34px -16px rgba(0,0,0,.45);
  --app-bg: #E7E0D0; --app-ink: #1E1B17; --app-ink-soft: #8A8172;
  --app-card: #F3EDDE; --app-card-border: 2px solid #1E1B17;
  --app-card-shadow: 0 3px 0 #1E1B17; --app-line: rgba(30,27,23,.28);
  --app-accent: #E2452B;
  --app-radius: 4px; --app-check-radius: 2px; --app-dot-radius: 0; --app-fab-radius: 4px;
  --app-bubble-bg: #1E1B17; --app-bubble-fg: #E7E0D0; --app-bubble-radius: 4px;
  --app-room-filter: saturate(1.2) contrast(1.08);
  --pri-hi: #E2452B; --pri-mid: #E9B32C; --pri-lo: #5C6F93;

  --note-bg: var(--hazard); --note-fg: #1E1B17; --note-ring: rgba(233,179,44,.45);
}

/* the sun becomes a level knob */
[data-theme="kasetto"] .orn--hinomaru {
  left: 49%; top: 5%; width: min(26vw, 300px);
  /* a tape reel: bone hub, spokes, wound tape on the flange */
  background:
    radial-gradient(circle at 50% 50%,
      #E7E0D0 0 12%, #2B2721 12% 15%,
      transparent 15% 57%,
      #464036 57% 62%, #322D26 62% 92%, #4A443A 92%),
    repeating-conic-gradient(from 0deg, #2B2721 0 9deg, transparent 9deg 30deg);
  box-shadow: 0 8px 0 #100E0C, 0 22px 30px rgba(0,0,0,.4);
}

/* ── panels become equipment: bevel + four screws ─────────── */
[data-theme="kasetto"] .panel { background-color: #EFE9DA; }
[data-theme="kasetto"] .panel::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(30,27,23,.16);
  background:
    radial-gradient(circle 3.5px at 7px 7px, rgba(30,27,23,.55) 45%, transparent 47%),
    radial-gradient(circle 3.5px at calc(100% - 7px) 7px, rgba(30,27,23,.55) 45%, transparent 47%),
    radial-gradient(circle 3.5px at 7px calc(100% - 7px), rgba(30,27,23,.55) 45%, transparent 47%),
    radial-gradient(circle 3.5px at calc(100% - 7px) calc(100% - 7px), rgba(30,27,23,.55) 45%, transparent 47%);
}
[data-theme="kasetto"] .panel__label {
  background: #1E1B17; color: var(--hazard);
  display: inline-flex; padding: 4px 9px; border-radius: 2px;
  letter-spacing: .18em;
}

/* ── the deck ─────────────────────────────────────────────── */
[data-theme="kasetto"] .player { background: var(--chassis); }
[data-theme="kasetto"] .player__label { color: var(--hazard); letter-spacing: .2em; }
[data-theme="kasetto"] .player__note,
[data-theme="kasetto"] .player__time { color: rgba(231,224,208,.55); }
[data-theme="kasetto"] .player__title { color: #F3EDDE; }
[data-theme="kasetto"] .player__idx,
[data-theme="kasetto"] .player__jp { color: var(--hazard); }
[data-theme="kasetto"] .player__time {
  background: #100E0C; color: var(--hazard);
  padding: 3px 5px; border-radius: 2px; width: auto;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.9);
}
/* transport keys */
[data-theme="kasetto"] .player__play {
  background: linear-gradient(#EE5C41, #C9351D);
  box-shadow: 0 4px 0 #7E1D0C, inset 0 1px 0 rgba(255,255,255,.45);
  border: 1px solid #1E1B17;
}
[data-theme="kasetto"] .player__play:active { transform: translateY(3px); box-shadow: 0 1px 0 #7E1D0C; }
[data-theme="kasetto"] .player__side button {
  background: var(--brushed); color: #1E1B17; border: 1px solid #1E1B17;
  box-shadow: 0 3px 0 #6C6353, inset 0 1px 0 rgba(255,255,255,.7);
}
[data-theme="kasetto"] .player__side button:active { transform: translateY(2px); box-shadow: 0 1px 0 #6C6353; }
/* VU meter */
[data-theme="kasetto"] .player__viz {
  background: #100E0C; padding: 3px 4px; border-radius: 2px; height: 21px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.9);
}
[data-theme="kasetto"] .player__viz i { border-radius: 0; }
[data-theme="kasetto"] .player__viz i:nth-child(n+13) { background: #E9B32C; }
[data-theme="kasetto"] .player__viz i:nth-child(n+16) { background: #E2452B; }
/* the reel */
[data-theme="kasetto"] .player__disc {
  background:
    repeating-conic-gradient(from 0deg, #4A443A 0 3deg, #14120F 3deg 15deg),
    radial-gradient(circle, #14120F 0 32%, #6E6558 33%);
  box-shadow: inset 0 0 0 2px #0A0908, 0 0 0 2px rgba(231,224,208,.18);
}
[data-theme="kasetto"] .player__disc::after {
  inset: 38%; background: #E7E0D0; box-shadow: 0 0 0 2px #14120F;
}

/* ── app: cards become labelled cartridges on a rack ──────── */
[data-theme="kasetto"] .ui-shelf {
  padding: 8px 8px 10px; margin-bottom: 13px; border-radius: 4px;
  background: var(--chassis);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 #100E0C;
}
[data-theme="kasetto"] .ui-shelf::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -5px; height: 4px;
  background: var(--hazard-tape); border-radius: 0 0 2px 2px; opacity: .85;
}
[data-theme="kasetto"] .ui-shelf > *:last-child { margin-bottom: 0; }
[data-theme="kasetto"] .ui-card--empty {
  border: 1px dashed rgba(231,224,208,.4); color: rgba(231,224,208,.65);
  background: transparent;
}
[data-theme="kasetto"] .ui-label {
  background: #1E1B17; color: var(--hazard); padding: 2px 6px; border-radius: 2px;
}
[data-theme="kasetto"] .ui-fab { box-shadow: 0 3px 0 #8E230F; }
[data-theme="kasetto"] .phone__bubble { box-shadow: 0 3px 0 rgba(0,0,0,.35); }
[data-theme="kasetto"] .phone__head { border-bottom: 3px solid #1E1B17; }

/* ── the switcher rail is part of the same machine ────────── */
[data-theme="kasetto"] .switcher__lead,
[data-theme="kasetto"] .chip { color: rgba(231,224,208,.72); }
[data-theme="kasetto"] .chip:hover { color: #FFF6E9; }
[data-theme="kasetto"] .chip--ghost[aria-pressed="true"] { background: var(--hazard); color: #1E1B17; }