:root {
  color-scheme:dark;
  --night:#071522;
  --night-soft:#0d2234;
  --paper:#f4ecdc;
  --paper-soft:#fffaf0;
  --ink:#142538;
  --gold:#d9b66f;
  --gold-deep:#a87835;
  --muted:#8393a0;
  --line:rgba(217,182,111,.34);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

* { box-sizing:border-box; }
html { width:100%; max-width:100%; overflow:hidden; background:#020a12; -webkit-text-size-adjust:100%; text-size-adjust:100%; touch-action:manipulation; }
body { width:100%; max-width:100%; min-height:100%; margin:0; overflow:hidden; color:#fff; background:#020a12; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
img { max-width:100%; }
[hidden] { display:none!important; }

.concept-player {
  position:relative;
  width:min(100%,480px);
  height:100dvh;
  min-height:520px;
  margin:0 auto;
  overflow:hidden;
  background:var(--paper) url("../ai-magic-radio-short/assets/ui/paper-texture.jpg") repeat;
  box-shadow:0 0 70px rgba(0,0,0,.52);
}

.speaker-header {
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  display:grid;
  width:100%;
  min-height:126px;
  padding:calc(15px + var(--safe-top)) 16px 13px;
  grid-template-columns:58px minmax(0,1fr) 46px;
  gap:12px;
  align-items:center;
  color:#fffdf7;
  background:var(--night) url("../ai-magic-radio-short/assets/ui/radio-texture.jpg") center/cover;
  border-bottom:1px solid rgba(217,182,111,.68);
}
.speaker-header>img { width:58px; height:58px; border:1px solid var(--gold); border-radius:14px; object-fit:cover; }
.speaker-main { min-width:0; }
.speaker-main>small { display:block; color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.08em; }
.speaker-main h1 { margin:4px 0 7px; overflow:hidden; color:#fffdf7; font:650 clamp(17px,4.9vw,22px)/1.3 "Songti SC","STSong",serif; white-space:nowrap; text-overflow:ellipsis; }
.voice-wave { width:100%; height:28px; overflow:hidden; border-left:1px solid rgba(217,182,111,.58); }
.voice-wave canvas { display:block; width:100%; height:28px; }
.sound-toggle { width:44px; height:44px; padding:0; border:1px solid rgba(217,182,111,.42); border-radius:50%; color:var(--gold); background:rgba(6,20,32,.78); font-size:10px; font-weight:800; }
.header-progress { position:absolute; right:0; bottom:0; left:0; height:3px; background:rgba(255,255,255,.1); }
.header-progress span { display:block; width:0; height:100%; background:var(--gold); transition:width .2s linear; }

.reveal-stage {
  position:absolute;
  top:calc(126px + var(--safe-top));
  right:0;
  bottom:calc(112px + var(--safe-bottom));
  left:0;
  display:flex;
  min-height:0;
  padding:14px 16px 12px;
  flex-direction:column;
  overflow:hidden;
}
.artifact-feed { width:100%; min-height:0; flex:1; display:flex; padding:0 0 16px; flex-direction:column; gap:16px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; scroll-snap-type:y proximity; scrollbar-width:thin; scrollbar-color:rgba(168,120,53,.45) transparent; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.artifact-feed::-webkit-scrollbar { width:4px; }
.artifact-feed::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(168,120,53,.45); }
.artifact-entry { width:100%; min-height:100%; flex:0 0 auto; display:grid; padding:1px 0 8px; place-items:center; scroll-snap-align:start; }
.artifact-card { width:100%; max-width:390px; overflow:hidden; border:1px solid rgba(168,120,53,.5); background:var(--paper-soft); box-shadow:0 18px 40px rgba(72,47,18,.16); animation:artifact-in .5s cubic-bezier(.2,.72,.2,1) both; }
.latest-artifact { position:absolute; z-index:12; right:21px; bottom:18px; min-height:38px; padding:0 13px; border:1px solid rgba(217,182,111,.7); border-radius:999px; color:#fff; background:rgba(7,21,34,.94); box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:10px; font-weight:800; }
@keyframes artifact-in { from{opacity:0;transform:translateY(16px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

.opening-visual { position:relative; padding:29px 22px 26px; text-align:left; }
.opening-visual::before { display:block; width:42px; height:3px; margin-bottom:20px; background:var(--gold-deep); content:""; }
.opening-visual small,.artifact-kicker { color:#8f6935; font-size:9px; font-weight:800; letter-spacing:.14em; }
.opening-visual h2 { margin:9px 0 13px; color:var(--ink); font:700 clamp(28px,8vw,40px)/1.32 "Songti SC","STSong",serif; }
.opening-visual p { margin:0; color:#6c6256; font-size:13px; line-height:1.85; }
.opening-facts { display:grid; gap:8px; margin-top:18px; }
.opening-facts span { padding:11px 12px; border-left:3px solid var(--gold); color:#304154; background:#eee3d0; font-size:12px; line-height:1.55; }

.identity-card { padding:18px 18px 22px; text-align:center; color:#fffdf7; background:var(--night); }
.logo-frame { display:grid; width:min(55%,190px); aspect-ratio:1; margin:12px auto 18px; padding:10px; place-items:center; border:1px solid rgba(217,182,111,.54); background:#fff; }
.logo-frame img { display:block; width:100%; height:100%; object-fit:contain; }
.identity-card small { color:var(--gold); font-size:9px; letter-spacing:.1em; }
.identity-card h2 { margin:8px 0 12px; color:#fff; font:760 clamp(34px,10vw,48px)/1.14 "Songti SC","STSong",serif; letter-spacing:.06em; }
.identity-card blockquote { margin:0; padding:15px 7px 0; border-top:1px solid rgba(217,182,111,.3); color:#efd69d; font:650 clamp(19px,5.6vw,27px)/1.45 "Songti SC","STSong",serif; }

.position-card { padding:21px 17px 18px; color:var(--ink); }
.position-card h2 { margin:7px 0 15px; font:760 clamp(26px,7.2vw,36px)/1.32 "Songti SC","STSong",serif; }
.position-grid { display:grid; gap:8px; }
.position-grid section { padding:11px 12px; border-left:3px solid var(--gold-deep); background:#eee3d0; }
.position-grid small { display:block; margin-bottom:3px; color:#916b36; font-size:8px; font-weight:800; letter-spacing:.08em; }
.position-grid strong { display:block; color:#203247; font:650 15px/1.5 "Songti SC","STSong",serif; }
.position-card blockquote { margin:12px 0 0; padding:13px; color:#f8ead0; background:var(--night); font:550 14px/1.65 "Songti SC","STSong",serif; }

.mobile-prototype { display:flex; width:100%; min-height:min(520px,100%); padding:9px 10px 10px; flex-direction:column; align-items:center; color:#fff; background:var(--night); }
.prototype-label { display:flex; width:100%; flex:0 0 auto; align-items:center; justify-content:space-between; gap:8px; padding:1px 2px 7px; color:var(--gold); font-size:9px; letter-spacing:.08em; }
.phone-shell { display:flex; width:min(70%,270px); min-height:0; flex:1; margin:0 auto; padding:7px 6px 8px; flex-direction:column; border:1px solid rgba(217,182,111,.55); border-radius:25px; background:#02070b; box-shadow:0 14px 34px rgba(0,0,0,.4); }
.phone-top { position:relative; height:16px; flex:0 0 16px; }
.phone-top::before { position:absolute; top:1px; left:50%; width:54px; height:11px; border-radius:999px; background:#000; content:""; transform:translateX(-50%); }
.phone-screen { display:block; width:100%; min-height:0; aspect-ratio:9/16; flex:1; border:0; border-radius:15px; object-fit:contain; object-position:center; background:#0d2234; }
.prototype-footer { display:grid; width:100%; padding:8px 2px 0; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.prototype-footer div { min-width:0; }
.prototype-footer span,.prototype-footer strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.prototype-footer span { color:var(--gold); font-size:8px; }
.prototype-footer strong { margin-top:2px; color:#fff; font-size:11px; }
.open-visual { min-height:34px; padding:0 11px; border:1px solid var(--gold); border-radius:999px; color:var(--night); background:var(--gold); font-size:10px; font-weight:800; }

.decision-card { padding:19px 15px 16px; color:#fffdf7; background:var(--night); }
.decision-card>small { color:var(--gold); font-size:8px; font-weight:800; letter-spacing:.13em; }
.decision-card h2 { margin:8px 0 14px; font:700 clamp(23px,6.6vw,32px)/1.35 "Songti SC","STSong",serif; }
.path-card { display:grid; grid-template-columns:29px minmax(0,1fr); gap:10px; padding:11px; border:1px solid rgba(255,255,255,.14); text-align:left; }
.path-card+.path-card { margin-top:8px; }
.path-card>b { display:grid; width:29px; height:29px; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:rgba(255,255,255,.7); font-size:10px; }
.path-card strong { display:block; font:650 14px/1.4 "Songti SC","STSong",serif; }
.path-card p { margin:3px 0 0; color:rgba(255,255,255,.58); font-size:9px; line-height:1.55; }
.decision-actions { display:grid; gap:7px; margin-top:12px; }
.decision-actions button { min-height:43px; border-radius:3px; font-size:11px; font-weight:800; }
.decision-actions .primary { border:1px solid var(--gold); color:var(--night); background:var(--gold); }
.decision-actions .secondary { border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.66); background:transparent; }
.decision-message { min-height:0; margin:8px 0 0; color:#a7b1b8; font-size:9px; line-height:1.5; }

.narration-dock {
  position:absolute;
  z-index:30;
  right:0;
  bottom:0;
  left:0;
  display:grid;
  min-height:112px;
  padding:13px calc(14px + env(safe-area-inset-right)) calc(12px + var(--safe-bottom)) calc(17px + env(safe-area-inset-left));
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  color:#fffdf7;
  background:rgba(7,21,34,.98);
  border-top:1px solid rgba(217,182,111,.5);
}
.caption-block { min-width:0; }
.caption-block small { display:block; color:var(--gold); font-size:9px; font-weight:800; letter-spacing:.07em; }
.caption-block p { display:-webkit-box; min-height:42px; margin:5px 0 3px; overflow:hidden; color:#fff; font:600 clamp(15px,4.2vw,18px)/1.45 "Songti SC","STSong",serif; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.caption-block time { color:#80919d; font:9px ui-monospace,monospace; }
.narration-dock>button { display:grid; width:58px; height:58px; place-items:center; border:1px solid #f0d08d; border-radius:50%; color:var(--night); background:var(--gold); transition:width .22s ease,border-radius .22s ease; }
.narration-dock>button b { display:flex; padding-left:2px; align-items:center; justify-content:center; gap:5px; font-size:20px; white-space:nowrap; }
.narration-dock>button .control-label { display:none; font-size:12px; font-weight:850; letter-spacing:.04em; }
.narration-dock>button.is-completed { width:78px; border-radius:999px; }
.narration-dock>button.is-completed .control-label { display:inline; }

.welcome-gate { position:fixed; z-index:150; inset:0; display:grid; min-height:100dvh; padding:calc(22px + var(--safe-top)) 18px calc(22px + var(--safe-bottom)); place-items:center; overflow:hidden; color:#fffdf7; background:var(--night) url("../ai-magic-radio-short/assets/ui/radio-texture.jpg") center/cover; }
.welcome-panel { width:min(100%,390px); padding:29px 23px 24px; border:1px solid rgba(217,182,111,.58); background:rgba(7,21,34,.94); box-shadow:0 26px 70px rgba(0,0,0,.48); text-align:center; }
.welcome-panel>img { display:block; width:78px; height:78px; margin:0 auto 15px; border:1px solid var(--gold); border-radius:18px; object-fit:cover; }
.welcome-panel>small { color:var(--gold); font-size:9px; font-weight:800; letter-spacing:.14em; }
.welcome-panel h1 { margin:12px 0 13px; font:680 clamp(26px,7.4vw,34px)/1.43 "Songti SC","STSong",serif; }
.welcome-panel h1 em { color:#f0d493; font-style:normal; }
.welcome-panel>p { margin:0; color:rgba(255,255,255,.67); font-size:13px; line-height:1.8; }
.welcome-start { display:grid; width:100%; min-height:60px; margin-top:21px; padding:8px 10px 8px 22px; grid-template-columns:minmax(0,1fr) 44px; align-items:center; border:1px solid var(--gold); border-radius:999px; color:var(--night); background:var(--gold); font-weight:800; }
.welcome-start b { display:grid; width:44px; height:44px; place-items:center; border-radius:50%; color:var(--gold); background:var(--night); }

.state-page { display:flex; width:min(100%,480px); min-height:100dvh; margin:0 auto; padding:30px 24px; flex-direction:column; align-items:center; justify-content:center; color:#fffdf7; background:var(--night); text-align:center; }
.state-page h1 { margin:18px 0 8px; font:650 29px/1.42 "Songti SC","STSong",serif; }
.state-page p { max-width:330px; color:#91a0ac; line-height:1.75; }
.eyebrow { color:var(--gold)!important; font-size:9px; font-weight:800; letter-spacing:.15em; }
.loader { width:42px; height:42px; border:2px solid rgba(217,182,111,.2); border-top-color:var(--gold); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }


dialog { max-width:none; padding:0; border:0; }
dialog::backdrop { background:rgba(1,8,15,.9); backdrop-filter:blur(8px); }
.visual-modal,.video-modal { width:min(calc(100% - 22px),440px); max-height:calc(100dvh - 24px); overflow:auto; color:#fffdf7; background:var(--night); border:1px solid rgba(217,182,111,.48); }
.modal-close { position:sticky; z-index:2; top:8px; float:right; width:36px; height:36px; margin:8px 8px -44px 0; border:1px solid rgba(255,255,255,.3); border-radius:50%; color:#fff; background:rgba(0,0,0,.7); font-size:23px; }
.visual-stage { display:flex; min-height:70dvh; padding:14px; align-items:center; justify-content:center; background:#020810; }
.visual-stage img { display:block; width:auto; max-width:100%; height:auto; max-height:84dvh; aspect-ratio:9/16; border-radius:14px; object-fit:contain; background:#0d2236; }
.visual-modal>p { margin:0; padding:13px 18px; color:#9aabb8; font-size:11px; line-height:1.6; text-align:center; }
.video-modal video { display:block; width:100%; max-height:78dvh; background:#000; }
.video-modal{width:100%;max-width:960px;height:100dvh;max-height:100dvh;margin:0 auto;padding:0;border:0;box-sizing:border-box;border-radius:0;overflow-y:auto;background:#090b0c}
.video-modal::backdrop{background:#090b0c}
.video-modal .modal-close{position:fixed;right:max(16px,calc((100vw - 920px)/2));top:max(8px,env(safe-area-inset-top));z-index:4}
.video-modal .ov-video{max-height:55dvh}
.video-placeholder { min-height:340px; padding:95px 28px 40px; text-align:center; }
.video-placeholder b { color:var(--gold); font:650 25px/1.4 "Songti SC","STSong",serif; }
.video-placeholder p { color:#95a4b0; line-height:1.75; }
.toast { position:fixed; z-index:200; left:50%; bottom:calc(124px + var(--safe-bottom)); max-width:calc(100% - 40px); padding:10px 15px; border-radius:999px; color:#fff; background:rgba(0,0,0,.84); font-size:12px; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:.2s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:360px) {
  .speaker-header { padding-inline:12px; grid-template-columns:52px minmax(0,1fr) 42px; gap:9px; }
  .speaker-header>img { width:52px; height:52px; }
  .sound-toggle { width:40px; height:40px; }
  .reveal-stage { padding-inline:12px; }
  .phone-shell { width:76%; }
}
@media (max-height:700px) {
  .speaker-header { min-height:112px; padding-top:calc(10px + var(--safe-top)); }
  .reveal-stage { top:calc(112px + var(--safe-top)); bottom:calc(100px + var(--safe-bottom)); padding-top:8px; }
  .narration-dock { min-height:100px; padding-top:9px; }
  .phone-shell { width:min(60%,230px); }
  .identity-card { padding-block:11px 14px; }
  .logo-frame { width:min(45%,145px); margin-block:5px 10px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }