:root{--ice:#a5f3fc;--lav:#ddd6fe;--glass:rgba(255,255,255,.16);--ink:#14232b;--prism:linear-gradient(90deg,#a5f3fc,#fbcfe8,#fde68a,#bbf7d0,#a5f3fc)}
html,body{margin:0;min-height:100%;color:var(--ink);font-family:'IBM Plex Mono',monospace;
background:radial-gradient(1200px 700px at 10% 0%,#cffafe 0%,transparent 60%),radial-gradient(900px 700px at 100% 100%,#ede9fe 0%,transparent 60%),linear-gradient(160deg,#f0fdff,#f7f5ff 60%,#ffffff);background-attachment:fixed;overflow-x:hidden}
.serif{font-family:'Fraunces',serif}
.orb{position:fixed;border-radius:50%;filter:blur(40px);opacity:.55;z-index:0;pointer-events:none;animation:drift 22s ease-in-out infinite alternate}
.o1{width:320px;height:320px;background:#a5f3fc;top:-60px;left:-60px}
.o2{width:260px;height:260px;background:#ddd6fe;bottom:10%;right:-40px;animation-duration:28s}
.o3{width:200px;height:200px;background:#fbcfe8;top:40%;left:45%;animation-duration:34s;opacity:.35}
@keyframes drift{to{transform:translate(80px,60px) scale(1.15)}}
#root{position:relative;z-index:1}
.glass{background:var(--glass);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 24px rgba(255,255,255,.35),0 8px 30px rgba(80,120,160,.12)}
.prism-hover{position:relative}
.prism-hover:hover{border-color:transparent;background-image:linear-gradient(var(--glass),var(--glass)),var(--prism);background-origin:border-box;background-clip:padding-box,border-box;background-size:100%,300%;animation:prism 3s linear infinite}
@keyframes prism{to{background-position:0 0,300% 0}}
.shimmer{background:linear-gradient(100deg,#0f2a33 30%,#7dd3fc 45%,#f0abfc 50%,#0f2a33 65%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sh 5s linear infinite}
@keyframes sh{from{background-position:150% 0}to{background-position:-100% 0}}
.fadein{animation:fi 1.2s ease forwards;opacity:0}
@keyframes fi{0%{opacity:0;filter:blur(8px);transform:translateY(6px)}100%{opacity:1;filter:none;transform:none}}
.dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(165,243,252,.6) 50%,rgba(221,214,254,.4));border:1px solid rgba(255,255,255,.9);animation:bounce 1s infinite ease-in-out}
.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
@keyframes bounce{50%{transform:translateY(-8px);filter:hue-rotate(90deg)}}
.pulse{animation:pl 1.6s infinite}
@keyframes pl{50%{opacity:.3;transform:scale(.7)}}
.xray{background:rgba(10,25,40,.88)!important;color:#a5f3fc;border:1px dashed #67e8f9!important;
background-image:repeating-linear-gradient(0deg,rgba(103,232,249,.08) 0 1px,transparent 1px 14px),repeating-linear-gradient(90deg,rgba(103,232,249,.08) 0 1px,transparent 1px 14px)!important}
.marble{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 8%,rgba(165,243,252,.9) 30%,rgba(196,181,253,.7) 70%,rgba(14,116,144,.6));box-shadow:inset -4px -6px 12px rgba(0,0,0,.15),0 6px 16px rgba(14,116,144,.3);transition:transform .2s}
.marble:hover{transform:rotate(40deg) scale(1.08)}
.marble:disabled{opacity:.5}
.shatter{animation:shat .7s forwards}
@keyframes shat{0%{transform:none}20%{transform:translateX(-6px) rotate(-1deg)}40%{transform:translateX(6px)}100%{opacity:0;filter:blur(6px);transform:scale(1.05) skewX(8deg)}}
.crack{position:fixed;inset:0;pointer-events:none;z-index:50;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><g stroke='white' stroke-width='.4' fill='none'><path d='M50 50 L10 5 M50 50 L90 12 M50 50 L95 70 M50 50 L60 98 M50 50 L5 80 M50 50 L0 40 M30 28 L45 20 M70 30 L75 45 M30 70 L45 78'/></g></svg>");background-size:100% 100%;animation:fo 1s forwards;filter:drop-shadow(0 0 2px #67e8f9)}
@keyframes fo{0%{opacity:1}100%{opacity:0}}
.postmark{position:absolute;top:10px;right:10px;width:84px;height:84px;border:2px solid rgba(190,18,60,.7);border-radius:50%;color:rgba(190,18,60,.8);display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;transform:rotate(-14deg);font-weight:500;background:rgba(255,255,255,.35)}
input[type=range]{accent-color:#0891b2}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:rgba(14,116,144,.25);border-radius:3px}