@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Noto+Serif+JP:wght@100..900&family=Poppins:wght@300;400;500;600;700&display=swap");
/* ============================================================
   Coral Design System — Core tokens
   SOURCE OF TRUTH: github.com/SakanaAIBusiness/coral (codebase)
   Mirrors the two-layer token architecture from
   src/styles/tokens/{primitive,semantic} + tailwind-theme.
     1. Primitives — raw palette, spacing, radius, type
     2. Semantic   — --general-* / --sidebar-* / --chart-* aliasing
                     primitives, with PD-Light (:root) + PD-Dark (.dark)
   Back-compat aliases (--fg, --bg, --rounded-*, --space-*, --gray-*,
   --foreground, --primary, …) are kept so existing previews keep working.
   ============================================================ */

/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
:root {
  /* ============================================================
     1 · PRIMITIVES — full Tailwind palette (codebase color.css)
     Canonical names are --color-<ramp>-<step>; short --<ramp>-<step>
     aliases are kept for existing preview files.
     ============================================================ */
  --color-red-50:#fef2f2;  --color-red-100:#fee2e2; --color-red-200:#fecaca; --color-red-300:#fca5a5; --color-red-400:#f87171;
  --color-red-500:#ef4444; --color-red-600:#dc2626; --color-red-700:#b91c1c; --color-red-800:#991b1b; --color-red-900:#7f1d1d; --color-red-950:#450a0a;
  --color-green-50:#f0fdf4;  --color-green-100:#dcfce7; --color-green-200:#bbf7d0; --color-green-300:#86efac; --color-green-400:#4ade80;
  --color-green-500:#22c55e; --color-green-600:#16a34a; --color-green-700:#15803d; --color-green-800:#166534; --color-green-900:#002203; --color-green-950:#052e16;
  --color-amber-50:#fffbeb;  --color-amber-100:#fef3c7; --color-amber-200:#fde68a; --color-amber-300:#fcd34d; --color-amber-400:#fbbf24;
  --color-amber-500:#f59e0b; --color-amber-600:#d97706; --color-amber-700:#b45309; --color-amber-800:#92400e; --color-amber-900:#78350f; --color-amber-950:#451a03;
  --color-blue-50:#eff6ff;  --color-blue-100:#dbeafe; --color-blue-200:#bfdbfe; --color-blue-300:#93c5fd; --color-blue-400:#60a5fa;
  --color-blue-500:#3b82f6; --color-blue-600:#2563eb; --color-blue-700:#1d4ed8; --color-blue-800:#1e40af; --color-blue-900:#1e3a8a; --color-blue-950:#172554;
  --color-orange-50:#fff7ed;  --color-orange-100:#ffedd5; --color-orange-200:#fed7aa; --color-orange-300:#fdba74; --color-orange-400:#fb923c;
  --color-orange-500:#f97316; --color-orange-600:#ea580c; --color-orange-700:#c2410c; --color-orange-800:#9a3412; --color-orange-900:#7c2d12; --color-orange-950:#431407;
  --color-yellow-50:#fefce8;  --color-yellow-100:#fef9c3; --color-yellow-200:#fef08a; --color-yellow-300:#fde047; --color-yellow-400:#facc15;
  --color-yellow-500:#eab308; --color-yellow-600:#ca8a04; --color-yellow-700:#a16207; --color-yellow-800:#854d0e; --color-yellow-900:#713f12; --color-yellow-950:#422006;
  --color-teal-50:#f0fdfa;  --color-teal-100:#ccfbf1; --color-teal-200:#99f6e4; --color-teal-300:#5eead4; --color-teal-400:#2dd4bf;
  --color-teal-500:#14b8a6; --color-teal-600:#0d9488; --color-teal-700:#0f766e; --color-teal-800:#115e59; --color-teal-900:#134e4a; --color-teal-950:#042f2e;
  --color-cyan-50:#ecfeff;  --color-cyan-100:#cffafe; --color-cyan-200:#a5f3fc; --color-cyan-300:#67e8f9; --color-cyan-400:#22d3ee;
  --color-cyan-500:#06b6d4; --color-cyan-600:#0891b2; --color-cyan-700:#0e7490; --color-cyan-800:#155e75; --color-cyan-900:#164e63; --color-cyan-950:#083344;
  --color-sky-50:#f0f9ff;  --color-sky-100:#e0f2fe; --color-sky-200:#bae6fd; --color-sky-300:#7dd3fc; --color-sky-400:#38bdf8;
  --color-sky-500:#0ea5e9; --color-sky-600:#0284c7; --color-sky-700:#0369a1; --color-sky-800:#075985; --color-sky-900:#0c4a6e; --color-sky-950:#082f49;
  --color-indigo-50:#eef2ff;  --color-indigo-100:#e0e7ff; --color-indigo-200:#c7d2fe; --color-indigo-300:#a5b4fc; --color-indigo-400:#818cf8;
  --color-indigo-500:#6366f1; --color-indigo-600:#4f46e5; --color-indigo-700:#4338ca; --color-indigo-800:#3730a3; --color-indigo-900:#312e81; --color-indigo-950:#1e1b4b;
  --color-violet-50:#f5f3ff;  --color-violet-100:#ede9fe; --color-violet-200:#ddd6fe; --color-violet-300:#c4b5fd; --color-violet-400:#a78bfa;
  --color-violet-500:#8b5cf6; --color-violet-600:#7c3aed; --color-violet-700:#6d28d9; --color-violet-800:#5b21b6; --color-violet-900:#4c1d95; --color-violet-950:#2e1065;
  --color-purple-50:#faf5ff;  --color-purple-100:#f3e8ff; --color-purple-200:#e9d5ff; --color-purple-300:#d8b4fe; --color-purple-400:#c084fc;
  --color-purple-500:#a855f7; --color-purple-600:#9333ea; --color-purple-700:#7e22ce; --color-purple-800:#6b21a8; --color-purple-900:#581c87; --color-purple-950:#3b0764;
  --color-pink-50:#fdf2f8;  --color-pink-100:#fce7f3; --color-pink-200:#fbcfe8; --color-pink-300:#f9a8d4; --color-pink-400:#f472b6;
  --color-pink-500:#ec4899; --color-pink-600:#db2777; --color-pink-700:#be185d; --color-pink-800:#9d174d; --color-pink-900:#831843; --color-pink-950:#500724;
  --color-rose-50:#fff1f2;  --color-rose-100:#ffe4e6; --color-rose-200:#fecdd3; --color-rose-300:#fda4af; --color-rose-400:#fb7185;
  --color-rose-500:#f43f5e; --color-rose-600:#e11d48; --color-rose-700:#be123c; --color-rose-800:#9f1239; --color-rose-900:#881337; --color-rose-950:#4c0519;
  --color-lime-50:#f7fee7;  --color-lime-100:#ecfccb; --color-lime-200:#d9f99d; --color-lime-300:#bef264; --color-lime-400:#a3e635;
  --color-lime-500:#84cc16; --color-lime-600:#65a30d; --color-lime-700:#4d7c0f; --color-lime-800:#3f6212; --color-lime-900:#365314; --color-lime-950:#1a2e05;
  --color-slate-50:#f8fafc;  --color-slate-100:#f1f5f9; --color-slate-200:#e2e8f0; --color-slate-300:#cbd5e1; --color-slate-400:#94a3b8;
  --color-slate-500:#64748b; --color-slate-600:#475569; --color-slate-700:#334155; --color-slate-800:#1e293b; --color-slate-900:#0f172a; --color-slate-950:#020617;
  --color-zinc-50:#fafafa;  --color-zinc-100:#f4f4f5; --color-zinc-200:#e4e4e7; --color-zinc-300:#d4d4d8; --color-zinc-400:#a1a1aa;
  --color-zinc-500:#71717a; --color-zinc-600:#52525b; --color-zinc-700:#3f3f46; --color-zinc-800:#27272a; --color-zinc-900:#18181b; --color-zinc-950:#09090b;
  --color-neutral-50:#fafafa;  --color-neutral-100:#f5f5f5; --color-neutral-200:#e5e5e5; --color-neutral-300:#d4d4d4; --color-neutral-400:#a3a3a3;
  --color-neutral-500:#737373; --color-neutral-600:#525252; --color-neutral-700:#404040; --color-neutral-800:#262626; --color-neutral-900:#171717; --color-neutral-950:#0a0a0a;
  --color-stone-50:#fafaf9;  --color-stone-100:#f5f5f4; --color-stone-200:#e7e5e4; --color-stone-300:#d6d3d1; --color-stone-400:#a8a29e;
  --color-stone-500:#78716c; --color-stone-600:#57534e; --color-stone-700:#44403c; --color-stone-800:#292524; --color-stone-900:#1c1917; --color-stone-950:#0c0a09;
  --color-emerald-50:#ecfdf5;  --color-emerald-100:#d1fae5; --color-emerald-200:#a7f3d0; --color-emerald-300:#6ee7b7; --color-emerald-400:#34d399;
  --color-emerald-500:#10b981; --color-emerald-600:#059669; --color-emerald-700:#047857; --color-emerald-800:#065f46; --color-emerald-900:#064e3b; --color-emerald-950:#022c22;
  --color-fuchsia-50:#fdf4ff;  --color-fuchsia-100:#fae8ff; --color-fuchsia-200:#f5d0fe; --color-fuchsia-300:#f0abfc; --color-fuchsia-400:#e879f9;
  --color-fuchsia-500:#d946ef; --color-fuchsia-600:#c026d3; --color-fuchsia-700:#a21caf; --color-fuchsia-800:#86198f; --color-fuchsia-900:#701a75; --color-fuchsia-950:#4a044e;
  /* gray = primary neutral */
  --color-gray-50:#f9fafb; --color-gray-100:#f3f4f6; --color-gray-200:#e5e7eb; --color-gray-300:#d1d5db; --color-gray-400:#9ca3af;
  --color-gray-500:#6b7280; --color-gray-600:#4b5563; --color-gray-700:#374151; --color-gray-800:#1f2937; --color-gray-900:#111827; --color-gray-950:#030712;
  /* brand ramp = gray ramp (codebase) */
  --color-brand-50:#f9fafb; --color-brand-100:#f3f4f6; --color-brand-200:#e5e7eb; --color-brand-300:#d1d5db; --color-brand-400:#9ca3af;
  --color-brand-500:#6b7280; --color-brand-600:#4b5563; --color-brand-700:#374151; --color-brand-800:#1f2937; --color-brand-900:#111827; --color-brand-950:#030712;
  --color-neutral-color-black:#000000;
  --color-neutral-color-white:#ffffff;

  /* short aliases (legacy preview usage) */
  --gray-50:var(--color-gray-50); --gray-100:var(--color-gray-100); --gray-200:var(--color-gray-200); --gray-300:var(--color-gray-300); --gray-400:var(--color-gray-400);
  --gray-500:var(--color-gray-500); --gray-600:var(--color-gray-600); --gray-700:var(--color-gray-700); --gray-800:var(--color-gray-800); --gray-900:var(--color-gray-900); --gray-950:var(--color-gray-950);
  --white:var(--color-neutral-color-white); --black:var(--color-neutral-color-black);
  --red-50:var(--color-red-50); --red-200:var(--color-red-200); --red-300:var(--color-red-300); --red-400:var(--color-red-400);
  --red-600:var(--color-red-600); --red-700:var(--color-red-700); --red-950:var(--color-red-950);
  --green-50:var(--color-green-50); --green-200:var(--color-green-200); --green-400:var(--color-green-400);
  --green-600:var(--color-green-600); --green-700:var(--color-green-700); --green-950:var(--color-green-950);
  --amber-50:var(--color-amber-50); --amber-200:var(--color-amber-200); --amber-500:var(--color-amber-500);
  --amber-600:var(--color-amber-600); --amber-700:var(--color-amber-700); --amber-950:var(--color-amber-950);
  --blue-50:var(--color-blue-50); --blue-200:var(--color-blue-200); --blue-300:var(--color-blue-300);
  --blue-400:var(--color-blue-400); --blue-500:var(--color-blue-500); --blue-600:var(--color-blue-600);
  --blue-700:var(--color-blue-700); --blue-950:var(--color-blue-950);

  /* Spec / annotation accent — Figma variable-overlay purple (not a brand color) */
  --accent-purple:#9747ff;
  --accent-purple-weak:#f3edff;

  /* ============================================================
     2 · PRIMITIVES — spacing (codebase spacing.css, full scale)
     ============================================================ */
  --spacing-0:0;     --spacing-0_5:2px; --spacing-1:4px;  --spacing-1_5:6px; --spacing-2:8px;
  --spacing-2_5:10px;--spacing-3:12px;  --spacing-3_5:14px;--spacing-4:16px; --spacing-5:20px;
  --spacing-6:24px;  --spacing-7:28px;  --spacing-8:32px; --spacing-9:36px;  --spacing-10:40px;
  --spacing-11:44px; --spacing-12:48px; --spacing-14:56px;--spacing-16:64px; --spacing-20:80px;
  --spacing-24:96px; --spacing-28:112px;--spacing-32:128px;--spacing-36:144px;--spacing-40:160px;
  --spacing-44:176px;--spacing-48:192px;--spacing-52:208px;--spacing-56:224px;--spacing-60:240px;
  --spacing-64:256px;--spacing-72:288px;--spacing-80:320px;--spacing-96:384px;
  /* legacy --space-* aliases */
  --space-0:0; --space-0_5:2px; --space-1:4px; --space-1_5:6px; --space-2:8px; --space-2_5:10px;
  --space-3:12px; --space-3_5:14px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:28px;
  --space-8:32px; --space-9:36px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* ============================================================
     3 · PRIMITIVES — radius (codebase radius.css)
     ============================================================ */
  --radius-0:0; --radius-2:2px; --radius-4:4px; --radius-6:6px; --radius-8:8px;
  --radius-12:12px; --radius-16:16px; --radius-24:24px; --radius-999:999px;
  /* legacy --rounded-* aliases (semantic theme-size names) */
  --rounded-sm:var(--radius-4);  --rounded-md:var(--radius-6);  --rounded-lg:var(--radius-8);
  --rounded-xl:var(--radius-12); --rounded-2xl:var(--radius-16); --rounded-3xl:var(--radius-24);
  --rounded-full:var(--radius-999);
  --radius-xs:var(--radius-4); --radius-sm:var(--radius-4); --radius:var(--radius-8);
  --radius-lg:var(--radius-12); --radius-full:var(--radius-999);

  /* ============================================================
     4 · PRIMITIVES — type (codebase type.css)
     NOTE: base = 16px (was 14). xs=12, sm=14. Tailwind scale.
     ============================================================ */
  --weight-thin:100; --weight-extralight:200; --weight-light:300; --weight-normal:400; --weight-medium:500;
  --weight-semibold:600; --weight-bold:700; --weight-extrabold:800; --weight-black:900;
  --text-2xs:11px; --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px;
  --text-xl:20px;  --text-2xl:24px; --text-2_5xl:28px; --text-3xl:30px; --text-4xl:36px;
  --text-5xl:48px; --text-6xl:60px; --text-7xl:72px; --text-8xl:96px; --text-9xl:128px;
  --text-md:16px; /* legacy alias → base */

  /* ============================================================
     5 · SEMANTIC — General colors (PD-Light = :root). Codebase
     uses a --general-* layer; flat + legacy aliases kept.
     ============================================================ */
  --general-background:            var(--color-neutral-color-white);
  --general-background-subtle:     var(--color-gray-50);
  --general-foreground:            var(--color-gray-950);
  --general-card:                  var(--color-neutral-color-white);
  --general-card-foreground:       var(--color-gray-950);
  --general-primary:               var(--color-gray-900);
  --general-primary-foreground:    var(--color-neutral-color-white);
  --general-secondary:             var(--color-gray-100);
  --general-secondary-foreground:  var(--color-gray-900);
  --general-accent:                var(--color-gray-100);
  --general-accent-foreground:     var(--color-gray-900);
  --general-muted:                 var(--color-gray-100);
  --general-muted-foreground:      var(--color-gray-500);
  --general-border:                var(--color-gray-200);
  --general-input:                 var(--color-gray-200);
  --general-popover:               var(--color-neutral-color-white);
  --general-popover-foreground:    var(--color-gray-950);
  --general-ring:                  var(--color-gray-300);
  --general-ring-error:            var(--color-red-300);
  --general-destructive:                   var(--color-red-400);
  --general-destructive-foreground:        var(--color-neutral-color-white);
  --general-destructive-subtle:            var(--color-red-50);
  --general-destructive-subtle-foreground: var(--color-red-600);
  --general-destructive-strong:            var(--color-red-600);
  --general-destructive-strong-foreground: var(--color-neutral-color-white);
  --general-warning:                   var(--color-amber-500);
  --general-warning-foreground:        var(--color-neutral-color-white);
  --general-warning-subtle:            var(--color-amber-50);
  --general-warning-subtle-foreground: var(--color-amber-600);
  --general-warning-strong:            var(--color-amber-600);
  --general-warning-strong-foreground: var(--color-neutral-color-white);
  --general-success:                   var(--color-green-400);
  --general-success-foreground:        var(--color-neutral-color-white);
  --general-success-subtle:            var(--color-green-50);
  --general-success-subtle-foreground: var(--color-green-600);
  --general-success-strong:            var(--color-green-600);
  --general-success-strong-foreground: var(--color-neutral-color-white);
  --general-info:                   var(--color-blue-400);
  --general-info-foreground:        var(--color-neutral-color-white);
  --general-info-subtle:            var(--color-blue-50);
  --general-info-subtle-foreground: var(--color-blue-600);
  --general-info-strong:            var(--color-blue-600);   /* codebase: blue-600 #2563eb */
  --general-info-strong-foreground: var(--color-neutral-color-white);
  --sidebar:                       var(--color-neutral-color-white);
  --sidebar-foreground:            var(--color-gray-950);
  --sidebar-primary:               var(--color-gray-900);
  --sidebar-primary-foreground:    var(--color-neutral-color-white);
  --sidebar-accent:                var(--color-gray-100);
  --sidebar-accent-foreground:     var(--color-gray-900);
  --sidebar-border:                var(--color-gray-200);
  --sidebar-ring:                  var(--color-gray-500);
  --chart-1:var(--color-blue-300); --chart-2:var(--color-blue-400); --chart-3:var(--color-blue-500);
  --chart-4:var(--color-blue-600); --chart-5:var(--color-blue-700);

  /* Flat semantic names (= --general-*) used across previews/UI kit */
  --background:var(--general-background);
  --background-subtle:var(--general-background-subtle);
  --foreground:var(--general-foreground);
  --card:var(--general-card); --card-foreground:var(--general-card-foreground);
  --primary:var(--general-primary); --primary-foreground:var(--general-primary-foreground);
  --secondary:var(--general-secondary); --secondary-foreground:var(--general-secondary-foreground);
  --accent:var(--general-accent); --accent-foreground:var(--general-accent-foreground);
  --muted:var(--general-muted); --muted-foreground:var(--general-muted-foreground);
  --border-color:var(--general-border); --input:var(--general-input);
  --popover:var(--general-popover); --popover-foreground:var(--general-popover-foreground);
  --ring:var(--general-ring); --ring-error:var(--general-ring-error);
  --destructive:var(--general-destructive); --destructive-foreground:var(--general-destructive-foreground);
  --destructive-subtle:var(--general-destructive-subtle); --destructive-subtle-foreground:var(--general-destructive-subtle-foreground);
  --destructive-strong:var(--general-destructive-strong); --destructive-strong-foreground:var(--general-destructive-strong-foreground);
  --warning:var(--general-warning); --warning-foreground:var(--general-warning-foreground);
  --warning-subtle:var(--general-warning-subtle); --warning-subtle-foreground:var(--general-warning-subtle-foreground);
  --warning-strong:var(--general-warning-strong); --warning-strong-foreground:var(--general-warning-strong-foreground);
  --success:var(--general-success); --success-foreground:var(--general-success-foreground);
  --success-subtle:var(--general-success-subtle); --success-subtle-foreground:var(--general-success-subtle-foreground);
  --success-strong:var(--general-success-strong); --success-strong-foreground:var(--general-success-strong-foreground);
  --info:var(--general-info); --info-foreground:var(--general-info-foreground);
  --info-subtle:var(--general-info-subtle); --info-subtle-foreground:var(--general-info-subtle-foreground);
  --info-strong:var(--general-info-strong); --info-strong-foreground:var(--general-info-strong-foreground);

  /* Legacy short aliases */
  --bg:var(--background); --bg-subtle:var(--background-subtle); --bg-muted:var(--color-gray-100); --bg-inverse:var(--color-gray-900);
  --fg:var(--foreground); --fg-muted:var(--muted-foreground); --fg-subtle:var(--color-gray-400); --fg-inverse:var(--color-neutral-color-white);
  --fg-brand:var(--accent-purple);
  --border:var(--border-color); --border-strong:var(--color-gray-300); --border-muted:var(--color-gray-100);
  --destructive-weak:var(--destructive-subtle); --destructive-border:var(--ring-error);
  --success-weak:var(--success-subtle); --warning-weak:var(--warning-subtle); --info-weak:var(--info-subtle);

  /* Data-vis extended (project-local, kept for charts) */
  --data-cyan:#7cd0e1; --data-lime:#dfe17c; --data-apricot:#e1ab7c; --data-violet:#a356a9;
  --data-red-soft:#f87171; --data-green-soft:#4ade80;

  /* ============================================================
     6 · SEMANTIC — shadow (codebase shadow.css; xl == lg)
     ============================================================ */
  --shadow-none:none;
  --shadow-2xs:0px 1px 0px 0px rgb(0 0 0 / 0.05);
  --shadow-xs: 0px 1px 2px 0px rgb(0 0 0 / 0.05);
  --shadow-sm: 0px 1px 3px 0px rgb(0 0 0 / 0.1), 0px 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow:    0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-md: 0px 10px 15px -3px rgb(0 0 0 / 0.1), 0px 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-lg: 0px 20px 25px -5px rgb(0 0 0 / 0.1), 0px 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-xl: 0px 20px 25px -5px rgb(0 0 0 / 0.1), 0px 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl:0px 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner:inset 0px 2px 4px 0px rgb(0 0 0 / 0.05);

  /* ============================================================
     7 · SEMANTIC — layout (codebase layout.css)
     Breakpoints + container max-widths. Container scale matches
     codebase (xs 320 … 7xl 1280). Project layout helpers below
     keep the --container-margin/gutter used by the UI kit.
     ============================================================ */
  --breakpoint-sm:640px; --breakpoint-md:768px; --breakpoint-lg:1024px;
  --breakpoint-xl:1280px; --breakpoint-2xl:1536px;
  --container-xs:320px; --container-sm:384px; --container-md:448px; --container-lg:512px;
  --container-xl:576px; --container-2xl:672px; --container-3xl:768px; --container-4xl:896px;
  --container-5xl:1024px; --container-6xl:1152px; --container-7xl:1280px;
  /* project page-shell helpers (not in codebase token set) */
  --container-max:1280px;
  --container-margin:24px; --container-gutter:24px;
  --container-columns:12; /* @kind other */

  /* ============================================================
     8 · Type families (codebase: JP default → Noto Sans JP)
     ============================================================ */
  --font-sans:"Noto Sans JP","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Noto Serif JP","Noto Serif",serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* UI-EN utility stack (numerics / labels) */
  --font-ui-en:"Inter","Noto Sans JP",system-ui,sans-serif;

  /* generic line-height / tracking helpers (back-compat) */
  --leading-tight:1.25; --leading-snug:1.375; --leading-normal:1.5; --leading-body:1.75;
  --tracking-tight:-0.025em; --tracking-normal:0; --tracking-wide:0.03em;

  /* ------------------------------------------------------------
     Per-role line-height & letter-spacing — JP mode (= :root).
     Mirrors codebase semantic/Type/JP. EN overrides in :lang(en).
     Role classes below consume these vars so JP/EN swap by mode.
     ------------------------------------------------------------ */
  --lh-display-2xl:60px; --lh-display-xl:44px; --lh-display-lg:40px; --lh-display-md:32px; --lh-display-sm:28px;
  --lh-heading-1:40px; --lh-heading-2:36px; --lh-heading-3:32px; --lh-heading-4:28px; --lh-heading-5:24px; --lh-heading-6:20px;
  --lh-body-xl:36px; --lh-body-lg:32px; --lh-body-md:28px; --lh-body-sm:24px; --lh-body-xs:20px; --lh-body-2xs:18px;
  --lh-body-md-strong:28px; --lh-body-sm-strong:24px;
  --lh-label-xl:18px; --lh-label-lg:16px; --lh-label-md:14px; --lh-label-sm:12px; --lh-label-xs:11px;
  --lh-input-lg:18px; --lh-input-md:16px; --lh-input-sm:14px;
  --lh-caption-md:20px; --lh-caption-sm:18px; --lh-overline:18px; --lh-code-md:24px; --lh-code-sm:20px;

  --ls-display-2xl:-2.4px; --ls-display-xl:-0.9px; --ls-display-lg:-0.75px; --ls-display-md:-0.6px; --ls-display-sm:-0.5px;
  --ls-heading-1:-0.7px; --ls-heading-2:-0.6px;
  --ls-heading-3:0; /* @kind other */
  --ls-heading-4:0; /* @kind other */
  --ls-heading-5:0; /* @kind other */
  --ls-heading-6:0; /* @kind other */
  --ls-body:0; /* @kind other */
  --ls-label-sm:0.3px; --ls-label-xs:0.55px; --ls-overline:1.2px;
  --ls-code:0; /* @kind other */
}

/* ============================================================
   EN mode — apply with [data-lang="en"] (codebase semantic/Type EN).
   Latin copy: Inter, tighter line-heights, heading tracking.
   ============================================================ */
[data-lang="en"], :lang(en) {
  --font-sans:"Inter","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Noto Serif",serif;

  --lh-display-2xl:56px; --lh-display-xl:44px; --lh-display-lg:36px; --lh-display-md:32px; --lh-display-sm:24px;
  --lh-heading-1:36px; --lh-heading-2:32px; --lh-heading-3:28px; --lh-heading-4:24px; --lh-heading-5:24px; --lh-heading-6:20px;
  --lh-body-xl:28px; --lh-body-lg:28px; --lh-body-md:24px; --lh-body-sm:20px; --lh-body-xs:16px; --lh-body-2xs:16px;
  --lh-body-md-strong:24px; --lh-body-sm-strong:20px;
  --lh-label-xl:18px; --lh-label-lg:16px; --lh-label-md:14px; --lh-label-sm:12px; --lh-label-xs:11px;
  --lh-input-lg:18px; --lh-input-md:16px; --lh-input-sm:14px;
  --lh-caption-md:16px; --lh-caption-sm:16px; --lh-overline:16px; --lh-code-md:20px; --lh-code-sm:18px;

  --ls-display-2xl:-1.2px; --ls-display-xl:-0.9px; --ls-display-lg:-0.75px; --ls-display-md:-0.6px; --ls-display-sm:-0.5px;
  --ls-heading-1:-0.7px; --ls-heading-2:-0.6px; --ls-heading-3:-0.5px; --ls-heading-4:-0.45px; --ls-heading-5:-0.4px;
  --ls-heading-6:0; /* @kind other */
  --ls-body:0; /* @kind other */
  --ls-label-sm:0; /* @kind other */
  --ls-label-xs:0.275px; --ls-overline:1.2px;
  --ls-code:0; /* @kind other */
}

/* ============================================================
   Dark mode (PD-Dark = BD-Dark in the codebase export) — apply with
   [data-theme="dark"], .dark, .theme-pd.dark, or .theme-bd.dark.
   Light .theme-pd / .theme-bd cascade from :root (PD-Light = BD-Light).
   ============================================================ */
[data-theme="dark"], .dark, .theme-pd.dark, .theme-bd.dark {
  --general-background:            var(--color-gray-950);
  --general-background-subtle:     var(--color-gray-900);
  --general-foreground:            var(--color-gray-50);
  --general-card:                  var(--color-gray-900);
  --general-card-foreground:       var(--color-gray-50);
  --general-primary:               var(--color-neutral-color-white);
  --general-primary-foreground:    var(--color-gray-900);
  --general-secondary:             var(--color-gray-800);
  --general-secondary-foreground:  var(--color-gray-100);
  --general-accent:                var(--color-gray-700);
  --general-accent-foreground:     var(--color-gray-50);
  --general-muted:                 var(--color-gray-800);
  --general-muted-foreground:      var(--color-gray-400);
  --general-border:                var(--color-gray-700);
  --general-input:                 var(--color-gray-900);
  --general-popover:               var(--color-gray-800);
  --general-popover-foreground:    var(--color-gray-50);
  --general-ring:                  var(--color-gray-700);
  --general-ring-error:            var(--color-red-700);
  --general-destructive-subtle:            var(--color-red-950);
  --general-destructive-subtle-foreground: var(--color-red-200);
  --general-destructive-strong:            var(--color-red-700);
  --general-warning-subtle:            var(--color-amber-950);
  --general-warning-subtle-foreground: var(--color-amber-200);
  --general-warning-strong:            var(--color-amber-700);
  --general-success-subtle:            var(--color-green-950);
  --general-success-subtle-foreground: var(--color-green-200);
  --general-success-strong:            var(--color-green-700);
  --general-info-subtle:            var(--color-blue-950);
  --general-info-subtle-foreground: var(--color-blue-200);
  --general-info-strong:            var(--color-blue-700);
  --sidebar:                       var(--color-gray-950);
  --sidebar-foreground:            var(--color-gray-50);
  --sidebar-primary:               var(--color-neutral-color-white);
  --sidebar-primary-foreground:    var(--color-gray-900);
  --sidebar-accent:                var(--color-gray-700);
  --sidebar-accent-foreground:     var(--color-gray-50);
  --sidebar-border:                var(--color-gray-700);
  --sidebar-ring:                  var(--color-gray-500);
  --fg-subtle:var(--color-gray-500);
  --border-strong:var(--color-gray-600); --border-muted:var(--color-gray-800);
}

/* Responsive container margins/gutters (project page-shell helper) */
@media (max-width:1279.98px){ :root{ --container-margin:20px; --container-gutter:20px; } }
@media (max-width:1023.98px){ :root{ --container-margin:16px; --container-gutter:16px; --container-columns:8; /* @kind other */ } }
@media (max-width:767.98px) { :root{ --container-columns:4; /* @kind other */ } }

.container{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-margin); }

/* ============================================================
   TYPE ROLE CLASSES — JP mode metrics (codebase semantic/Type/JP).
   size · weight · line-height(px) · letter-spacing(px).
   ============================================================ */
.display-2xl { font-family:var(--font-sans); font-weight:700; font-size:48px; line-height:var(--lh-display-2xl); letter-spacing:var(--ls-display-2xl); color:var(--fg); }
.display-xl  { font-family:var(--font-sans); font-weight:700; font-size:36px; line-height:var(--lh-display-xl); letter-spacing:var(--ls-display-xl); color:var(--fg); }
.display-lg  { font-family:var(--font-sans); font-weight:700; font-size:30px; line-height:var(--lh-display-lg); letter-spacing:var(--ls-display-lg); color:var(--fg); }
.display-md  { font-family:var(--font-sans); font-weight:700; font-size:24px; line-height:var(--lh-display-md); letter-spacing:var(--ls-display-md); color:var(--fg); }
.display-sm  { font-family:var(--font-sans); font-weight:700; font-size:20px; line-height:var(--lh-display-sm); letter-spacing:var(--ls-display-sm); color:var(--fg); }

.heading-1 { font-family:var(--font-sans); font-weight:700; font-size:30px; line-height:var(--lh-heading-1); letter-spacing:var(--ls-heading-1); color:var(--fg); }
.heading-2 { font-family:var(--font-sans); font-weight:700; font-size:24px; line-height:var(--lh-heading-2); letter-spacing:var(--ls-heading-2); color:var(--fg); }
.heading-3 { font-family:var(--font-sans); font-weight:600; font-size:20px; line-height:var(--lh-heading-3); letter-spacing:var(--ls-heading-3); color:var(--fg); }
.heading-4 { font-family:var(--font-sans); font-weight:600; font-size:18px; line-height:var(--lh-heading-4); letter-spacing:var(--ls-heading-4); color:var(--fg); }
.heading-5 { font-family:var(--font-sans); font-weight:600; font-size:16px; line-height:var(--lh-heading-5); color:var(--fg); }
.heading-6 { font-family:var(--font-sans); font-weight:600; font-size:14px; line-height:var(--lh-heading-6); color:var(--fg); }

.body-xl { font-family:var(--font-sans); font-weight:400; font-size:20px; line-height:var(--lh-body-xl); color:var(--fg); }
.body-lg { font-family:var(--font-sans); font-weight:400; font-size:18px; line-height:var(--lh-body-lg); color:var(--fg); }
.body-md { font-family:var(--font-sans); font-weight:400; font-size:16px; line-height:var(--lh-body-md); color:var(--fg); }
.body    { font-family:var(--font-sans); font-weight:400; font-size:14px; line-height:var(--lh-body-sm); color:var(--fg); }
.body-sm { font-family:var(--font-sans); font-weight:400; font-size:14px; line-height:var(--lh-body-sm); color:var(--fg); }
.body-xs { font-family:var(--font-sans); font-weight:400; font-size:12px; line-height:var(--lh-body-xs); color:var(--fg); }
.body-2xs{ font-family:var(--font-sans); font-weight:400; font-size:11px; line-height:var(--lh-body-2xs); color:var(--fg); }
.body-md-strong { font-family:var(--font-sans); font-weight:600; font-size:16px; line-height:var(--lh-body-md-strong); color:var(--fg); }
.body-sm-strong { font-family:var(--font-sans); font-weight:600; font-size:14px; line-height:var(--lh-body-sm-strong); color:var(--fg); }

/* Label — UI chrome. Medium 500, leading-none (= size px). */
.label-xl { font-family:var(--font-sans); font-weight:500; font-size:18px; line-height:var(--lh-label-xl); letter-spacing:0;                 color:var(--fg); }
.label-lg { font-family:var(--font-sans); font-weight:500; font-size:16px; line-height:var(--lh-label-lg); letter-spacing:0;                 color:var(--fg); }
.label-md { font-family:var(--font-sans); font-weight:500; font-size:14px; line-height:var(--lh-label-md); letter-spacing:0;                 color:var(--fg); }
.label-sm { font-family:var(--font-sans); font-weight:500; font-size:12px; line-height:var(--lh-label-sm); letter-spacing:var(--ls-label-sm); color:var(--fg); }
.label-xs { font-family:var(--font-sans); font-weight:500; font-size:11px; line-height:var(--lh-label-xs); letter-spacing:var(--ls-label-xs); color:var(--fg); }
.label    { font-family:var(--font-sans); font-weight:500; font-size:14px; line-height:var(--lh-label-md); color:var(--fg); }

/* Input — form field text. Regular 400, leading = size. */
.input-lg { font-family:var(--font-sans); font-weight:400; font-size:18px; line-height:var(--lh-input-lg); color:var(--fg); }
.input-md { font-family:var(--font-sans); font-weight:400; font-size:16px; line-height:var(--lh-input-md); color:var(--fg); }
.input-sm { font-family:var(--font-sans); font-weight:400; font-size:14px; line-height:var(--lh-input-sm); color:var(--fg); }

/* Caption & Overline */
.caption-md { font-family:var(--font-sans); font-weight:400; font-size:12px; line-height:var(--lh-caption-md); color:var(--fg-muted); }
.caption-sm { font-family:var(--font-sans); font-weight:400; font-size:11px; line-height:var(--lh-caption-sm); color:var(--fg-muted); }
.overline   { font-family:var(--font-sans); font-weight:600; font-size:12px; line-height:var(--lh-overline); letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--fg-muted); }
.caption    { font-family:var(--font-sans); font-weight:400; font-size:12px; line-height:var(--lh-caption-md); color:var(--fg-muted); }

/* Code — JetBrains Mono */
.code-inline   { font-family:var(--font-mono); font-weight:400; font-size:14px; line-height:var(--lh-code-md); color:var(--fg); background:var(--color-gray-100); padding:2px 6px; border-radius:4px; }
.code-block-md { font-family:var(--font-mono); font-weight:400; font-size:14px; line-height:var(--lh-code-md); color:var(--fg); }
.code-block-sm { font-family:var(--font-mono); font-weight:400; font-size:12px; line-height:var(--lh-code-sm); color:var(--fg); }

.num  { font-family:var(--font-ui-en); font-variant-numeric:tabular-nums; }
.mono { font-family:var(--font-mono); font-size:14px; }

/* ============================================================
   Element defaults — scoped to .coral
   ============================================================ */
.coral { font-family:var(--font-sans); color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; }
.coral h1 { font-weight:700; font-size:30px; line-height:40px; margin:0; }
.coral h2 { font-weight:700; font-size:24px; line-height:36px; margin:0; }
.coral h3 { font-weight:600; font-size:20px; line-height:32px; margin:0; }
.coral h4 { font-weight:600; font-size:18px; line-height:28px; margin:0; }
.coral h5 { font-weight:600; font-size:16px; line-height:24px; margin:0; }
.coral h6 { font-weight:600; font-size:14px; line-height:20px; margin:0; }
.coral p  { font-weight:400; font-size:14px; line-height:24px; margin:0; }
.coral code { font-family:var(--font-mono); font-size:14px; background:var(--color-gray-100); padding:2px 6px; border-radius:4px; }

/* Generated by fig_materialize — background/mask classes for extracted bitmaps.
 * One rule per line; url()s are relative to this file, so it must stay
 * next to the assets/ directory it references. */
.fig-asset-2446d52c9302e4c9 { background: url(./assets/2446d52c9302e4c9.png) center / cover no-repeat; }
.fig-asset-460c8d85fc01bfdd { background: url(./assets/460c8d85fc01bfdd.png) center / cover no-repeat; }
.fig-asset-6fe631d7697484f2 { background: url(./assets/6fe631d7697484f2.png) center / cover no-repeat; }
.fig-asset-782a92b2ed28a13a { background: url(./assets/782a92b2ed28a13a.png) center / cover no-repeat; }
.fig-asset-d1a2b549e468a61f { background: url(./assets/d1a2b549e468a61f.png) center / cover no-repeat; }

/* ============================================================
   figma-components — spacing bridge
   The fig_materialize output consumes spacing as UNITLESS floats
   via calc(var(--spacing-N) * 1px). The SSOT (colors_and_type.css)
   defines --spacing-* WITH px units, which would make that calc
   invalid. This file re-declares the SAME values as unitless floats
   so the imported components resolve correctly. Values are identical
   to the Figma "Theme Size" / primitive spacing variables (SSOT).
   SSOT consumers use the px --space-* aliases, which are untouched.
   Imported AFTER colors_and_type.css so the unitless form wins for
   the --spacing-* names the components reference.
   ============================================================ */
:root {
  --spacing-0: 0;
  --spacing-0-5: 2;  --spacing-0_5: 2;
  --spacing-1: 4;
  --spacing-1-5: 6;  --spacing-1_5: 6;
  --spacing-2: 8;
  --spacing-2-5: 10; --spacing-2_5: 10;
  --spacing-3: 12;
  --spacing-3-2: 12.8;
  --spacing-3-5: 14; --spacing-3_5: 14;
  --spacing-4: 16;
  --spacing-5: 20;
  --spacing-6: 24;
  --spacing-7: 28;
  --spacing-8: 32;
  --spacing-9: 36;
  --spacing-10: 40;
  --spacing-11: 44;
  --spacing-12: 48;
  --spacing-14: 56;
  --spacing-16: 64;
  --spacing-20: 80;
  --spacing-24: 96;
  --spacing-28: 112;
  --spacing-32: 128;
  --spacing-36: 144;
  --spacing-40: 160;
  --spacing-44: 176;
  --spacing-48: 192;
  --spacing-52: 208;
  --spacing-56: 224;
  --spacing-60: 240;
  --spacing-64: 256;
  --spacing-72: 288;
  --spacing-80: 320;
  --spacing-96: 384;
}

/* Sakana Marlin — webfonts.
   Brand faces: Poppins (EN) + Noto Sans JP (JP). Both served from Google Fonts (exact match, no substitution).
   Inter is included only because the UI-kit Figma variables reference it in EN mode (--font-sans under :root[data-mode="en"]). */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* devanagari */
/* latin-ext */
/* latin */
/* devanagari */
/* latin-ext */
/* latin */
/* devanagari */
/* latin-ext */
/* latin */
/* devanagari */
/* latin-ext */
/* latin */
/* devanagari */
/* latin-ext */
/* latin */
/* ============================================================
   Sakana Marlin — brand color architecture.
   The worldview is the SEA, split into two zones that structure the palette:
   Zone 1 磯〜ビーチ = Attunement Area (product UI, product LP) → Beach ramp, anchor 凪 #4D9BB4
   Zone 2 外洋 = Deep Research Area (reports, slides, Marlin Insight) → Deep-ocean ramp, anchor 瑠璃 #123B75
   Values are verbatim from the Figma exploration board (案: A).
   ============================================================ */
:root {
  /* --- Named anchors (色名 from the board) --- */
  --nagi: #4D9BB4;        /* 凪 — calm sea surface. 「寄り添って不安を分散」「心を許せる」 */
  --ruri: #123B75;        /* 瑠璃 (外洋) — deep-ocean ink */
  --sango: #ECAC9B;       /* 珊瑚 — coral accent */
  --shinjusa: #EEEBE2;    /* 真珠砂 — pearl-sand accent */
  --subtle: #F7FBFC;      /* Subtle — sea-tinted near-white */
  --inkwell: #1F2528;     /* Inkwell — sea-tinted near-black */
  /* --- Product Primary ビーチ (Beach) 50→950 — Zone 1 --- */
  --beach-50: #EBF8FD; --beach-100: #DAF0F7; --beach-200: #BBE0ED; --beach-300: #95CBDD;
  --beach-400: #6FB3CA; --beach-500: #4D9BB4; --beach-600: #34809C; --beach-700: #276984;
  --beach-800: #1E536D; --beach-900: #153F56; --beach-950: #0D2D41;
  /* --- Artifact Primary 外洋インク (Deep ocean) 50→950 — Zone 2. 空映しの水深型 + 珊瑚アクセント --- */
  --deep-50: #F1F8FE; --deep-100: #E6F0FA; --deep-200: #D1E2F4; --deep-300: #B1CAE5;
  --deep-400: #8CABCD; --deep-500: #6489B2; --deep-600: #426C9A; --deep-700: #265487;
  --deep-800: #104378; --deep-900: #02376F; --deep-950: #002551;
  /* --- Neutral 海tint (shared by both zones) 50→950 --- */
  --neutral-50: #F7FBFC; --neutral-100: #EFF2F4; --neutral-200: #E1E5E8; --neutral-300: #CDD2D5;
  --neutral-400: #B2B8BB; --neutral-500: #8C9397; --neutral-600: #6B7377; --neutral-700: #4F575B;
  --neutral-800: #343C40; --neutral-900: #1F2528; --neutral-950: #0D1215;
  /* --- アクセント (required): 真珠砂 / 珊瑚 --- */
  --sand-100: #F5F3EE; --sand-300: #EEEBE2; --sand-500: #E2DED3; --sand-700: #A29E95; --sand-900: #77746D;
  --coral-100: #F1D3CB; --coral-300: #F1BCAF; --coral-500: #ECAC9B; --coral-700: #A87061; --coral-900: #774B3F;
  /* --- Logo colors (fixed, never themed) --- */
  --logo-red: #E10600; --logo-ink: #1E1E1E;
  /* --- Zone 1 semantic: Attunement (product side) --- */
  --attune-primary: var(--beach-500);
  --attune-primary-strong: var(--beach-600);
  --attune-surface: #FFFFFF;
  --attune-surface-subtle: var(--neutral-50);
  --attune-ink: var(--neutral-900);
  --attune-ink-muted: var(--neutral-600);
  --attune-border: var(--neutral-200);
  /* --- Zone 2 semantic: Deep Research / Artifact (generated output side) --- */
  --artifact-ink: var(--ruri);
  --artifact-primary: var(--deep-900);
  --artifact-quote: #186F8B;            /* quote text on light surfaces (from layout sample 05) */
  --artifact-on-deep: #FFFFFF;
  --artifact-accent: var(--coral-500);
  --artifact-paper: var(--sand-300);
  /* --- Links (Coralの寒色はテーマで儇(ビーチ)に再割当 — 引用リンクは beach-700) --- */
  --link: var(--beach-700);
  --link-hover: var(--beach-800);
}

/* ============================================================
   Marlin theme over Coral Design System.
   コンポーネント/構造 = Coral(_ds/coral-design-system-…)、
   カラーパレット & フォント = Marlin(このファイルが差し替える)。
   ★ 各ページで Coral の colors_and_type.css 等を <link> した後に
     この styles.css を読み込むこと(後勝ちで上書き)。
   ============================================================ */
:root {
  /* Coral gray → Marlin Neutral 海tint */
  --color-gray-50: #F7FBFC; --color-gray-100: #EFF2F4; --color-gray-200: #E1E5E8;
  --color-gray-300: #CDD2D5; --color-gray-400: #B2B8BB; --color-gray-500: #8C9397;
  --color-gray-600: #6B7377; --color-gray-700: #4F575B; --color-gray-800: #343C40;
  --color-gray-900: #1F2528; --color-gray-950: #0D1215;
  /* Coral blue → Product Primary ビーチ(凪) — info・リンク・チャートの寒色をブランド化 */
  --color-blue-50: #EBF8FD; --color-blue-100: #DAF0F7; --color-blue-200: #BBE0ED;
  --color-blue-300: #95CBDD; --color-blue-400: #6FB3CA; --color-blue-500: #4D9BB4;
  --color-blue-600: #34809C; --color-blue-700: #276984; --color-blue-800: #1E536D;
  --color-blue-900: #153F56; --color-blue-950: #0D2D41;
  /* フォント: EN=Poppins(CoralのInterを置換)。JP=Noto Sans JP(共通) */
  --font-sans: "Noto Sans JP", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; /* @kind font */
  --font-ui-en: "Poppins", "Noto Sans JP", system-ui, sans-serif; /* @kind font */
}
[data-lang="en"], :lang(en) {
  --font-sans: "Poppins", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif; /* @kind font */
}
:root {
  /* Zone 1 primary: 凪(Product Primary ビーチ500)。hover=beach-600 相当 */
  --general-primary: var(--color-blue-500); /* @kind color */
  --general-primary-foreground: #FFFFFF; /* @kind color */
}
/* green/amber/red のステータス色は Coral のまま(機能色。Marlinパレットは定義しない) */

/* Sakana Marlin — typography.
   EN: Poppins / JP: Noto Sans JP. The UI kit's Figma variables additionally set --font-sans
   ("Noto Sans JP" default mode, "Inter" in :root[data-mode="en"]) — see components/core/fig-tokens.css. */
:root {
  --font-en: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-jp: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", sans-serif;
  --font-brand: "Poppins", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif; /* mixed JP/EN runs */
  /* UI scale (px-resolved from UI-kit float tokens) */
  --ui-text-xs: 12px; --ui-text-sm: 14px; --ui-text-base: 16px; --ui-text-lg: 18px; --ui-text-xl: 20px;
  --ui-weight-normal: 400; --ui-weight-medium: 500; --ui-weight-semibold: 600;
  /* Artifact (Marlin Insight A4 document, base 595x842pt, 48pt margins) */
  --doc-title-size: 30px; --doc-title-lh: 46px; --doc-title-weight: 700;   /* Noto Sans JP Bold */
  --doc-label-size: 14px; --doc-label-lh: 20px; --doc-label-weight: 600;   /* Poppins SemiBold */
  --doc-body-size: 12px; --doc-body-lh: 16px;                              /* Noto Sans JP Regular */
  --doc-meta-size: 12px; --doc-meta-weight: 500;                           /* Poppins Medium */
  /* Pull-quote (layout sample 05): Poppins Light, lh 1.3, ls -0.02em, color var(--artifact-quote) */
  --quote-weight: 300; /* @kind font */ --quote-lh: 1.3; /* @kind font */ --quote-ls: -0.02em; /* @kind font */
}

/* Sakana Marlin — elevation, radii, borders. Shadow values verbatim from the Figma board. */
:root {
  --shadow-card: 0px 2px 4px -2px rgba(0,0,0,0.1), 0px 4px 6px -1px rgba(0,0,0,0.1);   /* resting cards, product img */
  --shadow-float: 0px 8px 10px -6px rgba(0,0,0,0.1), 0px 20px 25px -5px rgba(0,0,0,0.1); /* pages, covers, hero cards */
  --shadow-chip: 0px 4px 4px 0px rgba(0,0,0,0.25);                                     /* small color chips */
  /* Radii (px-resolved from UI-kit tokens; large media cards from the board) */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 999px;
  --radius-media: 17px;  /* product imagery card 16.88px */
  --radius-slide: 19px;  /* 16:9 layout card 19.39px */
  --border-w: 1px; --border-w-2: 2px;
  --border-hairline: 1px solid rgba(0,0,0,0.08); /* @kind other */
  --border-card: 1px solid #DDDDDD; /* @kind other */
}

/* Sakana Marlin — sea imagery.
   表紙等の背景は Figma のシェーダーフィル(CODE_COMPONENT、ソース抽出不可)。
   正式実装: assets/shader/sea-shader.js の <sea-shader preset="deep|attune|quote">(Figma Perinii node 1495:2362 の支給シェーダー移植)。
   以下の --grad-* は WebGL 不使用時の静的フォールバック。 */
:root {
  /* Zone 2 — 表紙・キービジュアル: シェーダー焼き込みPNG + 最終フォールバックのグラデ */
  --grad-deep-sea: url('/assets/marlin/insights/001/imagery/sea-hero.jpg') center / cover no-repeat, linear-gradient(172deg, #EAECE5 0%, #9FBECE 22%, #2E5E85 55%, #123B75 85%, #0E3059 100%); /* @kind color */
  --key-visual-cover: url('../assets/imagery/sea-cover.png') center / cover no-repeat; /* @kind other */
  --key-visual-hero: url('/assets/marlin/insights/001/imagery/sea-hero.jpg') center / cover no-repeat; /* @kind other */
  /* Zone 1 — product marketing wash: calm shallow water, mostly light */
  --grad-attune: url('../assets/imagery/sea-attune.png') center / cover no-repeat, linear-gradient(150deg, #CFE4EE 0%, #FDFDFC 55%, #9FC4DA 100%); /* @kind color */
  /* Quote-card wash (layout sample 05): paper center, blue pooling at corners */
  --grad-quote: url('/assets/marlin/insights/001/imagery/sea-quote.jpg') center / cover no-repeat, linear-gradient(120deg, #C9DCE8 0%, #FBFBFA 55%, #B7D0E0 100%); /* @kind color */
}
.texture-grain { position: relative; }
.texture-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E"); }

/* Sakana Marlin — minimal element defaults. */
body { margin: 0; font-family: var(--font-jp); color: var(--attune-ink); }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
::selection { background: var(--beach-200); }
/* ============================================================
   Marlin Insight — web report stylesheet (Zone 2: Deep Research).
   Layers on ../../styles.css (Marlin tokens). JP: Noto Sans JP / EN: Poppins.
   ============================================================ */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body.mi{margin:0;background:#fff;color:var(--neutral-800);font-family:var(--font-jp);font-size:16px;line-height:1.95;letter-spacing:.015em;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
.mi a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--beach-300)}
.mi a:hover{color:var(--link-hover);text-decoration-color:currentColor}
.mi a:focus-visible,.mi button:focus-visible,.mi [tabindex]:focus-visible{outline:2px solid var(--nagi);outline-offset:2px;border-radius:2px}
.mi section{scroll-margin-top:64px}
em{font-style:normal;background:linear-gradient(transparent 70%,var(--coral-100) 70%)}
strong{font-weight:700;color:var(--neutral-900)}
/* ---------- chrome: progress / topbar / rail ---------- */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--nagi),var(--ruri));z-index:130}
#topbar{position:fixed;top:0;left:0;right:0;height:48px;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--neutral-200);display:flex;align-items:center;gap:18px;padding:0 20px;z-index:120;transform:translateY(-100%);transition:transform .2s ease}
#topbar.on{transform:none}
.tb-brand{display:flex;align-items:center;gap:7px;flex-shrink:0;text-decoration:none}
.tb-brand .mk{height:14px;display:block}
.tb-brand .wd{height:10.5px;display:block;margin-top:2px}
.tb-sep{width:1px;height:16px;background:var(--neutral-200);flex-shrink:0}
.tb-issue{font-family:var(--font-en);font-weight:600;font-size:10px;letter-spacing:.22em;color:var(--beach-800);flex-shrink:0}
#tbNow{margin-left:auto;font-size:11px;color:var(--neutral-600);letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){#tbNow{display:none}}
#rail{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:110;display:none;flex-direction:column;gap:1px;opacity:0;pointer-events:none;transition:opacity .2s ease}
#rail.on{opacity:1;pointer-events:auto}
@media(min-width:1280px){#rail{display:flex}}
#rail a{display:flex;align-items:center;gap:9px;padding:5px 9px;border-left:2px solid transparent;color:var(--neutral-400);text-decoration:none}
#rail a:hover{color:var(--beach-700)}
#rail a.act{color:var(--ruri);border-left-color:var(--sango)}
#rail a{transition:color .25s ease}
#rail a.on-dark{color:rgba(255,255,255,.62)}
#rail a.on-dark:hover{color:#fff}
#rail a.on-dark.act{color:#fff}
#rail .rn{font-family:var(--font-en);font-weight:600;font-size:10px;letter-spacing:.1em;min-width:20px}
#rail .rt{font-size:10.5px;letter-spacing:.02em;white-space:nowrap;max-width:9.5em;overflow:hidden;text-overflow:ellipsis}
/* ---------- layout primitives ---------- */
.prose{max-width:728px;margin:0 auto;padding:0 24px}
.wide{max-width:968px;margin:0 auto;padding:0 24px}
.prose p{margin:0 0 1.7em}
.sec-pad{padding:76px 0 60px}
.kicker{font-family:var(--font-en);font-weight:600;font-size:11px;letter-spacing:.24em;color:var(--beach-700)}
h2.sec-title{font-weight:700;font-size:clamp(24px,4.2vw,30px);line-height:1.65;letter-spacing:.03em;color:var(--ruri);margin:10px 0 30px}
h3.sub{font-weight:700;font-size:clamp(18px,3vw,20px);line-height:1.75;margin:56px 0 18px;letter-spacing:.02em;color:var(--neutral-900)}
h3.sub .no{font-family:var(--font-en);font-weight:600;font-size:.78em;color:var(--beach-700);margin-right:.8em;letter-spacing:.12em}
/* ---------- cover ---------- */
.cover{position:relative;height:min(96vh,940px);min-height:700px;overflow:hidden;background:var(--grad-deep-sea);color:#fff}
.cover .sea{position:absolute;inset:0}
.cover-inner{position:relative;z-index:2;max-width:1080px;margin:0 auto;height:100%;padding:42px 28px 50px;box-sizing:border-box;display:flex;flex-direction:column}
.cover-top{display:flex;align-items:center;gap:14px}
.cover-top .mk{height:17px;display:block}
.cover-top .wd{height:13px;display:block;margin-top:2px}
.cover-top .lockup{display:flex;align-items:center;gap:8px;text-decoration:none}
.cover-top .csep{width:1px;height:18px;background:rgba(31,37,40,.35)}
.cover-top .series{font-family:var(--font-en);font-weight:600;font-size:10px;letter-spacing:.26em;color:var(--inkwell)}
.cover-top .out{margin-left:auto;font-family:var(--font-en);font-weight:500;font-size:11.5px;color:var(--inkwell)}
.cover-main{margin-top:auto}
.cover .issue{font-family:var(--font-en);font-weight:600;font-size:11.5px;letter-spacing:.3em;color:rgba(255,255,255,.94)}
.cover h1{font-weight:700;font-size:clamp(34px,6.2vw,58px);line-height:1.42;letter-spacing:.04em;margin:20px 0 16px;color:#fff;text-wrap:balance}
.cover .h1sub{display:flex;align-items:center;gap:16px;font-weight:700;font-size:clamp(15px,2.6vw,19px);letter-spacing:.26em;color:#fff;margin:0 0 30px}
.cover .h1sub::before{content:"";flex:0 0 34px;height:2px;background:var(--sango)}
.cover .subtitle{max-width:660px;font-size:clamp(13.5px,2vw,15.5px);line-height:2.1;color:var(--deep-200)}
.cover .meta{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.85);display:flex;flex-wrap:wrap;gap:18px 56px}
.cover .mcol{display:flex;flex-direction:column;gap:5px}
.cover .ml{font-family:var(--font-en);font-weight:600;font-size:13px;line-height:20px;color:#fff}
.cover .mv{font-size:12px;line-height:1.7;color:var(--deep-100)}
/* ---------- toc ---------- */
.toc{background:#fff;border-bottom:1px solid var(--neutral-200)}
.toc-inner{max-width:728px;margin:0 auto;padding:64px 24px 60px}
.toc h2{font-weight:700;font-size:24px;letter-spacing:.08em;color:var(--ruri);margin:8px 0 26px}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{border-bottom:1px dotted var(--neutral-300)}
.toc a{display:flex;align-items:baseline;gap:16px;padding:15px 4px;color:var(--neutral-900);text-decoration:none}
.toc a:hover{background:var(--neutral-50)}
.toc .n{font-weight:700;font-size:12px;color:var(--beach-700);min-width:52px;letter-spacing:.06em}
.toc .t{flex:1;font-size:15px;font-weight:500;letter-spacing:.02em;line-height:1.8}
.toc .p{font-family:var(--font-en);font-weight:600;font-size:10px;letter-spacing:.18em;color:var(--neutral-400)}
/* ---------- 要点 / dash ---------- */
.keybox{background:var(--ruri);color:var(--deep-100);border-radius:14px;padding:32px 34px 26px;margin:44px 0;box-shadow:var(--shadow-card)}
.keybox .kb-label{font-family:var(--font-en);font-weight:600;font-size:11px;letter-spacing:.26em;color:var(--sango);margin-bottom:16px}
.keybox ul{list-style:none;margin:0;padding:0}
.keybox li{position:relative;padding-left:19px;margin-bottom:13px;font-size:14px;line-height:1.95}
.keybox li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:2px;background:var(--sango)}
.keybox b{color:#fff;font-weight:700}
.dash{list-style:none;margin:0 0 1.7em;padding:0}
.dash li{position:relative;padding-left:24px;margin-bottom:18px}
.dash li::before{content:"";position:absolute;left:0;top:.92em;width:12px;height:2px;background:var(--nagi)}
/* ---------- chapter divider ---------- */
.divider{position:relative;background:linear-gradient(164deg,#2E5E85 0%,var(--ruri) 52%,#0E3059 100%);color:#fff;overflow:hidden;margin:88px 0 64px}
.divider .d-inner{position:relative;max-width:968px;margin:0 auto;padding:72px 28px 68px;z-index:1}
.divider .d-num{font-family:var(--font-en);font-weight:300;font-size:clamp(84px,14vw,144px);line-height:1;color:rgba(255,255,255,.96)}
.divider .d-kicker{font-family:var(--font-en);font-weight:600;font-size:11px;letter-spacing:.3em;color:var(--sango);margin:22px 0 12px}
.divider h2{font-weight:700;font-size:clamp(23px,4.4vw,34px);line-height:1.65;letter-spacing:.04em;margin:0;max-width:760px;text-wrap:balance;color:#fff}
/* ---------- figure block ---------- */
.figure{max-width:968px;margin:52px auto;padding:0 24px}
.fig-card{background:#fff;border:var(--border-card);border-radius:14px;box-shadow:var(--shadow-card);padding:30px 32px 24px}
.fig-eyebrow{font-family:var(--font-en);font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--beach-700)}
.fig-title{font-weight:700;font-size:clamp(16.5px,2.6vw,19px);line-height:1.7;letter-spacing:.02em;color:var(--neutral-900);margin:8px 0 4px}
.fig-sub{font-size:12.5px;color:var(--neutral-500);margin-bottom:20px}
.fig-src{font-size:11px;color:var(--neutral-500);line-height:1.8;margin-top:18px;padding-top:12px;border-top:1px solid var(--neutral-100)}
.fig-note{font-size:12px;color:var(--neutral-600);line-height:1.85;margin-top:12px}
.fig-note b{color:var(--neutral-900)}
.reveal{opacity:0;transform:translateY(8px);transition:opacity .32s ease,transform .32s ease}
.reveal.in{opacity:1;transform:none}
/* ---------- pull quote (quote-card wash) ---------- */
.pull{max-width:824px;margin:56px auto;padding:0 24px}
.pull .q-card{position:relative;background:var(--grad-quote);border-radius:var(--radius-media);padding:36px 40px 30px;overflow:hidden;box-shadow:var(--shadow-card)}
.pull blockquote{position:relative;margin:0;font-weight:400;font-size:clamp(17.5px,2.9vw,22px);line-height:1.95;letter-spacing:.03em;color:var(--artifact-quote);text-wrap:balance;z-index:1}
.pull cite{position:relative;display:block;margin-top:14px;font-style:normal;font-family:var(--font-en);font-weight:500;font-size:11px;letter-spacing:.12em;color:var(--neutral-500);z-index:1}
@media(max-width:560px){.pull .q-card{padding:26px 22px 22px}}
/* ---------- case cards (fig1) ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.case{--c:var(--nagi);border:var(--border-card);border-top:3px solid var(--c);border-radius:12px;background:#fff;display:flex;flex-direction:column;overflow:hidden}
.case:nth-child(2){--c:var(--sango)}
.case:nth-child(3){--c:var(--deep-400)}
.case-head{padding:18px 18px 12px;background:none;border:none;text-align:left;cursor:pointer;font-family:inherit;width:100%;color:inherit}
.case-chip{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--neutral-600);border:1px solid var(--neutral-300);border-radius:999px;padding:3px 11px;margin-bottom:10px;background:#fff}
.case-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--c)}
.case-title{font-weight:700;font-size:16.5px;line-height:1.65;color:var(--neutral-900)}
.case-date{font-size:11px;color:var(--neutral-500);margin-top:6px;letter-spacing:.04em}
.case-body{padding:0 18px 12px;font-size:13px;color:var(--neutral-600);line-height:1.9;flex:1}
.case dl{margin:6px 0 0}
.case dt{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--beach-800);margin-top:12px}
.case dd{margin:2px 0 0;font-size:12.5px;color:var(--neutral-800);line-height:1.85}
.case-more{max-height:0;overflow:hidden;transition:max-height .3s ease}
.case.open .case-more{max-height:1200px}
.case-toggle{margin:0 18px 10px;padding:6px 0;font-size:12px;font-weight:700;color:var(--beach-700);background:none;border:none;cursor:pointer;letter-spacing:.06em;text-align:left;font-family:inherit}
.case-toggle:hover{color:var(--beach-800)}
.case-toggle::after{content:" ＋ 詳細"}
.case.open .case-toggle::after{content:" − 閉じる"}
.tagline{margin-top:12px;padding-top:12px;border-top:1px dotted var(--neutral-300);font-weight:700;font-size:13px;color:var(--ruri);line-height:1.8}
/* ---------- flow diagram (fig2) ---------- */
.flowwrap{overflow-x:auto}
.flow-svg{min-width:640px;width:100%;height:auto;display:block}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.stat{background:var(--neutral-50);border-radius:12px;padding:16px 16px 13px}
.stat .v{font-family:var(--font-en);font-weight:600;font-size:26px;color:var(--ruri);letter-spacing:.01em}
.stat .v small{font-family:var(--font-jp);font-size:12px;font-weight:700;color:var(--neutral-600);margin-left:3px}
.stat .l{font-size:11.5px;color:var(--neutral-600);line-height:1.75;margin-top:5px}
.stat.alert .v{color:var(--coral-700)}
/* ---------- timeline ---------- */
.timeline{position:relative;margin:34px 0 8px;padding-left:24px;border-left:2px solid var(--neutral-200)}
.tl-item{position:relative;padding:0 0 30px 18px}
.tl-item::before{content:"";position:absolute;left:-32px;top:8px;width:9px;height:9px;border-radius:50%;background:#fff;border:2.5px solid var(--nagi)}
.tl-item.hot::before{border-color:var(--coral-500)}
.tl-year{font-family:var(--font-en);font-weight:600;font-size:15px;color:var(--beach-700);letter-spacing:.05em}
.tl-item.hot .tl-year{color:var(--coral-700)}
.tl-head{font-weight:700;font-size:14.5px;color:var(--neutral-900);margin:3px 0 5px;line-height:1.8}
.tl-body{font-size:13.5px;color:var(--neutral-600);line-height:1.9;max-width:640px}
/* ---------- tabs (fig4) ---------- */
.tabbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tabbtn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.03em;padding:8px 15px;border-radius:999px;border:1px solid var(--neutral-200);background:#fff;color:var(--neutral-600);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.tabbtn:hover{background:var(--neutral-50)}
.tabbtn[aria-selected="true"]{background:var(--ruri);border-color:var(--ruri);color:#fff}
.tabbtn .dot{width:8px;height:8px;border-radius:50%}
.typanel{background:var(--neutral-50);border-radius:12px;padding:26px}
.typanel h4{margin:0;font-weight:700;font-size:18px;color:var(--ruri);letter-spacing:.03em}
.typanel .ty-en{font-family:var(--font-en);font-weight:600;font-size:10px;letter-spacing:.22em;color:var(--neutral-500);margin:3px 0 14px}
.typanel .ty-def{font-size:14px;line-height:1.95;margin:0 0 18px;color:var(--neutral-800)}
.typanel .ty-jp{font-size:14px;line-height:1.95;margin:18px 0 0;color:var(--neutral-800)}
.ty-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ty-grid h5{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--beach-800)}
.ty-grid ul{list-style:none;margin:0;padding:0;font-size:13px;color:var(--neutral-800)}
.ty-grid li{position:relative;padding:7px 0 7px 15px;border-bottom:1px dotted var(--neutral-300);line-height:1.8}
.ty-grid li::before{content:"›";position:absolute;left:0;color:var(--nagi);font-weight:700}
.ty-grid li span{color:var(--neutral-600);font-size:12px}
/* ---------- mechanism (fig5 / ch3) ---------- */
.eq{display:flex;align-items:stretch;flex-wrap:wrap;justify-content:center;margin:8px 0 6px}
.eq .term{flex:1 1 180px;border-radius:12px;padding:22px 18px;text-align:center;color:#fff}
.eq .term:nth-child(1){background:var(--ruri)}
.eq .term:nth-child(3){background:#1D4A80}
.eq .term:nth-child(5){background:#2A5B8F}
.eq .op{display:flex;align-items:center;justify-content:center;width:44px;font-family:var(--font-en);font-weight:300;font-size:30px;color:var(--nagi)}
.eq .t-l{font-family:var(--font-en);font-weight:600;font-size:10px;letter-spacing:.22em;color:var(--sango)}
.eq .t-m{font-weight:700;font-size:18px;margin:8px 0 6px;letter-spacing:.05em}
.eq .t-s{font-size:11.5px;line-height:1.75;color:var(--deep-200)}
.cond4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:4px}
.cond{background:#fff;border:var(--border-card);border-radius:12px;padding:20px 16px}
.cond .c-no{font-family:var(--font-en);font-weight:600;color:var(--beach-700);font-size:12px;letter-spacing:.14em}
.cond h5{margin:6px 0 8px;font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--neutral-900)}
.cond p{margin:0 0 10px;font-size:12.5px;color:var(--neutral-600);line-height:1.85}
.cond .metric{font-size:11px;color:var(--beach-800);font-weight:700;letter-spacing:.03em;border-top:1px dotted var(--neutral-300);padding-top:9px}
.trig{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.trig .tg{background:#fff;border:var(--border-card);border-radius:12px;padding:16px 18px}
.trig .tg .tg-chip{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.12em;color:#fff;background:var(--nagi);border-radius:999px;padding:3px 10px;margin-bottom:10px}
.trig .tg .tg-chip .dot{width:7px;height:7px;border-radius:50%;background:#fff}
.trig .tg.man .tg-chip{background:var(--coral-700)}
.trig .tg h6{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--neutral-900)}
.trig .tg p{margin:0;font-size:12px;color:var(--neutral-600);line-height:1.8}
.trig .tg .freq{display:inline-block;margin-top:9px;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--coral-700)}
.layers{display:flex;flex-direction:column;border:var(--border-card);border-radius:14px;overflow:hidden}
.layer{display:grid;grid-template-columns:150px 1fr;border-top:1px solid var(--neutral-200);background:#fff}
.layer:first-child{border-top:none}
.layer .lh{color:#fff;padding:16px;display:flex;flex-direction:column;justify-content:center}
.layer:nth-child(1) .lh{background:var(--ruri)}
.layer:nth-child(2) .lh{background:#1D4A80}
.layer:nth-child(3) .lh{background:#265487}
.layer:nth-child(4) .lh{background:#34648F}
.layer .lh b{font-size:15px;letter-spacing:.05em;font-weight:700}
.layer .lh span{font-family:var(--font-en);font-weight:600;font-size:9.5px;letter-spacing:.2em;color:var(--sango);margin-bottom:4px}
.layer .lb{padding:14px 18px;font-size:13px;color:var(--neutral-600);line-height:1.9}
.layer .lb b{color:var(--neutral-900)}
/* ---------- arsenal (fig7) ---------- */
.arsenal{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ars h5{margin:0 0 14px;font-size:15.5px;font-weight:700;letter-spacing:.06em;color:var(--neutral-900);padding-bottom:10px;border-bottom:2px solid var(--ruri);display:flex;justify-content:space-between;align-items:baseline}
.ars h5 small{font-family:var(--font-en);font-weight:600;font-size:9.5px;letter-spacing:.2em;color:var(--neutral-500)}
.ars.cn h5{border-bottom-color:var(--coral-500)}
.abar{margin-bottom:13px}
.abar .al{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:5px;gap:10px}
.abar .al b{font-weight:700;color:var(--neutral-900)}
.abar .al b small{font-size:10.5px;font-weight:500;color:var(--neutral-500)}
.abar .al span{font-family:var(--font-en);font-weight:600;color:var(--neutral-500);font-size:11px}
.abar .track{height:8px;background:var(--neutral-100);border-radius:99px;overflow:hidden}
.abar .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ruri),var(--nagi));width:0;transition:width 1s ease}
.ars.cn .fill{background:linear-gradient(90deg,var(--coral-700),var(--coral-500))}
.mid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.midc{background:var(--neutral-50);border-radius:12px;padding:15px 15px 13px}
.midc b{display:block;font-size:13.5px;font-weight:700;color:var(--ruri);margin-bottom:4px}
.midc span{display:block;font-size:11.5px;color:var(--neutral-600);line-height:1.75}
/* ---------- sonar risk map (fig8) ---------- */
.sonar-card{position:relative;overflow:hidden;background:linear-gradient(165deg,#1D4A80 0%,var(--ruri) 45%,var(--deep-950) 100%);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-media);color:var(--deep-100);padding:30px 32px 24px;box-shadow:var(--shadow-float)}
.sonar-card>*{position:relative;z-index:1}
.sonar-card .fig-eyebrow{color:var(--sango)}
.sonar-card .fig-title{color:#fff}
.sonar-card .fig-sub{color:var(--deep-300)}
.sonar-card .fig-src{color:rgba(230,240,250,.55);border-top-color:rgba(255,255,255,.14)}
.filterbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.fbtn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:11.5px;font-weight:500;letter-spacing:.03em;padding:6px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--deep-200);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.fbtn:hover{border-color:rgba(255,255,255,.55)}
.fbtn[aria-pressed="true"]{background:var(--shinjusa);color:var(--ruri);border-color:var(--shinjusa);font-weight:700}
.fbtn .dot{width:7px;height:7px;border-radius:50%}
.sonar-wrap{overflow-x:auto}
#sonar{min-width:620px;width:100%;height:auto;display:block;font-family:var(--font-jp)}
.bubble{cursor:pointer;transition:opacity .2s}
.bubble.dim{opacity:.12;pointer-events:none}
.bubble circle.core{stroke:var(--deep-950);stroke-width:1}
.bubble.sel circle.core{stroke:#fff;stroke-width:2}
.bubble text{font-size:10.5px;fill:#E6F0FA;pointer-events:none;font-weight:500}
.qlabel{font-size:10px;fill:var(--deep-400);letter-spacing:.14em;font-weight:700}
.axis-l{font-size:10.5px;fill:var(--deep-400)}
.gridline{stroke:rgba(255,255,255,.10);stroke-width:1}
.midline{stroke:rgba(255,255,255,.38);stroke-width:1;stroke-dasharray:4 5}
#tip{position:fixed;z-index:140;pointer-events:none;background:var(--ruri);color:#E6F0FA;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:10px 13px;font-size:12px;line-height:1.75;max-width:250px;box-shadow:var(--shadow-float);opacity:0;transition:opacity .15s}
#tip b{color:#fff;font-size:12.5px}
#tip .tcat{font-size:10px;letter-spacing:.1em;font-weight:700}
.dossier{margin-top:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:22px 22px 18px}
.dossier .d-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.dossier h4{margin:0;font-size:18px;font-weight:700;color:#fff;letter-spacing:.03em;margin-right:auto}
.chip{font-size:10px;letter-spacing:.1em;font-weight:700;padding:3px 11px;border-radius:999px;border:1px solid currentColor}
.dgrid{display:grid;grid-template-columns:230px 1fr;gap:24px}
.dscore .row{display:grid;grid-template-columns:86px 1fr 30px;align-items:center;gap:9px;margin-bottom:8px;font-size:11.5px;color:var(--deep-300)}
.dscore .bar{height:7px;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden}
.dscore .bf{display:block;height:100%;background:linear-gradient(90deg,var(--nagi),var(--beach-300));border-radius:99px}
.dscore .num{font-family:var(--font-en);font-weight:600;color:#fff;text-align:right;font-size:11.5px}
.dtext h6{margin:0 0 5px;font-family:var(--font-en);font-weight:600;font-size:10px;letter-spacing:.2em;color:var(--sango)}
.dtext h6 .jp{font-family:var(--font-jp);letter-spacing:.14em}
.dtext p{margin:0 0 14px;font-size:13px;line-height:1.9;color:var(--deep-200)}
.dhint{font-size:11px;color:var(--deep-400);margin-top:14px;letter-spacing:.03em}
/* ---------- assessment table (fig9) ---------- */
.tbl-wrap{overflow-x:auto}
table.assess{width:100%;min-width:860px;border-collapse:collapse;font-size:12.5px}
.assess thead th{font-size:10.5px;letter-spacing:.08em;color:var(--neutral-500);font-weight:500;text-align:left;padding:10px;border-bottom:2px solid var(--ruri);white-space:nowrap}
.assess thead th.c{text-align:center}
.assess tbody td{padding:11px 10px;border-bottom:1px solid var(--neutral-200);vertical-align:middle}
.assess tbody tr:hover{background:var(--neutral-50)}
.assess .rk{font-family:var(--font-en);font-weight:500;color:var(--neutral-400);font-size:12px}
.assess .nm{font-weight:700;font-size:13px;color:var(--neutral-900);white-space:nowrap}
.assess .nm .man{color:var(--coral-700);font-size:10px;font-weight:700;letter-spacing:.06em;margin-left:6px}
.assess .catchip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 9px;border-radius:999px;white-space:nowrap}
.assess .comp{font-family:var(--font-en);font-weight:600;font-size:15px;color:var(--ruri);text-align:center}
.mini{display:flex;align-items:center;gap:7px}
.mini .mtrack{flex:1;height:6px;background:var(--neutral-100);border-radius:99px;overflow:hidden;min-width:52px}
.mini .mfill{display:block;height:100%;border-radius:99px;background:var(--nagi)}
.mini .mv{font-family:var(--font-en);font-size:11px;color:var(--neutral-600);font-weight:500;width:24px;text-align:right}
.legend-line{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--neutral-600);margin-top:14px}
.legend-line .li{display:flex;align-items:center;gap:6px}
.legend-line .sw{width:10px;height:10px;border-radius:50%}
/* ---------- focus five ---------- */
.focus{background:#fff;border:var(--border-card);border-radius:14px;box-shadow:var(--shadow-card);padding:26px 28px;margin:26px 0}
.focus .f-no{font-family:var(--font-en);font-weight:600;font-size:11px;letter-spacing:.24em;color:var(--beach-700)}
.focus h4{margin:6px 0 4px;font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--ruri);line-height:1.7}
.focus .f-cat{font-size:11.5px;color:var(--neutral-500);letter-spacing:.06em;margin-bottom:16px}
.fq{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
.fq div{font-size:13.5px;line-height:1.9;color:var(--neutral-600)}
.fq b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--beach-800);margin-bottom:4px}
.fq .gap b{color:var(--coral-700)}
.fq div p{margin:0;color:var(--neutral-800)}
/* ---------- coverage matrix (fig10) ---------- */
table.cov{width:100%;min-width:720px;border-collapse:collapse;font-size:13px}
.cov th{font-size:11px;letter-spacing:.06em;color:var(--neutral-500);font-weight:500;padding:10px 8px;border-bottom:2px solid var(--ruri);text-align:center}
.cov th:first-child{text-align:left}
.cov td{padding:12px 8px;border-bottom:1px solid var(--neutral-200);text-align:center;font-size:16px}
.cov td:first-child{text-align:left;font-weight:700;font-size:13px;color:var(--neutral-900);white-space:nowrap}
.cov .full{color:var(--nagi)}
.cov .half{color:var(--beach-300)}
.cov .none{color:var(--neutral-300)}
.cov td.gapcell{background:rgba(236,172,155,.16)}
.cov-note{font-size:11.5px;color:var(--neutral-600);margin-top:10px}
/* ---------- watchlist ---------- */
.watch{background:var(--ruri);color:var(--deep-100);border-radius:14px;padding:32px 34px 26px;margin:48px 0;box-shadow:var(--shadow-card)}
.watch .w-label{font-family:var(--font-en);font-weight:600;font-size:11px;letter-spacing:.26em;color:var(--sango);margin-bottom:18px}
.watch ol{list-style:none;counter-reset:w;margin:0;padding:0}
.watch li{counter-increment:w;position:relative;padding:13px 0 13px 46px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13.5px;line-height:1.85}
.watch li:last-child{border-bottom:none}
.watch li::before{content:counter(w,decimal-leading-zero);position:absolute;left:0;top:14px;font-family:var(--font-en);font-weight:600;color:var(--sango);font-size:13px;letter-spacing:.08em}
.watch b{color:#fff}
.watch .wd{color:var(--deep-300);font-size:11.5px;letter-spacing:.04em}
/* ---------- action list ---------- */
.actions{counter-reset:act;list-style:none;margin:26px 0;padding:0}
.actions li{counter-increment:act;position:relative;padding:20px 0 20px 62px;border-top:1px solid var(--neutral-200)}
.actions li:last-child{border-bottom:1px solid var(--neutral-200)}
.actions li::before{content:counter(act,decimal-leading-zero);position:absolute;left:0;top:22px;font-family:var(--font-en);font-weight:300;font-size:22px;color:var(--beach-700);letter-spacing:.04em}
.actions b{display:block;font-size:15.5px;font-weight:700;color:var(--neutral-900);margin-bottom:5px}
.actions p{margin:0;font-size:13.5px;color:var(--neutral-600);line-height:1.9}
/* ---------- about / refs / footer ---------- */
.about{background:var(--sand-100);border-top:1px solid var(--neutral-200)}
.about-inner{max-width:728px;margin:0 auto;padding:56px 24px}
.about h3{margin:0 0 14px;font-weight:700;font-size:17px;letter-spacing:.05em;color:var(--ruri)}
.about p{margin:0 0 14px;font-size:13px;color:var(--neutral-700);line-height:2}
.author{background:var(--ruri);color:var(--deep-100);border-radius:14px;padding:32px 34px 28px;margin:0 0 44px;box-shadow:var(--shadow-card)}
.au-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.au-mark{width:46px;height:46px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.au-mark img{width:26px;display:block}
.au-eyebrow{font-family:var(--font-en);font-weight:600;font-size:10px;letter-spacing:.26em;color:var(--sango)}
.au-name{font-family:var(--font-en);font-weight:600;font-size:25px;color:#fff;letter-spacing:.06em;line-height:1.25;margin:3px 0 2px}
.au-role{font-family:var(--font-en);font-weight:500;font-size:11px;color:var(--deep-300);letter-spacing:.06em}
.author>p{margin:0 0 12px;font-size:13px;line-height:2.05;color:var(--deep-200)}
.author b{color:#fff;font-weight:700}
.au-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.au-caps div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:13px 14px 11px}
.au-caps b{display:block;font-size:12.5px;color:#fff;margin-bottom:4px}
.au-caps span{display:block;font-size:11px;color:var(--deep-300);line-height:1.75}
.refs{max-width:728px;margin:0 auto;padding:48px 24px 8px}
.refs h3{margin:0 0 16px;font-family:var(--font-en);font-weight:600;font-size:11px;letter-spacing:.22em;color:var(--neutral-500)}
.refs h3 .jp{font-family:var(--font-jp);letter-spacing:.14em}
.refs ol{margin:0;font-size:12px;color:var(--neutral-600);line-height:1.95;padding-left:20px}
.refs li{margin-bottom:8px}
.refs .disc{font-size:11px;color:var(--neutral-500);line-height:1.9;margin-top:18px}
/* ---------- CTA / colophon ---------- */
.cta{position:relative;background:linear-gradient(158deg,#FDFDFC 0%,#7FA8BC 26%,var(--ruri) 58%,var(--deep-950) 100%);color:#fff;overflow:hidden;margin-top:56px}
.cta-inner{position:relative;max-width:728px;margin:0 auto;padding:76px 24px 70px;text-align:center;z-index:1}
.cta-eyebrow{font-family:var(--font-en);font-weight:600;font-size:11px;letter-spacing:.3em;color:var(--sango);margin-bottom:18px}
.cta h2.en{margin:0 0 22px;font-family:var(--font-en);font-weight:300;font-size:clamp(28px,5.6vw,42px);line-height:1.4;letter-spacing:-.01em;color:#fff}
.cta p{margin:0 auto 32px;font-size:13.5px;line-height:2.05;color:var(--deep-200);max-width:600px}
.cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.mi a.btn,.mi a.btn:hover{text-decoration:none}
.btn{display:inline-block;font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.05em;padding:13px 32px;border-radius:10px;text-decoration:none;transition:background .18s,color .18s,border-color .18s}
.btn.primary{background:#fff;color:var(--ruri)}
.btn.primary:hover{background:var(--neutral-100);color:var(--ruri);text-decoration:none}
.btn.ghost{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn.ghost:hover{border-color:#fff;color:#fff;text-decoration:none}
.cta-btns .btn{min-width:240px;text-align:center;box-sizing:border-box}
.cta-note{margin-top:24px;font-size:10.5px;color:rgba(230,240,250,.5);letter-spacing:.05em}
footer.colophon{position:relative;overflow:hidden;background:var(--ruri);color:var(--deep-300)}
footer.colophon .colo-sea{position:absolute;inset:0;z-index:0}
footer.colophon .colo-inner{position:relative;z-index:1}
.cta+footer.colophon{border-top:none}
.cta+footer.colophon::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(968px,calc(100% - 56px));height:1px;background:rgba(255,255,255,.85);z-index:1}
.colo-inner{max-width:968px;margin:0 auto;padding:40px 28px;display:flex;flex-wrap:wrap;gap:18px 48px;justify-content:space-between;align-items:center;font-size:11.5px;letter-spacing:.05em}
.colo-inner .cbrand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.colo-inner .cbrand img{display:block;filter:brightness(0) invert(1)}
.colo-inner .cbrand .cm{height:14px}
.colo-inner .cbrand .cw{height:10.5px;margin-top:2px}
.colo-inner .cbrand .ins{font-family:var(--font-en);font-weight:600;font-size:10px;letter-spacing:.24em;color:var(--deep-300);margin-left:6px;padding-left:12px;border-left:1px solid rgba(255,255,255,.2)}
/* ---------- responsive ---------- */
@media(max-width:880px){
.cases{grid-template-columns:1fr}
.cond4{grid-template-columns:1fr 1fr}
.trig{grid-template-columns:1fr 1fr}
.arsenal{grid-template-columns:1fr}
.mid-cards{grid-template-columns:1fr 1fr}
.dgrid{grid-template-columns:1fr}
.fq{grid-template-columns:1fr}
.stat-strip{grid-template-columns:1fr 1fr}
.ty-grid{grid-template-columns:1fr}
.layer{grid-template-columns:112px 1fr}
.cover .meta{gap:14px 36px}
}
@media(max-width:560px){
body.mi{font-size:15px}
.cond4,.trig,.mid-cards{grid-template-columns:1fr}
.fig-card{padding:22px 18px 18px}
.sonar-card{padding:22px 18px 18px}
.keybox,.watch{padding:26px 22px 20px}
.author{padding:26px 20px 22px}
.au-caps{grid-template-columns:1fr}
.eq .op{width:100%;height:34px}
.cover{min-height:620px}
.cover-top .series{display:none}
.cover-top .csep{display:none}
}
@media print{
#progress,#topbar,#rail,#tip{display:none!important}
.divider,.cover,.sonar-card,.keybox,.watch,.author,.cta,.colophon{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.reveal{opacity:1;transform:none}
}

/* ---------- chapter band divider (selected: option 1f) ---------- */
.band{position:relative;overflow:hidden;color:#fff;margin:88px 0 64px}
.band .d-sea{position:absolute;inset:0;z-index:0}
.band .b-inner{position:relative;z-index:1;max-width:968px;margin:0 auto;padding:44px 28px;display:flex;align-items:center;gap:26px}
.band .b-num{font-family:var(--font-en);font-weight:300;font-size:76px;line-height:1;color:#fff}
.band .b-rule{width:1px;align-self:stretch;background:rgba(255,255,255,.35)}
.band .b-kicker{font-family:var(--font-en);font-weight:600;font-size:10.5px;letter-spacing:.28em;color:var(--sango);margin-bottom:8px}
.band h2{font-weight:700;font-size:clamp(20px,3vw,25px);line-height:1.6;letter-spacing:.04em;margin:0;color:#fff;text-wrap:balance}
.band .b-depth{margin-left:auto}
.b-depth{text-align:right;flex-shrink:0;padding-left:10px}
.b-dl{font-family:var(--font-en);font-weight:600;font-size:9.5px;letter-spacing:.24em;color:rgba(255,255,255,.78);margin-bottom:8px}
.b-gauge{display:flex;gap:4px;justify-content:flex-end}
.b-gauge i{width:20px;height:4px;border-radius:2px;background:rgba(255,255,255,.28)}
.b-gauge i.on{background:var(--sango)}
@media(max-width:720px){.band .b-inner{gap:18px;padding:36px 22px}.band .b-num{font-size:54px}.band .b-depth{display:none}}
@media print{.band{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* depth gauge in full chapter divider (1e + depth progress) */
.divider .d-sea{position:absolute;inset:0;z-index:0}
.divider .d-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.divider .b-depth{padding-bottom:14px}

/* v-sea divider: page-white bleeds into the sea surface (no hard grain edge) */
/* v-sea: 白起点はシェーダー側 white-head で生成(オーバーレイ廃止) */

/* grain on rounded deep boxes: clip noise to corner radius */
.texture-grain::after{border-radius:inherit}

/* ---------- soft world: no flat fills ---------- */
/* page: warm paper + faint film grain (below fixed chrome) */
body.mi{background:#FDFDFC}
body.mi::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:92;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E")}
.toc{background:transparent}
/* deep boxes: gentle gradient instead of solid, grain as additive speckle (screen) like the shader */
.keybox,.watch,.author{background:linear-gradient(160deg,#1D4A80 0%,#123B75 52%,#10365F 100%)}
.keybox.texture-grain::after,.watch.texture-grain::after,.author.texture-grain::after,.sonar-card.texture-grain::after,.cta.texture-grain::after{mix-blend-mode:screen;opacity:.18}
/* equation terms / four layers: soft gradient steps */
.eq .term:nth-child(1){background:linear-gradient(155deg,#1A4478,#123B75)}
.eq .term:nth-child(3){background:linear-gradient(155deg,#24528A,#1D4A80)}
.eq .term:nth-child(5){background:linear-gradient(155deg,#32649B,#2A5B8F)}
.layer:nth-child(1) .lh{background:linear-gradient(150deg,#1A4478,#123B75)}
.layer:nth-child(2) .lh{background:linear-gradient(150deg,#265489,#1D4A80)}
.layer:nth-child(3) .lh{background:linear-gradient(150deg,#2F5D90,#265487)}
.layer:nth-child(4) .lh{background:linear-gradient(150deg,#3D6C99,#34648F)}
/* mid-cards: same treatment as stat tiles */
.midc{background:#fff;border:var(--border-card)}
/* expanding one case must not stretch its siblings */
.cases{align-items:start}
/* case cards: color moved from top border into a filled chip */
.case{border-top:var(--border-card)}
.case-chip{background:var(--c);border-color:var(--c);color:#fff}
.case-chip .dot{background:#fff}
.case:nth-child(2){--c:var(--coral-500)}
.case:nth-child(2) .case-chip{color:#fff}
.case:nth-child(2) .case-chip .dot{background:#fff}
.case:nth-child(3){--c:var(--deep-600)}
/* stat tiles: airy white + light sea border (was sunken neutral wash) */
.stat{background:#fff;border:1px solid #B9D8E6}
.stat.alert{border-color:var(--coral-300)}
.stat.alert .v{color:oklch(64% 0.125 38)} /* 珊瑚系を一段明るく(coral-700は沈む) */
/* coarser grain so the speckle reads at reading distance */
.keybox.texture-grain::after,.watch.texture-grain::after,.author.texture-grain::after,.sonar-card.texture-grain::after,.cta.texture-grain::after,body.mi::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E")}
@media print{body.mi::after{display:none}}

/* pull quote: wave shader background */
.cta .cta-sea{position:absolute;inset:0;z-index:0}
.pull .q-card .q-sea{position:absolute;inset:0;z-index:0}