:root{color-scheme:dark;--gold:#d7b574;--ink:#040507}*{box-sizing:border-box}html{background:var(--ink)}body{margin:0;color:var(--gold);background:radial-gradient(ellipse at 50% 24%,#17140d33,transparent 54%),var(--ink);font-family:Georgia,'Times New Roman',serif;min-width:280px}main{min-height:calc(100svh - 46px);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:6px 0 24px}.scene{position:relative;flex-shrink:0;width:min(1200px,100vw,145vh);aspect-ratio:1200/840;isolation:isolate;overflow:hidden}.gold-halo{position:absolute;inset:0 13% 25%;background:radial-gradient(ellipse at 50% 37%,#c5892429,transparent 60%);z-index:0;animation:gold-breath 7s ease-in-out infinite}.triangle{position:absolute;width:35%;aspect-ratio:1;top:9%;left:32.5%;border:1px solid #bc924551;transform:rotate(45deg);opacity:.45;clip-path:polygon(0 0,100% 0,0 100%);filter:drop-shadow(0 0 8px #d4a34a)}.inu{position:absolute;z-index:2;top:-1%;left:7%;width:86%;height:auto;filter:drop-shadow(0 0 17px #cb90262b);pointer-events:none}.earth-wrap{position:absolute;z-index:3;top:48%;width:94%;aspect-ratio:1;left:3%;pointer-events:none}.earth-aura{position:absolute;inset:7%;border-radius:50%;box-shadow:0 -10px 40px #50baf04d,0 -4px 12px #92dbff80,0 -25px 100px #4899ed20;animation:earth-breath 8s ease-in-out infinite}#earth{position:absolute;width:100%;height:100%;inset:0}#earth-fallback{display:none;position:absolute;inset:7%;border-radius:50%;background:url('assets/earth-day.jpg') 45% center/200% 100%;box-shadow:inset 0 -130px 100px #000, inset -50px -10px 80px #0009,0 -3px 15px #87cfff}.marionette{position:absolute;inset:0;width:100%;height:100%;z-index:5;overflow:visible;touch-action:pan-y}.puppet-letter{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:112px;fill:url(#gold);stroke:#f6dc9a;stroke-width:.65;paint-order:stroke fill;filter:url(#goldShadow)}.puppet-string{stroke:#d8b26c;stroke-width:1.25;fill:none;filter:drop-shadow(0 0 2px #f7d58c66)}.puppet-ring{fill:none;stroke:#efd093;stroke-width:1.4}.clouds{position:absolute;pointer-events:none;width:112%;left:-6%;z-index:4;filter:drop-shadow(0 -4px 9px #bcd6eb35);--smoke-turn:0deg;--smoke-flip:1;animation:lk-smoke-drift 22s ease-in-out infinite alternate}.clouds-back{top:39%;opacity:.6}.clouds-front{top:62%;width:120%;left:-10%;z-index:6;opacity:.48;animation-duration:29s;animation-delay:-12s;transform:scaleX(-1)}.scene-fade{position:absolute;inset:78% 0 -1px;z-index:7;background:linear-gradient(transparent,var(--ink) 96%)}.controls{position:relative;z-index:8;margin-top:clamp(-82px,-6vw,-34px);display:flex;align-items:center;flex-direction:column;width:100%;padding:0 20px;text-align:center}.tagline{font-size:clamp(13px,1.45vw,19px);text-transform:uppercase;letter-spacing:.27em;line-height:1.7;margin:0 0 22px;color:#e1c58d;text-shadow:0 2px 12px #000}nav{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.project-link{display:flex;justify-content:center;align-items:center;text-decoration:none;min-width:245px;min-height:50px;padding:12px 28px;border:1px solid #d7b574;border-radius:12px;background:linear-gradient(180deg,#19160e88,#060708e8);color:#efd6a3;font-size:17px;letter-spacing:.18em;box-shadow:inset 0 1px 1px #fff4,0 0 16px #e4b75515;transition:filter .2s,background .2s,transform .2s}.project-link:active{transform:scale(.98)}.lk-hover-glow:hover,.lk-hover-glow:focus-visible{filter:brightness(1.22) drop-shadow(0 0 12px #e7b95e42);background:#211b0e}.contract{font:14px/1.5 Arial,sans-serif;display:flex;align-items:center;gap:13px;max-width:100%;margin:15px 0 0;padding:9px 16px;border:1px solid #71604382;border-radius:8px;color:#b6a27d;background:#050607;cursor:pointer}.contract[aria-disabled=true]{cursor:default}.ca-status{border-left:1px solid #71604382;padding-left:13px;color:#d1bc94}#ca-value{overflow:hidden;text-overflow:ellipsis;max-width:310px}.ca-label{color:#a68b58}footer{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;gap:12px;padding:13px 26px 18px;color:#7a776f;font:12px/1.5 Arial,sans-serif;letter-spacing:.08em}footer a,footer button{font:inherit;color:inherit;text-decoration:none;background:none;border:0;cursor:pointer;padding:0}footer a:hover,footer button:hover{color:#d3bd92}button:focus-visible,a:focus-visible{outline:2px solid #ffe2a6;outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body.paused *{animation-play-state:paused!important}@keyframes gold-breath{50%{opacity:.55}}@keyframes earth-breath{50%{opacity:.65}}/* Launch Kit Siphon Life smoke drift, adapted for silver cloud artwork. */@keyframes lk-smoke-drift{0%{transform:translate3d(-18px,12px,0) rotate(var(--smoke-turn)) scaleX(var(--smoke-flip)) scale(1)}50%{transform:translate3d(9px,-9px,0) rotate(calc(var(--smoke-turn) + 1deg)) scaleX(var(--smoke-flip)) scale(1.05)}100%{transform:translate3d(30px,-24px,0) rotate(calc(var(--smoke-turn) - 1deg)) scaleX(var(--smoke-flip)) scale(1.09)}}@media(max-width:600px){main{padding-top:40px;justify-content:center;min-height:calc(100svh - 60px)}.scene{width:126vw;max-width:none;flex-shrink:0}.controls{margin-top:-7%;padding:0 22px}.tagline{font-size:13px;letter-spacing:.19em;margin-bottom:24px}.project-link{min-width:230px;font-size:16px}.contract{gap:10px;font-size:13px}#ca-value{max-width:130px}footer{padding:14px 18px;font-size:12px;letter-spacing:.02em}.clouds-front{opacity:.5}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

[hidden]{display:none!important}.contract .ca-status{font:inherit;background:none;border:0;border-left:1px solid #71604382;cursor:pointer;padding:0 0 0 13px}.contract .ca-status[aria-disabled=true]{cursor:default}.contract{cursor:default}

/* Siphon Life breathing float: six-second inhale, 9px lift and .009 scale.
   Applied as a local paw warp, preserving the approved single-image artwork. */
main{height:calc(100svh - 44px);min-height:660px;padding:0;position:relative;justify-content:flex-start}
.scene{width:100%;height:100%;aspect-ratio:auto;overflow:hidden}
/* Maintain one shared artwork coordinate system across every aspect ratio. */
.scene{--scene-width:max(100vw,calc((100svh - 44px)*1.42857));}

.inu{width:86%;height:auto;filter:none;mask-image:linear-gradient(to bottom,#000 85%,transparent)}
.inu img{display:block;width:100%;height:auto}.inu canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.inu-aura{position:absolute;z-index:2;top:-1%;left:7%;width:86%;aspect-ratio:3/2;background:url('assets/inu.png') center/100% 100%;filter:blur(26px) saturate(1.9) brightness(2.3);mix-blend-mode:screen;opacity:.85;transform:scale(1.04);pointer-events:none;animation:inu-gold-pulse 6s ease-in-out infinite}
.gold-halo{inset:-10% 0 14%;background:radial-gradient(ellipse at 50% 35%,#ffd56b77 0%,#dd8c243b 37%,transparent 69%);opacity:1}
@keyframes inu-gold-pulse{50%{opacity:1;transform:scale(1.065)}}
.controls{position:absolute;bottom:20px;margin:0;padding:0 20px}.tagline{margin-bottom:14px}footer{max-width:none;height:44px;padding:10px 26px}
/* Artwork uses its original 1200:840 geometry; JS sizes this canvas to the viewport. */
.scene{position:absolute;width:1200px;height:840px;left:50%;top:0;transform-origin:50% 0;transform:translateX(-50%) scale(var(--scene-scale,1))}
@media(max-width:600px){main{min-height:640px;padding:0}.scene{max-width:none}.controls{margin:0;bottom:22px;padding:0 18px}.tagline{font-size:13px;margin-bottom:18px}footer{padding:10px 16px}.inu-aura{filter:blur(20px) saturate(1.9) brightness(2.3)}}

.inu-aura{z-index:3;opacity:.6;filter:blur(24px) saturate(1.6) brightness(1.75)}
@keyframes inu-gold-pulse{50%{opacity:.82;transform:scale(1.055)}}
main{background:radial-gradient(ellipse at 50% 30%,#a8631826,transparent 64%)}
.controls{background:linear-gradient(transparent,#040507b0 28%,#040507);padding-top:20px}

/* Viewport composition: the Inu covers the screen width, while the lettering
   and controls retain independent, readable positions on every display. */
html,body{width:100%;min-height:100%;overflow-x:hidden}
main{height:100svh;min-height:560px;width:100%;isolation:isolate;overflow:hidden}
.scene{inset:0;left:0;top:0!important;width:100%;height:100%;max-width:none;transform:none;aspect-ratio:auto;overflow:hidden}
.inu,.inu-aura{width:max(100vw,100svh);left:50%;top:-2%;transform:translateX(-50%)}
.inu{mask-image:linear-gradient(#000 66%,transparent 97%)}
.inu-aura{animation-name:fullscreen-gold-pulse}
@keyframes fullscreen-gold-pulse{0%,100%{opacity:.6;transform:translateX(-50%) scale(1.04)}50%{opacity:.82;transform:translateX(-50%) scale(1.055)}}
.gold-halo{inset:-20% -10% 0}.triangle{display:none}
.earth-wrap{width:max(110vw,100svh);top:49%;left:50%;transform:translateX(-50%)}
.clouds-back{top:43%;width:110%;left:-5%}.clouds-front{top:62%;width:116%;left:-8%}
.scene-fade{inset:55% 0 0;background:linear-gradient(transparent 0%,#04050740 35%,#040507d9 76%,#040507 100%)}
.controls{bottom:50px;margin:0;background:none;padding:20px 20px 0;z-index:8}
footer{position:absolute;z-index:9;left:0;right:0;bottom:0;height:38px;margin:0;background:#040507;max-width:none;padding:9px 26px}
.eye-emblems{position:absolute;inset:0;z-index:3;pointer-events:none}
.inu-eye{position:absolute;width:clamp(140px,17vw,360px);aspect-ratio:1;mix-blend-mode:screen;opacity:.57;filter:drop-shadow(0 0 14px #d89a3d33)}
.inu-eye img{width:100%;height:100%;object-fit:contain}
.inu-eye::after{content:"";position:absolute;left:var(--iris-x,50%);top:var(--iris-y,50%);width:12%;height:12%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#ffdf9bc4 0%,#ffb93560 24%,#ffaa001a 55%,transparent 72%);border-radius:50%;mix-blend-mode:screen;filter:blur(2px);animation:iris-glow 5s ease-in-out infinite}
.eye-one{left:1%;top:4%;transform:rotate(-12deg)}.eye-two{right:1%;top:7%;transform:rotate(11deg)}
.eye-three{left:8%;top:34%;width:clamp(110px,12vw,240px);opacity:.35;transform:rotate(7deg)}.eye-four{right:7%;top:37%;width:clamp(110px,12vw,240px);opacity:.35;transform:rotate(-9deg)}
.eye-two::after{animation-delay:-2s}.eye-three::after{animation-delay:-1s}.eye-four::after{animation-delay:-3s}
@keyframes iris-glow{50%{opacity:.45;filter:blur(4px)}}
@media(max-width:600px){main{min-height:640px}.inu,.inu-aura{width:max(135vw,88svh);top:2%}.earth-wrap{top:49%;width:180vw}.clouds-back{top:47%;width:180%;left:-40%}.clouds-front{top:64%;width:190%;left:-45%}.controls{bottom:51px;padding:20px 16px 0}.eye-one{left:-6%;top:5%;width:135px}.eye-two{right:-6%;top:12%;width:130px}.eye-three,.eye-four{display:none}footer{padding:9px 16px}}
@media(max-height:650px) and (min-width:601px){.controls{bottom:35px}.tagline{margin-bottom:8px}.project-link{min-height:40px;padding:8px 24px}.contract{margin-top:8px;padding:6px 14px}}
.inu-eye{--iris-x:50%;--iris-y:55%}
@media(prefers-reduced-motion:reduce){.inu-eye::after{animation:none}}

/* Approved seal: exact PNG, stationary centre and independent circular ring. */
.seal-field{position:absolute;inset:0;z-index:1;pointer-events:none}
.inu-seal{position:absolute;width:48vw;aspect-ratio:1;top:-13%;opacity:.66;pointer-events:none;filter:drop-shadow(0 0 15px #eab94c44)}
.seal-left{left:-11%}.seal-right{right:-11%}
.inu-seal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.seal-ring{mask-image:radial-gradient(circle closest-side,transparent 0 61%,#000 63%);animation:seal-orbit 150s linear infinite}
.seal-core{mask-image:radial-gradient(circle closest-side,#000 0 61%,transparent 63%)}
.seal-right .seal-ring{animation-direction:reverse}
@keyframes seal-orbit{to{transform:rotate(360deg)}}
.scene-fade,.gold-halo,.triangle,.earth-wrap{pointer-events:none}
.marionette{z-index:8;pointer-events:auto;touch-action:none}
.puppet-letter{stroke:#251807;stroke-width:3px;stroke-linejoin:round;paint-order:stroke fill;fill:url(#gold)}
@media(max-width:600px){.inu-seal{width:85vw;top:4%;opacity:.52}.seal-left{left:-34%}.seal-right{right:-34%}.puppet-letter{stroke-width:1.6px}}
@media(prefers-reduced-motion:reduce){.seal-ring{animation:none}}

/* Launch Kit Siphon Life link artwork and Vitalik story border, gold variant. */
.project-link{font-family:Georgia,serif;font-size:15px;font-weight:500;letter-spacing:.13em;border:0;border-radius:0;box-shadow:none;background:transparent url('assets/link-button.png') center/100% 100% no-repeat;color:#f5dfa6;min-width:210px;min-height:65px;padding:19px 28px;filter:drop-shadow(0 4px 5px #0009);text-shadow:0 2px 3px #000;cursor:pointer;transition:filter .2s,transform .15s}
.project-link:hover,.project-link:focus-visible{background:transparent url('assets/link-button.png') center/100% 100% no-repeat;filter:brightness(1.18) drop-shadow(0 0 12px #f4c96955)}
.project-link:active{transform:scale(.985)}
.puppet-string{stroke:#997335;stroke-width:1;opacity:.8;filter:none}
.thread-highlight{fill:none;stroke:#f5d995;stroke-width:.45;stroke-dasharray:1 9 3 19;opacity:.55;pointer-events:none}
#letters image{filter:drop-shadow(0 3px 2px #0009)}
#meme-viewer{padding:0;border:0;background:transparent;color:#ead8af;width:min(900px,94vw);max-height:90svh;overflow:auto}
#meme-viewer::backdrop{background:#020204d9;backdrop-filter:blur(7px)}
.meme-panel{isolation:isolate;position:relative;padding:20px 24px 24px;border:18px solid transparent;border-image:url('assets/link-button.png') 25% 8% fill / 18px / 0 stretch;filter:drop-shadow(0 10px 24px #0008)}
.meme-panel::before{content:'';position:absolute;inset:0;z-index:-1;background:#050509ed;pointer-events:none}
.meme-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.meme-header h2{font:500 24px Georgia,serif;letter-spacing:.18em;margin:0}
.meme-panel button{font:14px Georgia,serif;color:#f4dea6;background:#14110b;border:1px solid #9a8052;padding:10px 16px;cursor:pointer}.meme-panel button:hover{box-shadow:0 0 12px #e5b85b33}
#meme-stage{min-height:250px;display:flex;align-items:center;justify-content:center}#meme-image{display:block;max-width:100%;max-height:60svh;object-fit:contain}#meme-empty{font:16px/1.6 Georgia,serif;color:#cbb88e;text-align:center}
#meme-caption{font:16px/1.5 Georgia,serif;text-align:center;margin:14px 0}#meme-navigation{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:16px;font:14px Georgia,serif}.viewer-open{overflow:hidden}
@media(max-width:600px){nav{gap:6px}.project-link{min-width:0;width:calc(50% - 4px);min-height:55px;padding:15px 16px;font-size:13px;letter-spacing:.08em}#links{width:100%;max-width:420px}.meme-panel{padding:14px 10px;border-width:13px}#meme-stage{min-height:200px}}

/* Siphon Life sound-control styling; vertical gold-slider variant. */
.sound-control{position:fixed;right:22px;bottom:20px;z-index:12;display:flex;align-items:center;flex-direction:column;gap:9px;color:#d7c59d}
.volume-panel{display:flex;align-items:center;flex-direction:column;gap:9px;background:#101014d9;border:1px solid #655635;padding:11px 8px 9px;box-shadow:inset 0 0 0 2px #090909,0 3px 12px #0008;border-radius:3px}
#volume-value{font:12px Georgia,serif;color:#deca9d}
#volume{writing-mode:vertical-lr;direction:rtl;width:20px;height:90px;accent-color:#b79a5c;cursor:pointer;margin:0}
.volume-panel a{font:11px Georgia,serif;color:#aa9670;text-decoration:none}.volume-panel a:hover{color:#ffe6ad}
#sound-toggle{width:42px;height:42px;border-radius:50%;border:2px solid #a18b5d;box-shadow:inset 0 0 0 3px #16160e,0 0 0 2px #332e21;background:#0c0d0e;padding:9px;cursor:pointer;transition:filter .2s}
#sound-toggle:hover{filter:brightness(1.2) drop-shadow(0 0 8px #eec77e55)}
#sound-toggle svg{width:100%;height:100%;fill:#d2bb86;stroke:#d2bb86;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#sound-toggle .sound-waves,#sound-toggle .sound-muted{fill:none}
#sound-toggle[aria-pressed=false] .sound-waves,#sound-toggle[aria-pressed=true] .sound-muted{display:none}
@media(max-width:600px){.sound-control{right:10px;bottom:14px;gap:7px}.volume-panel{padding:8px 5px}#volume{height:65px;width:18px}#sound-toggle{width:36px;height:36px;padding:7px}}

/* Temporary Earth comparison control. */
.earth-preview-switch{position:fixed;left:20px;bottom:20px;z-index:12}
@media(max-width:600px){.earth-preview-switch{left:10px;bottom:14px;gap:5px;padding:5px;font-size:14px}}
