@font-face{font-family:"Fanren Serif SC";src:url("assets/fonts/fanren-serif-sc.woff?v=20260817-serif-7") format("woff");font-style:normal;font-weight:200 900;font-display:swap}
:root{
  color-scheme:dark;
  --bg:#070a0f;
  --panel:#10141b;
  --panel-2:#151a22;
  --line:rgba(255,255,255,.09);
  --text:#f3f0e9;
  --muted:#aeb2b8;
  --gold:#d6b071;
  --gold-soft:#edd6a7;
  --teal:#72a2a6;
  --danger:#b96c71;
  --phone-w:min(430px,calc(100vw - 40px));
  --ease:cubic-bezier(.22,.72,.18,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
body{overflow:hidden;background:
  radial-gradient(circle at 22% 20%,rgba(76,110,112,.16),transparent 33%),
  radial-gradient(circle at 82% 80%,rgba(123,81,52,.13),transparent 30%),
  linear-gradient(145deg,#080b11,#05070a)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.17;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to right,transparent 0,#000 32%,#000 100%)}
.hidden{display:none!important}
.app-shell{height:100dvh;display:grid;grid-template-columns:minmax(340px,430px) minmax(310px,360px);gap:38px;align-items:center;justify-content:center;padding:22px 28px;position:relative}
html[data-mode="viewer"] .app-shell{grid-template-columns:minmax(340px,430px);gap:0}
html[data-mode="viewer"] .director-panel{display:none}
html[data-mode="viewer"] .player-topbar,
html[data-mode="viewer"] .scene-caption,
html[data-mode="viewer"] .progress-track,
html[data-mode="viewer"] .cinema-shade,
html[data-mode="viewer"] .choice-topline span,
html[data-mode="viewer"] .choice-copy small,
html[data-mode="viewer"] .keyboard-tip,
html[data-mode="viewer"] .ending-badge,
html[data-mode="viewer"] .ending-card>p,
html[data-mode="viewer"] .ending-stats,
html[data-mode="viewer"] .ending-variables{display:none}
html[data-mode="viewer"] .choice-topline{justify-content:flex-end}
html[data-mode="viewer"] .ending-card h2{margin-bottom:16px}
html[data-mode="viewer"] .story-video{transform:scale(1.045);transform-origin:center top}
html[data-mode="viewer"] .stage{font-family:"Fanren Serif SC","Songti SC","STSong",serif}
.phone-column{display:flex;align-items:center;justify-content:center;min-width:0;height:100%}
.phone-frame{width:min(430px,calc((100dvh - 44px)*9/16),calc(100vw - 40px));aspect-ratio:9/16;border-radius:34px;background:#020304;padding:0;box-shadow:0 34px 80px rgba(0,0,0,.54),0 0 0 1px rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.05);position:relative}
.phone-frame:before{content:"";position:absolute;z-index:20;top:12px;left:50%;transform:translateX(-50%);width:82px;height:19px;border-radius:12px;background:#030507;box-shadow:0 1px 0 rgba(255,255,255,.05)}
.stage{position:relative;width:100%;height:100%;overflow:hidden;border-radius:34px;background:#05070a;isolation:isolate}
.story-video,.freeze-layer,.home-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-video{z-index:0;opacity:0;transition:opacity .38s var(--ease);background:#05070a}
.story-video.active{opacity:1;z-index:1}
.freeze-layer{z-index:3;background-position:center;background-size:cover;opacity:0;pointer-events:none;transition:opacity .24s ease;transform:scale(1.01)}
.freeze-layer.visible{opacity:1}
.cinema-shade{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(to bottom,rgba(3,5,8,.54) 0,transparent 24%,transparent 57%,rgba(3,5,8,.18) 76%,rgba(3,5,8,.72) 100%)}
.screen{position:absolute;inset:0;z-index:8;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.screen.active{opacity:1;pointer-events:auto}
.home-screen{overflow:hidden}
.home-backdrop{background-size:cover;background-position:center;transform:scale(1.035);animation:homeDrift 11s ease-in-out infinite alternate}
@keyframes homeDrift{to{transform:scale(1.085) translate3d(-5px,-7px,0)}}
.home-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,12,.88) 0,rgba(5,8,12,.37) 62%,rgba(5,8,12,.18)),linear-gradient(to top,rgba(4,6,9,.96) 0,rgba(4,6,9,.32) 58%,rgba(4,6,9,.12))}
.home-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:54px 30px max(30px,env(safe-area-inset-bottom));justify-content:flex-end}
.brand-pill{position:absolute;left:28px;top:34px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(236,211,169,.3);background:rgba(10,13,17,.34);backdrop-filter:blur(12px);font-size:10px;letter-spacing:.09em;color:#e9d7b4}
.brand-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.title-stack{display:flex;gap:22px;align-items:flex-end;margin-bottom:18px}
.vertical-title{font-family:"Fanren Serif SC","Songti SC","STSong",serif;font-size:62px;font-weight:600;line-height:.93;letter-spacing:.11em;writing-mode:vertical-rl;color:#f3dfb8;text-shadow:0 1px 0 rgba(94,52,26,.85),0 4px 18px rgba(0,0,0,.72),0 0 22px rgba(215,176,106,.15)}
.title-copy{padding-bottom:2px;min-width:0}
.eyebrow{font-size:9px;letter-spacing:.23em;color:rgba(236,216,178,.69);margin-bottom:8px}
.title-copy h1{font-family:"Fanren Serif SC","Songti SC","STSong",serif;font-size:24px;line-height:1.2;margin:0 0 10px;font-weight:600;letter-spacing:.07em}
.title-copy p{font-family:"Fanren Serif SC","Songti SC","STSong",serif;font-size:12px;line-height:1.7;color:rgba(240,239,235,.72);margin:0;max-width:270px}
.feature-row{display:flex;align-items:center;gap:8px;font-family:"Fanren Serif SC","Songti SC","STSong",serif;font-size:10px;color:rgba(236,234,228,.72);margin:0 0 18px 0}
.feature-row i{width:3px;height:3px;border-radius:50%;background:rgba(236,211,169,.6)}
.home-actions{display:grid;gap:9px}
.primary-button,.ghost-button{border:0;border-radius:14px;min-height:49px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:transform .16s ease,background .16s ease,opacity .16s ease;font-weight:650;font-size:14px}
.primary-button{background:linear-gradient(135deg,#e4c58c,#b88c50);color:#17130e;box-shadow:0 12px 26px rgba(168,119,55,.26)}
.primary-button:hover{transform:translateY(-1px)}
.primary-button:active,.ghost-button:active{transform:scale(.985)}
.play-icon{font-size:10px;margin-left:-3px}
.ghost-button{background:rgba(16,20,25,.42);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);color:#f3eee4}
.ghost-button .arrow{margin-left:auto;padding-right:18px}
.demo-note{text-align:center;font-family:"Fanren Serif SC","Songti SC","STSong",serif;font-size:9px;color:rgba(237,235,230,.48);margin:11px 0 0}
.player-screen{z-index:7}
.player-topbar{position:absolute;z-index:10;top:0;left:0;right:0;padding:max(28px,env(safe-area-inset-top)) 18px 10px;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px}
.icon-button:disabled{opacity:.42;cursor:default}
.icon-button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:rgba(7,10,14,.28);backdrop-filter:blur(12px);display:grid;place-items:center;cursor:pointer;font-size:17px}
.node-heading{text-align:center;min-width:0;text-shadow:0 2px 12px #000}
.node-heading span{display:block;font-size:9px;letter-spacing:.18em;color:rgba(238,215,175,.78);margin-bottom:3px}
.node-heading strong{display:block;font-family:"Fanren Serif SC","Songti SC","STSong",serif;font-size:15px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress-track{display:none}
.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#b98d52,#ead1a1);box-shadow:0 0 8px rgba(230,196,136,.7);transition:width .25s linear}
.scene-caption{position:absolute;z-index:10;left:28px;right:28px;bottom:38px;text-align:center;font-family:"Fanren Serif SC","Songti SC","STSong",serif;font-size:14px;line-height:1.75;letter-spacing:.04em;text-shadow:0 2px 14px rgba(0,0,0,.92);opacity:0;transform:translateY(8px);transition:.45s var(--ease)}
.scene-caption.visible{opacity:1;transform:none}
.scene-caption.choice-active{opacity:0;transform:translateY(-8px)}
.transition-card{position:absolute;z-index:18;left:50%;top:50%;transform:translate(-50%,-48%) scale(.95);min-width:150px;padding:15px 20px;border-radius:16px;background:rgba(9,12,16,.68);border:1px solid rgba(235,209,163,.22);backdrop-filter:blur(18px);text-align:center;opacity:0;pointer-events:none;transition:.28s var(--ease);box-shadow:0 18px 50px rgba(0,0,0,.28)}
.transition-card.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.transition-card span{display:block;font-size:9px;letter-spacing:.17em;color:#d7b77f;margin-bottom:5px}
.transition-card strong{font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:16px;letter-spacing:.06em}
.tap-to-play{position:absolute;z-index:24;inset:0;display:grid;place-items:center;background:rgba(4,6,9,.26);backdrop-filter:blur(4px)}
.tap-to-play button{border:1px solid rgba(255,255,255,.23);border-radius:999px;background:rgba(9,12,16,.72);padding:12px 18px;cursor:pointer}
.choice-overlay{position:absolute;z-index:20;left:0;right:0;bottom:0;padding:20px 22px max(24px,env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(5,7,10,.98) 0,rgba(5,7,10,.92) 72%,rgba(5,7,10,0));opacity:0;transform:translateY(28px);pointer-events:none;transition:.4s var(--ease)}
.choice-overlay.visible{opacity:1;transform:none;pointer-events:auto}
.choice-topline{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.06em;color:rgba(232,225,213,.58);margin-bottom:8px}
.choice-topline strong{font-size:12px;color:#ead0a0}
.countdown-track{height:2px;background:rgba(255,255,255,.11);border-radius:3px;overflow:hidden;margin-bottom:15px}
.countdown-track span{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,#d5ad6b,#f0ddb8)}
.choice-overlay h2{font-family:"Fanren Serif SC","Songti SC","STSong",serif;font-size:17px;line-height:1.45;margin:0 0 13px;letter-spacing:.045em}
.choice-list{display:grid;gap:9px}
.choice-button{position:relative;width:100%;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(24,28,34,.78);backdrop-filter:blur(14px);padding:12px 15px 12px 48px;text-align:left;cursor:pointer;transition:.2s var(--ease);overflow:hidden}
.choice-button:hover{border-color:rgba(231,202,150,.52);background:rgba(45,43,39,.8);transform:translateY(-1px)}
.choice-button:disabled{cursor:default;opacity:.62;transform:none}
.choice-button.selected{border-color:#d9b477;background:rgba(92,70,42,.72);box-shadow:0 0 0 1px rgba(226,188,126,.18),0 12px 28px rgba(0,0,0,.23)}
.choice-key{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(235,207,161,.11);border:1px solid rgba(235,207,161,.23);font-size:10px;color:#ead1a5}
.choice-copy strong{display:block;font-size:13px;margin-bottom:3px}
.choice-copy small{display:block;font-size:9px;color:rgba(238,236,230,.53);line-height:1.35}
.keyboard-tip{text-align:center;margin-top:9px;font-size:8px;color:rgba(255,255,255,.31)}
.ending-overlay{position:absolute;z-index:22;inset:0;display:flex;align-items:flex-end;padding:24px 20px max(24px,env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(4,6,9,.98) 0,rgba(4,6,9,.82) 55%,rgba(4,6,9,.08) 100%);opacity:0;pointer-events:none;transition:.55s var(--ease)}
.ending-overlay.visible{opacity:1;pointer-events:auto}
.ending-card{width:100%;transform:translateY(22px);transition:.55s var(--ease)}
.ending-overlay.visible .ending-card{transform:none}
.ending-badge{display:inline-flex;padding:6px 10px;border:1px solid rgba(226,194,137,.32);border-radius:999px;color:#e5c790;background:rgba(224,188,126,.08);font-size:9px;letter-spacing:.12em}
.ending-card h2{font-family:"Fanren Serif SC","Songti SC","STSong",serif;font-size:30px;letter-spacing:.08em;margin:10px 0 7px}
.ending-card>p{font-size:11px;color:rgba(239,236,228,.69);line-height:1.65;margin:0 0 14px}
.ending-stats{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.1);border-radius:13px;overflow:hidden;margin-bottom:11px;background:rgba(18,21,27,.55)}
.ending-stats div{padding:10px 12px}.ending-stats div+div{border-left:1px solid rgba(255,255,255,.08)}
.ending-stats span{display:block;font-size:8px;color:rgba(255,255,255,.46);margin-bottom:3px}.ending-stats strong{font-size:12px;color:#ead4aa}
.ending-variables{display:flex;gap:7px;margin-bottom:13px;flex-wrap:wrap}
.ending-variables span{padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.07);font-size:9px;color:rgba(244,241,234,.76)}
.ending-actions{display:grid;grid-template-columns:1.3fr 1fr;gap:8px}.ending-actions button{min-height:45px}
.status-toast{position:absolute;z-index:30;left:50%;top:110px;transform:translate(-50%,-8px);padding:9px 13px;border-radius:999px;background:rgba(9,12,16,.82);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);font-size:10px;opacity:0;pointer-events:none;transition:.25s ease;white-space:nowrap}
.status-toast.visible{opacity:1;transform:translate(-50%,0)}
.preload-bin{position:fixed;width:1px;height:1px;overflow:hidden;opacity:.001;pointer-events:none;left:-10px;top:-10px}
.director-panel{align-self:center;height:min(760px,calc(100dvh - 56px));border-radius:24px;background:linear-gradient(155deg,rgba(20,25,33,.94),rgba(11,15,21,.94));border:1px solid rgba(255,255,255,.09);box-shadow:0 28px 70px rgba(0,0,0,.32);padding:22px;overflow:auto;backdrop-filter:blur(22px);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.panel-kicker{font-size:8px;letter-spacing:.22em;color:#b69a6d}.panel-header h2{font-size:16px;margin:5px 0 0;letter-spacing:.03em}
.version-chip{font-size:8px;white-space:nowrap;padding:6px 8px;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.5)}
.status-line{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;padding:14px 0 4px}.status-line strong{font-size:11px}.status-line small{font-size:8px;color:rgba(255,255,255,.4)}
.live-dot{width:7px;height:7px;border-radius:50%;background:#5a616b}.live-dot.active{background:#69b99d;box-shadow:0 0 10px rgba(105,185,157,.7);animation:pulse 1.5s infinite}@keyframes pulse{50%{opacity:.45}}
.panel-section{padding:15px 0;border-bottom:1px solid var(--line)}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.section-heading>span{font-size:10px;color:rgba(255,255,255,.7)}.section-heading small,.section-heading code{font-size:8px;color:rgba(255,255,255,.34)}
.node-card{border-radius:13px;padding:12px;background:linear-gradient(145deg,rgba(103,133,135,.13),rgba(255,255,255,.035));border:1px solid rgba(129,164,166,.15);display:flex;align-items:center;justify-content:space-between}.node-card strong{font-size:12px}.node-card span{font-size:8px;padding:4px 6px;border-radius:5px;background:rgba(111,153,155,.15);color:#9bc1c2}
.variable-panel{display:grid;gap:9px}.variable-row{display:grid;grid-template-columns:42px 1fr 22px;align-items:center;gap:8px}.variable-row label{font-size:9px;color:rgba(255,255,255,.56)}.variable-row strong{font-size:9px;text-align:right;color:#e6d3ad}.variable-track{height:5px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}.variable-track i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#688e91,#d4ad6d);transition:width .45s var(--ease)}
.chip-row{display:flex;gap:6px;flex-wrap:wrap}.chip-row span{font-size:8px;padding:6px 7px;border-radius:7px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.58)}.chip-row .empty-chip{color:rgba(255,255,255,.28)}
.route-section{min-height:96px}.path-panel{display:flex;gap:5px;flex-wrap:wrap;align-items:center}.path-node{display:flex;align-items:center;gap:5px;font-size:8px;padding:5px 7px;border-radius:7px;background:rgba(214,176,113,.09);border:1px solid rgba(214,176,113,.12);color:#d8c29b}.path-node:after{content:"→";color:rgba(255,255,255,.22);margin-left:2px}.path-node:last-child:after{display:none}.path-empty{font-size:8px;color:rgba(255,255,255,.27);line-height:1.5}
.analytics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.analytics-grid div{padding:10px 8px;border-radius:10px;background:rgba(255,255,255,.04);text-align:center}.analytics-grid strong{display:block;font-size:17px;font-weight:600;color:#e7d4ae}.analytics-grid span{display:block;font-size:7px;color:rgba(255,255,255,.39);margin-top:2px}
.panel-footer{padding-top:16px}.panel-footer button{width:100%;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);font-size:9px;color:rgba(255,255,255,.55);cursor:pointer}.panel-footer p{font-size:8px;line-height:1.55;color:rgba(255,255,255,.3);margin:9px 1px 0}
@media(max-width:860px){body{overflow:hidden;background:#080b10}.app-shell{display:block;width:100vw;height:100dvh;padding:0}.director-panel{display:none}.phone-column{position:relative;isolation:isolate;overflow:hidden;width:100%;height:100%}.phone-column:before{content:"";position:absolute;z-index:-1;inset:-36px;background:linear-gradient(rgba(4,6,9,.28),rgba(4,6,9,.7)),var(--story-cover) center/cover no-repeat;filter:blur(22px);transform:scale(1.12);opacity:.78}.phone-frame{z-index:1;width:min(100vw,calc(100dvh*9/16));height:auto;aspect-ratio:9/16;padding:0;border-radius:0;box-shadow:0 0 60px rgba(0,0,0,.48)}.phone-frame:before{display:none}.stage{border-radius:0}.home-content{padding-left:26px;padding-right:26px}.brand-pill{top:max(19px,env(safe-area-inset-top));left:24px}.player-topbar{padding-top:max(18px,env(safe-area-inset-top))}.progress-track{top:max(72px,calc(env(safe-area-inset-top) + 55px))}}
@media(max-height:700px) and (min-width:861px){.director-panel{height:calc(100dvh - 24px)}.phone-frame{width:min(430px,calc((100dvh - 20px)*9/16),calc(100vw - 40px))}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}