@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

:root {
  --bg: #100b19;
  --panel: #1a1226;
  --border: #423052;
  --text: #faf0ff;
  --muted: #b6a5c5;
  --acid: #ff9b38;
  --slime: #b4ff48;
  --violet: #bd7cff;
}

body {
  background:
    radial-gradient(ellipse at 49% 25%, #6b22a12e 0%, transparent 57%),
    radial-gradient(ellipse at 3% 10%, #e45e161a 0%, transparent 37%),
    radial-gradient(ellipse at 95% 86%, #6625c323 0%, transparent 43%),
    var(--bg);
}
.topbar { background: #130d1bd9; border-color: #613748; }
.brand-icon { background: linear-gradient(145deg, #ffc064, #ff762d); color: #271335; box-shadow: 0 0 26px #ff872825; }
.topbar nav { color: #ba9bcd; }
.nav-active:after { background: var(--acid); box-shadow: 0 0 15px #ff842aad; }
.wallet-button { border-color: #8656ad; color: #eedbff; background: #8b3cda13; box-shadow: inset 0 0 18px #9b59ef0a; }
.wallet-button:hover { background: #7730b836; border-color: #d09bff; }
.solana-mark i { background: linear-gradient(90deg, #b16aff, #8dffb6); }
.intro { padding-top: 33px; }
.eyebrow { color: var(--violet); }
.little-cross { color: var(--acid); }
h1 { font-size: 51px; margin-top: 14px; }
h1 em { font-family: 'Creepster', var(--heading); font-weight: 400; font-size: 1.13em; letter-spacing: .015em; color: #ffa341; text-shadow: 0 2px 0 #632519, 0 0 30px #ff802328; }
.intro p { color: #bba8ca; }
.lab-version { color: var(--slime); }
.lab-version .muted { color: #a289b3; }
.lab-version b { color: #72438e; }
.workspace { border-color: #6b398f; box-shadow: 0 0 0 1px #bc66ff0c, 0 20px 100px #6824ab19; }
.control-panel { background: linear-gradient(145deg, #301b35b3, #1c1429 45%, #201430); }
.specimen-panel { background: linear-gradient(155deg, #231330, #201629 65%, #271639); }
.panel-kicker, .panel-kicker svg { color: #c09cdd; }
.control-panel h2 { color: #fff1e4; }
label { color: #d3b5e3; }
.address-field { background: #130c1e; border-color: #644274; }
.address-field svg { color: #b68cd0; }
.address-field input::placeholder { color: #a289b5; }
.address-field:focus-within { border-color: var(--acid); box-shadow: 0 0 0 3px #ff982010; }
.primary-button { background: linear-gradient(110deg, #ffb348, #ff832f); color: #2a1008; box-shadow: 0 0 25px #ff872326, inset 0 1px 0 #ffe4b966; }
.primary-button:hover { background: linear-gradient(110deg, #ffc567, #ffa341); box-shadow: 0 0 34px #ff8b384f; }
.demo-line button { color: var(--slime); }
.demo-line button:hover { color: #ddffa8; }
.step-icon { border-color: #68408b; color: #cc9aff; background: #3a2255; }
.process-item:nth-child(2) .step-icon { color: var(--acid); border-color: #805031; background: #4a2a21; }
.process-item:nth-child(3) .step-icon { color: var(--slime); border-color: #4d6a36; background: #2a361f; }
.process-item.active .step-icon { border-color: var(--acid); box-shadow: 0 0 18px #ff96354f; }
.step-number { color: #a788bc; }
.process-item.complete .step-number { color: var(--slime); }
.read-only { color: #b09ac0; }
.read-only svg { color: var(--slime); }

/* Violet containment hardware, radioactive liquid, and pumpkin-orange energy. */
.chamber {
  background:
    radial-gradient(ellipse at 50% 42%, #853ee12c 0%, transparent 57%),
    radial-gradient(ellipse at 50% 78%, #89ff1a0e, transparent 46%),
    #120c21;
  border-color: #603983;
}
.chamber-grid {
  background-image: linear-gradient(#b877ff29 1px, transparent 1px), linear-gradient(90deg, #b877ff29 1px, transparent 1px);
  opacity: .57;
  mask-image: radial-gradient(ellipse, black 25%, transparent 75%);
}
.ambient-glow { background: radial-gradient(ellipse, #a84dff47, #862bfd1f 35%, transparent 71%); filter: blur(22px); width: 96%; left: 2%; height: 75%; top: 3%; }
.chamber[data-phase=alive] .ambient-glow { background: radial-gradient(ellipse, #b047ff4f, #7628ff24 37%, transparent 72%); }
.chamber-top { color: #d2b5e7; }
.status-dot { background: var(--slime); box-shadow: 0 0 10px #b4ff48b3; }
.chamber-top>span:last-child { background: #67349b40; border-color: #8952b8; color: #d4a3ff; }
.chamber[data-phase=alive] .chamber-top>span:last-child { background: #345f2536; border-color: #739f3b; color: var(--slime); }
.tank-assembly { filter: drop-shadow(0 0 29px #8b30d84a); }
.tank-top { background: linear-gradient(90deg, #241b30, #674b7e 14%, #2d203c 24%, #513567 53%, #211630 89%, #63417b); border-color: #aa79c5; box-shadow: 0 8px 10px #0009, inset 0 3px 4px #d2a0f447; }
.top-ridge { border-color: #9566b2; background: linear-gradient(#6b4780, #2b1c39); box-shadow: inset 0 -4px 7px #21122e; }
.top-light { background: #ffcc88; box-shadow: 0 0 9px #ff9d36, 0 0 24px #ff832fab, 0 0 40px #ff832f45; height: 5px; }
.tank-screw { background: #23122e; border-color: #d8a0f6; }
.tank-glass { border-left-color: #c691ff80; border-right-color: #c691ff80; background: linear-gradient(90deg, #cf8dff18, #2b124522 19%, #bb8bff05 72%, #c678ff29); box-shadow: inset 13px 0 20px -18px #e0bbff, inset -13px 0 20px -17px #e0bbff, 0 0 17px #9c40ff38; }
.liquid { background: linear-gradient(#5532814f, #60419927 33%, #8bcb383b 72%, #a7ff368a); box-shadow: inset 0 -18px 29px #a9ff4538; }
.liquid-top { background: #c485ff24; border-color: #dab1ff70; box-shadow: 0 0 15px #b85cff38; }
.tank-reflection { background: linear-gradient(90deg, transparent, #f6ddff45, transparent); }
.glass-shine { background: linear-gradient(110deg, transparent 0 25%, #f6d8ff10 28% 32%, transparent 36% 71%, #c987ff12 74% 77%, transparent 79%); }
.tank-markings { color: #d2b3ee75; }
.tank-rail { background: linear-gradient(90deg, #271333, #6a4882 40%, #3b2451 65%, #1d1029); border-color: #7d54a0; }
.tank-rail i { border-color: #a86ada; background: linear-gradient(90deg, #39224b, #785294, #261535); }
.tank-base { background: linear-gradient(90deg, #21152c, #68477e 15%, #372043 27%, #54315d 67%, #241530); border-color: #9566ad; box-shadow: 0 10px 12px #0009, inset 0 -7px 10px #201028; }
.base-light { background: #b3ff8294; border-color: #deffb8bb; box-shadow: 0 0 16px #9dff57a1, 0 0 35px #a8ff3254; }
.base-plate { color: #d2b4e6; }
.base-leds i { background: var(--slime); box-shadow: 0 0 8px #b4ff48; }
.base-leds i:last-child { background: var(--acid); box-shadow: 0 0 7px #ff9129; }
.floor-shadow { background: radial-gradient(ellipse, #a269ff69, transparent 67%); }
.bubble { border-color: #d8ff92b3; box-shadow: inset 1px 1px 3px #efffb780, 0 0 5px #a9fa2522; }
.arc { stroke: #e8c5ff; stroke-width: 2; filter: drop-shadow(0 0 5px #bd68ff) drop-shadow(0 0 10px #a341ff); }
.scan-beam { background: #ffcd8a; box-shadow: 0 0 25px #ff892e; }
.creature-wrap img { filter: saturate(1.16) drop-shadow(0 9px 18px #ff882f33); }
.chamber[data-phase=idle] .creature-wrap { filter: none; }
.specimen-tag { color: #e5c3ff; }
.specimen-tag small, .tag-cross { color: #b48bca; }
.chamber-bottom { border-color: #7043916b; }
.telemetry-label { color: #b48bc9; }
.chamber-bottom strong { color: var(--slime); }
.chamber-bottom strong span { color: #b09bc2; }
.heartbeat { stroke: var(--slime); filter: drop-shadow(0 0 4px #b4ff4870); }

.specimen-class { color: #c49cdd; }
.specimen-title h2 { color: #ffad50; text-shadow: 0 0 23px #ff712826; }
.specimen-badges span { background: #7e441b26; border-color: #b87431; color: #ffc778; }
.specimen-badges span:last-child { background: #8c42c41a; border-color: #8455a5; color: #d5b3f0; }
.traits-heading h3 { color: #ceb1e2; }
.traits-heading>span { color: #a98aba; }
.trait-symbol { background: #63401d; color: #ffbf68; }
.trait-symbol.purple { background: #533071; color: #d5a3ff; }
.trait-symbol.amber { background: #394b20; color: var(--slime); }
.trait-level { color: #c9a8dc; }
.mutation-score>div>span { color: #d0b3e2; }
.mutation-score strong { color: var(--slime); text-shadow: 0 0 13px #a9ff4140; }
.mutation-score strong span { color: #b698c9; text-shadow: none; }
.power-track { background: #4b2b63; height: 6px; }
.power-track>div { background: linear-gradient(90deg, #9969ff, #d691f7 47%, #ffae49); box-shadow: 0 0 14px #bf78ff; }
.mutation-score .power-scale span { color: #b89bcd; }
.data-origin { background: #64328a26; border-color: #7b4c983f; }
.mini-cross { color: var(--acid); }
.data-origin p { color: #c1a7d4; }
.sequence-bar { border-color: #68378b; background: linear-gradient(110deg, #281635, #1e142a 65%, #2b1940); box-shadow: inset 0 0 27px #9034c909; }
.sequence-label>svg { color: var(--acid); filter: drop-shadow(0 0 8px #ff932c40); }
.meter-blocks i { background: #51305e; }
.meter-blocks i.filled { background: var(--slime); box-shadow: 0 0 9px #b4ff484d; }
.sequence-meter>span { color: #c19bd6; }
.sound-toggle { color: #c8aada; }
.sound-toggle[aria-pressed=true] { color: var(--slime); }
footer { color: #a48ab9; }
footer button { color: #d0b5e5; }
.footer-note { color: #a082b7; }
.footer-note span { color: var(--acid); }
dialog { background: #21132e; border-color: #a265c8; box-shadow: 0 25px 100px #14041fe6, 0 0 45px #b545f91f; }
dialog::backdrop { background: #0d0317d4; }
dialog h2 { color: #ffb75e; }
dialog p { color: #ceb4dd; }
.dialog-close { color: #d7b1ec; }
.note-box { background: #49245c; color: #e3c8f5; }
.wallet-choice:hover { border-color: var(--violet); }
.wallet-help a { color: var(--slime); }
.error { color: #ffb6a2; }
@media (max-width: 760px) { h1 { font-size: 39px; } h1 em { font-size: 1.08em; } .intro { padding-top: 27px; } }

/* Independent motion layers separate the creature from the curved glass. */
.chamber { --look-x: 0; --look-y: 0; --arc-energy: 0; }
.tank-glass { perspective: 800px; }
.creature-wrap { width: 266px; height: 266px; left: 1px; top: 20px; }
.creature-wrap img {
  transform-origin: 50% 48%;
  transform: perspective(700px) translate3d(calc(var(--look-x) * 8px), calc(var(--look-y) * 5px), 26px) rotateY(calc(var(--look-x) * 11deg)) rotateX(calc(var(--look-y) * -7deg));
  transition: transform .55s cubic-bezier(.16,1,.3,1), filter .5s;
  will-change: transform;
}
.tank-glass::before {
  content: ''; position: absolute; z-index: 1; width: 72%; height: 23%; left: 14%; bottom: 7%; border-radius: 50%;
  background: radial-gradient(ellipse, #130a23b3, transparent 67%); filter: blur(10px);
  transform: translateX(calc(var(--look-x) * -11px)); transition: transform .55s;
}
.tank-reflection { transform: translateX(calc(var(--look-x) * -10px)) rotate(1deg); transition: transform .6s; }
.glass-shine { transform: translateX(calc(var(--look-x) * -7px)); transition: transform .6s; }
.ambient-glow { opacity: calc(.7 + var(--arc-energy) * .3); }
.lightning-field { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.effects-ready .electricity { display: none; }
.chamber-top,.chamber-bottom,.specimen-tag { z-index: 9; }
.chamber::after {
  content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, #b959ff3b, transparent 59%);
  opacity: var(--arc-energy); mix-blend-mode: screen;
}
.top-light { filter: brightness(calc(1 + var(--arc-energy) * .45)); }
.creature-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.creature-canvas[hidden] { display:none; }
.creature-canvas.dragging { cursor: grabbing; }
.creature-canvas:focus-visible { outline: 1px solid #c7a0ff; outline-offset: -4px; border-radius: 12px; }
.has-model .creature-wrap { width: 270px; height: 280px; left: 0; top: 9px; animation: none!important; clip-path: none!important; filter: none!important; }
.has-model .creature-wrap img { opacity: 0; pointer-events: none; }
.has-model .tank-markings,.has-model .bubbles,.has-model .scan-beam { pointer-events: none; }
.model-controls { display: flex; justify-content: center; gap: 7px; position: relative; z-index: 10; margin: 5px 10px 10px; }
.model-controls[hidden],.model-hint[hidden] { display: none; }
.model-controls button { border: 1px solid #734b8d; background: #271936; border-radius: 4px; font-size: 12px; padding: 5px 9px; color: #dfc7f1; }
.model-controls button:hover { background: #56326b; border-color: #bf8be2; }
.model-hint { display: block; position: relative; z-index: 10; font: 9px var(--mono); color: #c8a5df; text-align: center; letter-spacing: .06em; margin-top: 2px; }
.has-model .specimen-tag { margin-top: 1px; margin-bottom: 14px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.summon-result { position:relative; z-index:9; width:calc(100% - 40px); max-width:306px; margin:7px auto 16px; padding:13px 14px; display:flex; align-items:center; gap:13px; border:1px solid #66468180; border-radius:8px; background:linear-gradient(120deg,#302039bb,#1a1426cc); }
.summon-sigil { color:var(--specimen-glow,#c6ff72); font-size:32px; text-shadow:0 0 18px var(--specimen-glow,#c6ff72); }
.summon-label { display:block; color:#b89aca; font:8px var(--mono); letter-spacing:.03em; margin-bottom:6px; }
#summoned-species { display:block; font:500 20px var(--heading); color:#eedcf9; }
#palette-name { display:block; color:var(--specimen-glow,#c6ff72); font:10px var(--mono); margin-top:3px; }
.chamber[data-phase=extract] .summon-result>div { visibility:hidden; }
.chamber[data-phase=extract] .summon-result::after { content:'IDENTIFYING THE ENTITY…'; position:absolute; left:59px; right:10px; font:10px var(--mono); color:#c8afd8; }
.trait>div { min-width:0; }
.trait-milestone { display:block; font:9px/1.5 var(--mono); color:#c7ed9f; margin-top:6px; }
.has-model .base-light { background:var(--specimen-glow,#bfff61); box-shadow:0 0 16px var(--specimen-glow,#bfff61); }

@media (prefers-reduced-motion: reduce) {
  .creature-wrap img { transform: none; will-change: auto; }
  .tank-reflection,.glass-shine,.tank-glass::before { transform: none; }
  .lightning-field,.chamber::after { display: none; }
}