/* ---- public/styles-v04.css ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root{
  --red:#ff3b30;
  --green:#34c759;
  --blue:#0a84ff;
  --ink:#101820;
  --sky-top:#58ace4;
  --sky-mid:#8bc8ec;
  --sky-low:#c7e1ef;
  --panel-tone:#111820;
  --glow:rgba(255,255,255,.20);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  overflow:hidden;
  color:var(--ink);
  background:var(--sky-mid);
  font-family:"Space Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}
button{font:inherit}

.sky{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(74,168,224,.16),rgba(203,229,242,.20)),
    url('https://commons.wikimedia.org/wiki/Special:FilePath/Clouds%20in%20blue%20sky.jpg') center/cover no-repeat,
    linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 49%,var(--sky-low) 100%);
  transition:filter 1.2s ease,background 1.2s ease;
}
.sky::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.12));
  pointer-events:none;
}

.cloud-bank{
  position:absolute;
  width:90vw;
  height:24vw;
  min-height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.40);
  filter:blur(42px);
  opacity:.55;
}
.cloud-bank-a{left:-28vw;top:-8vw;transform:rotate(-4deg)}
.cloud-bank-b{right:-34vw;bottom:-11vw;transform:rotate(7deg);opacity:.42}

.cloud{
  position:absolute;
  width:28vw;
  min-width:340px;
  height:8.8vw;
  min-height:108px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  filter:blur(7px);
  opacity:.72;
  box-shadow:
    4.8vw -2.6vw 0 1.1vw rgba(255,255,255,.78),
    10.8vw -.8vw 0 .9vw rgba(255,255,255,.72),
    16.8vw -2.2vw 0 .65vw rgba(255,255,255,.67),
    20vw .6vw 0 -.3vw rgba(255,255,255,.56);
  animation:cloudDrift linear infinite;
}
.cloud-a{top:10%;left:-39vw;animation-duration:70s}
.cloud-b{top:34%;left:-47vw;animation-duration:94s;opacity:.52;transform:scale(.78)}
.cloud-c{top:62%;left:-36vw;animation-duration:81s;opacity:.58;transform:scale(1.08)}
.cloud-d{top:82%;left:-52vw;animation-duration:112s;opacity:.40;transform:scale(1.22)}

.bird{
  position:absolute;
  left:-8vw;
  color:rgba(18,38,52,.48);
  font:800 31px/1 Georgia,serif;
  letter-spacing:-.12em;
  transform:scaleX(1.9);
  animation:birdFly linear infinite;
}
.bird-a{top:20%;animation-duration:34s}
.bird-b{top:48%;font-size:22px;animation-duration:47s;animation-delay:-18s;opacity:.64}
.bird-c{top:70%;font-size:19px;animation-duration:41s;animation-delay:-29s;opacity:.46}

.rain-layer{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity .7s ease;
  overflow:hidden;
}
body.rain-on .rain-layer{opacity:.72}
.raindrop{
  position:absolute;
  top:-14vh;
  width:1px;
  height:12vh;
  background:linear-gradient(transparent,rgba(232,246,255,.85));
  transform:rotate(8deg);
  animation:rainFall linear infinite;
}
body.storm-on .sky{filter:saturate(.58) brightness(.72) contrast(1.08)}
body.storm-on .rain-layer{opacity:.93}
body.lightning::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:30;
  pointer-events:none;
  background:rgba(237,247,255,.78);
  animation:flash .28s ease-out forwards;
}

.cursor-glow{
  position:fixed;
  left:0;top:0;
  width:260px;height:260px;
  margin:-130px 0 0 -130px;
  z-index:1;
  border-radius:50%;
  pointer-events:none;
  opacity:.46;
  background:radial-gradient(circle,var(--glow) 0%,transparent 68%);
  filter:blur(8px);
  transition:background .35s ease,opacity .25s ease;
}

.world-mark{
  position:fixed;
  left:30px;
  top:27px;
  z-index:7;
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:.69rem;
  letter-spacing:.29em;
  color:rgba(8,25,37,.54);
  text-transform:uppercase;
}
.world-mark::after{content:"";width:42px;height:1px;background:currentColor;opacity:.45;margin-left:3px}
.world-mark b{font-size:.93rem;letter-spacing:.12em;color:rgba(8,25,37,.72)}

.utility-nav{
  position:fixed;
  top:18px;
  right:24px;
  z-index:8;
  display:flex;
  align-items:center;
  gap:18px;
}
.nav-icon{
  width:52px;
  height:52px;
  padding:4px;
  border:0;
  background:transparent;
  color:rgba(13,32,44,.83);
  cursor:pointer;
  filter:drop-shadow(0 5px 8px rgba(15,44,62,.12));
  transition:transform .28s cubic-bezier(.16,1,.3,1),color .28s ease,filter .28s ease;
}
.nav-icon svg{width:100%;height:100%;overflow:visible}
.nav-icon svg *{vector-effect:non-scaling-stroke}
.nav-world svg circle,.nav-world svg path,.nav-alien svg>path:not(.eye){fill:none;stroke:currentColor;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
.nav-alien .eye{fill:currentColor;stroke:none}
.nav-phone{color:#d9272e}
.nav-phone svg path,.nav-phone svg rect,.nav-phone svg circle{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.nav-icon:hover{transform:translateY(-5px) scale(1.09);filter:drop-shadow(0 9px 11px rgba(15,44,62,.18))}
.nav-world:hover{transform:translateY(-5px) rotate(11deg) scale(1.09)}
.nav-phone:hover{animation:phoneShake .38s ease}
.nav-alien:hover .left-eye,.nav-alien:hover .right-eye{animation:alienBlink .75s ease}

.stage{
  position:relative;
  z-index:4;
  width:100%;
  height:100vh;
  display:grid;
  place-items:center;
  padding:0 .2vw;
}
.wordmark{
  width:99.7vw;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  perspective:1600px;
  transform:translateY(1vh);
}
.letter{
  position:relative;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  font-family:"Archivo Black",Impact,"Arial Black",sans-serif;
  font-size:min(33.4vw,72vh);
  line-height:.70;
  letter-spacing:-.145em;
  cursor:pointer;
  transform-origin:50% 62%;
  text-shadow:0 15px 38px rgba(18,40,55,.075);
  transition:transform .52s cubic-bezier(.16,1,.3,1),filter .45s ease,opacity .45s ease;
}
.letter-red{color:var(--red)}
.letter-green{color:var(--green)}
.letter-blue{color:var(--blue)}
.letter-red:hover,.letter-green:hover,.letter-blue:hover,.letter:focus-visible{
  transform:translateY(-2.6vh) scale(1.035) rotateX(5deg);
  filter:saturate(1.14) contrast(1.05);
  z-index:5;
}
.letter-muted{
  color:rgba(18,26,31,.145);
  opacity:.72;
  filter:blur(.35px) contrast(.72);
  text-shadow:1px 1px 0 rgba(255,255,255,.36),0 8px 28px rgba(25,45,60,.04);
  -webkit-mask-image:
    radial-gradient(circle at 12% 18%,transparent 0 4%,#000 5% 100%),
    linear-gradient(112deg,#000 0 10%,rgba(0,0,0,.33) 19%,#000 31%,rgba(0,0,0,.48) 49%,#000 66%,rgba(0,0,0,.3) 83%,#000 100%);
  mask-image:linear-gradient(112deg,#000 0 10%,rgba(0,0,0,.33) 19%,#000 31%,rgba(0,0,0,.48) 49%,#000 66%,rgba(0,0,0,.3) 83%,#000 100%);
}
.letter-muted:hover{opacity:.92;filter:blur(0) contrast(.9);transform:translateY(-1vh) scale(1.01)}
.letter-p{margin-left:-.02em}
.letter-h{margin-right:.045em}

.world-panel{
  --panel-tint:rgba(255,255,255,.72);
  position:fixed;
  inset:0;
  z-index:20;
  overflow:auto;
  padding:clamp(42px,6vw,88px);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--panel-tone) 10%,rgba(245,249,251,.94)),rgba(240,247,250,.94) 45%,rgba(236,244,247,.96));
  backdrop-filter:blur(25px) saturate(.95);
  transform:translateY(104%);
  transition:transform .68s cubic-bezier(.16,1,.3,1);
}
.world-panel.is-open{transform:translateY(0)}
.world-panel[data-tone="red"]{--panel-tone:var(--red)}
.world-panel[data-tone="green"]{--panel-tone:var(--green)}
.world-panel[data-tone="blue"]{--panel-tone:var(--blue)}
.world-panel[data-tone="storm"]{--panel-tone:#42596c}
.panel-inner{width:min(1260px,100%);margin:0 auto}
.panel-close,.dialog-close{
  position:fixed;top:20px;right:27px;z-index:5;
  width:54px;height:54px;border:0;background:transparent;
  color:rgba(15,27,35,.72);font:400 44px/1 Arial,sans-serif;cursor:pointer;
}
.panel-index{font-size:.68rem;letter-spacing:.24em;font-weight:700;color:rgba(0,0,0,.42);margin-bottom:11px}
.panel-title{
  margin:0;
  color:var(--panel-tone);
  font-family:"Archivo Black",Impact,sans-serif;
  font-size:clamp(6rem,14.5vw,12.7rem);
  line-height:.78;
  letter-spacing:-.075em;
}
.panel-copy{max-width:760px;margin:26px 0 34px;font-size:clamp(.95rem,1.35vw,1.18rem);line-height:1.65;color:rgba(0,0,0,.59)}

.collection-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:116px;
  gap:14px;
  padding-bottom:80px;
}
.art-card{
  position:relative;
  grid-column:span 4;
  grid-row:span 3;
  overflow:hidden;
  min-height:260px;
  background:rgba(255,255,255,.56);
  box-shadow:0 12px 38px rgba(28,48,60,.09);
  isolation:isolate;
}
.art-card.wide{grid-column:span 8}
.art-card.tall{grid-row:span 4}
.art-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s cubic-bezier(.16,1,.3,1),filter .55s ease;background:rgba(255,255,255,.4)}
.art-card:hover img{transform:scale(1.045);filter:saturate(1.06) contrast(1.02)}
.card-label{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:46px 17px 15px;color:#fff;font-size:.68rem;letter-spacing:.12em;font-weight:700;text-transform:uppercase;background:linear-gradient(transparent,rgba(0,0,0,.66))}

.generative{display:grid;place-items:center;text-align:center;padding:18px}
.generative .small-label{position:absolute;left:16px;top:14px;font-size:.59rem;letter-spacing:.15em;text-transform:uppercase;opacity:.58}
.soup-card{background:linear-gradient(180deg,#f3eee5 0 48%,#dd2730 48% 100%)}
.soup-can{width:48%;height:72%;min-width:132px;border-radius:9px 9px 18px 18px;background:linear-gradient(#f7f1e7 0 46%,#d92b32 46%);border:5px solid #b9aaa0;box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),0 14px 28px rgba(0,0,0,.14);display:grid;place-items:center;color:#af1e25;font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:1.1rem;transform:rotate(-2deg)}
.soup-can span{margin-top:-34%}
.soup-can::after{content:"SOUP";position:absolute;top:57%;color:#fff8ed;font-family:"Space Mono",monospace;font-style:normal;font-size:.8rem;letter-spacing:.16em}

.fruit-card{background:linear-gradient(135deg,#f7d5d7,#fff2ec)}
.fruit-still{position:relative;width:85%;height:75%}
.fruit-still i{position:absolute;width:78px;height:78px;border-radius:50% 50% 48% 52%;background:radial-gradient(circle at 34% 28%,#ff7d72 0 7%,#dc2730 35%,#9f0712 100%);box-shadow:inset -7px -8px 12px rgba(90,0,5,.16),0 11px 17px rgba(86,8,14,.14)}
.fruit-still i::after{content:"";position:absolute;top:-15px;left:35px;width:9px;height:22px;background:#2f7742;border-radius:70% 20% 70% 20%;transform:rotate(28deg)}
.fruit-still i:nth-child(1){left:8%;top:28%;transform:scale(.9)}
.fruit-still i:nth-child(2){left:34%;top:8%;transform:scale(1.1)}
.fruit-still i:nth-child(3){right:7%;top:34%;transform:scale(.82)}
.fruit-still i:nth-child(4){left:49%;bottom:0;transform:scale(.72)}

.rhcp-card{background:#f8f5ee}
.starburst{width:150px;height:150px;position:relative;animation:slowSpin 28s linear infinite}
.starburst i{position:absolute;left:50%;top:50%;width:16px;height:138px;margin:-69px 0 0 -8px;background:#e62e37;border-radius:12px}
.starburst i:nth-child(2){transform:rotate(45deg)}.starburst i:nth-child(3){transform:rotate(90deg)}.starburst i:nth-child(4){transform:rotate(135deg)}
.starburst::after{content:"";position:absolute;inset:51px;border-radius:50%;background:#f8f5ee}

.malachite-card{background:repeating-radial-gradient(ellipse at 48% 52%,#092f24 0 8px,#0d5b43 9px 17px,#16a36d 18px 26px,#73d3a2 27px 34px,#174d3d 35px 43px);filter:saturate(1.1)}
.apple-card{background:linear-gradient(155deg,#dce5d4,#889d78)}
.surreal-man{position:relative;width:72%;height:78%;background:linear-gradient(90deg,#222 0 48%,#303030 49% 100%);clip-path:polygon(30% 24%,70% 24%,82% 100%,18% 100%)}
.surreal-man::before{content:"";position:absolute;left:50%;top:-19%;transform:translateX(-50%);width:76px;height:88px;border-radius:48% 48% 44% 44%;background:#e3c9ad}
.surreal-man::after{content:"";position:absolute;left:50%;top:-13%;transform:translateX(-50%);width:98px;height:92px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#b9eb76 0 5%,#5aaa39 26%,#286a28 72%);box-shadow:inset -9px -8px 14px rgba(0,0,0,.16)}
.chili-card{background:linear-gradient(145deg,#dff0d9,#8dbb84)}
.chili-shape{width:205px;height:90px;border:14px solid #24753c;border-left-color:transparent;border-top-color:transparent;border-radius:0 0 180px 70px;transform:rotate(19deg);filter:drop-shadow(0 13px 11px rgba(23,72,36,.16))}
.chili-shape::after{content:"";position:absolute;right:-16px;top:-6px;width:32px;height:13px;border-radius:60% 0 60% 0;background:#526f2e;transform:rotate(-25deg)}
.alien-card{background:radial-gradient(circle at 50% 42%,#c8ffd2 0,#76cf8a 30%,#183d2a 100%);color:white}
.alien-face{width:150px;height:180px;border:3px solid rgba(255,255,255,.82);border-radius:50% 50% 48% 48%/42% 42% 62% 62%;position:relative;box-shadow:0 0 34px rgba(178,255,196,.45)}
.alien-face::before,.alien-face::after{content:"";position:absolute;top:70px;width:45px;height:29px;background:#07150d;border-radius:80% 20% 80% 20%}
.alien-face::before{left:20px;transform:rotate(17deg)}.alien-face::after{right:20px;transform:scaleX(-1) rotate(17deg)}

.water-card{background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.9) 0 1px,transparent 2px),repeating-radial-gradient(ellipse at 55% 60%,rgba(255,255,255,.54) 0 2px,transparent 4px 20px),linear-gradient(145deg,#b9f1ff,#148de0 72%,#0756a2);background-size:100% 100%;animation:waterMove 11s ease-in-out infinite alternate}
.golden-card{background:linear-gradient(135deg,#072c63,#0b66ad 58%,#69c9ed);color:#f6c84e}
.golden-spiral{width:185px;height:185px;border:4px solid currentColor;border-left-color:transparent;border-radius:50%;position:relative;transform:rotate(20deg)}
.golden-spiral::before{content:"";position:absolute;inset:28px;border:4px solid currentColor;border-bottom-color:transparent;border-radius:50%;transform:rotate(55deg)}
.golden-spiral::after{content:"φ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-20deg);font:700 54px/1 Georgia,serif}

.storm-card{background:linear-gradient(160deg,#162b3b,#466274 55%,#a0b2bc);color:#fff}
.tornado-vortex{width:160px;height:180px;position:relative;filter:drop-shadow(0 14px 15px rgba(0,0,0,.18))}
.tornado-vortex i{position:absolute;left:50%;height:15px;border:4px solid rgba(240,248,252,.83);border-left-color:transparent;border-radius:50%;transform:translateX(-50%) rotate(-7deg)}
.tornado-vortex i:nth-child(1){top:5px;width:150px}.tornado-vortex i:nth-child(2){top:37px;width:122px}.tornado-vortex i:nth-child(3){top:68px;width:95px}.tornado-vortex i:nth-child(4){top:99px;width:67px}.tornado-vortex i:nth-child(5){top:130px;width:37px}
.weather-card{background:linear-gradient(145deg,#e8f6fc,#89cbe9);color:#15384d;padding:26px;align-items:flex-start;justify-content:space-between}
.weather-card button{border:1px solid rgba(16,56,78,.24);background:rgba(255,255,255,.44);padding:10px 14px;font:700 .68rem/1 "Space Mono",monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.weather-reading{font-family:"Archivo Black",sans-serif;font-size:clamp(2.3rem,4vw,4.7rem);letter-spacing:-.05em;line-height:.9}
.weather-meta{font-size:.64rem;line-height:1.65;opacity:.67}

.mini-dialog{width:min(570px,calc(100vw - 40px));border:0;border-radius:18px;padding:0;background:rgba(241,248,251,.97);box-shadow:0 30px 100px rgba(12,35,50,.24)}
.mini-dialog::backdrop{background:rgba(72,128,160,.27);backdrop-filter:blur(8px)}
.dialog-content{padding:72px 38px 42px;line-height:1.65}.dialog-content h2{font-family:"Archivo Black",sans-serif;font-size:2.6rem;margin:0 0 14px;letter-spacing:-.04em}.dialog-content p{margin:0;color:rgba(0,0,0,.6)}
.micro-toast{position:fixed;left:50%;bottom:24px;z-index:40;transform:translate(-50%,18px);opacity:0;padding:9px 13px;background:rgba(10,24,34,.72);color:white;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;backdrop-filter:blur(10px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}.micro-toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes cloudDrift{from{translate:0 0}to{translate:165vw 0}}
@keyframes birdFly{0%{translate:-10vw 0;rotate:-4deg}45%{translate:58vw -2vh;rotate:2deg}100%{translate:118vw 1vh;rotate:-3deg}}
@keyframes rainFall{from{translate:0 -5vh}to{translate:-6vw 125vh}}
@keyframes flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes phoneShake{0%,100%{rotate:0}25%{rotate:-8deg}70%{rotate:7deg}}
@keyframes alienBlink{0%,38%,100%{scale:1 1}52%{scale:1 .12}}
@keyframes slowSpin{to{transform:rotate(360deg)}}
@keyframes waterMove{from{filter:hue-rotate(-4deg) brightness(1)}to{filter:hue-rotate(8deg) brightness(1.08)}}

@media(max-width:900px){
  .letter{font-size:min(33.8vw,59vh);letter-spacing:-.15em}
  .world-mark{left:15px;top:18px;font-size:.57rem}.world-mark::after{display:none}
  .utility-nav{right:11px;top:10px;gap:9px}.nav-icon{width:43px;height:43px}
  .collection-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:105px}.art-card{grid-column:span 3}.art-card.wide{grid-column:span 6}
}
@media(max-width:600px){
  .letter{font-size:min(34.8vw,46vh);letter-spacing:-.17em}
  .collection-grid{display:block}.art-card{height:250px;margin-bottom:12px}.art-card.tall{height:330px}
  .panel-title{font-size:21vw}
  .cursor-glow{display:none}
}
@media(pointer:coarse){.cursor-glow{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}


/* ---- public/styles-v05.css ---- */
/* WORLD 311 v0.5 — denser, softer sky, stronger ART */
.sky{
  filter:saturate(.78) brightness(1.06);
}
.sky::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:rgba(238,247,252,.26);
  pointer-events:none;
}
.cloud,.cloud-bank{opacity:.43}
.bird{opacity:.34}

.wordmark{width:99.92vw}
.letter{
  font-size:min(35.3vw,75vh);
  letter-spacing:-.154em;
}
.letter-muted{
  color:rgba(20,30,35,.075);
  opacity:.50;
  filter:blur(.55px) contrast(.62);
  text-shadow:0 0 1px rgba(255,255,255,.15);
}
.letter-muted:hover{
  opacity:.72;
  filter:blur(.15px) contrast(.78);
}
.letter-red,.letter-green,.letter-blue{
  text-shadow:0 12px 34px rgba(20,40,52,.06),0 0 1px rgba(255,255,255,.12);
}

.world-mark{
  font-family:"Space Mono",ui-monospace,monospace;
  padding:8px 11px;
  border:1px solid rgba(11,31,43,.10);
  background:rgba(240,248,252,.14);
  backdrop-filter:blur(7px);
  letter-spacing:.24em;
}
.world-mark b{font-family:"Archivo Black",sans-serif;letter-spacing:.02em}

.world-panel{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--panel-tone) 8%,rgba(239,247,250,.74)),rgba(239,247,250,.68) 52%,rgba(233,243,248,.76));
  backdrop-filter:blur(18px) saturate(.92);
}
.world-panel::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.24)),
    url('https://commons.wikimedia.org/wiki/Special:FilePath/Clouds%20in%20blue%20sky.jpg') center/cover no-repeat;
  opacity:.22;
}
.collection-grid{
  grid-auto-rows:104px;
  gap:12px;
}
.art-card{
  border:1px solid rgba(255,255,255,.36);
  box-shadow:0 15px 42px rgba(28,48,60,.09);
}
.art-card:hover{transform:translateY(-2px)}
.art-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
}
.art-card.image-failed{
  background:linear-gradient(135deg,color-mix(in srgb,var(--panel-tone) 70%,#111),color-mix(in srgb,var(--panel-tone) 38%,#fff));
}

.impact-layer{
  position:fixed;
  inset:0;
  z-index:6;
  pointer-events:none;
  overflow:hidden;
}
.splash{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:rgba(235,248,255,.88);
  box-shadow:0 0 7px rgba(235,248,255,.8);
  animation:splashPop .48s ease-out forwards;
}
.splash::before,.splash::after{
  content:"";
  position:absolute;
  left:1px;top:1px;
  width:2px;height:11px;
  border-radius:999px;
  background:linear-gradient(rgba(238,249,255,.85),transparent);
  transform-origin:1px 1px;
}
.splash::before{transform:rotate(62deg)}
.splash::after{transform:rotate(-62deg)}

body.rain-on .letter{
  text-shadow:0 12px 34px rgba(20,40,52,.07),0 0 9px rgba(229,247,255,.16);
}
body.storm-on .letter-red,
body.storm-on .letter-green,
body.storm-on .letter-blue{
  animation:stormBreath 3.6s ease-in-out infinite;
}
body.lightning .letter{
  filter:brightness(1.35) saturate(.8);
}
body.lightning .letter-muted{opacity:.70}

/* additional art rooms */
.rose-card{background:radial-gradient(circle at 50% 52%,#4c0006 0 6%,#8e0a13 7% 18%,#d7232f 19% 32%,#7d0710 33% 40%,#e43d46 41% 49%,#6c030b 50% 58%,#b80e1b 59% 70%,#3d0004 71% 100%)}
.lava-card{background:radial-gradient(circle at 30% 40%,#fff3b0 0 3%,#ff9d00 4% 9%,#ff3b12 10% 19%,#4e0c0c 20% 34%,#160b0d 35% 100%);background-size:48% 48%;animation:lavaShift 12s linear infinite}
.ruby-card{background:linear-gradient(135deg,#120006,#4a0010 33%,#ff3150 50%,#8b0720 61%,#240009);display:grid;place-items:center}
.ruby-gem{width:120px;height:120px;clip-path:polygon(50% 0,92% 26%,76% 88%,50% 100%,24% 88%,8% 26%);background:linear-gradient(145deg,#ff7890,#a50025 35%,#ff234f 55%,#54000f 80%);box-shadow:0 0 35px rgba(255,42,77,.42)}
.torii-card{background:linear-gradient(#f2b3a4 0 58%,#ad2327 59% 62%,#742127 63%);display:grid;place-items:center}
.torii{width:160px;height:150px;position:relative}
.torii::before,.torii::after{content:"";position:absolute;top:35px;width:18px;height:115px;background:#c52930}
.torii::before{left:32px}.torii::after{right:32px}
.torii i{position:absolute;left:8px;right:8px;height:15px;background:#b51e27;top:25px;box-shadow:0 -13px 0 -2px #d43b3f}
.neon-card{background:#11090b;display:grid;place-items:center}
.neon-word{font:900 3rem/1 "Archivo Black",sans-serif;color:#ff4450;text-shadow:0 0 5px #ff4450,0 0 13px #ff4450,0 0 28px #b90018;letter-spacing:-.08em}

.emerald-card{background:linear-gradient(145deg,#061d13,#0c6f42 38%,#73e2aa 51%,#137c4c 64%,#05150f);display:grid;place-items:center}
.emerald-gem{width:120px;height:145px;clip-path:polygon(28% 0,72% 0,100% 26%,86% 100%,14% 100%,0 26%);background:linear-gradient(145deg,#b8ffdc,#0e8a52 33%,#50e9a1 48%,#075936 72%);box-shadow:0 0 30px rgba(47,212,136,.34)}
.aurora-card{background:linear-gradient(180deg,#031823,#082d3b 50%,#09121b);overflow:hidden}
.aurora-ribbon{position:absolute;width:130%;height:80%;left:-15%;top:8%;background:linear-gradient(90deg,transparent,#5bf09d 23%,#6fe1cf 42%,#c6ff93 59%,transparent 78%);filter:blur(13px);opacity:.68;transform:rotate(-7deg);animation:auroraWave 7s ease-in-out infinite alternate}
.patina-card{background:radial-gradient(circle at 30% 30%,#82bfa7 0 8%,transparent 9%),radial-gradient(circle at 68% 58%,#56a58e 0 12%,transparent 13%),repeating-linear-gradient(37deg,#22463f 0 6px,#3d7669 7px 13px,#74a996 14px 17px);filter:saturate(.8)}
.cactus-card{background:linear-gradient(180deg,#cadfbf,#8eb287);display:grid;place-items:center}
.cactus{position:relative;width:46px;height:150px;border-radius:35px 35px 18px 18px;background:#2e7f4b;box-shadow:inset 8px 0 rgba(255,255,255,.08)}
.cactus::before,.cactus::after{content:"";position:absolute;width:42px;height:78px;border-radius:26px;background:#2e7f4b;top:48px}
.cactus::before{left:-35px;transform:rotate(-12deg)}.cactus::after{right:-35px;transform:rotate(12deg)}
.jade-card{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),transparent 22%),linear-gradient(145deg,#a7dbc1,#327e5a 45%,#0e4d36);display:grid;place-items:center}
.jade-disc{width:140px;height:140px;border-radius:50%;border:24px solid rgba(186,235,211,.72);box-shadow:inset 0 0 26px rgba(0,55,39,.35),0 15px 22px rgba(12,72,49,.16)}

.lapis-card{background:linear-gradient(145deg,#02194e,#073a9c 42%,#1f66d4 62%,#061d61);display:grid;place-items:center}
.lapis-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#e9c96b 0 1px,transparent 1.5px);background-size:23px 27px;opacity:.68}
.lapis-stone{width:150px;height:110px;border-radius:52% 48% 45% 55%;background:linear-gradient(145deg,#4f79e7,#062a86 55%,#0d4fc4);box-shadow:inset -15px -10px 22px rgba(0,0,40,.3),0 14px 26px rgba(0,0,0,.14);transform:rotate(-8deg)}
.glacier-card{background:linear-gradient(155deg,#f5fdff 0 25%,#bdefff 26% 43%,#63b7db 44% 61%,#0c5c8b 62%);display:grid;place-items:center}
.glacier-shape{width:80%;height:76%;clip-path:polygon(15% 100%,28% 38%,42% 54%,56% 12%,73% 46%,86% 100%);background:linear-gradient(135deg,#ecfeff,#9ce8ff 55%,#3d9fc8);box-shadow:inset -20px -5px 24px rgba(7,91,130,.18)}
.jelly-card{background:radial-gradient(circle at 50% 26%,#4f86d9,#15345e 55%,#07162f 100%);display:grid;place-items:center}
.jelly{width:126px;height:110px;border-radius:50% 50% 38% 38%;background:radial-gradient(circle at 48% 30%,rgba(255,255,255,.7),rgba(116,202,255,.45) 26%,rgba(29,114,192,.22) 58%,transparent 61%);border:2px solid rgba(170,226,255,.6);box-shadow:0 0 32px rgba(81,167,255,.38)}
.jelly::after{content:"";position:absolute;width:110px;height:115px;top:54%;left:50%;transform:translateX(-50%);background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(149,217,255,.45) 13px 15px,transparent 16px 23px);filter:blur(1px)}
.bluehour-card{background:linear-gradient(180deg,#102d57,#2a5f91 47%,#d09a86 77%,#1a2636 78%);display:grid;align-items:end}
.cityline{height:38%;background:linear-gradient(90deg,#0c1721 0 8%,transparent 8% 10%,#111c28 10% 22%,transparent 22% 24%,#101a25 24% 33%,transparent 33% 36%,#111d29 36% 52%,transparent 52% 55%,#0c1721 55% 67%,transparent 67% 70%,#111d29 70% 83%,transparent 83% 87%,#0d1822 87%);box-shadow:0 -1px 0 rgba(255,255,255,.05)}

.color-quote{display:flex;align-items:flex-end;padding:26px;background:rgba(255,255,255,.48)}
.color-quote blockquote{margin:0;max-width:85%;font:700 clamp(1.1rem,2.1vw,2.4rem)/1.18 "Archivo Black",sans-serif;letter-spacing:-.035em;color:rgba(13,28,38,.72)}

.sound-tag{
  position:absolute;right:14px;top:13px;z-index:5;
  font-size:.52rem;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 8px;background:rgba(0,0,0,.20);color:white;backdrop-filter:blur(8px);
}
.world-panel[data-tone="red"] .sound-tag{background:rgba(146,0,14,.45)}
.world-panel[data-tone="green"] .sound-tag{background:rgba(4,78,40,.46)}
.world-panel[data-tone="blue"] .sound-tag{background:rgba(4,54,125,.45)}

@keyframes splashPop{
  0%{transform:scale(.4);opacity:0}
  18%{opacity:1}
  100%{transform:translateY(-18px) scale(1.4);opacity:0}
}
@keyframes stormBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5vh)}}
@keyframes lavaShift{to{background-position:50px 30px}}
@keyframes auroraWave{from{transform:translateX(-4%) rotate(-7deg) skewX(-8deg)}to{transform:translateX(6%) rotate(-3deg) skewX(9deg)}}

@media(max-width:900px){
  .letter{font-size:min(36vw,61vh)}
}
@media(max-width:600px){
  .letter{font-size:min(37vw,48vh)}
  .world-mark{background:rgba(240,248,252,.20)}
}


/* ---- public/styles-v06.css ---- */
/* WORLD 311 v0.6 — depth, signal, 3D archive */
.signal-feed{
  position:fixed;left:28px;bottom:24px;z-index:9;
  display:flex;align-items:center;gap:11px;
  max-width:min(620px,74vw);
  padding:8px 10px;
  color:rgba(10,29,42,.58);
  background:rgba(242,249,252,.11);
  border:1px solid rgba(10,29,42,.08);
  backdrop-filter:blur(8px);
  font:700 .58rem/1.4 "Space Mono",monospace;
  letter-spacing:.08em;
}
.signal-code{color:rgba(10,29,42,.76);white-space:nowrap}
.signal-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.art-card{
  transform-style:preserve-3d;
  transition:transform .38s cubic-bezier(.16,1,.3,1),box-shadow .38s ease,filter .38s ease;
  will-change:transform;
}
.art-card.tilt-active{
  transform:perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateY(-4px) scale(1.012);
  box-shadow:0 25px 60px rgba(25,48,63,.16);
}
.art-card.tilt-active .card-label,.art-card.tilt-active .sound-tag{transform:translateZ(24px)}

.sport-red{background:radial-gradient(circle at 30% 30%,#ff626c,#bc101d 44%,#280207);color:white}
.sport-orbit{position:relative;width:175px;height:175px;border:2px solid rgba(255,255,255,.65);border-radius:50%}
.sport-orbit i{position:absolute;left:50%;top:50%;width:148px;height:2px;background:rgba(255,255,255,.72);transform-origin:center}
.sport-orbit i:nth-child(1){transform:translate(-50%,-50%) rotate(0)}
.sport-orbit i:nth-child(2){transform:translate(-50%,-50%) rotate(60deg)}
.sport-orbit i:nth-child(3){transform:translate(-50%,-50%) rotate(120deg)}
.lipstick-card{background:linear-gradient(145deg,#f1d5d4,#aa1927);display:grid;place-items:center}
.lipstick{width:60px;height:150px;border-radius:14px 14px 6px 6px;background:linear-gradient(90deg,#151515 0 20%,#d7b36a 21% 78%,#111 79%);position:relative}
.lipstick::before{content:"";position:absolute;left:10px;right:10px;top:-75px;height:86px;border-radius:30px 30px 8px 8px;background:linear-gradient(135deg,#ff5362,#9a0719 68%);clip-path:polygon(0 28%,100% 0,100% 100%,0 100%)}

.sport-green{background:linear-gradient(145deg,#0b3a21,#1c8148);display:grid;place-items:center}
.court-lines{width:82%;height:72%;border:3px solid rgba(255,255,255,.75);position:relative}
.court-lines::before,.court-lines::after{content:"";position:absolute;background:rgba(255,255,255,.75)}
.court-lines::before{left:50%;top:0;bottom:0;width:3px}
.court-lines::after{left:0;right:0;top:50%;height:3px}

.sport-blue{background:linear-gradient(180deg,#51c6f4,#0878be);display:grid;place-items:center}
.pool-lanes{display:flex;gap:24px;width:84%;height:76%;justify-content:center}
.pool-lanes i{width:3px;height:100%;background:repeating-linear-gradient(#fff 0 13px,#1f5fca 14px 24px);opacity:.85;box-shadow:0 0 9px rgba(255,255,255,.35)}

body.signal-mode .sky{filter:saturate(.62) contrast(1.08) brightness(.91)}
body.signal-mode .letter-red{filter:drop-shadow(-8px 0 0 rgba(0,255,255,.16)) drop-shadow(8px 0 0 rgba(255,0,90,.14))}
body.signal-mode .letter-green{filter:drop-shadow(-6px 0 0 rgba(255,220,0,.12)) drop-shadow(7px 0 0 rgba(0,130,255,.14))}
body.signal-mode .letter-blue{filter:drop-shadow(-7px 0 0 rgba(255,40,50,.11)) drop-shadow(7px 0 0 rgba(0,255,190,.13))}
body.signal-mode .signal-feed{background:rgba(10,20,29,.65);color:#d9f8ff;border-color:rgba(190,242,255,.18)}
body.signal-mode .signal-code{color:#fff}

@media(max-width:700px){
  .signal-feed{left:12px;right:12px;bottom:12px;max-width:none}
  .signal-text{font-size:.52rem}
}


/* ---- public/styles-v07.css ---- */
/* WORLD 311 v0.7 — cloud time + hidden gold cube */
.cloud-clock{
  position:fixed;
  right:28px;
  bottom:20px;
  z-index:10;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  color:rgba(255,255,255,.80);
  font-family:"Archivo Black",Impact,sans-serif;
  font-size:clamp(2.5rem,4.6vw,5rem);
  line-height:.88;
  letter-spacing:-.085em;
  text-shadow:
    0 0 8px rgba(255,255,255,.56),
    12px 0 20px rgba(255,255,255,.44),
    -11px 2px 22px rgba(255,255,255,.37),
    0 10px 28px rgba(255,255,255,.24);
  opacity:.66;
  mix-blend-mode:screen;
  filter:blur(.15px);
  transition:opacity .35s ease,transform .35s ease,color .35s ease,text-shadow .35s ease;
}
.cloud-clock::before,.cloud-clock::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  filter:blur(13px);
}
.cloud-clock::before{width:72%;height:52%;left:8%;top:22%}
.cloud-clock::after{width:52%;height:48%;right:0;top:10%}
.cloud-clock:hover{opacity:.9;transform:translateY(-2px) scale(1.02)}
.cloud-clock.is-311{
  color:#f6d46d;
  opacity:.94;
  text-shadow:
    0 0 7px rgba(255,235,162,.78),
    0 0 20px rgba(231,184,54,.50),
    0 0 48px rgba(219,162,28,.32);
  mix-blend-mode:normal;
}

.gold-cube-wrap{
  position:fixed;
  right:34px;
  bottom:105px;
  z-index:11;
  width:170px;height:170px;
  display:grid;place-items:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(18px) scale(.82);
  transition:opacity .5s ease,transform .65s cubic-bezier(.16,1,.3,1);
}
.gold-cube-wrap.show{opacity:1;transform:translateY(0) scale(1)}
.gold-cube-scene{width:100px;height:100px;perspective:650px;position:relative}
.gold-cube{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:cubeSpin 11s linear infinite;
}
.gold-cube i{
  position:absolute;
  width:100px;height:100px;
  border:1px solid rgba(255,244,182,.62);
  background:
    linear-gradient(145deg,rgba(255,245,173,.78),rgba(202,137,21,.86) 46%,rgba(104,65,5,.88));
  box-shadow:
    inset 0 0 22px rgba(255,249,201,.35),
    0 0 18px rgba(232,186,62,.20);
  backdrop-filter:blur(2px);
}
.gold-cube .front{transform:translateZ(50px)}
.gold-cube .back{transform:rotateY(180deg) translateZ(50px)}
.gold-cube .right{transform:rotateY(90deg) translateZ(50px)}
.gold-cube .left{transform:rotateY(-90deg) translateZ(50px)}
.gold-cube .top{transform:rotateX(90deg) translateZ(50px)}
.gold-cube .bottom{transform:rotateX(-90deg) translateZ(50px)}
.cube-caption{
  position:absolute;
  top:122px;left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font:700 .55rem/1 "Space Mono",monospace;
  letter-spacing:.22em;
  color:rgba(118,83,14,.68);
}

body.signal-mode .cloud-clock{opacity:.38}
body.storm-on .cloud-clock{
  color:rgba(226,242,251,.63);
  text-shadow:0 0 12px rgba(223,243,255,.34);
}

@keyframes cubeSpin{
  0%{transform:rotateX(-18deg) rotateY(0deg) rotateZ(2deg)}
  50%{transform:rotateX(20deg) rotateY(180deg) rotateZ(-3deg)}
  100%{transform:rotateX(-18deg) rotateY(360deg) rotateZ(2deg)}
}
@media(max-width:700px){
  .cloud-clock{right:14px;bottom:64px;font-size:2.45rem}
  .gold-cube-wrap{right:4px;bottom:120px;transform:scale(.72)}
  .signal-feed{padding-right:86px}
}
@media(prefers-reduced-motion:reduce){
  .gold-cube{animation:none;transform:rotateX(-15deg) rotateY(34deg)}
}


/* ---- public/styles-v08.css ---- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

/* WORLD 311 v0.8 — precision pass */
.stage{padding:0 1.1vw;overflow:visible}
.wordmark{
  width:97.8vw;
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.05rem,.42vw,.42rem);
  transform:translateY(.5vh);
  overflow:visible;
}
.letter{
  flex:0 0 auto;
  width:auto;
  min-width:0;
  overflow:visible;
  font-family:"Montserrat","Arial Black",sans-serif;
  font-size:min(26.7vw,72vh);
  line-height:.76;
  letter-spacing:-.035em;
  padding:0;
  margin:0;
  transform:none;
  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    filter .42s ease,
    opacity .42s ease,
    text-shadow .42s ease;
}
.letter-red,.letter-green,.letter-blue{
  opacity:1;
}
.letter-red:hover,.letter-green:hover,.letter-blue:hover,
.letter-red:focus-visible,.letter-green:focus-visible,.letter-blue:focus-visible{
  transform:translateY(-1.3vh) translateZ(0) scale(1.018);
}
.letter-red:hover{filter:saturate(1.08) brightness(1.025);text-shadow:0 18px 34px rgba(180,20,26,.10),0 0 22px rgba(255,66,57,.10)}
.letter-green:hover{filter:saturate(1.07) brightness(1.025);text-shadow:0 18px 34px rgba(20,120,60,.10),0 0 22px rgba(52,199,89,.10)}
.letter-blue:hover{filter:saturate(1.07) brightness(1.025);text-shadow:0 18px 34px rgba(20,90,170,.11),0 0 22px rgba(10,132,255,.11)}
.letter-muted{
  color:rgba(17,27,33,.092);
  opacity:.56;
  filter:blur(.35px) contrast(.70);
  -webkit-mask-image:linear-gradient(108deg,#000 0 8%,rgba(0,0,0,.44) 18%,#000 33%,rgba(0,0,0,.42) 49%,#000 66%,rgba(0,0,0,.36) 82%,#000 100%);
  mask-image:linear-gradient(108deg,#000 0 8%,rgba(0,0,0,.44) 18%,#000 33%,rgba(0,0,0,.42) 49%,#000 66%,rgba(0,0,0,.36) 82%,#000 100%);
}
.letter-muted:hover,.letter-muted:focus-visible{
  opacity:.59;
  filter:blur(.25px) contrast(.74);
  transform:none;
}
.letter-p,.letter-h{margin:0}
.letter-h{padding-right:.025em}

.utility-nav{
  top:14px;
  right:20px;
  gap:15px;
  align-items:center;
}
.nav-icon{
  width:58px;
  height:58px;
  padding:0;
  filter:drop-shadow(0 5px 10px rgba(18,39,52,.12));
}
.nav-icon svg{width:100%;height:100%;display:block}
.nav-icon:hover{transform:translateY(-3px) scale(1.045)}
.nav-world:hover{transform:translateY(-3px) rotate(8deg) scale(1.045)}
.nav-phone:hover{animation:phoneShake .32s ease}
.nav-world svg *, .nav-alien svg *, .nav-phone svg *{vector-effect:non-scaling-stroke}

/* cloud clock: visible enough to read, cloudy enough to belong */
.cloud-clock{
  right:25px;
  bottom:20px;
  font-size:clamp(2.35rem,4vw,4.45rem);
  opacity:.48;
  color:rgba(255,255,255,.74);
  letter-spacing:-.075em;
  filter:blur(.35px);
  text-shadow:
    -18px 1px 22px rgba(255,255,255,.44),
    18px -2px 25px rgba(255,255,255,.43),
    0 -10px 18px rgba(255,255,255,.35),
    0 12px 24px rgba(255,255,255,.32);
}
.cloud-clock::before{
  width:92%;height:65%;left:1%;top:17%;
  background:
    radial-gradient(circle at 18% 55%,rgba(255,255,255,.44) 0 25%,transparent 27%),
    radial-gradient(circle at 42% 36%,rgba(255,255,255,.42) 0 33%,transparent 35%),
    radial-gradient(circle at 68% 47%,rgba(255,255,255,.39) 0 31%,transparent 33%),
    radial-gradient(circle at 84% 62%,rgba(255,255,255,.35) 0 23%,transparent 25%);
  filter:blur(9px);
}
.cloud-clock::after{display:none}
.cloud-clock:hover{opacity:.62;transform:none}

/* rain passes through ghosts and splashes only on ART */
body.rain-on .letter-muted{filter:blur(.42px) contrast(.68)}
body.rain-on .letter-red,
body.rain-on .letter-green,
body.rain-on .letter-blue{
  text-shadow:0 12px 34px rgba(20,40,52,.07),0 0 10px rgba(230,247,255,.13);
}

/* directional sheet-lighting instead of flat flash */
.light-field{
  position:fixed;
  inset:-15%;
  z-index:29;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(ellipse at var(--lx,72%) var(--ly,18%),rgba(247,252,255,.88) 0 4%,rgba(220,242,255,.42) 10%,transparent 32%),
    linear-gradient(var(--la,112deg),transparent 34%,rgba(235,249,255,.34) 48%,transparent 63%);
  mix-blend-mode:screen;
  filter:blur(2px);
}
body.lightning .light-field{animation:sheetLight .48s ease-out forwards}
body.lightning::after{display:none}

/* H becomes an actual ambient room */
.sound-board{
  grid-column:span 12;
  grid-row:span 2;
  min-height:185px;
  padding:22px;
  background:linear-gradient(135deg,rgba(22,44,60,.94),rgba(77,103,120,.88));
  color:white;
}
.sound-board-title{font-family:"Montserrat",sans-serif;font-size:clamp(1.5rem,3vw,3rem);letter-spacing:-.045em;margin-bottom:18px}
.sound-buttons{display:flex;flex-wrap:wrap;gap:9px}
.sound-buttons button{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
  color:white;
  padding:10px 13px;
  cursor:pointer;
  font:700 .64rem/1 "Space Mono",monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.sound-buttons button:hover,.sound-buttons button.active{
  background:rgba(255,255,255,.20);
  border-color:rgba(255,255,255,.5);
  transform:translateY(-1px);
}

/* art archive cards are separated, not colliding */
.art-card{
  transform:none;
  margin:0;
}
.art-card.tilt-active{
  transform:perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateY(-3px) scale(1.006);
}
.collection-grid{gap:16px}

/* subtle edge reflection when rain hits A/R/T */
.splash{
  width:3px;height:3px;
  box-shadow:0 0 9px rgba(235,248,255,.92),0 0 16px rgba(206,238,255,.38);
}

@keyframes sheetLight{
  0%{opacity:0}
  12%{opacity:.9}
  20%{opacity:.16}
  31%{opacity:.68}
  100%{opacity:0}
}

@media(max-width:900px){
  .wordmark{width:98.5vw;gap:.15vw}
  .letter{font-size:min(27.4vw,61vh)}
  .nav-icon{width:48px;height:48px}
}
@media(max-width:600px){
  .stage{padding:0 .4vw}
  .wordmark{width:99vw}
  .letter{font-size:min(28vw,47vh);letter-spacing:-.05em}
  .utility-nav{gap:7px}
  .nav-icon{width:40px;height:40px}
}


/* ---- public/styles-v09.css ---- */
/* WORLD 311 v0.9 — sound / frequencies / living sky */
.signal-code{
  font-family:"Archivo Black",Impact,sans-serif;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.055em;
  padding-right:3px;
}
.signal-feed{
  gap:9px;
  border-color:rgba(10,29,42,.11);
  box-shadow:0 4px 18px rgba(15,42,58,.04);
}

.reference-lofi{
  position:fixed;
  width:2px;
  height:2px;
  left:-9999px;
  bottom:-9999px;
  border:0;
  opacity:.001;
  pointer-events:none;
}

/* Bird silhouettes: JS gives each one a different path and direction. */
.bird{
  left:0;
  top:0;
  width:52px;
  height:24px;
  color:rgba(17,39,52,.38);
  opacity:.42;
  animation:none!important;
  transform:none;
  will-change:transform;
  filter:drop-shadow(0 3px 3px rgba(10,31,44,.06));
}
.bird svg{display:block;width:100%;height:100%}
.bird path{fill:currentColor}
.bird-b{width:37px;height:18px;opacity:.32}
.bird-c{width:29px;height:14px;opacity:.25}

/* More cloud, less typography. */
.cloud-clock{
  opacity:.43;
  filter:blur(.55px);
  text-shadow:
    -24px 1px 28px rgba(255,255,255,.50),
    24px -3px 30px rgba(255,255,255,.46),
    -4px -16px 24px rgba(255,255,255,.38),
    7px 16px 27px rgba(255,255,255,.34),
    0 0 10px rgba(255,255,255,.70);
}
.cloud-clock::before{
  width:118%;
  height:88%;
  left:-9%;
  top:4%;
  background:
    radial-gradient(circle at 9% 61%,rgba(255,255,255,.40) 0 20%,transparent 22%),
    radial-gradient(circle at 24% 35%,rgba(255,255,255,.46) 0 27%,transparent 29%),
    radial-gradient(circle at 44% 46%,rgba(255,255,255,.44) 0 34%,transparent 36%),
    radial-gradient(circle at 67% 32%,rgba(255,255,255,.43) 0 28%,transparent 30%),
    radial-gradient(circle at 86% 58%,rgba(255,255,255,.39) 0 23%,transparent 25%);
  filter:blur(10px);
}

/* P weather intensities */
body.heavy-pour .rain-layer{opacity:1}
body.heavy-pour .raindrop{
  width:1.5px;
  background:linear-gradient(transparent,rgba(235,248,255,.96));
  filter:drop-shadow(0 0 2px rgba(225,245,255,.45));
}
body.p-storm .sky{
  filter:saturate(.50) brightness(.68) contrast(1.11);
}
body.p-storm .letter-red,
body.p-storm .letter-green,
body.p-storm .letter-blue{
  text-shadow:
    0 0 14px rgba(225,245,255,.19),
    0 17px 40px rgba(7,31,49,.11);
}

/* Frequency sanctuary */
.frequency-block{
  grid-column:span 12;
  grid-row:span 3;
  min-height:260px;
  padding:24px;
  color:#ecf7fb;
  background:
    radial-gradient(circle at 75% 25%,rgba(116,205,255,.13),transparent 32%),
    linear-gradient(135deg,#101e2c,#253b4d 55%,#102230);
}
.frequency-title{
  font-family:"Montserrat",sans-serif;
  font-size:clamp(1.55rem,3vw,3.2rem);
  letter-spacing:-.045em;
  margin-bottom:7px;
}
.frequency-sub{
  max-width:650px;
  margin-bottom:18px;
  font-size:.65rem;
  line-height:1.65;
  opacity:.66;
  letter-spacing:.04em;
}
.frequency-buttons{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.frequency-buttons button{
  min-height:52px;
  border:1px solid rgba(255,255,255,.17);
  background:rgba(255,255,255,.045);
  color:#eaf8ff;
  cursor:pointer;
  font:700 .69rem/1 "Space Mono",monospace;
  letter-spacing:.07em;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .25s ease;
}
.frequency-buttons button:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.34);
}
.frequency-buttons button.active{
  background:rgba(102,202,255,.14);
  border-color:rgba(154,226,255,.48);
  box-shadow:0 0 24px rgba(85,190,255,.11),inset 0 0 24px rgba(120,213,255,.06);
}
.frequency-readout{
  margin-top:16px;
  font:700 .59rem/1.55 "Space Mono",monospace;
  letter-spacing:.11em;
  opacity:.7;
}

/* Better tornado / storm display feedback */
body.tornado-mode .sky{
  filter:saturate(.43) brightness(.59) contrast(1.14);
}
body.tornado-mode .cloud{
  opacity:.62;
  filter:blur(10px) contrast(1.1);
}
body.tornado-mode .wordmark{
  animation:pressureDrift 5.2s ease-in-out infinite;
}
@keyframes pressureDrift{
  0%,100%{transform:translate(0,.5vh)}
  45%{transform:translate(-.14vw,.56vh)}
  52%{transform:translate(.12vw,.43vh)}
}

/* More dimensional sheet-light response on ART. */
body.lightning .letter-red,
body.lightning .letter-green,
body.lightning .letter-blue{
  filter:brightness(1.38) saturate(.83);
  text-shadow:
    -8px -12px 28px rgba(240,250,255,.32),
    8px 15px 38px rgba(185,226,255,.18);
}
body.lightning .letter-muted{
  opacity:.61;
}

/* Icons explicitly balanced as a single family. */
.utility-nav .nav-icon{
  width:59px;
  height:59px;
}
.utility-nav .nav-phone svg{transform:scale(.98)}
.utility-nav .nav-alien svg{transform:scale(.96)}
.utility-nav .nav-world svg{transform:scale(1)}

@media(max-width:900px){
  .frequency-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .frequency-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .utility-nav .nav-icon{width:42px;height:42px}
}


/* ---- public/styles-v10a.css ---- */
/* WORLD 311 v0.10a — icon correction only */
.nav-world svg circle{
  fill:url(#earthSea)!important;
  stroke:rgba(255,255,255,.72)!important;
  stroke-width:1.6!important;
}
.nav-world svg path:nth-of-type(1),
.nav-world svg path:nth-of-type(2){
  fill:url(#earthLand)!important;
  stroke:none!important;
}
.nav-world svg path:nth-of-type(3){
  fill:none!important;
  stroke:rgba(255,255,255,.25)!important;
  stroke-width:1!important;
}
.nav-alien svg>path:first-of-type{
  fill:url(#alienSkin)!important;
  stroke:rgba(33,54,43,.55)!important;
  stroke-width:1.5!important;
}
.nav-alien svg .eye{
  fill:#14211a!important;
  stroke:none!important;
}
.nav-alien svg>path:last-of-type{
  fill:none!important;
  stroke:rgba(20,33,26,.55)!important;
  stroke-width:1.5!important;
}
.nav-phone svg>path:first-of-type,
.nav-phone svg>rect{
  fill:url(#phoneRed)!important;
  stroke:#8f0e19!important;
  stroke-width:1.4!important;
}
.nav-phone svg>circle:first-of-type{
  fill:#f6e9e4!important;
  stroke:#9a1520!important;
  stroke-width:2!important;
}
.nav-phone svg>circle:last-of-type,
.nav-phone svg g circle{
  fill:#c9222d!important;
  stroke:none!important;
}
.utility-nav{gap:14px}
.utility-nav .nav-icon{
  width:60px!important;
  height:60px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.utility-nav .nav-world svg{transform:scale(1)!important}
.utility-nav .nav-alien svg{transform:scale(.97)!important}
.utility-nav .nav-phone svg{transform:scale(1.04)!important}
@media(max-width:700px){
  .utility-nav .nav-icon{width:43px!important;height:43px!important}
}


/* ---- public/styles-v10b.css ---- */
/* WORLD 311 v0.10b — painted-glyph interaction only */
.letter:hover,
.letter:focus-visible{
  transform:none!important;
  filter:inherit;
}
.letter.glyph-hot.letter-red,
.letter.glyph-hot.letter-green,
.letter.glyph-hot.letter-blue{
  transform:translateY(-.55vh) scale(1.007)!important;
}
.letter.glyph-hot.letter-red{
  filter:saturate(1.045) brightness(1.014)!important;
  text-shadow:0 11px 24px rgba(190,22,29,.07),0 0 14px rgba(255,64,58,.06)!important;
}
.letter.glyph-hot.letter-green{
  filter:saturate(1.04) brightness(1.014)!important;
  text-shadow:0 11px 24px rgba(20,120,60,.07),0 0 14px rgba(52,199,89,.06)!important;
}
.letter.glyph-hot.letter-blue{
  filter:saturate(1.04) brightness(1.014)!important;
  text-shadow:0 11px 24px rgba(20,90,170,.075),0 0 14px rgba(10,132,255,.06)!important;
}
.letter.glyph-hot.letter-muted{
  opacity:.59!important;
  filter:blur(.25px) contrast(.74)!important;
}


/* ---- public/styles-v10c.css ---- */
/* WORLD 311 v0.10c — real visual archive */
.jelly-video-card{
  background:#021329;
  min-height:390px;
}
.jelly-video-card iframe{
  position:absolute;
  inset:-8%;
  width:116%;
  height:116%;
  border:0;
  pointer-events:none;
  filter:saturate(1.08) contrast(1.06) brightness(.83);
  transform:scale(1.04);
}
.jelly-video-card .jelly-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 52% 44%,transparent 0 42%,rgba(1,8,22,.08) 68%,rgba(0,5,18,.28) 100%),
    linear-gradient(180deg,rgba(0,10,30,.04),rgba(0,5,20,.16));
}
.jelly-video-card .card-label{
  background:linear-gradient(transparent,rgba(0,8,28,.78));
}
.world-panel[data-tone="blue"] .jelly-video-card{
  box-shadow:0 18px 52px rgba(0,66,150,.18),0 0 36px rgba(36,152,255,.08);
}


/* ---- public/styles-v10d.css ---- */
/* WORLD 311 v0.10d — frequency player state */
.frequency-block::after{
  content:"FREQUENCY MODE MUTES LO-FI + WEATHER + INTERACTIVE NOTES";
  position:absolute;
  right:16px;
  bottom:13px;
  font:700 .48rem/1 "Space Mono",monospace;
  letter-spacing:.09em;
  color:rgba(236,247,251,.42);
}


/* ---- public/styles-v10e.css ---- */
/* WORLD 311 v0.10e — final sound balance marker */
:root{--world311-build:"v0.10e"}


/* ---- public/styles-v10f.css ---- */
:root{--world311-runtime:"v0.10f"}


/* ---- v11 weather physics ---- */
.rain-layer,.impact-layer{display:none!important}
.rain-physics{
  position:fixed;inset:0;z-index:6;
  width:100vw;height:100vh;pointer-events:none;
}
body.weather-drizzle .sky{filter:saturate(.76) brightness(1.01)}
body.weather-distant .sky{filter:saturate(.68) brightness(.92)}
body.weather-pour .sky{filter:saturate(.58) brightness(.80) contrast(1.04)}
body.weather-storm .sky{filter:saturate(.48) brightness(.66) contrast(1.10)}
body.weather-supercell .sky{filter:saturate(.38) brightness(.49) contrast(1.16)}
body.weather-supercell .cloud{
  opacity:.72;filter:blur(12px) contrast(1.15) brightness(.72)
}
body.weather-supercell .cloud-bank{opacity:.58}
body.weather-supercell .wordmark{filter:drop-shadow(0 12px 32px rgba(5,22,35,.18))}
body.weather-drizzle .letter-red,
body.weather-drizzle .letter-green,
body.weather-drizzle .letter-blue{filter:saturate(.99)}
body.weather-pour .letter-red,
body.weather-pour .letter-green,
body.weather-pour .letter-blue,
body.weather-storm .letter-red,
body.weather-storm .letter-green,
body.weather-storm .letter-blue,
body.weather-supercell .letter-red,
body.weather-supercell .letter-green,
body.weather-supercell .letter-blue{
  text-shadow:
    inset 0 0 1px rgba(255,255,255,.12),
    0 0 10px rgba(218,242,255,.12),
    0 16px 36px rgba(9,31,46,.13);
}
body.weather-supercell .letter-red,
body.weather-supercell .letter-green,
body.weather-supercell .letter-blue{
  filter:brightness(.88) saturate(.86)
}


/* ---- H control refinements + direct jellyfish video ---- */
.jelly-video-card video{
  position:absolute;inset:-5%;
  width:110%;height:110%;
  object-fit:cover;
  pointer-events:none;
  filter:saturate(1.18) contrast(1.08) brightness(.78) hue-rotate(4deg);
  transform:scale(1.02);
}
.jelly-video-card iframe{display:none!important}
.media-credit{
  position:absolute;right:10px;top:9px;z-index:5;
  font:700 .45rem/1 "Space Mono",monospace;
  letter-spacing:.06em;
  color:rgba(230,246,255,.48);
  background:rgba(0,12,32,.18);
  padding:5px 6px;
  backdrop-filter:blur(6px);
}
.storm-action-card{
  border:0;text-align:left;color:white;cursor:pointer;
}
.storm-action-card:hover{
  transform:translateY(-3px) scale(1.006);
  box-shadow:0 22px 52px rgba(12,32,45,.22);
}
.lightning-control-card{
  grid-column:span 8;
  grid-row:span 2;
  min-height:190px;
  padding:22px;
  background:
    radial-gradient(circle at 75% 22%,rgba(236,250,255,.20),transparent 30%),
    linear-gradient(135deg,#1b2c3b,#526775);
  color:white;
}
.lightning-control-card .sound-buttons button.active{
  background:rgba(224,246,255,.24);
  border-color:rgba(235,250,255,.62);
  box-shadow:0 0 22px rgba(213,244,255,.13);
}


/* ---- v13 archive treatment ---- */
.world-panel[data-tone="red"] .art-card img,
.world-panel[data-tone="green"] .art-card img,
.world-panel[data-tone="blue"] .art-card img{
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .55s ease;
}
.world-panel[data-tone="red"] .art-card img{filter:saturate(.96) contrast(1.06) brightness(.94)}
.world-panel[data-tone="green"] .art-card img{filter:saturate(.88) contrast(1.07) brightness(.94)}
.world-panel[data-tone="blue"] .art-card img{filter:saturate(.96) contrast(1.08) brightness(.92)}
.world-panel .art-card:hover img{transform:scale(1.028)}


/* ---- v14 moving archive media ---- */
.motion-card{background:#07131d;overflow:hidden}
.motion-card video{
  position:absolute;inset:-4%;
  width:108%;height:108%;
  object-fit:cover;
  pointer-events:none;
  filter:saturate(1.06) contrast(1.07) brightness(.84);
}
.motion-card .motion-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.10) 60%,rgba(0,0,0,.25));
}
.world-panel[data-tone="red"] .motion-card video{filter:saturate(1.18) contrast(1.10) brightness(.82)}
.world-panel[data-tone="green"] .motion-card video{filter:saturate(1.08) contrast(1.08) brightness(.80)}
.world-panel[data-tone="blue"] .motion-card video{filter:saturate(1.12) contrast(1.09) brightness(.79)}


/* ---- v16 exact SVG selector correction ---- */
.nav-world svg path:nth-of-type(1),
.nav-world svg path:nth-of-type(2){
  fill:url(#earthLand)!important;
  stroke:none!important;
}
.nav-world svg path:nth-of-type(3){
  fill:#2f7f42!important;
  stroke:none!important;
}
.nav-world svg path:nth-of-type(4){
  fill:none!important;
  stroke:rgba(255,255,255,.14)!important;
  stroke-width:.8!important;
}
.nav-alien svg>path:nth-of-type(1){
  fill:url(#alienSkin)!important;
  stroke:rgba(30,55,39,.58)!important;
  stroke-width:1.35!important;
}
.nav-alien svg>path:nth-of-type(4){
  fill:none!important;
  stroke:rgba(20,33,26,.45)!important;
  stroke-width:1.25!important;
  stroke-linecap:round!important;
}
.nav-alien svg>path:nth-of-type(5){
  fill:url(#alienGlow)!important;
  stroke:none!important;
}


/* ---- v17 realistic globe + photographic moving clouds ---- */
.nav-world svg image{
  filter:saturate(1.08) contrast(1.08) brightness(.92);
}
.nav-world svg circle{
  fill:url(#earthRim)!important;
  stroke:rgba(228,248,255,.82)!important;
  stroke-width:1.2!important;
}
.nav-world:hover svg{
  filter:drop-shadow(0 7px 12px rgba(0,64,126,.20));
}

/* Replace geometric white cloud blobs with blended photographic texture. */
.cloud{
  width:46vw!important;
  min-width:520px!important;
  height:22vw!important;
  min-height:240px!important;
  border-radius:0!important;
  background:
    url('https://commons.wikimedia.org/wiki/Special:FilePath/Cumulus%20Cloud.jpg') center/cover no-repeat!important;
  box-shadow:none!important;
  filter:blur(2.2px) saturate(.62) brightness(1.20)!important;
  mix-blend-mode:screen;
  opacity:.18!important;
  -webkit-mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.98) 0 34%,rgba(0,0,0,.72) 51%,rgba(0,0,0,.18) 72%,transparent 88%);
  mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.98) 0 34%,rgba(0,0,0,.72) 51%,rgba(0,0,0,.18) 72%,transparent 88%);
  animation:photoCloudDrift linear infinite!important;
}
.cloud-a{top:3%!important;left:-54vw!important;animation-duration:115s!important;transform:scale(1.04) rotate(-2deg)!important;opacity:.19!important}
.cloud-b{top:30%!important;left:-62vw!important;animation-duration:152s!important;transform:scale(.74) rotate(1.5deg)!important;opacity:.12!important}
.cloud-c{top:58%!important;left:-58vw!important;animation-duration:134s!important;transform:scale(.92) rotate(-1deg)!important;opacity:.14!important}
.cloud-d{top:76%!important;left:-70vw!important;animation-duration:182s!important;transform:scale(1.16) rotate(2deg)!important;opacity:.10!important}
@keyframes photoCloudDrift{
  from{translate:0 0}
  50%{translate:88vw -1.8vh}
  to{translate:176vw .8vh}
}