:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", sans-serif;
  background: #07111f;
  color: #f7f9fc;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #07111f; }
button, select { font: inherit; }
button { cursor: pointer; }

.viewer-page { overflow: hidden; min-height: 100dvh; }
.stage { position: relative; width: 100vw; height: 100dvh; overflow: hidden; background: #050b13; }
.portrait { --voice: 0; position: absolute; inset: -2.5%; }
.portrait.switching { opacity: .72; transition: opacity .18s ease; }
.motion-rig, .voice-rig { position: absolute; inset: 0; transform-origin: 50% 72%; will-change: transform; }
.motion-rig {
  transform: translate3d(0, 0, 0) rotate(0) scale(1.025);
  transition-property: transform;
  transition-duration: 5.2s;
  transition-timing-function: cubic-bezier(.38,0,.22,1);
}
.voice-rig { animation: quietPresence 12.4s cubic-bezier(.42,0,.25,1) infinite; }
.portrait.speaking .voice-rig { animation: conversationalPresence 4.9s cubic-bezier(.38,0,.24,1) infinite; }
.portrait.event-sigh .voice-rig { animation: sighResponse 1.4s cubic-bezier(.3,0,.25,1) both; }
.portrait.event-throat-clear .voice-rig { animation: throatClearResponse .58s cubic-bezier(.3,0,.3,1) both; }
.portrait.event-thinking .voice-rig { animation: thinkingResponse 1.7s cubic-bezier(.3,0,.25,1) both; }
.portrait-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.torso-motion {
  opacity: .46;
  transform-origin: 50% 70%;
  animation: torsoBreath 6.9s cubic-bezier(.4,0,.35,1) infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent 41%, rgba(0,0,0,.12) 48%, #000 61%);
  mask-image: linear-gradient(to bottom, transparent 41%, rgba(0,0,0,.12) 48%, #000 61%);
}
.portrait.speaking .torso-motion { opacity: .52; animation-duration: 4.8s; }
.hair-motion { opacity: .24; will-change: transform; }
.hair-left {
  transform-origin: 34% 31%;
  animation: hairSwayLeft 11.3s cubic-bezier(.45,0,.25,1) infinite;
  -webkit-mask-image: radial-gradient(ellipse 15% 39% at 28% 55%, #000 24%, rgba(0,0,0,.7) 58%, transparent 79%);
  mask-image: radial-gradient(ellipse 15% 39% at 28% 55%, #000 24%, rgba(0,0,0,.7) 58%, transparent 79%);
}
.hair-right {
  transform-origin: 66% 31%;
  animation: hairSwayRight 13.7s cubic-bezier(.42,0,.28,1) -3.1s infinite;
  -webkit-mask-image: radial-gradient(ellipse 15% 38% at 72% 54%, #000 24%, rgba(0,0,0,.7) 58%, transparent 79%);
  mask-image: radial-gradient(ellipse 15% 38% at 72% 54%, #000 24%, rgba(0,0,0,.7) 58%, transparent 79%);
}
.hair-end-left {
  opacity: .2;
  transform-origin: 30% 47%;
  animation: curlFloatLeft 8.9s cubic-bezier(.43,0,.24,1) -1.7s infinite;
  -webkit-mask-image: radial-gradient(ellipse 19% 25% at 29% 69%, #000 18%, rgba(0,0,0,.62) 55%, transparent 80%);
  mask-image: radial-gradient(ellipse 19% 25% at 29% 69%, #000 18%, rgba(0,0,0,.62) 55%, transparent 80%);
}
.hair-end-right {
  opacity: .2;
  transform-origin: 70% 47%;
  animation: curlFloatRight 10.6s cubic-bezier(.39,0,.27,1) -4.2s infinite;
  -webkit-mask-image: radial-gradient(ellipse 19% 25% at 71% 68%, #000 18%, rgba(0,0,0,.62) 55%, transparent 80%);
  mask-image: radial-gradient(ellipse 19% 25% at 71% 68%, #000 18%, rgba(0,0,0,.62) 55%, transparent 80%);
}
.gesture-layer { opacity: 0; will-change: opacity, transform; }
.portrait.gesture-active .gesture-mid { animation: gestureMidOnce 6.4s cubic-bezier(.36,0,.2,1) both; }
.portrait.gesture-active .gesture-tuck { animation: gestureTuckOnce 6.4s cubic-bezier(.36,0,.2,1) both; }
.portrait.gesture-active .gesture-down { animation: gestureDownOnce 6.4s cubic-bezier(.36,0,.2,1) both; }
.portrait.gesture-active .gesture-rest { animation: gestureRestOnce 6.4s cubic-bezier(.36,0,.2,1) both; }
.portrait.gesture-active .hair-motion { opacity: .12; transition: opacity .5s ease; }
.mouth-layer {
  opacity: 0;
  transition: opacity 72ms cubic-bezier(.32,0,.28,1);
  will-change: opacity;
  -webkit-mask-image: radial-gradient(ellipse 11.5% 4.7% at 50% 37.1%, #000 35%, rgba(0,0,0,.92) 52%, transparent 78%);
  mask-image: radial-gradient(ellipse 11.5% 4.7% at 50% 37.1%, #000 35%, rgba(0,0,0,.92) 52%, transparent 78%);
}
.eye-layer { opacity: 0; }
.eye-left {
  -webkit-mask-image: radial-gradient(ellipse 9.2% 3.25% at 43.5% 27.6%, #000 36%, rgba(0,0,0,.82) 57%, transparent 78%);
  mask-image: radial-gradient(ellipse 9.2% 3.25% at 43.5% 27.6%, #000 36%, rgba(0,0,0,.82) 57%, transparent 78%);
}
.eye-right {
  -webkit-mask-image: radial-gradient(ellipse 9.2% 3.25% at 56.5% 27.6%, #000 36%, rgba(0,0,0,.82) 57%, transparent 78%);
  mask-image: radial-gradient(ellipse 9.2% 3.25% at 56.5% 27.6%, #000 36%, rgba(0,0,0,.82) 57%, transparent 78%);
}
.cinema-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,7,13,.18), transparent 40%, rgba(2,7,13,.05) 63%, rgba(2,7,13,.82) 100%); pointer-events: none; }
.live-header { position: absolute; z-index: 4; top: max(22px, env(safe-area-inset-top)); left: 22px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(7,17,31,.38); backdrop-filter: blur(16px); font-size: 12px; font-weight: 750; letter-spacing: .12em; }
.character-button { position: absolute; z-index: 11; top: max(22px, env(safe-area-inset-top)); right: 22px; display: flex; align-items: center; gap: 7px; min-height: 39px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(7,17,31,.46); color: rgba(255,255,255,.72); box-shadow: none; backdrop-filter: blur(16px); font-size: 11px; }
.character-button strong { color: #fff; font-size: 12px; }
.live-dot, .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #768398; box-shadow: 0 0 0 4px rgba(118,131,152,.13); }
.live-dot.online, .status-dot.online { background: #5ff2a4; box-shadow: 0 0 0 4px rgba(95,242,164,.15), 0 0 18px rgba(95,242,164,.7); }
.identity-card { position: absolute; z-index: 4; left: 25px; right: 25px; bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px)); text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #8fd9ff; }
.identity-card h1 { margin: 0; font-size: clamp(44px, 14vw, 72px); line-height: 1; letter-spacing: -.05em; }
.identity-card p:last-child { margin: 10px 0 0; color: rgba(255,255,255,.78); font-size: 15px; }
.start-overlay { position: absolute; z-index: 10; inset: 0; display: grid; place-items: end center; padding: 28px 22px max(28px, calc(env(safe-area-inset-bottom) + 18px)); background: linear-gradient(180deg, rgba(4,10,18,.1), rgba(4,10,18,.88)); transition: opacity .35s ease, visibility .35s; }
.start-overlay.hidden { opacity: 0; visibility: hidden; }
.start-card { width: min(100%, 420px); padding: 24px; border: 1px solid rgba(255,255,255,.17); border-radius: 25px; background: rgba(10,20,35,.73); backdrop-filter: blur(24px); box-shadow: 0 24px 80px rgba(0,0,0,.36); }
.start-card h2 { margin: 0; font-size: 27px; letter-spacing: -.04em; }
.start-card > p:not(.eyebrow) { color: rgba(255,255,255,.72); line-height: 1.55; }

button { border: 0; border-radius: 13px; padding: 13px 18px; background: linear-gradient(135deg, #6bdcff, #6184ff); color: #04101b; font-weight: 800; box-shadow: 0 10px 30px rgba(67,143,255,.23); }
button.secondary { background: #19273a; color: #dce9f8; box-shadow: none; border: 1px solid rgba(255,255,255,.09); }
button:disabled { opacity: .42; cursor: default; }
.start-card button { width: 100%; margin-top: 8px; padding: 16px; }
.character-panel { position: absolute; z-index: 20; inset: 0; }
.character-backdrop { position: absolute; inset: 0; width: 100%; border: 0; border-radius: 0; padding: 0; background: rgba(2,7,13,.58); opacity: 0; box-shadow: none; transition: opacity .26s ease; }
.character-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 20px max(24px, calc(env(safe-area-inset-bottom) + 15px)); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; border-radius: 27px 27px 0 0; background: rgba(8,18,31,.94); backdrop-filter: blur(26px); transform: translateY(102%); transition: transform .28s cubic-bezier(.22,.75,.25,1); }
.character-panel.open .character-backdrop { opacity: 1; }
.character-panel.open .character-sheet { transform: translateY(0); }
.sheet-handle { width: 42px; height: 5px; margin: 0 auto 18px; border-radius: 999px; background: rgba(255,255,255,.22); }
.character-sheet h2 { margin: 0 0 17px; font-size: 23px; letter-spacing: -.04em; }
.character-options { display: grid; gap: 10px; }
.character-option { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 13px; width: 100%; padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: rgba(20,34,51,.82); color: #eef6ff; box-shadow: none; text-align: left; }
.character-option.selected { border-color: rgba(107,220,255,.65); background: rgba(30,61,82,.82); }
.character-option img { width: 58px; height: 68px; border-radius: 12px; object-fit: cover; object-position: 50% 24%; }
.character-option span { display: grid; gap: 4px; min-width: 0; }
.character-option strong { font-size: 15px; }
.character-option small { color: #8ea2ba; font-size: 11px; line-height: 1.4; }
.character-option b { color: #78dcff; font-size: 11px; white-space: nowrap; }
.character-note { margin: 14px 3px 0; color: #73869e; font-size: 11px; }

.control-page { min-height: 100vh; padding: 46px 24px 80px; background: radial-gradient(circle at 15% 0, #183a58 0, #0a1727 31%, #07111f 74%); }
.control-shell { width: min(980px, 100%); margin: 0 auto; display: grid; gap: 18px; }
.control-panel { padding: 27px; border: 1px solid rgba(255,255,255,.11); border-radius: 24px; background: rgba(8,19,33,.76); box-shadow: 0 24px 70px rgba(0,0,0,.2); backdrop-filter: blur(18px); }
.hero-panel { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.hero-panel h1 { margin: 0; font-size: clamp(34px, 6vw, 58px); letter-spacing: -.05em; }
.hero-panel p:not(.eyebrow) { max-width: 600px; color: #9eafc5; line-height: 1.6; }
.qr-wrap { display: grid; justify-items: center; gap: 9px; }
.qr-wrap img { width: 154px; padding: 7px; border-radius: 14px; background: white; }
.qr-wrap a { max-width: 220px; color: #8fd9ff; font-size: 12px; overflow-wrap: anywhere; }
.status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 23px; }
.status-row span:last-child { margin-left: auto; color: #91a4bc; }
.control-panel label { display: block; margin-bottom: 9px; color: #9eb2ca; font-size: 13px; font-weight: 750; }
.device-row, .button-row { display: flex; gap: 10px; }
select { flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: #0b1828; color: #eef6ff; }
.meter { height: 12px; margin-top: 20px; overflow: hidden; border-radius: 999px; background: #111f31; }
.meter > div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5ff2a4, #6bdcff 65%, #ffcf5a); transition: width 55ms linear; }
.hint { min-height: 22px; margin: 10px 0 20px; color: #8296af; font-size: 13px; }
.compact h2 { margin: 0 0 20px; font-size: 18px; }
.connection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.connection-grid div { padding: 15px; border-radius: 15px; background: #0a1726; }
.connection-grid dt { margin-bottom: 5px; color: #70839b; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.connection-grid dd { margin: 0; color: #dfeafb; overflow-wrap: anywhere; }
.button-row button { flex: 1 1 0; }

@keyframes quietPresence {
  0%, 100% { transform: translate3d(0, .035%, 0) rotate(-.018deg); }
  28% { transform: translate3d(.025%, -.035%, 0) rotate(.015deg); }
  57% { transform: translate3d(-.035%, -.09%, 0) rotate(-.025deg); }
  81% { transform: translate3d(.018%, -.02%, 0) rotate(.012deg); }
}
@keyframes conversationalPresence {
  0%, 100% { transform: translate3d(0, .015%, 0) rotate(-.018deg); }
  16% { transform: translate3d(.055%, -.07%, 0) rotate(.035deg); }
  35% { transform: translate3d(-.03%, -.14%, 0) rotate(-.05deg); }
  53% { transform: translate3d(.025%, -.04%, 0) rotate(.018deg); }
  72% { transform: translate3d(-.055%, -.11%, 0) rotate(-.036deg); }
  89% { transform: translate3d(.018%, -.025%, 0) rotate(.012deg); }
}
@keyframes sighResponse {
  0% { transform: translate3d(0, -.03%, 0) rotate(0); }
  34% { transform: translate3d(-.035%, .18%, 0) rotate(-.045deg) scale(.9995); }
  72% { transform: translate3d(.018%, .09%, 0) rotate(.018deg) scale(.9998); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@keyframes throatClearResponse {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  22% { transform: translate3d(-.045%, -.07%, 0) rotate(-.035deg); }
  51% { transform: translate3d(.055%, .02%, 0) rotate(.045deg); }
  76% { transform: translate3d(-.018%, -.025%, 0) rotate(-.012deg); }
}
@keyframes thinkingResponse {
  0% { transform: translate3d(0, 0, 0) rotate(0); }
  30%, 68% { transform: translate3d(.075%, -.09%, 0) rotate(.075deg) scale(1.0003); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@keyframes torsoBreath {
  0%, 100% { transform: translate3d(0, .08%, 0) scale3d(1, 1, 1); }
  42% { transform: translate3d(0, -.16%, 0) scale3d(1.0015, 1.0025, 1); }
  57% { transform: translate3d(.025%, -.12%, 0) scale3d(1.001, 1.002, 1); }
}
@keyframes hairSwayLeft {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  29% { transform: translate3d(-.08%, .03%, 0) rotate(-.045deg); }
  61% { transform: translate3d(.07%, -.025%, 0) rotate(.055deg); }
  83% { transform: translate3d(.025%, .015%, 0) rotate(.012deg); }
}
@keyframes hairSwayRight {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  24% { transform: translate3d(.075%, .025%, 0) rotate(.045deg); }
  56% { transform: translate3d(-.06%, -.02%, 0) rotate(-.05deg); }
  78% { transform: translate3d(.02%, .01%, 0) rotate(.015deg); }
}
@keyframes curlFloatLeft {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  18% { transform: translate3d(-.035%, .015%, 0) rotate(-.018deg); }
  43% { transform: translate3d(.12%, -.04%, 0) rotate(.085deg); }
  68% { transform: translate3d(.035%, .025%, 0) rotate(.022deg); }
  87% { transform: translate3d(-.09%, -.015%, 0) rotate(-.06deg); }
}
@keyframes curlFloatRight {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  22% { transform: translate3d(.045%, .018%, 0) rotate(.025deg); }
  49% { transform: translate3d(-.11%, -.035%, 0) rotate(-.08deg); }
  74% { transform: translate3d(-.02%, .02%, 0) rotate(-.015deg); }
  91% { transform: translate3d(.075%, -.012%, 0) rotate(.048deg); }
}
@keyframes gestureMidOnce {
  0% { opacity: 0; transform: translate3d(.12%, .18%, 0) scale(.999); }
  8%, 27% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  39%, 100% { opacity: 0; transform: translate3d(-.04%, -.06%, 0) scale(1.0004); }
}
@keyframes gestureTuckOnce {
  0%, 24% { opacity: 0; transform: translate3d(.09%, .12%, 0) scale(.9995); }
  37%, 54% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  66%, 100% { opacity: 0; transform: translate3d(-.035%, -.04%, 0) scale(1.0003); }
}
@keyframes gestureDownOnce {
  0%, 51% { opacity: 0; transform: translate3d(.07%, -.12%, 0) scale(1); }
  64%, 77% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  88%, 100% { opacity: 0; transform: translate3d(0, .1%, 0) scale(.9998); }
}
@keyframes gestureRestOnce {
  0%, 75% { opacity: 0; }
  87%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 650px) {
  .control-page { padding: 22px 14px 60px; }
  .control-panel { padding: 20px; border-radius: 19px; }
  .hero-panel { grid-template-columns: 1fr; }
  .qr-wrap { display: none; }
  .device-row, .button-row { flex-direction: column; }
  .connection-grid { grid-template-columns: 1fr; }
}