:root {
  --sage-1: #bac4af;
  --sage-2: #a9bd95;
  --sage-3: #8cab81;
  --sage-4: #799081;
  --sage-5: #526d51;
  --ink: #203127;
  --ink-soft: #3e5042;
  --cream: #eef1e9;
  --danger: #8d4f4f;
  --shadow: 0 24px 80px rgba(36, 52, 40, .20);
  --radius: 18px;
  --header-height: 72px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  transition: color .3s ease, background-color .3s ease;
}
body[data-mode="creative"] {
  --bg: #eef1e9;
  --bg-soft: #e1e8da;
  --panel: rgba(250,252,247,.78);
  --line: rgba(82,109,81,.20);
  --text: var(--ink);
  --muted: #5b6c5d;
  --accent: var(--sage-5);
  --accent-soft: var(--sage-2);
  --header-bg: rgba(238,241,233,.88);
  --widget-bg: rgba(238,241,233,.95);
}
body[data-mode="professional"] {
  --bg: #25362a;
  --bg-soft: #34483a;
  --panel: rgba(63,82,67,.82);
  --line: rgba(186,196,175,.20);
  --text: #eef1e9;
  --muted: #bac4af;
  --accent: #a9bd95;
  --accent-soft: #8cab81;
  --header-bg: rgba(37,54,42,.90);
  --widget-bg: rgba(31,46,35,.96);
  --shadow: 0 24px 80px rgba(0,0,0,.28);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .65;
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--sage-3) 28%, transparent), transparent 30rem),
    linear-gradient(color-mix(in srgb, var(--sage-5) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--sage-5) 7%, transparent) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
}
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 48%, transparent); outline-offset: 2px; }
.eyebrow { color: var(--accent); letter-spacing: .16em; font-size: .74rem; font-weight: 900; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(3rem, 7vw, 6.2rem); line-height: .94; letter-spacing: -.055em; max-width: 12ch; margin-bottom: 1.4rem; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.04em; max-width: 17ch; }
h3 { font-size: 1.35rem; margin-bottom: .8rem; }
p { color: var(--muted); line-height: 1.7; }

/* Access */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 3rem 1.25rem;
  --bg: #eef1e9;
  --bg-soft: #dfe7d8;
  --panel: rgba(250,252,247,.82);
  --line: rgba(82,109,81,.22);
  --text: var(--ink);
  --muted: #5b6c5d;
  --accent: var(--sage-5);
  --header-bg: rgba(238,241,233,.9);
}
.auth-shell { width: min(1120px, 100%); display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: stretch; }
.auth-brand, .auth-panel, .project-card, .experience-card, .hero-console, .capability-columns article { border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, white 8%), var(--panel)); box-shadow: var(--shadow); }
.auth-brand { padding: clamp(2rem, 5vw, 5rem); border-radius: 28px; min-height: 620px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(140deg, #eef1e9 0 48%, #dce5d4 48% 70%, #c8d7bd 70%); }
.auth-brand h1 { margin-top: 1rem; }
.hero-kicker { color: var(--text); font-weight: 750; font-size: 1.05rem; }
.auth-copy { max-width: 58ch; }
.signal-card { margin-top: auto; padding-top: 2rem; display: grid; grid-template-columns: auto 1fr; gap: .65rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.signal-card strong { color: var(--text); font-weight: 650; }
.auth-panel { border-radius: 28px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.panel-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; background: #d8e1d0; border-radius: 12px; padding: .35rem; margin-bottom: 1.5rem; }
.tab { border: 0; border-radius: 9px; padding: .8rem; color: var(--muted); background: transparent; }
.tab.active { background: #f4f6f1; color: var(--text); }
.auth-form { display: grid; gap: 1rem; }
.auth-form label { display: grid; gap: .45rem; font-size: .85rem; color: var(--muted); }
.auth-form input, .ticker-editor input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: .95rem 1rem; color: var(--text); background: color-mix(in srgb, var(--bg-soft) 70%, white 30%); outline: none; }
.auth-form input:focus, .ticker-editor input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.primary-button, .ghost-button { border-radius: 10px; padding: .9rem 1.05rem; text-decoration: none; font-weight: 850; border: 1px solid transparent; }
.primary-button { color: #f6f8f3; background: var(--sage-5); }
body[data-mode="professional"] .primary-button { color: #203127; background: var(--sage-2); }
.ghost-button { color: var(--text); border-color: var(--line); background: transparent; }
.button-link { display: inline-flex; align-items: center; justify-content: center; }
.form-message { min-height: 1.4rem; margin: 0; font-size: .85rem; }
.form-message.error { color: var(--danger); }
.microcopy { margin-top: 1.2rem; font-size: .76rem; }

/* Header and mode */
.site-header { position: sticky; top: 0; z-index: 20; min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: .7rem clamp(1rem, 4vw, 4rem); border-bottom: 1px solid var(--line); background: var(--header-bg); backdrop-filter: blur(18px); }
.header-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.brand-mark { text-decoration: none; font-weight: 950; letter-spacing: .05em; white-space: nowrap; }
.mode-switch { display: flex; gap: .25rem; padding: .25rem; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-soft) 82%, transparent); }
.mode-button { border: 0; border-radius: 7px; padding: .55rem .72rem; color: var(--muted); background: transparent; font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.mode-button.active { color: #f5f7f2; background: var(--sage-5); }
body[data-mode="professional"] .mode-button.active { color: var(--ink); background: var(--sage-2); }
.site-nav, .nav-mode { display: flex; align-items: center; gap: 1.2rem; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: .84rem; }
.site-nav a:hover { color: var(--text); }
body[data-mode="creative"] .professional-nav, body[data-mode="professional"] .creative-nav { display: none; }

/* Mode content */
.creative-copy, .professional-copy, .creative-section-group, .professional-section-group, .creative-widget, .professional-widget { transition: opacity .22s ease; }
body[data-mode="creative"] .professional-copy,
body[data-mode="creative"] .professional-section-group,
body[data-mode="creative"] .professional-widget { display: none !important; }
body[data-mode="professional"] .creative-copy,
body[data-mode="professional"] .creative-section-group,
body[data-mode="professional"] .creative-widget { display: none !important; }
.section-pad { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem); }
.hero { min-height: calc(100vh - var(--header-height)); display: grid; grid-template-columns: 1.25fr .75fr; gap: 4rem; align-items: center; }
.hero-copy { max-width: 62ch; font-size: 1.06rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-console { border-radius: var(--radius); padding: 1.2rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Keep the static status panel clear of the fixed visitor widget at the top of the page. */
@media (min-width: 1001px) {
  .portfolio-page .hero-console { margin-top: 8rem; }
}
.console-line { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .75rem; }
.console-line:last-child { border-bottom: 0; }
.console-line span { color: var(--muted); }
.console-line strong { text-align: right; color: var(--accent); }
.section-block { border-top: 1px solid var(--line); }
.section-heading { display: grid; gap: 1rem; margin-bottom: 2rem; }
.project-card, .experience-card { border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.4rem); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.project-card:hover, .experience-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* Inline project-card artwork. Kept separate from the expanded case-study overlay. */
.project-card-art {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Artwork remains fixed inside the card. The card itself may lift on hover, but the
   image no longer scales/translates, preventing the right-edge seam from appearing. */
.project-card-art::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 33%;
  background-image: var(--card-art-image);
  background-size: cover;
  background-position: var(--card-art-position, center);
  background-repeat: no-repeat;
  opacity: var(--card-art-opacity, .30);
  pointer-events: none;
  transition: opacity .22s ease;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.10) 13%, rgba(0,0,0,.56) 38%, #000 67%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.10) 13%, rgba(0,0,0,.56) 38%, #000 67%);
}
/* Theme-aware scrim: lightens artwork in Creative mode and darkens it in
   Professional mode because --panel follows the active theme. This keeps body
   copy and metadata readable without hiding the project image. */
.project-card-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  /* Full-card scrim avoids any visible boundary/seam where a partial overlay begins. */
  background: linear-gradient(
    to right,
    var(--panel) 0%,
    var(--panel) 55%,
    color-mix(in srgb, var(--panel) 96%, transparent) 63%,
    color-mix(in srgb, var(--panel) 78%, transparent) 72%,
    color-mix(in srgb, var(--panel) 52%, transparent) 84%,
    color-mix(in srgb, var(--panel) 28%, transparent) 100%
  );
}
.project-card-art > * { position: relative; z-index: 1; }
.project-card-art:hover::after { opacity: calc(var(--card-art-opacity, .30) + .04); }
.project-card-art-cube { --card-art-image: url('/assets/images/cube-v3-inline.webp'); --card-art-position: center; }
.project-card-art-unity-ai { --card-art-image: url('/assets/images/unity-ai-inline.webp'); --card-art-position: center 18%; }
.project-card-art-frontierworld { --card-art-image: url('/assets/images/frontierworld-inline.webp'); --card-art-position: 58% center; }
.project-card-art-guildhold { --card-art-image: url('/assets/images/guildhold-inline.webp'); --card-art-position: 52% center; }
.project-card-art-madison { --card-art-image: url('/assets/images/madison-bank-inline.webp'); --card-art-position: 56% center; --card-art-opacity: .27; }
.project-card-art-uf { --card-art-image: url('/assets/images/uf-inline.webp'); --card-art-position: 78% center; --card-art-opacity: .27; }
.project-card-art-docker { --card-art-image: url('/assets/images/docker-inline.webp'); --card-art-position: center; --card-art-opacity: .27; }
.project-card-art-microsoft { --card-art-image: url('/assets/images/microsoft-inline.webp'); --card-art-position: center; --card-art-opacity: .25; }
body[data-mode="professional"] .project-card-art::after {
  /* Professional-only monochrome green treatment. Creative artwork is untouched. */
  background-image:
    linear-gradient(rgba(82,109,81,.62), rgba(82,109,81,.62)),
    var(--card-art-image);
  background-blend-mode: color, normal;
  filter: grayscale(.78) sepia(.28) hue-rotate(58deg) saturate(.72) brightness(.82) contrast(.96);
  opacity: var(--card-art-opacity, .25);
}

.project-label, .year-range { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; letter-spacing: .08em; }
.feature-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 2rem; }
.project-meta { display: grid; gap: 1rem; align-content: start; }
.project-meta div { display: grid; gap: .25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.project-meta span { color: var(--muted); font-size: .7rem; }
.text-link { color: var(--accent); text-decoration: none; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.25rem; }
.tag-row span, .skills-strip span { border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 70%, transparent); border-radius: 999px; padding: .45rem .7rem; color: var(--text); font-size: .72rem; }
.experience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.skills-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.music-section { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.capability-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.capability-columns article { padding: 1.6rem; border-radius: var(--radius); }
.contact-section { padding-bottom: 13rem; }

/* Visitor widgets */
.visitor-widget { position: fixed; right: 1rem; top: calc(var(--header-height) + 1rem); z-index: 30; width: 286px; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); background: var(--widget-bg); backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(25,39,28,.28); border-radius: 16px; padding: .9rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.widget-topline, .widget-user, .visitor-widget dl div, .market-mini-list div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.widget-topline { color: var(--accent); margin-bottom: .65rem; font-weight: 800; letter-spacing: .05em; }
.icon-button { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); }
.widget-user { padding: .7rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.widget-user span, .visitor-widget dt { color: var(--muted); }
.visitor-widget dl { display: grid; gap: .45rem; margin: .8rem 0; }
.visitor-widget dd { margin: 0; color: var(--text); }
.widget-button { width: 100%; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; padding: .55rem; }
.widget-button:hover { color: var(--text); }
.widget-toast { max-height: 0; opacity: 0; overflow: hidden; color: var(--accent); transition: .25s ease; }
.widget-toast.show { max-height: 60px; opacity: 1; padding: .5rem 0; }

.mini-aquarium, .large-aquarium { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--sage-5) 30%, transparent); background: linear-gradient(180deg, #dfe8d7 0%, #c6d8bc 46%, #9cb997 100%); }
.mini-aquarium { height: 112px; border-radius: 10px; margin-bottom: .65rem; }
.large-aquarium { height: min(48vh, 390px); min-height: 280px; border-radius: 16px; }
.water-line { position: absolute; left: 0; right: 0; top: 11px; border-top: 1px solid rgba(255,255,255,.7); }
.sand { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, #a9bd95, #8cab81); clip-path: polygon(0 35%, 12% 15%, 25% 38%, 39% 18%, 55% 45%, 75% 20%, 100% 40%, 100% 100%, 0 100%); }
.plant { position: absolute; bottom: 10px; width: 8px; height: 44px; border-radius: 100% 0; background: var(--sage-5); transform-origin: bottom; animation: sway 3.2s ease-in-out infinite alternate; }
.plant::before, .plant::after { content: ""; position: absolute; width: 16px; height: 8px; border-radius: 100%; background: var(--sage-4); }
.plant::before { left: -10px; top: 14px; transform: rotate(25deg); }
.plant::after { left: 3px; top: 26px; transform: rotate(-25deg); }
.plant-a { left: 14%; }.plant-b { right: 16%; height: 56px; animation-delay: -1.1s; }
.fish-layer { position: absolute; inset: 0; overflow: hidden; }
.fish { position: absolute; top: var(--lane); left: -42px; width: calc(var(--fish-size) * 1.55); height: var(--fish-size); border-radius: 55% 45% 48% 52%; background: var(--sage-5); animation: swim var(--duration) linear infinite; animation-delay: var(--delay); filter: drop-shadow(0 2px 2px rgba(40,60,42,.12)); }
.fish::after { content: ""; position: absolute; right: 92%; top: 18%; border-top: calc(var(--fish-size) * .32) solid transparent; border-bottom: calc(var(--fish-size) * .32) solid transparent; border-right: calc(var(--fish-size) * .52) solid var(--sage-4); }
.fish::before { content: ""; position: absolute; right: 19%; top: 24%; width: 3px; height: 3px; border-radius: 50%; background: #eef1e9; box-shadow: 0 0 0 1px rgba(32,49,39,.18); }
.fish.reverse { animation-name: swim-reverse; transform: scaleX(-1); background: var(--sage-4); }
@keyframes swim { from { transform: translateX(-10px); } to { transform: translateX(360px); } }
@keyframes swim-reverse { from { transform: translateX(360px) scaleX(-1); } to { transform: translateX(-10px) scaleX(-1); } }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }

.market-mini-list { display: grid; gap: .32rem; margin: .75rem 0; }
.market-mini-list div { padding: .38rem 0; border-bottom: 1px solid var(--line); }
.market-mini-list strong { color: var(--text); letter-spacing: .05em; }
.market-mini-list span { color: var(--muted); font-size: .62rem; }
.market-disclaimer { font-size: .62rem; line-height: 1.45; margin: .6rem 0; }
.professional-stats { border-top: 1px solid var(--line); padding-top: .65rem; }

.widget-popout { position: fixed; right: 1rem; top: calc(var(--header-height) + 1rem); z-index: 40; width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - var(--header-height) - 2rem); overflow: auto; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--widget-bg); backdrop-filter: blur(22px); box-shadow: 0 28px 90px rgba(17,29,20,.38); border-radius: 20px; padding: 1.2rem; }
.widget-popout[hidden] { display: none; }
.popout-header { display: flex; align-items: start; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; }
.popout-header h3 { margin: .3rem 0 0; font-size: 1.3rem; }
.popout-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin-top: 1rem; }
.popout-stats div { display: grid; gap: .3rem; padding: .9rem; border: 1px solid var(--line); border-radius: 10px; }
.popout-stats span { color: var(--muted); font-size: .62rem; }
.ticker-editor { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: .7rem; align-items: end; margin-bottom: 1rem; }
.ticker-editor label { display: grid; gap: .35rem; color: var(--muted); font-size: .68rem; }
.ticker-editor input { padding: .72rem; text-transform: uppercase; }
.market-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.market-chart-card { border: 1px solid var(--line); border-radius: 12px; padding: .8rem; background: color-mix(in srgb, var(--widget-bg) 74%, transparent); }
.market-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .5rem; }
.market-chart-head strong { font-size: 1rem; letter-spacing: .05em; }
.market-chart-head span { color: var(--muted); font-size: .62rem; text-align: right; }
.market-quote { display: flex; align-items: baseline; gap: .65rem; margin-bottom: .45rem; }
.market-price { color: var(--text); font-size: 1.1rem; font-weight: 850; }
.market-change { color: var(--accent); font-size: .72rem; font-weight: 750; }
.market-chart { width: 100%; height: 150px; display: block; overflow: visible; border-radius: 8px; background: color-mix(in srgb, var(--bg-soft) 82%, transparent); }
.market-chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.market-chart .line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.market-chart .area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.market-chart-labels { display: flex; justify-content: space-between; gap: 1rem; margin-top: .35rem; color: var(--muted); font-size: .58rem; }
.market-loading, .market-error { min-height: 150px; border-radius: 8px; background: color-mix(in srgb, var(--bg-soft) 82%, transparent); display: grid; place-items: center; text-align: center; padding: 1rem; color: var(--muted); font: 650 .66rem/1.55 ui-monospace, monospace; letter-spacing: .05em; }
.market-error { color: color-mix(in srgb, var(--muted) 70%, #d8a7a7 30%); }
.market-note { margin: 1rem 0 0; font-size: .72rem; }
.market-source { color: var(--muted); }
body.popout-open .visitor-widget { opacity: .18; pointer-events: none; }

@media (max-width: 760px) {
  .project-card-art::after {
    width: 36%;
    opacity: .16;
    background-position: var(--card-art-mobile-position, var(--card-art-position, center));
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 28%, #000 74%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 28%, #000 74%);
  }
  .project-card-art::before { inset: 0; }
  .project-card-art:hover::after { opacity: .18; }
}

@media (max-width: 1000px) {
  .auth-shell, .hero, .feature-grid, .experience-grid { grid-template-columns: 1fr; }
  .portfolio-page .hero { padding-top: clamp(9rem, 18vw, 12rem); }
  .portfolio-page .hero-console { margin-top: 0; }
  .auth-brand { min-height: auto; }
  .card-grid, .capability-columns { grid-template-columns: 1fr; }
  .site-nav { display: none; }
  .music-section { align-items: start; flex-direction: column; }
  .ticker-editor { grid-template-columns: repeat(2, 1fr); }
  .ticker-editor .primary-button { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .site-header { align-items: stretch; flex-direction: column; }
  .header-left { justify-content: space-between; }
  .brand-mark { font-size: .82rem; }
  .mode-button { padding: .5rem .6rem; font-size: .66rem; }
  .section-pad { padding-left: 1rem; padding-right: 1rem; }
  :root { --header-height: 116px; }
  .visitor-widget { right: .65rem; top: calc(var(--header-height) + .65rem); width: min(286px, calc(100vw - 1.3rem)); }
  .widget-popout { right: .65rem; top: calc(var(--header-height) + .65rem); width: calc(100vw - 1.3rem); max-height: calc(100vh - var(--header-height) - 1.3rem); }
  .market-chart-grid, .popout-stats { grid-template-columns: 1fr; }
  .contact-section { padding-bottom: 22rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* V0.4 project case studies */
.case-study-button {
  margin-top: 1.15rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  color: var(--text);
  padding: .72rem .9rem;
  border-radius: 10px;
  font: inherit;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.case-study-button:hover { transform: translateY(-1px); border-color: var(--accent); background: var(--panel-strong); }
.case-study-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: clamp(.7rem, 2vw, 1.5rem);
  background: rgba(18, 29, 22, .78);
  backdrop-filter: blur(10px);
  overflow: auto;
}
.case-study-panel {
  width: min(1180px, 100%);
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 27, 18, .34);
  overflow: hidden;
}
.case-study-header {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: start;
  padding: clamp(1.2rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.case-study-header h2 { margin: .35rem 0 .5rem; max-width: 820px; }
.case-study-subtitle { margin: 0; max-width: 780px; color: var(--muted); font-size: 1.02rem; }
.case-study-close { flex: 0 0 auto; font-size: 1.25rem; }
.case-study-media { padding: clamp(1rem, 2vw, 1.5rem) clamp(1.2rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); }
.case-study-media-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: .8rem; }
.media-slot {
  min-height: 170px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    var(--panel);
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .12em;
  text-align: center;
  overflow: hidden;
}
.media-slot-primary { min-height: 250px; }
.media-slot.has-image {
  position: relative;
  border-style: solid;
  background: color-mix(in srgb, var(--panel-strong) 82%, var(--background));
  padding: 0;
  place-items: stretch;
}
.media-slot.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-slot.has-image .media-caption {
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .7rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--background) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  color: var(--text);
  font-size: .7rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: left;
  backdrop-filter: blur(6px);
}
.media-slot.has-image .media-caption::before {
  content: '';
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  flex: 0 0 auto;
}
.media-slot.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--background) 46%, transparent) 100%);
  pointer-events: none;
}
.media-note { margin: .75rem 0 0; color: var(--muted); font-size: .78rem; }
.case-study-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: 2rem; padding: clamp(1.2rem, 3vw, 2.5rem); }
.case-study-main { display: grid; gap: 1.8rem; }
.case-study-main section { padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.case-study-main section:last-child { border-bottom: 0; padding-bottom: 0; }
.case-study-main p { margin: .65rem 0 0; line-height: 1.75; }
.case-label { color: var(--accent); font-size: .7rem; letter-spacing: .14em; font-weight: 700; }
.case-list { margin: .75rem 0 0; padding-left: 1.2rem; display: grid; gap: .7rem; line-height: 1.55; }
.case-study-side { display: grid; align-content: start; gap: 1rem; }
.case-fact { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.case-fact span { display: block; color: var(--muted); font-size: .66rem; letter-spacing: .12em; margin-bottom: .32rem; }
.case-fact strong { font-size: .92rem; line-height: 1.35; }
body.case-study-open { overflow: hidden; }
@media (max-width: 820px) {
  .case-study-media-grid, .case-study-grid { grid-template-columns: 1fr; }
  .media-slot, .media-slot-primary { min-height: 150px; }
  .case-study-header { gap: 1rem; }
}

/* V0.6 professional case-study refinements */
.professional-case-card { display: flex; flex-direction: column; align-items: flex-start; }
.professional-case-card .case-study-button { margin-top: auto; }
.case-teaser { padding-top: .9rem; border-top: 1px solid var(--line); color: var(--muted); }
.capability-columns-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.creative-tools-section .section-heading p { max-width: 760px; color: var(--muted); }
@media (max-width: 760px) { .capability-columns-expanded { grid-template-columns: 1fr; } }

/* V0.12 public-launch additions */
.turnstile-shell {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.turnstile-shell[hidden] { display: none; }
.turnstile-note { font-size: .74rem; color: var(--muted); margin: -.2rem 0 .2rem; }

.music-section { display: grid; gap: 2rem; }
.music-heading { max-width: 72ch; }
.soundcloud-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.soundcloud-card { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.soundcloud-card iframe { display: block; width: 100%; border: 0; }
.soundcloud-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.soundcloud-title span { color: var(--accent); font: 800 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.soundcloud-title strong { color: var(--text); }
.music-profile-link { justify-self: start; }

.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); max-width: 1180px; }
.about-grid p { font-size: 1.02rem; }

.contact-section { display: block; }
.contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.contact-card { display: grid; align-content: start; min-height: 155px; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.contact-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.contact-card span { color: var(--accent); font: 850 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.contact-card strong { margin-top: .75rem; color: var(--text); overflow-wrap: anywhere; }
.contact-card em { margin-top: auto; padding-top: 1.4rem; color: var(--muted); font-size: .8rem; font-style: normal; }
.resume-card { background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent-soft) 22%, var(--panel))); }

@media (max-width: 900px) {
  .soundcloud-grid, .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .contact-grid { grid-template-columns: 1fr; }
  .soundcloud-card iframe { height: 250px; }
}

/* V0.13 market insight drawer */
.market-insight-button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  border-radius: 8px;
  padding: .48rem .7rem;
  font: 800 .64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.market-insight-button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.market-card-actions { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .65rem; }
.market-card-actions span { color: var(--muted); font-size: .58rem; }
.market-insight-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--widget-bg) 90%, var(--accent) 10%);
}
.market-insight-panel[hidden] { display: none; }
.market-insight-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.market-insight-header h4 { margin: .25rem 0 0; font-size: 1.1rem; }
.market-insight-body { display: grid; gap: .9rem; padding-top: .9rem; }
.market-insight-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.market-insight-stat { padding: .72rem; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--widget-bg) 78%, transparent); }
.market-insight-stat span { display: block; color: var(--muted); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.market-insight-stat strong { display: block; margin-top: .35rem; color: var(--text); font-size: .88rem; }
.market-insight-signal { margin: 0; color: var(--text); font-size: .8rem; line-height: 1.6; }
.market-trend-chart { width: 100%; height: 120px; display: block; border-radius: 8px; background: color-mix(in srgb, var(--bg-soft) 82%, transparent); }
.market-trend-chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.market-trend-chart .line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.market-trend-chart .event { stroke: color-mix(in srgb, var(--accent) 52%, #eef1e9 48%); stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.market-related { display: flex; flex-wrap: wrap; gap: .4rem; }
.market-related span { border: 1px solid var(--line); border-radius: 999px; padding: .35rem .55rem; color: var(--muted); font-size: .62rem; }
.market-insight-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem; align-items: center; color: var(--muted); font-size: .62rem; line-height: 1.5; }
.market-insight-foot a { color: var(--accent); text-decoration: none; }
@media (max-width: 680px) { .market-insight-summary { grid-template-columns: 1fr; } }

/* V0.14 resilient market context fallback */
.market-context-note {
  display: grid;
  gap: .32rem;
  padding: .75rem .85rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--widget-bg) 82%, transparent);
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.55;
}
.market-context-note strong { color: var(--text); font-size: .72rem; }
.market-news-context { display: grid; gap: .7rem; }
.market-insight-section-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.market-insight-section-head h5 { margin: .22rem 0 0; color: var(--text); font-size: .76rem; font-weight: 760; }
.market-insight-section-head > span { color: var(--muted); font-size: .58rem; }
.market-theme-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.market-theme-row span {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 999px;
  padding: .34rem .52rem;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text);
  font-size: .6rem;
}
.market-news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.market-news-item {
  display: grid;
  gap: .32rem;
  min-width: 0;
  padding: .72rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--widget-bg) 76%, transparent);
  color: var(--text);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.market-news-item:hover {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--widget-bg));
  transform: translateY(-1px);
}
.market-news-item strong { font-size: .7rem; line-height: 1.4; }
.market-news-item span { color: var(--muted); font-size: .57rem; }
.market-source-links { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 680px) {
  .market-news-list { grid-template-columns: 1fr; }
  .market-insight-section-head { align-items: flex-start; flex-direction: column; gap: .35rem; }
}

/* V0.15 usability, privacy, and account controls */
.widget-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .65rem; }
.widget-actions .widget-button { width: 100%; }
.site-nav a { position: relative; }
.site-nav a.active { color: var(--text); }
.site-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.45rem; height: 2px; border-radius: 2px; background: var(--accent); }

.site-footer {
  display: grid;
  grid-template-columns: minmax(220px,.7fr) minmax(220px,.5fr) minmax(320px,1.4fr);
  gap: 2rem;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.site-footer p { margin: .45rem 0 0; font-size: .78rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
.footer-links a { color: var(--text); text-decoration: none; font-size: .78rem; font-weight: 750; }
.footer-links a:hover { color: var(--accent); }
.privacy-summary { max-width: 72ch; }

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(13,24,16,.68);
  backdrop-filter: blur(14px);
}
.settings-overlay[hidden] { display: none; }
.settings-panel {
  width: min(980px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg) 90%, var(--panel) 10%);
  color: var(--text);
  box-shadow: 0 30px 100px rgba(0,0,0,.34);
}
.settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.4rem; border-bottom: 1px solid var(--line); }
.settings-header h2 { margin: .25rem 0 .55rem; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.settings-header p { max-width: 62ch; margin: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; padding: 1rem; }
.settings-card { border: 1px solid var(--line); border-radius: 14px; padding: 1rem; background: color-mix(in srgb, var(--panel) 90%, transparent); }
.settings-card p { font-size: .82rem; }
.settings-meta { color: var(--muted); }
.settings-meta strong { color: var(--text); }
.settings-form { display: grid; gap: .75rem; margin-top: .85rem; }
.settings-form label { display: grid; gap: .38rem; color: var(--muted); font-size: .72rem; }
.settings-form input { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: .78rem .85rem; color: var(--text); background: color-mix(in srgb, var(--bg-soft) 76%, transparent); }
.settings-note { margin: .75rem 0 0; font-size: .68rem !important; }
.settings-action-stack { display: grid; gap: .55rem; margin-top: .8rem; }
.secondary-button, .danger-button { border-radius: 9px; padding: .75rem .85rem; font-weight: 800; }
.secondary-button { color: var(--text); border: 1px solid var(--line); background: transparent; }
.secondary-button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.danger-button { color: #fff; border: 1px solid color-mix(in srgb, var(--danger) 75%, #fff 25%); background: var(--danger); }
.settings-danger-card { border-color: color-mix(in srgb, var(--danger) 48%, var(--line)); }
.settings-status { min-height: 2.4rem; padding: 0 1rem 1rem; color: var(--muted); font-size: .75rem; }
.settings-status.error { color: #e8aaaa; }
.settings-status.success { color: var(--accent); }
body.settings-open { overflow: hidden; }

.not-found-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; --bg:#eef1e9; --bg-soft:#e1e8da; --panel:rgba(250,252,247,.86); --line:rgba(82,109,81,.2); --text:var(--ink); --muted:#5b6c5d; --accent:var(--sage-5); }
.not-found-shell { width: min(760px,100%); padding: clamp(2rem,6vw,5rem); border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:var(--shadow); }
.not-found-shell h1 { margin: .8rem 0 1rem; max-width: 12ch; }
.not-found-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }

/* Slightly stronger body-copy contrast in professional mode. */
body[data-mode="professional"] { --muted: #d0d8c9; }
body[data-mode="professional"] .project-card-art::before { opacity: .9; }
body[data-mode="professional"] .project-card-art > * { text-shadow: 0 1px 1px rgba(17,31,21,.24); }

@media (max-width: 820px) {
  .settings-grid, .site-footer { grid-template-columns: 1fr; }
  .site-footer { gap: 1rem; }
  .site-nav a.active::after { bottom: -.25rem; }
}
@media (max-width: 580px) {
  .settings-overlay { padding: .5rem; }
  .settings-panel { max-height: calc(100vh - 1rem); border-radius: 16px; }
  .settings-header { padding: 1rem; }
  .settings-grid { padding: .65rem; gap: .65rem; }
  .visitor-widget { font-size: .68rem; }
  .widget-actions { gap: .35rem; }
}

/* V0.17 composition player, collapsible widgets, and Aquarium 2.0 */
.echo-player {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 350px;
  padding: .42rem .65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--header-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(20,35,24,.12);
}
.player-button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); }
.player-readout { display: grid; min-width: 128px; line-height: 1.1; }
.player-readout strong { font: 800 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; color: var(--text); }
.player-readout span { margin-top: .25rem; color: var(--muted); font: 600 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.player-volume { display: flex; align-items: center; gap: .4rem; color: var(--muted); font: 700 .55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.player-volume input { width: 92px; accent-color: var(--accent); }
.echo-player audio { display: none; }

.widget-top-controls { display: flex; gap: .35rem; }
.visitor-widget.is-minimized { width: 250px; padding: .72rem .8rem; }
.visitor-widget.is-minimized .widget-mode-panel > :not(.widget-topline),
.visitor-widget.is-minimized .widget-actions { display: none !important; }
.visitor-widget.is-minimized .widget-topline { margin: 0; }

.fish-discovery-button {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  padding: .65rem .9rem;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  color: var(--text);
  font-size: .72rem;
  font-weight: 800;
}
.fish-discovery-button::before {
  content: '';
  width: 20px;
  height: 12px;
  border-radius: 55% 45% 48% 52%;
  background: var(--accent);
  box-shadow: -7px 0 0 -2px var(--accent-soft);
}
.fish-discovery-button:hover { transform: translateY(-1px); border-color: var(--accent); }
.fish-discovery-button.is-discovered { opacity: .58; cursor: default; }
.music-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

.aquarium-controls-mini { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .25rem 0 .65rem; }
.aquarium-controls-mini span { color: var(--muted); font-size: .58rem; text-align: right; }
.feed-button { border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); padding: .48rem .7rem; font-weight: 800; }
.feed-button:disabled { opacity: .45; cursor: not-allowed; }
.aquarium-feed-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0 0; }
.aquarium-feed-bar > div { display: grid; gap: .25rem; }
.aquarium-feed-bar strong { font-size: .9rem; }

.fish-swimmer { position: absolute; top: var(--lane); left: -90px; width: 72px; height: 44px; animation: fish-route var(--duration) linear infinite; animation-delay: var(--delay); pointer-events: none; }
.fish-swimmer.reverse { animation-name: fish-route-reverse; }
.fish-swimmer.entering { animation: fish-enter 1.1s cubic-bezier(.2,.8,.2,1) both, fish-route var(--duration) linear 1.1s infinite; animation-delay: var(--entry-delay), calc(1.1s + var(--delay)); }
.fish-swimmer.entering.reverse { animation-name: fish-enter-reverse, fish-route-reverse; }
.fish {
  --fish-color: var(--sage-5);
  --fish-tail: var(--sage-4);
  --growth: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--fish-size) * 1.55);
  height: var(--fish-size);
  border: 0;
  padding: 0;
  border-radius: 55% 45% 48% 52%;
  background: var(--fish-color);
  animation: none;
  animation-delay: 0s;
  filter: drop-shadow(0 2px 2px rgba(40,60,42,.14));
  transform: scale(var(--growth));
  transform-origin: center;
  transition: transform .78s cubic-bezier(.16,.84,.24,1), filter .22s ease;
  pointer-events: auto;
  cursor: pointer;
}
.fish::after { content: ''; position: absolute; right: 92%; top: 18%; border-top: calc(var(--fish-size) * .32) solid transparent; border-bottom: calc(var(--fish-size) * .32) solid transparent; border-right: calc(var(--fish-size) * .52) solid var(--fish-tail); }
.fish::before { content: ''; position: absolute; right: 19%; top: 24%; width: 3px; height: 3px; border-radius: 50%; background: #eef1e9; box-shadow: 0 0 0 1px rgba(32,49,39,.18); }
.fish.is-selected { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 80%, transparent)); }
.fish.is-eating { filter: brightness(1.18) drop-shadow(0 0 9px rgba(82,109,81,.42)); }
.fish.is-overgrown { transition: transform .9s cubic-bezier(.15,.8,.2,1), filter .25s ease; filter: brightness(1.08) drop-shadow(0 0 18px rgba(82,109,81,.45)); }
.fish.species-cube-v3 { --fish-color:#577f75; --fish-tail:#9fc7b8; }
.fish.species-unity-ai-tool { --fish-color:#7aa88e; --fish-tail:#4f7e69; }
.fish.species-frontierworld { --fish-color:#526d56; --fish-tail:#809689; }
.fish.species-discord-activity { --fish-color:#5e7d68; --fish-tail:#b9aa6a; }
.fish.species-music { --fish-color:#91b5a6; --fish-tail:#6f8f83; border-radius: 50% 50% 60% 60%; }
.fish.species-completion { --fish-color:#c7d6c0; --fish-tail:#8cab81; }
.food-pellet { position: absolute; z-index: 8; top: 8px; left: var(--food-x); width: 8px; height: 8px; border-radius: 50%; background: #6c5339; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset; animation: food-fall .75s ease-in forwards; pointer-events: none; }
.escaped-fish { position: fixed !important; z-index: 9999; margin: 0; transform-origin: center !important; animation: fish-fall-out 2.15s cubic-bezier(.32,.02,.88,.42) forwards !important; pointer-events: none !important; }
@keyframes fish-route { from { transform: translateX(0); } to { transform: translateX(860px); } }
@keyframes fish-route-reverse { from { transform: translateX(860px) scaleX(-1); } to { transform: translateX(0) scaleX(-1); } }
@keyframes fish-enter { from { transform: translateX(-120px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fish-enter-reverse { from { transform: translateX(950px) scaleX(-1); opacity: 0; } to { transform: translateX(860px) scaleX(-1); opacity: 1; } }
@keyframes fish-bite { 0%,100% { filter: drop-shadow(0 2px 2px rgba(40,60,42,.14)); } 50% { filter: brightness(1.22) drop-shadow(0 0 8px rgba(82,109,81,.45)); } }
@keyframes food-fall { from { transform: translateY(0); opacity: 1; } to { transform: translateY(75px); opacity: .15; } }
@keyframes fish-fall-out { 0% { transform: translate(0,0) rotate(0deg); opacity:1; } 20% { transform: translate(28px,-54px) rotate(14deg); opacity:1; } 100% { transform: translate(110px,125vh) rotate(120deg); opacity:.45; } }

@media (max-width: 1250px) {
  .echo-player { min-width: 300px; }
  .player-readout { display: none; }
}
@media (max-width: 1000px) {
  .echo-player { right: 1rem; left: auto; transform: none; min-width: 220px; }
}
@media (max-width: 680px) {
  .echo-player { position: static; transform: none; width: 100%; order: 3; justify-content: center; min-width: 0; }
  .player-readout { display: grid; }
  .player-volume input { width: 72px; }
  .visitor-widget.is-minimized { width: min(250px, calc(100vw - 1.3rem)); }
}

/* Civil mode and traffic-design sandbox */
body[data-mode="civil"] {
  --bg: #edf0ea;
  --bg-soft: #dde6d8;
  --panel: rgba(248,250,244,.88);
  --line: rgba(67,89,67,.18);
  --text: #24352a;
  --muted: #5f7260;
  --accent: #4f6a52;
  --accent-soft: #97b08f;
  --header-bg: rgba(237,240,234,.92);
  --widget-bg: rgba(245,248,242,.96);
  --shadow: 0 24px 80px rgba(40, 56, 40, .17);
}
body[data-mode="civil"] .mode-button.active { color: #f4f7f1; background: var(--sage-5); }
body[data-mode="creative"] .civil-nav,
body[data-mode="professional"] .civil-nav,
body[data-mode="civil"] .creative-nav,
body[data-mode="civil"] .professional-nav { display: none; }
.civil-copy, .civil-section-group { transition: opacity .22s ease; }
body[data-mode="creative"] .civil-copy,
body[data-mode="creative"] .civil-section-group,
body[data-mode="professional"] .civil-copy,
body[data-mode="professional"] .civil-section-group { display: none !important; }
body[data-mode="civil"] .creative-copy,
body[data-mode="civil"] .creative-section-group,
body[data-mode="civil"] .professional-copy,
body[data-mode="civil"] .professional-section-group,
body[data-mode="civil"] .creative-widget,
body[data-mode="civil"] .professional-widget,
body[data-mode="civil"] .widget-popout,
body[data-mode="civil"] #visitorWidget { display: none !important; }
body[data-mode="civil"] .hero { min-height: auto; padding-bottom: 5rem; }
body[data-mode="civil"] .hero-copy { max-width: 58ch; }

.civil-layout,
.civil-details-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr); gap: 1.2rem; align-items: start; }
.civil-details-grid { margin-top: 1.2rem; }
.civil-scene-card,
.civil-inspector-card,
.civil-cross-card,
.civil-reference-card { border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, white 10%), var(--panel)); box-shadow: var(--shadow); }
.civil-scene-card,
.civil-cross-card { padding: 1rem; }
.civil-inspector-card,
.civil-reference-card { padding: 1.2rem; }
.civil-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .85rem; }
.civil-toolbar strong, .civil-cross-header h3 { display: block; margin-top: .15rem; font-size: 1.15rem; color: var(--text); }
.civil-toolbar em { display: block; margin-top: .2rem; font-style: normal; color: var(--muted); font-size: .88rem; }
.civil-toolbar-actions, .civil-cross-buttons, .civil-inspector-actions, .civil-neighbor-stack { display: flex; flex-wrap: wrap; gap: .5rem; }
.civil-control-button,
.civil-mini-button,
.civil-neighbor-button { border: 1px solid var(--line); border-radius: 999px; padding: .58rem .82rem; background: color-mix(in srgb, var(--bg-soft) 78%, white 22%); color: var(--text); font-weight: 700; font-size: .82rem; }
.civil-control-button.active-emphasis,
.civil-mini-button.active,
.civil-neighbor-button.active { background: var(--accent); color: #f5f7f2; border-color: transparent; }
.civil-control-button.active { background: color-mix(in srgb, var(--accent-soft) 45%, white 55%); }

.civil-scene { position: relative; min-height: 550px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background:
  linear-gradient(180deg, #d8e6ce 0%, #dce9d3 35%, #d4e0ca 100%);
}
.civil-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.28), transparent 12rem),
    linear-gradient(rgba(79,106,82,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,106,82,.05) 1px, transparent 1px);
  background-size: auto, 52px 52px, 52px 52px;
  pointer-events: none;
}
.civil-scene-label { position: absolute; z-index: 5; padding: .35rem .6rem; border-radius: 999px; background: rgba(248,250,244,.84); border: 1px solid rgba(79,106,82,.12); color: var(--text); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.label-main { left: 50%; top: .9rem; transform: translateX(-50%); }
.label-side { right: .8rem; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center; }
.civil-road, .civil-sidewalk, .civil-shoulder, .civil-crosswalk, .civil-median, .civil-driveway { position: absolute; }
.civil-road { background: #4a504d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.road-horizontal { left: 0; right: 0; top: 37%; height: 26%; }
.road-vertical { top: 0; bottom: 0; left: 42%; width: 16%; }
.civil-road::before, .civil-road::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x, repeat-y;
  pointer-events: none;
}
.road-horizontal::before {
  background-image:
    linear-gradient(90deg, transparent 0 10px, rgba(248,250,244,.52) 10px 34px, transparent 34px 44px),
    linear-gradient(90deg, transparent 0 10px, rgba(248,250,244,.38) 10px 34px, transparent 34px 44px);
  background-size: 44px 4px, 44px 4px;
  background-position: center calc(50% - 36px), center calc(50% + 36px);
}
.road-horizontal::after {
  background-image: linear-gradient(90deg, transparent 0 18px, rgba(255,213,94,.62) 18px 32px, transparent 32px 44px);
  background-size: 44px 4px;
  background-position: center center;
}
.road-vertical::before {
  background-image:
    linear-gradient(180deg, transparent 0 10px, rgba(248,250,244,.52) 10px 34px, transparent 34px 44px),
    linear-gradient(180deg, transparent 0 10px, rgba(248,250,244,.38) 10px 34px, transparent 34px 44px);
  background-size: 4px 44px, 4px 44px;
  background-position: calc(50% - 26px) center, calc(50% + 26px) center;
}
.road-vertical::after {
  background-image: linear-gradient(180deg, transparent 0 18px, rgba(255,213,94,.62) 18px 32px, transparent 32px 44px);
  background-size: 4px 44px;
  background-position: center center;
}
.civil-median { left: 47.5%; top: 37%; width: 5%; height: 26%; background: rgba(104,118,96,.42); }
.civil-sidewalk { box-shadow: inset 0 0 0 1px rgba(122,137,115,.22); z-index: 3; }
.civil-sidewalk.top, .civil-sidewalk.bottom {
  left: 0; right: 0; height: 4.2%;
  background: linear-gradient(90deg,
    rgba(245,244,236,.97) 0 38.05%,
    transparent 38.05% 61.95%,
    rgba(245,244,236,.97) 61.95% 100%);
}
.civil-sidewalk.top { top: 28.7%; }
.civil-sidewalk.bottom { top: 67.1%; }
.civil-sidewalk.left, .civil-sidewalk.right {
  top: 0; bottom: 0; width: 4.2%;
  background: linear-gradient(180deg,
    rgba(245,244,236,.97) 0 36.95%,
    transparent 36.95% 63.05%,
    rgba(245,244,236,.97) 63.05% 100%);
}
.civil-sidewalk.left { left: 33.8%; }
.civil-sidewalk.right { left: 62%; }
.civil-shoulder { z-index: 3; }
.civil-shoulder.top, .civil-shoulder.bottom {
  left: 0; right: 0; height: 4.15%;
  background: linear-gradient(90deg,
    rgba(112,112,104,.38) 0 38.05%,
    transparent 38.05% 61.95%,
    rgba(112,112,104,.38) 61.95% 100%);
}
.civil-shoulder.top { top: 32.95%; }
.civil-shoulder.bottom { top: 62.9%; }
.civil-shoulder.left, .civil-shoulder.right {
  top: 0; bottom: 0; width: 4.15%;
  background: linear-gradient(180deg,
    rgba(112,112,104,.38) 0 36.95%,
    transparent 36.95% 63.05%,
    rgba(112,112,104,.38) 63.05% 100%);
}
.civil-shoulder.left { left: 38%; }
.civil-shoulder.right { left: 57.85%; }
.civil-crosswalk { z-index: 4; background-image: repeating-linear-gradient(90deg, rgba(248,250,244,.96) 0 15px, transparent 15px 27px); opacity: .92; }
.crosswalk-top, .crosswalk-bottom { left: 42%; width: 16%; height: 2.9%; }
.crosswalk-top { top: 34.05%; }
.crosswalk-bottom { top: 63.05%; }
.crosswalk-left, .crosswalk-right {
  top: 37%; height: 26%; width: 2.9%;
  background-image: repeating-linear-gradient(180deg, rgba(248,250,244,.96) 0 15px, transparent 15px 27px);
}
.crosswalk-left { left: 39.05%; }
.crosswalk-right { left: 58.05%; }
.civil-driveway {
  background: linear-gradient(180deg, rgba(173,163,145,.88), rgba(200,190,171,.76));
  box-shadow: inset 0 0 0 1px rgba(88,77,59,.22), 0 12px 20px rgba(52,49,41,.08);
  border-radius: 8px; overflow: hidden;
}
.civil-driveway::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.20) 0 10%, transparent 10% 90%, rgba(255,255,255,.18) 90% 100%),
    linear-gradient(180deg, rgba(108,97,79,.10), transparent 28%, transparent 72%, rgba(108,97,79,.12));
  opacity: .7;
}
.civil-driveway::after {
  content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px;
  background: rgba(120,107,87,.22);
}
.driveway-nw { width: 13.5%; height: 10.8%; left: 14.8%; top: 29.1%; transform: skewX(-17deg) rotate(-2deg); }
.driveway-se { width: 14.5%; height: 9.8%; right: 13.2%; bottom: 23.2%; transform: skewX(16deg) rotate(2deg); }
.civil-parcel { position: absolute; z-index: 4; padding: .8rem .9rem; width: 26%; min-height: 16%; border-radius: 18px; background: linear-gradient(180deg, rgba(246,248,242,.92), rgba(238,243,234,.88)); border: 1px solid rgba(79,106,82,.14); box-shadow: 0 18px 36px rgba(43,63,42,.10); }
.civil-parcel strong { display: block; color: var(--text); font-size: .95rem; margin-bottom: .18rem; }
.civil-parcel span { display: block; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.parcel-nw { left: 1rem; top: 1.2rem; }
.parcel-ne { right: 1rem; top: 1.2rem; }
.parcel-sw { left: 1rem; bottom: 1rem; }
.parcel-se { right: 1rem; bottom: 1rem; }
.civil-hotspot { position: absolute; z-index: 6; border: 1px solid rgba(79,106,82,.20); border-radius: 999px; padding: .44rem .74rem; background: rgba(248,250,244,.88); color: var(--text); font-size: .76rem; font-weight: 800; letter-spacing: .03em; }
.civil-hotspot.active { background: var(--accent); color: #f5f7f2; border-color: transparent; }
.hotspot-travel { left: 50%; top: 52%; transform: translate(-50%, -50%); }
.hotspot-shoulder { left: 68%; top: 58%; }
.hotspot-sidewalk { left: 6%; bottom: 7%; }
.hotspot-driveway { right: 5%; bottom: 12%; }
.hotspot-utility { left: 50%; top: 16%; transform: translateX(-50%); }
.civil-detector { border: 2px dashed rgba(201,236,219,.0); background: rgba(153,198,172,.12); position: absolute; z-index: 5; transition: all .15s ease; }
.civil-detector.active { border-color: rgba(78,168,116,.82); background: rgba(138,210,166,.34); box-shadow: 0 0 0 3px rgba(78,168,116,.14); }
.detector-west, .detector-east { width: 7%; height: 5%; top: 47%; }
.detector-west { left: 31%; }
.detector-east { right: 31%; }
.detector-north, .detector-south { width: 5%; height: 7%; left: 47.4%; }
.detector-north { top: 24%; }
.detector-south { bottom: 24%; }
.civil-signal { position: absolute; z-index: 7; width: 34px; height: 100px; border: 0; border-radius: 14px; padding: .35rem; background: #2f3832; box-shadow: 0 10px 20px rgba(19,26,20,.25); display: flex; flex-direction: column; justify-content: space-between; }
.civil-signal span { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: rgba(206,214,203,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.signal-nw { left: 36.2%; top: 26.6%; }
.signal-ne { left: 58.2%; top: 26.6%; }
.signal-sw { left: 36.2%; top: 63.4%; }
.signal-se { left: 58.2%; top: 63.4%; }
.civil-signal.signal-red span:nth-child(1), .civil-signal.signal-red span:nth-child(2) { opacity: .35; }
.civil-signal.signal-red span:nth-child(3) { background: #e55d5d; box-shadow: 0 0 14px rgba(229,93,93,.58); }
.civil-signal.signal-yellow span:nth-child(1), .civil-signal.signal-yellow span:nth-child(3) { opacity: .35; }
.civil-signal.signal-yellow span:nth-child(2) { background: #ebd467; box-shadow: 0 0 14px rgba(235,212,103,.58); }
.civil-signal.signal-green span:nth-child(2), .civil-signal.signal-green span:nth-child(3) { opacity: .35; }
.civil-signal.signal-green span:nth-child(1) { background: #6fd588; box-shadow: 0 0 14px rgba(111,213,136,.55); }
.civil-vehicle-layer, .civil-ped-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.civil-vehicle { position: absolute; width: 26px; height: 14px; border-radius: 6px; background: #607d67; box-shadow: 0 4px 12px rgba(20,30,22,.24); transform-origin: center center; }
.civil-vehicle::after { content: ""; position: absolute; inset: 2px 5px; border-radius: 4px; background: rgba(245,248,242,.36); }
.civil-ped { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #2c4032; box-shadow: 0 0 0 4px rgba(248,250,244,.28); }
.civil-scene-footer { position: absolute; left: 1rem; bottom: 1rem; z-index: 8; font-size: .77rem; color: var(--muted); background: rgba(248,250,244,.82); padding: .5rem .75rem; border-radius: 999px; border: 1px solid rgba(79,106,82,.14); }

.civil-fact-grid, .civil-utility-grid { display: grid; gap: .7rem; }
.civil-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1rem 0; }
.civil-fact-grid div, .civil-utility-card { border: 1px solid var(--line); border-radius: 16px; padding: .85rem .9rem; background: color-mix(in srgb, var(--bg-soft) 55%, white 45%); }
.civil-fact-grid span, .civil-utility-card span { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .28rem; }
.civil-fact-grid strong, .civil-utility-card strong { color: var(--text); font-size: .95rem; }
.civil-inspector-actions { margin: 1rem 0; }
.civil-inspector-note { margin-top: 1rem; font-size: .9rem; }

.civil-cross-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .85rem; }
.civil-cross-preview { border: 1px solid var(--line); border-radius: 20px; padding: 1rem; background: linear-gradient(180deg, rgba(243,247,239,.82), rgba(233,240,230,.9)); min-height: 360px; }
.civil-surface-strip { display: flex; width: 100%; border-radius: 999px; overflow: hidden; border: 1px solid rgba(79,106,82,.18); margin-bottom: 1rem; }
.civil-surface-segment { padding: .45rem .4rem; text-align: center; font-size: .76rem; font-weight: 800; color: var(--text); background: rgba(245,247,241,.94); border-right: 1px solid rgba(79,106,82,.10); }
.civil-surface-segment:last-child { border-right: 0; }
.civil-surface-segment.travel { background: rgba(87,94,90,.92); color: #f5f7f2; }
.civil-surface-segment.shoulder { background: rgba(124,129,120,.70); color: #25342a; }
.civil-surface-segment.sidewalk { background: rgba(243,241,234,.96); }
.civil-surface-segment.turf { background: rgba(200,219,182,.82); }
.civil-layer-stack { display: grid; gap: .55rem; }
.civil-layer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; padding: .7rem .85rem; border-radius: 14px; color: var(--text); border: 1px solid rgba(79,106,82,.10); }
.civil-layer strong { font-size: .95rem; }
.civil-layer span { color: var(--muted); font-size: .83rem; }
.civil-layer small { font-size: .9rem; font-weight: 900; color: var(--text); }
.civil-layer.surface { background: rgba(56,64,60,.92); color: #f5f7f2; }
.civil-layer.surface span, .civil-layer.surface small { color: #edf2eb; }
.civil-layer.asphalt { background: rgba(89,98,93,.88); color: #f5f7f2; }
.civil-layer.asphalt span, .civil-layer.asphalt small { color: #edf2eb; }
.civil-layer.base { background: rgba(194,185,160,.78); }
.civil-layer.subgrade { background: rgba(210,202,181,.86); }
.civil-layer.soil { background: rgba(184,168,144,.74); }
.civil-section-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.civil-section-meta div { border-top: 1px solid var(--line); padding-top: .8rem; font-size: .9rem; color: var(--muted); }
.civil-section-meta strong { display: block; margin-bottom: .22rem; color: var(--text); }
.civil-reference-card img { width: 100%; border-radius: 18px; border: 1px solid var(--line); background: #fff; margin: .8rem 0 1rem; }
.compact-list { margin: 0; padding-left: 1.15rem; }
.civil-capability-columns article { min-height: 100%; }

@media (max-width: 1180px) {
  .civil-layout, .civil-details-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .civil-scene { min-height: 420px; }
  .civil-toolbar, .civil-cross-header { flex-direction: column; align-items: flex-start; }
  .civil-fact-grid, .civil-section-meta { grid-template-columns: 1fr; }
  .civil-parcel { width: 38%; min-height: 13%; padding: .55rem .65rem; }
  .civil-parcel span { display: none; }
  .civil-scene-footer { max-width: calc(100% - 2rem); }
}

/* Civil 0.2 corridor refinements */
.civil-toolbar { flex-wrap: wrap; }
.civil-demand-row { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; width:100%; padding-top:.65rem; border-top:1px solid var(--line); }
.civil-demand-row > span { color:var(--muted); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800; margin-right:.25rem; }
.civil-scene { min-height: 590px; }
.civil-signal { width: 28px; height: 78px; border-radius: 10px; padding:.3rem; opacity:.96; }
.signal-nw { left: 38.4%; top: 31.1%; }
.signal-ne { left: 58.8%; top: 31.1%; }
.signal-sw { left: 38.4%; top: 60.7%; }
.signal-se { left: 58.8%; top: 60.7%; }
.civil-hotspot { font-size:.7rem; padding:.36rem .58rem; }
.hotspot-travel { left:50%; top:56.5%; }
.hotspot-shoulder { left:70%; top:62%; }
.hotspot-sidewalk { left:5.5%; bottom:8.5%; }
.hotspot-driveway { right:5%; bottom:11.5%; }
.hotspot-utility { left:50%; top:18%; }
.civil-turn-pocket { position:absolute; z-index:5; background:rgba(70,76,73,.92); border:1px solid rgba(255,255,255,.10); display:grid; place-items:center; color:rgba(245,247,242,.78); font-weight:900; font-size:1rem; pointer-events:none; }
.pocket-eb { left:34%; top:45.5%; width:12%; height:4.8%; clip-path:polygon(0 0,100% 0,82% 100%,0 100%); }
.pocket-wb { right:34%; top:50.2%; width:12%; height:4.8%; clip-path:polygon(18% 0,100% 0,100% 100%,0 100%); }
.pocket-nb { left:46.2%; top:31%; width:4.8%; height:14%; clip-path:polygon(0 18%,100% 0,100% 100%,0 100%); }
.pocket-sb { left:51%; bottom:31%; width:4.8%; height:14%; clip-path:polygon(0 0,100% 0,100% 82%,0 100%); }
.civil-turn-pocket span { transform:scale(.85); }
.civil-queue-readout { position:absolute; z-index:6; padding:.25rem .42rem; border-radius:999px; background:rgba(37,54,42,.74); color:#f3f6ef; font-size:.63rem; letter-spacing:.04em; pointer-events:none; }
.queue-west { left:26%; top:43%; }
.queue-east { right:26%; top:55%; }
.queue-north { left:52%; top:24%; }
.queue-south { left:43%; bottom:23%; }
.civil-vehicle.turning { background:#8b7054; }
.civil-vehicle.parcel-trip { box-shadow:0 0 0 2px rgba(255,219,104,.26), 0 4px 12px rgba(20,30,22,.24); }
.civil-ped.waiting { opacity:.45 !important; }
.civil-coordination-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin-top:1rem; }
.coord-controller { border:1px solid var(--line); border-radius:14px; padding:.65rem; background:color-mix(in srgb,var(--bg-soft) 64%,white 36%); }
.coord-controller span { display:block; font-size:.68rem; letter-spacing:.08em; color:var(--muted); margin-bottom:.45rem; font-weight:800; }
.coord-controller > div { height:8px; border-radius:999px; background:rgba(82,109,81,.13); overflow:hidden; }
.coord-controller i { display:block; height:100%; width:0%; border-radius:inherit; background:var(--accent); transition:width .18s linear, background-color .18s ease; }
.coord-controller strong { display:block; margin-top:.35rem; font-size:.78rem; color:var(--text); }
.coord-controller.active { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }

@media (max-width: 900px) {
  .civil-scene { min-height:520px; }
  .civil-queue-readout { display:none; }
  .civil-turn-pocket { opacity:.72; }
  .civil-signal { transform:scale(.84); transform-origin:center; }
}

/* Civil 0.21 roadway visual-quality pass */
.civil-scene {
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.20), transparent 15rem),
    linear-gradient(180deg, #d9e6d2 0%, #d3e0cb 100%);
}
.civil-road {
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 18%, rgba(0,0,0,.035) 50%, transparent 82%, rgba(255,255,255,.02)),
    #4e5350;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), inset 0 12px 18px rgba(255,255,255,.018), inset 0 -12px 18px rgba(0,0,0,.05);
}
.road-horizontal { top: 34%; height: 32%; }
.road-vertical { left: 39%; width: 22%; }
.road-horizontal::before,
.road-horizontal::after,
.road-vertical::before,
.road-vertical::after { display:none; }
.civil-median { display:none; }
.civil-marking,
.civil-stopbar { position:absolute; z-index:4; pointer-events:none; }
.centerline-h-west,
.centerline-h-east { top:calc(50% - 2px); height:4px; border-top:2px solid rgba(226,190,76,.95); border-bottom:2px solid rgba(226,190,76,.95); }
.centerline-h-west { left:0; right:61%; }
.centerline-h-east { left:61%; right:0; }
.centerline-v-north,
.centerline-v-south { left:calc(50% - 2px); width:4px; border-left:2px solid rgba(226,190,76,.95); border-right:2px solid rgba(226,190,76,.95); }
.centerline-v-north { top:0; bottom:66%; }
.centerline-v-south { top:66%; bottom:0; }
.lane-h-west-a,.lane-h-west-b,.lane-h-east-a,.lane-h-east-b { height:2px; background:repeating-linear-gradient(90deg,rgba(245,247,243,.78) 0 22px,transparent 22px 40px); }
.lane-h-west-a { left:0; right:61%; top:42.1%; }
.lane-h-west-b { left:0; right:61%; top:57.7%; }
.lane-h-east-a { left:61%; right:0; top:42.1%; }
.lane-h-east-b { left:61%; right:0; top:57.7%; }
.lane-v-north-a,.lane-v-north-b,.lane-v-south-a,.lane-v-south-b { width:2px; background:repeating-linear-gradient(180deg,rgba(245,247,243,.78) 0 22px,transparent 22px 40px); }
.lane-v-north-a { top:0; bottom:66%; left:44.6%; }
.lane-v-north-b { top:0; bottom:66%; left:55.2%; }
.lane-v-south-a { top:66%; bottom:0; left:44.6%; }
.lane-v-south-b { top:66%; bottom:0; left:55.2%; }
.civil-stopbar { background:rgba(250,250,247,.97); box-shadow:0 0 0 1px rgba(255,255,255,.18); z-index:5; }
.stopbar-west { width:5px; height:14.8%; left:37.65%; top:42.6%; }
.stopbar-east { width:5px; height:14.8%; right:37.65%; top:42.6%; }
.stopbar-north { height:5px; width:10.9%; top:32.55%; left:44.55%; }
.stopbar-south { height:5px; width:10.9%; bottom:32.55%; left:44.55%; }
.civil-turn-pocket {
  background:rgba(74,79,76,.96);
  border:0;
  color:rgba(245,247,242,.82);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
}
.pocket-eb { left:31.6%; top:47.4%; width:8.8%; height:5.2%; clip-path:polygon(0 0,100% 0,78% 100%,0 100%); }
.pocket-wb { right:31.6%; top:47.4%; width:8.8%; height:5.2%; clip-path:polygon(22% 0,100% 0,100% 100%,0 100%); }
.pocket-nb { left:47.4%; top:29.7%; width:5.2%; height:8.6%; clip-path:polygon(0 20%,100% 0,100% 100%,0 100%); }
.pocket-sb { left:47.4%; bottom:29.7%; width:5.2%; height:8.6%; clip-path:polygon(0 0,100% 0,100% 80%,0 100%); }
.civil-crosswalk { opacity:.92; }
.crosswalk-top { top:31.2%; }
.crosswalk-bottom { top:66.1%; }
.crosswalk-left { left:37.2%; }
.crosswalk-right { left:60.1%; }
.crosswalk-top,.crosswalk-bottom { left:39%; width:22%; height:2.2%; background-image:repeating-linear-gradient(90deg,rgba(247,248,244,.96) 0 13px,transparent 13px 23px); }
.crosswalk-left,.crosswalk-right { top:34%; height:32%; width:2.2%; background-image:repeating-linear-gradient(180deg,rgba(247,248,244,.96) 0 13px,transparent 13px 23px); }
.civil-shoulder.top { top:30%; height:4%; }
.civil-shoulder.bottom { top:66%; height:4%; }
.civil-shoulder.left { left:35%; width:4%; }
.civil-shoulder.right { left:61%; width:4%; }
.civil-sidewalk.top { top:26%; height:4%; }
.civil-sidewalk.bottom { top:70%; height:4%; }
.civil-sidewalk.left { left:31%; width:4%; }
.civil-sidewalk.right { left:65%; width:4%; }
.civil-driveway { opacity:.72; }
.civil-signal { z-index:8; transform:scale(.82); }
.signal-nw { left:36.3%; top:29.2%; }
.signal-ne { left:61.1%; top:29.2%; }
.signal-sw { left:36.3%; top:62.6%; }
.signal-se { left:61.1%; top:62.6%; }
.civil-detector { border-radius:5px; }
.detector-west,.detector-east { width:5.5%; height:4%; top:48%; }
.detector-west { left:30.5%; }
.detector-east { right:30.5%; }
.detector-north,.detector-south { width:4%; height:5.5%; left:48%; }
.detector-north { top:23.5%; }
.detector-south { bottom:23.5%; }
.civil-vehicle { width:24px; height:13px; border-radius:5px; box-shadow:0 3px 7px rgba(18,28,20,.20); }
.civil-vehicle.turning { background:#806d57; }
.civil-queue-readout { opacity:.78; }
.queue-west { left:27%; top:42.2%; }
.queue-east { right:27%; top:56%; }
.queue-north { left:53%; top:22%; }
.queue-south { left:42%; bottom:21.5%; }
.hotspot-travel { top:59%; }
.hotspot-shoulder { left:71%; top:64%; }
.hotspot-utility { top:16.5%; }
@media (max-width:900px){
  .civil-signal{transform:scale(.72)}
  .civil-marking,.civil-stopbar{opacity:.86}
}


/* Civil 0.22 — explicit U.S. right-hand traffic cues. */
.civil-direction-arrow {
  position:absolute;
  z-index:7;
  color:rgba(245,247,242,.76);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-shadow:0 1px 2px rgba(12,20,14,.45);
  pointer-events:none;
  background:rgba(35,45,39,.32);
  border-radius:999px;
  padding:.22rem .42rem;
}
.arrow-wb { left:10%; top:43.2%; }
.arrow-eb { right:10%; top:55.2%; }
.arrow-sb { left:43.2%; top:10%; transform:rotate(90deg); }
.arrow-nb { left:54.4%; bottom:10%; transform:rotate(90deg); }
.civil-vehicle::before {
  content:"";
  position:absolute;
  right:-2px;
  top:3px;
  width:3px;
  height:7px;
  border-radius:0 3px 3px 0;
  background:rgba(242,245,216,.92);
  box-shadow:0 0 5px rgba(240,244,200,.55);
}


/* Civil 0.26 pedestrian geometry / stop-bar alignment pass */
.civil-sidewalk.top,
.civil-sidewalk.bottom {
  left: 0;
  right: 0;
  height: 4.2%;
  background: linear-gradient(90deg,
    rgba(245,244,236,.97) 0 34.0%,
    transparent 34.0% 66.0%,
    rgba(245,244,236,.97) 66.0% 100%);
}
.civil-sidewalk.top { top: 28.7%; }
.civil-sidewalk.bottom { top: 67.1%; }
.civil-sidewalk.left,
.civil-sidewalk.right {
  top: 0;
  bottom: 0;
  width: 4.2%;
  background: linear-gradient(180deg,
    rgba(245,244,236,.97) 0 28.7%,
    transparent 28.7% 71.3%,
    rgba(245,244,236,.97) 71.3% 100%);
}
.civil-sidewalk.left { left: 33.8%; }
.civil-sidewalk.right { left: 62.0%; }

/* Zebra markings line up directly with the adjoining paved sidewalk bands. */
.crosswalk-top,
.crosswalk-bottom {
  left: 38.0%;
  width: 24.0%;
  height: 4.2%;
  background-image: repeating-linear-gradient(90deg,
    rgba(248,250,244,.97) 0 15px,
    transparent 15px 28px);
}
.crosswalk-top { top: 28.7%; }
.crosswalk-bottom { top: 67.1%; }
.crosswalk-left,
.crosswalk-right {
  top: 32.9%;
  height: 34.2%;
  width: 4.2%;
  background-image: repeating-linear-gradient(180deg,
    rgba(248,250,244,.97) 0 15px,
    transparent 15px 28px);
}
.crosswalk-left { left: 33.8%; }
.crosswalk-right { left: 62.0%; }

/* Stop lines sit on the vehicle side of the crosswalk with a distinct buffer. */
.stopbar-west {
  width: 5px;
  height: 15.5%;
  left: 31.9%;
  top: 42.25%;
}
.stopbar-east {
  width: 5px;
  height: 15.5%;
  right: 31.9%;
  top: 42.25%;
}
.stopbar-north {
  height: 5px;
  width: 10.8%;
  top: 25.9%;
  left: 44.6%;
}
.stopbar-south {
  height: 5px;
  width: 10.8%;
  bottom: 25.9%;
  left: 44.6%;
}

/* Corner aprons visually connect longitudinal sidewalks into the crossing path. */
.civil-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(circle at 36% 31%, rgba(245,244,236,.98) 0 20px, transparent 21px),
    radial-gradient(circle at 64% 31%, rgba(245,244,236,.98) 0 20px, transparent 21px),
    radial-gradient(circle at 36% 69%, rgba(245,244,236,.98) 0 20px, transparent 21px),
    radial-gradient(circle at 64% 69%, rgba(245,244,236,.98) 0 20px, transparent 21px);
}

.civil-ped {
  width: 11px;
  height: 11px;
  background: #2d4032;
  box-shadow: 0 0 0 3px rgba(248,250,244,.42), 0 4px 8px rgba(22,34,25,.20);
  transition: opacity .18s ease;
}
.civil-ped.waiting {
  animation: civilPedWait 1.6s ease-in-out infinite alternate;
}
@keyframes civilPedWait {
  from { box-shadow: 0 0 0 3px rgba(248,250,244,.34), 0 4px 8px rgba(22,34,25,.16); }
  to { box-shadow: 0 0 0 5px rgba(122,160,128,.24), 0 4px 8px rgba(22,34,25,.22); }
}


/* Civil 0.28 stop-bar setback pass */
/* Stop bars sit one setback before the crosswalk, approximating the 4 ft offset. */
.stopbar-west {
  width: 5px;
  height: 10.8%;
  left: 32.15%;
  top: 56.1%;
}
.stopbar-east {
  width: 5px;
  height: 10.8%;
  left: 66.35%;
  top: 33.1%;
}
.stopbar-north {
  height: 5px;
  width: 11.8%;
  left: 38.25%;
  top: 27.15%;
}
.stopbar-south {
  height: 5px;
  width: 11.8%;
  left: 49.95%;
  top: 71.35%;
}
/* Keep the crosswalk footprint slightly tighter so pedestrians stay visually centered. */
.crosswalk-left,
.crosswalk-right {
  width: 4.0%;
}
.crosswalk-top,
.crosswalk-bottom {
  height: 4.0%;
}


/* Civil 0.29 horizontal stop-bar correction pass */
/* West/east approach stop bars now span the full entering-lane width and line up with vehicle stopping. */
.stopbar-west {
  width: 5px;
  height: 17.8%;
  left: 31.65%;
  top: 48.55%;
}
.stopbar-east {
  width: 5px;
  height: 17.8%;
  left: 66.25%;
  top: 32.95%;
}

/* Civil 0.31 commercial driveway / pedestrian-yield pass */
.civil-driveway {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  z-index: 4;
}
.civil-driveway::before,
.civil-driveway::after { content: none !important; }
.driveway-nw {
  left: 14.2%;
  top: 20.5%;
  width: 14.5%;
  height: 17.2%;
}
.driveway-se {
  right: 12.6%;
  top: 62.7%;
  width: 15.2%;
  height: 18.0%;
}
.driveway-throat {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #a79f92, #b8afa0);
  box-shadow: inset 0 0 0 1px rgba(82,74,63,.26);
}
.driveway-nw .driveway-throat {
  clip-path: polygon(18% 0,82% 0,100% 100%,0 100%);
  border-radius: 8px 8px 0 0;
}
.driveway-se .driveway-throat {
  clip-path: polygon(0 0,100% 0,82% 100%,18% 100%);
  border-radius: 0 0 8px 8px;
}
.driveway-sidewalk-crossing {
  position: absolute;
  left: 2%;
  right: 2%;
  height: 22%;
  background: rgba(245,244,236,.98);
  box-shadow: inset 0 1px 0 rgba(124,137,116,.22), inset 0 -1px 0 rgba(124,137,116,.22);
  z-index: 2;
}
.driveway-nw .driveway-sidewalk-crossing { top: 46%; }
.driveway-se .driveway-sidewalk-crossing { top: 25%; }
.driveway-curb-return {
  position: absolute;
  width: 28%;
  height: 34%;
  bottom: -1px;
  border-bottom: 3px solid rgba(245,244,236,.98);
  z-index: 3;
}
.driveway-nw .driveway-curb-return.return-a {
  left: -4%;
  border-left: 3px solid rgba(245,244,236,.98);
  border-bottom-left-radius: 26px;
}
.driveway-nw .driveway-curb-return.return-b {
  right: -4%;
  border-right: 3px solid rgba(245,244,236,.98);
  border-bottom-right-radius: 26px;
}
.driveway-se .driveway-curb-return {
  top: -1px;
  bottom: auto;
  border-bottom: 0;
  border-top: 3px solid rgba(245,244,236,.98);
}
.driveway-se .driveway-curb-return.return-a {
  left: -4%;
  border-left: 3px solid rgba(245,244,236,.98);
  border-top-left-radius: 26px;
}
.driveway-se .driveway-curb-return.return-b {
  right: -4%;
  border-right: 3px solid rgba(245,244,236,.98);
  border-top-right-radius: 26px;
}
/* Give the commercial access points a short throat before the parking field. */
.driveway-nw::after,
.driveway-se::after {
  content: '' !important;
  position: absolute;
  left: 28%;
  right: 28%;
  height: 20%;
  background: rgba(167,159,145,.95);
  box-shadow: inset 0 0 0 1px rgba(82,74,63,.20);
  z-index: 1;
}
.driveway-nw::after { top: -17%; }
.driveway-se::after { bottom: -17%; }

/* Civil 0.32 driveway aesthetic cleanup pass */
/* Replace the earlier curb-return marker treatment with a cleaner commercial-driveway graphic. */
.driveway-nw {
  left: 13.8%;
  top: 21.1%;
  width: 15.1%;
  height: 17.4%;
  transform: none;
}
.driveway-se {
  right: 12.4%;
  top: 63.1%;
  width: 15.5%;
  height: 17.2%;
  transform: none;
}
.civil-driveway {
  background: linear-gradient(180deg, rgba(183,174,159,.94), rgba(204,195,178,.90));
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(89,79,63,.18), 0 10px 16px rgba(44,39,31,.08);
  overflow: visible;
}
.civil-driveway::before {
  opacity: .52;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.12) 8% 11%, transparent 11% 89%, rgba(255,255,255,.12) 89% 92%, transparent 92% 100%),
    linear-gradient(180deg, rgba(97,87,70,.08), transparent 30%, transparent 70%, rgba(97,87,70,.10));
}
/* Short throat beyond the property line / inside the parcel. */
.driveway-nw::after,
.driveway-se::after {
  content: '' !important;
  position: absolute;
  left: 30%;
  right: 30%;
  height: 16%;
  background: linear-gradient(180deg, rgba(181,171,155,.95), rgba(194,184,168,.95));
  box-shadow: inset 0 0 0 1px rgba(83,74,61,.14);
  z-index: 0;
}
.driveway-nw::after {
  top: -13%;
  border-radius: 10px 10px 0 0;
}
.driveway-se::after {
  bottom: -13%;
  border-radius: 0 0 10px 10px;
}
/* Main paved apron widening into the roadway. */
.driveway-throat {
  inset: 0 7% 0 7%;
  background: linear-gradient(180deg, #b7aea0, #cdbfac);
  box-shadow: inset 0 0 0 1px rgba(87,78,64,.22), inset 0 12px 18px rgba(255,255,255,.06);
}
.driveway-nw .driveway-throat {
  clip-path: polygon(34% 0,66% 0,75% 28%,87% 60%,100% 100%,0 100%,13% 60%,25% 28%);
  border-radius: 10px 10px 0 0;
}
.driveway-se .driveway-throat {
  clip-path: polygon(0 0,100% 0,87% 40%,75% 72%,66% 100%,34% 100%,25% 72%,13% 40%);
  border-radius: 0 0 10px 10px;
}
/* Sidewalk continues through the driveway apron. */
.driveway-sidewalk-crossing {
  left: -2%;
  right: -2%;
  height: 16%;
  background: linear-gradient(180deg, rgba(245,244,237,.98), rgba(238,235,226,.98));
  box-shadow: inset 0 1px 0 rgba(127,138,118,.26), inset 0 -1px 0 rgba(127,138,118,.26), 0 0 0 1px rgba(131,141,122,.08);
  z-index: 2;
}
.driveway-nw .driveway-sidewalk-crossing { top: 48%; }
.driveway-se .driveway-sidewalk-crossing { top: 22%; }
/* Hide the previous corner marker brackets that read as stray symbols at the curb line. */
.driveway-curb-return {
  display: none;
}

/* Civil 0.33 visual-quality pass */
/* Asphalt receives a restrained aggregate texture and clearer pavement edges. */
.civil-road {
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.030) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 66%, rgba(0,0,0,.050) 0 1px, transparent 1.6px),
    linear-gradient(180deg, #4d5350, #474d4a);
  background-size: 22px 22px, 28px 28px, auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 28px rgba(0,0,0,.055);
}
/* Concrete walk has subtle panel joints instead of reading as one solid white band. */
.civil-sidewalk.top,
.civil-sidewalk.bottom {
  background-image:
    repeating-linear-gradient(90deg, rgba(107,122,106,.13) 0 1px, transparent 1px 42px),
    linear-gradient(90deg, rgba(245,244,236,.97) 0 34%, transparent 34% 66%, rgba(245,244,236,.97) 66% 100%);
}
.civil-sidewalk.left,
.civil-sidewalk.right {
  background-image:
    repeating-linear-gradient(180deg, rgba(107,122,106,.13) 0 1px, transparent 1px 42px),
    linear-gradient(180deg, rgba(245,244,236,.97) 0 28.7%, transparent 28.7% 71.3%, rgba(245,244,236,.97) 71.3% 100%);
}
/* A thin curb/gutter edge improves the separation between roadway and pedestrian space. */
.civil-shoulder.top { box-shadow: inset 0 -2px 0 rgba(234,235,227,.80); }
.civil-shoulder.bottom { box-shadow: inset 0 2px 0 rgba(234,235,227,.80); }
.civil-shoulder.left { box-shadow: inset -2px 0 0 rgba(234,235,227,.80); }
.civil-shoulder.right { box-shadow: inset 2px 0 0 rgba(234,235,227,.80); }

/* Accessible corner ramps / detectable warning pads. */
.civil-curb-ramp {
  position: absolute;
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(135deg, rgba(241,240,232,.98), rgba(222,226,216,.98));
  box-shadow: inset 0 0 0 1px rgba(107,123,106,.20), 0 2px 5px rgba(34,47,36,.10);
}
.civil-curb-ramp::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background:
    radial-gradient(circle, rgba(149,139,63,.72) 0 1px, transparent 1.2px),
    #d8cf68;
  background-size: 4px 4px;
  box-shadow: inset 0 0 0 1px rgba(133,124,55,.22);
}
.ramp-nw { left: 34.6%; top: 30.5%; }
.ramp-ne { left: 62.1%; top: 30.5%; }
.ramp-sw { left: 34.6%; top: 66.5%; }
.ramp-se { left: 62.1%; top: 66.5%; }
.ramp-nw::after, .ramp-sw::after { right: 4px; }
.ramp-ne::after, .ramp-se::after { left: 4px; }
.ramp-nw::after, .ramp-ne::after { bottom: 4px; }
.ramp-sw::after, .ramp-se::after { top: 4px; }

/* Simple pavement direction arrows clarify lane flow without adding UI labels. */
.civil-lane-arrow {
  position: absolute;
  z-index: 5;
  color: rgba(245,247,242,.78);
  font: 900 25px/1 ui-sans-serif, system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  pointer-events: none;
}
.lane-arrow-wb { left: 22%; top: 40.1%; }
.lane-arrow-eb { right: 22%; top: 56.1%; }
.lane-arrow-sb { left: 42.8%; top: 17%; }
.lane-arrow-nb { left: 55.9%; bottom: 15%; }

/* Commercial driveway graphic: 20–30 ft throat feel, 10 ft-radius-style flares, and visible sidewalk priority. */
.driveway-nw,
.driveway-se {
  filter: saturate(.82) contrast(.98);
}
.driveway-throat {
  background:
    linear-gradient(90deg, rgba(82,73,61,.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #b7aea0, #cabda9);
  background-size: 32px 100%, auto;
}
.driveway-sidewalk-crossing {
  box-shadow:
    inset 0 1px 0 rgba(121,135,116,.30),
    inset 0 -1px 0 rgba(121,135,116,.30),
    0 0 0 1px rgba(131,141,122,.07);
}
.driveway-flow {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 3;
  transform: translateX(-50%);
  color: rgba(82,74,61,.44);
  font: 900 18px/1 ui-sans-serif, system-ui, sans-serif;
}
.driveway-se .driveway-flow { top: 48%; }

/* Detector loops read as pavement equipment rather than translucent UI cards. */
.civil-detector {
  background: transparent;
  border: 2px solid rgba(104,178,132,.44);
  border-radius: 5px;
  box-shadow: inset 0 0 0 3px rgba(107,192,139,.08);
}
.civil-detector::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(104,178,132,.30);
  border-radius: 3px;
}
.civil-detector.active {
  border-color: rgba(71,173,109,.85);
  background: rgba(106,203,141,.10);
  box-shadow: inset 0 0 0 3px rgba(78,181,116,.13), 0 0 0 2px rgba(78,181,116,.10);
}
/* Traffic signal heads get a narrower housing and visible support stem. */
.civil-signal {
  width: 29px;
  height: 88px;
  border-radius: 11px;
  padding: .32rem;
  box-shadow: 0 7px 13px rgba(19,26,20,.24);
}
.civil-signal::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 3px;
  height: 18px;
  background: rgba(62,71,65,.82);
  transform: translateX(-50%);
  bottom: -16px;
  border-radius: 2px;
}
/* Vehicles get a quieter shadow and small front-glass/read direction detail. */
.civil-vehicle {
  box-shadow: 0 3px 7px rgba(20,30,22,.20);
  border: 1px solid rgba(255,255,255,.10);
}
.civil-vehicle::after {
  inset: 2px 4px 2px 7px;
  background: linear-gradient(90deg, rgba(245,248,242,.18), rgba(245,248,242,.52));
}
/* Reduce interface-label dominance inside the model. */
.civil-queue-readout,
.civil-direction-arrow {
  opacity: .78;
  transform: scale(.94);
}
.civil-hotspot {
  box-shadow: 0 2px 8px rgba(40,56,42,.08);
}

/* Civil 0.34 signal inspector overlay */
.civil-layout { grid-template-columns: minmax(0, 1fr); }
.civil-scene-card { min-width: 0; }
.civil-model-heading { min-width: 230px; }
.civil-model-heading-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.civil-inspector-launch {
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 999px;
  padding: .46rem .72rem;
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
  color: var(--text);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .03em;
}
.civil-inspector-launch:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 17%, white 83%); }

.civil-inspector-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem;
  background: rgba(28, 39, 30, .48);
  backdrop-filter: blur(8px);
}
.civil-inspector-overlay[hidden] { display: none; }
.civil-inspector-modal {
  width: min(900px, calc(100vw - 2rem));
  max-height: min(760px, calc(100vh - 2rem));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 24px;
  background: color-mix(in srgb, var(--panel) 96%, white 4%);
  box-shadow: 0 34px 100px rgba(18, 29, 21, .36);
}
.civil-inspector-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.5rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.civil-inspector-modal-header h3 { margin: .25rem 0 .3rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.civil-inspector-modal-header p { max-width: 68ch; margin: 0; }
.civil-inspector-tabs {
  display: flex;
  gap: .3rem;
  padding: .65rem 1.15rem 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}
.civil-inspector-tab {
  flex: 0 0 auto;
  min-height: 42px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: .7rem .85rem .65rem;
  font-weight: 850;
  font-size: .82rem;
}
.civil-inspector-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.civil-inspector-tab-body { padding: 1.25rem 1.5rem 1.5rem; }
.civil-inspector-pane { display: grid; gap: 1rem; }
.civil-inspector-pane[hidden] { display: none; }
.civil-pane-intro { max-width: 70ch; }
.civil-pane-intro p { margin: .4rem 0 0; }
.civil-fact-grid-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.civil-status-explainer {
  border-left: 4px solid var(--accent-soft);
  padding: .85rem 1rem;
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
}
.civil-status-explainer strong { display: block; color: var(--text); margin-bottom: .25rem; }
.civil-status-explainer p { margin: 0; }
.civil-input-legend { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.civil-input-legend > div { position: relative; padding: 1rem 1rem 1rem 2.9rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--bg-soft) 58%, white 42%); }
.civil-input-legend strong { display: block; color: var(--text); margin-bottom: .25rem; }
.civil-input-legend p { margin: 0; font-size: .88rem; }
.civil-legend-swatch { position: absolute; left: 1rem; top: 1.1rem; width: 1.1rem; height: 1.1rem; }
.civil-legend-swatch.detector { border: 2px dashed #5fa974; background: rgba(95,169,116,.16); border-radius: 4px; }
.civil-legend-swatch.ped { border-radius: 50%; background: #2d4032; box-shadow: 0 0 0 3px rgba(122,160,128,.22); }
.civil-inspector-modal .civil-neighbor-stack { margin-bottom: .25rem; }
.civil-inspector-modal .civil-coordination-strip { margin-top: .25rem; }
.civil-phase-sequence { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
.civil-phase-sequence > div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .35rem .7rem;
  align-items: center;
  padding: .85rem .95rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-soft) 58%, white 42%);
}
.civil-phase-sequence > div > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--accent); color: #f7f9f5; font-size: .7rem; font-weight: 900; }
.civil-phase-sequence strong { color: var(--text); }
.civil-phase-sequence em { color: var(--accent); font-style: normal; font-weight: 850; font-size: .82rem; }
.civil-phase-sequence p { grid-column: 2 / 4; margin: 0; font-size: .84rem; }
body.civil-inspector-open { overflow: hidden; }

@media (max-width: 720px) {
  .civil-inspector-overlay { padding: .5rem; align-items: start; }
  .civil-inspector-modal { width: 100%; max-height: calc(100vh - 1rem); border-radius: 18px; }
  .civil-inspector-modal-header, .civil-inspector-tab-body { padding-left: 1rem; padding-right: 1rem; }
  .civil-fact-grid-status, .civil-input-legend, .civil-phase-sequence { grid-template-columns: 1fr; }
  .civil-phase-sequence p { grid-column: 2 / 4; }
}

/* Civil Lab 1.0A — map-first scenario foundation */
.civil-lab-section { padding-top: clamp(4rem, 7vw, 7rem); }
.civil-lab-heading { max-width: 980px; }
.civil-lab-heading h2 { max-width: 20ch; }
.civil-lab-shell {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, white 6%), var(--panel));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.civil-lab-projectbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 1rem;
  align-items: end;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-soft) 60%, white 40%);
}
.civil-project-name,
.civil-lab-pane label {
  display: grid;
  gap: .42rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .035em;
}
.civil-project-name input,
.civil-lab-pane input,
.civil-lab-pane select,
.civil-project-actions select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .72rem .78rem;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 76%, white 24%);
  outline: none;
}
.civil-project-name input:focus,
.civil-lab-pane input:focus,
.civil-lab-pane select:focus,
.civil-project-actions select:focus {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.civil-project-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.civil-project-actions select { width: 210px; }
.civil-lab-button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .62rem .82rem;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--text);
  font-weight: 800;
  font-size: .8rem;
}
.civil-lab-button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.civil-lab-button.primary { border-color: transparent; background: var(--accent); color: #f6f8f4; }
.civil-lab-button.danger { color: #7b4040; border-color: rgba(141,79,79,.34); }
.civil-lab-button:disabled { opacity: .48; cursor: not-allowed; }
.civil-lab-status {
  min-height: 34px;
  padding: .55rem 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 650 .74rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.civil-lab-status.success { color: #416749; }
.civil-lab-status.error { color: #8d4f4f; }

.civil-workflow-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
}
.civil-workflow-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 50px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  font-size: .8rem;
}
.civil-workflow-tab:last-child { border-right: 0; }
.civil-workflow-tab span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font: 800 .65rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.civil-workflow-tab.active { color: var(--text); background: color-mix(in srgb, var(--panel) 82%, white 18%); }
.civil-workflow-tab.active span { color: #f5f7f2; background: var(--accent); border-color: transparent; }

.civil-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(340px, .85fr);
  min-height: 610px;
}
.civil-map-panel { min-width: 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg-soft) 52%, white 48%); }
.civil-map-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
}
.civil-map-toolbar strong { display: block; margin-top: .18rem; color: var(--text); }
.civil-map-coordinates { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.civil-map-coordinates span {
  padding: .42rem .58rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 75%, transparent);
  color: var(--muted);
  font: 700 .69rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.civil-map { height: 520px; background: #dce5d6; }
.civil-map .maplibregl-canvas { outline: none; }
.civil-map .maplibregl-ctrl-group { border-radius: 10px; overflow: hidden; box-shadow: 0 7px 22px rgba(31,49,36,.14); }
.civil-map .maplibregl-popup-content { border-radius: 12px; color: #203127; font-size: .78rem; }
.civil-map-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1rem;
  color: var(--muted);
  font-size: .7rem;
  border-top: 1px solid var(--line);
}
.civil-map-marker {
  width: 20px;
  height: 20px;
  border: 3px solid #f4f7f1;
  border-radius: 50% 50% 50% 0;
  background: var(--sage-5);
  box-shadow: 0 4px 12px rgba(22,37,25,.28);
  transform: rotate(-45deg);
}

.civil-lab-inspector { min-width: 0; background: color-mix(in srgb, var(--panel) 86%, white 14%); }
.civil-lab-pane { padding: 1.1rem; }
.civil-lab-pane[hidden] { display: none !important; }
.civil-pane-header { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.civil-pane-header h3 { margin: .3rem 0 .45rem; }
.civil-pane-header p { margin: 0; font-size: .88rem; }
.civil-field-stack { display: grid; gap: .85rem; }
.civil-two-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.civil-inline-unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.civil-inline-unit input { border-radius: 10px 0 0 10px; }
.civil-inline-unit span {
  display: grid;
  place-items: center;
  min-width: 48px;
  padding: 0 .6rem;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--bg-soft) 68%, white 32%);
  color: var(--muted);
  font-size: .72rem;
}
.civil-source-card {
  margin-top: 1rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-soft) 55%, white 45%);
}
.civil-source-card strong { color: var(--text); font-size: .8rem; }
.civil-source-card p { margin: .35rem 0 0; font-size: .8rem; }
.civil-source-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: .28rem .45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 850 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  vertical-align: middle;
}
.civil-source-badge.measured { background: #dcebdc; color: #31583b; border-color: #bcd5c0; }
.civil-source-badge.agency { background: #dce7ec; color: #355766; border-color: #bdcfd7; }
.civil-source-badge.mapped { background: #dfe8d8; color: #4e6848; border-color: #c6d6bd; }
.civil-source-badge.estimated { background: #eee8d5; color: #6d5d2e; border-color: #dbd0a8; }
.civil-source-badge.default { background: #e8eae5; color: #666f65; border-color: #d2d7cf; }
.civil-source-badge.user { background: #e3dfea; color: #5d4d70; border-color: #cbc2d7; }

.civil-approach-editor { display: grid; gap: .85rem; }
.civil-approach-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: .9rem;
  background: color-mix(in srgb, var(--bg-soft) 52%, white 48%);
}
.civil-approach-card header { display: flex; justify-content: space-between; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.civil-approach-card header strong { color: var(--text); }
.civil-approach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.civil-check-row { display: flex !important; align-items: center; grid-template-columns: auto 1fr; gap: .5rem !important; padding-top: 1.3rem; }
.civil-check-row input { width: auto; }
.civil-pane-actions { margin-top: 1rem; }

.civil-movement-table { margin-top: 1rem; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.civil-movement-row {
  display: grid;
  grid-template-columns: 76px repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.civil-movement-row:last-child { border-bottom: 0; }
.civil-movement-row > strong,
.civil-movement-cell { padding: .72rem; }
.civil-movement-row > strong { display: grid; align-items: center; background: color-mix(in srgb, var(--bg-soft) 70%, white 30%); color: var(--text); }
.civil-movement-cell { border-left: 1px solid var(--line); }
.civil-movement-cell label { gap: .28rem; }
.civil-movement-cell input { padding: .55rem .6rem; }
.civil-movement-cell small { color: var(--muted); font-size: .62rem; }

.civil-control-form,
.civil-run-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.civil-validation { display: grid; gap: .55rem; margin: .9rem 0; }
.civil-validation-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem;
  align-items: start;
  padding: .7rem .75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-soft) 55%, white 45%);
  font-size: .78rem;
}
.civil-validation-item::before { content: '○'; font-weight: 900; }
.civil-validation-item.ok::before { content: '✓'; color: #4f7958; }
.civil-validation-item.warn::before { content: '!'; color: #8b713c; }
.civil-validation-item.block::before { content: '×'; color: #8d4f4f; }

.civil-provenance-strip {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .85rem 1.05rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-soft) 65%, transparent);
}
.civil-provenance-strip > strong { color: var(--text); font-size: .72rem; letter-spacing: .08em; }
.civil-provenance-strip p { flex: 1 1 360px; margin: 0 0 0 .4rem; font-size: .75rem; }

@media (max-width: 1100px) {
  .civil-lab-grid { grid-template-columns: 1fr; }
  .civil-map-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .civil-map { height: 440px; }
}
@media (max-width: 760px) {
  .civil-lab-projectbar { grid-template-columns: 1fr; }
  .civil-project-actions { justify-content: stretch; }
  .civil-project-actions > * { flex: 1 1 120px; }
  .civil-project-actions select { width: 100%; flex-basis: 100%; }
  .civil-workflow-tabs { grid-template-columns: 1fr; }
  .civil-workflow-tab { justify-content: flex-start; padding: 0 .85rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .civil-workflow-tab:last-child { border-bottom: 0; }
  .civil-map { height: 360px; }
  .civil-map-footer { flex-direction: column; gap: .25rem; }
  .civil-two-fields, .civil-approach-grid, .civil-control-form, .civil-run-settings { grid-template-columns: 1fr; }
  .civil-movement-row { grid-template-columns: 66px 1fr; }
  .civil-movement-row > strong { grid-row: span 3; }
  .civil-movement-cell { border-bottom: 1px solid var(--line); }
  .civil-movement-row .civil-movement-cell:last-child { border-bottom: 0; }
}

/* Civil Lab 1.0B — real-location search and review-first OSM import */
.civil-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: end;
  margin-bottom: .85rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-soft) 55%, white 45%);
}
.civil-search-form label { min-width: 0; }
.civil-search-results {
  display: grid;
  gap: .45rem;
  margin: -.3rem 0 .9rem;
  padding: .55rem;
  max-height: 250px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, white 6%);
}
.civil-search-result {
  display: grid;
  gap: .22rem;
  width: 100%;
  padding: .7rem .75rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.civil-search-result:hover,
.civil-search-result:focus-visible { background: color-mix(in srgb, var(--bg-soft) 72%, white 28%); border-color: var(--line); }
.civil-search-result strong { font-size: .78rem; line-height: 1.35; }
.civil-search-result span,
.civil-search-empty { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.civil-inline-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.civil-inline-actions .civil-lab-button { flex: 1 1 130px; }

.civil-osm-review {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-soft) 55%, white 45%);
}
.civil-osm-review-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.civil-osm-review-head h4 { margin: .28rem 0 .35rem; color: var(--text); font-size: 1.02rem; }
.civil-osm-review-head p { margin: 0; font-size: .8rem; }
.civil-osm-counts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .45rem; margin: .8rem 0; }
.civil-osm-counts div { padding: .65rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 75%, transparent); }
.civil-osm-counts span { display: block; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.civil-osm-counts strong { display: block; margin-top: .2rem; color: var(--text); font-size: 1rem; }
.civil-import-approaches { display: grid; gap: .55rem; }
.civil-import-approach { padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 74%, white 26%); }
.civil-import-approach.missing { opacity: .75; }
.civil-import-approach header { display: flex; justify-content: space-between; gap: .6rem; align-items: center; }
.civil-import-approach header strong { color: var(--text); font-size: .78rem; }
.civil-import-approach dl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .4rem; margin: .6rem 0; }
.civil-import-approach dl div { min-width: 0; padding: .45rem; border-radius: 8px; background: color-mix(in srgb, var(--bg-soft) 66%, white 34%); }
.civil-import-approach dt { color: var(--muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; }
.civil-import-approach dd { margin: .15rem 0 0; color: var(--text); font-size: .7rem; font-weight: 750; overflow-wrap: anywhere; }
.civil-import-approach > p { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .5rem 0 0; color: var(--muted); font-size: .66rem; }
.civil-import-warnings { display: grid; gap: .4rem; margin: .7rem 0; }
.civil-import-warning,
.civil-import-ok { padding: .6rem .7rem; border-radius: 9px; font-size: .7rem; line-height: 1.45; }
.civil-import-warning { border: 1px solid rgba(139,113,60,.24); background: rgba(238,232,213,.66); color: #6d5d2e; }
.civil-import-ok { border: 1px solid rgba(65,103,73,.20); background: rgba(220,235,220,.66); color: #31583b; }
.civil-geometry-import-summary { margin: 0 0 1rem; }
.civil-approach-provenance { display: flex; flex-wrap: wrap; gap: .3rem .4rem; margin: -.2rem 0 .7rem; color: var(--muted); font-size: .62rem; }
.civil-approach-provenance span:not(.civil-source-badge) { margin-right: .4rem; }

@media (max-width: 760px) {
  .civil-search-form { grid-template-columns: 1fr; }
  .civil-osm-counts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .civil-import-approach dl { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.civil-service-note { margin: -.25rem 0 .8rem; font-size: .68rem; line-height: 1.45; color: var(--muted); }
.civil-service-note a { color: var(--accent); font-weight: 750; }

/* Civil Lab 1.0C — demand ingestion, agency data, and rate worksheet */
.civil-source-badge.mixed { background:#eee2d8; color:#765b47; border-color:#dcc6b4; }
.civil-demand-section {
  margin-top: 1rem;
  padding: .95rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-soft) 46%, white 54%);
}
.civil-demand-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: .8rem;
}
.civil-demand-section-head h4 { margin: .2rem 0 .2rem; color:var(--text); font-size:1rem; }
.civil-demand-section-head p { margin:0; font-size:.76rem; line-height:1.5; max-width:62ch; }
.civil-demand-total {
  display:grid;
  justify-items:end;
  gap:.15rem;
  flex:0 0 auto;
  padding:.55rem .7rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--panel) 72%,white 28%);
}
.civil-demand-total strong { color:var(--text); font-size:1rem; }
.civil-demand-total span { color:var(--muted); font-size:.68rem; }
.civil-demand-total small { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.25rem; }
.civil-movement-row { grid-template-columns: 86px repeat(3,minmax(0,1fr)); }
.civil-movement-row > strong { align-content:center; gap:.35rem; }
.civil-movement-cell label { min-width:0; }
.civil-movement-cell .civil-source-badge { margin-left:.25rem; }
.civil-csv-controls,
.civil-estimator-grid,
.civil-tripgen-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
}
.civil-rate-table-tools {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:.6rem;
  align-items:end;
}
.civil-rate-entry-select { margin-top:.7rem; }
.civil-demand-message {
  margin-top:.7rem;
  padding:.65rem .75rem;
  border-radius:10px;
  background:color-mix(in srgb,var(--bg-soft) 65%,white 35%);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.75rem;
  line-height:1.5;
}
.civil-field-action { display:grid; gap:.42rem; align-content:end; }
.civil-field-action > span { color:var(--muted); font-size:.72rem; }
.civil-fdot-results { display:grid; gap:.55rem; margin-top:.75rem; max-height:330px; overflow:auto; padding-right:.2rem; }
.civil-fdot-result {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(330px,1.2fr);
  gap:.75rem;
  text-align:left;
  width:100%;
  border:1px solid var(--line);
  border-radius:13px;
  padding:.72rem;
  background:color-mix(in srgb,var(--panel) 72%,white 28%);
  color:var(--text);
}
.civil-fdot-result.selected { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 13%,transparent); }
.civil-fdot-result > div > strong { display:block; font-size:.85rem; }
.civil-fdot-result > div > span { display:block; margin-top:.22rem; color:var(--muted); font-size:.7rem; line-height:1.35; }
.civil-fdot-result dl { margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.35rem; }
.civil-fdot-result dl div { min-width:0; }
.civil-fdot-result dt { color:var(--muted); font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; }
.civil-fdot-result dd { margin:.15rem 0 0; font-size:.72rem; font-weight:800; overflow-wrap:anywhere; }
.civil-fdot-estimator { margin-top:.85rem; padding-top:.85rem; border-top:1px solid var(--line); }
.civil-turn-share-grid {
  display:grid;
  grid-template-columns:auto repeat(3,minmax(0,1fr));
  gap:.65rem;
  align-items:end;
  margin-top:.75rem;
}
.civil-turn-share-grid > strong { align-self:center; color:var(--text); font-size:.75rem; }
.civil-estimate-preview { margin:.8rem 0; }
.civil-estimate-head { display:flex; justify-content:space-between; gap:.75rem; align-items:center; padding:.65rem .75rem; border-radius:10px 10px 0 0; background:color-mix(in srgb,var(--accent) 10%,white 90%); border:1px solid var(--line); }
.civil-estimate-head strong { color:var(--text); font-size:.8rem; }
.civil-estimate-head span { color:var(--muted); font-size:.68rem; }
.civil-estimate-rows { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); border-top:0; border-radius:0 0 10px 10px; overflow:hidden; }
.civil-estimate-rows > div { display:grid; grid-template-columns:auto 1fr; gap:.2rem .6rem; padding:.65rem .75rem; background:var(--panel); }
.civil-estimate-rows > div + div { border-left:1px solid var(--line); }
.civil-estimate-rows span { color:var(--accent); font-weight:900; }
.civil-estimate-rows strong { color:var(--text); }
.civil-estimate-rows small { grid-column:1/-1; color:var(--muted); }
.civil-demand-footnote { margin:.7rem 0 0; font-size:.7rem; line-height:1.5; }
.civil-tripgen-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; margin-top:.75rem; }
.civil-tripgen-summary > div { padding:.7rem; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.civil-tripgen-summary span { display:block; color:var(--muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; }
.civil-tripgen-summary strong { display:block; margin-top:.25rem; color:var(--text); font-size:.9rem; }
.civil-import-card code { font:700 .68rem ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--text); }
@media (max-width: 760px) {
  .civil-demand-section-head { flex-direction:column; }
  .civil-demand-total { justify-items:start; }
  .civil-csv-controls,.civil-estimator-grid,.civil-tripgen-grid,.civil-tripgen-summary { grid-template-columns:1fr; }
  .civil-rate-table-tools { grid-template-columns:1fr; }
  .civil-turn-share-grid { grid-template-columns:1fr; }
  .civil-fdot-result { grid-template-columns:1fr; }
  .civil-fdot-result dl { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .civil-movement-row { grid-template-columns:70px repeat(3,minmax(0,1fr)); }
}

/* Civil Lab 1.0D — metric traffic simulation results */
.civil-run-settings-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.civil-run-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin: .85rem 0 .2rem; }
.civil-sim-progress {
  margin: .8rem 0;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg-soft) 58%, white 42%);
  font-size: .8rem;
}
.civil-sim-results { display: grid; gap: 1rem; margin-top: 1rem; }
.civil-sim-results-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.civil-sim-results-head h4 { margin: .2rem 0 .25rem; color: var(--text); font-size: 1.2rem; }
.civil-sim-results-head p { margin: 0; font-size: .78rem; }
.civil-lanegraph-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem .8rem; color: var(--muted); font-size: .68rem; }
.civil-lanegraph-legend span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.civil-lanegraph-legend i { width: 22px; height: 4px; border-radius: 999px; display: inline-block; }
.civil-lanegraph-legend i.low { background: #5f8a67; }
.civil-lanegraph-legend i.mid { background: #d2ae55; }
.civil-lanegraph-legend i.high { background: #a9554d; }
.civil-sim-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .65rem; }
.civil-sim-summary > div { padding: .75rem .8rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg-soft) 54%, white 46%); }
.civil-sim-summary span { display: block; color: var(--muted); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .25rem; }
.civil-sim-summary strong { color: var(--text); font-size: 1rem; }
.civil-sim-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.civil-sim-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .72rem; background: color-mix(in srgb, var(--panel) 90%, white 10%); }
.civil-sim-table th, .civil-sim-table td { padding: .58rem .62rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.civil-sim-table thead th { color: var(--muted); font-size: .61rem; letter-spacing: .07em; text-transform: uppercase; background: color-mix(in srgb, var(--bg-soft) 68%, white 32%); }
.civil-sim-table th:first-child, .civil-sim-table td:first-child { text-align: left; }
.civil-sim-table tbody tr:last-child th, .civil-sim-table tbody tr:last-child td { border-bottom: 0; }
.civil-vcr { display: inline-flex; min-width: 46px; justify-content: center; padding: .22rem .38rem; border-radius: 999px; font-weight: 850; }
.civil-vcr.low { color: #355b3d; background: rgba(95,138,103,.16); }
.civil-vcr.mid { color: #765e22; background: rgba(210,174,85,.20); }
.civil-vcr.high { color: #7d3e38; background: rgba(169,85,77,.18); }
.civil-sim-approaches { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; }
.civil-sim-approaches article { border: 1px solid var(--line); border-radius: 14px; padding: .75rem; background: color-mix(in srgb, var(--bg-soft) 50%, white 50%); }
.civil-sim-approaches header { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.civil-sim-approaches header strong { color: var(--text); }
.civil-sim-approaches dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; margin: 0; }
.civil-sim-approaches dl div { border-top: 1px solid var(--line); padding-top: .45rem; }
.civil-sim-approaches dt { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.civil-sim-approaches dd { margin: .18rem 0 0; color: var(--text); font-size: .78rem; font-weight: 750; }
.civil-sim-assumptions { margin-top: 0; }
.civil-sim-assumptions ul { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .45rem; color: var(--muted); font-size: .76rem; line-height: 1.5; }

@media (max-width: 760px) {
  .civil-run-settings-expanded, .civil-sim-summary, .civil-sim-approaches { grid-template-columns: 1fr; }
  .civil-sim-results-head { flex-direction: column; }
  .civil-lanegraph-legend { justify-content: flex-start; }
}

/* Civil 1.0D.1 demand-source clarity + dual-axis FDOT sourcing */
.civil-axis-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: .9rem;
}
.civil-axis-source-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .8rem .9rem;
  background: color-mix(in srgb, var(--bg-soft) 52%, white 48%);
}
.civil-axis-source-card header {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
}
.civil-axis-source-card header div > span {
  display: block;
  color: var(--muted);
  font-size: .62rem;
  letter-spacing: .08em;
  font-weight: 800;
}
.civil-axis-source-card header strong {
  display: block;
  margin-top: .22rem;
  color: var(--text);
  font-size: .86rem;
}
.civil-axis-source-card p {
  margin: .55rem 0 0;
  font-size: .72rem;
  line-height: 1.45;
}
.civil-estimator-grid label small {
  display: block;
  margin-top: .32rem;
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.4;
}
.civil-fdot-result > div > small {
  display: block;
  margin-top: .26rem;
  color: var(--accent);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .03em;
}
.civil-approach-result.unresolved {
  border-style: dashed;
  background: color-mix(in srgb, var(--bg-soft) 34%, white 66%);
}
.civil-approach-result.unresolved p {
  margin: .4rem 0 0;
  font-size: .72rem;
  line-height: 1.45;
}
.civil-result-source {
  margin: -.15rem 0 .55rem;
}
.civil-sim-table tbody th small {
  display: block;
  margin-top: .22rem;
  font-size: .58rem;
  font-weight: 700;
  color: var(--muted);
}
.civil-sim-table tbody th small .civil-source-badge {
  transform: scale(.92);
  transform-origin: left center;
}
.civil-sim-row-unresolved {
  color: var(--muted);
  background: color-mix(in srgb, var(--bg-soft) 34%, white 66%);
}
.civil-sim-row-unresolved th,
.civil-sim-row-unresolved td {
  opacity: .8;
}
@media (max-width: 760px) {
  .civil-axis-source-grid { grid-template-columns: 1fr; }
}


/* Civil Lab 1.0E — lane-group/control fidelity */
.civil-lane-group-preview-section,
.civil-lane-group-results-section { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.civil-lane-group-preview,
.civil-lane-group-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.civil-lane-group-preview-card,
.civil-lane-group-result { border: 1px solid var(--line); border-radius: 16px; padding: .9rem; background: color-mix(in srgb,var(--panel) 88%,transparent); }
.civil-lane-group-preview-card header,
.civil-lane-group-result header { display:flex; justify-content:space-between; align-items:center; gap:.65rem; margin-bottom:.55rem; }
.civil-lane-group-preview-card header span { color:var(--muted); font-size:.72rem; }
.civil-lane-group-preview-card > div { display:flex; justify-content:space-between; gap:.7rem; padding:.45rem 0; border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.civil-lane-group-preview-card > div b { font-size:.82rem; }
.civil-lane-group-preview-card > div span { text-align:right; color:var(--muted); font-size:.72rem; }
.civil-lane-group-result p { margin:.2rem 0 .7rem; font-size:.78rem; }
.civil-lane-group-result dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:0; }
.civil-lane-group-result dl div { padding:.55rem; border-radius:10px; background:color-mix(in srgb,var(--bg-soft) 70%,transparent); }
.civil-lane-group-result dt { color:var(--muted); font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; }
.civil-lane-group-result dd { margin:.2rem 0 0; font-weight:800; font-size:.82rem; }
.civil-lane-group-result.mid { border-color:color-mix(in srgb,#d2ae55 50%,var(--line)); }
.civil-lane-group-result.high { border-color:color-mix(in srgb,#a9554d 58%,var(--line)); }
.civil-sim-table th small em { font-style:normal; color:var(--muted); margin-left:.35rem; }
@media(max-width:850px){.civil-lane-group-preview,.civil-lane-group-results{grid-template-columns:1fr;}}

/* V0.41 — dimensional mode switch + ambient spatial backgrounds */
body.portfolio-page {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.portfolio-page > main { position: relative; z-index: 1; }
.portfolio-page > .site-header { z-index: 30; }

/* A real element is used rather than another body pseudo-element so the background can
   sit above the body color while every portfolio surface remains independently layered. */
.ambient-mode-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}
.ambient-grid-plane,
.ambient-grid-haze {
  position: absolute;
  pointer-events: none;
  will-change: transform, background-position, opacity;
}
.ambient-grid-plane {
  left: -24vw;
  right: -24vw;
  bottom: -48vh;
  height: 132vh;
  transform-origin: 50% 100%;
  transform: perspective(760px) rotateX(63deg) scale(1.18);
  background-image:
    repeating-linear-gradient(90deg,
      var(--ambient-grid-line) 0 1px,
      transparent 1px var(--ambient-grid-size)),
    repeating-linear-gradient(0deg,
      var(--ambient-grid-line) 0 1px,
      transparent 1px var(--ambient-grid-size));
  background-size: var(--ambient-grid-size) var(--ambient-grid-size);
  opacity: var(--ambient-grid-opacity);
  -webkit-mask-image: linear-gradient(to top, #000 3%, rgba(0,0,0,.96) 45%, rgba(0,0,0,.34) 78%, transparent 98%);
  mask-image: linear-gradient(to top, #000 3%, rgba(0,0,0,.96) 45%, rgba(0,0,0,.34) 78%, transparent 98%);
  animation: ambientGridScroll var(--ambient-grid-speed) linear infinite;
}
.ambient-grid-haze {
  inset: -18%;
  opacity: var(--ambient-wave-opacity);
  background:
    repeating-radial-gradient(ellipse at 54% 116%,
      transparent 0 34px,
      var(--ambient-wave-line) 35px 36px,
      transparent 37px 74px),
    radial-gradient(ellipse at 74% 14%, var(--ambient-glow), transparent 35%),
    radial-gradient(ellipse at 18% 76%, color-mix(in srgb, var(--ambient-glow) 55%, transparent), transparent 32%);
  transform: translate3d(0,0,0) scale(1.08);
  filter: blur(.15px);
  animation: ambientWaveDrift var(--ambient-wave-speed) ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.62) 18%, #000 58%, rgba(0,0,0,.76) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.62) 18%, #000 58%, rgba(0,0,0,.76) 100%);
}

body[data-mode="creative"] {
  --ambient-grid-line: rgba(82,109,81,.20);
  --ambient-grid-size: 46px;
  --ambient-grid-opacity: .64;
  --ambient-grid-speed: 28s;
  --ambient-wave-line: rgba(121,144,129,.17);
  --ambient-wave-opacity: .62;
  --ambient-wave-speed: 22s;
  --ambient-glow: rgba(169,189,149,.24);
}
body[data-mode="professional"] {
  --ambient-grid-line: rgba(186,196,175,.095);
  --ambient-grid-size: 52px;
  --ambient-grid-opacity: .35;
  --ambient-grid-speed: 42s;
  --ambient-wave-line: rgba(169,189,149,.065);
  --ambient-wave-opacity: .28;
  --ambient-wave-speed: 36s;
  --ambient-glow: rgba(140,171,129,.075);
}
body[data-mode="civil"] {
  --ambient-grid-line: rgba(82,109,81,.095);
  --ambient-grid-size: 54px;
  --ambient-grid-opacity: .30;
  --ambient-grid-speed: 54s;
  --ambient-wave-line: rgba(82,109,81,.055);
  --ambient-wave-opacity: .20;
  --ambient-wave-speed: 46s;
  --ambient-glow: rgba(169,189,149,.09);
}
body[data-mode="civil"] .ambient-grid-plane {
  transform: perspective(920px) rotateX(69deg) scale(1.13);
}
body[data-mode="civil"] .ambient-grid-haze {
  background:
    repeating-radial-gradient(ellipse at 50% 112%, transparent 0 52px, var(--ambient-wave-line) 53px 54px, transparent 55px 104px),
    linear-gradient(118deg, transparent 0 48%, rgba(82,109,81,.035) 48.2% 48.6%, transparent 48.8% 100%);
}

@keyframes ambientGridScroll {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 var(--ambient-grid-size), 0 var(--ambient-grid-size); }
}
@keyframes ambientWaveDrift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1.06) rotate(-.2deg); }
  45% { transform: translate3d(1%, 1.2%, 0) scale(1.09) rotate(.25deg); }
  100% { transform: translate3d(2.2%, -.4%, 0) scale(1.07) rotate(-.1deg); }
}

/* Mode switch becomes a small dimensional surface rather than a flat segmented control. */
.mode-switch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 48%, transparent),
    0 8px 20px color-mix(in srgb, var(--accent) 8%, transparent);
}
.mode-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 76px;
  transition: color .28s ease, transform .24s ease, box-shadow .28s ease, border-color .28s ease;
}
.mode-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -55% -24%;
  opacity: 0;
  border-radius: 44%;
  transform-origin: 50% 72%;
  transform: perspective(180px) rotateX(56deg) scale(.94);
  background:
    repeating-radial-gradient(ellipse at 48% 94%,
      transparent 0 8px,
      var(--mode-mesh-line) 9px 10px,
      transparent 11px 18px),
    repeating-linear-gradient(88deg,
      transparent 0 11px,
      color-mix(in srgb, var(--mode-mesh-line) 86%, transparent) 12px 13px,
      transparent 14px 25px),
    linear-gradient(145deg, var(--mode-active-top), var(--mode-active-bottom));
  background-size: 100% 100%, 31px 100%, 100% 100%;
  filter: saturate(.88);
  transition: opacity .28s ease, transform .34s ease;
}
.mode-button::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 1px;
  border-radius: 6px;
  opacity: 0;
  box-shadow:
    inset 0 1px 0 var(--mode-rim-light),
    inset 0 -1px 0 var(--mode-rim-shadow);
  transition: opacity .28s ease;
}
.mode-button.active {
  background: transparent;
  color: var(--mode-active-text);
  box-shadow: 0 4px 10px var(--mode-pill-shadow);
  transform: translateY(-1px);
}
.mode-button.active::before {
  opacity: 1;
  transform: perspective(180px) rotateX(56deg) scale(1.04);
  animation: modeMeshFlow 9.5s ease-in-out infinite alternate;
}
.mode-button.active::after { opacity: 1; }

body[data-mode="creative"] {
  --mode-active-text: #f5f7f2;
  --mode-active-top: #607a5f;
  --mode-active-bottom: #496249;
  --mode-mesh-line: rgba(220,233,211,.22);
  --mode-rim-light: rgba(255,255,255,.27);
  --mode-rim-shadow: rgba(28,49,31,.22);
  --mode-pill-shadow: rgba(42,70,47,.18);
}
body[data-mode="professional"] {
  --mode-active-text: #203127;
  --mode-active-top: #b5c9a6;
  --mode-active-bottom: #98af8e;
  --mode-mesh-line: rgba(50,79,55,.15);
  --mode-rim-light: rgba(255,255,255,.35);
  --mode-rim-shadow: rgba(32,49,39,.17);
  --mode-pill-shadow: rgba(0,0,0,.22);
}
body[data-mode="civil"] {
  --mode-active-text: #f5f7f2;
  --mode-active-top: #667d66;
  --mode-active-bottom: #4d654f;
  --mode-mesh-line: rgba(231,238,225,.16);
  --mode-rim-light: rgba(255,255,255,.24);
  --mode-rim-shadow: rgba(31,49,34,.19);
  --mode-pill-shadow: rgba(45,67,47,.16);
}
body[data-mode="civil"] .mode-button.active::before {
  background:
    repeating-radial-gradient(ellipse at 48% 98%, transparent 0 10px, var(--mode-mesh-line) 11px 12px, transparent 13px 21px),
    repeating-linear-gradient(90deg, transparent 0 15px, color-mix(in srgb, var(--mode-mesh-line) 82%, transparent) 16px 17px, transparent 18px 31px),
    linear-gradient(145deg, var(--mode-active-top), var(--mode-active-bottom));
}

@keyframes modeMeshFlow {
  0% {
    background-position: 0 0, 0 0, 0 0;
    transform: perspective(180px) rotateX(56deg) translate3d(-1.5%, 0, 0) scale(1.03);
  }
  50% {
    background-position: 8px 3px, 12px 0, 0 0;
    transform: perspective(180px) rotateX(52deg) translate3d(1%, -1%, 0) scale(1.07);
  }
  100% {
    background-position: -5px -2px, 24px 0, 0 0;
    transform: perspective(180px) rotateX(58deg) translate3d(2%, 1%, 0) scale(1.04);
  }
}

@media (hover: hover) and (pointer: fine) {
  .mode-button:hover:not(.active) { transform: translateY(-1px); color: var(--text); }
  .mode-button.active:hover { transform: translateY(-2px); }
}

@media (max-width: 760px) {
  .mode-button { min-width: 0; }
  .ambient-grid-plane {
    left: -56vw;
    right: -56vw;
    bottom: -42vh;
    height: 118vh;
  }
  .ambient-grid-haze { inset: -26%; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-grid-plane,
  .ambient-grid-haze,
  .mode-button.active::before {
    animation: none !important;
  }
  .ambient-grid-plane { background-position: 0 0, 0 0; }
  .ambient-grid-haze { transform: none; }
  .mode-button { transition-duration: .01ms; }
}


/* V0.42 — point-cloud wave refinement */
/* The new dot field is intentionally independent of the structural grid so each mode can tune them separately. */
.ambient-dot-field {
  position: absolute;
  left: -12vw;
  right: -12vw;
  bottom: -4vh;
  height: 72vh;
  pointer-events: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ambient-dot-bright) 78%, transparent),
    color-mix(in srgb, var(--ambient-dot-mid) 70%, transparent) 48%,
    color-mix(in srgb, var(--ambient-dot-dim) 50%, transparent));
  -webkit-mask-image: url('/assets/images/dot-wave-mask.svg');
  mask-image: url('/assets/images/dot-wave-mask.svg');
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 980px 390px;
  mask-size: 980px 390px;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  opacity: var(--ambient-dot-opacity);
  transform-origin: 50% 100%;
  transform: perspective(900px) rotateX(58deg) translate3d(0, 6%, 0) scale(1.08);
  filter: blur(.08px);
  will-change: transform, opacity, mask-position;
  animation: ambientDotWave var(--ambient-dot-speed) ease-in-out infinite alternate;
}

body[data-mode="creative"] {
  --ambient-grid-opacity: .30;
  --ambient-wave-opacity: .34;
  --ambient-dot-opacity: .42;
  --ambient-dot-speed: 20s;
  --ambient-dot-bright: rgba(235,244,228,.88);
  --ambient-dot-mid: rgba(143,170,132,.56);
  --ambient-dot-dim: rgba(82,109,81,.28);
}
body[data-mode="professional"] {
  --ambient-grid-opacity: .18;
  --ambient-wave-opacity: .13;
  --ambient-dot-opacity: .16;
  --ambient-dot-speed: 34s;
  --ambient-dot-bright: rgba(195,211,187,.42);
  --ambient-dot-mid: rgba(143,166,135,.27);
  --ambient-dot-dim: rgba(65,87,67,.14);
}
body[data-mode="civil"] {
  --ambient-grid-opacity: .24;
  --ambient-wave-opacity: .14;
  --ambient-dot-opacity: 0;
  --ambient-dot-speed: 46s;
  --ambient-dot-bright: transparent;
  --ambient-dot-mid: transparent;
  --ambient-dot-dim: transparent;
}

@keyframes ambientDotWave {
  0% {
    -webkit-mask-position: -40px 100%;
    mask-position: -40px 100%;
    transform: perspective(900px) rotateX(59deg) translate3d(-1.2%, 7%, 0) scale(1.06);
  }
  50% {
    -webkit-mask-position: 34px 100%;
    mask-position: 34px 100%;
    transform: perspective(900px) rotateX(56deg) translate3d(.8%, 4.5%, 0) scale(1.09);
  }
  100% {
    -webkit-mask-position: 88px 100%;
    mask-position: 88px 100%;
    transform: perspective(900px) rotateX(60deg) translate3d(1.8%, 6.5%, 0) scale(1.07);
  }
}

/* Active-mode point cloud. The pill keeps the existing dimensional rim, but the surface is now a dotted wave instead of line/radial mesh. */
.mode-button::before {
  inset: -34% -18%;
  border-radius: 14px;
  transform-origin: 50% 70%;
  transform: perspective(210px) rotateX(48deg) scale(.98);
  background: linear-gradient(145deg, var(--mode-active-top), var(--mode-active-bottom));
  -webkit-mask-image: url('/assets/images/dot-wave-mask.svg');
  mask-image: url('/assets/images/dot-wave-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 190% 190%;
  mask-size: 190% 190%;
  -webkit-mask-position: 48% 58%;
  mask-position: 48% 58%;
  filter: saturate(.90) contrast(1.06);
}
.mode-button.active::before {
  opacity: var(--mode-dot-opacity);
  animation: modeDotField 8.6s ease-in-out infinite alternate;
}
.mode-button.active {
  /* A quiet base pill keeps the text readable while the point cloud sits inside it. */
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--mode-active-top) 86%, transparent),
    color-mix(in srgb, var(--mode-active-bottom) 88%, transparent));
}

body[data-mode="creative"] { --mode-dot-opacity: .86; }
body[data-mode="professional"] { --mode-dot-opacity: .46; }
body[data-mode="civil"] { --mode-dot-opacity: .24; }

body[data-mode="civil"] .mode-button.active::before {
  background: linear-gradient(145deg, var(--mode-active-top), var(--mode-active-bottom));
  -webkit-mask-image: url('/assets/images/dot-wave-mask.svg');
  mask-image: url('/assets/images/dot-wave-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 170% 170%;
  mask-size: 170% 170%;
  -webkit-mask-position: 50% 62%;
  mask-position: 50% 62%;
}

@keyframes modeDotField {
  0% {
    -webkit-mask-position: 42% 61%;
    mask-position: 42% 61%;
    transform: perspective(210px) rotateX(50deg) translate3d(-2%, 1%, 0) scale(1.02);
  }
  50% {
    -webkit-mask-position: 52% 54%;
    mask-position: 52% 54%;
    transform: perspective(210px) rotateX(45deg) translate3d(1%, -1%, 0) scale(1.08);
  }
  100% {
    -webkit-mask-position: 60% 59%;
    mask-position: 60% 59%;
    transform: perspective(210px) rotateX(51deg) translate3d(2%, 1%, 0) scale(1.04);
  }
}

@media (max-width: 760px) {
  .ambient-dot-field {
    left: -42vw;
    right: -42vw;
    height: 56vh;
    -webkit-mask-size: 760px 304px;
    mask-size: 760px 304px;
    opacity: calc(var(--ambient-dot-opacity) * .82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-dot-field,
  .mode-button.active::before {
    animation: none !important;
  }
  .ambient-dot-field {
    transform: perspective(900px) rotateX(58deg) translate3d(0, 6%, 0) scale(1.08);
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
  .mode-button.active::before {
    transform: perspective(210px) rotateX(48deg) scale(1.03);
    -webkit-mask-position: 50% 58%;
    mask-position: 50% 58%;
  }
}