*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#8fcbe6;color:#e6fbff;font-family:"JetBrains Mono",Menlo,monospace;font-weight:200}
#ocean-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;animation:fade 1.2s ease forwards}
@keyframes fade{to{opacity:1}}
#terminal{position:fixed;top:30px;left:50%;transform:translateX(-50%);z-index:4;text-align:center;font-size:22px;white-space:nowrap;pointer-events:none;text-shadow:0 0 12px rgba(95,211,232,.5)}
#sub{font-size:13px;opacity:.6;margin-top:8px;min-height:1em}
.cursor{animation:blink 1s infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
#orbs{position:fixed;inset:0;z-index:2}
.orb{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);background:none;border:0;cursor:pointer;color:inherit;font:inherit;animation:bob 9s ease-in-out var(--d) infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:6px -18px}}
.orb-body{display:block;width:150px;height:150px;border-radius:50%;transition:transform .3s,filter .3s;box-shadow:inset -18px -22px 40px rgba(0,0,0,.55),0 0 40px var(--glow)}
.orb:hover .orb-body,.orb:focus-visible .orb-body{transform:scale(1.07);filter:brightness(1.25)}
.orb-label{display:block;margin-top:12px;font-size:15px;letter-spacing:.2em;opacity:.8}
.orb-music{--glow:rgba(40,180,230,.45)}
.orb-music .orb-body{width:180px;height:180px;background:radial-gradient(circle at 35% 30%,#bff4ff 0,#36b5dc 18%,#0b4f7a 55%,#021a2c 100%)}
.orb-about{--glow:rgba(70,230,190,.35)}
.orb-about .orb-body{background:radial-gradient(circle at 35% 30%,#d8fff3 0,#4fd8b4 20%,#0c5d58 60%,#02201f 100%)}
.orb-links{--glow:rgba(140,140,255,.35)}
.orb-links .orb-body{width:120px;height:120px;background:radial-gradient(circle at 35% 30%,#e3e3ff 0,#8a8cf0 20%,#2c2f7a 60%,#0a0b26 100%)}
#overlay{position:fixed;inset:0;background:rgba(0,10,20,.6);backdrop-filter:blur(3px);z-index:9}
.popup{position:fixed;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(3,22,34,.92);border:1px solid rgba(120,220,240,.35);border-radius:10px;box-shadow:0 0 50px rgba(30,160,210,.25);display:flex;flex-direction:column;max-height:86vh;width:min(560px,92vw)}
.popup[hidden],#overlay[hidden]{display:none}
.popup-music{width:min(1040px,94vw)}
.popup-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(120,220,240,.2);font-size:14px}
.close{background:none;border:0;color:#e6fbff;font-size:24px;cursor:pointer;line-height:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;padding:18px;overflow-y:auto}
.card{display:flex;flex-direction:column;gap:6px;font-size:12px}
.art{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#06303f}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.play{position:absolute;right:8px;bottom:8px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(230,251,255,.92);color:#032;cursor:pointer;font-size:15px;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.5);transition:transform .2s}
.play:hover{transform:scale(1.1)}
.card.playing .play{background:#5fd3e8}
.card.playing .art{outline:2px solid #5fd3e8}
.title{font-weight:400;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{opacity:.6}
.svc{display:flex;gap:10px}
.svc a{color:#9fe8f5;text-decoration:none;border-bottom:1px dotted}
.svc a[hidden]{display:none}
.about-body{display:flex;gap:18px;padding:18px;font-size:13px;line-height:1.6;overflow-y:auto}
.portrait{width:150px;height:150px;border-radius:50%;flex:none}
.ph-tag,.link-tile em{color:#ffcf6b;font-style:normal}
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:18px}
.link-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border:1px solid rgba(120,220,240,.3);border-radius:8px;color:#e6fbff;text-decoration:none;font-size:13px;text-align:center}
.link-tile:hover{background:rgba(95,211,232,.12)}
.link-tile.placeholder{opacity:.55;border-style:dashed;cursor:not-allowed}
.ico{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#bff4ff,#0b4f7a);display:grid;place-items:center;font-size:14px}
@media (max-width:767px){
  #terminal{top:22px;font-size:18px}
  #orbs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding-top:70px}
  .orb{position:static;transform:none}
  .orb-music .orb-body{width:150px;height:150px}
  .orb .orb-body{width:120px;height:120px}
  .orb-links .orb-body{width:100px;height:100px}
  .popup{top:auto;bottom:0;left:0;transform:none;width:100vw!important;max-height:88vh;border-radius:14px 14px 0 0}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px;padding:12px}
  .about-body{flex-direction:column;align-items:center}
}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}
.orb-onchain-art{--glow:rgba(240,150,220,.35)}
.orb-onchain-art .orb-body{width:110px;height:110px;background:radial-gradient(circle at 35% 30%,#ffe3f6 0,#e08acb 20%,#6a2a63 60%,#1d0a1c 100%)}
.ph-note{padding:14px 18px 0;font-size:12px;opacity:.85}
@media (max-width:767px){#orbs{gap:14px}.orb .orb-body{width:96px!important;height:96px!important}.orb-music .orb-body{width:120px!important;height:120px!important}.orb-label{margin-top:6px}}
.orb-photography{--glow:rgba(60,240,230,.45)}
.orb-photography .orb-body{width:130px;height:130px;background:radial-gradient(circle at 35% 30%,#e0fffd 0,#3fe6dc 20%,#0b6a6e 60%,#022426 100%)}
.popup-photography{width:min(860px,94vw)}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding:18px;overflow-y:auto}
.photo{display:flex;flex-direction:column;gap:6px;font-size:12px}
.photo img,.photo-ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block}
.photo-ph{position:relative;overflow:hidden}
.photo-ph::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 30% 120%,rgba(255,255,255,.08) 0 2px,transparent 2px 18px)}
.photo figcaption{opacity:.6}
@media (max-width:767px){
  #orbs{gap:8px;padding-top:80px}
  .orb .orb-body{width:82px!important;height:82px!important}
  .orb-music .orb-body{width:100px!important;height:100px!important}
  .orb-label{margin-top:4px;font-size:13px}
  .photo-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}
}
@media (max-width:767px){#orbs{gap:16px;padding-top:70px}.orb{animation-name:bobsm}}
@keyframes bobsm{0%,100%{translate:0 0}50%{translate:4px -4px}}
/* ---- glassy bubble orbs ---- */
.orb-body{position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0,rgba(255,255,255,.5) 6%,transparent 16%),
    radial-gradient(circle at 70% 78%,rgba(255,255,255,.28) 0,transparent 22%),
    radial-gradient(circle at 50% 55%,rgba(var(--tint),.10) 0,rgba(var(--tint),.22) 55%,rgba(var(--tint),.55) 82%,rgba(255,255,255,.35) 96%,transparent 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset -10px -14px 30px rgba(var(--tint),.35),inset 8px 10px 24px rgba(255,255,255,.12),0 0 34px rgba(var(--tint),.35)!important;
  backdrop-filter:blur(2px) saturate(1.4)}
.orb-body::before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;
  background:conic-gradient(from 200deg,#9ff6ff,#ffd6f5,#fff6c9,#b7ffe0,#c9c4ff,#9ff6ff);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 70%);mask:radial-gradient(circle,transparent 62%,#000 70%);opacity:.55;mix-blend-mode:screen;animation:spin 14s linear infinite}
.orb-body::after{content:"";position:absolute;left:18%;top:14%;width:34%;height:16%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(3px);transform:rotate(-28deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.orb-music{--tint:120,230,245}
.orb-photography{--tint:150,240,215}
.orb-onchain-art{--tint:205,190,250}
.orb-about{--tint:175,225,220}
.orb-links{--tint:235,240,245}
.orb-label{color:#eafcff;opacity:.95;text-shadow:0 0 8px #000,0 1px 2px #000}
/* ---- light tranquil palette ---- */
#terminal{color:#0f3a5c;text-shadow:0 0 10px rgba(255,255,255,.7)}
#sub{opacity:.8}
.orb-label{color:#0d3352;opacity:1;font-weight:400;text-shadow:0 0 6px rgba(255,255,255,.85),0 0 2px rgba(255,255,255,.9)}
.orb-body{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset -10px -14px 30px rgba(30,90,140,.25),inset 8px 10px 24px rgba(255,255,255,.2),0 6px 24px rgba(20,70,120,.18),0 0 30px rgba(255,255,255,.35)!important}
#overlay{background:rgba(40,90,130,.35)}
.orb-music{--tint:90,220,235}.orb-photography{--tint:120,230,200}.orb-onchain-art{--tint:190,170,245}.orb-about{--tint:150,215,210}.orb-links{--tint:250,250,252}
#ocean-gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* ---- on-chain artwork background: "00 waters" (generative WebGL) ---- */
#art-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#02060c}
#art-bg iframe,#art-bg .art-poster{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;pointer-events:none}
#art-bg .art-poster{filter:blur(8px);transform:scale(1.05)}
.art-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(2,10,20,.05),rgba(2,10,20,.35));pointer-events:none}
#ocean-gl{display:none}
#ocean-canvas{z-index:1}
#terminal{color:#eafcff;text-shadow:0 0 10px rgba(0,20,40,.9),0 1px 3px rgba(0,0,0,.8)}
.orb-label{color:#f2feff;font-weight:400;text-shadow:0 0 6px rgba(0,15,30,.95),0 1px 3px rgba(0,0,0,.9)}
#overlay{background:rgba(2,12,24,.5)}
/* ---- mobile: scattered layout like desktop ---- */
@media (max-width:767px){
  #orbs{display:block;padding:0}
  .orb{position:absolute;left:var(--mx);top:var(--my);transform:translate(-50%,-50%);animation-name:bob}
  .orb-music .orb-body{width:132px!important;height:132px!important}
  .orb-about .orb-body{width:100px!important;height:100px!important}
  .orb-photography .orb-body{width:94px!important;height:94px!important}
  .orb-onchain-art .orb-body,.orb-links .orb-body{width:82px!important;height:82px!important}
  .orb-label{font-size:12px;letter-spacing:.14em;white-space:nowrap}
}
@keyframes bob{0%,100%{translate:0 0}50%{translate:4px -10px}}