:root {
  color-scheme: dark;
  --ink: #f3efe7;
  --muted: #b4b0a7;
  --dim: #918f88;
  --line: rgba(255, 255, 255, 0.11);
  --panel: rgba(19, 19, 17, 0.88);
  --panel-strong: rgba(14, 14, 13, 0.96);
  --butter: #f4cf64;
  --warm: #dba84e;
  --ok: #a9c89d;
  --danger: #e88872;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #11110f; }

button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible,
input:focus-visible,
input[type="range"]:focus-visible,
select:focus-visible,
#lab-canvas:focus-visible {
  outline: 2px solid #f3d575;
  outline-offset: 3px;
}
#lab-canvas:focus-visible { outline-offset: -5px; }

.app-shell { position: relative; width: 100%; height: 100%; min-width: 860px; min-height: 600px; overflow: hidden; background: #171612; }
#lab-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.film-grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .035; mix-blend-mode: soft-light;
  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='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: grain .25s steps(2) infinite;
}
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(2%,-1%) } 50% { transform: translate(-1%,2%) } 75% { transform: translate(1%,1%) } }

.topbar {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 86px; padding: 20px 26px;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,9,.72), transparent);
}
.topbar > * { pointer-events: auto; }
.brand-lockup { display: flex; align-items: center; gap: 13px; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.brand-mark { width: 38px; height: 38px; position: relative; border: 1px solid rgba(245,210,105,.45); border-radius: 50%; }
.brand-mark::before, .brand-mark::after, .brand-mark span { content:""; position: absolute; border-radius: 50%; border: 1px solid rgba(245,210,105,.68); }
.brand-mark::before { inset: 7px; }
.brand-mark::after { width: 4px; height: 4px; left: 16px; top: 16px; background: var(--butter); box-shadow: 0 0 15px var(--butter); }
.brand-mark span { inset: -1px; border-color: transparent; border-top-color: var(--butter); transform: rotate(28deg); }
.eyebrow { margin: 0 0 4px; color: #c7b97f; font-size: 10px; line-height: 1; font-weight: 750; text-transform: uppercase; letter-spacing: .18em; }
h1 { margin: 0; font-size: 21px; line-height: 1; letter-spacing: -.025em; font-weight: 630; }
h1 em { margin-left: 7px; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: .13em; }
.topbar-actions { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(14,14,12,.58); backdrop-filter: blur(18px); box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.segmented, .icon-button { border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .02em; cursor: pointer; }
.segmented { padding: 8px 11px; }
.segmented:hover, .segmented.is-active { color: var(--ink); background: rgba(255,255,255,.085); }
.icon-button { display: flex; gap: 7px; align-items: center; margin-left: 3px; padding: 8px 11px; border-left: 1px solid var(--line); border-radius: 0 7px 7px 0; }
.icon-button:hover, .icon-button.is-active { color: var(--butter); }

.control-panel {
  position: absolute; z-index: 4; top: 96px; right: 22px; bottom: 140px; width: 338px; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 28px 80px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.03); scrollbar-width: thin; scrollbar-color: #484741 transparent;
}
.panel-heading { padding: 18px 18px 13px; display: flex; align-items: flex-start; justify-content: space-between; }
.panel-heading h2 { margin: 0; font-size: 15px; font-weight: 620; letter-spacing: -.02em; }
.engine-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.engine-badge i { width: 6px; height: 6px; border-radius: 50%; background: #c99d55; box-shadow: 0 0 8px #c99d55; }
.engine-badge.is-ready i { background: var(--ok); box-shadow: 0 0 9px var(--ok); }

.preset-row { margin: 0 13px 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: rgba(255,255,255,.035); border-radius: 9px; }
.preset { min-width: 0; padding: 7px 3px; border: 0; border-radius: 6px; color: var(--dim); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.preset:hover { color: var(--muted); }
.preset.is-active { color: var(--ink); background: rgba(255,255,255,.08); }
.preset-hint { margin: 7px 18px 12px; color: var(--dim); font-size: 10px; line-height: 1.4; }

.control-section { padding: 14px 18px 15px; border-top: 1px solid rgba(255,255,255,.07); }
.range-control { display: block; margin: 0 0 13px; }
.range-control:last-child { margin-bottom: 0; }
.range-control > span { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.range-control b, .section-label b { font-size: 11px; font-weight: 620; letter-spacing: .025em; color: #d3d0c9; }
.range-control output { color: #e2cd87; font-size: 11px; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; height: 3px; margin: 0; appearance: none; border-radius: 3px; outline: none; background: linear-gradient(90deg, #d8bc65 var(--fill, 50%), rgba(255,255,255,.12) var(--fill, 50%)); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; border: 2px solid #1b1a17; border-radius: 50%; background: #f2d576; box-shadow: 0 0 0 1px rgba(255,255,255,.16); }
input[type="range"]:disabled { opacity: .35; cursor: not-allowed; }
.section-label { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 11px; }
.section-label span { display: grid; gap: 4px; }
.section-label small, .material small { color: var(--dim); font-size: 10px; font-weight: 450; line-height: 1.35; }
.material-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.material { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 1px solid rgba(255,255,255,.075); border-radius: 9px; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; }
.material:hover { border-color: rgba(255,255,255,.16); }
.material.is-active { border-color: rgba(225,199,111,.42); background: rgba(224,194,94,.07); }
.material > span { display: grid; gap: 1px; font-size: 11px; font-weight: 620; }
.swatch { flex: 0 0 25px; height: 25px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.swatch.marble { background: linear-gradient(135deg, #b7b4aa, #6e716f 45%, #c8c4b8 48%, #7d7c74 52%, #aaa79e); }
.swatch.steel { background: repeating-linear-gradient(90deg,#7c807f 0 1px,#bbbdb7 1px 3px,#747776 3px 4px); }
.swatch.wood { background: repeating-linear-gradient(8deg,#4a2c20 0 3px,#76503b 3px 5px,#3a241b 5px 7px); }
.swatch.ceramic { background: linear-gradient(145deg,#d5d0c2,#96988f); }
.switch { width: 33px; height: 18px; padding: 2px; border: 0; border-radius: 10px; background: rgba(255,255,255,.13); cursor: pointer; transition: .2s ease; }
.switch i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #888781; transition: .2s ease; }
.switch[aria-checked="true"] { background: rgba(236,199,89,.36); }
.switch[aria-checked="true"] i { transform: translateX(15px); background: var(--butter); box-shadow: 0 0 8px rgba(244,207,100,.5); }
.range-control.compact { margin-top: 12px; }
.quality-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.quality { padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--dim); font-size: 10px; cursor: pointer; }
.quality.is-active { color: var(--ink); border-color: rgba(225,199,111,.4); background: rgba(225,199,111,.08); }

.telemetry {
  position: absolute; z-index: 4; left: 22px; right: 378px; bottom: 20px; height: 106px; display: grid;
  grid-template-columns: repeat(4,minmax(112px,1fr)) minmax(220px,1.55fr); border: 1px solid var(--line); border-radius: 16px;
  background: rgba(15,15,13,.82); backdrop-filter: blur(24px) saturate(1.15); box-shadow: 0 24px 70px rgba(0,0,0,.3); overflow: hidden;
}
.metric { position: relative; min-width: 0; padding: 16px 14px; border-right: 1px solid rgba(255,255,255,.07); }
.metric > span, .history-label span { display: block; margin-bottom: 8px; color: var(--dim); font-size: 10px; font-weight: 720; text-transform: uppercase; letter-spacing: .10em; }
.metric strong { display: block; color: #eeebe3; font-size: 25px; line-height: 1; font-weight: 480; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.metric.primary strong { color: #f2d777; }
.metric strong small { margin-left: 3px; color: var(--muted); font-size: 11px; letter-spacing: 0; }
.metric em { display: block; margin-top: 7px; overflow: hidden; color: #9c9991; font-size: 10px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.history-card { padding: 13px 14px 8px; min-width: 0; }
.history-label { display: flex; justify-content: space-between; align-items: center; }
.history-label span { margin-bottom: 2px; }
.history-label em { color: #a29f96; font-size: 10px; font-style: normal; }
#history-canvas { width: 100%; height: 68px; display: block; }

.transport-controls { position: absolute; z-index: 5; left: 26px; bottom: 140px; display: flex; align-items: center; gap: 7px; }
.transport { height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(18,18,16,.74); backdrop-filter: blur(14px); font-size: 11px; font-weight: 650; cursor: pointer; }
.transport.primary { display: flex; align-items: center; gap: 8px; min-width: 90px; border-color: rgba(224,194,94,.35); background: rgba(224,194,94,.14); }
.transport.primary span { color: var(--butter); font-size: 11px; }
.transport:hover { background: rgba(255,255,255,.1); }
.transport-controls label { height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(18,18,16,.74); color: var(--dim); font-size: 10px; }
.transport-controls select { border: 0; color: #d7d3ca; background: transparent; font-size: 10px; }
.transport-controls option { background: #1a1916; }
.sim-clock { margin-left: 5px; color: rgba(255,255,255,.55); font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; font-variant-numeric: tabular-nums; }
.mobile-gpu-note { display: none; }
.canvas-instructions { position: absolute; z-index: 5; left: 430px; bottom: 153px; margin: 0; color: #aaa79f; font-size: 10px; letter-spacing: .015em; text-shadow: 0 1px 8px #000; }
.canvas-instructions span { margin: 0 4px; color: #d3bd70; }
.science-button { position: absolute; z-index: 5; right: 24px; bottom: 105px; border: 0; background: transparent; color: #a29f96; font-size: 10px; text-decoration: underline; text-decoration-color: rgba(255,255,255,.18); text-underline-offset: 4px; cursor: pointer; }
.science-button:hover { color: #d2cec5; }

dialog { width: min(540px,90vw); padding: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; color: var(--ink); background: #181714; box-shadow: 0 35px 120px rgba(0,0,0,.7); }
dialog::backdrop { background: rgba(5,5,4,.7); backdrop-filter: blur(6px); }
dialog form { position: relative; padding: 30px; }
dialog h2 { margin: 4px 0 15px; font-size: 26px; font-weight: 520; letter-spacing: -.04em; }
dialog p { color: #aaa69d; font-size: 12px; line-height: 1.65; }
dialog .equation { margin: 20px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; color: #e4d49c; background: rgba(255,255,255,.025); font-family: Cambria, Georgia, serif; text-align: center; }
dialog .fine-print { color: #74726c; font-size: 10px; }
dialog a { color: #d8c47e; font-size: 11px; }
.dialog-close { position: absolute; top: 16px; right: 17px; border: 0; background: transparent; color: #8d8a83; font-size: 22px; cursor: pointer; }

.boot-overlay { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #27241c, #0d0d0b 62%); transition: opacity .6s ease, visibility .6s; }
.boot-overlay.is-hidden { opacity: 0; visibility: hidden; }
.boot-card { width: 390px; text-align: center; }
.boot-card h2 { margin: 12px 0 8px; font-size: 22px; font-weight: 520; letter-spacing: -.035em; }
.boot-card > p:not(.eyebrow) { color: #77756e; font-size: 11px; }
.boot-orbit { position: relative; width: 74px; height: 74px; margin: 0 auto 25px; border: 1px solid rgba(245,210,105,.2); border-radius: 50%; animation: spin 8s linear infinite; }
.boot-orbit i { position: absolute; border-radius: 50%; }
.boot-orbit i:nth-child(1) { inset: 12px; border: 1px solid rgba(245,210,105,.25); }
.boot-orbit i:nth-child(2) { width: 7px; height: 7px; top: 7px; left: 34px; background: var(--butter); box-shadow: 0 0 14px var(--butter); }
.boot-orbit i:nth-child(3) { width: 4px; height: 4px; bottom: 16px; left: 11px; background: #8ba8a1; }
@keyframes spin { to { transform: rotate(360deg) } }
.boot-progress { height: 2px; margin-top: 22px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.08); }
.boot-progress i { display: block; width: 8%; height: 100%; background: linear-gradient(90deg,#b99743,#f0d980); box-shadow: 0 0 10px #d6ba60; transition: width .4s ease; }
.error-panel { position: absolute; z-index: 25; inset: 0; padding: 20vh 25vw; background: #131210; }
.error-panel h2 { max-width: 600px; font-size: 32px; font-weight: 520; letter-spacing: -.04em; }
.error-panel p { max-width: 600px; color: var(--muted); line-height: 1.6; }
.error-panel button { padding: 10px 15px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.08); cursor: pointer; }

body.heater-active #lab-canvas { cursor: crosshair; }
body.photo-active .control-panel, body.photo-active .telemetry, body.photo-active .transport-controls, body.photo-active .canvas-instructions, body.photo-active .science-button { opacity: 0; pointer-events: none; }
body.photo-active .topbar { opacity: .3; }
.control-panel, .telemetry, .transport-controls, .canvas-instructions, .science-button, .topbar { transition: opacity .3s ease; }

@media (max-width: 1180px) {
  .control-panel { width: 310px; }
  .telemetry { right: 350px; grid-template-columns: repeat(4,minmax(100px,1fr)); }
  .history-card { display: none; }
  .metric:nth-child(4) { border-right: 0; }
}

@media (max-height: 760px) {
  .control-panel { top: 82px; bottom: 122px; }
  .topbar { height: 72px; padding-top: 15px; padding-bottom: 15px; }
  .telemetry { bottom: 14px; height: 94px; }
  .transport-controls { bottom: 119px; }
  .canvas-instructions { bottom: 132px; }
  .science-button { bottom: 92px; }
  .metric { padding-top: 13px; }
}

@media (max-width: 859px), (max-height: 599px) {
  html, body { overflow: auto; }
  .app-shell { width: max(100%, 760px); height: max(100%, 600px); min-width: 760px; min-height: 600px; }
}

@media (max-width: 900px) {
  html, body { width: 100%; height: auto; overflow-x: hidden; overflow-y: auto; }
  .app-shell {
    --scene-height: 360px;
    --scene-height: clamp(330px, 42svh, 420px);
    width: 100%; height: auto; min-width: 0; min-height: 100vh; padding-top: var(--scene-height);
    padding-bottom: max(18px, env(safe-area-inset-bottom)); overflow: visible;
    display: flex; flex-direction: column;
  }
  #lab-canvas { top: 0; bottom: auto; width: 100%; height: var(--scene-height); touch-action: pan-y; }
  .film-grain { inset: 0 0 auto; width: 100%; height: var(--scene-height); }
  .topbar { height: auto; min-height: 76px; padding: 14px; flex-wrap: wrap; align-content: flex-start; gap: 10px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-mark::after { left: 13px; top: 13px; }
  h1 { font-size: 18px; }
  .topbar-actions { width: 100%; max-width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .segmented, .icon-button { padding: 7px 8px; font-size: 10px; }
  .control-panel { position: relative; order: 3; top: auto; right: auto; bottom: auto; width: calc(100% - 20px); max-height: none; margin: 0 10px; }
  .telemetry {
    position: relative; order: 2; left: auto; right: auto; bottom: auto; width: calc(100% - 20px); height: auto;
    margin: 0 10px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible;
  }
  .metric { min-height: 104px; border-right: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
  .metric:nth-child(even) { border-right: 0; }
  .history-card { display: block; min-height: 104px; grid-column: 1 / -1; }
  .transport-controls {
    position: relative; order: 0; top: auto; bottom: auto; left: auto; right: auto; width: calc(100% - 20px);
    margin: 8px 10px; display: grid; grid-template-columns: .8fr 1fr 1.55fr; gap: 6px;
  }
  .transport, .transport-controls label { min-width: 0; width: 100%; height: 44px; justify-content: center; }
  .transport-controls label { padding: 0 10px; }
  .transport-controls select { min-width: 0; font-size: 16px; }
  .sim-clock { grid-column: 1 / -1; margin: -1px 3px 0; justify-self: end; }
  body.mobile-safe .mobile-gpu-note {
    display: block; order: 1; margin: 0 10px 10px; padding: 10px 12px; border: 1px solid rgba(225,199,111,.20);
    border-radius: 10px; color: #bdb7a5; background: rgba(225,199,111,.055); font-size: 10px; line-height: 1.45;
  }
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
  .quality, .preset, .material { min-height: 44px; }
  .canvas-instructions { width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .science-button { position: relative; order: 4; right: auto; bottom: auto; display: block; margin: 2px 14px 22px auto; }
  .error-panel { position: fixed; padding: 16vh 24px; }
  .boot-overlay { position: fixed; }
}

@media (max-width: 420px) {
  .topbar { padding: 10px; }
  .segmented, .icon-button { min-width: 0; padding: 6px 2px; justify-content: center; font-size: 9px; }
  .icon-button { margin-left: 0; }
  .icon-button span { display: none; }
  .preset { font-size: 9px; white-space: normal; }
  .engine-badge { max-width: 96px; overflow: hidden; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .film-grain, .boot-orbit { animation: none; }
  .boot-overlay, .boot-progress i, .switch, .switch i,
  .control-panel, .telemetry, .transport-controls, .canvas-instructions, .science-button, .topbar { transition: none; }
}