:root{color-scheme:dark;font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;background:#100c16;color:#f7f0ff;--violet:#b98cff;--panel:rgba(255,255,255,.075)}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;min-height:100svh;background:radial-gradient(circle at 50% -10%,rgba(142,91,205,.33),transparent 40%),linear-gradient(180deg,#17111f,#0f0b14);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{font:inherit}.app{width:min(100%,480px);min-height:100svh;margin:auto;padding:calc(18px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}.topbar{display:flex;align-items:center;justify-content:space-between}.eyebrow{margin:0 0 2px;color:#a995bf;font-size:10px;font-weight:800;letter-spacing:.16em}h1{margin:0;font-size:28px;letter-spacing:-.04em}.sound{width:42px;height:42px;border:1px solid rgba(255,255,255,.11);border-radius:50%;color:#cbb4e6;background:var(--panel)}.sound[aria-pressed=true]{color:#fff;background:rgba(185,140,255,.25)}.stage{position:relative;flex:1;min-height:360px;overflow:hidden;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);border-radius:32px;background:linear-gradient(155deg,rgba(91,55,122,.33),rgba(19,14,27,.62));box-shadow:inset 0 1px rgba(255,255,255,.05),0 24px 70px rgba(0,0,0,.32)}.stage:after{content:"";position:absolute;left:14%;right:14%;bottom:17%;height:20px;border-radius:50%;background:rgba(0,0,0,.27);filter:blur(9px)}.moon{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 42% 38%,#f2dcff,#aa78d0 58%,#69468f);box-shadow:0 0 55px rgba(195,142,255,.23)}.stars{position:absolute;top:12%;color:rgba(239,214,255,.62);letter-spacing:.22em;animation:twinkle 2.4s ease-in-out infinite}canvas{position:relative;z-index:2;width:min(65vw,270px);height:auto;filter:drop-shadow(0 10px 12px rgba(12,5,20,.42))}.pet-tap{position:absolute;z-index:3;inset:15% 15% 8%;border:0;background:transparent;touch-action:manipulation}.speech{position:absolute;z-index:4;top:18px;left:50%;transform:translate(-50%,-8px);max-width:80%;padding:9px 14px;border-radius:14px;background:rgba(250,246,255,.94);color:#2b1c36;font-size:13px;font-weight:750;text-align:center;opacity:0;transition:.2s;pointer-events:none}.speech.show{opacity:1;transform:translate(-50%,0)}.status-card{display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:18px;background:var(--panel);border:1px solid rgba(255,255,255,.07)}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--violet);box-shadow:0 0 12px var(--violet)}.status-name,.status-hint{margin:0}.status-name{font-size:14px;font-weight:800}.status-hint{margin-top:2px;color:#9f91ae;font-size:12px}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.action{min-height:56px;padding:7px 4px;display:grid;place-items:center;gap:2px;border:1px solid rgba(255,255,255,.07);border-radius:16px;color:#b9aac7;background:var(--panel)}.action span:first-child{font-size:19px}.action span:last-child{font-size:11px;font-weight:700}.action.active{color:#fff;border-color:rgba(185,140,255,.45);background:rgba(128,77,183,.32)}.install{border:0;border-radius:16px;padding:14px;color:#1c1025;background:#d7b5ff;font-weight:850}.install-hint{margin:0;color:#776a85;font-size:11px;line-height:1.5;text-align:center}@keyframes twinkle{50%{opacity:.38;transform:translateY(2px)}}@media(max-height:720px){.app{gap:9px}.stage{min-height:300px}.install-hint{display:none}}@media(prefers-reduced-motion:reduce){.stars{animation:none}}