/* Five systems: porcelain, instruments, paper, sea glass, architectural copper. */
html[data-design] {--card-radius:22px;--chrome-radius:24px;--control-radius:12px;--sheet-radius:28px;--card-shadow:0 4px 18px #25334d06;--chrome-depth:0 8px 30px #25334d0c;--glass-sheet:color-mix(in srgb,var(--surface) 92%,transparent);--glass-chrome:color-mix(in srgb,var(--surface) 78%,transparent);--glass-control:color-mix(in srgb,var(--surface) 86%,transparent);--glass-inset:color-mix(in srgb,var(--surface-alt) 75%,transparent);--glass-rim:color-mix(in srgb,var(--surface) 78%,var(--line));--glass-line:var(--line);--v4-sheet:var(--glass-sheet);--v4-chrome:var(--glass-chrome);--v4-radius:var(--card-radius);--canvas-ink:var(--text);--canvas-muted:var(--muted)}
html[data-design="lumen"][data-theme="light"] {--bg:#f3f5f8;--bg-tint:#e8eef5;--surface:#fff;--surface-alt:#f4f6f9;--surface-hover:#eaf0f7;--text:#202831;--muted:#626e7c;--subtle:#6e7986;--line:#dfe5ec;--accent:#2463c7;--accent-soft:#e7f0fd;--accent-text:#2158ac;--on-accent:#fff;--glass-shadow:#20375312}
html[data-design="lumen"][data-theme="dark"] {--bg:#101721;--bg-tint:#192635;--surface:#1b2634;--surface-alt:#223041;--surface-hover:#2a3b4e;--text:#eff5fc;--muted:#b0bfce;--subtle:#9baebe;--line:#36475a;--accent:#a2cbff;--accent-soft:#293f5b;--accent-text:#b4d6ff;--on-accent:#14283e;--glass-shadow:#0004}
html[data-design="nocturne"] {--card-radius:12px;--chrome-radius:16px;--control-radius:8px;--sheet-radius:20px;--card-shadow:none;--chrome-depth:0 8px 28px #00000012}
html[data-design="nocturne"][data-theme="dark"] {--bg:#101113;--bg-tint:#191b1f;--surface:#1b1d21;--surface-alt:#23262b;--surface-hover:#2d3138;--text:#f2f3f5;--muted:#b0b5bf;--subtle:#939ba7;--line:#363a42;--accent:#dce5f3;--accent-soft:#303846;--accent-text:#e0e9f8;--on-accent:#171d27;--glass-shadow:#0005}
html[data-design="nocturne"][data-theme="light"] {--bg:#eff0f2;--bg-tint:#e4e7eb;--surface:#fafbfc;--surface-alt:#eceef2;--surface-hover:#e1e5eb;--text:#22262d;--muted:#5b6370;--subtle:#6b7480;--line:#d0d6df;--accent:#283344;--accent-soft:#e0e5ed;--accent-text:#27354b;--on-accent:#fff;--glass-shadow:#17202c13}
html[data-design="folio"] {--card-radius:8px;--chrome-radius:14px;--control-radius:7px;--sheet-radius:18px;--card-shadow:none;--chrome-depth:0 6px 24px #453c2510}
html[data-design="folio"][data-theme="light"] {--bg:#f2efe7;--bg-tint:#e9e2d6;--surface:#fdfbf6;--surface-alt:#eee9de;--surface-hover:#e8e1d4;--text:#38342b;--muted:#716959;--subtle:#7c7262;--line:#d9d1c3;--accent:#726041;--accent-soft:#eae1d0;--accent-text:#615030;--on-accent:#fff;--glass-shadow:#51422b12}
html[data-design="folio"][data-theme="dark"] {--bg:#211f1b;--bg-tint:#302b24;--surface:#2c2924;--surface-alt:#373129;--surface-hover:#41392f;--text:#eee7d9;--muted:#c4b9a5;--subtle:#b4a58e;--line:#4d4438;--accent:#dbca9e;--accent-soft:#483e2b;--accent-text:#e3d4b0;--on-accent:#312819;--glass-shadow:#0003}
html[data-design="coast"] {--card-radius:25px;--chrome-radius:28px;--control-radius:16px;--sheet-radius:28px;--card-shadow:0 5px 20px #164d4c09;--chrome-depth:0 8px 32px #154e4a12}
html[data-design="coast"][data-theme="light"] {--bg:#eaf2f1;--bg-tint:#cfe3e0;--surface:#fbfefd;--surface-alt:#eaf3f1;--surface-hover:#deece8;--text:#243c3c;--muted:#5b7574;--subtle:#647c7a;--line:#cbded9;--accent:#2a736c;--accent-soft:#dceee8;--accent-text:#25685f;--on-accent:#fff;--glass-shadow:#153c3b18}
html[data-design="coast"][data-theme="dark"] {--bg:#102326;--bg-tint:#1b3e41;--surface:#1b3337;--surface-alt:#244146;--surface-hover:#2e4f54;--text:#e7f4ee;--muted:#afc8c4;--subtle:#94b6b2;--line:#39595d;--accent:#a1dcca;--accent-soft:#2c4e48;--accent-text:#b4e9d9;--on-accent:#173c35;--glass-shadow:#0004}
html[data-design="ember"] {--card-radius:16px;--chrome-radius:18px;--control-radius:10px;--sheet-radius:22px;--card-shadow:0 6px 24px #0000000b;--chrome-depth:0 12px 36px #00000020}
html[data-design="ember"][data-theme="dark"] {--bg:#1a1716;--bg-tint:#342720;--surface:#292321;--surface-alt:#342c29;--surface-hover:#40352f;--text:#f4ece5;--muted:#c2b3a8;--subtle:#b09d8f;--line:#4b3e35;--accent:#e4ad85;--accent-soft:#49362a;--accent-text:#f1c3a1;--on-accent:#332317;--glass-shadow:#0004}
html[data-design="ember"][data-theme="light"] {--bg:#f3eeea;--bg-tint:#e8d8c9;--surface:#fffaf6;--surface-alt:#f3e8e0;--surface-hover:#ebded2;--text:#3c2c24;--muted:#7b6558;--subtle:#856e60;--line:#dfcdbf;--accent:#9b582f;--accent-soft:#f0ded0;--accent-text:#874921;--on-accent:#fff;--glass-shadow:#5b351c18}

/* Collection II: each has its own material, typographic and component grammar.
   Existing five systems above remain unchanged. All artwork is offline CSS. */
html[data-design="titanium"] {--card-radius:18px;--chrome-radius:22px;--control-radius:10px;--sheet-radius:24px;--card-shadow:0 2px 3px #141e2b06,0 12px 26px #141e2b08;--chrome-depth:0 10px 32px #24313e18}
html[data-design="titanium"][data-theme="light"] {--bg:#e9ecef;--bg-tint:#d6dce2;--surface:#fcfdfd;--surface-alt:#edf0f3;--surface-hover:#e0e6eb;--text:#242d37;--muted:#5e6975;--subtle:#6b7782;--line:#cbd3da;--accent:#384f66;--accent-soft:#e2eaf2;--accent-text:#30475e;--on-accent:#fff;--glass-shadow:#1b283b1c}
html[data-design="titanium"][data-theme="dark"] {--bg:#171c22;--bg-tint:#2b343f;--surface:#242c35;--surface-alt:#2e3945;--surface-hover:#3b4855;--text:#f0f4f8;--muted:#b4c0cc;--subtle:#9dabb9;--line:#44515f;--accent:#c1d4e7;--accent-soft:#374b60;--accent-text:#cedfef;--on-accent:#182a3c;--glass-shadow:#0005}
html[data-design="maison"] {--card-radius:3px;--chrome-radius:8px;--control-radius:4px;--sheet-radius:12px;--card-shadow:none;--chrome-depth:0 12px 40px #0002}
html[data-design="maison"][data-theme="dark"] {--bg:#171716;--bg-tint:#242320;--surface:#242421;--surface-alt:#2c2c27;--surface-hover:#373730;--text:#f0eddf;--muted:#bbb7a6;--subtle:#aba58f;--line:#44433a;--accent:#d0c397;--accent-soft:#3a372b;--accent-text:#dfd3ac;--on-accent:#252318;--glass-shadow:#0005}
html[data-design="maison"][data-theme="light"] {--bg:#eeece4;--bg-tint:#e3dfd0;--surface:#faf8f0;--surface-alt:#eae6d9;--surface-hover:#e1dcca;--text:#2d3029;--muted:#686956;--subtle:#767563;--line:#ccc9b8;--accent:#666344;--accent-soft:#e6e2cb;--accent-text:#575638;--on-accent:#fff;--glass-shadow:#34342318}
html[data-design="gallery"] {--card-radius:5px;--chrome-radius:7px;--control-radius:5px;--sheet-radius:12px;--card-shadow:3px 3px 0 color-mix(in srgb,var(--accent) 7%,transparent);--chrome-depth:none}
html[data-design="gallery"][data-theme="light"] {--bg:#f5f5f2;--bg-tint:#e6ebfa;--surface:#fff;--surface-alt:#eff1f5;--surface-hover:#e5ebfa;--text:#1b2336;--muted:#5d667a;--subtle:#6b7487;--line:#d4dae5;--accent:#254fce;--accent-soft:#e6edff;--accent-text:#2348b9;--on-accent:#fff;--glass-shadow:#193b8014}
html[data-design="gallery"][data-theme="dark"] {--bg:#141a29;--bg-tint:#202c46;--surface:#20293a;--surface-alt:#283449;--surface-hover:#34435b;--text:#f3f5fc;--muted:#b4bfd2;--subtle:#a0adc6;--line:#40506b;--accent:#afc5ff;--accent-soft:#304771;--accent-text:#c0d2ff;--on-accent:#152957;--glass-shadow:#0004}
html[data-design="grove"] {--card-radius:18px;--chrome-radius:20px;--control-radius:9px;--sheet-radius:22px;--card-shadow:0 3px 14px #263b2808;--chrome-depth:0 10px 30px #19302112}
html[data-design="grove"][data-theme="light"] {--bg:#f0f0e8;--bg-tint:#dce3d1;--surface:#fbfcf7;--surface-alt:#e9eee2;--surface-hover:#dfe7d6;--text:#2c3a2e;--muted:#64715e;--subtle:#717b67;--line:#d1d9c8;--accent:#436348;--accent-soft:#e0e9d8;--accent-text:#37553b;--on-accent:#fff;--glass-shadow:#213e2517}
html[data-design="grove"][data-theme="dark"] {--bg:#15221c;--bg-tint:#253a2b;--surface:#23352b;--surface-alt:#2d4233;--surface-hover:#3a5140;--text:#eff2df;--muted:#b6c4a9;--subtle:#a3b79a;--line:#405743;--accent:#c0d3a8;--accent-soft:#3a5038;--accent-text:#d2e1bd;--on-accent:#233722;--glass-shadow:#0004}
html[data-design="abyss"] {--card-radius:14px;--chrome-radius:18px;--control-radius:7px;--sheet-radius:20px;--card-shadow:0 8px 22px #0002,inset 0 1px 0 color-mix(in srgb,var(--accent) 7%,transparent);--chrome-depth:0 12px 40px #0003}
html[data-design="abyss"][data-theme="dark"] {--bg:#0b1722;--bg-tint:#112e3d;--surface:#132632;--surface-alt:#1a3240;--surface-hover:#244454;--text:#e7f4f6;--muted:#a1bdc7;--subtle:#8faeba;--line:#2c4a59;--accent:#91dce6;--accent-soft:#203e4a;--accent-text:#a8e7ee;--on-accent:#0e303b;--glass-shadow:#0006}
html[data-design="abyss"][data-theme="light"] {--bg:#e8f0f2;--bg-tint:#cfe4e9;--surface:#f9fdfe;--surface-alt:#e1edf0;--surface-hover:#d3e6eb;--text:#233e4c;--muted:#546f7c;--subtle:#637c88;--line:#bfd3dc;--accent:#22697b;--accent-soft:#d7ecf1;--accent-text:#205d71;--on-accent:#fff;--glass-shadow:#21455218}

/* Background choices remain independent of the selected material system. */
html[data-design][data-theme="light"][data-background="blue"] {--bg:#eaf1f8;--bg-tint:#d7e7f6}
html[data-design][data-theme="light"][data-background="mint"] {--bg:#edf4f0;--bg-tint:#dcebe2}
html[data-design][data-theme="light"][data-background="rose"] {--bg:#f5edef;--bg-tint:#efdee6}
html[data-design][data-theme="light"][data-background="sand"] {--bg:#f4f0e8;--bg-tint:#eae2d3}
html[data-design][data-theme="dark"][data-background="blue"] {--bg:#101c29;--bg-tint:#17324b}
html[data-design][data-theme="dark"][data-background="mint"] {--bg:#101e1c;--bg-tint:#18372e}
html[data-design][data-theme="dark"][data-background="rose"] {--bg:#231720;--bg-tint:#432a3a}
html[data-design][data-theme="dark"][data-background="sand"] {--bg:#211d17;--bg-tint:#3c3427}

/* Crimson is the launch identity; readable surfaces stay neutral. */
html[data-design="crimson"][data-theme="dark"]{--bg:#09090b;--bg-tint:#1d0d11;--surface:#171719;--surface-alt:#202023;--surface-hover:#292326;--text:#f5f2f3;--muted:#b3a9ad;--subtle:#9b9096;--line:#383033;--accent:#e50914;--accent-soft:#341419;--accent-text:#ff858c;--on-accent:#fff;--danger:#ff9a9f;--glass-shadow:#0006;--chrome-depth:0 12px 36px #0004}
html[data-design="crimson"][data-theme="light"]{--bg:#f5f0f1;--bg-tint:#f2dfe2;--surface:#fffafb;--surface-alt:#f2e9ec;--surface-hover:#ecdce1;--text:#27191d;--muted:#756169;--subtle:#816d75;--line:#dfcbd1;--accent:#c80812;--accent-soft:#fbe4e7;--accent-text:#b00710;--on-accent:#fff;--danger:#b00710;--glass-shadow:#3c10151c}
html[data-design="crimson"] body{background:var(--bg)}
html[data-design="crimson"] .os-hero{background:radial-gradient(ellipse at 50% 60%,#e5091417,transparent 65%),#060607;border-color:#52212a;box-shadow:inset 0 1px 0 #ffffff08}
html[data-design="crimson"] .os-hero h1{color:#f32631;text-shadow:0 2px 20px #e5091418;font-weight:750}
html[data-design="crimson"] .hero-voice{color:#ff858c;border-color:#6d2631;background:#211014}
html[data-design="crimson"] .side-nav button.active{color:var(--accent-text);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
html[data-design="crimson"] .auto-card{border-top:2px solid color-mix(in srgb,var(--accent) 36%,var(--line))}
html[data-design="crimson"] .brand-mark,html[data-design="crimson"] .side-identity .brand-mark{color:var(--accent-text);background:var(--accent-soft)}
.design-sample.crimson{background:#09090b;--surface:#1d1719;--line:#52212a;--accent:#e50914;--text:#f32631}
.design-sample.crimson .sample-hero{background:repeating-linear-gradient(32deg,transparent 0 20px,#e509143a 21px 22px,transparent 23px 42px),#070708;color:#f32631}
/* Consistent reading surfaces; material differences belong to chrome and hierarchy. */
html[data-design] :is(.auto-card,.trend-card,.project-card,.resource-row,.task-day,.quick-notes-list,.empty-state,.run-sheet,.script-note,.learning-list>article,.review-list>article,.task-calendar) {border-radius:var(--card-radius);background:var(--surface);border-color:var(--line);box-shadow:var(--card-shadow)}
html[data-design] :is(.topbar,.side-drawer,.bottom-nav.liquid-dock) {background:var(--glass-chrome);border:1px solid var(--glass-rim);border-radius:var(--chrome-radius);box-shadow:var(--chrome-depth),inset 0 1px 0 color-mix(in srgb,var(--surface) 75%,transparent);backdrop-filter:blur(22px) saturate(1.12);-webkit-backdrop-filter:blur(22px) saturate(1.12)}
html[data-design] .topbar::after {display:none}
html[data-design] :is(.new-button,.date-button,.manual-form>button[type="submit"],.solid-button,.restore-confirm) {border-radius:var(--control-radius);color:var(--on-accent);font-weight:600}
html[data-design] :is(.round-action,.manual-form .form-submit,.calendar-view-switch button[aria-pressed="true"],.calendar-day.is-selected .calendar-day-number,.week-day-select.is-selected b) {color:var(--on-accent)}
html[data-design] :is(.brand b,.side-identity b) {font-weight:650;letter-spacing:-.025em}
html[data-design] .auto-card strong {font-variant-numeric:tabular-nums;font-weight:550}
html[data-design] .side-nav b {font-weight:550}
html[data-design] :is(.page-title h1,.home-greeting h2) {font-weight:600}
html[data-design] .liquid-dock .liquid-indicator {background:var(--surface);box-shadow:0 3px 12px var(--glass-shadow);border:1px solid var(--glass-rim);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design] .calendar-day-number {font-weight:500;font-variant-numeric:tabular-nums;flex-shrink:0}
html[data-design] .calendar-day.is-today:not(.is-selected) .calendar-day-number {color:white}
html[data-design] .calendar-month-actions {flex-shrink:0;gap:5px}
html[data-design] .calendar-month-actions button {min-width:40px;min-height:44px}

html[data-design="lumen"] body {background:radial-gradient(ellipse at 85% 0%,var(--bg-tint),transparent 55%),var(--bg);background-attachment:fixed}
html[data-design="lumen"] .os-hero {background:radial-gradient(ellipse at 75% 0%,var(--accent-soft),transparent 65%),linear-gradient(135deg,var(--surface),var(--bg));border-color:var(--glass-rim);box-shadow:inset 0 1px 0 var(--surface),0 8px 32px var(--glass-shadow)}
html[data-design="lumen"] .side-nav button.active {background:var(--surface);box-shadow:0 3px 14px var(--glass-shadow);color:var(--accent-text)}
html[data-design="lumen"] .auto-card {border-top:2px solid color-mix(in srgb,var(--accent) 20%,var(--surface))}
html[data-design="nocturne"] body {background:var(--bg)}
html[data-design="nocturne"] .os-hero {background:linear-gradient(125deg,var(--surface-hover),var(--surface) 40%,var(--bg));border:1px solid var(--line);border-radius:16px}
html[data-design="nocturne"] .os-hero h1 {font-weight:500;letter-spacing:-.06em}
html[data-design="nocturne"] :is(.auto-card strong,.radar-summary b,.system-now time,.calendar-toolbar h3) {font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.045em}
html[data-design="nocturne"] .side-nav button.active {background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
html[data-design="nocturne"] .auto-card {border-bottom:2px solid var(--line)}
html[data-design="nocturne"] .file-glyph {border-radius:7px;background:transparent;border:1px solid var(--line)}
html[data-design="folio"] body {background:repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--line) 11%,transparent) 3px 4px),var(--bg)}
html[data-design="folio"] :is(.os-hero h1,.page-title h1,.home-greeting h2) {font-family:"New York","Iowan Old Style","Songti SC",Georgia,serif;font-weight:500;letter-spacing:-.04em}
html[data-design="folio"] .os-hero {background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
html[data-design="folio"] .auto-card {background:transparent;border:0;border-left:1px solid var(--line);border-radius:0;box-shadow:none}
html[data-design="folio"] .auto-card strong {font-family:"Iowan Old Style",Georgia,serif;font-weight:400}
html[data-design="folio"] .side-nav button.active {background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
html[data-design="folio"] .product-scout-list[data-view="list"] {gap:0;background:var(--surface);border-block:1px solid var(--line);padding:0 16px}
html[data-design="folio"] .product-scout-list[data-view="list"] .resource-row {border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
html[data-design="folio"] .product-scout-list[data-view="list"] .resource-row:last-child {border-bottom:0}
html[data-design="coast"] body {background:radial-gradient(ellipse at 0 0,var(--bg-tint),transparent 70%),var(--bg);background-attachment:fixed}
html[data-design="coast"] .os-hero {background:repeating-radial-gradient(ellipse at 90% 140%,transparent 0 46px,color-mix(in srgb,var(--accent) 12%,transparent) 47px 48px,transparent 49px 80px),linear-gradient(135deg,var(--surface),var(--bg-tint));border-color:var(--glass-rim);border-radius:32px}
html[data-design="coast"] .os-hero h1 {font-weight:500;letter-spacing:-.055em}
html[data-design="coast"] .side-nav button {border-radius:24px}
html[data-design="coast"] .side-nav button.active {background:var(--accent);color:var(--on-accent)}
html[data-design="coast"] .file-glyph {border-radius:16px;background:var(--accent-soft)}
html[data-design="ember"] body {background:linear-gradient(118deg,var(--bg-tint),var(--bg) 44%);background-attachment:fixed}
html[data-design="ember"] .os-hero {background:linear-gradient(115deg,transparent 48%,color-mix(in srgb,var(--accent) 9%,transparent) 48.2%,transparent 76%),linear-gradient(145deg,var(--surface-hover),var(--surface) 55%,var(--bg));border:1px solid var(--line);border-radius:18px}
html[data-design="ember"] .os-hero h1 {font-weight:550;letter-spacing:-.045em}
html[data-design="ember"] .auto-card {border-top:2px solid color-mix(in srgb,var(--accent) 38%,var(--line))}
html[data-design="ember"] .side-nav button.active {background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}

/* Silver: machined edges, satin surfaces and a sculptural metal ribbon. */
html[data-design="titanium"] body {background:linear-gradient(130deg,var(--bg-tint),var(--bg) 55%);background-attachment:fixed}
html[data-design="titanium"] .topbar.topbar {background:linear-gradient(165deg,var(--surface),var(--surface-alt));border-color:var(--line);box-shadow:inset 0 1px 0 var(--surface),var(--chrome-depth)}
html[data-design="titanium"] .os-hero {background:linear-gradient(150deg,var(--surface-alt),var(--bg-tint));border:1px solid var(--line);border-radius:22px;box-shadow:inset 0 1px 0 var(--surface)}
html[data-design="titanium"] .os-hero::before {content:'';position:absolute;width:64%;height:260%;left:18%;top:-80%;border-radius:50%;transform:rotate(30deg);background:linear-gradient(95deg,transparent 25%,#7b8b9928 37%,#ffffffa6 44%,#71839648 47%,transparent 53%,#ffffff80 59%,#65768426 63%,transparent 73%);pointer-events:none}
html[data-design="titanium"] .os-hero h1 {font-weight:500;letter-spacing:-.065em;text-shadow:0 1px 0 var(--surface)}
html[data-design="titanium"] .auto-grid .auto-card {background:linear-gradient(150deg,var(--surface),var(--surface-alt));border-color:var(--line);box-shadow:inset 0 1px 0 var(--surface),var(--card-shadow)}
html[data-design="titanium"] .auto-card strong {font-weight:350;letter-spacing:-.06em}
html[data-design="titanium"] .side-nav button.active {background:linear-gradient(var(--surface),var(--surface-alt));box-shadow:0 2px 5px var(--glass-shadow),inset 0 0 0 1px var(--line);color:var(--accent-text)}
html[data-design="titanium"] .file-glyph {border-radius:10px;border:1px solid var(--line);background:linear-gradient(135deg,var(--surface),var(--surface-alt));box-shadow:inset 0 1px 0 var(--surface)}
/* Maison: editorial serif, hairline champagne frames, no luminous gradients. */
html[data-design="maison"] body {background:var(--bg)}
html[data-design="maison"] :is(.os-hero h1,.page-title h1,.home-greeting h2,.auto-card strong) {font-family:"Iowan Old Style","Songti SC",Georgia,serif;font-weight:400;letter-spacing:-.035em}
html[data-design="maison"] .os-hero {background:var(--surface);border:1px solid var(--line);border-radius:3px;box-shadow:none}
html[data-design="maison"] .os-hero::before {content:'';position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);pointer-events:none}
html[data-design="maison"] .os-hero::after {content:'';position:absolute;inset:30px 28%;border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);border-radius:50% 50% 0 0;pointer-events:none}
html[data-design="maison"] .auto-grid .auto-card {background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
html[data-design="maison"] .auto-card strong {color:var(--accent-text)}
html[data-design="maison"] .side-nav button {border-radius:3px}
html[data-design="maison"] .side-nav button.active {background:transparent;color:var(--accent-text);box-shadow:inset 2px 0 var(--accent)}
html[data-design="maison"] .file-glyph {background:transparent;border:1px solid var(--accent);border-radius:0;font-family:Georgia,serif;letter-spacing:.06em}
html[data-design="maison"] .dialog-header {border-bottom:1px solid var(--accent)}
html[data-design="maison"] #dialog-title {font-family:"Iowan Old Style","Songti SC",Georgia,serif}
/* Gallery: white exhibition walls, cobalt punctuation, precise rectangular geometry. */
html[data-design="gallery"] body {background:var(--bg)}
html[data-design="gallery"] .topbar.topbar {background:var(--surface);border:0;border-bottom:2px solid var(--accent);box-shadow:none}
html[data-design="gallery"] .os-hero {background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:4px;box-shadow:none}
html[data-design="gallery"] .os-hero::before {content:'';position:absolute;width:210px;height:210px;right:-70px;top:-100px;border:36px solid var(--accent);border-radius:50%;opacity:.85;pointer-events:none}
html[data-design="gallery"] .os-hero::after {content:'';position:absolute;width:130px;height:130px;left:-76px;bottom:-68px;background:var(--accent);transform:rotate(35deg);opacity:.85;pointer-events:none}
html[data-design="gallery"] .os-hero h1 {font-weight:650;letter-spacing:-.075em;color:var(--accent-text)}
html[data-design="gallery"] .auto-grid .auto-card {border-radius:4px;border-top:3px solid var(--accent);box-shadow:3px 3px 0 var(--accent-soft)}
html[data-design="gallery"] .auto-card strong {font-weight:650;letter-spacing:-.05em}
html[data-design="gallery"] .side-nav button {border-radius:4px}
html[data-design="gallery"] .side-nav button.active {background:var(--accent);color:var(--on-accent);box-shadow:4px 0 0 var(--accent-soft)}
html[data-design="gallery"] .file-glyph {background:var(--accent);color:var(--on-accent);border-radius:3px}
html[data-design="gallery"] .dialog-header {border-bottom:3px solid var(--accent)}
/* Grove: a forest navigation spine and warm, quiet reading surfaces. */
html[data-design="grove"] body {background:radial-gradient(ellipse at 100% 0,var(--bg-tint),transparent 65%),var(--bg);background-attachment:fixed}
html[data-design="grove"] #side-drawer {background:#203e30;color:#f1f2e4;--text:#f1f2e4;--muted:#c0cdb6;--subtle:#b3c4aa;--line:#47614f;--surface:#294a38;--surface-alt:#325840;--surface-hover:#3b5d45;--accent-soft:#3b5d45;--accent-text:#e3eccf;--accent:#d4e0ba;border-color:#54705b;box-shadow:inset 0 1px 0 #ffffff18,var(--chrome-depth)}
html[data-design="grove"] .side-nav button.active {background:var(--accent-soft);color:var(--accent-text);border-radius:7px 22px 22px 7px;box-shadow:inset 3px 0 0 var(--accent)}
html[data-design="grove"] .os-hero {background:var(--surface-alt);border:1px solid var(--line);border-radius:22px 22px 70px 22px;box-shadow:none}
html[data-design="grove"] .os-hero::before {content:'';position:absolute;right:5%;top:24px;width:160px;height:240px;border-radius:100px 100px 0 0;background:repeating-linear-gradient(90deg,transparent 0 13px,color-mix(in srgb,var(--accent) 9%,transparent) 14px 15px),linear-gradient(135deg,var(--bg-tint),var(--accent-soft));transform:rotate(18deg);pointer-events:none}
html[data-design="grove"] :is(.os-hero h1,.page-title h1) {font-family:"Iowan Old Style","Songti SC",Georgia,serif;font-weight:500;letter-spacing:-.035em}
html[data-design="grove"] .auto-grid .auto-card {border-radius:16px 16px 30px 16px;border-bottom:2px solid var(--line)}
html[data-design="grove"] .auto-card strong {font-family:"Iowan Old Style",Georgia,serif;font-weight:400}
html[data-design="grove"] .file-glyph {border-radius:10px 10px 20px 10px;background:var(--accent-soft);border:1px solid var(--line)}
html[data-design="grove"] .dialog-header {background:var(--surface-alt)}
/* Abyss: recessed instruments, fine edge light and a quiet sonar field. */
html[data-design="abyss"] body {background:radial-gradient(ellipse at 75% 0,var(--bg-tint),transparent 65%),var(--bg);background-attachment:fixed}
html[data-design="abyss"] .topbar.topbar {border-bottom:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));background:var(--glass-chrome)}
html[data-design="abyss"] .os-hero {background:radial-gradient(ellipse at 85% 70%,var(--accent-soft),transparent 65%),linear-gradient(var(--surface),var(--bg));border:1px solid var(--line);border-radius:16px;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent) 30%,transparent)}
html[data-design="abyss"] .os-hero::before {content:'';position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--accent) 5%,transparent) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
html[data-design="abyss"] .os-hero::after {content:'';position:absolute;width:290px;height:290px;border-radius:50%;right:-50px;top:-35px;background:repeating-radial-gradient(circle,transparent 0 29px,color-mix(in srgb,var(--accent) 16%,transparent) 30px 31px,transparent 32px 50px);pointer-events:none}
html[data-design="abyss"] .os-hero h1 {font-weight:450;letter-spacing:-.07em}
html[data-design="abyss"] .auto-grid .auto-card {background:linear-gradient(140deg,var(--surface),var(--surface-alt));border-left:2px solid color-mix(in srgb,var(--accent) 65%,var(--line));box-shadow:inset 0 1px 0 #ffffff08,var(--card-shadow)}
html[data-design="abyss"] :is(.auto-card strong,.calendar-toolbar h3) {font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-weight:400;letter-spacing:-.055em}
html[data-design="abyss"] .side-nav button.active {background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 var(--accent);color:var(--accent-text);border-radius:7px}
html[data-design="abyss"] .file-glyph {background:transparent;border:1px solid var(--line);border-radius:7px;box-shadow:inset 0 0 0 3px var(--surface-alt)}
html[data-design="abyss"] .dialog-header {border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,var(--line))}

/* One permanent header for every editor and detail panel. Only the body scrolls. */
html[data-design] #content-dialog {padding:0;width:min(760px,calc(100vw - 24px));max-width:none;max-height:calc(100svh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:hidden;border-radius:var(--sheet-radius);background:var(--glass-sheet);border:1px solid var(--glass-rim);box-shadow:0 28px 80px #10182430;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);margin:auto}
html[data-design] #content-dialog[open] {display:flex;flex-direction:column}
html[data-design] #content-dialog:has(.appearance-workspace) {width:min(980px,calc(100vw - 24px))}
html[data-design] #content-dialog::after,html[data-design] #content-dialog::before {display:none}
.dialog-header {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 26px 20px;flex:0 0 auto;background:var(--surface);border-bottom:1px solid var(--line);z-index:2}
.dialog-heading {min-width:0;flex:1}
#content-dialog #dialog-kicker {margin:0 0 6px;padding:0;font-size:11px;line-height:1.4;letter-spacing:.04em;color:var(--muted);max-height:3em;overflow:hidden}
#content-dialog #dialog-title {margin:0;padding:0;font-size:25px;font-weight:600;letter-spacing:-.035em;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#content-dialog .dialog-close {position:static;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;margin:-2px -4px 0 0;padding:0;border-radius:50%;background:var(--surface-alt);color:var(--muted);border:1px solid var(--line);font-size:28px;font-weight:400;line-height:1;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:none}
#content-dialog .dialog-close:focus:not(:focus-visible) {outline:none}
#content-dialog .dialog-close:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
#content-dialog #dialog-body {min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding:24px 26px 28px;scroll-padding:16px}
#content-dialog #dialog-body.appearance-workspace {min-height:0}
#content-dialog .manual-form {gap:18px}
#content-dialog :is(.manual-form input,.manual-form textarea,.manual-form select) {border-radius:var(--control-radius);border:1px solid var(--line);background:var(--glass-control);box-shadow:none;min-height:46px}
#content-dialog .manual-form label {font-size:14px;font-weight:500}
#content-dialog :is(.media-upload,.detail-section,.project-relation-section,.appearance-setting) {background:var(--glass-inset);border-radius:var(--control-radius);border-color:var(--line)}
#content-dialog .manual-form>button[type="submit"] {min-height:48px}

/* A miniature workspace preview shows each material and hierarchy. */
.design-choices {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.design-choice {position:relative;min-width:0;text-align:left;padding:7px 7px 16px;border:1px solid var(--line);border-radius:17px;background:var(--surface);color:var(--text);box-shadow:none;transition:border-color 130ms ease,box-shadow 130ms ease}
.design-choice[aria-pressed="true"] {border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.design-choice .design-name {display:block;margin:13px 9px 3px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.design-choice .design-kind {display:block;margin:0 9px;font-size:12px;line-height:1.4;color:var(--muted)}
.theme-check {display:none;position:absolute;right:14px;bottom:34px;font-size:13px;color:var(--accent-text)}
.design-choice[aria-pressed="true"] .theme-check {display:block}
.design-sample {position:relative;display:block;height:142px;border-radius:11px;overflow:hidden;--sample-canvas:#edf2f8;--sample-card:#fff;--sample-nav:#ffffffb8;--sample-hero:linear-gradient(135deg,#fff,#e4edfb);--sample-ink:#245da9;background:var(--sample-canvas)}
.design-sample i {position:absolute;display:block;border:1px solid #7f899520;border-radius:5px;background:var(--sample-card)}
.design-sample .sample-sidebar {inset:9px auto 9px 9px;width:22%;background:var(--sample-nav)}
.sample-sidebar::before {content:'';position:absolute;left:5px;right:5px;top:27px;height:7px;border-radius:3px;background:var(--sample-ink);opacity:.7;box-shadow:0 15px 0 #8993a32b,0 30px 0 #8993a32b,0 45px 0 #8993a32b}
.design-sample .sample-topbar {left:36%;right:9px;top:9px;height:15px;background:var(--sample-nav)}
.design-sample .sample-hero {left:36%;right:9px;top:32px;height:55px;background:var(--sample-hero);display:grid;place-items:center}
.design-sample .sample-hero b {position:static;font:600 13px/1 system-ui,sans-serif;letter-spacing:-.06em;color:var(--sample-ink)}
.design-sample .sample-card {top:96px;bottom:10px;width:25%}.design-sample .sample-card.one {left:36%}.design-sample .sample-card.two {right:9px}
.design-sample .sample-card::after {content:'';position:absolute;top:9px;left:7px;width:34%;height:4px;background:var(--sample-ink);opacity:.35;box-shadow:0 8px 0 #8993a33a}
.design-sample.nocturne {--sample-canvas:#101113;--sample-card:#23262b;--sample-nav:#1b1d21;--sample-hero:linear-gradient(120deg,#34383f,#191b20);--sample-ink:#dce5f3}.design-sample.nocturne i {border-radius:3px;border-color:#ffffff1c}.design-sample.nocturne .sample-hero b {font-family:ui-monospace,monospace;font-weight:400}
.design-sample.folio {--sample-canvas:#eee8dd;--sample-card:#fdfbf6;--sample-nav:#f6f1e7;--sample-hero:#eee8dd;--sample-ink:#726041}.design-sample.folio i {border-radius:1px;border-color:#72604128}.design-sample.folio .sample-hero {border-width:1px 0}.design-sample.folio .sample-hero b {font-family:Georgia,serif;font-weight:400;font-size:14px}
.design-sample.coast {--sample-canvas:#dcebe6;--sample-card:#fbfefd;--sample-nav:#f3fbf8b0;--sample-ink:#2a736c;--sample-hero:repeating-radial-gradient(ellipse at 90% 130%,#ecf6f0 0 12px,#cbded5 13px,#ecf6f0 14px 22px)}.design-sample.coast i {border-radius:8px;border-color:#fff8}
.design-sample.ember {--sample-canvas:#211b18;--sample-card:#332923;--sample-nav:#2c231fcc;--sample-ink:#e4ad85;--sample-hero:linear-gradient(116deg,#403025 50%,#674932 50.5%,#2c231e 85%)}.design-sample.ember i {border-radius:4px;border-color:#e4ad852e}.design-sample.ember .sample-card {border-top:2px solid #af815e}
.design-sample.titanium {--sample-canvas:#dce2e8;--sample-card:linear-gradient(145deg,#fff,#e3e8ec);--sample-nav:linear-gradient(150deg,#fbfcfd,#d2dbe2);--sample-ink:#384f66;--sample-hero:linear-gradient(115deg,#d7e0e5 20%,#fff 41%,#a1afb9 44%,#eef3f7 60%,#c7d1d9)}.design-sample.titanium i {border-color:#aebcc966;box-shadow:inset 0 1px 0 #fff9}
.design-sample.maison {--sample-canvas:#171716;--sample-card:#242421;--sample-nav:#20201d;--sample-ink:#d0c397;--sample-hero:#242421}.design-sample.maison i {border-radius:0;border-color:#d0c39740}.design-sample.maison .sample-hero {outline:1px solid #d0c39740;outline-offset:-5px}.design-sample.maison .sample-hero b {font-family:Georgia,serif;font-weight:400}
.design-sample.gallery {--sample-canvas:#f3f4f6;--sample-card:#fff;--sample-nav:#fff;--sample-ink:#254fce;--sample-hero:radial-gradient(circle at 100% 0,#254fce 0 21%,transparent 22%),#fff}.design-sample.gallery i {border-radius:1px}.design-sample.gallery .sample-topbar {border-bottom:2px solid #254fce}.design-sample.gallery .sample-card {border-top:2px solid #254fce;box-shadow:2px 2px 0 #254fce18}
.design-sample.grove {--sample-canvas:#ecefe3;--sample-card:#fbfcf7;--sample-nav:#203e30;--sample-ink:#436348;--sample-hero:radial-gradient(ellipse at 100% 90%,#bacaaa 0 30%,transparent 31%),#e5ebda}.design-sample.grove .sample-sidebar::before {background:#cedbb7}.design-sample.grove .sample-topbar {background:#fbfcf7}.design-sample.grove .sample-hero {border-radius:5px 5px 22px 5px}.design-sample.grove .sample-hero b {font-family:Georgia,serif;font-weight:400}
.design-sample.abyss {--sample-canvas:#0b1722;--sample-card:#19303c;--sample-nav:#122632;--sample-ink:#91dce6;--sample-hero:repeating-radial-gradient(circle at 95% 60%,#142d3b 0 9px,#376473 10px,#142d3b 11px 19px)}.design-sample.abyss i {border-color:#91dce62b}.design-sample.abyss .sample-card {border-left:2px solid #91dce6}.design-sample.abyss .sample-hero b {font-family:ui-monospace,monospace;font-weight:400}
.design-gallery-head {margin-bottom:18px}.design-gallery-head h3 {font-size:16px;font-weight:600}
.appearance-toolbar {padding-bottom:24px}.appearance-tabs {border-radius:12px}.appearance-tabs button {font-size:14px}
.hero-effect-settings>summary {cursor:pointer;min-height:44px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px}
.hero-effect-settings>summary::-webkit-details-marker {display:none}
.hero-effect-settings .theme-choices {margin-top:12px}
@media (hover:hover) and (pointer:fine) {.design-choice:hover {border-color:var(--accent)}#content-dialog .dialog-close:hover {background:var(--surface-hover);color:var(--text)}}
@media(max-width:760px) {.design-choices {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.design-sample {height:124px}.appearance-toolbar {padding-bottom:18px}}
@media(max-width:560px) {
 html[data-design] #content-dialog {max-height:calc(100dvh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));width:calc(100vw - 20px)}
 .dialog-header {padding:17px 18px 15px;gap:12px;align-items:center}
 #content-dialog #dialog-title {font-size:22px}#content-dialog #dialog-kicker {font-size:11px;margin-bottom:4px}
 #content-dialog #dialog-body {padding:20px 18px calc(22px + env(safe-area-inset-bottom,0px))}
 #content-dialog .manual-form :is(input,textarea,select) {font-size:16px}
 .design-sample {height:113px}.design-sample .sample-hero {height:44px}.design-sample .sample-hero b {font-size:11px}.design-sample .sample-card {top:84px}.design-choice .design-kind {font-size:11px}
 .design-choice .design-name {font-size:15px;margin-left:5px}.design-choice .design-kind {margin-left:5px}.theme-check {right:10px}
 .appearance-tabs button {font-size:12px;padding:9px 6px}
 html[data-design] .calendar-toolbar {flex-wrap:wrap;gap:12px}
 html[data-design] .calendar-month-picker {min-width:0;max-width:none;flex:1}
 html[data-design] .calendar-toolbar h3 {font-size:17px}
}
@media(max-width:360px) {.design-sample .sample-hero b {font-size:9px}.design-choices {gap:8px}.design-choice .design-kind {font-size:11px;max-width:14ch}.calendar-toolbar .calendar-month-actions {width:100%;justify-content:flex-end}}
@media(prefers-reduced-motion:reduce) {.design-choice {transition:none}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {html[data-design] :is(#content-dialog,.topbar,.side-drawer,.bottom-nav.liquid-dock) {background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:var(--line)!important}}