:root{font-family:-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif;color:#e2e9e3;background:#101b20;font-synthesis:none;font-weight:400;-webkit-font-smoothing:antialiased;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #c3eacb;outline-offset:7px}button{touch-action:manipulation}button:disabled{cursor:default}.app{min-height:100vh;min-height:100svh;padding:36px max(40px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 52%,#24413d66,transparent 48%),radial-gradient(ellipse at 80% 0%,#34413a33,transparent 42%),#101b20;overflow:hidden}.header{display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;font-size:19px;letter-spacing:.15em}.brand-mark{font-family:Georgia,serif;font-size:38px;color:#c7e5cd;letter-spacing:-.1em;border:1px solid #9db7a44d;border-radius:14px;width:49px;height:49px;text-align:center}.brand small{display:block;font-size:10px;letter-spacing:.09em;color:#9caea7;margin-top:5px}.version{font-size:10px;letter-spacing:.16em;color:#9caaa5}.version b{font-weight:400;border:1px solid #899e9340;padding:5px 9px;border-radius:20px;margin-left:8px}.space{flex:1;position:relative;text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:40px 0 32px}.eyebrow{font-size:9px;letter-spacing:.22em;color:#9db9aa}.intro h1{font-size:clamp(21px,2.4vw,29px);font-weight:400;letter-spacing:.16em;margin:18px 0 12px}.intro p{font-size:12px;color:#a2b2ab;letter-spacing:.12em}.companion{position:relative;width:360px;height:330px;max-width:100%;display:grid;place-items:center;margin-top:10px}.character{position:relative;z-index:2;width:290px;height:290px;border:0;background:none;padding:0;border-radius:50%}.character-float{display:block;animation:float 7s ease-in-out infinite}.creature{width:100%;display:block;filter:drop-shadow(0 0 28px #a4e3c824);animation:breathe 5s ease-in-out infinite;transform-origin:50% 70%}.ground{position:absolute;bottom:39px;width:150px;height:15px;background:#92cbb622;filter:blur(11px);border-radius:50%}.orbit{position:absolute;width:350px;height:140px;max-width:100%;border:1px solid #a3c2ae16;border-radius:50%;transform:rotate(-24deg);top:110px}.orbit-two{transform:rotate(30deg);width:320px;height:230px;border-color:#a3c2ae0a;top:65px}.spark{width:4px;height:4px;border-radius:50%;background:#d1dfbc88;position:absolute}.spark-one{left:28px;top:130px}.spark-two{right:18px;top:204px;width:3px;height:3px}.character-name{position:absolute;bottom:1px;font-size:13px;letter-spacing:.2em}.character-name span{font-size:8px;color:#91a59c;margin-left:9px;letter-spacing:.18em}.speech{display:flex;align-items:center;justify-content:center;gap:12px;min-height:55px;margin-top:25px;padding:15px 25px;border:1px solid #b5c7b51f;border-radius:16px;background:#c3dac407;font-size:13px;letter-spacing:.06em;line-height:1.8}.speech-dot{width:5px;height:5px;background:#b3d3b6;border-radius:50%;flex-shrink:0}.tap-hint{font-size:10px;color:#8fa39b;letter-spacing:.12em;margin:17px 0 0}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;color:#99ada1;letter-spacing:.1em}.presence{display:flex;gap:9px;align-items:center}.live-dot{display:inline-block;width:6px;height:6px;background:#b2d3ae;border-radius:50%;box-shadow:0 0 9px #b2d3ae33;margin-right:7px}.panel-toggle,.motion-toggle{border:1px solid #b2c5b533;color:#d0dfd1;background:#bdd2b80b;border-radius:30px;min-height:46px;padding:0 23px;font-size:11px;letter-spacing:.08em}.panel-toggle:hover,.motion-toggle:hover{background:#bdd2b81c}.panel-toggle span{font-size:18px;margin-right:9px}.panels{position:absolute;inset:0;pointer-events:none;display:flex;justify-content:space-between;align-items:center;gap:20px}.glass{pointer-events:auto;text-align:left;width:225px;padding:24px;border:1px solid #a7bba42a;background:#20312ee8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:18px;box-shadow:0 20px 60px #0002}.glass h2{font-weight:400;font-size:16px;line-height:1.6;margin:15px 0}.glass p{font-size:11px;line-height:2;color:#afc0b4}.glass dl{font-size:10px;margin:22px 0 0}.glass dl div{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #adc4b219;padding:13px 0}.glass dt{color:#91a79a}.glass dd{margin:0}.motion-toggle{padding:0 12px;font-size:10px;margin-top:12px}.glass .note{font-size:9px;color:#94a89b;margin-bottom:0}@keyframes float{0%,to{transform:translateY(5px)}50%{transform:translateY(-9px)}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.025,.98)}}.motion-paused .character-float,.motion-paused .creature{animation-play-state:paused}@media(min-width:1400px){.panels{padding:0 8%}}@media(max-width:1000px){.panels{position:static;width:100%;justify-content:center;align-items:stretch;margin-top:28px}.glass{width:260px}.space{padding-top:35px}.app{padding:25px 28px}.footer-note{display:none}}@media(max-width:540px){.app{padding:22px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom))}.brand small,.version{font-size:8px}.space{padding-top:40px}.companion{width:310px;height:300px}.character{width:265px;height:265px}.intro h1{letter-spacing:.08em}.speech{font-size:11px;padding:13px 15px}.panels{flex-direction:column;align-items:center}.glass{width:100%;max-width:370px}.presence{font-size:9px}.panel-toggle{padding:0 15px}}@media(max-height:720px)and (min-width:800px){.space{padding-top:18px;padding-bottom:20px}.companion{height:260px}.character{width:240px;height:240px}.orbit{top:80px;width:290px}.orbit-two{top:40px}.ground{bottom:24px}.speech{margin-top:16px}.intro h1{margin-top:10px}.panels{position:static;margin-top:20px}.app{min-height:100svh}}@media(prefers-reduced-motion:reduce){.character-float,.creature{animation:none}}.character-float,.character-body{width:100%;height:100%;position:relative;display:grid;place-items:center}.character-body{transform-origin:50% 60%}.placeholder-design{display:block;position:relative;width:100%}.placeholder-label{position:absolute;bottom:8px;left:0;right:0;font-size:9px;color:#bdd1c5;letter-spacing:.08em}.character-image{position:absolute;width:100%;height:100%;object-fit:contain;opacity:0;animation:breathe 5s ease-in-out infinite;filter:drop-shadow(0 0 18px #a4e3c818)}.character-image.image-ready{opacity:1}.appearance-normal .character-image{padding:3px 28px}.appearance-deformed .character-image{padding:24px 10px}.appearance-controls{display:flex;gap:5px;padding:4px;border:1px solid #b5c7b526;border-radius:26px;margin-top:20px;position:relative;z-index:2;background:#13221f}.appearance-controls button{border:0;background:transparent;color:#a9beb1;min-height:44px;padding:0 20px;border-radius:22px;font-size:11px}.appearance-controls button[aria-pressed=true]{background:#b8d7bd1c;color:#e1eddf}.appearance-controls button:disabled{opacity:.6}.appearance-status{font-size:10px;color:#9cb4a4;min-height:16px;margin:10px 0 0}.appearance-status+.speech{margin-top:12px}.phase-dissolving .character-body{animation:dissolve .45s ease-in forwards}.phase-reforming .character-body{animation:reform .45s ease-out forwards}.particles{position:absolute;inset:0;pointer-events:none}.particles span{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#86cded;box-shadow:0 0 8px #86cded88;animation:scatter .82s ease-in-out both;animation-delay:var(--delay)}.particles span:nth-child(2n){background:#e4c77d;box-shadow:0 0 8px #e4c77d88}.motion-paused .character-image{animation-play-state:paused}.motion-paused .particles{display:none}.motion-paused .character-body{animation:none}@keyframes dissolve{0%{opacity:1;filter:blur(0);transform:scale(1)}to{opacity:0;filter:blur(8px);transform:scale(.9)}}@keyframes reform{0%{opacity:0;filter:blur(8px);transform:scale(.9)}to{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes scatter{0%{opacity:0;transform:translate(0) scale(.5)}25%{opacity:.85}50%{opacity:.7;transform:translate(var(--x),var(--y)) scale(1)}to{opacity:0;transform:translate(0) scale(.3)}}@media(prefers-reduced-motion:reduce){.character-image,.character-body,.particles span{animation:none!important}.particles{display:none}}.appearance-lock{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:5px;font-size:11px;color:#c4d6c8;cursor:pointer;position:relative;z-index:2}.appearance-lock input{width:18px;height:18px;accent-color:#a6d2bb}.appearance-help{font-size:10px;color:#9cb4a4;margin:0}