[hidden]{display:none!important}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--ds-focus,#fff);outline-offset:3px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.explore{position:absolute;inset:0;overflow:hidden;background:var(--ds-bg,#101426);color:white;touch-action:none;isolation:isolate}.visual,.visual img,.visual video{position:absolute;inset:0;width:100%;height:100%}.visual img,.visual video{object-fit:cover;object-position:center 25%}.visual{opacity:1;transition:opacity 200ms ease-out}.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 24%,transparent 56%,rgba(0,0,0,.52) 82%,rgba(0,0,0,.8))}.top-controls{position:absolute;top:58px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center}.icon-button{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:white;text-decoration:none;filter:drop-shadow(0 1px 3px #0006)}.icon-button:hover{background:#ffffff1a;border-radius:50%}.favorite[aria-pressed=true]{color:var(--ds-accent)}.favorite[aria-pressed=true] svg{fill:currentColor}.favorite.pop svg{animation:heart-pop 260ms ease}@keyframes heart-pop{50%{transform:scale(1.2)}}.version-handle{position:absolute;right:0;top:calc(50% - 24.8px);width:32px;height:49.6px;display:grid;place-items:center;border:0;border-radius:9.6px 0 0 9.6px;background:var(--ds-accent);color:var(--ds-on-accent);z-index:6;opacity:1;transition:none}.version-handle svg{width:19.2px;height:19.2px;pointer-events:none}.version-drawer{position:absolute;right:0;left:24px;top:50%;z-index:5;border-radius:16px 0 0 16px;padding:16px 42px 16px 16px;background:var(--ds-panel);color:var(--ds-text);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:translate(105%,-50%);transition:transform 360ms var(--ds-ease),visibility 0s linear 360ms;visibility:hidden}.version-drawer.open{transform:translate(0,-50%);visibility:visible;transition-delay:0s}.drawer-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px}.drawer-heading .icon-button{color:var(--ds-text);filter:none}.version-list{display:flex;gap:12px;overflow-x:auto;padding:6px 4px;scrollbar-width:thin}.version-option{position:relative;flex:0 0 90px;padding:0;border:0;border-radius:8px;background:var(--ds-surface);color:var(--ds-text);overflow:hidden;opacity:.65;transform:scale(.94);transition:transform 260ms,opacity 260ms}.version-option[aria-pressed=true]{opacity:1;transform:scale(1)}.version-option img{width:90px;height:110px;object-fit:cover;display:block}.version-option span{display:block;font-size:12px;padding:6px}.version-option[aria-pressed=true]::after{content:'✓';position:absolute;top:6px;right:6px;background:var(--ds-accent);color:var(--ds-on-accent);border-radius:50%;width:22px;height:22px;font-size:14px}.profile-area{position:absolute;left:24px;right:24px;bottom:78px}.identity{display:flex;gap:14px;align-items:center;margin-bottom:20px}.identity img{width:60px;height:60px;object-fit:cover;border-radius:50%;box-shadow:0 4px 12px #0003}h1{font-size:26px;line-height:1.3;letter-spacing:-.03em;margin:0 0 5px}.tags{margin:0;font-size:13px;color:#fff;opacity:.9}.talk-button{width:100%;min-height:50px;border:0;border-radius:999px;background:var(--ds-accent);color:var(--ds-on-accent);font-weight:700;transition:filter 180ms ease,transform 180ms}.talk-button:hover{filter:brightness(1.04)}.talk-button:active{transform:scale(.98)}.next-character{position:absolute;bottom:20px;left:50%;translate:-50% 0;width:44px;height:44px;border:0;background:transparent;color:white;display:grid;place-items:center}.motion-toggle{position:absolute;bottom:21px;right:23px;display:grid;place-items:center;width:44px;height:44px;border:0;background:#ffffff16;color:white;border-radius:50%}.motion-toggle svg{width:18px;height:18px}.explore-status{position:absolute;left:24px;right:24px;top:116px;margin:0;padding:10px 14px;background:#101426df;color:#fff;border-radius:12px;font-size:12px;text-align:center;pointer-events:none}.explore-status:empty{display:none}.call-screen{position:absolute;inset:0;z-index:20;overflow:hidden;background:#000}.call-screen:not([hidden]){animation:call-slide 420ms var(--ds-ease)}.call-screen[data-person="루아"]{--slide-from:-100%}@keyframes call-slide{from{transform:translateX(var(--slide-from,100%))}to{transform:none}}#greeting-video{display:block;width:100%;height:100%;object-fit:cover}.end-call{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);width:66px;height:66px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--ds-danger);color:#fff;box-shadow:0 6px 22px #0005}.end-call svg{width:30px;height:30px}.end-call:hover{background:var(--ds-danger-hover)}.video-status{position:absolute;left:24px;right:24px;bottom:112px;margin:0;padding:12px;background:#000c;color:#fff;font-size:13px;text-align:center}.video-status:empty{display:none}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@supports not (backdrop-filter:blur(1px)){.version-drawer{background:var(--ds-bg)}}
.identity img { object-position: center 15%; }
@media(prefers-reduced-transparency:reduce){.version-drawer{background:var(--ds-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}


/* Storyboard p3: same full-screen visual, chat over the lower half. */
.is-chatting { touch-action: auto; }
.is-chatting .profile-area,.is-chatting .version-handle,.is-chatting .next-character,.is-chatting #previous-character,.is-chatting .explore-status { display: none; }
.is-chatting .top-controls { z-index: 8; }
.is-chatting .motion-toggle { bottom: auto; top: 112px; right: 20px; z-index: 8; }
.chat-screen { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 18px 30px; animation: chat-enter 320ms var(--ds-ease); }
.chat-log { pointer-events: auto; max-height: 43%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 14px 2px 18px; scrollbar-width: thin; scrollbar-color: #ffffff55 transparent; }
.chat-bubble { flex: none; margin: 0; padding: 12px 16px; max-width: 82%; width: fit-content; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 22px; background: var(--ds-character-bubble); color: var(--ds-bubble-text); animation: bubble-enter 220ms var(--ds-ease); }
.chat-bubble.character { align-self: flex-start; border-top-left-radius: 6px; }
.chat-bubble.user { align-self: flex-end; background: rgba(40,42,49,.94); color: #fff; border-bottom-right-radius: 6px; }
.chat-composer { pointer-events: auto; flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 7px 6px 17px; min-height: 54px; background: rgba(45,46,55,.9); border-radius: 27px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chat-composer input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; color: #fff; font: inherit; font-size: 16px; line-height: 24px; outline: none; caret-color: #fff; }
.chat-composer input::placeholder { color: #d5d5dd; }
.chat-composer:focus-within { outline: 2px solid var(--ds-focus); outline-offset: 3px; }
.chat-composer button { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 0; color: var(--ds-on-accent); background: var(--ds-accent); }
.chat-composer button:disabled { opacity: .45; cursor: default; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 16px; margin: 0 0 12px; border-radius: 20px; background: var(--ds-character-bubble); color: var(--ds-bubble-text); }
.typing>span:not(.sr-only) { width: 4px; height: 4px; background: currentColor; border-radius: 50%; animation: typing-dot 900ms infinite alternate; }.typing>span:nth-child(2){animation-delay:150ms}.typing>span:nth-child(3){animation-delay:300ms}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chat-bubble.bubble-probe { position: absolute; visibility: hidden; width: calc((100% - 40px) * .82); max-width: none; animation: none; }
@keyframes chat-enter { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes bubble-enter { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes typing-dot { to { opacity: .25; } }
@media(prefers-reduced-motion:reduce){.chat-screen,.chat-bubble,.typing>span{animation:none!important}}
@media(prefers-reduced-transparency:reduce){.chat-composer{background:#2d2e37;backdrop-filter:none}}

.visual.is-loading { opacity: 0; }

.explore-status { opacity: 1; transition: opacity 200ms ease-out; }
.explore-status.is-fading { opacity: 0; }
.flow-arrow { --flow-y: 1px; }
.flow-arrow--up { --flow-y: -1px; }
.flow-arrow path { opacity: .4; animation: arrow-flow 1500ms ease-in-out infinite; }
.flow-arrow .flow-outer { animation-delay: 220ms; }
@keyframes arrow-flow {
  0%, 65%, 100% { opacity: .4; transform: translateY(0); }
  22% { opacity: 1; transform: translateY(var(--flow-y)); }
  42% { opacity: .7; transform: translateY(var(--flow-y)); }
}
@media(prefers-reduced-motion:reduce){.flow-arrow path{animation:none;opacity:1}.explore-status{transition:none}}

.version-option.locked img { filter: blur(5px); }
.version-lock { position: absolute; bottom: 35px; left: 7px; display: grid; place-items: center; width: 24px; height: 26px; border-radius: 5px; color: var(--ds-on-accent); background: var(--ds-accent); }
.version-lock svg { width: 16px; height: 16px; }
.version-locked .visual img { filter: blur(9px); transform: scale(1.05); }
.version-locked .identity img { filter: blur(3px); }
.talk-button:disabled { display: flex; justify-content: center; align-items: center; gap: 8px; cursor: not-allowed; }
.talk-button:disabled:hover { background: var(--ds-accent); }
.talk-button:disabled svg { width: 20px; height: 20px; }
.version-list { touch-action: pan-x; }

.version-list { cursor: grab; user-select: none; }
.version-list.is-dragging,.version-list.is-dragging button { cursor: grabbing; }
.version-list img { -webkit-user-drag: none; }

/* Shared entry: one reveal after the first portrait has decoded. */
.explore .visual {
  transform: scale(1);
  transition: opacity 200ms ease-out, transform 420ms var(--ds-ease);
}
.explore .visual.is-loading {
  transform: scale(1.025);
}
@media(prefers-reduced-motion:reduce) {
  .explore .visual.is-loading { transform: none; }
}

.chat-input-row { display:flex; align-items:center; gap:10px; flex:none; }
.chat-input-row .chat-composer { flex:1; min-width:0; }
.dock-toggle,.chat-dock { display:none; }
[data-theme="subculture"] .dock-toggle { display:grid; place-items:center; flex:none; width:46px; height:46px; padding:0; border-radius:50%; border:1px solid rgba(196,181,255,.8); background:rgba(88,71,166,.65); color:#fff; pointer-events:auto; box-shadow:inset 0 1px 6px #ffffff30,0 0 12px #a292ff30; }
.dock-toggle svg { transition:transform 300ms var(--ds-ease); }
.dock-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
[data-theme="subculture"] .chat-dock { display:block; position:absolute; left:30px; right:30px; bottom:100px; z-index:3; opacity:0; visibility:hidden; transform:translateY(115px); transition:transform 340ms var(--ds-ease),opacity 220ms ease,visibility 0s linear 340ms; pointer-events:none; }
[data-theme="subculture"] .chat-dock.open { opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; pointer-events:auto; }
.chat-dock nav { display:flex; justify-content:space-around; align-items:center; padding:7px 12px; min-height:64px; border-radius:34px; border:1px solid rgba(216,207,255,.68); background:linear-gradient(145deg,rgba(193,191,245,.38),rgba(87,82,166,.30) 48%,rgba(57,43,105,.48)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 2px #ffffff60,inset 0 -2px 10px #b4a2ff28,0 5px 24px #17102a35,0 0 14px #aa90ff28; }
.chat-dock button { display:grid; place-items:center; width:46px; height:46px; padding:0; border:0; border-radius:50%; background:transparent; color:#fff; transition:background-color 180ms,transform 180ms; }
.chat-dock button:hover,.chat-dock button[aria-pressed="true"] { background:#ded7ff24; }
.chat-dock button:active { transform:scale(.94); }
.chat-dock button svg { width:25px; height:25px; filter:drop-shadow(0 0 5px #b8a0ff); }
.dock-note { margin:0 0 10px; padding:12px 16px; background:rgba(29,24,53,.88); color:#fff; border-radius:16px; font-size:13px; line-height:1.5; }
.chat-log { transition:margin-bottom 340ms var(--ds-ease); }
.dock-open .chat-log { margin-bottom:84px; }
.dock-open .typing { margin-bottom:84px; }
.dock-open:has(.typing:not([hidden])) .chat-log { margin-bottom:0; }
@media(prefers-reduced-motion:reduce) { .chat-dock,.dock-toggle svg,.chat-log { transition:none!important; } }
@media(prefers-reduced-transparency:reduce) { .chat-dock nav { background:#494164; backdrop-filter:none; -webkit-backdrop-filter:none; } .dock-toggle { background:#5847a6; } }
@supports not (backdrop-filter:blur(1px)) { .chat-dock nav { background:#494164; } }