:root {
  color-scheme: dark;
  --ink: #080a10;
  --paper: #eeeef0;
  --muted: #818590;
  --quiet: #555a67;
  --hairline: rgba(211, 216, 233, .095);
  --panel: rgba(14, 16, 24, .88);
  --cyan: #64e8e6;
  --pink: #fa7cb2;
  --lime: #c1ef7a;
  --amber: #ffbd75;
  --violet: #a99aff;
  font-family: "Manrope", sans-serif;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { color: var(--paper); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 1px solid rgba(213, 221, 244, .86); outline-offset: 4px; }

.scene { position: relative; width: 100%; height: 100%; min-height: 440px; overflow: hidden; background: #080a10; isolation: isolate; }
#field { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.vignette { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 51% 48%, transparent 20%, rgba(5, 7, 12, .22) 62%, rgba(5, 7, 12, .62) 115%); }
.scene::before { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.masthead { position: absolute; top: 52px; left: clamp(26px, 5.4vw, 86px); display: flex; align-items: flex-start; gap: 15px; }
.brand-mark { position: relative; display: grid; grid-template-columns: repeat(2, 5px); grid-template-rows: repeat(2, 5px); gap: 3px; margin-top: 6px; transform: rotate(-9deg); }
.brand-mark i { display: block; border-radius: 1px; background: var(--cyan); box-shadow: 0 0 5px rgba(100, 232, 230, .24); }
.brand-mark i:nth-child(2) { opacity: .72; }
.brand-mark i:nth-child(3) { opacity: .42; }
.brand-mark i:nth-child(4) { opacity: .8; background: var(--violet); }
.brand-copy .eyebrow, .eyebrow { margin: 0; color: #9fa3af; font: 10px/1.5 "DM Mono", monospace; letter-spacing: .18em; }
.brand-copy .eyebrow span { padding: 0 5px; color: #505461; }
.brand-copy h1 { margin: 10px 0 6px; font-size: clamp(24px, 2.4vw, 33px); font-weight: 500; letter-spacing: -.065em; line-height: 1.1; }
.period { color: var(--cyan); }
.intro { margin: 0; color: #858995; font-size: 12px; letter-spacing: .005em; }

.field-note { position: absolute; top: 62px; right: clamp(26px, 5.4vw, 86px); display: flex; align-items: center; gap: 10px; color: #7f8390; font: 9px/1 "DM Mono", monospace; letter-spacing: .105em; }
.live-indicator { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px rgba(193, 239, 122, .62); animation: breathe 2.5s ease-in-out infinite; }
.field-note.is-paused .live-indicator { background: #777b86; box-shadow: none; animation: none; }
.note-divider { width: 1px; height: 12px; margin: 0 3px; background: var(--hairline); }

.species-panel { position: absolute; top: 43%; right: clamp(26px, 5.4vw, 86px); width: 320px; transform: translateY(-50%); }
.micro-label { margin: 0; color: #767b89; font: 9px/1.5 "DM Mono", monospace; letter-spacing: .13em; }
.species-list { display: grid; gap: 9px; margin-top: 13px; }
.species-group { min-width: 0; }
.species-group-label { margin: 0 0 3px 1px; color: #666b78; font: 8px/1.35 "DM Mono", monospace; letter-spacing: .13em; }
.species-group-items { display: flex; flex-wrap: wrap; gap: 3px; }
.species-button { position: relative; display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; transition: border-color .2s, transform .2s; }
.species-button:hover { transform: translateY(-2px); }
.species-button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--species-color), transparent 48%); }
.species-button::before { width: 7px; height: 7px; border-radius: 1px; content: ""; background: var(--species-color); box-shadow: 0 0 4px color-mix(in srgb, var(--species-color), transparent 18%), 0 0 8px color-mix(in srgb, var(--species-color), transparent 62%); }
.species-button[aria-pressed="true"]::after { position: absolute; inset: 3px; border: 1px solid color-mix(in srgb, var(--species-color), transparent 75%); border-radius: 50%; content: ""; }
.species-hint { margin: 13px 0 0 1px; color: #5d626e; font: 8px/1.4 "DM Mono", monospace; letter-spacing: .12em; }

.control-dock { position: absolute; bottom: clamp(26px, 5vh, 48px); left: 50%; display: flex; align-items: center; gap: 6px; min-height: 58px; padding: 8px 11px; border: 1px solid rgba(216, 221, 242, .1); border-radius: 7px; background: rgba(16, 18, 26, .76); box-shadow: 0 14px 50px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025); backdrop-filter: blur(18px); transform: translateX(-50%); }
.icon-button, .text-button, .tune-button, .close-button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; }
.icon-button { width: 39px; height: 39px; border: 1px solid rgba(211, 216, 233, .12); border-radius: 4px; transition: border .2s, background .2s; }
.icon-button:hover, .text-button:hover { border-color: rgba(211, 216, 233, .23); background: rgba(255, 255, 255, .045); }
.icon-button svg { width: 15px; height: 15px; fill: none; stroke: #e5e6eb; stroke-linecap: round; stroke-width: 1.4; }
.play-icon { display: none; }
.is-paused .play-icon { display: block; }
.is-paused .pause-icon { display: none; }
.dock-rule { width: 1px; height: 22px; margin: 0 8px; background: var(--hairline); }
.text-button { height: 39px; gap: 8px; padding: 0 12px; border: 1px solid transparent; border-radius: 4px; color: #a6a9b3; font-size: 11px; transition: .2s; }
.text-button svg, .tune-button svg { width: 15px; height: 15px; fill: none; stroke: #898e9a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.15; }
.text-button:hover { color: var(--paper); }
.text-button:hover svg { stroke: var(--paper); }
.dock-rule-end { margin-left: 7px; }
.tune-button { height: 39px; gap: 9px; padding: 0 12px; border-radius: 4px; color: #d9dbe1; font-size: 11px; transition: background .2s; }
.tune-button:hover, .tune-button[aria-expanded="true"] { background: rgba(255, 255, 255, .055); }
.tune-button:hover svg { stroke: var(--cyan); }
.tune-chevron { margin-left: 5px; color: #737985; font-size: 13px; }

.corner-caption { position: absolute; bottom: 48px; left: clamp(26px, 5.4vw, 86px); display: flex; gap: 8px; color: #515560; font: 8px/1 "DM Mono", monospace; letter-spacing: .1em; }
.corner-caption span:nth-child(2) { color: #787c87; }
.ui-layer { transition: opacity .22s ease, visibility 0s linear .22s; }
.scene.interface-hidden .ui-layer { visibility: hidden; opacity: 0 !important; pointer-events: none !important; }
.corner-toggle { position: absolute; z-index: 10; top: 25px; right: clamp(26px, 5.4vw, 86px); display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid rgba(216, 221, 242, .14); border-radius: 50%; background: rgba(16, 18, 26, .62); color: #a8acb8; cursor: pointer; backdrop-filter: blur(14px); transition: border-color .2s, color .2s, background .2s; }
.corner-toggle:hover { border-color: rgba(100, 232, 230, .42); background: rgba(16, 18, 26, .9); color: var(--paper); }
.corner-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.2; }
.corner-toggle .eye-closed { display: none; }
.corner-toggle.is-hidden .eye-open { display: none; }
.corner-toggle.is-hidden .eye-closed { display: block; }

.tuning-panel { position: absolute; top: 24px; right: 24px; bottom: 24px; width: min(376px, calc(100vw - 32px)); padding: 26px 25px 21px; overflow-y: auto; border: 1px solid rgba(216, 221, 242, .12); border-radius: 8px; background: var(--panel); box-shadow: 0 25px 80px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .035); backdrop-filter: blur(24px); opacity: 0; pointer-events: none; transform: translateX(14px); transition: opacity .22s ease, transform .22s ease; scrollbar-color: rgba(180, 185, 203, .18) transparent; scrollbar-width: thin; }
.tuning-panel.is-open { z-index: 5; opacity: 1; pointer-events: auto; transform: translateX(0); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.panel-heading h2 { margin: 9px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.045em; }
.close-button { width: 29px; height: 29px; margin: -5px -5px 0 0; border: 1px solid var(--hairline); border-radius: 4px; color: #a6a9b3; font-size: 20px; font-weight: 300; line-height: 1; }
.close-button:hover { background: rgba(255,255,255,.07); color: white; }
.panel-description { max-width: 265px; margin: 11px 0 25px; color: #898d99; font-size: 11px; line-height: 1.7; }
.matrix-heading { display: flex; align-items: center; justify-content: space-between; }
.force-legend { display: flex; align-items: center; gap: 5px; color: #777c89; font: 8px "DM Mono", monospace; }
.force-legend .repel { color: var(--violet); }
.force-legend .attract { color: var(--cyan); }
.force-legend i { width: 23px; height: 1px; margin: 0 2px; background: linear-gradient(90deg, var(--violet), #797d8b, var(--cyan)); }
.matrix-wrap { margin-top: 13px; }
.force-matrix { width: 100%; border-collapse: separate; border-spacing: 3px 4px; table-layout: fixed; }
.force-matrix th { height: 20px; color: #777c88; font: 8px "DM Mono", monospace; font-weight: 400; text-align: center; }
.force-matrix th:first-child { width: 37px; text-align: left; }
.force-matrix th[scope="row"] { text-align: left; }
.matrix-dot { display: inline-block; width: 6px; height: 6px; border-radius: 1px; background: var(--species-color); box-shadow: 0 0 6px color-mix(in srgb, var(--species-color), transparent 25%); }
.force-cell { height: 42px; padding: 1px 3px; border: 1px solid rgba(216, 221, 242, .065); border-radius: 3px; background: rgba(255, 255, 255, .018); }
.force-cell.diagonal { background: rgba(255,255,255,.035); }
.rule-cell { display: flex; width: 100%; height: 38px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; cursor: pointer; transition: border-color .15s, background .15s; }
.rule-cell:hover { background: rgba(255,255,255,.055); }
.rule-cell[aria-pressed="true"] { border-color: color-mix(in srgb, var(--rule-color), transparent 60%); background: color-mix(in srgb, var(--rule-color), transparent 93%); }
.rule-value { color: var(--cyan); font: 9px/1 "DM Mono", monospace; font-variant-numeric: tabular-nums; }
.rule-cell.is-repelling .rule-value { color: var(--violet); }
.rule-cell.is-neutral .rule-value { color: #858995; }
.rule-reach { color: #696e7a; font: 7px/1 "DM Mono", monospace; }
.matrix-caption { margin: 7px 0 0; color: #606572; font: 7px/1.5 "DM Mono", monospace; letter-spacing: .08em; }
.matrix-caption span { padding: 0 2px; color: var(--cyan); }
.element-menu { margin-top: 8px; }
.tier-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 15px; padding: 3px; border: 1px solid rgba(216,221,242,.08); border-radius: 4px; background: rgba(255,255,255,.02); }
.tier-tabs button { padding: 8px 3px; border: 0; border-radius: 2px; background: transparent; color: #747987; font: 8px "DM Mono", monospace; letter-spacing: .08em; cursor: pointer; }
.tier-tabs button[aria-selected="true"] { background: rgba(100,232,230,.1); color: var(--cyan); }
.element-select { display: block; width: 100%; height: 36px; margin: 7px 0 15px; padding: 0 10px; border: 1px solid rgba(216,221,242,.12); border-radius: 3px; background: #171a23; color: #e0e2e8; font-size: 11px; }
.relationship-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.relationship-heading .force-legend { font-size: 7px; }
.relationship-heading .force-legend i { background: linear-gradient(90deg, var(--violet), #777b88, var(--cyan)); }
.relationship-heading .force-legend b { color: #666b77; font-weight: 400; }
.relationship-list { max-height: 285px; overflow-y: auto; border-top: 1px solid rgba(216,221,242,.08); scrollbar-color: rgba(180,185,203,.18) transparent; scrollbar-width: thin; }
.relationship-row { display: grid; grid-template-columns: 82px minmax(50px,1fr) 35px 50px 28px; align-items: center; gap: 6px; min-height: 34px; border-bottom: 1px solid rgba(216,221,242,.055); }
.relationship-name { display: flex; align-items: center; gap: 7px; overflow: hidden; color: #aeb1bc; font-size: 9px; white-space: nowrap; }
.relationship-name i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--species-color); box-shadow: 0 0 6px color-mix(in srgb, var(--species-color), transparent 35%); }
.relationship-row input[type="range"] { width: 100%; height: 12px; margin: 0; accent-color: var(--cyan); }
.relationship-row input[data-kind="range"] { accent-color: #858a98; }
.relationship-row output, .relationship-row small { color: var(--cyan); font: 8px "DM Mono", monospace; text-align: right; }
.relationship-row.is-repelling output { color: var(--violet); }
.relationship-row small { color: #727784; }
.relationship-row.is-self .relationship-name { color: #e0e2e8; }
.chemistry-menu { margin: 16px 0 18px; padding: 13px 0 0; border-top: 1px solid var(--hairline); }
.chemistry-list { margin-top: 8px; }
.chemistry-entry { display: grid; grid-template-columns: 1fr auto; gap: 3px 9px; padding: 8px 9px; margin-bottom: 5px; border: 1px solid rgba(216,221,242,.07); border-radius: 3px; background: rgba(255,255,255,.02); }
.chemistry-entry span { color: #b8bbc5; font-size: 9px; }
.chemistry-entry b { grid-column: 1; color: #727784; font: 7px "DM Mono", monospace; font-weight: 400; text-transform: uppercase; }
.chemistry-entry strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--cyan); font-size: 9px; font-weight: 500; text-align: right; }
.chemistry-empty { color: #747987; font-size: 9px; }
.rule-editor { margin-top: 13px; padding: 11px 12px 9px; border: 1px solid rgba(216, 221, 242, .085); border-radius: 4px; background: rgba(255,255,255,.022); }
.rule-editor-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rule-editor-heading h3 { margin: 4px 0 0; color: #d9dbe2; font: 10px "DM Mono", monospace; letter-spacing: .05em; }
.rule-state { color: var(--cyan); font: 8px "DM Mono", monospace; letter-spacing: .1em; }
.rule-state.is-repelling { color: var(--violet); }
.rule-state.is-neutral { color: #858995; }
.rule-editor .range-control { margin-bottom: 9px; }
.rule-editor .range-control:last-child { margin-bottom: 0; }
.rule-editor .range-label { margin-bottom: 5px; font-size: 9px; }
.settings-divider { height: 1px; margin: 15px 0 14px; background: var(--hairline); }
.range-control { margin-bottom: 15px; }
.range-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #aaadb7; font-size: 10px; }
.range-label output { color: #777c88; font: 9px "DM Mono", monospace; }
.range-control input[type="range"] { display: block; width: 100%; height: 12px; margin: 0; appearance: none; background: transparent; cursor: ew-resize; }
.range-control input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: rgba(200, 206, 222, .2); }
.range-control input[type="range"]::-webkit-slider-thumb { width: 8px; height: 8px; margin-top: -3px; border: 1px solid #d9dbe2; border-radius: 50%; appearance: none; background: #171a23; }
.range-control input[type="range"]::-moz-range-track { height: 2px; background: rgba(200, 206, 222, .2); }
.range-control input[type="range"]::-moz-range-thumb { width: 7px; height: 7px; border: 1px solid #d9dbe2; border-radius: 50%; background: #171a23; }
.population-control { margin-bottom: 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.field-library { padding-top: 15px; border-top: 1px solid var(--hairline); }
.library-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.library-mark { color: var(--cyan); font-size: 11px; }
.preset-save-row, .preset-load-row { display: flex; gap: 6px; margin-top: 6px; }
.preset-save-row input, .preset-load-row select { min-width: 0; height: 31px; padding: 0 9px; border: 1px solid rgba(216, 221, 242, .11); border-radius: 3px; outline: none; background: rgba(255,255,255,.025); color: #c8cad2; font-size: 9px; }
.preset-save-row input { flex: 1; }
.preset-load-row select { flex: 1; }
.preset-save-row input::placeholder { color: #686d78; }
.preset-save-row input:focus, .preset-load-row select:focus { border-color: rgba(100, 232, 230, .38); }
.preset-load-row select:disabled { color: #666b77; }
.preset-save-row button, .preset-load-row button { min-width: 45px; height: 31px; padding: 0 9px; border: 1px solid rgba(216, 221, 242, .12); border-radius: 3px; background: rgba(255,255,255,.035); color: #bec1cb; font: 9px "DM Mono", monospace; cursor: pointer; transition: background .15s, color .15s; }
.preset-save-row button:hover, .preset-load-row button:not(:disabled):hover { background: rgba(255,255,255,.085); color: #f0f1f4; }
.preset-load-row button:disabled { opacity: .38; cursor: default; }
.preset-load-row .delete-field-button { min-width: 30px; padding: 0; font: 17px/1 "Manrope", sans-serif; }
.library-status { min-height: 13px; margin: 8px 0 0; color: #686d78; font-size: 8px; line-height: 1.5; }
.library-status.is-error { color: #e39aa8; }
.panel-footnote { padding-top: 14px; border-top: 1px solid var(--hairline); color: #777c88; font-size: 9px; }
.tiny-star { margin-right: 6px; color: var(--cyan); }

@keyframes breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

@media (max-width: 700px) {
  .scene { min-height: 420px; }
  .masthead { top: 29px; left: 22px; gap: 12px; }
  .brand-copy h1 { font-size: 25px; }
  .intro { font-size: 10px; }
  .corner-toggle { top: 18px; right: 20px; }
  .field-note { top: 68px; right: 22px; gap: 7px; font-size: 7px; }
  #populationReadout { display: none; }
  .species-panel { top: auto; right: 14px; bottom: 92px; width: 224px; transform: none; }
  .species-panel .micro-label { display: none; }
  .species-list { gap: 6px; margin-top: 5px; }
  .species-group-label { margin-bottom: 1px; font-size: 7px; }
  .species-group-items { display: grid; grid-template-columns: repeat(5, 44px); gap: 2px; }
  .species-button { width: 44px; height: 44px; touch-action: manipulation; }
  .species-button::before { width: 9px; height: 9px; }
  .species-hint { display: none; }
  .control-dock { bottom: 20px; min-height: 53px; gap: 1px; padding: 6px; }
  .icon-button { width: 35px; height: 37px; }
  .dock-rule { margin: 0 3px; }
  .text-button { gap: 5px; padding: 0 7px; font-size: 10px; }
  .text-button svg { width: 13px; height: 13px; }
  .dock-rule-end { display: none; }
  .tune-button { width: 37px; padding: 0; }
  .tune-button span:not(.tune-chevron) { display: none; }
  .tune-chevron { margin: 0 0 0 -7px; font-size: 11px; }
  .corner-caption { bottom: 80px; left: 23px; font-size: 7px; }
  .tuning-panel { top: 10px; right: 10px; bottom: 10px; width: min(360px, calc(100vw - 20px)); padding: 23px 20px 18px; }
}

@media (max-width: 370px) {
  .brand-copy h1 { font-size: 22px; }
  .intro { max-width: 180px; }
  .field-note { top: 104px; left: 22px; right: auto; }
  .text-button { padding: 0 5px; }
  .control-dock { bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}