:root { color-scheme:dark; --ink:#172f31; --glass:#173536db; --paper:#e9efd6; --muted:#9fb6a2; --gold:#ecd486; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--paper); font:13px ui-rounded,"Avenir Next",system-ui,sans-serif; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; background:transparent; border:0; border-radius:6px; }
button:hover { background:#ffffff10; }
button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible { outline:2px solid #f4cf72; outline-offset:4px; }
button[aria-pressed="true"] { color:var(--gold); }
[hidden] { display:none!important; }
#aquarium { position:relative; height:100dvh; min-height:520px; overflow:hidden; }
#world { width:100%; height:100%; display:block; touch-action:none; image-rendering:pixelated; }
.masthead { position:absolute; inset:0 0 auto; padding:23px 28px; display:flex; justify-content:space-between; align-items:center; background:linear-gradient(#102d35aa,transparent); pointer-events:none; }
.masthead>* { pointer-events:auto; }
.brand { font-size:26px; font-weight:850; letter-spacing:5px; text-decoration:none; color:#f1f4d7; }
.brand span { display:block; font-size:11px; letter-spacing:2.3px; font-weight:500; margin-top:5px; }
.evidence { font-size:11px; letter-spacing:.5px; display:grid; grid-template-columns:8px 1fr; gap:4px 8px; }
.evidence i { background:#bdd286; width:5px; height:5px; border-radius:50%; margin-top:4px; box-shadow:0 0 10px #d7df8970; }
.evidence small { grid-column:2; font-size:11px; letter-spacing:1.5px; opacity:.65; }
.masthead nav { display:flex; gap:8px; }
.masthead nav button { background:#183b37a0; border:1px solid #ffffff20; padding:9px 12px; font-size:11px; }
.world-ribbon { position:absolute; top:96px; left:29px; display:flex; align-items:baseline; gap:8px; font-size:11px; text-shadow:0 1px 4px #12372b; }
.world-ribbon strong { font-size:25px; font-weight:650; }
.world-ribbon .dot { opacity:.35; }
.world-ribbon button { margin-left:9px; font-size:11px; color:var(--muted); }
#counter-ribbon { position:absolute; top:131px; left:29px; display:flex; gap:17px; font-size:11px; color:#ddedc6; }
#notice { position:absolute; left:50%; bottom:94px; transform:translateX(-50%); background:#153632b5; padding:9px 17px; border:1px solid #ffffff10; border-radius:20px; font-size:11px; text-align:center; max-width:440px; pointer-events:none; }
.transport { position:absolute; bottom:22px; left:28px; right:28px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.transport>div { display:flex; gap:5px; background:var(--glass); border:1px solid #d9e3c320; border-radius:9px; padding:4px; box-shadow:0 5px 20px #102f3a30; }
.transport button,.transport select { min-height:32px; min-width:32px; padding:5px 10px; font-size:11px; }
.transport select { border:1px solid #9fb6a2; background:#173536; color:#e9efd6; border-radius:6px; }
.transport select option { background:#173536; color:#e9efd6; }
#creature-card { position:absolute; bottom:92px; left:28px; width:270px; padding:17px; border:1px solid #cbdbc52c; border-radius:14px; background:linear-gradient(135deg,#244b40f2,#193c3ee8); box-shadow:0 12px 35px #12353c33; display:grid; grid-template-columns:75px 1fr; align-items:center; gap:12px; }
#deselect { position:absolute; top:8px; right:10px; font-size:21px; color:var(--muted); }
#portrait { width:70px; height:84px; image-rendering:pixelated; }
.identity small { font-size:11px; letter-spacing:1.4px; color:#bacd9c; }
.identity h2 { font-size:16px; margin:6px 0; font-weight:600; }
.identity p { font-size:11px; color:var(--muted); margin:0; line-height:1.6; }
#needs { grid-column:1/-1; display:flex; gap:12px; }
.need { flex:1; font-size:11px; color:#cbd8b7; }
.need span { display:block; margin-bottom:6px; }
.need progress { width:100%; height:5px; accent-color:#b5ce85; display:block; }
.need i { display:block; height:100%; background:#b5ce85; }
#follow,#detail-toggle { grid-column:1/-1; text-align:left; font-size:11px; padding:3px 0; color:#d7dda8; }
#detail-toggle { font-size:11px; color:var(--muted); }
#detail { grid-column:1/-1; max-height:230px; overflow:auto; font-size:11px; line-height:1.7; color:#b9cbbb; }
#detail p { margin:5px 0; }
.record { border-top:1px solid #ffffff12; padding:5px 0; display:flex; justify-content:space-between; gap:8px; overflow-wrap:anywhere; }
.record b { font-weight:500; color:#deebc9; }
.mesh-actions { display:flex; gap:4px; margin-top:9px; }
.mesh-actions input { min-width:0; width:90px; font-size:11px; padding:6px; background:#112e30; border:1px solid #ffffff20; border-radius:4px; }
.mesh-actions button { font-size:11px; background:#44604b; padding:4px; }
#tinker { position:absolute; bottom:79px; right:28px; max-width:440px; padding:17px; border:1px solid #ffffff20; border-radius:12px; background:var(--glass); }
#tinker small { letter-spacing:1.4px; font-size:11px; color:#b8cfa7; }
#tinker>div { display:flex; flex-wrap:wrap; gap:5px; margin:12px 0; }
#tinker button { border:1px solid #ffffff18; padding:8px; font-size:11px; }
#tinker button[aria-pressed="true"] { border-color:#d8c676; background:#8b8d5730; }
#tinker p { font-size:11px; color:var(--muted); margin:0; }
#settings { position:absolute; top:87px; right:26px; bottom:78px; width:295px; border:1px solid #ffffff20; border-radius:13px; background:var(--glass); padding:22px; overflow:auto; }
#settings h2 { margin:0 0 23px; font-size:19px; font-weight:500; }
#settings-close { position:absolute; top:13px; right:13px; font-size:23px; }
#settings label { display:block; font-size:11px; color:#bbd0b7; margin:17px 0; }
#settings input,#settings select { width:100%; display:block; margin-top:7px; padding:10px; border:1px solid #ffffff20; border-radius:5px; background:#163735; }
#settings>button:not(#settings-close) { width:100%; padding:11px; background:#768650; color:#f2f3d1; margin:5px 0 17px; font-size:11px; }
.checkpoint-controls { display:flex; gap:7px; }
.checkpoint-controls button { border:1px solid #ffffff25; padding:8px; font-size:11px; }
#checkpoint-status { font-size:11px; line-height:1.6; color:var(--muted); }
#settings dt { font-size:11px; color:#9bb6a1; margin-top:19px; }
#settings dd { margin:5px 0; font-size:11px; overflow-wrap:anywhere; }
#observatory { position:absolute; top:91px; right:25px; width:510px; height:420px; background:#102532f2; border:1px solid #adc5c02a; border-radius:13px; box-shadow:0 25px 75px #112b3b50; display:flex; flex-direction:column; overflow:hidden; }
#observatory.expanded { inset:17px; width:auto; height:auto; z-index:5; background:#0c2230fa; }
#observatory header { padding:17px 20px 10px; display:flex; justify-content:space-between; align-items:center; }
#observatory header small { font-size:11px; letter-spacing:2px; color:#83a7b7; }
#observatory h2 { font-size:19px; font-weight:450; margin:7px 0 0; }
#observatory header button { font-size:11px; padding:6px; color:#bdcfca; }
#observatory nav { padding:0 15px; display:flex; gap:4px; }
#observatory nav button { font-size:11px; padding:6px 9px; color:#82a7b2; }
#observatory nav button[aria-pressed="true"] { background:#638b9430; color:#e3ead2; }
#observatory-canvas { flex:1; min-height:0; width:100%; display:block; }
#scene-caption { padding:0 20px 12px; font-size:11px; color:#9ebdbb; line-height:1.6; }
#observatory footer { border-top:1px solid #adc5c018; padding:10px 16px; display:flex; justify-content:space-between; gap:12px; font-size:11px; color:#769ea6; }
#observatory footer label { display:flex; align-items:center; gap:5px; }
#event-scrub { width:72px; height:10px; accent-color:#c6d591; }
#projection-controls { padding:0 20px 15px; display:flex; gap:10px; flex-wrap:wrap; }
#projection-controls label { font-size:11px; color:#91b3b5; flex:1; }
#projection-controls input,#projection-controls select { display:block; width:100%; margin-top:4px; background:#163442; border:1px solid #ffffff15; padding:5px; border-radius:4px; font-size:11px; }
#projection-total { display:block; flex-basis:100%; font-size:11px; color:#dddca4; }
#loading { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%,#31584c,#102b35); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; }
#loading h1 { font-size:26px; font-weight:350; letter-spacing:.5px; }
#loading p { font-size:11px; color:#adc7b6; }
.loading-creature { color:#edd275; font-size:53px; margin-bottom:14px; }
@media(max-width:720px) {
  .masthead { padding:17px; }
  .brand { font-size:21px; }
  .brand span { font-size:11px; letter-spacing:1.7px; }
  .evidence { position:absolute; top:81px; left:17px; font-size:11px; }
  .evidence small { display:none; }
  .masthead nav button { padding:8px; }
  .masthead nav button span { display:none; }
  .world-ribbon { top:105px; left:17px; gap:6px; font-size:11px; max-width:calc(100% - 34px); flex-wrap:wrap; }
  .world-ribbon strong { font-size:19px; }
  .world-ribbon button { font-size:11px; margin-left:3px; }
  #counter-ribbon { top:135px; left:17px; gap:10px; font-size:11px; }
  .transport { left:12px; right:12px; bottom:15px; gap:5px; }
  .transport button,.transport select { font-size:11px; min-width:25px; padding:4px 6px; }
  #creature-card { bottom:78px; left:14px; width:245px; padding:13px; gap:8px; }
  #notice { top:159px; bottom:auto; max-width:calc(100% - 28px); width:max-content; font-size:11px; }
  #tinker { bottom:76px; right:12px; left:12px; max-width:none; }
  #settings { top:77px; right:12px; bottom:70px; width:min(295px,calc(100% - 24px)); }
  #observatory { top:155px; right:12px; left:12px; width:auto; height:420px; }
  #observatory.expanded { inset:9px; }
  #observatory header { padding:15px 13px 9px; }
  #observatory h2 { font-size:17px; }
  #observatory footer { font-size:11px; gap:6px; padding:10px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
.voice-volume{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted)}
.voice-volume input{width:62px;accent-color:#819962}
.message-caption{position:absolute;left:20px;bottom:92px;pointer-events:none;color:#f7efd2;font-size:11px;text-shadow:0 1px 3px #193b28}
.message-transcript{position:absolute;right:20px;top:98px;z-index:4;max-width:420px;background:#193b32bb;border-radius:10px;padding:8px 12px;color:#e2e8cd;font-size:10px}
.message-transcript pre{white-space:pre-wrap;max-height:160px;overflow:auto;font:10px/1.6 monospace}
@media(max-width:700px){.voice-volume input{width:35px}.message-transcript{top:120px;right:8px;max-width:260px}.message-caption{left:12px;bottom:130px;max-width:250px}}

#notice:empty{display:none}
#restore-controls{position:absolute;right:20px;top:20px;background:#183b37a0;padding:9px 12px;font-size:11px;z-index:8}
.quiet-view .masthead,.quiet-view .world-ribbon,.quiet-view #counter-ribbon,.quiet-view .transport,.quiet-view .message-transcript,.quiet-view #notice{visibility:hidden;pointer-events:none}
/* Optional database views share the observatory; the closed habitat stays unchanged. */
#observatory.database-mode { height:min(680px,calc(100% - 115px)); width:min(720px,calc(100% - 50px)); }
#observatory.database-mode.expanded { width:auto; height:auto; }
#observatory.database-mode > nav, #observatory.database-mode > canvas,
#observatory.database-mode > #scene-caption, #observatory.database-mode > #projection-controls,
#observatory.database-mode > footer, #observatory.database-mode #autoplay { display:none; }
#database-features { flex:1; min-height:0; overflow:auto; padding:7px 20px 20px; color:#d8e5dc; font-size:13px; line-height:1.55; }
#observatory #database-features nav { padding:0; gap:8px; position:sticky; top:0; background:#102532; z-index:1; }
#observatory #database-features nav button { font-size:13px; padding:8px 12px; }
.database-scope { color:#adc9c6; font-size:12px; border-bottom:1px solid #adc5c02a; padding-bottom:12px; }
.database-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.database-actions button,.database-actions select,.database-actions input { font:inherit; border:1px solid #adc5c044; border-radius:6px; padding:7px 10px; background:#183944; color:#e1ebe3; }
.database-actions input { width:90px; }
.database-actions button:disabled { opacity:.5; }
.database-note { color:#9fbab9; font-size:12px; }
.database-error,.database-result.fail { color:#f3b5a0; }
.database-result.pass { color:#b8ddb0; }
.database-result.inconclusive,.database-result.unavailable { color:#e2d39b; }
.database-metrics { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; border-left:2px solid #80b39b; padding:8px 12px; }
.database-metrics dd { margin:0; text-align:right; font-family:monospace; overflow-wrap:anywhere; }
.database-body h3 { font-size:15px; font-weight:550; margin:22px 0 8px; }
.database-body details { border-top:1px solid #adc5c025; padding:9px 0; }
.database-body summary { cursor:pointer; }
.database-body pre { font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; color:#b8d4cb; }
.database-history { padding-left:25px; }
.database-history li { padding:8px 5px; border-bottom:1px solid #adc5c018; }
.database-history li span { display:block; font-size:12px; color:#9fbab9; overflow-wrap:anywhere; }
.history-info strong { color:#e2d39b; }
.history-fail strong { color:#efb39f; }
.history-ok strong { color:#b8ddb0; }
@media(max-width:700px) { #observatory.database-mode { left:12px; right:12px; width:auto; height:calc(100% - 180px); } #database-features { padding:7px 12px 15px; } #observatory header { flex-wrap:wrap; gap:8px; } }

/* The habitat follows the visible viewport; browser/page zoom stays available outside its canvas. */
html,body { width:100%; height:100%; overflow:hidden; }
#aquarium { position:fixed; top:var(--visible-top,0px); left:var(--visible-left,0px); width:var(--visible-width,100%); height:var(--visible-height,100dvh); min-height:0; }
.masthead { padding-top:max(16px,env(safe-area-inset-top)); padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
.transport { bottom:max(12px,env(safe-area-inset-bottom)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); }
.transport button,.transport select,.masthead button,#restore-controls { min-width:44px; min-height:44px; }
#deselect,#settings-close,#close-observatory,#expand-observatory { min-width:44px; min-height:44px; flex-shrink:0; }
#settings,#tinker,#creature-card { max-height:calc(100% - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow:auto; overscroll-behavior:contain; }
#settings-close,#deselect { position:sticky; float:right; margin-left:auto; top:0; z-index:2; background:var(--glass); }
#observatory { top:calc(88px + env(safe-area-inset-top)); height:calc(100% - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height:680px; }
#observatory.expanded { top:max(8px,env(safe-area-inset-top)); bottom:max(8px,env(safe-area-inset-bottom)); left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); height:auto; max-height:none; }
#observatory header { flex-shrink:0; gap:8px; flex-wrap:wrap; }
#observatory header>div:last-child { display:flex; align-items:center; flex-wrap:wrap; margin-left:auto; }
#observatory header button,#observatory nav button { min-height:44px; }
#database-features { overscroll-behavior:contain; }
#observatory.database-mode { height:calc(100% - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
@media(max-width:640px) {
  .transport { display:grid; grid-template-columns:1fr auto; gap:5px; }
  .transport>div { min-width:0; gap:3px; padding:3px; }
  .transport>div:nth-child(2) { grid-column:1/-1; grid-row:2; justify-content:space-between; }
  .transport button,.transport select { padding:4px 6px; }
  #creature-card { bottom:calc(124px + env(safe-area-inset-bottom)); width:min(300px,calc(100% - 24px)); left:12px; }
  #settings,#tinker { bottom:calc(124px + env(safe-area-inset-bottom)); }
  #observatory,#observatory.database-mode { top:calc(102px + env(safe-area-inset-top)); height:calc(100% - 230px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  #observatory.expanded,#observatory.database-mode.expanded { top:max(8px,env(safe-area-inset-top)); height:auto; }
  .world-ribbon { top:calc(72px + env(safe-area-inset-top)); }
  .evidence { display:none; }
  #notice { top:calc(108px + env(safe-area-inset-top)); }
}
@media(max-height:500px) {
  .masthead { padding-top:max(5px,env(safe-area-inset-top)); padding-bottom:4px; }
  .brand { font-size:19px; }.brand span{font-size:9px;}
  .world-ribbon { top:calc(54px + env(safe-area-inset-top)); font-size:10px; }.world-ribbon strong{font-size:18px;}
  #counter-ribbon,#notice { display:none; }
  #observatory,#observatory.database-mode { top:calc(62px + env(safe-area-inset-top)); height:calc(100% - 130px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  #observatory header { padding:5px 10px; }#observatory header small{display:none;}#observatory h2{margin:0;font-size:15px;}
  #observatory.expanded,#observatory.database-mode.expanded { top:max(8px,env(safe-area-inset-top)); height:auto; }
  #creature-card,#settings { bottom:calc(70px + env(safe-area-inset-bottom)); max-height:calc(100% - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
#deselect { grid-column:1/-1; justify-self:end; margin:0; padding:0; }
#tinker-close { min-width:44px; min-height:44px; float:right; position:sticky; top:0; background:var(--glass); font-size:21px; }
.journey-controls { padding-bottom:12px; border-bottom:1px solid #ffffff20; margin-bottom:12px; }
.journey-controls>div { display:flex; flex-wrap:wrap; gap:6px; }
.journey-controls button { min-height:44px; padding:6px 9px; background:#ffffff0b; }
.journey-controls p { font-size:11px; line-height:1.6; color:var(--muted); }

#settings button,.database-actions button,.database-actions select,.database-actions input,.database-tabs button,#tinker button{min-height:44px;min-width:44px} #local-slots{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}

#rehearsal-history{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}

#settings,#tinker,#creature-card,#observatory{z-index:5} #observatory.expanded{z-index:6}
#creature-card button,#creature-card input,#database-features button{min-height:44px;min-width:44px} #database-features summary{min-height:44px;padding-block:10px}