@font-face {

  font-family: "Gloock Editorial";

  src: url("./assets/fonts/Gloock-Regular.ttf") format("truetype");

  font-style: normal;

  font-weight: 400;

  font-display: swap;

}



:root {

  --black: #070808;

  --ink: #0d0f0e;

  --panel: #121413;

  --paper: #f2efe8;

  --soft: #c4c0b8;

  --muted: #98958c;
  --dim: #76786f;
  --line: rgba(255,255,255,.105);

  --line-soft: rgba(255,255,255,.062);

  --surface: rgba(255,255,255,.048);

  --accent: #ed934c;

  --accent-soft: #f3bd88;

  --moss: #99ac76;

  --danger: #d56f56;

  --ease: cubic-bezier(.22,1,.36,1);

  --font: Inter, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

}



* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; }

html { background: var(--black); }

body { margin: 0; overflow: hidden; color: var(--paper); background: var(--black); font-family: var(--font); -webkit-font-smoothing: antialiased; }

button { color: inherit; font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; }

.noise { position: fixed; inset: 0; z-index: 100; opacity: .021; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }



.app { position: relative; width: 100vw; height: 100dvh; overflow: hidden; isolation: isolate; background: var(--black); }

.site-chrome { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 76px; padding: 0 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line-soft); background: rgba(8,9,9,.72); backdrop-filter: blur(24px); transition: opacity .55s var(--ease), transform .55s var(--ease); }

.app[data-current-layer="intro"] .site-chrome { border-bottom-color: transparent; background: transparent; backdrop-filter: none; pointer-events: none; }

.app[data-current-layer="intro"] .brand,

.app[data-current-layer="intro"] .chrome-path { opacity: 0; visibility: hidden; }

.app[data-current-layer="intro"] .chrome-actions { pointer-events: auto; }

.brand { width: max-content; display: inline-flex; align-items: center; gap: 12px; color: var(--paper); text-decoration: none; }

.brand-orb { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.025); }

.brand-orb i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 17px rgba(237,147,76,.72); }

.brand > span:last-child { display: grid; gap: 2px; }

.brand strong { font-size: 12px; letter-spacing: .15em; }

.brand small { color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .18em; }

.chrome-path { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 12px; font-weight: 720; letter-spacing: .16em; }

.chrome-path i { width: 58px; height: 1px; background: var(--line); }

.chrome-path strong { color: var(--soft); font-size: 13px; }

.chrome-actions { justify-self: end; }

.chrome-button { height: 40px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--soft); background: rgba(255,255,255,.025); cursor: pointer; font-size: 13px; font-weight: 650; transition: transform .24s var(--ease), background .24s, border-color .24s; }

.chrome-button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.065); }

.chrome-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.collapse-icon { display: none; }

.fullscreen-button.is-fullscreen .expand-icon { display: none; }

.fullscreen-button.is-fullscreen .collapse-icon { display: block; }



.layer { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.015); transition: opacity .7s var(--ease), transform .85s var(--ease), visibility 0s linear .75s; }

.layer.is-active { z-index: 5; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }



/* Layer 1 — opening */

.intro-layer { background: radial-gradient(circle at 50% 46%, #111312 0, #090a0a 38%, #060707 76%); }

.intro-enter { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; color: var(--paper); background: transparent; cursor: pointer; overflow: hidden; }

.intro-aura { position: absolute; width: min(58vw,940px); aspect-ratio: 1; left: 50%; top: 48%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(237,147,76,.075), rgba(237,147,76,.018) 38%, transparent 68%); animation: introAura 7s ease-in-out infinite; }

.intro-aura::before, .intro-aura::after { content: ""; position: absolute; inset: 15%; border: 1px solid rgba(255,255,255,.035); border-radius: 50%; }

.intro-aura::after { inset: 29%; border-color: rgba(237,147,76,.08); }

.intro-copy { position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%); display: grid; justify-items: center; gap: 6px; white-space: nowrap; }

.intro-line { display: block; color: var(--paper); font-family: "Gloock Editorial", Didot, "Times New Roman", serif; font-size: clamp(44px,5.6vw,96px); line-height: .98; letter-spacing: -.038em; font-weight: 400; opacity: 0; animation: introLine 1.35s var(--ease) forwards; }

.intro-line:nth-child(2) { animation-delay: .28s; }

.intro-line:nth-child(3) { animation-delay: .58s; }

.intro-cn { margin-top: 14px; color: var(--paper); font-family: "Songti SC", SimSun, serif; font-size: clamp(24px,2.3vw,40px); letter-spacing: .04em; font-weight: 400; }

.intro-hint { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.32); font-size: 13px; letter-spacing: .24em; animation: hintPulse 3s ease-in-out infinite; }

.intro-hint i { width: 38px; height: 1px; background: rgba(255,255,255,.13); }
.intro-tip { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0; color: rgba(255,255,255,.72); font-size: 14px; letter-spacing: .08em; }


/* Layer 2/3 — directories */

.directory-layer { padding: 118px clamp(34px,5vw,86px) 44px; background: radial-gradient(circle at 50% 36%, rgba(93,83,67,.13), transparent 38%), linear-gradient(135deg,#101110,#090a0a 72%); }

.directory-heading { position: relative; z-index: 2; margin-bottom: 34px; }

.directory-heading p { margin: 0 0 16px; color: var(--accent-soft); font-size: 12px; font-weight: 730; letter-spacing: .19em; }

.directory-heading h1 { margin: 0; font-size: clamp(44px,4.4vw,74px); line-height: .96; letter-spacing: -.055em; font-weight: 540; }

.directory-heading h1 em { color: #8f8c85; font-family: Georgia, "Songti SC", serif; font-style: normal; font-weight: 400; }

.directory-heading > span { position: absolute; left: min(34vw,520px); bottom: 7px; color: var(--muted); font-size: 14px; line-height: 1.7; }

.visual-options { position: relative; z-index: 3; height: calc(100dvh - 345px); min-height: 400px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.visual-option .option-media { display: none; }
.visual-option { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 22px; color: var(--paper); background: linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.015)); cursor: pointer; text-align: left; transition: transform .5s var(--ease), border-color .4s, background .4s, box-shadow .4s; }
.visual-option::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(5,6,6,.86),transparent 48%); pointer-events: none; }

.visual-option:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.17); background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.022)); box-shadow: 0 30px 80px rgba(0,0,0,.26); }

.option-number { position: absolute; z-index: 3; top: 22px; left: 24px; color: rgba(255,255,255,.23); font-size: 48px; line-height: 1; letter-spacing: -.06em; }

.option-media { position: absolute; inset: 5% 8% 16%; display: grid; place-items: center; }

.option-media::before { content: ""; position: absolute; width: 64%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(237,147,76,.13),transparent 70%); filter: blur(2px); }

.device-media::before { background: radial-gradient(circle,rgba(230,233,224,.12),transparent 70%); }

.option-media img { position: relative; z-index: 1; width: min(68%,460px); height: 100%; object-fit: contain; filter: drop-shadow(0 30px 36px rgba(0,0,0,.38)); transition: transform .7s var(--ease); }

.visual-option:hover .option-media img { transform: scale(1.035) rotate(-1deg); }

.option-info { position: absolute; z-index: 4; left: 26px; bottom: 24px; display: grid; gap: 5px; }

.option-info small { color: var(--muted); font-size: 12px; font-weight: 730; letter-spacing: .18em; }

.option-info strong { font-size: 22px; font-weight: 560; }

.option-info i { margin-top: 4px; color: var(--accent-soft); font-size: 12px; font-style: normal; letter-spacing: .11em; opacity: 0; transform: translateY(5px); transition: opacity .3s, transform .3s; }

.visual-option:hover .option-info i { opacity: 1; transform: none; }

.option-arrow { position: absolute; z-index: 4; right: 24px; bottom: 24px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--soft); font-size: 17px; transition: background .3s, color .3s, transform .3s; }

.visual-option:hover .option-arrow { transform: rotate(45deg); color: #1c120c; background: var(--accent); }



.style-directory { padding-top: 108px; }

.back-button { position: absolute; z-index: 4; top: 98px; right: clamp(34px,5vw,86px); height: 38px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; }

.back-button:hover { color: var(--paper); background: var(--surface); }

.back-button svg, .stage-back svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.compact-heading { margin-bottom: 42px; }

.style-options { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; height: calc(100dvh - 340px); min-height: 400px; }

.style-option { position: relative; overflow: hidden; padding: 22px; border: 1px solid var(--line-soft); border-radius: 22px; color: var(--paper); background: linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.012)); cursor: pointer; text-align: left; transition: transform .48s var(--ease), border-color .35s, background .35s, box-shadow .35s; }

.style-option:hover { transform: translateY(-7px); border-color: rgba(255,255,255,.19); background: linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.018)); box-shadow: 0 28px 72px rgba(0,0,0,.25); }

.style-index { color: rgba(255,255,255,.2); font-size: 44px; line-height: 1; letter-spacing: -.06em; }

.style-signal { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); height: 106px; display: flex; align-items: center; gap: 8px; }

.style-signal i { width: 4px; border-radius: 99px; background: linear-gradient(var(--accent-soft),var(--accent)); box-shadow: 0 0 16px rgba(237,147,76,.2); transition: height .5s var(--ease), opacity .3s; }

.signal-activation i:nth-child(1),.signal-activation i:nth-child(5){height:34px}.signal-activation i:nth-child(2),.signal-activation i:nth-child(4){height:72px}.signal-activation i:nth-child(3){height:104px}

.signal-calm i:nth-child(1),.signal-calm i:nth-child(5){height:46px}.signal-calm i:nth-child(2),.signal-calm i:nth-child(4){height:60px}.signal-calm i:nth-child(3){height:70px}

.signal-neutral i{height:58px!important;opacity:.72}

.style-option:hover .style-signal i { height: 88px; opacity: 1; }

.style-copy { position: absolute; left: 22px; right: 22px; bottom: 52px; display: grid; gap: 7px; }

.style-copy small { color: var(--accent-soft); font-size: 12px; font-weight: 730; letter-spacing: .18em; }

.style-copy strong { font-size: 21px; font-weight: 560; }

.style-copy p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.style-enter { position: absolute; left: 22px; bottom: 20px; color: var(--dim); font-size: 12px; letter-spacing: .12em; }

.style-enter b { margin-left: 7px; color: var(--accent); font-size: 13px; }



/* Layer 4 — stage */

.stage-layer { background: radial-gradient(circle at 50% 48%, #1d1813 0,#111210 35%,#090a0a 75%); }

.stage-layer[data-visual="device"] { background: radial-gradient(circle at 50% 47%,#22231f 0,#111312 35%,#090a0a 75%); }

.stage-atmosphere { position: absolute; inset: 76px 0 0; overflow: hidden; pointer-events: none; }

.stage-atmosphere > i:first-child { position: absolute; width: min(62vw,920px); aspect-ratio: 1; left: 50%; top: 49%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle,rgba(237,147,76,.13),rgba(237,147,76,.025) 47%,transparent 70%); transition: background .8s; }

.stage-layer[data-visual="device"] .stage-atmosphere > i:first-child { background: radial-gradient(circle,rgba(226,230,218,.105),rgba(137,155,118,.018) 47%,transparent 70%); }

.conversation-state { position: absolute; z-index: 15; top: 102px; left: 30px; display: flex; align-items: center; gap: 10px; }

.state-light { width: 8px; height: 8px; border-radius: 50%; background: #6d6e68; box-shadow: 0 0 0 5px rgba(255,255,255,.025); transition: background .35s, box-shadow .35s; }

.conversation-state > span:last-child { display: grid; gap: 3px; }

.conversation-state small { color: var(--dim); font-size: 12px; font-weight: 720; letter-spacing: .16em; }

.conversation-state strong { color: var(--soft); font-size: 14px; font-weight: 560; }

.round-timer {

  position: absolute; z-index: 15; top: 152px; left: 30px;

  min-width: 200px; height: 58px; padding: 0 24px;

  display: inline-flex; align-items: center; justify-content: center; gap: 8px;

  border: 1px solid var(--line); border-radius: 999px;

  color: var(--paper); background: rgba(17,19,18,.72); backdrop-filter: blur(18px);

  font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: .06em; cursor: default;

  transition: background .24s, border-color .24s, color .24s;

}

.round-timer.is-exitable { color: #171310; border-color: rgba(237,147,76,.55); background: #ed934c; cursor: pointer; box-shadow: 0 8px 24px rgba(237,147,76,.24); }

.round-timer.is-countdown { color: #ffd9d1; border-color: rgba(213,111,86,.55); background: rgba(63,27,22,.82); }

.mic-gain-control { position: absolute; z-index: 15; top: 206px; left: 30px; display: grid; gap: 10px; justify-items: start; }

.mic-gain-toggle {

  height: 36px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px;

  border: 1px solid var(--line); border-radius: 999px; color: var(--soft);

  background: rgba(17,19,18,.72); backdrop-filter: blur(18px); font-size: 14px; letter-spacing: .05em; cursor: pointer;

  transition: border-color .24s, background .24s;

}

.mic-gain-toggle:hover { border-color: rgba(255,255,255,.22); background: rgba(34,36,34,.88); }

.mic-gain-panel {

  min-width: 180px; padding: 12px 14px; display: grid; gap: 8px;

  border: 1px solid var(--line); border-radius: 14px; background: rgba(17,19,18,.82); backdrop-filter: blur(18px);

}

.mic-gain-panel label { color: var(--soft); font-size: 13px; letter-spacing: .08em; }

.mic-gain-panel label span { color: var(--accent-soft); }

.mic-gain-panel input[type="range"] { width: 100%; accent-color: var(--accent); }

.stage-layer.is-recording .state-light { background: var(--danger); box-shadow: 0 0 14px rgba(213,111,86,.7),0 0 0 5px rgba(213,111,86,.08); }

.stage-layer.is-recording .conversation-state strong { color: var(--paper); }

.stage-back { position: absolute; z-index: 15; top: 98px; right: 30px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.025); cursor: pointer; transition: color .25s,background .25s,transform .25s; }

.stage-back:hover { color: var(--paper); background: var(--surface); transform: translateX(-2px); }

.participant-locked .stage-back { display: none !important; }
.participant-locked .text-turn-bar { display: none !important; }
.participant-locked .brand { pointer-events: none; opacity: .35; }

.taskcard-button {

  position: fixed; z-index: 210; left: 20px; bottom: 82px;

  height: 46px; padding: 0 18px; display: none; align-items: center;

  border: 1px solid rgba(237,147,76,.55); border-radius: 999px;

  color: #171310; background: #ed934c; backdrop-filter: blur(14px);

  font: 600 13px/1 Inter, "Noto Sans SC", system-ui, sans-serif; letter-spacing: .06em; cursor: pointer;

  box-shadow: 0 10px 30px rgba(0,0,0,.3);

}

.participant-locked .stage-layer.is-active .taskcard-button { display: inline-flex; }

.taskcard-button:hover { background: #f3bd88; }

.taskcard-modal {

  position: fixed; z-index: 240; inset: 0; display: grid; place-items: center;

  background: rgba(5,6,6,.72); backdrop-filter: blur(10px);

}

.taskcard-modal[hidden] { display: none; }
.taskcard-modal:not([hidden]) { animation: modalIn .3s var(--ease); }
.taskcard-modal:not([hidden]) .taskcard-modal-card { animation: modalCardIn .38s var(--ease); }
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.taskcard-modal-card {
  width: min(680px, calc(100vw - 48px)); max-height: min(82vh, 760px);

  display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden;

  border: 1px solid rgba(255,255,255,.14); border-radius: 22px;

  color: var(--paper); background: rgba(17,19,18,.98);

  box-shadow: 0 42px 120px rgba(0,0,0,.65);

}

.taskcard-modal-head {

  display: flex; align-items: center; justify-content: space-between;

  padding: 16px 22px; border-bottom: 1px solid var(--line-soft);

}

.taskcard-modal-head strong { color: var(--accent-soft); font-size: 14px; letter-spacing: .12em; }

.taskcard-modal-head button {

  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;

  color: var(--soft); background: transparent; font-size: 20px; cursor: pointer;

}

.taskcard-modal-head button:hover { color: var(--paper); background: var(--surface); }

.taskcard-modal-body { padding: 22px 26px; overflow-y: auto; }

.taskcard-modal-body p {

  margin: 0; color: var(--paper); font-size: 16px; line-height: 1.9; white-space: pre-wrap;

}

.stage-title { position: absolute; z-index: 14; top: 100px; left: 50%; transform: translateX(-50%); width: min(72vw,720px); text-align: center; pointer-events: none; display: none; }
.stage-title p { margin: 0 0 9px; color: var(--accent-soft); font-size: 12px; font-weight: 730; letter-spacing: .2em; }

.stage-title h1 { margin: 0; font-size: clamp(24px,2.2vw,36px); letter-spacing: -.035em; font-weight: 500; }

.model-mount { position: absolute; z-index: 4; left: 50%; top: 52%; width: min(70vw,980px); height: min(70vh,720px); transform: translate(-50%,-50%); cursor: grab; touch-action: none; user-select: none; }

.model-mount.is-dragging { cursor: grabbing; }

#webglCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; filter: drop-shadow(0 44px 42px rgba(0,0,0,.34)); transition: opacity .7s var(--ease); }

.model-mount[data-render-ready="true"] #webglCanvas { opacity: 1; }

.model-preview { position: absolute; inset: 7%; display: grid; place-items: center; opacity: .8; transition: opacity .5s var(--ease),transform .7s var(--ease); }
.model-preview { display: none !important; }
.model-mount[data-render-ready="true"] .model-preview { opacity: 0; transform: scale(.97); }

.preview-image { position: absolute; width: min(45%,440px); height: min(72%,540px); object-fit: contain; filter: drop-shadow(0 35px 40px rgba(0,0,0,.42)); transition: opacity .5s var(--ease),transform .7s var(--ease); }

.preview-device { opacity: 0; transform: translateY(12px) scale(.96); }

.preview-practice { opacity: 0; transform: translateY(12px) scale(.96); }

.stage-layer[data-visual="device"] .preview-tree { opacity: 0; transform: translateY(-12px) scale(.96); }

.stage-layer[data-visual="device"] .preview-device { opacity: 1; transform: none; }

.stage-layer[data-visual="practice"] .preview-tree { opacity: 0; transform: translateY(-12px) scale(.96); }

.stage-layer[data-visual="practice"] .preview-practice { opacity: 1; transform: none; }

.asset-status { position: absolute; right: 11%; bottom: 5%; width: 205px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .15em; }

.asset-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(237,147,76,.6); }

.load-track { grid-column: 1/-1; height: 1px; background: rgba(255,255,255,.08); }

.load-track i { display: block; width: 6%; height: 100%; background: linear-gradient(90deg,var(--accent),var(--accent-soft)); transition: width .2s; }

.model-mount[data-render-ready="true"] .load-track i { width: 100%; }

.model-gesture-hint { position: absolute; left: 11%; bottom: 5%; display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .15em; opacity: .72; transition: opacity .3s; }

.model-gesture-hint svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.model-mount:hover .model-gesture-hint,

.model-mount.is-dragging .model-gesture-hint { color: var(--soft); opacity: 1; }

.record-control { position: absolute; z-index: 16; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 9px; }

.subtitle-bar {
  position: absolute; z-index: 18; left: 30px; bottom: 122px;
  max-width: min(54vw, 700px); padding: 13px 20px; border-radius: 12px;

  color: var(--paper); background: rgba(7,8,8,.72); backdrop-filter: blur(14px);

  border: 1px solid rgba(255,255,255,.08); text-align: left;

  font-size: clamp(16px, 1.7vw, 23px); line-height: 1.5; letter-spacing: .04em;

  pointer-events: none; white-space: pre-wrap;
}
.subtitle-bar:not([hidden]) { animation: subtitleIn .42s var(--ease); }
@keyframes subtitleIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.text-turn-bar {
  position: absolute; z-index: 19; right: 22px; bottom: 26px;
  display: flex; gap: 8px; align-items: center;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: rgba(7,8,8,.72); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.1);
}
.text-turn-bar input {
  width: clamp(180px, 24vw, 340px); background: transparent; border: 0; outline: 0;
  color: var(--paper); font-size: 14px; letter-spacing: .02em;
}
.text-turn-bar input::placeholder { color: rgba(255,255,255,.42); }
.text-turn-bar button {
  border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer;
  background: var(--accent, #ed934c); color: #12120f; font-weight: 700; font-size: 13px;
  transition: filter .25s, transform .2s;
}
.text-turn-bar button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.record-button { position: relative; width: 96px; height: 96px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; background: rgba(14,16,15,.78); backdrop-filter: blur(16px); cursor: pointer; transition: transform .3s var(--ease),border-color .3s,background .3s; }
.record-button:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.3); }

.record-core { position: relative; z-index: 3; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#2a2b28,#181a18); box-shadow: inset 0 1px rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.25); transition: background .35s,box-shadow .35s; }

.record-core svg { width: 26px; fill: none; stroke: var(--soft); stroke-width: 1.5; stroke-linecap: round; transition: opacity .25s; }

.record-core i { position: absolute; width: 13px; height: 13px; border-radius: 4px; background: #fff0e4; opacity: 0; transform: scale(.6); transition: opacity .3s,transform .3s; }

.record-ripple { position: absolute; inset: 0; border: 1px solid rgba(213,111,86,.35); border-radius: 50%; opacity: 0; }

.stage-layer.is-recording .record-button { border-color: rgba(213,111,86,.55); background: rgba(63,27,21,.52); }

.stage-layer.is-recording .record-core { background: linear-gradient(145deg,#d87861,#a74334); box-shadow: 0 0 30px rgba(213,111,86,.35),inset 0 1px rgba(255,255,255,.18); animation: recordCoreBreath 2.2s ease-in-out infinite; }

.stage-layer.is-recording .record-core svg { opacity: 0; }

.stage-layer.is-recording .record-core i { opacity: 1; transform: none; }

.stage-layer.is-recording .record-ripple { animation: recordRipple 2.2s ease-out infinite; }

.stage-layer.is-recording .ripple-two { animation-delay: 1.05s; }

.record-copy { display: grid; justify-items: center; gap: 3px; }

.record-copy strong { color: var(--soft); font-size: 13px; font-weight: 570; }

.record-copy small { min-height: 9px; color: var(--dim); font-size: 12px; letter-spacing: .12em; }

.stage-layer.is-recording .record-copy strong { color: #f0c6b9; }

.stage-layer.is-recording .record-copy small { color: var(--danger); }

.chat-toggle { position: absolute; z-index: 16; right: 28px; top: 50%; transform: translateY(-50%); min-height: 52px; padding: 0 15px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 16px; color: var(--soft); background: rgba(17,19,18,.72); backdrop-filter: blur(18px); cursor: pointer; font-size: 13px; transition: transform .3s var(--ease),background .3s,border-color .3s,opacity .3s; }

.chat-toggle:hover { transform: translateY(-50%) translateX(-4px); border-color: rgba(255,255,255,.2); background: rgba(34,36,34,.88); }

.chat-toggle svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.chat-toggle i { min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; color: #21140c; background: var(--accent); font-size: 12px; font-style: normal; }

.app.chat-open .chat-toggle { opacity: 0; pointer-events: none; }

.archive-toggle { position: absolute; z-index: 16; left: 28px; top: 50%; min-height: 58px; padding: 8px 14px 8px 8px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 17px; color: var(--soft); background: rgba(17,19,18,.72); backdrop-filter: blur(18px); cursor: pointer; text-align: left; transform: translateY(-50%); transition: transform .3s var(--ease),background .3s,border-color .3s,opacity .3s; }

.archive-toggle:hover { transform: translateY(-50%) translateX(4px); border-color: rgba(255,255,255,.2); background: rgba(34,36,34,.88); }

.archive-toggle-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,.035); }

.archive-toggle svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.archive-toggle > span:last-child { display: grid; gap: 2px; }

.archive-toggle small { color: var(--dim); font-size: 12px; font-weight: 720; letter-spacing: .14em; }

.archive-toggle strong { font-size: 13px; font-weight: 580; }

.app.archive-open .archive-toggle { opacity: 0; pointer-events: none; }



/* Read-only chat drawer */

.drawer-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.34); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s,visibility 0s linear .45s; }

.chat-drawer { position: fixed; z-index: 60; top: 14px; right: 14px; bottom: 14px; width: min(450px,calc(100vw - 28px)); display: grid; grid-template-rows: 82px auto minmax(0,1fr) 46px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; overflow: hidden; background: rgba(16,18,17,.96); box-shadow: -28px 0 90px rgba(0,0,0,.42); backdrop-filter: blur(28px); transform: translateX(calc(100% + 28px)); visibility: hidden; transition: transform .58s var(--ease),visibility 0s linear .6s; }

.app.chat-open .chat-drawer { transform: none; visibility: visible; transition-delay: 0s; }

.drawer-head { padding: 0 18px; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--line-soft); }

.drawer-avatar { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,#2c2d29,#171917); }

.drawer-avatar i { width: 11px; height: 11px; border: 1px solid var(--accent-soft); border-radius: 50%; box-shadow: 0 0 12px rgba(237,147,76,.45); }

.drawer-head small { color: var(--dim); font-size: 12px; font-weight: 720; letter-spacing: .16em; }

.drawer-head h2 { margin: 3px 0 0; font-size: 14px; font-weight: 580; }

.drawer-online { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }

.drawer-online i { width: 5px; height: 5px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 9px rgba(153,172,118,.6); }

.drawer-close { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }

.drawer-close:hover { color: var(--paper); background: var(--surface); }

.drawer-close svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.drawer-note { margin: 17px 18px 3px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255,255,255,.02); }

.drawer-note span { color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .12em; }

.drawer-note p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.chat-history { overflow-y: auto; overscroll-behavior: contain; padding: 20px 18px 24px; scrollbar-width: thin; scrollbar-color: #393b37 transparent; }

.chat-history::-webkit-scrollbar { width: 5px; }

.chat-history::-webkit-scrollbar-track { background: transparent; }

.chat-history::-webkit-scrollbar-thumb { border-radius: 999px; background: #3b3d39; }

.chat-history::-webkit-scrollbar-thumb:hover { background: #555851; }

.chat-message { max-width: 84%; margin-bottom: 17px; display: grid; gap: 6px; }

.chat-message p { margin: 0; padding: 13px 14px; border: 1px solid var(--line-soft); font-size: 14px; line-height: 1.65; }

.chat-message time { padding: 0 4px; color: #50524d; font-size: 12px; }

.chat-message.assistant { margin-right: auto; }

.chat-message.assistant p { border-radius: 5px 15px 15px 15px; color: #d1cdc5; background: rgba(255,255,255,.052); }

.chat-message.user { margin-left: auto; justify-items: end; }

.chat-message.user p { border-color: transparent; border-radius: 15px 5px 15px 15px; color: #211d18; background: linear-gradient(135deg,#f0ece4,#d9ccbd); }

.drawer-footer { padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); color: var(--dim); font-size: 12px; letter-spacing: .12em; }

.drawer-footer span:first-child { display: flex; align-items: center; gap: 6px; }

.drawer-footer i { width: 5px; height: 5px; border-radius: 50%; background: #73756f; }



/* Game-style local session archive */

.archive-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(3,4,4,.72); opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: blur(10px); transition: opacity .45s,visibility 0s linear .45s; }

.archive-modal { position: fixed; z-index: 80; left: 50%; top: 50%; width: min(1040px,calc(100vw - 44px)); height: min(720px,calc(100dvh - 44px)); display: grid; grid-template-rows: 82px minmax(0,1fr) 48px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; color: var(--paper); background: linear-gradient(145deg,rgba(24,27,25,.985),rgba(10,12,11,.99)); box-shadow: 0 42px 120px rgba(0,0,0,.65); opacity: 0; visibility: hidden; transform: translate(-50%,-47%) scale(.965); transition: opacity .38s,transform .58s var(--ease),visibility 0s linear .58s; }

.app.archive-open .archive-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

.app.archive-open .archive-modal { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); transition-delay: 0s; }

.archive-head { padding: 0 22px; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 13px; border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,.018); }

.archive-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(237,147,76,.28); border-radius: 14px; background: radial-gradient(circle,rgba(237,147,76,.14),transparent 70%); }

.archive-mark span { width: 13px; height: 13px; border: 1px solid var(--accent-soft); border-radius: 3px; transform: rotate(45deg); box-shadow: 0 0 15px rgba(237,147,76,.28); }

.archive-head small { color: var(--dim); font-size: 12px; font-weight: 720; letter-spacing: .17em; }

.archive-head h2 { margin: 4px 0 0; font-size: 18px; font-weight: 560; letter-spacing: -.02em; }

.archive-head-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }

.archive-head-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 9px rgba(153,172,118,.55); }

.archive-close { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; transition: color .25s,background .25s,border-color .25s; }

.archive-close:hover { color: var(--paper); border-color: var(--line); background: var(--surface); }

.archive-close svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.archive-body { min-height: 0; display: grid; grid-template-columns: 316px minmax(0,1fr); }

.archive-slot-panel { min-height: 0; padding: 20px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 14px; border-right: 1px solid var(--line-soft); background: rgba(0,0,0,.12); }

.archive-section-label { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; }

.archive-section-label span { color: var(--soft); font-weight: 620; }

.archive-section-label small { color: var(--dim); font-size: 12px; letter-spacing: .16em; }

.archive-slots { min-height: 0; display: grid; align-content: start; gap: 9px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3c3e3a transparent; }

.archive-slot { width: 100%; min-height: 92px; padding: 12px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--line-soft); border-radius: 15px; color: var(--soft); background: rgba(255,255,255,.018); cursor: pointer; text-align: left; transition: border-color .28s,background .28s,transform .28s var(--ease); }

.archive-slot:hover { transform: translateX(3px); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.035); }

.archive-slot.is-selected { border-color: rgba(237,147,76,.45); background: linear-gradient(110deg,rgba(237,147,76,.1),rgba(255,255,255,.025)); box-shadow: inset 3px 0 var(--accent); }

.archive-slot-index { width: 38px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 10px; color: var(--dim); background: rgba(0,0,0,.18); font-family: "Gloock Editorial",serif; font-size: 20px; }

.archive-slot.is-selected .archive-slot-index { color: var(--accent-soft); border-color: rgba(237,147,76,.24); }

.archive-slot-copy { min-width: 0; display: grid; gap: 4px; }

.archive-slot-copy small { color: var(--dim); font-size: 12px; font-weight: 720; letter-spacing: .14em; }

.archive-slot-copy strong { overflow: hidden; color: var(--soft); font-size: 13px; font-weight: 570; white-space: nowrap; text-overflow: ellipsis; }

.archive-slot-copy time { color: #666861; font-size: 12px; }

.archive-slot-state { align-self: start; padding: 4px 6px; border: 1px solid var(--line-soft); border-radius: 999px; color: var(--dim); font-size: 5px; font-weight: 750; letter-spacing: .1em; }

.archive-slot.has-save .archive-slot-state { color: var(--moss); border-color: rgba(153,172,118,.2); }

.archive-slot-help { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.65; }

.archive-detail { min-width: 0; min-height: 0; padding: 22px 24px 20px; display: grid; grid-template-columns: minmax(250px,1.05fr) minmax(230px,.95fr); grid-template-rows: minmax(230px,1fr) auto auto; gap: 18px 24px; overflow-y: auto; }

.archive-preview { position: relative; min-height: 250px; grid-row: 1/3; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 18px; background: radial-gradient(circle at 50% 48%,rgba(237,147,76,.12),transparent 47%),#0b0d0c; }

.archive-preview-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom,black,transparent 90%); }

.archive-preview img { position: absolute; inset: 9% 12%; width: 76%; height: 82%; object-fit: contain; filter: drop-shadow(0 28px 26px rgba(0,0,0,.45)); transition: opacity .3s,transform .45s var(--ease); }

.archive-condition { position: absolute; top: 14px; left: 14px; min-width: 40px; height: 28px; padding: 0 9px; display: grid; place-items: center; border: 1px solid rgba(237,147,76,.28); border-radius: 9px; color: var(--accent-soft); background: rgba(8,9,9,.75); font-size: 12px; font-weight: 730; letter-spacing: .12em; }

.archive-preview-state { position: absolute; right: 14px; bottom: 13px; display: flex; align-items: center; gap: 7px; color: var(--dim); font-size: 12px; font-weight: 720; letter-spacing: .12em; }

.archive-preview-state i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(237,147,76,.55); }

.archive-detail-copy { align-self: end; }

.archive-detail-copy p { margin: 0 0 9px; color: var(--accent-soft); font-size: 12px; font-weight: 730; letter-spacing: .17em; }

.archive-detail-copy h3 { margin: 0; font-size: clamp(24px,2.4vw,38px); line-height: 1.05; letter-spacing: -.045em; font-weight: 520; }

.archive-detail-copy > span { display: block; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }

.archive-metadata { margin: 0; align-self: start; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }

.archive-metadata div { min-width: 0; padding: 11px 12px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.archive-metadata dt { color: var(--dim); font-size: 12px; font-weight: 720; letter-spacing: .12em; }

.archive-metadata dd { margin: 5px 0 0; overflow: hidden; color: var(--soft); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }

.archive-actions { grid-column: 1/-1; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 9px; }

.archive-action { min-height: 58px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-soft); border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.018); cursor: pointer; text-align: left; transition: color .25s,border-color .25s,background .25s,transform .25s var(--ease); }

.archive-action:hover:not(:disabled) { transform: translateY(-2px); color: var(--paper); border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.04); }

.archive-action.primary { color: #2a1a10; border-color: rgba(237,147,76,.5); background: linear-gradient(135deg,#f1b174,#d98343); }

.archive-action.primary:hover:not(:disabled) { color: #1c110b; background: linear-gradient(135deg,#ffc68c,#e59150); }

.archive-action.danger:hover:not(:disabled),.archive-action.danger.is-confirming { color: #e5a090; border-color: rgba(213,111,86,.38); background: rgba(213,111,86,.08); }

.archive-action:disabled { opacity: .32; cursor: not-allowed; }

.archive-action svg { flex: 0 0 auto; width: 18px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }

.archive-action span { display: grid; gap: 3px; }

.archive-action small { font-size: 5px; font-weight: 720; letter-spacing: .12em; opacity: .72; }

.archive-action strong { font-size: 13px; font-weight: 620; }

.archive-footer { padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); color: var(--dim); font-size: 12px; letter-spacing: .08em; }

.archive-footer span:first-child { display: flex; align-items: center; gap: 7px; }

.archive-footer i { width: 5px; height: 5px; border-radius: 50%; background: var(--moss); }

.archive-toast { position: absolute; left: 50%; bottom: 59px; max-width: calc(100% - 40px); padding: 10px 14px; border: 1px solid rgba(237,147,76,.26); border-radius: 11px; color: var(--paper); background: rgba(20,22,20,.96); box-shadow: 0 14px 40px rgba(0,0,0,.35); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%,10px); transition: opacity .28s,transform .38s var(--ease); }

.archive-toast.is-visible { opacity: 1; transform: translate(-50%,0); }



@keyframes introLine { from { opacity:0; transform:translateY(22px); filter:blur(8px) } to { opacity:1; transform:none; filter:none } }

@keyframes introAura { 50% { transform:translate(-50%,-50%) scale(1.06); opacity:.72 } }

@keyframes hintPulse { 50% { opacity:.42 } }

@keyframes recordCoreBreath { 50% { transform:scale(.91); box-shadow:0 0 45px rgba(213,111,86,.48),inset 0 1px rgba(255,255,255,.18) } }

@keyframes recordRipple { 0% { transform:scale(.78); opacity:0 } 24% { opacity:.7 } 100% { transform:scale(1.65); opacity:0 } }



html:fullscreen .app { height: 100dvh; }



@media (max-width: 980px) {

  .site-chrome { padding-inline: 18px; }

  .chrome-path { display: none; }

  .site-chrome { grid-template-columns: 1fr auto; }

  .directory-heading > span { display: none; }

  .visual-options { height: calc(100dvh - 330px); }

  .style-options { grid-template-columns: 1fr; height: auto; overflow-y: auto; padding-bottom: 30px; }

  .style-option { min-height: 210px; }

  .style-signal { top: 48%; }

  .model-mount { width: 92vw; }

  .archive-modal { width: calc(100vw - 24px); height: calc(100dvh - 24px); }

  .archive-body { grid-template-columns: 270px minmax(0,1fr); }

  .archive-detail { grid-template-columns: 1fr; grid-template-rows: 240px auto auto auto; }

  .archive-preview { grid-row: auto; }

  .archive-actions { grid-column: auto; grid-template-columns: 1fr; }

}



@media (max-width: 680px) {

  .site-chrome { height: 66px; }

  .brand small, .fullscreen-button span { display: none; }

  .fullscreen-button { width: 40px; padding: 0; justify-content: center; }

  .directory-layer { padding: 94px 16px 20px; overflow-y: auto; }

  .directory-layer::before { display: none; }

  .directory-heading { margin-bottom: 24px; }

  .directory-heading h1 { font-size: 44px; }

  .visual-options { height: auto; min-height: 0; grid-template-columns: 1fr; }

  .visual-option { min-height: 330px; }

  .back-button { top: 86px; right: 16px; }

  .style-directory { padding-top: 150px; }

  .compact-heading { margin-bottom: 28px; }

  .style-option { min-height: 230px; }

  .conversation-state { top: 86px; left: 16px; }

  .round-timer { top: 142px; left: 16px; }

  .mic-gain-control { top: 212px; left: 16px; }

  .feedback-layer, .debrief-layer { padding-top: 40px; }

  .stage-back { top: 82px; right: 16px; }

  .stage-title { top: 146px; width: 90vw; }

  .model-mount { top: 53%; width: 120vw; height: 62vh; }

  .preview-image { width: 54%; }

  .asset-status { display: none; }

  .model-gesture-hint { display: none; }

  .record-control { bottom: 24px; }

  .chat-toggle { right: 12px; top: auto; bottom: 34px; min-width: 52px; padding-inline: 15px; }

  .chat-toggle span { display: none; }

  .subtitle-bar { left: 16px; bottom: 112px; max-width: 88vw; font-size: 16px; }

  .archive-toggle { left: 12px; top: auto; bottom: 34px; min-width: 52px; padding: 7px; transform: none; }

  .archive-toggle:hover { transform: translateY(-3px); }

  .archive-toggle > span:last-child { display: none; }

  .chat-drawer { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); }

  .app.chat-open .drawer-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

  .archive-modal { top: 8px; bottom: 8px; left: 8px; width: calc(100vw - 16px); height: auto; grid-template-rows: 72px minmax(0,1fr) 42px; border-radius: 20px; transform: translateY(14px) scale(.98); }

  .app.archive-open .archive-modal { transform: none; }

  .archive-head { padding-inline: 14px; }

  .archive-head-status { display: none; }

  .archive-body { grid-template-columns: 1fr; overflow-y: auto; }

  .archive-slot-panel { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--line-soft); }

  .archive-detail { overflow: visible; padding: 18px 16px; }

  .archive-footer { padding-inline: 14px; }

  .archive-footer span:last-child { display: none; }

}



@media (prefers-reduced-motion: reduce) {

  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }

}



/* 目录 0：体验方式选择 */

.mode-options {

  position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 22px;

  max-width: 920px; margin: 0 auto;

}

.mode-option {

  display: flex; align-items: center; gap: 18px; padding: 26px 24px; text-align: left;

  border: 1px solid var(--line); border-radius: 20px; color: var(--paper);

  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));

  cursor: pointer; transition: transform .3s var(--ease), border-color .3s, background .3s;

}

.mode-option:hover { transform: translateY(-2px); border-color: rgba(237,147,76,.45); background: rgba(255,255,255,.07); }

.mode-number { font-family: "Gloock Editorial", Didot, serif; font-size: 30px; color: var(--accent); }

.mode-info { flex: 1; display: grid; gap: 4px; }

.mode-info small { color: var(--muted); font-size: 12px; letter-spacing: .2em; }

.mode-info strong { font-size: 18px; font-weight: 550; }

.mode-info p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.mode-arrow { color: var(--soft); font-size: 12px; white-space: nowrap; }

.mode-arrow b { color: var(--accent); }



/* 被试信息填写 */

.intake-form, .feedback-form {

  position: relative; z-index: 2; max-width: 520px; margin: 0 auto; display: grid; gap: 16px;

}

.intake-field, .feedback-comment { display: grid; gap: 8px; color: var(--soft); font-size: 12px; }

.intake-field input, .feedback-comment textarea {

  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px;

  color: var(--paper); background: rgba(255,255,255,.045); font: inherit; font-size: 14px; outline: none;

  transition: border-color .24s, background .24s;

}

.intake-field input:focus, .feedback-comment textarea:focus { border-color: rgba(237,147,76,.55); background: rgba(255,255,255,.07); }

.intake-error, .feedback-error { margin: 0; color: var(--danger); font-size: 12px; }

.intake-form button, .feedback-form button, .overview-actions button, .ready-actions button {

  height: 50px; border: 1px solid rgba(237,147,76,.38); border-radius: 12px;

  color: #171310; background: var(--accent); font: inherit; font-weight: 700; letter-spacing: .12em; cursor: pointer;

  transition: transform .24s var(--ease), background .24s;

}

.intake-form button:hover, .feedback-form button:hover, .overview-actions button:hover, .ready-actions button:hover {

  transform: translateY(-1px); background: var(--accent-soft);

}

.intake-reset {

  height: 46px; border: 1px solid var(--line); border-radius: 12px;

  color: var(--soft); background: rgba(255,255,255,.04); font: inherit; font-size: 13px; cursor: pointer;

  transition: border-color .24s, background .24s;

}

.intake-reset:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); }



/* 问卷引擎 */

.feedback-layer, .debrief-layer {

  padding-top: 58px;

  padding-bottom: 32px;
  padding-bottom: 32px;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  align-items: center;

}

.feedback-layer .directory-heading, .debrief-layer .directory-heading {

  width: min(760px, 100%);

  margin-bottom: 20px;

}

.feedback-layer .directory-heading h1, .debrief-layer .directory-heading h1 {

  font-size: clamp(26px, 3vw, 42px);

}

.feedback-layer .directory-heading p, .debrief-layer .directory-heading p {

  margin-bottom: 10px;

}

.feedback-layer .directory-heading > span, .debrief-layer .directory-heading > span {

  position: static;

  display: block;

  margin-top: 8px;

}

#vasGroupLayer, #vasPreLayer { justify-content: center; padding-top: 40px; }
#vasGroupLayer .directory-heading, #vasPreLayer .directory-heading { margin-bottom: 14px; }
#gad7Layer { padding-top: 112px; }

.questionnaire-form { max-width: 760px; width: 100%; }
.questionnaire-body {

  display: grid; gap: 14px; max-height: 58vh; overflow-y: auto;

  padding-right: 8px; scrollbar-width: thin;

}

.q-section { margin: 16px 0 2px; color: var(--accent-soft); font-size: 12px; font-weight: 650; letter-spacing: .1em; }

.q-group { display: grid; gap: 10px; }

.q-item {

  padding: 14px 16px; display: grid; gap: 10px;

  border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255,255,255,.03);

}

.q-text { color: var(--paper); font-size: 14px; line-height: 1.5; }

.q-options { display: flex; flex-wrap: wrap; gap: 8px; }

.q-options label {

  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;

  border: 1px solid var(--line); border-radius: 999px; color: var(--soft); font-size: 12px; cursor: pointer;

}

.q-options input { accent-color: var(--accent); }

.q-item textarea {

  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;

  color: var(--paper); background: rgba(255,255,255,.045); font: inherit; font-size: 13px; resize: vertical;

}

/* VAS 滑动条（0-100，28px 大滑块，黑底橙色强调） */
.vas-slider { display: grid; gap: 10px; padding: 6px 0; }
.vas-slider input[type="range"] {
  width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.vas-slider input[type="range"]:focus { outline: none; }
.vas-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: rgba(255,255,255,.14);
}
.vas-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px;
  border-radius: 50%; background: var(--accent); border: 2px solid #171310;
  box-shadow: 0 0 16px rgba(237,147,76,.55);
}
.vas-slider input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px; background: rgba(255,255,255,.14);
}
.vas-slider input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
  border: 2px solid #171310; box-shadow: 0 0 16px rgba(237,147,76,.55);
}
.vas-value { color: var(--accent); font-size: 24px; font-weight: 700; text-align: center; }

.debrief-thanks { text-align: center; color: var(--paper); padding: 30px 0; }
.debrief-thanks h2 { margin: 0 0 12px; font-family: "Songti SC", SimSun, serif; font-size: 30px; font-weight: 400; }

.debrief-thanks p { margin: 6px 0; color: var(--muted); font-size: 13px; }



/* 任务卡与预实验提示 */

.task-card {

  position: relative; z-index: 2; max-width: 720px; margin: 0 auto 24px; padding: 22px 24px;

  border: 1px solid rgba(237,147,76,.3); border-radius: 18px;

  background: rgba(237,147,76,.05); color: var(--paper);

}

.task-cards { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }

.task-label { margin: 0 0 12px; color: var(--accent-soft); font-size: 13px; font-weight: 700; letter-spacing: .18em; }

.task-text { margin: 0; font-size: 17px; line-height: 1.9; color: var(--soft); }

.task-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(237,147,76,.22); color: var(--accent-soft); font-size: 13px; line-height: 1.7; }
.task-hint { margin: 0; color: var(--muted); font-size: 12px; }
.practice-hint {

  position: absolute; z-index: 18; left: 50%; bottom: 158px; transform: translateX(-50%);

  max-width: min(72vw, 680px); padding: 10px 18px; border-radius: 12px;

  color: var(--paper); background: rgba(237,147,76,.12); border: 1px solid rgba(237,147,76,.35);

  font-size: 13px; text-align: center; pointer-events: none;

}

.practice-hint p { margin: 0; line-height: 1.6; }



/* 被试会话序列 */

.sequence-list {

  position: relative; z-index: 2; max-width: 640px; margin: 0 auto 26px;

  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;

}

.sequence-item {

  padding: 16px; text-align: center; border: 1px solid var(--line); border-radius: 14px;

  background: rgba(255,255,255,.04);

}

.sequence-item span { display: block; color: var(--accent); font-family: "Gloock Editorial", Didot, serif; font-size: 22px; }

.sequence-item strong { margin-top: 4px; display: block; color: var(--soft); font-size: 12px; letter-spacing: .08em; }

.overview-actions, .ready-actions {

  position: relative; z-index: 2; max-width: 640px; margin: 0 auto; text-align: center;

  display: grid; gap: 14px; justify-items: center;

}

.overview-actions p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.overview-actions button, .ready-actions button { min-width: 240px; }



/* 被试反馈 */

.feedback-fieldset { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0; }

.feedback-fieldset legend { padding: 0 8px; color: var(--soft); font-size: 13px; }

.feedback-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.feedback-options label {

  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;

  border: 1px solid var(--line); border-radius: 999px; color: var(--soft); font-size: 12px; cursor: pointer;

}

.feedback-options input { accent-color: var(--accent); }

.feedback-form button { margin-top: 4px; }



/* 收束页 */

.debrief-note { position: relative; z-index: 2; text-align: center; color: var(--muted); font-size: 13px; }



@media (max-width: 760px) {

  .mode-options { grid-template-columns: 1fr; }

  .sequence-list { grid-template-columns: repeat(2, 1fr); }
}

/* 正式任务卡页：正文整体上移，让上下留白更均衡 */
.ready-layer .directory-heading { margin-bottom: 12px; }
.ready-layer .task-cards { margin-top: -60px; }

/* 基线问卷页：整体下移，避免顶部过挤 */
#baselineLayer { padding-top: 104px; }

/* 正在识别提示（ASR 长录音防护 v38） */
.processing-hint {

  position: absolute; z-index: 18; left: 50%; bottom: 126px; transform: translateX(-50%);

  max-width: min(72vw, 480px); padding: 10px 18px; border-radius: 12px;

  color: var(--paper); background: rgba(237,147,76,.12); border: 1px solid rgba(237,147,76,.35);

  font-size: 13px; text-align: center; pointer-events: none;

}