:root{color-scheme:light;--ink:#233e32;--muted:#778174;--paper:#f4f2e9;--green:#284d3c;--line:#dcded1;--gold:#b99860}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'DM Sans',system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ac753b;outline-offset:4px}button{border:0;background:none}a{color:inherit}header.top{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(4vw,20px);gap:20px}.brand{text-decoration:none;font-size:16px;letter-spacing:3px;font-weight:700}.brand span{display:block;font-size:9px;letter-spacing:2.4px;color:var(--muted);margin-top:5px}.title{font-family:'Libre Caslon Display',Georgia,serif;font-size:36px;letter-spacing:-1px;position:absolute;left:50%;transform:translateX(-50%);text-align:center;line-height:1}.title small{font-family:'DM Sans',sans-serif;display:block;font-size:8px;letter-spacing:2.5px;margin-top:9px;color:var(--muted)}.sprig{font-size:32px;color:#66835a}.top-actions{display:flex;gap:18px}.top-actions button{font-size:16px;padding:8px}.top-actions span{font-size:12px;margin-left:4px}main{max-width:1480px;margin:auto;padding:30px 4vw 0}.room-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--muted);font-weight:700}h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:32px;font-weight:400;margin:6px 0 0}.date-chip{display:grid;grid-template-columns:27px 1fr;text-align:left;gap:3px 5px;font-size:12px}.date-chip>span:first-child{grid-row:span 2;font-size:25px;color:#a58751}.date-chip small{font-size:10px;color:var(--muted)}.plant-bar{display:flex;gap:20px;align-items:center;min-height:88px;background:#e9eadf;border:1px solid var(--line);padding:16px 24px;border-radius:0 0 8px 8px}.plant-status{min-width:140px}.plant-status span{display:block;font:24px 'Libre Caslon Display',Georgia,serif}.plant-status small{font-size:10px;color:var(--muted)}.meters{display:flex;flex:1;gap:24px}.meter{flex:1;min-width:60px}.meter label{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#63715f}.meter .track{height:3px;background:#d1d7c5;border-radius:5px;margin-top:8px;overflow:hidden}.meter .track i{display:block;height:100%;background:#719066;transition:width .4s}.meter.danger .track i{background:#b47a5a}.inspect{font-size:11px;border-bottom:1px solid #9fa994;padding:8px 0;white-space:nowrap}.inspect span{margin-left:14px}.bottom-strip{display:flex;gap:22px;padding:20px 0;color:var(--muted);font-size:11px}.bottom-strip>div{margin-right:auto}.bottom-strip button{font-size:11px;padding:0;white-space:nowrap}.bottom-strip button span{margin-left:3px}footer{max-width:1480px;margin:10px auto 0;padding:20px 4vw 25px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#85907d;font-size:9px;letter-spacing:.4px}footer a{margin-left:20px;text-decoration:none}dialog{border:1px solid #cdd4bf;border-radius:16px;padding:25px;width:min(580px,calc(100% - 30px));max-height:85vh;color:var(--ink);background:#f6f4eb;box-shadow:0 25px 100px #10281d4d}dialog::backdrop{background:#12281f66;backdrop-filter:blur(5px)}.panel-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:20px}.panel-head h2{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:32px;margin:5px 0 0}.panel-head>button{font-size:26px;width:36px;height:36px;border-radius:50%;background:#e8eadc}.panel-intro{color:#72816c;font-size:12px;line-height:1.7;margin:0 0 19px}.panel-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.control{padding:11px 14px;border:1px solid #cbd3bf;border-radius:7px;background:#ecefe2;font-size:12px}.control:hover{background:#dde4d0}.control.primary{background:var(--green);color:#f1f3e6;border-color:var(--green)}.control:disabled{opacity:.4;cursor:default}.control.selected{border-color:#456845;background:#dce5cf}.panel-section{margin:24px 0 10px;font-size:10px;letter-spacing:1.5px;color:#6f7d63;text-transform:uppercase}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.specimen{padding:14px;background:#edefe3;border:1px solid #d9dfca;border-radius:9px;min-width:0}.specimen strong{display:block;font-size:13px;font-weight:500}.specimen small{color:#7a866e;font-size:10px;display:block;margin:6px 0 10px}.specimen button{margin-top:3px}.specimen canvas{width:100%;height:130px;display:block}.empty{padding:20px;border:1px dashed #bac7aa;border-radius:8px;font-size:12px;color:#7c8b71;line-height:1.7}input[type=range]{accent-color:#486d47;width:100%}input[type=number],input[type=text],select{border:1px solid #c8d2bb;background:#fffef6;color:var(--ink);padding:10px;border-radius:6px;max-width:100%}.field{display:block;font-size:11px;margin:16px 0 8px;color:#6e7e64}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:17px 0}.stats-grid div{padding:12px;background:#eaeddf;border-radius:8px;text-align:center;font-size:10px;color:#7a846e}.stats-grid strong{display:block;font:23px 'Libre Caslon Display',Georgia,serif;color:var(--ink);margin-top:4px}.gene{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #e1e5d6;font-size:11px}.gene i{display:inline-block;width:65px;height:3px;background:#d2d9c5}.gene i b{display:block;height:100%;background:#6f8b57}.journal-entry{border-left:2px solid #aab992;padding:2px 0 4px 13px;margin:13px 0;font-size:12px;line-height:1.6}.journal-entry small{display:block;color:#8a937a;font-size:9px}.track-item{padding:13px 0;border-bottom:1px solid #e1e5d6;display:flex;align-items:center;gap:10px}.track-item>div{flex:1}.track-item strong{font-size:12px;display:block}.track-item small{font-size:10px;color:#7a856d}#toast{position:fixed;z-index:30;left:50%;bottom:30px;transform:translate(-50%,25px);opacity:0;background:#243f32;color:#f7f4e6;font-size:12px;line-height:1.6;padding:13px 22px;border-radius:9px;pointer-events:none;transition:.3s;max-width:90vw;box-shadow:0 8px 30px #19342030}#toast.visible{opacity:1;transform:translate(-50%,0)}.guide-step{display:flex;gap:15px;margin:20px 0}.guide-step>span{font:30px 'Libre Caslon Display',Georgia,serif;color:#a4b390}.guide-step p{margin:0;font-size:12px;line-height:1.7;color:#748168}.guide-step strong{display:block;color:#334c3a;font-size:13px;margin-bottom:4px}.audio-credit{font-size:10px;color:#8a947f;line-height:1.7;margin-top:20px}.error-note{color:#a46745;font-size:12px;line-height:1.6}

/* One photographic coordinate system, at every screen size. */
.room-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #87917a #e5e6d9;
  border-radius: 8px;
  box-shadow: 0 10px 40px #33432e12;
}
.room-viewport:focus-visible { outline: 3px solid #3c684e; outline-offset: 5px; }
.room {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  overflow: hidden;
  background: #a68b65;
  --object-light: 1;
}
.room-art { position: absolute; inset: 0; z-index: 0; background: url('assets/room.jpg?v=1.2.0') center / cover no-repeat; }
.wall-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg,#3526110c,transparent 30%,transparent 70%,#35261112); }
.window { position: absolute; left:26.20%;top:4.25%;width:49.46%;height:54.52%;z-index:2; }
.window canvas { display:block;width:100%;height:100%;clip-path:url(#window-glass-panes); }
.window-glass { position:absolute;inset:0;pointer-events:none;clip-path:url(#window-glass-panes);background: linear-gradient(112deg,transparent 45%,#ffffff08 46%,transparent 63%); }
.window-cross, .curtain { display: none; pointer-events: none; }
.treatment-sprite {
  position: absolute;
  left:var(--treatment-left,5.96%);top:var(--treatment-top,-4.61%);
  width:var(--treatment-width,89.27%);height:var(--treatment-height,111.38%);
  pointer-events:none;
  z-index:2;
  --treatment-col: 0;
  --treatment-row: 0;
  background-image: url('assets/visuals/treatments.png');
  background-size: 400% 300%;
  background-repeat: no-repeat;
  background-position: calc(var(--treatment-col) * 33.333333%) calc(var(--treatment-row) * 50%);
}
.window-control { position:absolute;inset:0; z-index: 3; padding: 0; border-radius: 3px; }
.bench { display: none; }
.lamp-glow { position: absolute; z-index: 2; left: 14%; top: 35%; width: 44%; height: 45%; background: radial-gradient(ellipse at 15% 0,#fff5b749,transparent 70%); pointer-events: none; mix-blend-mode: screen; transition: opacity .6s; }
.plant-zone { position:absolute;inset:16% 27% 11%; z-index: 3; pointer-events: none; }
.plant-zone canvas { display: block; width: 100%; height: 100%; }
.pot-hotspot { position: absolute; left: 25%; right: 25%; bottom: 5%; height: 24%; pointer-events: auto; border-radius: 22%; }
#plant-tag { position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; padding: 5px 12px; background: #e9e0bf; color: #5f593f; font: 9px Georgia,serif; box-shadow: 0 2px 3px #362d2730; }
.object { position: absolute; z-index: 4; display: block; margin: 0; padding: 0; border: 0; background: none; border-radius: 14%; -webkit-tap-highlight-color: transparent; }
.sprite-object { aspect-ratio: 1415 / 1112; --frame-x: 0; --frame-y: 0; }
.object-sprite {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('assets/visuals/objects.png');
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: calc(var(--frame-x) * 33.333333%) calc(var(--frame-y) * 33.333333%);
  filter: brightness(var(--object-light)) drop-shadow(2px 5px 3px #35251232);
  transform-origin: 50% 83%;
  transition: filter .2s, transform .18s;
}
[data-frame="0"] { --frame-x: 0; }
[data-frame="1"] { --frame-x: 1; }
[data-frame="2"] { --frame-x: 2; }
[data-frame="3"] { --frame-x: 3; }
[data-atlas-row="0"] { --frame-y: 0; }
[data-atlas-row="1"] { --frame-y: 1; }
[data-atlas-row="2"] { --frame-y: 2; }
[data-atlas-row="3"] { --frame-y: 3; }
.clock { left: 84%; top: 7%; width: 10%; border-radius: 50%; }
.clock .object-sprite { translate: var(--clock-offset, 0%) 0; }
.clock[data-frame="0"] { --clock-offset: 0%; }
.clock[data-frame="1"] { --clock-offset: 2.035%; }
.clock[data-frame="2"] { --clock-offset: 7.379%; }
.clock[data-frame="3"] { --clock-offset: 8.188%; }
.greenhouse { left: 71%; top: 60%; width: 16%; }
.seeds { left: 12%; top: 64%; width: 16%; }
.watering { left: 24%; top: 65%; width: 12%; }
.lamp { left: .5%; top: 21%; width: 26%; height: 47%; border-radius: 30%; }
.microscope { left: 85%; top: 43%; width: 12%; height: 35%; z-index: 5; border-radius: 22%; }
.supplies { left: 88%; top: 24%; width: 12%; height: 30%; border-radius: 14%; }
.clock-face { position: absolute; left: 24.156%; top: 27.827%; width: 48%; height: 48%; pointer-events: none; }
.clock-face i, .clock-face b { position: absolute; left: calc(50% - 1px); bottom: 50%; width: 2px; background: #3a3325; border-radius: 4px; transform-origin: 50% 100%; box-shadow: .5px .5px 0 #f8efda88; }
.clock-face i { height: 31%; }
.clock-face b { height: 41%; width: 1.5px; }
.clock-face::after { content: ''; position: absolute; left: calc(50% - 2px); top: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: #76643d; }
.hotspot, .pot-hotspot { transition: background .2s, box-shadow .2s; }
.hotspot:hover, .pot-hotspot:hover { background: radial-gradient(ellipse,#fffef020,transparent 72%); box-shadow: inset 0 0 0 2px #fffbd9a3,0 0 0 1px #17372b8c; }
.sprite-object:hover .object-sprite { transform: translateY(-2px) scale(1.015); filter: brightness(calc(var(--object-light) + .06)) drop-shadow(2px 7px 4px #35251245); }
.clock:hover .object-sprite { transform: none; }
.sprite-object:active .object-sprite, .sprite-object[data-pressed="true"] .object-sprite { transform: translateY(1px) scale(.985); }
.hotspot:active, .pot-hotspot:active { background: #fffef017; }
.window-control, .clock, .watering { touch-action: pan-y; }
.object:focus-visible, .window-control:focus-visible, .pot-hotspot:focus-visible {
  outline: 3px solid #fffef2;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px #183d31;
  background-color: #ffffff0d;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 12;
  top: calc(100% + 7px);
  left: 50%;
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border: 1px solid #f6ecd52c;
  border-radius: 4px;
  color: #fff9e7;
  background: #23352bec;
  box-shadow: 0 3px 12px #1820153d;
  font: 10px/1.45 'DM Sans',system-ui,sans-serif;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -3px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.greenhouse::after, .seeds::after, .watering::after, .microscope::after, .supplies::after, .pot-hotspot::after { top: auto; bottom: calc(100% + 7px); }
.window-control::after { top: 16px; }
.scene-status { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 2px 13px; font-size: 10px; color: #6f7e68; }
.mobile-cue { display: none; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }

@media (min-width: 1500px) { main { padding-left: 60px; padding-right: 60px; } }
@media (max-width: 1000px) {
  .room { width: 960px; }
  .mobile-cue { display: inline; }
  .desktop-cue { display: none; }
  .scene-status { align-items: flex-start; font-size: 9px; line-height: 1.6; }
  .scene-status #room-navigation { max-width: 180px; text-align: right; }
}
@media (max-width: 800px) {
  header.top { height: 74px; padding: 0 20px; }
  .brand { font-size: 12px; letter-spacing: 2px; }
  .brand span { font-size: 7px; }
  .title { font-size: 29px; }
  .top-actions { gap: 5px; }
  .top-actions span { display: none; }
  main { padding: 23px 20px 0; }
  .room-top { margin-bottom: 16px; }
  h1 { font-size: 29px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
  .date-chip { font-size: 10px; }
  .date-chip small { font-size: 9px; }
  .date-chip > span:first-child { font-size: 20px; }
  .plant-bar { flex-wrap: wrap; padding: 14px 17px; gap: 12px; }
  .plant-status { flex: 1; }
  .meters { order: 3; flex-basis: 100%; gap: 18px; }
  .bottom-strip { gap: 14px; flex-wrap: wrap; }
  .bottom-strip > div { flex-basis: 100%; font-size: 10px; }
  .bottom-strip button { font-size: 10px; }
  footer { padding: 20px; font-size: 8px; }
  footer a { margin-left: 8px; }
}
@media (max-width: 480px) {
  main { padding: 20px 12px 0; }
  header.top { padding: 0 12px; gap: 10px; }
  .brand { font-size: 10px; }
  .title { font-size: 25px; }
  .title small { font-size: 6px; letter-spacing: 1.5px; }
  .top-actions button { padding: 6px; }
  .room-top { gap: 10px; }
  .room-top .eyebrow { font-size: 6px; }
  h1 { font-size: 25px; }
  .date-chip { max-width: 125px; }
  .room-viewport { border-radius: 5px; }
  .scene-status #time-state { max-width: 190px; }
  .scene-status #room-navigation { max-width: 135px; }
  .meters { gap: 12px; }
  .meter label { font-size: 9px; }
  footer { flex-direction: column; gap: 10px; }
  .panel-grid { grid-template-columns: 1fr 1fr; }
  .specimen { padding: 10px; }
  .control { font-size: 11px; padding: 10px 12px; }
  .stats-grid { gap: 5px; }
  .stats-grid div { padding: 8px; }
  .panel-head h2 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none!important; scroll-behavior: auto!important; }
  .sprite-object:hover .object-sprite, .sprite-object:active .object-sprite, .sprite-object[data-pressed="true"] .object-sprite { transform: none; }
}

.room[data-bulb="daylight"] .lamp-glow { background:radial-gradient(ellipse at 15% 0,#e3f1ff55,transparent 70%); }
.room[data-bulb="grow"] .lamp-glow { background:radial-gradient(ellipse at 15% 0,#fff0fa65,transparent 75%); }
/* Replaceable photographic fixtures, sharing a stable table footprint. */
.lamp { left:1%;top:29%;width:27%;height:auto;aspect-ratio:1; }
.lamp-sprite { position:absolute;inset:0;background:url('assets/visuals/lamps.png') no-repeat;background-size:300% 200%;background-position:calc(var(--lamp-col,0)*50%) calc(var(--lamp-row,0)*100%);filter:brightness(var(--object-light)) drop-shadow(2px 5px 3px #35251244);pointer-events:none; }
.room[data-lamp-style="architect"] { --lamp-col:1; }
.room[data-lamp-style="halo"] { --lamp-col:2; }
.room[data-lamp="on"] { --lamp-row:1; }
.room[data-lamp="off"] { --lamp-row:0; }
.room[data-bulb="daylight"] .lamp-sprite { filter:brightness(var(--object-light)) saturate(.75) drop-shadow(2px 5px 3px #35251244); }
.room[data-bulb="grow"] .lamp-sprite { filter:brightness(var(--object-light)) saturate(.65) drop-shadow(2px 5px 3px #35251244); }
.room[data-lamp-style="brass"] { --lamp-align-x:1.7578%;--lamp-align-on-y:3.7109%; }
.room[data-lamp-style="architect"] { --lamp-align-x:6.1523%;--lamp-align-on-y:2.7344%; }
.room[data-lamp-style="halo"] { --lamp-align-x:11.9141%;--lamp-align-on-y:2.9297%; }
.lamp-sprite { translate:var(--lamp-align-x,0%) var(--lamp-align-y,0%); }
.room[data-lamp="on"] { --lamp-align-y:var(--lamp-align-on-y,0%); }
.room[data-window-style="blinds"] .treatment-sprite { clip-path:inset(0 0 6% 0); }

/* A browsable seed collection and readable genetics at every garden size. */
dialog[data-panel="seeds"], dialog[data-panel="lab"] { width:min(790px,calc(100% - 30px)); }
input[type="search"] { border:1px solid #c8d2bb;background:#fffef6;color:var(--ink);padding:11px 12px;border-radius:6px;max-width:100%; }
.drawer-search { width:100%; }
.drawer-tabs { display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px; }
.drawer-tabs button { flex:1;min-width:170px; }
.drawer-tabs button span { display:inline-block;margin-left:8px;padding:2px 6px;border-radius:9px;background:#d4dfc6;font-size:10px; }
.seed-filters, .parent-selectors { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0; }
.seed-filter { display:block;min-width:0; }
.seed-filter>span { display:block;color:#65775f;font-size:10px;margin:0 0 7px; }
.seed-filter select { display:block;width:100%;font-size:12px; }
.seed-results { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:15px 0; }
.seed-results p { margin:0;color:#63755a;font-size:11px; }
.seed-results label { color:#64745c;font-size:10px; }
.seed-results select { padding:6px;font-size:10px;margin-left:4px; }
.seed-results .control { padding:7px 10px;font-size:10px; }
.seed-grid { align-items:stretch; }
.seed-grid>.empty { grid-column:1/-1; }
.seed-card { display:flex;flex-direction:column; }
.seed-card-heading { display:flex;justify-content:space-between;align-items:flex-start;gap:9px; }
.seed-card-heading strong { line-height:1.5;font-size:14px; }
.botanical-badge { display:inline-block;background:#e0e7d5;color:#5b6d4f;border:1px solid #d0d9c3;border-radius:20px;font-size:8px;padding:3px 7px;line-height:1.25;white-space:nowrap; }
.botanical-badge.unusual { background:#ece5ce;border-color:#d7cda9;color:#887243; }
.botanical-badge.rare { background:#eee0e4;border-color:#d9bdc7;color:#986e80; }
.botanical-badge.discovered { background:#dce9e4;border-color:#b6cfc5;color:#527667; }
.botanical-badges { display:flex;gap:5px;flex-wrap:wrap;margin:9px 0; }
.botanical-profile { margin:12px 0 19px; }
.botanical-profile.compact { margin:8px 0 12px; }
.botanical-identity { margin:0 0 5px;font-size:12px;color:#415c3d; }
.botanical-scientific { margin:0 0 8px;font-size:10px;font-style:italic;color:#7c886f;line-height:1.6; }
.cultivar-description { margin:3px 0 9px;color:#647559;font-size:11px;line-height:1.6; }
.trait-list { padding:0;margin:8px 0;list-style:none;display:flex;flex-wrap:wrap;gap:5px; }
.trait-list li { font-size:9px;padding:4px 7px;border-radius:5px;background:#e3e8d8;color:#627352;line-height:1.35; }
.fruit-description { font-size:11px;color:#7c7554;line-height:1.65;margin:8px 0 12px; }
.fruit-description>span, .ancestry>span { font-weight:600; }
.seed-card .seed-card-meta { margin-top:auto;display:flex;flex-direction:column;gap:4px;font-size:9px;color:#768367;padding:9px 0;line-height:1.5; }
.seed-card>.control { width:100%; }
.unlock-note { margin:8px 0 0;font-size:10px;color:#8a8166;line-height:1.6; }
.drawer-pagination { display:flex;justify-content:center;align-items:center;gap:16px;margin:20px 0 8px;font-size:10px;color:#6b7c60; }
.ancestry { margin:8px 0;font-size:10px;line-height:1.6;color:#7b886e;overflow-wrap:anywhere; }
.compatibility-note { font-size:11px;color:#6b7c60;line-height:1.7;margin:12px 0; }
.cross-parents { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0; }
.cross-parents article { padding:14px;border:1px solid #d7dec9;border-radius:9px;background:#edf0e3;min-width:0; }
.cross-parents h4, .cross-preview h4 { margin:0 0 8px;font-size:10px;letter-spacing:.6px;color:#6c7e61; }
.cross-parents>article>strong { font-size:13px;line-height:1.5; }
.cross-preview { padding:18px;border:1px solid #bccaac;border-radius:9px;background:#e8efdc;margin:18px 0; }
.cross-preview h4 { color:#466b43;font-size:12px; }
.cross-preview p { margin:9px 0;font-size:12px;line-height:1.7;color:#647758; }
.cross-preview small { color:#829274;font-size:10px;line-height:1.6; }
#hybrid-name { flex:1;min-width:160px; }
#cross-seeds { margin-bottom:5px; }
.genetic-details { margin:16px 0 24px; }
.genetic-details summary { cursor:pointer;color:#65775d;font-size:11px;padding:10px 0; }
.graft-record { border-left:2px solid #b7c9a4;padding:5px 0 5px 13px;margin:13px 0; }
.graft-record>strong { font-size:12px; }
.graft-record>small { display:block;color:#74866b;font-size:10px; }
.specimen-actions { display:flex;flex-wrap:wrap;gap:6px; }
.specimen-actions .control { padding:8px 9px;font-size:10px; }
.herb-harvest { padding:14px;background:#e7edde;border:1px solid #d2ddc4;border-radius:8px;margin:12px 0; }
.herb-harvest p { margin:9px 0 0;color:#718163;font-size:11px;line-height:1.6; }
.herb-harvest.compact { padding:10px; }
.herb-harvest.compact .control { font-size:10px;padding:8px; }
.harvest-inventory { border:1px solid #d7deca;border-radius:9px;padding:5px 14px; }
.harvest-inventory article { padding:11px 0;border-bottom:1px solid #dce2d2; }
.harvest-inventory article:last-child { border-bottom:0; }
.harvest-inventory strong { display:block;font-size:12px; }
.harvest-inventory small { display:block;color:#7a866e;font-size:10px;line-height:1.7;margin-top:4px; }

/* The photograph fills the stage; every utility lives in the bottom dock. */
html { height:100%; }
body { height:100vh;height:100dvh;min-height:0;display:block;background:#75644d; }
.scene-definitions { position:absolute;pointer-events:none; }
main { display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;min-width:0;width:100%;height:100%;max-width:none;margin:0;padding:0; }
.room-viewport { position:relative;display:block;min-height:0;min-width:0;border-radius:0;box-shadow:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:none;background:#5c4734; }
.room-viewport::before { content:'';position:absolute;inset:0;background:url('assets/room.jpg?v=1.2.0') center/cover no-repeat;filter:blur(16px) brightness(.65);clip-path:inset(0);pointer-events:none; }
.room-viewport::-webkit-scrollbar { display:none; }
.room { width:100%;height:auto;aspect-ratio:16/9;min-width:0;max-width:none;margin:0 auto;z-index:1; }
#plant-tag { max-width:88%;overflow:hidden;text-overflow:ellipsis; }
.garden-dock { height:80px;display:grid;grid-template-rows:38px 34px;padding:4px 16px;background:#e8e6da;border-top:1px solid #a9ae97;min-width:0; }
.dock-primary,.dock-secondary { display:flex;align-items:center;min-width:0;gap:14px; }
.dock-primary { border-bottom:1px solid #d2d5c6; }
.dock-brand { display:flex;align-items:center;gap:6px;font:25px 'Libre Caslon Display',Georgia,serif;text-decoration:none;flex:none;line-height:1; }
.dock-brand>span:first-child { color:#63845b;font-size:26px; }
.dock-specimen { display:flex;align-items:baseline;gap:9px;min-width:0;padding:4px 0;flex:1;text-align:left; }
.dock-specimen #plant-name { margin:0;font:21px/1.15 'Libre Caslon Display',Georgia,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; }
.dock-specimen #stage { font-size:9px;color:#63735a;white-space:nowrap; }
.dock-specimen small { font-size:9px;color:#75816c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.date-chip { display:grid;grid-template-columns:20px auto;gap:0 5px;font-size:10px;padding:3px 0;flex:none;max-width:none; }
.date-chip>span:first-child { font-size:19px;grid-row:span 2; }
.date-chip small { font-size:9px; }
.condition-button { display:flex;align-items:center;gap:10px;padding:4px 0;min-width:0; }
.condition-word { font-size:10px; }
.condition-arrow { font-size:12px;color:#728666; }
.condition-button .meters { display:flex;flex:none;gap:4px;order:initial;flex-basis:auto; }
.condition-button .meter { width:26px;min-width:0;flex:none; }
.condition-button .meter label { display:none; }
.condition-button .meter .track { height:3px;margin:0; }
.time-button { font-size:9px;color:#697c60;padding:6px 0;white-space:nowrap; }
.dock-actions { display:flex;gap:6px;margin-left:auto;align-items:center;flex:none; }
.dock-actions button { min-width:30px;min-height:30px;padding:4px 7px;font-size:17px;line-height:1;border-radius:4px; }
.dock-actions button:hover,.dock-specimen:hover,.date-chip:hover,.condition-button:hover,.time-button:hover { background:#dce1cf; }
.dock-actions button span { font-size:10px;margin-left:3px; }
.condition-stats { grid-template-columns:repeat(4,1fr); }
.care-message { padding:12px 14px;background:#e6edd9;border-radius:7px;font-size:12px;color:#647a57;line-height:1.6; }
#toast { bottom:90px; }
dialog { max-height:calc(100dvh - 22px);overflow-y:auto;overscroll-behavior:contain; }
@media (max-width:800px) {
 .garden-dock { padding-left:10px;padding-right:10px; }
 .dock-primary,.dock-secondary { gap:9px; }
 .brand-word { display:none; }
 .dock-specimen small { display:none; }
 .dock-actions button { padding:4px 6px; }
 .dock-actions button span { display:none; }
}
@media (max-width:560px) {
 .garden-dock { height:76px;grid-template-rows:36px 34px;padding:3px 9px; }
 .dock-brand { font-size:20px; }
 .dock-brand>span:first-child { font-size:24px; }
 .dock-specimen { gap:5px;align-items:center; }
 .dock-specimen #plant-name { font-size:19px; }
 .dock-specimen #stage { display:none; }
 .date-chip { font-size:9px;grid-template-columns:16px auto;gap:0 3px;max-width:115px; }
 .date-chip>span:first-child { font-size:16px; }
 .date-chip small { font-size:8px; }
 .condition-button { gap:5px; }
 .condition-button .meters { gap:3px; }
 .condition-button .meter { width:13px; }
 .condition-word { font-size:9px; }
 .condition-arrow { display:none; }
 .time-button { font-size:8px; }
 .dock-actions { gap:3px; }
 .dock-actions button { min-width:30px;min-height:30px;padding:4px; }
 #toast { bottom:86px; }
 .room .object,.pot-hotspot { min-width:40px;min-height:40px; }
 .condition-stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-height:500px) and (min-width:561px) {
 .garden-dock { height:64px;grid-template-rows:30px 30px;padding:2px 12px; }
 .dock-brand { font-size:22px; }
 .dock-specimen #plant-name { font-size:19px; }
 .dock-specimen small { display:none; }
 .dock-actions button { min-height:28px; }
 #toast { bottom:74px; }
 .room .object,.pot-hotspot { min-width:40px;min-height:40px; }
}
@media (max-width:560px) {
 dialog[data-panel="seeds"],dialog[data-panel="lab"] { padding:20px;width:calc(100% - 18px);max-height:90vh; }
 .seed-grid,.cross-parents { grid-template-columns:1fr; }
 .parent-selectors { grid-template-columns:1fr; }
 .seed-card-heading strong { font-size:15px; }
 .seed-filters { gap:10px; }
 .seed-filter select { font-size:11px;padding:9px; }
 .seed-results { align-items:flex-start; }
 .drawer-tabs button { min-width:120px;padding:10px 8px;font-size:11px; }
 .drawer-pagination { gap:10px; }
 .drawer-pagination .control { padding:10px;font-size:11px; }
 .cross-preview { padding:14px; }
 .greenhouse-grid { grid-template-columns:1fr; }
 .greenhouse-grid .specimen canvas { height:175px; }
}