/* theme-32 dye-transfer · cream hospital boxes · cool silver · Oz warmer */
/* form-field-fix-v1 + surface-v30 */
/* no-grid-photo-only-v3 silver-lite-1px */
/* f00 SHARED THEME — ONE CSS for ALL *.f00.sh websites
   Live: https://f00.sh/theme/f00-theme-32.css

   <link rel="stylesheet" href="https://f00.sh/theme/f00-theme-32.css" />

   Heartbox v0.3.0 (dye-transfer · In Utero hospital cream · Oz warmer)
   Website shell: dye-transfer poppy field + cool silver chrome
   Project cards: hospital cream paper · poppy Onyx type · 2px metal
   Project CSS = layout/structure only.

   Textures: https://f00.sh/theme/textures/
   build-s11 no-grid-photo-only full cover

   build-s8

*/

@font-face {
  font-family: "Onyx";
  src:
    url("https://f00.sh/assets/fonts/Onyx.woff2") format("woff2"),
    url("https://f00.sh/assets/fonts/Onyx.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --f00-bg: #090909;
  --f00-bg-elevated: #141011;
  --f00-bg-panel: #1c1617;
  --f00-bg-muted: #090909;
  --f00-fg: #ede6de;
  --f00-white: #D0D5DB;
  --f00-chrome: #D0D5DB;
  --f00-chrome-bright: #E4E8ED;
  --f00-chrome-soft: rgba(208, 213, 219, 0.92);
  --f00-chrome-line: rgba(208, 213, 219, 0.72);
  --f00-muted: #8a7874;
  --f00-dim: #8a7874;
  --f00-faint: #3a3232;
  --f00-accent: #B82E18;
  --f00-accent-dim: rgba(184, 46, 24, 0.16);
  --f00-accent-hot: #D43A22;
  --f00-accent-soft: #c47a72;
  --f00-sky: #2A7EB0;
  --f00-sky-bright: #4A96C4;
  --f00-sky-deep: #0F4E7A;
  --f00-sky-shadow: #0A3A58;
  --f00-metal: #b8bec2;
  --f00-line: #3a3232;
  --f00-border: rgba(184, 190, 194, 0.35);
  --f00-border-strong: rgba(208, 213, 219, 0.55);
  --f00-danger: #B82E18;
  --f00-warn: #c45a20;
  --f00-ok: #5A7A42;
  --f00-code-bg: #050404;
  --f00-theme-color: #2A7EB0;
  --f00-glow: rgba(184, 46, 24, 0.32);
  --f00-glow-sky: rgba(42, 126, 176, 0.28);
  --f00-paper: #E8DFD4;
  --f00-title: #8A1E10;
  --f00-selection: #56180a;
  --f00-yellow: #C49A3C;
  --f00-purple: #454b93;
  --f00-green: #5A7A42;
  --f00-orange: #c45a20;
  --f00-pink: #c47a72;
  --f00-bright-white: #E8E2D8;
  --f00-ink: #090909;
  --f00-radius: 0;
  --f00-pad-box: 1rem 1.1rem;
  --f00-font-brand: "Onyx", "Times New Roman", Times, serif;
  --f00-font-zine: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --f00-font-body: var(--f00-font-zine);
  --f00-font-chip: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --f00-font-accent: var(--f00-font-chip);
  --f00-font-display: var(--f00-font-brand);
  --f00-font-mono: var(--f00-font-chip);
  --f00-font-family: var(--f00-font-body);
  --f00-font-hand: var(--f00-font-chip);
  --f00-tracking-brand: -0.06em;
  --f00-tracking-brand-mark: 0.14em;
  --f00-size-brand-mark: 1.45rem;
  --f00-tracking-chip: 0.12em;
  --f00-tracking-body: 0.02em;
  --f00-size-body: 1rem;
  --f00-size-small: 0.88rem;
  --f00-size-chip: 0.72rem;
  --f00-size-nav: 0.88rem;
  --f00-size-title: clamp(1.25rem, 2.8vw, 1.75rem);

  --bg: transparent;
  --bg-2: transparent;
  --bg-elevated: transparent;
  --bg-panel: transparent;
  --bg-muted: transparent;
  --fg: #D0D5DB;
  --text: #D0D5DB;
  --muted: rgba(208, 213, 219, 0.92);
  --dim: rgba(208, 213, 219, 0.78);
  --faint: rgba(208, 213, 219, 0.5);
  --accent: var(--f00-accent);
  --accent-dim: var(--f00-accent-dim);
  --accent-hot: var(--f00-accent-hot);
  --accent-soft: var(--f00-accent-soft);
  --amber: var(--f00-warn);
  --line: rgba(208, 213, 219, 0.5);
  --border: rgba(208, 213, 219, 0.72);
  --border-strong: #E4E8ED;
  --danger: var(--f00-danger);
  --warn: var(--f00-warn);
  --ok: var(--f00-ok);
  --code-bg: var(--f00-code-bg);
  --metal: var(--f00-metal);
  --sky: var(--f00-sky);
  --radius: 0;
  --font-brand: var(--f00-font-brand);
  --font-display: var(--f00-font-brand);
  --font: var(--f00-font-chip);
  --sans: var(--f00-font-zine);
  --font-sans: var(--f00-font-zine);
  --font-body: var(--f00-font-zine);
  --font-mono: var(--f00-font-chip);
  --mono: var(--f00-font-zine);
  --font-hand: var(--f00-font-chip);
  --font-accent: var(--f00-font-chip);
  --font-chip: var(--f00-font-chip);

  --site-sky: var(--f00-sky);
  --site-poppy: var(--f00-accent);
  --site-ink: #090909;
  --site-box-text: #090909;
  --tex-paper: url("https://f00.sh/theme/textures/hb-fiber-q9.webp");
  --tex-petal-relief: url("https://f00.sh/theme/textures/hb-relief-q9.webp");
  --tex-petal-soft: url("https://f00.sh/theme/textures/hb-petalsoft-q9.webp");
  --tex-wc-a: url("https://f00.sh/theme/textures/hb-wash-a-q9.webp");
  --tex-wc-b: url("https://f00.sh/theme/textures/hb-wash-b-q9.webp");
  --tex-petals: url("https://f00.sh/theme/textures/petals-photo-v1.webp");
  --tex-hero: url("https://f00.sh/theme/textures/hb-hero-dye-r7b.webp");
  --tex-wc-1: url("https://f00.sh/theme/textures/hb-wc-a7.webp");
  --tex-wc-2: url("https://f00.sh/theme/textures/hb-wc-b7.webp");
  --tex-wc-3: url("https://f00.sh/theme/textures/hb-wc-c7.webp");
  --tex-wc-4: url("https://f00.sh/theme/textures/hb-wc-d7.webp");
  --tex-wc-5: url("https://f00.sh/theme/textures/hb-wc-e7.webp");
  --tex-petals-dense: url("https://f00.sh/theme/textures/hb-petals-dense-q3.webp");
}

/* ════════ WEBSITE SHELL (all f00 project sites) ════════ */
html { color-scheme: dark; }
html, body {
  margin: 0 !important;
  font-family: var(--f00-font-zine) !important;
  font-size: var(--f00-size-body) !important;
  line-height: 1.55 !important;
  letter-spacing: var(--f00-tracking-body);
  color: #D0D5DB !important;
  background-color: #2A7EB0 !important;
  /* ONLY the poppy photo — full viewport cover, fixed. No paper grid. */
  background-image: var(--tex-hero) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-blend-mode: normal !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}



/* no page overlays — photo only */
body::before, body::after {
  content: none !important;
  display: none !important;
}

body > * { position: relative; z-index: 1; }

::selection { background: var(--f00-accent); color: #EDE6DE; }

p, li, label, legend, th, td,
input, textarea, select, button,
.lede, .hint, .howto, .eyebrow, .btn,
.panel, .field, .status, .docs-list {
  font-family: var(--f00-font-zine) !important;
}
p, .lede, .howto, .lead, .hero-copy p, .blurb {
  color: rgba(208, 213, 219, 0.92) !important;
}
p strong, .lede strong, li strong { color: #E4E8ED !important; font-weight: 700; }

h1, h2, h3, h4 {
  font-family: var(--f00-font-brand) !important;
  letter-spacing: 0.06em;
  font-weight: 400 !important;
  color: #D0D5DB !important;
  text-transform: uppercase;
}
/* brand logo is always lowercase f00 — never uppercase the mark (logo lowercase lock) */
h1.splash, .splash, .splash .glyph,
.brand-mark, .f00-brand {
  text-transform: none !important;
}

/* Header/nav — scrolls away with page */
/* Header/nav — scrolls away with page (not sticky/fixed) */
header, .site-header, .top, .nav-shell, .header-inner {
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
  background: transparent !important;
  color: #D0D5DB !important;
  border-color: rgba(208, 213, 219, 0.72) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.site-header, .top {
  border-bottom: 1px solid rgba(208, 213, 219, 0.72) !important;
}
main, #main, .main, .content, .page, .site-main, .shell {
  position: relative !important;
  z-index: 1 !important;
}
.nav, .nav a, .site-nav, .site-nav a, header a, .site-header a, .top a {
  color: rgba(208, 213, 219, 0.92) !important;
  font-family: var(--f00-font-chip) !important;
}
.nav a:hover, .site-nav a:hover, header a:hover {
  color: #D0D5DB !important;
  border-color: #D0D5DB !important;
}
.brand, .logo, .logo-text, .brand-mark, .brand-sub { color: #D0D5DB !important; }
.brand-mark, .f00-brand, .font-brand {
  font-family: var(--f00-font-brand) !important;
  font-weight: 400 !important;
}
.splash, .splash .glyph {
  font-family: var(--f00-font-brand) !important;
  color: var(--f00-ink) !important;
}
.splash .glyph { color: var(--f00-ink) !important; }

/* Footer — white; brand name stays lowercase f00 */
footer, .foot, .site-footer, .footer-bottom, .footer-inner {
  background: transparent !important;
  color: #D0D5DB !important;
  border-top: 1px solid rgba(208, 213, 219, 0.72) !important;
  font-family: var(--f00-font-chip) !important;
  letter-spacing: 0.1em;
  text-transform: none !important;
}
footer span, .foot span, .site-footer span,
footer, .foot, .site-footer {
  text-transform: none !important;
}
footer a, .foot a, .site-footer a { color: rgba(208, 213, 219, 0.92) !important; }
footer a:hover, .foot a:hover { color: #E4E8ED !important; }

/* ── PROJECT CARDS: hospital cream paper + poppy type + 2px metal ── */
.card, .panel, .box, .f00-box,
article.card, .feature-card, .doc-card, .install-card,
.score-card, .result-card, .howto, .docs-list,
.announcement, .status, .field-group,
.shell > .panel, section.panel,
.benchmark-card, .tool-card, .release-card {
  --wc-x: 28%;
  --wc-y: 24%;
  --wc-x2: 74%;
  --wc-y2: 70%;
  --wc-pos: 20% 30%;
  --wc-size: 180% 180%;
  --wc-a: rgba(245, 236, 224, 0.45);
  --wc-b: rgba(86, 24, 10, 0.12);
  --wc-c: rgba(184, 46, 24, 0.10);
  --wc-paper: var(--tex-wc-1);
  --wc-fiber-op: 0.38;
  --wc-wash-op: 0.62;

  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background-color: #E8DFD4 !important;
  background-image: none !important;
  color: #B82E18 !important;
  border: 2px solid #B8BEC2 !important;
  border-radius: 0 !important;
  padding: 1.05rem 1.15rem 1.2rem !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-weight: 600 !important;
  text-shadow: none;
}

/* painted watercolor paper — unique via vars / nth / JS seeds */
.card::before, .panel::before, .box::before, .f00-box::before,
article.card::before, .feature-card::before, .doc-card::before,
.install-card::before, .benchmark-card::before, .tool-card::before,
.release-card::before, .announcement::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--wc-wash-op);
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(ellipse 95% 75% at var(--wc-x) var(--wc-y), var(--wc-a), transparent 62%),
    radial-gradient(ellipse 80% 90% at var(--wc-x2) var(--wc-y2), var(--wc-b), transparent 58%),
    radial-gradient(circle at var(--wc-x2) var(--wc-y), var(--wc-c), transparent 48%),
    var(--wc-paper);
  background-size: auto, auto, auto, var(--wc-size);
  background-position: center, center, center, var(--wc-pos);
  background-repeat: no-repeat;
}

/* paper fiber tooth */
.card::after, .panel::after, .box::after, .f00-box::after,
article.card::after, .feature-card::after, .doc-card::after,
.install-card::after, .benchmark-card::after, .tool-card::after,
.release-card::after, .announcement::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--wc-fiber-op);
  mix-blend-mode: multiply;
  background: var(--tex-paper) var(--wc-pos) / 160px 160px repeat;
}

.card > *, .panel > *, .box > *, .f00-box > *,
article.card > *, .feature-card > *, .doc-card > *,
.install-card > *, .benchmark-card > *, .tool-card > *,
.release-card > *, .announcement > * {
  position: relative;
  z-index: 1;
}

/* organic nth variance — different paper + wash per card */
.grid > .card:nth-child(5n+1), .card:nth-of-type(5n+1) {
  --wc-paper: var(--tex-wc-1); --wc-pos: 8% 12%; --wc-size: 190% 160%;
  --wc-x: 18%; --wc-y: 22%; --wc-x2: 78%; --wc-y2: 68%;
  --wc-wash-op: 0.58; --wc-fiber-op: 0.36;
}
.grid > .card:nth-child(5n+2), .card:nth-of-type(5n+2) {
  --wc-paper: var(--tex-wc-2); --wc-pos: 70% 40%; --wc-size: 160% 190%;
  --wc-x: 72%; --wc-y: 16%; --wc-x2: 20%; --wc-y2: 78%;
  --wc-wash-op: 0.66; --wc-fiber-op: 0.42;
  --wc-a: rgba(245, 220, 200, 0.35); --wc-b: rgba(86, 24, 10, 0.14);
}
.grid > .card:nth-child(5n+3), .card:nth-of-type(5n+3) {
  --wc-paper: var(--tex-wc-3); --wc-pos: 40% 75%; --wc-size: 200% 150%;
  --wc-x: 40%; --wc-y: 70%; --wc-x2: 88%; --wc-y2: 24%;
  --wc-wash-op: 0.55; --wc-fiber-op: 0.34;
  --wc-a: rgba(237, 230, 222, 0.4); --wc-c: rgba(184, 46, 24, 0.12);
}
.grid > .card:nth-child(5n+4), .card:nth-of-type(5n+4) {
  --wc-paper: var(--tex-wc-4); --wc-pos: 85% 20%; --wc-size: 155% 175%;
  --wc-x: 12%; --wc-y: 55%; --wc-x2: 60%; --wc-y2: 18%;
  --wc-wash-op: 0.64; --wc-fiber-op: 0.4;
}
.grid > .card:nth-child(5n), .card:nth-of-type(5n) {
  --wc-paper: var(--tex-wc-5); --wc-pos: 30% 50%; --wc-size: 175% 185%;
  --wc-x: 55%; --wc-y: 35%; --wc-x2: 15%; --wc-y2: 82%;
  --wc-wash-op: 0.6; --wc-fiber-op: 0.38;
  --wc-b: rgba(86, 24, 10, 0.16);
}

.panel:nth-of-type(5n+1) { --wc-paper: var(--tex-wc-1); }
.panel:nth-of-type(5n+2) { --wc-paper: var(--tex-wc-2); --wc-pos: 60% 40%; }
.panel:nth-of-type(5n+3) { --wc-paper: var(--tex-wc-3); }
.panel:nth-of-type(5n+4) { --wc-paper: var(--tex-wc-4); }
.panel:nth-of-type(5n) { --wc-paper: var(--tex-wc-5); }

/* body type on cards — dark ink */
.card, .panel, .box, .f00-box, article.card { color: #B82E18 !important; }
.card p, .panel p, .box p,
.card li, .panel li,
.card .mono, .panel .mono,
.card-meta, .facts, .facts li,
.card code, .panel code,
.card strong, .panel strong,
.card span, .panel span {
  color: #B82E18 !important;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(232, 223, 212, 0.35);
}
.card a:not(.btn), .panel a:not(.btn) {
  color: #8A1E10 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

/* project titles — Onyx, cream on poppy for legibility */
.card h1, .card h2, .card h3, .card h4,
.panel h1, .panel h2, .panel h3, .panel h4,
.box h1, .box h2, .box h3,
article.card h3 {
  font-family: var(--f00-font-brand) !important;
  font-weight: 400 !important;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.05 !important;
  color: #8A1E10 !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(232, 223, 212, 0.55) !important;
  border-bottom: 1px solid rgba(184, 46, 24, 0.35) !important;
  padding-bottom: 0.45rem;
  margin-top: 0.15rem;
  margin-bottom: 0.55rem;
}
.card-meta {
  opacity: 0.95;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: rgba(138, 30, 16, 0.82) !important;
  text-shadow: 0 1px 0 rgba(232, 223, 212, 0.35);
}
.facts li {
  border-bottom: 1px dotted rgba(184, 46, 24, 0.28) !important;
}
.facts li::before {
  content: "· ";
  opacity: 0.7;
  color: #B82E18 !important;
}

/* transparent wrappers — sky shows through */
.wrap, .shell, main, #main, .main, .content, .page,
.hero, .hero-grid, .hero-copy, .section, .container,
.site-main, .layout, #root, .app, .projects, .products {
  background: transparent !important;
}
.site-header, .announcement, .crt, .field {
  background: transparent !important;
}
.scanlines, .vignette, .tint {
  opacity: 0.18 !important;
  mix-blend-mode: soft-light !important;
}

/* Buttons on sky */
.btn, button.btn, a.btn, .btn-primary, .btn-ghost, .btn-sm {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--f00-font-chip) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  border: 1px solid #D0D5DB !important;
  padding: 0.45rem 0.75rem !important;
  color: #D0D5DB !important;
  background: transparent !important;
  box-shadow: none !important;
}
.btn:hover, a.btn:hover {
  background: rgba(208, 213, 219, 0.16) !important;
  color: #E4E8ED !important;
}
.btn.primary, .btn-primary, a.btn.primary {
  background: #090909 !important;
  border-color: #090909 !important;
  color: #D0D5DB !important;
  font-weight: 700 !important;
}
.btn.primary:hover {
  background: #1a1214 !important;
  border-color: #1a1214 !important;
}

/* buttons on petal cards — black ink */
.card .btn, .panel .btn, .box .btn, article.card .btn {
  border: 1px solid #B82E18 !important;
  color: #8A1E10 !important;
  background: rgba(208, 213, 219, 0.55) !important;
}
.card .btn.primary, .panel .btn.primary, .card .btn-primary, article.card .btn.primary {
  background: #090909 !important;
  color: #D0D5DB !important;
  border-color: #090909 !important;
}
.card .btn:hover, .panel .btn:hover {
  background: rgba(208, 213, 219, 0.78) !important;
}
.card .btn.primary:hover {
  background: #1a1214 !important;
  color: #E4E8ED !important;
}
.btn.sm, .btn-sm { padding: 0.35rem 0.6rem !important; font-size: 0.64rem !important; }

input, textarea, select {
  background: #E4E8ED !important;
  color: #090909 !important;
  border: 2px solid rgba(208, 213, 219, 0.72) !important;
  border-radius: 0 !important;
  padding: 0.55rem 0.65rem;
}
input::placeholder, textarea::placeholder { color: rgba(9, 9, 9, 0.4) !important; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid #D0D5DB !important;
  border-color: #D0D5DB !important;
}


table { border-collapse: collapse; width: 100%; }
th, td {
  border: 1px solid rgba(208, 213, 219, 0.5);
  padding: 0.45rem 0.6rem;
  color: #E4E8ED !important;
}
.card th, .card td, .panel th, .panel td {
  border-color: rgba(184, 46, 24, 0.22) !important;
  color: #B82E18 !important;
}
th {
  font-family: var(--f00-font-chip) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--f00-size-chip);
}

a { color: #D0D5DB; }
a:hover { color: #E8E2D8; }
hr { border: 0; border-top: 1px solid rgba(208, 213, 219, 0.45); }
* { --radius: 0; }

/* GitHub star count in footers */
.foot-stars, a[data-f00-stars], a[data-f00-stars-total] {
  text-decoration: none !important;
  font-family: var(--f00-font-chip) !important;
  letter-spacing: 0.12em !important;
  font-variant-numeric: tabular-nums;
  color: rgba(208, 213, 219, 0.92) !important;
  white-space: nowrap;
}
.foot-stars:hover, a[data-f00-stars]:hover, a[data-f00-stars-total]:hover {
  color: #D0D5DB !important;
}
a.brand { text-decoration: none !important; }


/* kill sticky headers on project sites */
header, .site-header, .top, .nav-shell, .header-inner {
  position: relative !important;
  top: auto !important;
}


/* CODE — black panels, mono, cream (never inherit card black-ink) */
pre, pre code, .code, .code-block, .highlight, .hljs,
.panel pre, .card pre, .box pre, .docs-list pre, .howto pre {
  background: #050404 !important;
  color: #EDE6DE !important;
  border: 1px solid #C8CED4 !important;
  border-radius: 0 !important;
  font-family: var(--f00-font-mono) !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  padding: 0.85rem 1rem !important;
  overflow-x: auto !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}
pre code, .card pre code, .panel pre code {
  background: transparent !important;
  color: #EDE6DE !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
}
code:not(pre code), kbd {
  background: rgba(9, 9, 9, 0.55) !important;
  color: #EDE6DE !important;
  border-radius: 0 !important;
  font-family: var(--f00-font-mono) !important;
  padding: 0.1em 0.35em !important;
  text-shadow: none !important;
}
.card code:not(pre code), .panel code:not(pre code), .box code:not(pre code) {
  background: rgba(184, 46, 24, 0.12) !important;
  color: #8A1E10 !important;
}
.card pre, .panel pre, .box pre,
.card pre code, .panel pre code, .box pre code {
  background: #050404 !important;
  color: #EDE6DE !important;
  text-shadow: none !important;
}


/* product release banners above header — off */
.announcement { display: none !important; }


/* project-page readability */
.hero h1, .hero-copy, .hero .lede, .lede, .hint, .eyebrow {
  color: #D0D5DB !important;
  text-shadow: 0 1px 2px rgba(6, 40, 80, 0.45);
}
.hero h1 {
  font-family: var(--f00-font-brand) !important;
  color: #E4E8ED !important;
}
/* local dark overlays fight the shared sky */
.crt, .scanlines, #field, .grain {
  display: none !important;
}
.vignette, .tint {
  opacity: 0.12 !important;
  mix-blend-mode: soft-light !important;
  pointer-events: none !important;
}
.panel .swatch .name, .panel .feel-list,
.panel li, .panel p {
  color: #B82E18 !important;
}
.panel .muted, .panel .hint {
  color: rgba(138, 30, 16, 0.72) !important;
}
.panel .panel-head h2, .panel-head h2 {
  font-family: var(--f00-font-brand) !important;
  color: #8A1E10 !important;
  text-shadow: 0 1px 0 rgba(232, 223, 212, 0.55) !important;
}


/* hide hub canvas / grain overlays — bg is the photo alone */
.crt, #field, .grain, .vignette, .tint, .scanlines {
  display: none !important;
}

/* pin-target-21-nogrids */

/* pin-f00-theme-28.css-silver-lite */


/* form labels use class=field — must never be hidden (was killing TRN URL inputs) */
label.field, .field:not(.crt):not(#field) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  flex-direction: column;
  gap: 0.35rem;
  color: #8A1E10 !important;
  font-family: var(--f00-font-zine) !important;
  font-weight: 600 !important;
  margin-bottom: 0.85rem;
}
label.field input, label.field textarea, .field input, .field textarea,
input[type="url"], input[type="text"], input[type="password"], textarea {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #E4E8ED !important;
  color: #090909 !important;
  border: 1px solid #B8BEC2 !important;
  border-radius: 0 !important;
  padding: 0.55rem 0.65rem !important;
  font-family: var(--f00-font-mono) !important;
}
.panel label, .card label, .box label, .llm-box label {
  color: #8A1E10 !important;
  display: flex !important;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 600 !important;
}
.toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  color: #8A1E10 !important;
  visibility: visible !important;
}
/* nested content boxes inside hospital cream panels */
.panel .howto, .card .howto, .panel .docs-list, .card .docs-list,
.panel .box, .card .box, .panel .nested, .panel > div:not(.panel-head) {
  color: #B82E18 !important;
}
/* black install/code surfaces keep cream text */
.panel pre, .card pre, .install-block, .code-block, [class*="install"] pre {
  background: #050404 !important;
  color: #EDE6DE !important;
}
.panel pre *, .card pre * { color: #EDE6DE !important; }


/* f00-theme-21.css form-field-fix-v1 + surface-v30 */

/* f00-theme-29.css */


/* ═══ SURFACE SYSTEM (v30) — clun-grade UX on shared shell ═══ */
:root {
  --surf-sky-fg: #D0D5DB;
  --surf-poppy: #B82E18;
  --surf-ink: #090909;
  --surf-cream: #EDE6DE;
  --surf-paper: #E8DFD4;
  --surf-night: #050404;
  --surf-metal: #B8BEC2;
  --surf-sky: #2A7EB0;
  --surf-title: #8A1E10;
}

/* port / chip tiles on hospital cream panels — silver paper + ink */
a.port, .port, .port-chip, .chip-tile,
.panel a.port, .card a.port, .poppy-card a.port {
  display: block !important;
  background: var(--surf-paper) !important;
  color: var(--surf-ink) !important;
  border: 1px solid rgba(9, 9, 9, 0.35) !important;
  font-family: var(--f00-font-mono) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 0.5rem 0.6rem !important;
  text-decoration: none !important;
  text-shadow: none !important;
  line-height: 1.25 !important;
}
a.port:hover, .port:hover {
  background: #D0D5DB !important;
  color: var(--surf-ink) !important;
  border-color: var(--surf-ink) !important;
}

/* night panels (install / terminal) */
.night-panel, .install-block, .install-card, .score-night {
  background: var(--surf-night) !important;
  color: var(--surf-cream) !important;
  border: 1px solid var(--surf-metal) !important;
}
.night-panel *, .install-block *:not(a) {
  color: var(--surf-cream) !important;
  text-shadow: none !important;
}
.night-panel a, .install-block a { color: #4A96C4 !important; }

/* code always night cream */
pre, pre code {
  background: var(--surf-night) !important;
  color: var(--surf-cream) !important;
}

/* form fields on poppy — cream wells */
.panel label.field, .card label.field, label.field {
  display: flex !important;
  color: var(--surf-title) !important;
}
.panel input, .card input, .panel textarea, .card textarea,
label.field input, label.field textarea {
  background: #E4E8ED !important;
  color: var(--surf-ink) !important;
  border: 1px solid var(--surf-metal) !important;
}

/* hospital cream cards: poppy type */
.panel p, .panel li, .panel .hint, .panel .feel-list,
.card p, .card li, .card .hint {
  color: var(--surf-poppy) !important;
}
.panel .panel-head h2, .card h2, .card h3 {
  color: var(--surf-title) !important;
}

/* f00-theme-30.css */


/* html body background lock — resist SPA shorthand resets */
html body {
  background-color: #2A7EB0 !important;
  background-image: var(--tex-hero) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* f00-theme-32.css dye-cream-v32 */