:root{
  --ink:#f4fbff;
  --muted:#b8cee1;
  --panel:rgba(4,19,45,.68);
  --panel-strong:rgba(4,19,45,.84);
  --line:rgba(223,244,255,.18);
  --accent:#8bd7ff;
  --accent-2:#d6f3ff;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#03132e;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,a{font:inherit}
button:focus-visible,a:focus-visible{outline:3px solid rgba(139,215,255,.65);outline-offset:3px}
.display-shell{position:relative;width:100vw;height:100svh;min-height:100vh;overflow:hidden;isolation:isolate;background:#03132e;cursor:default}
.poster-backdrop{position:absolute;inset:-4%;z-index:-4;background-image:url("jellyfish-poster.png");background-size:cover;background-position:center;filter:blur(22px) saturate(1.1);transform:scale(1.08);opacity:.84}
.water-tint{position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 50% 24%,rgba(46,129,225,.20),transparent 32%),linear-gradient(90deg,rgba(0,17,46,.44),rgba(0,22,58,.08) 40%,rgba(0,22,58,.08) 60%,rgba(0,17,46,.44))}
.video-stage{position:absolute;inset:0;z-index:-2;overflow:hidden}
.jelly-video{position:absolute;inset:0;width:100%;height:100%;object-position:center center;object-fit:contain;background:transparent;opacity:0;transition:opacity 1.8s ease,filter .35s ease,transform .35s ease}
.jelly-video.visible{opacity:1}
.display-shell[data-fit="contain"] .jelly-video{object-fit:contain}
.display-shell[data-fit="cover"] .jelly-video{object-fit:cover}
.dimmer{position:absolute;inset:0;z-index:-1;pointer-events:none;background:#000;opacity:0;transition:opacity .35s ease}
.display-shell[data-dim="1"] .dimmer{opacity:.20}
.display-shell[data-dim="2"] .dimmer{opacity:.42}
.display-shell[data-dim="3"] .dimmer{opacity:.62}
.ui-layer{transition:opacity .4s ease,transform .4s ease}
.display-shell.ui-hidden .ui-layer{opacity:0;pointer-events:none}
.display-shell.ui-hidden .display-header{transform:translateY(-10px)}
.display-shell.ui-hidden .control-dock{transform:translate(-50%,18px)}
.display-header{position:absolute;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:18px;z-index:10}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(237,250,255,.92);color:#16446f;font-weight:950;box-shadow:0 8px 28px rgba(0,0,0,.22)}
.brand-copy strong,.brand-copy small{display:block}.brand-copy strong{font-size:.9rem;letter-spacing:.01em}.brand-copy small{margin-top:2px;color:#d5e7f3;font-size:.66rem;font-weight:700}
.clock{font-variant-numeric:tabular-nums;font-size:clamp(1.25rem,3vw,2.2rem);font-weight:800;letter-spacing:.02em;text-shadow:0 3px 16px rgba(0,0,0,.55);padding:8px 12px;border-radius:14px;background:rgba(0,20,53,.24);backdrop-filter:blur(6px)}
.hidden{display:none!important}
.control-dock{position:absolute;z-index:12;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:8px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(16px) saturate(1.12);border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.35);max-width:calc(100vw - 24px)}
.control-btn{border:1px solid transparent;background:transparent;color:var(--ink);padding:10px 12px;border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:7px;font-weight:800;font-size:.75rem;white-space:nowrap}
.control-btn:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.10)}
.control-btn[aria-pressed="true"]{background:rgba(139,215,255,.14);color:#e7f8ff;border-color:rgba(139,215,255,.22)}
.control-btn.primary{background:rgba(224,247,255,.94);color:#123f66}.control-btn.primary:hover{background:#fff}
.tap-hint{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);z-index:8;color:rgba(234,248,255,.72);font-size:.65rem;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.6);white-space:nowrap}
.start-prompt{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 36px));padding:18px;border-radius:18px;background:var(--panel-strong);border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 20px 50px rgba(0,0,0,.4);display:grid;gap:14px;text-align:center}
.start-prompt strong,.start-prompt span{display:block}.start-prompt span{margin-top:5px;color:var(--muted);font-size:.78rem}.start-prompt button{border:0;border-radius:12px;padding:11px 14px;background:#e8f8ff;color:#14456d;font-weight:900;cursor:pointer}
.credit{position:absolute;z-index:4;right:max(13px,env(safe-area-inset-right));top:50%;transform:translateY(-50%) rotate(90deg) translateX(50%);transform-origin:right center;color:rgba(223,243,255,.38);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;pointer-events:none}
@media(max-width:700px){.control-dock{gap:3px;padding:6px}.control-btn{padding:10px}.control-btn span:last-child{display:none}.control-btn.primary span:last-child{display:inline}.tap-hint{bottom:82px}.credit{display:none}}
@media(orientation:portrait){.display-shell[data-fit="contain"] .poster-backdrop{opacity:.45}}
@media(prefers-reduced-motion:reduce){.ui-layer,.jelly-video,.dimmer{transition:none}}