/* 以 perfume-demo.html 的视觉与动效为底，主紫换成 Kiro 品牌色 #9047ff */
@font-face{font-family:"Fragment Mono";src:url(assets/fonts/fragment-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(assets/fonts/fragment-mono-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{color-scheme:dark;--bg:#08070d;--panel:#131019;--panel2:#1a1622;--ink:#faf7ff;--muted:#aaa2b5;--dim:#8a8296;--line:#332b3e;--purple:#9047ff;--purple-2:#b48aff;--pink:#ff77b7;--cyan:#6fe5e5;--green:#74e5a5;--mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.4,.64,1)}
@supports (transition-timing-function:linear(0,1)){:root{--spring:linear(0,.062 2.3%,.236 4.9%,.48 8.1%,.7 11.6%,.86 15.6%,.95 20%,1.006 25.4%,1.025 31%,1.018 40%,1.004 55%,1)}}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;min-height:100dvh;color:var(--ink);overflow-x:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);-webkit-font-smoothing:antialiased}
/* 背景：两团会缓慢漂移的光晕 + 渐隐网格 */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(40px)}
.glow.a{width:64rem;height:64rem;left:-28rem;top:-34rem;background:radial-gradient(circle,#7a3df066,transparent 62%);animation:drift 22s ease-in-out infinite}
.glow.b{width:62rem;height:62rem;right:-30rem;bottom:-36rem;background:radial-gradient(circle,#d3488c33,transparent 62%);animation:drift 26s ease-in-out -9s infinite reverse}
@keyframes drift{50%{transform:translate(6rem,4rem) scale(1.08)}}
body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.22;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(#000,transparent 92%)}
button,textarea{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.42;cursor:default}
a{color:inherit;text-decoration:none}
.ico{width:1.1em;height:1.1em;flex:none;display:inline-block;vertical-align:-.18em}
.shell{position:relative;z-index:1;overflow-x:clip;width:min(100%,760px);min-height:100dvh;margin:auto;padding:calc(18px + env(safe-area-inset-top)) clamp(18px,5vw,44px) calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
header{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px}.brand{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;font-weight:760;letter-spacing:.04em}.brand img{width:32px;height:32px;object-fit:contain}.brand span{color:#bdb5c8;font-weight:500}
.tools{display:flex;gap:8px}.tool{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;justify-content:center;border:1px solid var(--line);background:#15111dcc;border-radius:12px;padding:7px 12px;font-size:12px;color:#d8d0e2;backdrop-filter:blur(10px);transition:border-color .2s,background .2s}.tool.on{border-color:#795cad;background:#211832;color:#fff}.tool:hover{border-color:#5d4a78}
.tool .bars{display:inline-flex;align-items:center;gap:2px;height:14px}.tool .bars i{width:2px;height:6px;border-radius:2px;background:currentColor;opacity:.7}.tool.on .bars i{animation:eq 1s ease-in-out infinite;opacity:1;background:var(--purple-2)}.tool.on .bars i:nth-child(2){animation-delay:-.3s}.tool.on .bars i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}
main{flex:1;display:flex;flex-direction:column}footer{text-align:center;color:#6f6879;font-size:10px;letter-spacing:.14em;padding-top:25px}
.fade{animation:fade .45s var(--ease) both}@keyframes fade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.eyebrow{font:650 11px/1.4 var(--mono);letter-spacing:.16em;color:#bda5ff;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(38px,8vw,65px);line-height:1.04;letter-spacing:-.048em;margin-bottom:18px}h2{font-size:clamp(26px,5vw,39px);line-height:1.18;letter-spacing:-.03em;margin-bottom:12px}p{font-size:14px;line-height:1.72;color:var(--muted)}
.gradient-text{background:linear-gradient(105deg,#fff 5%,#c8b3ff 46%,#ff95c9 94%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 8s ease-in-out infinite}
@keyframes sheen{50%{background-position:100% 0}}
.status{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;background:#121019dd;padding:8px 12px;font-size:11px;color:#c4bdce}.status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 1.8s ease-in-out infinite}
.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;border-radius:14px;padding:14px 18px;font-size:15px;font-weight:700;transition:transform .2s var(--spring),box-shadow .2s,background .2s,border-color .2s;margin-top:10px}
.primary{position:relative;overflow:hidden;border:1px solid #af87ff;background:linear-gradient(120deg,#7a3ae8,#a552ec 55%,#dc619f);box-shadow:0 13px 34px #7b3cbc35;color:#fff}
.primary:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff38 50%,transparent 70%);transform:translateX(-120%);animation:shine 4.5s ease-in-out 1.2s infinite}
@keyframes shine{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px #8a47d24c}.primary:active{transform:scale(.98)}.primary:disabled:after{display:none}
.secondary{border:1px solid var(--line);background:#17131e;color:#ddd5e5}.secondary:hover{border-color:#705b89;background:#1e1828}.secondary:active{transform:scale(.98)}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:0;background:none;color:#a39bae;font-size:13px;padding:0}.back:hover{color:#fff}

/* 首页：传送门光环 + 漂浮香调词 + 雾气 */
.home-scene{min-height:calc(100dvh - 120px);display:flex;flex-direction:column;justify-content:center;padding:24px 0 12px;position:relative}
.home-scene:before{content:"";position:absolute;inset:5% -15%;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,#8c55ef24,transparent 47%);filter:blur(12px)}
.home-hero{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.scent-stage{position:relative;width:min(92vw,500px);height:360px;margin:-6px auto -12px;display:grid;place-items:center;transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .6s var(--ease)}
.portal-ring{position:absolute;border:1px solid #b597ff4a;border-radius:50%;animation:portalSpin 18s linear infinite}
.portal-ring.one{width:330px;height:250px;transform:rotate(-13deg)}.portal-ring.two{width:270px;height:315px;border-style:dashed;animation-direction:reverse;animation-duration:25s}.portal-ring.three{width:220px;height:220px;border-color:#ff7eb533;animation-duration:12s}
.home-kiro-stage{position:relative;z-index:3;display:inline-grid;width:190px;aspect-ratio:1;filter:drop-shadow(0 28px 36px #0009);animation:homeFloat 4s ease-in-out infinite}
.home-kiro-stage>img{width:100%;height:100%;display:block;object-fit:contain}
.scent-word{position:absolute;z-index:4;border:1px solid #ffffff1b;background:#110e18b8;backdrop-filter:blur(8px);border-radius:999px;padding:7px 11px;font:650 9px var(--mono);letter-spacing:.13em;color:#aaa0b5;box-shadow:0 8px 25px #0004;animation:scentDrift 5s ease-in-out infinite}
.scent-word.a{left:2%;top:25%;color:#9bece0}.scent-word.b{right:1%;top:20%;color:#ffc0dd;animation-delay:-1.7s}.scent-word.c{right:7%;bottom:18%;color:#cdb9ff;animation-delay:-3.1s}.scent-word.d{left:8%;bottom:14%;color:#ffe294;animation-delay:-2.3s}
.mist-line{position:absolute;z-index:2;width:90px;height:170px;border:2px solid #d9c7ff42;border-color:#d9c7ff42 transparent transparent transparent;border-radius:50%;filter:blur(.3px);animation:mistRise 4s ease-in-out infinite}
.mist-line.m1{left:21%;top:40%;transform:rotate(65deg)}.mist-line.m2{right:19%;top:39%;transform:rotate(-65deg);animation-delay:-2s}
.home-copy{position:relative;z-index:5}.home-copy .eyebrow{margin-bottom:15px;color:#c6b0ff}.home-copy h1{margin-bottom:14px}.home-copy p{max-width:480px;margin:0 auto;color:#b7aec0;font-size:15px}
.home-invitation{width:min(100%,450px);margin:27px auto 0;position:relative;z-index:5}.home-invitation .primary{min-height:58px;font-size:16px;box-shadow:0 18px 50px #7c3ec448}
.home-whisper{display:flex;justify-content:center;align-items:center;gap:8px;margin:13px 0 0;color:#8a8296;font-size:12px}.home-whisper i{width:5px;height:5px;border-radius:50%;background:#ff7db8;box-shadow:0 0 10px #ff7db8;animation:pulse 1.8s ease-in-out infinite}
@keyframes portalSpin{to{transform:rotate(347deg)}}@keyframes homeFloat{50%{transform:translateY(-10px) rotate(1.5deg)}}@keyframes scentDrift{50%{transform:translateY(-9px);opacity:.72}}@keyframes mistRise{50%{transform:translateY(-17px) rotate(70deg);opacity:.35}}@keyframes float{50%{transform:translateY(-8px)}}@keyframes pulse{50%{transform:scale(.92);opacity:.72}}
@media(max-width:540px){.home-scene{padding-top:12px}.scent-stage{height:300px}.home-kiro-stage{width:155px}.portal-ring.one{width:270px;height:205px}.portal-ring.two{width:218px;height:265px}.portal-ring.three{width:180px;height:180px}.scent-word{padding:6px 9px;font-size:8px}.home-copy h1{font-size:42px}.home-invitation{margin-top:21px}}

/* 访谈 */
.topline{display:flex;align-items:center;justify-content:space-between;margin:26px 0 18px}
.interview{padding-bottom:24px}
.interview-panel{position:relative;border:1px solid #3b3150;border-radius:28px;background:linear-gradient(160deg,#1d1829 0%,#120e1a 52%,#161022 100%);padding:clamp(24px,5vw,40px) clamp(20px,5vw,40px) clamp(22px,4vw,32px);box-shadow:0 30px 80px #0007,inset 0 1px 0 #ffffff12;overflow:hidden;isolation:isolate}
.interview-panel:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 88% 4%,#a56cff2e,transparent 42%),radial-gradient(ellipse at 6% 100%,#ff6fb51c,transparent 46%)}
.interview-panel:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse at 50% 0,#000 30%,transparent 78%)}
.host{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.host-avatar{position:relative;width:54px;height:54px;flex:none;display:grid;place-items:center}
.host-avatar:before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 210deg,#9047ff,#ff77b7,#6fe5e5,#9047ff);opacity:.55;filter:blur(7px);animation:hostGlow 4s ease-in-out infinite,spin 9s linear infinite}
.host-avatar img{position:relative;width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 8px 14px #0008)}
.host-meta{display:flex;flex-direction:column;gap:5px}.host-name{font:750 13px Inter,sans-serif;letter-spacing:.02em;color:#fff}.host-name span{color:#a89fb5;font-weight:500;margin-left:6px}
.host-state{display:inline-flex;align-items:center;gap:6px;font:600 10px var(--mono);letter-spacing:.14em;color:#bda5ff;text-transform:uppercase}.host-state i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.8s ease-in-out infinite}
.host-state.typing i{background:var(--pink);box-shadow:0 0 10px var(--pink)}
@keyframes hostGlow{50%{opacity:.85;transform:scale(1.06)}}
.interview-panel h2{max-width:600px;margin-bottom:10px;font-size:clamp(25px,4.6vw,36px)}.interview-panel>p.lead{color:#a79fb3;font-size:14px;margin:0 0 22px}
.chip-hint{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;font:600 10px var(--mono);letter-spacing:.12em;color:#968da4;text-transform:uppercase}.chip-hint b{color:#e6ddf5;font-weight:700;text-align:right}
.chip-grid{display:flex;flex-wrap:wrap;gap:9px 8px;margin:0 0 22px}
.chip{--dot:#a889ff;position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;border:1px solid #ffffff16;background:linear-gradient(180deg,#ffffff0d,#ffffff05);backdrop-filter:blur(8px);border-radius:999px;padding:10px 15px 10px 12px;font-size:13px;color:#ddd5e8;letter-spacing:.01em;transition:transform .25s var(--spring),border-color .18s,background .18s,box-shadow .18s;animation:chipIn .5s var(--ease) both;animation-delay:calc(var(--i) * 28ms)}
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
.chip:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot);box-shadow:0 0 10px var(--dot);opacity:.85;flex:none;transition:.18s}
.chip:hover{border-color:#ffffff3a;background:linear-gradient(180deg,#ffffff16,#ffffff08);transform:translateY(-2px)}.chip:active{transform:scale(.96)}
.chip.selected{border-color:color-mix(in srgb,var(--dot) 80%,#fff);background:linear-gradient(180deg,color-mix(in srgb,var(--dot) 30%,#1a1424),color-mix(in srgb,var(--dot) 14%,#120d1a));color:#fff;box-shadow:0 8px 26px color-mix(in srgb,var(--dot) 30%,transparent),inset 0 1px 0 #ffffff22}
.chip.selected:before{transform:scale(1.25)}.chip.selected .ico{width:12px;height:12px;color:color-mix(in srgb,var(--dot) 60%,#fff)}
.chip.s-work{--dot:#8fb3ff}.chip.s-daily{--dot:#c9b8ff}.chip.s-date{--dot:#ff8cc6}.chip.s-travel{--dot:#6fe5e5}.chip.s-outdoor{--dot:#7fe0a6}.chip.s-party{--dot:#ffd166}.chip.s-night{--dot:#9d72ff}
.or-line{display:flex;align-items:center;gap:12px;margin:0 0 12px;color:#837b8e;font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase}.or-line:before,.or-line:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#ffffff1f,transparent)}
.speech-box{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;border:1px solid #ffffff1a;background:linear-gradient(180deg,#0f0c15,#0a080f);border-radius:20px;padding:8px 8px 8px 18px;box-shadow:inset 0 1px 0 #ffffff0a,0 12px 30px #0005;transition:border-color .2s,box-shadow .2s}
.speech-box:focus-within{border-color:#9047ff88;box-shadow:inset 0 1px 0 #ffffff0a,0 12px 34px #0006,0 0 0 4px #9047ff1f}
.speech-box textarea{display:block;width:100%;min-height:52px;max-height:110px;resize:none;border:0;outline:0;background:transparent;padding:12px 0;color:#f6f1fb;font-size:16px;line-height:1.55;field-sizing:content}.speech-box textarea::placeholder{color:#7a7285}
.mic{position:relative;width:52px;height:52px;flex:none;border-radius:16px;border:1px solid #ffffff22;background:linear-gradient(150deg,#b48cff,#6b45c4 70%);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px #6d44c855,inset 0 1px 0 #ffffff33;transition:transform .18s,box-shadow .18s}
.mic svg{width:20px;height:20px}.mic:hover{transform:translateY(-1px);box-shadow:0 14px 30px #6d44c877,inset 0 1px 0 #ffffff33}
.mic.listening{background:linear-gradient(150deg,#ffb3d9,#c94c8e 70%);animation:micPulse 1.1s infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 #ff77b74d,0 10px 24px #c94c8e55}55%{box-shadow:0 0 0 14px #ff77b700,0 10px 24px #c94c8e55}}
.speech-foot{display:flex;justify-content:space-between;align-items:center;margin:10px 4px 0;color:#837b8e;font-size:11px}
.voice-wave{display:none;align-items:center;gap:3px;height:16px}.voice-wave i{width:3px;height:4px;border-radius:2px;background:var(--pink)}
.listening-now .voice-wave{display:inline-flex}.listening-now .voice-wave i{animation:eq .8s ease-in-out infinite}.listening-now .voice-wave i:nth-child(2){animation-delay:-.2s}.listening-now .voice-wave i:nth-child(3){animation-delay:-.4s}.listening-now .voice-wave i:nth-child(4){animation-delay:-.6s}
.understanding{display:none;position:relative;margin-top:16px;border:1px solid #9047ff3a;background:linear-gradient(135deg,#231a35,#181223);border-radius:18px;padding:16px 18px 16px 52px}
.understanding.show{display:block;animation:fade .35s}
.understanding:before{content:"";position:absolute;left:16px;top:16px;width:24px;height:24px;border-radius:8px;background:url("assets/kiro-logo.png") center/contain no-repeat;filter:drop-shadow(0 4px 8px #0007)}
.understanding label{display:block;font:650 10px var(--mono);color:#c4adff;letter-spacing:.14em;margin-bottom:6px;text-transform:uppercase}
.understanding p{color:#eae3f3;margin:0;font-size:14px;line-height:1.65;min-height:1.65em}
.understanding p.typing:after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:#c4adff;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.interview-actions{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:18px}.interview-actions button{margin:0}.interview-actions .secondary{padding-left:22px;padding-right:22px}
@media(max-width:540px){.interview-panel{border-radius:22px}.host-avatar,.host-avatar img{width:46px;height:46px}.chip{padding:9px 13px 9px 11px;font-size:13px}.interview-actions{grid-template-columns:1fr 1.6fr}.interview-actions .secondary{padding-left:12px;padding-right:12px}}

/* 答题 */
.progress-head{display:flex;justify-content:space-between;margin-bottom:9px;font:600 11px var(--mono);color:#968da4;letter-spacing:.08em}
.progress{height:5px;background:#211b2b;border-radius:99px;overflow:hidden;margin-bottom:28px}
.progress span{position:relative;display:block;width:var(--progress);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--pink));box-shadow:0 0 15px #b35fdf;transition:width .5s var(--ease);view-transition-name:progress}
.progress span:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff80,transparent);background-size:60% 100%;background-repeat:no-repeat;animation:barShine 1.8s linear infinite}
@keyframes barShine{from{background-position:-60% 0}to{background-position:160% 0}}
.question-panel{position:relative;border:1px solid var(--line);border-radius:23px;background:linear-gradient(145deg,#1a1623f2,#0e0c13f2);padding:clamp(23px,5vw,37px);box-shadow:0 24px 65px #0005;overflow:hidden;isolation:isolate}
.question-panel:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at var(--hx,50%) 120%,color-mix(in srgb,var(--tone,#9047ff) 26%,transparent),transparent 60%);transition:background .4s}
.question-id{font:650 11px var(--mono);color:#b39af5;letter-spacing:.13em;margin-bottom:22px}
.question-panel h2{min-height:92px;display:flex;align-items:center}
.scale-wrap{margin-top:26px}.scale-labels{display:flex;justify-content:space-between;color:#968da4;font-size:11px;margin:0 3px 10px}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale button{height:60px;border:1px solid #3a3047;background:#121019;border-radius:13px;transition:transform .25s var(--spring),border-color .18s,background .18s,box-shadow .18s;display:grid;place-items:center}
.scale button:hover{border-color:#8d6bc0;background:#21182e;transform:translateY(-2px)}.scale button:active{transform:scale(.94)}
.scale button.selected{border-color:#c394ff;background:#332047;box-shadow:0 0 20px #8f5ed134}
.scale button.selected i{animation:pop .45s var(--spring)}
@keyframes pop{40%{transform:scale(1.12)}}
.scale button i{display:block;border:2px solid currentColor;border-radius:50%;width:var(--size);height:var(--size);color:var(--tone)}.scale button:nth-child(3) i{border-radius:7px}
.answer-name{height:20px;margin:14px 0 0;text-align:center;font-size:13px;color:#d8d0e2;transition:opacity .2s}
.quiz-note{text-align:center;font-size:12px;margin:6px 0 0}.quiz-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:10px;border:0;background:none;color:#968da4;font-size:13px;padding:0 8px}.quiz-back:hover{color:#fff}

/* 生成：双圈加载环 + 日志，随后摊开 4 张候选海报 */
.generate{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:30px 0}
.loader-scene{width:220px;height:220px;position:relative;display:grid;place-items:center;margin:0 auto 22px;transition:width .6s var(--ease),height .6s var(--ease),margin .6s var(--ease)}
.loader-ring{position:absolute;inset:14px;border:1px solid #70539c;border-radius:50%;border-top-color:#f98cca;animation:spin 3s linear infinite}
.loader-ring.two{inset:40px;border-style:dashed;animation:spin 5s reverse linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-logo{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 18px 25px #0008);animation:pulse 1.7s ease-in-out infinite;transition:width .6s var(--ease),height .6s var(--ease)}
.build-log{height:22px;font:12px var(--mono);color:#c2b3d8;margin:0}
.generate.reveal .loader-scene{width:120px;height:120px;margin-bottom:10px}.generate.reveal .loader-logo{width:52px;height:52px}
.fan{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:26px auto 0;width:min(100%,520px);opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.generate.reveal .fan{opacity:1;transform:none}
.fan figure{margin:0;transition:opacity .5s var(--ease),transform .6s var(--spring),filter .5s}
.fan img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;border:1px solid #ffffff1a;transition:box-shadow .25s,border-color .25s}
.fan figcaption{margin-top:8px;font-size:11px;color:#968da4}.fan figcaption b{display:block;font:600 13px var(--mono);color:#c4bdce}
.fan .scan img{border-color:#c8b3ff;box-shadow:0 0 0 2px #c8b3ff88,0 10px 30px #9047ff55}
.fan .chosen{transform:translateY(-10px) scale(1.08)}.fan .chosen img{border-color:#fff;box-shadow:0 0 0 2px var(--purple),0 16px 40px #9047ff77;view-transition-name:poster}
.fan .chosen figcaption,.fan .chosen figcaption b{color:#fff}.fan .out{opacity:.3;filter:saturate(.3)}

/* 结果：海报 + 语音确认 + 为什么是它 */
.result-wrap{padding:24px 0 10px}.result-intro{text-align:center;margin-bottom:18px}.result-intro h2{margin:8px 0 5px}.result-intro p{font-size:13px;margin:0}
.poster-frame{--accent:var(--purple);position:relative;border-radius:24px;padding:1px;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 80%,#fff),#ffffff10 40%,color-mix(in srgb,var(--accent) 60%,transparent));box-shadow:0 32px 85px #0009,0 0 60px color-mix(in srgb,var(--accent) 22%,transparent);animation:posterIn .8s var(--ease) both}
@keyframes posterIn{from{opacity:0;transform:translateY(18px) scale(.98)}}
.poster-frame:before{content:"";position:absolute;inset:-18px;z-index:-1;border-radius:40px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 35%,transparent),transparent 65%);filter:blur(20px);animation:pulse 4s ease-in-out infinite}
.poster-img{display:block;width:100%;height:auto;aspect-ratio:2/3;border-radius:23px;background:var(--panel);view-transition-name:poster}
.confirm-panel{border:1px solid var(--line);border-radius:19px;background:#12101bcc;padding:20px;margin-top:16px;text-align:center}
.confirm-panel h3{font-size:18px;margin:0 0 7px}.confirm-panel p{font-size:13px;margin-bottom:13px}
.confirm-mic{width:66px;height:66px;border-radius:50%;border:1px solid #7957ac;background:radial-gradient(circle at 35% 25%,#bd95ff,#673eaf);color:#fff;display:inline-grid;place-items:center;transition:transform .2s var(--spring)}.confirm-mic svg{width:24px;height:24px}.confirm-mic:hover{transform:scale(1.05)}
.confirm-mic.listening{animation:micPulse 1s infinite;background:radial-gradient(circle at 35% 25%,#ffafd5,#b43d7e)}
.transcript{min-height:22px;margin:10px 0 0!important;color:#d3c9dd!important}
.confirm-actions,.print-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.confirm-actions button,.print-actions button{margin:0}
.confirmed{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--green);font-size:14px;margin-bottom:12px;animation:fade .4s}.confirmed i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 1.8s ease-in-out infinite}
.keep{display:flex;align-items:center;gap:16px;margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#0e0c14;text-align:left}
.keep canvas{width:88px;height:88px;border-radius:8px;flex:none}.keep b{display:block;color:#fff;font-size:14px;margin-bottom:4px}.keep span{font-size:12px;color:var(--muted)}
.why{margin-top:16px;border:1px solid var(--line);border-radius:19px;background:#12101bcc;padding:20px}
.why .eyebrow{margin-bottom:10px}
.why ol{list-style:none;margin:0;padding:0}
.why li{display:flex;gap:12px;padding:12px 0;border-top:1px solid #ffffff10;animation:fade .45s var(--ease) both}
.why li:first-child{border-top:0}.why li:nth-child(2){animation-delay:.08s}.why li:nth-child(3){animation-delay:.16s}
.why .n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--mono);color:#0b0812;background:var(--accent,var(--purple))}
.why small{display:block;font-size:11px;color:var(--dim);letter-spacing:.06em}
.why strong{display:block;margin-top:3px;font-size:15px;color:#fff;font-weight:600}
.why span{display:block;margin-top:3px;font-size:13px;line-height:1.55;color:var(--muted)}
.traits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.trait{text-align:center}.trait-track{height:4px;background:#ffffff1b;border-radius:99px;margin-bottom:6px;overflow:hidden}
.trait-track i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--purple),var(--accent,var(--pink)));transform-origin:left;animation:grow 1s var(--ease) .3s both}
@keyframes grow{from{transform:scaleX(0)}}
.trait span{font:11px var(--mono);color:#a89fb5}
.disclaimer{text-align:center;font-size:11px;color:#7d7588;margin:16px auto 0;max-width:590px;line-height:1.65}
.links{display:flex;justify-content:center;gap:24px;margin-top:6px}
.link{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:0;background:none;color:#a39bae;font-size:13px;padding:0}.link:hover{color:#fff}

/* 下载页 */
.download{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 0}
.download h2{margin:8px 0 16px}
.preview{width:100%;display:grid;place-items:center;min-height:200px;color:var(--muted);font:13px var(--mono)}
.preview img{display:block;max-width:100%;max-height:62dvh;border-radius:16px;box-shadow:0 30px 80px #0009;animation:posterIn .7s var(--ease) both}
.download p{margin:14px 0 4px;font-size:13px}.download .primary{max-width:420px}

/* 弹层、提示、打印 */
dialog{width:min(92vw,400px);max-height:92dvh;padding:52px 16px 16px;border:1px solid var(--line);border-radius:20px;background:#131019;color:#fff}
dialog[open]{animation:posterIn .45s var(--spring)}dialog::backdrop{background:#000d}
dialog img{display:block;width:100%;max-height:62dvh;object-fit:contain;border-radius:12px}
dialog .hint{margin:12px 0 0;font-size:13px;color:var(--muted);text-align:center}
.dialog-close{position:absolute;top:4px;right:6px;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--muted);font-size:24px}
#toast{position:fixed;left:50%;bottom:calc(6vh + env(safe-area-inset-bottom));transform:translate(-50%,8px);padding:12px 18px;border-radius:12px;background:#221a30;border:1px solid var(--line);font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .4s var(--ease);z-index:9}
#toast.show{opacity:1;transform:translate(-50%,0)}
#print-root{display:none}

/* ===== 内页动效：延续首页的光环 / 香调词 / 雾气 / 粒子（首页与结果页不出现） ===== */
/* 背景上升的香气粒子 */
.motes{position:absolute;inset:0;opacity:0;transition:opacity 1s}
body[data-screen=interview] .motes,body[data-screen=quiz] .motes,body[data-screen=generating] .motes{opacity:1}
.motes i{position:absolute;bottom:-24px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 calc(var(--s) * 3) var(--c);opacity:0;animation:mote var(--d) linear var(--delay) infinite}
@keyframes mote{0%{transform:translate(0,0);opacity:0}12%{opacity:.75}50%{transform:translate(var(--sway),-55vh)}88%{opacity:.5}100%{transform:translate(0,-112vh);opacity:0}}
/* 面板里的传送门光环（首页同款，缩小、放在面板角落） */
.orbit{position:absolute;z-index:-1;pointer-events:none;display:grid;place-items:center;width:300px;height:300px}
.orbit .ring{position:absolute;border:1px solid #b597ff38;border-radius:50%;animation:portalSpin 18s linear infinite}
.orbit .r1{width:290px;height:210px;transform:rotate(-13deg)}.orbit .r2{width:230px;height:270px;border-style:dashed;animation-direction:reverse;animation-duration:25s}.orbit .r3{width:170px;height:170px;border-color:#ff7eb52e;animation-duration:12s}
.orbit .mist-line{width:70px;height:130px}
.interview-panel .orbit{top:-96px;right:-110px}
.question-panel .orbit{right:-120px;bottom:-130px;opacity:.85}
/* 访谈：头像外的两圈轨道 */
.host-avatar .halo{position:absolute;inset:-11px;border:1px dashed #c8b3ff66;border-radius:50%;animation:spin 12s linear infinite}
.host-avatar .halo.b{inset:-17px -8px;border-style:solid;border-color:#ff7eb540;border-radius:50%;animation:portalSpin 7s linear infinite reverse}
.host{position:relative}
.float-words{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.scent-word.inline{position:relative;left:auto;right:auto;top:auto;bottom:auto;white-space:nowrap}
.float-words .scent-word:nth-child(2){margin-right:14px;animation-delay:-1.8s}
.scent-word.swap{animation:wordSwap .7s var(--ease) both,scentDrift 5s ease-in-out .7s infinite}
@keyframes wordSwap{from{opacity:0;filter:blur(6px);transform:translateY(8px)}}
/* 点中时周围闪几颗小星星 */
.twinkle{position:fixed;z-index:30;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);pointer-events:none;background:var(--c);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 3px var(--c));animation:twinkle var(--t) ease-out var(--d) both}
@keyframes twinkle{0%{transform:scale(0) rotate(0);opacity:0}40%{transform:scale(1) rotate(45deg);opacity:1}100%{transform:translateY(-6px) scale(0) rotate(90deg);opacity:0}}
/* Kiro 正在回应时，回应框边缘流光 */
.understanding.show{overflow:hidden}
.understanding.show:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,transparent 35%,#c8b3ff22 50%,transparent 65%);transform:translateX(-100%);animation:shine 3s ease-in-out .3s infinite}
/* 题目：当前维度的两极像香调词一样漂浮 */
.pole{position:absolute;z-index:1;font-size:9px}
.question-panel .pole.pa{right:18px;top:18px}
.question-panel .pole.pb{right:58px;top:54px;animation-delay:-2.2s}
.pole.lean{border-color:#c8b3ff66;color:#fff;box-shadow:0 0 18px #9047ff55}
/* 生成：首页同款光环 + 雾气 + 逐个浮现的真实香调 */
.gen-stage{position:relative;width:min(92vw,440px);height:300px;margin:0 auto 6px;display:grid;place-items:center;transition:height .6s var(--ease)}
.gen-stage .portal-ring.one{width:300px;height:220px}.gen-stage .portal-ring.two{width:240px;height:280px}.gen-stage .portal-ring.three{display:none}
.gen-stage .loader-scene{margin:0}
.gen-word{opacity:0}
.gen-word.on{animation:wordSwap .7s var(--ease) both,scentDrift 5s ease-in-out .7s infinite;opacity:1}
.gen-stage .gen-word.a{left:0;top:22%}.gen-stage .gen-word.b{right:0;top:14%}.gen-stage .gen-word.c{right:4%;bottom:16%}.gen-stage .gen-word.d{left:5%;bottom:12%}
.generate.reveal .gen-stage{height:150px}
.generate.reveal .gen-stage .portal-ring,.generate.reveal .gen-stage .mist-line,.generate.reveal .gen-word{opacity:0;transition:opacity .5s}
@media(max-width:540px){.gen-stage{height:270px}.gen-stage .portal-ring.one{width:260px;height:190px}.gen-stage .portal-ring.two{width:205px;height:240px}.float-words .scent-word{font-size:8px;padding:6px 9px}.interview-panel .orbit{top:-110px;right:-140px}}
@media(max-width:360px){.float-words .scent-word:nth-child(2){display:none}}

/* 换屏衔接：支持 View Transitions 的浏览器淡入上移、题目横滑、海报从候选卡放大 */
::view-transition-old(root){animation:vtOut .26s cubic-bezier(.5,0,.75,0) both}
::view-transition-new(root){animation:vtIn .45s var(--ease) .05s both}
html.fwd::view-transition-old(root){animation:vtOutL .26s cubic-bezier(.5,0,.75,0) both}html.fwd::view-transition-new(root){animation:vtInR .42s var(--ease) both}
html.bwd::view-transition-old(root){animation:vtOutR .26s cubic-bezier(.5,0,.75,0) both}html.bwd::view-transition-new(root){animation:vtInL .42s var(--ease) both}
::view-transition-group(poster){animation-duration:.7s;animation-timing-function:var(--ease)}
::view-transition-group(progress){animation-duration:.45s}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
@keyframes vtOutL{to{opacity:0;transform:translateX(-26px)}}@keyframes vtInR{from{opacity:0;transform:translateX(34px)}}
@keyframes vtOutR{to{opacity:0;transform:translateX(26px)}}@keyframes vtInL{from{opacity:0;transform:translateX(-34px)}}

@media(max-width:540px){.shell{padding-left:16px;padding-right:16px}.brand span{display:none}.wide{display:none}.question-panel h2{min-height:110px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after,::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;transition:none!important}}
@media print{@page{size:A5 portrait;margin:0}html,body{height:auto;background:#fff!important;overflow:visible}.shell,.ambient,dialog,#toast{display:none!important}body:before{display:none}#print-root{display:block!important;width:148mm;height:210mm}#print-root img{display:block;width:148mm;height:210mm;object-fit:contain}}