/* A small field guide, shared by the homepage and the full ocean. */
.specimen-controls{
  --specimen-ink:#e0e8ed;
  --specimen-muted:#9aaeb8;
  --specimen-accent:#b8e2dc;
  --camera-row:44px;
  position:fixed;right:max(24px,env(safe-area-inset-right,0px));bottom:max(24px,env(safe-area-inset-bottom,0px));
  z-index:12;color:var(--specimen-ink);font:12px/1.5 DriftSans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-align:left;isolation:isolate;
}
.specimen-controls[hidden],.specimen-controls [hidden]{display:none!important}
.specimen-controls[data-unavailable=true]{--camera-row:0px}
body[data-render-mode=webgl] .ocean-stage{pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
body[data-render-mode=webgl] .ocean-stage[data-orbiting=true]{cursor:grabbing}
.ocean-stage:focus-visible{outline:1px solid #b8e2dc70;outline-offset:-7px}
.specimen-controls *{box-sizing:border-box}
.specimen-controls button,.specimen-controls input,.specimen-controls summary{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.specimen-controls button{color:inherit;border:0;cursor:pointer}
.specimen-controls button:disabled,.specimen-controls input:disabled{opacity:.38;cursor:default}
.specimen-controls button:focus-visible,.specimen-controls input:focus-visible,.specimen-controls summary:focus-visible{outline:2px solid var(--specimen-accent);outline-offset:3px}
.specimen-controls svg{display:block;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.specimen-camera{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-height:var(--camera-row);font-size:10px;color:#9aaeb8;text-shadow:0 1px 8px #0008}
.specimen-camera>span{white-space:nowrap;pointer-events:none}
.specimen-camera>span>span{margin:0 4px;color:#69818d}
.specimen-camera button{min-height:44px;padding:0 10px;background:none;border-radius:22px;font-size:10px;color:#b8e2dc}
.specimen-camera button:disabled{opacity:.3}
.specimen-launcher{display:flex;align-items:center;width:fit-content;margin-left:auto;padding:3px;border:1px solid #d7e1f518;border-radius:999px;background:rgba(8,18,27,.67);backdrop-filter:blur(20px);box-shadow:0 4px 30px #0002}
.specimen-toggle{display:flex;align-items:center;gap:11px;min-height:44px;padding:0 13px 0 12px;background:none;border-radius:999px;white-space:nowrap}
.specimen-toggle>svg:first-child{width:19px;height:19px;color:var(--specimen-accent)}
.specimen-toggle>svg:last-child{width:14px;height:14px;margin-left:3px;opacity:.5;transform:rotate(180deg);transition:transform .2s}
.specimen-toggle[aria-expanded=true]>svg:last-child{transform:rotate(0)}
.specimen-toggle span{font-size:11px;letter-spacing:.01em}
.specimen-divider{width:1px;height:16px;background:#d7e1f51a}
.specimen-icon{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;background:none;color:var(--specimen-muted)!important}
.specimen-icon svg{width:17px;height:17px}
.specimen-controls button:hover:not(:disabled){background-color:#d9e5ff0b;color:#f7fbff}
.specimen-panel{
  position:absolute;right:0;bottom:calc(100% + 12px);width:min(368px,calc(100vw - 32px));
  max-height:min(740px,calc(100dvh - 142px - var(--camera-row) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));
  padding:21px;border:1px solid #bcd4df26;border-radius:18px;background:rgba(8,20,29,.94);
  backdrop-filter:blur(30px);box-shadow:0 16px 90px #0007;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#bcd4df35 transparent;
}
.specimen-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 19px}
.specimen-heading .specimen-icon{margin:-8px -9px 0 0;align-self:flex-start}
.specimen-eyebrow{margin:0 0 6px!important;font:8px/1.5 DriftMono,ui-monospace,monospace!important;letter-spacing:.17em;color:#89a4b0}
.specimen-heading h2{font:400 27px/1.2 DriftSerif,Georgia,serif;margin:0;letter-spacing:-.025em;color:#e4ebed}
.specimen-choices{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.specimen-choice{display:flex;align-items:center;gap:10px;min-height:76px;min-width:0;padding:10px 9px!important;border:1px solid #bad2dc18!important;border-radius:9px;background:#cadcec03;text-align:left}
.specimen-choice[aria-pressed=true]{border-color:#b8e2dc70!important;background:#a8dcc810;color:#dbf0e9}
.specimen-silhouette{width:35px;height:43px;color:#a6c0ca;opacity:.85}
.specimen-choice[aria-pressed=true] .specimen-silhouette{color:#c4eee3;opacity:1}
.specimen-choice strong{display:block;font-size:11px;font-weight:500;letter-spacing:0;white-space:nowrap}
.specimen-choice small{display:block;font-size:8px;line-height:1.5;color:#8ca3ae;margin-top:3px}
.specimen-description{min-height:3em;margin:15px 0 12px!important;font-size:11px;line-height:1.75;color:#a6b9c0}
.specimen-fallback{font-size:11px;line-height:1.65;color:#c9c6a7;margin:12px 0}
.specimen-tuning{border-top:1px solid #bad2dc18;border-bottom:1px solid #bad2dc18}
.specimen-tuning summary{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0;list-style:none;font-size:11px;color:#cbd9de;cursor:pointer}
.specimen-tuning summary::-webkit-details-marker{display:none}
.specimen-tuning summary>span{font-size:17px;font-weight:300;color:#9bb0ba;transition:transform .2s}
.specimen-tuning[open] summary>span{transform:rotate(45deg)}
.specimen-parameters{display:grid;grid-template-columns:1fr 1fr;gap:3px 20px;padding:5px 0 0}
.specimen-parameter{display:block;min-width:0;padding:0 0 3px}
.specimen-parameter:has(#specimen-bellSoftness){grid-column:1/-1}
.specimen-parameter>span{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:10px;color:#afc1c8}
.specimen-parameter output{font:9px DriftMono,ui-monospace,monospace;font-variant-numeric:tabular-nums;color:#72939e}
.specimen-parameter input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;accent-color:#b8e2dc}
.specimen-parameter input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,#aecfc8 var(--fill,50%),#283d49 var(--fill,50%))}
.specimen-parameter input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:#283d49}
.specimen-parameter input[type=range]::-moz-range-progress{height:2px;background:#aecfc8}
.specimen-parameter input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;border:2px solid #d1e9e1;border-radius:50%;background:#9bbcb7;box-shadow:0 0 0 4px #a6d6ca07}
.specimen-parameter input[type=range]::-moz-range-thumb{width:9px;height:9px;border:2px solid #d1e9e1;border-radius:50%;background:#9bbcb7}
.specimen-parameter:has(input:disabled)>span{opacity:.45}
.specimen-reset{display:block;min-height:44px;margin:0 0 4px;padding:0;background:none;font-size:10px!important;color:#8da8b3!important;text-decoration:underline;text-decoration-color:#8da8b34a;text-underline-offset:3px}
.specimen-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0 0}
.specimen-seed{font:8px/1.6 DriftMono,ui-monospace,monospace;letter-spacing:.025em;color:#7896a1;max-width:60%}
.specimen-share{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 0 0 10px;background:none;font-size:10px!important;color:#afc8d0!important;white-space:nowrap}
.specimen-share svg{width:15px;height:15px}
.specimen-art-note{font:italic 11px/1.5 DriftSerif,Georgia,serif!important;margin:3px 0 0!important;color:#718d98}
.specimen-colophon{display:flex;align-items:center;justify-content:space-between;gap:8px}
.specimen-secret{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;background:none;border-radius:50%;opacity:.3;transition:opacity .25s}
.specimen-secret svg{width:21px;height:21px;color:#e9a6d0}
.specimen-secret:hover,.specimen-secret:focus-visible,.specimen-secret[aria-pressed=true]{opacity:1}
.specimen-link-fallback label{display:block;font-size:10px;color:#a6bbc4;margin:8px 0}
.specimen-link-fallback input{width:100%;min-height:38px;padding:7px 9px;border:1px solid #bcd4df33;border-radius:6px;background:#122630;color:#dcebec;font-size:10px;user-select:text;-webkit-user-select:text}
@media(max-width:640px){
  .specimen-controls{right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px))}
  .specimen-panel{padding:18px;width:min(356px,calc(100vw - 32px));border-radius:15px}
  .specimen-heading{margin-bottom:15px}
  .specimen-choice{gap:7px;padding:9px 7px!important}
  .specimen-silhouette{width:30px}
  .specimen-choice small{font-size:7.5px}
}
@media(max-height:450px){
  .specimen-panel{max-height:calc(100dvh - 90px - var(--camera-row));bottom:calc(100% + 6px)}
  .specimen-controls{bottom:10px}
}
@media(prefers-reduced-motion:reduce){
  .specimen-controls *{transition:none!important}
}