:root{--ink:#edf1ee;--muted:#bac7c5;--paper:#f7f4ec;--night:#17252c;--night2:#223b42;--accent:#c86b4b;--gold:#e5b56d;--teal:#5f9692;--line:rgb(237 241 238 / 22%);--shadow:0 24px 80px rgb(2 12 16 / 38%)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--night);font:16px/1.65 "Microsoft YaHei","PingFang SC",system-ui,sans-serif}button,input,select{font:inherit}.vn-app{width:100%;height:100%}[hidden]{display:none!important}
.title-screen{position:relative;width:100%;height:100%;min-height:620px;overflow:hidden;color:var(--ink);background:#0d1b22}
.title-cover-art{position:absolute;z-index:0;inset:0;background-image:linear-gradient(90deg,rgba(7,20,26,.68) 0%,rgba(7,20,26,.46) 27%,rgba(7,20,26,.12) 53%,rgba(7,20,26,.02) 100%),url('../../assets/images/visual-novel/title/cover-five-friends.png');background-position:center;background-size:cover;background-repeat:no-repeat}
.title-atmosphere{position:absolute;z-index:1;inset:0;overflow:hidden;opacity:.12;pointer-events:none}.title-window{position:absolute;inset:0 0 0 46%;background:linear-gradient(180deg,rgba(230,184,116,.22),transparent 68%),repeating-linear-gradient(90deg,transparent 0 25%,rgba(217,229,222,.08) 25% 25.5%);clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}.title-light{position:absolute;width:60vw;height:120vh;right:-8vw;top:-30vh;background:radial-gradient(ellipse,rgba(246,205,139,.24),transparent 62%);transform:rotate(-14deg)}.title-desk{position:absolute;width:62%;height:29%;right:-4%;bottom:0;background:linear-gradient(165deg,#1a2d31,#0d1d23);clip-path:polygon(16% 18%,100% 0,100% 100%,0 100%)}.title-monitor{display:none}
.title-topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;width:min(1280px,calc(100% - 48px));margin:auto;padding:24px 0;border-bottom:1px solid var(--line)}.back-link{color:var(--muted);text-decoration:none}.back-link:hover{color:#fff}.language-select,.chrome-button{min-height:38px;padding:7px 13px;color:var(--ink);border:1px solid var(--line);background:rgba(17,34,41,.42);backdrop-filter:blur(12px);cursor:pointer}.language-select option{color:#15252b;background:#fff}
.title-copy{position:relative;z-index:2;width:min(670px,calc(100% - 48px));margin-left:max(24px,calc((100% - 1280px)/2));padding-top:clamp(70px,13vh,150px)}.eyebrow,.modal-kicker{margin:0 0 12px;color:var(--gold);font-size:.75rem;font-weight:800;letter-spacing:.22em}.title-logo{position:relative;display:table;margin-left:-.08em}.title-copy h1{position:relative;margin:0;color:#f5f1e6;font:600 clamp(3.2rem,6.8vw,6.8rem)/.9 "STXinwei","FZKai-Z03","KaiTi","DFKai-SB",cursive;letter-spacing:.02em;white-space:nowrap;text-shadow:0 8px 34px rgba(0,0,0,.28),2px 2px 0 rgba(12,27,32,.35)}.title-spark{position:absolute;color:var(--gold);font:700 clamp(1.3rem,2.8vw,2.5rem)/1 Georgia,serif;filter:drop-shadow(0 4px 10px rgba(229,181,109,.3));animation:title-spark-float 3.8s ease-in-out infinite}.title-spark-left{left:-.42em;top:-.34em}.title-spark-right{right:-.34em;bottom:-.12em;color:#dceee7;font-size:clamp(1rem,2.2vw,2rem);animation-delay:-1.8s}.title-english{margin:12px 0 0;color:var(--gold);font:600 clamp(.95rem,1.7vw,1.35rem)/1.1 "Segoe Print","Bradley Hand",cursive;letter-spacing:.08em;text-transform:none}.title-screen[data-language="en"] .title-copy h1{font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;font-size:clamp(2.35rem,5.2vw,5.4rem);letter-spacing:.04em}.title-screen[data-language="ja"] .title-copy h1{font-family:"Yuji Syuku","STKaiti","KaiTi",serif;font-size:clamp(3rem,6.3vw,6.3rem)}.title-screen[data-language="th"] .title-copy h1{font-family:"Leelawadee UI","Tahoma",sans-serif;font-size:clamp(2.7rem,5.6vw,5.7rem);letter-spacing:.01em}.title-subtitle{max-width:560px;margin:24px 0 0;color:#d8e0dc;font-size:clamp(1rem,2vw,1.2rem)}.release-note{color:var(--teal);font-size:.86rem;font-weight:800}.title-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}.title-button,.small-button{min-height:44px;padding:10px 18px;color:#26383c;border:1px solid #cbd2cb;background:var(--paper);font-weight:800;cursor:pointer;transition:transform .18s,border-color .18s,background .18s}.title-button:hover,.small-button:hover{transform:translateY(-1px);border-color:var(--accent)}.title-button.primary{color:#fff;border-color:var(--accent);background:var(--accent)}.title-button:disabled{opacity:.4;cursor:not-allowed;transform:none}.content-note{max-width:580px;margin-top:20px;color:#9eaeac;font-size:.76rem}.title-footer{position:absolute;right:28px;bottom:22px;color:rgba(237,241,238,.35);font:700 .72rem/1 monospace;letter-spacing:.18em}
.game-screen,.scene{width:100%;height:100%}.scene{position:relative;overflow:hidden;color:var(--ink);background:#273b40;transition:background .6s ease}.scene-art{position:absolute;inset:0;overflow:hidden;background:linear-gradient(165deg,rgba(236,200,147,.14),transparent 35%),linear-gradient(110deg,#20373d,#41585a)}.scene-background{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}.scene.has-painted-background .prop{display:none}.scene-art:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(9,21,25,.32),transparent 45%,rgba(238,196,132,.04));transition:opacity .4s}.scene-vignette{position:absolute;z-index:3;inset:0;pointer-events:none;background:radial-gradient(circle at 52% 46%,transparent 30%,rgba(4,14,18,.42) 110%)}
.cg-layer{position:absolute;z-index:4;inset:0;margin:0;overflow:hidden;background:#152329}.cg-layer img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;animation:cg-arrive .42s ease both}.scene.has-cg .scene-art{opacity:.18}.scene.has-cg .characters{opacity:0;visibility:hidden}
.prop{position:absolute;display:block;transition:transform .6s,opacity .6s}.prop-window{right:3%;top:0;width:36%;height:68%;border-left:7px solid rgba(13,36,42,.5);background:linear-gradient(180deg,rgba(224,190,135,.18),rgba(65,99,98,.16)),repeating-linear-gradient(90deg,transparent 0 31%,rgba(24,52,57,.5) 31% 33%)}.prop-desk{left:0;right:0;bottom:0;height:27%;background:linear-gradient(175deg,#263b3d,#13272c);clip-path:polygon(0 16%,100% 0,100% 100%,0 100%)}.prop-screen{left:12%;bottom:23%;width:27%;height:25%;border:8px solid #14262b;background:linear-gradient(145deg,#1b343a,#31555a);box-shadow:0 18px 50px rgba(0,0,0,.3)}.prop-screen:after{content:"MIGRATION / 00:17:42";position:absolute;inset:12%;color:rgba(185,218,208,.38);font:600 .7rem monospace;border-top:1px solid rgba(185,218,208,.25);padding-top:10px}.prop-lamp{left:42%;bottom:24%;width:12%;height:39%;border-left:7px solid #1a2b2e;transform:skew(-14deg)}.prop-lamp:after{content:"";position:absolute;left:-28px;top:0;width:64px;height:34px;background:#b4764f;clip-path:polygon(12% 0,90% 0,100% 100%,0 100%);box-shadow:0 22px 60px rgba(229,181,109,.25)}.prop-door{right:11%;bottom:19%;width:16%;height:62%;border:7px solid rgba(23,48,52,.7);background:linear-gradient(90deg,#30494b,#253a3e)}
.scene[data-scene="archive"] .scene-art{background:linear-gradient(100deg,#182b32,#4d534c)}.scene[data-scene="archive"] .prop-window{opacity:.1}.scene[data-scene="archive"] .prop-screen{transform:translate(22vw,3vh) scale(.75)}.scene[data-scene="archive"] .prop-door{transform:translateX(-48vw);width:25%;background:repeating-linear-gradient(0deg,#293e3f 0 18%,#425453 18% 20%)}.scene[data-scene="corridor"] .scene-art{background:linear-gradient(110deg,#1d3036,#6b6255)}.scene[data-scene="corridor"] .prop-screen,.scene[data-scene="corridor"] .prop-lamp{opacity:0}.scene[data-scene="corridor"] .prop-desk{height:18%;background:#18292d}.scene[data-scene="corridor"] .prop-door{right:24%;height:74%;width:22%;background:linear-gradient(90deg,#23383a,#796b59)}.scene[data-scene="phone"] .scene-art{filter:saturate(.7) brightness(.7)}
/* 每个叙事地点都保有不同的光线、空间物件与远景轮廓；即使暂未使用专属 CG，也不会落回控制室。 */
.scene[data-scene="balcony-night"] .scene-art{background:linear-gradient(180deg,#101b34 0 52%,#283541 52%);}.scene[data-scene="balcony-night"] .prop-window{left:0;right:auto;width:100%;height:52%;border:0;background:radial-gradient(circle at 20% 22%,#e8d9a3 0 1px,transparent 2px),radial-gradient(circle at 76% 13%,#e8d9a3 0 1px,transparent 2px),linear-gradient(180deg,transparent,#192735)}.scene[data-scene="balcony-night"] .prop-screen{left:8%;bottom:14%;width:84%;height:10%;background:#24323a}.scene[data-scene="balcony-night"] .prop-door{opacity:0}
.scene[data-scene="cafe"] .scene-art{background:linear-gradient(145deg,#514139,#bd8a61)}.scene[data-scene="cafe"] .prop-window{right:7%;width:30%;background:linear-gradient(180deg,rgba(255,220,157,.55),rgba(54,64,69,.22))}.scene[data-scene="cafe"] .prop-desk{height:31%;background:linear-gradient(175deg,#5d3828,#251b18)}.scene[data-scene="cafe"] .prop-screen{left:20%;bottom:27%;width:16%;height:18%;border-radius:50%;border-color:#3a2720;background:#b8794d}.scene[data-scene="cafe"] .prop-lamp{left:65%;bottom:30%}
.scene[data-scene="campus-clinic"] .scene-art{background:linear-gradient(115deg,#c8d8d1,#63807c)}.scene[data-scene="campus-clinic"] .prop-window{left:8%;right:auto;width:38%;height:48%;background:repeating-linear-gradient(90deg,rgba(240,250,247,.8) 0 11%,rgba(98,137,132,.28) 11% 13%)}.scene[data-scene="campus-clinic"] .prop-desk{height:25%;background:#dce8e2}.scene[data-scene="campus-clinic"] .prop-screen{left:58%;bottom:28%;width:20%;height:28%;border-color:#4e7771;background:#eaf2ee}.scene[data-scene="campus-clinic"] .prop-lamp{opacity:0}
.scene[data-scene="classroom"] .scene-art{background:linear-gradient(130deg,#34444d,#86958c)}.scene[data-scene="classroom"] .prop-window{right:5%;width:43%;height:55%;background:repeating-linear-gradient(90deg,rgba(206,225,215,.26) 0 15%,rgba(24,47,52,.45) 15% 17%)}.scene[data-scene="classroom"] .prop-desk{height:34%;background:repeating-linear-gradient(0deg,#6d5946 0 10%,#473a31 10% 15%)}.scene[data-scene="classroom"] .prop-screen{left:17%;bottom:39%;width:35%;height:22%;background:#25454a}.scene[data-scene="classroom"] .prop-door{right:8%;height:63%;width:15%}
.scene[data-scene="desk-night"],.scene[data-scene="writing-desk"]{background:#19272d}.scene[data-scene="desk-night"] .scene-art,.scene[data-scene="writing-desk"] .scene-art{background:radial-gradient(circle at 47% 30%,rgba(238,189,111,.45),transparent 20%),linear-gradient(145deg,#1a2a30,#3b4a45)}.scene[data-scene="desk-night"] .prop-desk,.scene[data-scene="writing-desk"] .prop-desk{height:43%;background:#2e211d}.scene[data-scene="desk-night"] .prop-screen,.scene[data-scene="writing-desk"] .prop-screen{left:29%;bottom:35%;width:36%;height:24%;background:#172e34}.scene[data-scene="desk-night"] .prop-door,.scene[data-scene="writing-desk"] .prop-door{opacity:0}
.scene[data-scene="editing-room"] .scene-art,.scene[data-scene="studio"] .scene-art{background:linear-gradient(125deg,#14262e,#4f5455)}.scene[data-scene="editing-room"] .prop-screen,.scene[data-scene="studio"] .prop-screen{left:8%;bottom:23%;width:31%;height:34%}.scene[data-scene="editing-room"] .prop-window,.scene[data-scene="studio"] .prop-window{right:3%;width:28%;height:62%;background:repeating-linear-gradient(90deg,rgba(146,171,165,.22) 0 12%,rgba(18,35,41,.65) 12% 14%)}.scene[data-scene="editing-room"] .prop-desk,.scene[data-scene="studio"] .prop-desk{height:29%}
.scene[data-scene="exhibition-hall"] .scene-art{background:linear-gradient(120deg,#232d35,#84745e)}.scene[data-scene="exhibition-hall"] .prop-window{left:12%;right:auto;width:20%;height:62%;background:#26353a}.scene[data-scene="exhibition-hall"] .prop-screen{left:42%;bottom:24%;width:18%;height:42%;border-color:#c6aa78;background:#e0d4b6}.scene[data-scene="exhibition-hall"] .prop-door{right:13%;height:72%;width:19%;background:#352c2a}
.scene[data-scene="hotel-lobby"] .scene-art{background:linear-gradient(145deg,#28373b,#a0775f)}.scene[data-scene="hotel-lobby"] .prop-window{left:0;right:auto;width:42%;height:70%;background:linear-gradient(180deg,rgba(245,209,150,.22),transparent)}.scene[data-scene="hotel-lobby"] .prop-desk{height:33%;background:#38271f}.scene[data-scene="hotel-lobby"] .prop-screen{left:56%;bottom:30%;width:23%;height:18%;border-color:#6e4c3d;background:#b28b65}.scene[data-scene="hotel-room"] .scene-art{background:linear-gradient(135deg,#45394a,#9b756c)}.scene[data-scene="hotel-room"] .prop-desk{height:38%;background:#5c433a}.scene[data-scene="hotel-room"] .prop-screen{left:13%;bottom:25%;width:60%;height:26%;border-color:#8b6c62;background:#d3bca8}.scene[data-scene="hotel-room"] .prop-lamp{left:76%;bottom:34%}
.scene[data-scene="library-window"],.scene[data-scene="old-library"] .scene-art{background:linear-gradient(120deg,#203238,#746750)}.scene[data-scene="library-window"] .prop-window,.scene[data-scene="old-library"] .prop-window{left:7%;right:auto;width:25%;height:64%;background:linear-gradient(180deg,rgba(225,204,151,.25),rgba(41,57,54,.35))}.scene[data-scene="library-window"] .prop-door,.scene[data-scene="old-library"] .prop-door{right:9%;width:48%;height:65%;background:repeating-linear-gradient(0deg,#2b3a38 0 9%,#6b5d47 9% 11%)}.scene[data-scene="library-window"] .prop-screen,.scene[data-scene="old-library"] .prop-screen{opacity:0}
.scene[data-scene="pharmacy"] .scene-art{background:linear-gradient(115deg,#d5e0dc,#587b76)}.scene[data-scene="pharmacy"] .prop-window{right:10%;width:25%;height:72%;background:repeating-linear-gradient(0deg,#e9efea 0 9%,#80a49a 9% 11%)}.scene[data-scene="pharmacy"] .prop-desk{height:28%;background:#dbe8e1}.scene[data-scene="pharmacy"] .prop-screen{left:15%;bottom:29%;width:25%;height:18%;border-color:#497d72;background:#eef5ef}.scene[data-scene="rain-room"] .scene-art{background:linear-gradient(130deg,#1f2c38,#5a7180)}.scene[data-scene="rain-room"] .prop-window{right:7%;width:55%;height:78%;background:repeating-linear-gradient(105deg,transparent 0 12px,rgba(202,222,235,.25) 12px 14px),linear-gradient(180deg,#3e5b68,#182934)}.scene[data-scene="rain-room"] .prop-desk{height:23%;background:#25363b}.scene[data-scene="rain-room"] .prop-screen{opacity:0}
.scene[data-scene="riverside"] .scene-art{background:linear-gradient(180deg,#304b64 0 50%,#5b8c93 50% 66%,#1d3a3b 66%)}.scene[data-scene="riverside"] .prop-window,.scene[data-scene="riverside"] .prop-screen,.scene[data-scene="riverside"] .prop-door{opacity:0}.scene[data-scene="riverside"] .prop-desk{height:18%;background:#223837}.scene[data-scene="rooftop"] .scene-art,.scene[data-scene="rooftop-dawn"] .scene-art{background:linear-gradient(180deg,#385060 0 60%,#172e32 60%)}.scene[data-scene="rooftop-dawn"] .scene-art{background:linear-gradient(180deg,#c59079 0 56%,#3e5e61 56%)}.scene[data-scene="rooftop"] .prop-window,.scene[data-scene="rooftop-dawn"] .prop-window,.scene[data-scene="rooftop"] .prop-screen,.scene[data-scene="rooftop-dawn"] .prop-screen,.scene[data-scene="rooftop"] .prop-door,.scene[data-scene="rooftop-dawn"] .prop-door{opacity:0}.scene[data-scene="rooftop"] .prop-desk,.scene[data-scene="rooftop-dawn"] .prop-desk{height:14%;background:#1b3032}
.scene[data-scene="station"] .scene-art{background:linear-gradient(115deg,#21323a,#8f745d)}.scene[data-scene="station"] .prop-window{left:9%;right:auto;width:66%;height:50%;background:repeating-linear-gradient(90deg,rgba(220,201,157,.2) 0 14%,rgba(28,43,46,.6) 14% 16%)}.scene[data-scene="station"] .prop-desk{height:19%;background:#26363a}.scene[data-scene="station"] .prop-screen{left:58%;bottom:34%;width:19%;height:16%;background:#293f43}
/* 绘制完成的环境背景。保留前景遮罩与角色层，去除旧的 CSS 道具以免叠画。 */
.scene[data-scene="cafe"] .scene-art{background:linear-gradient(90deg,rgba(8,19,23,.16),transparent 52%,rgba(8,19,23,.1)),url("../../assets/images/visual-novel/backgrounds/cafe-evening.png") center/cover no-repeat}.scene[data-scene="classroom"] .scene-art{background:linear-gradient(90deg,rgba(8,19,23,.13),transparent 55%),url("../../assets/images/visual-novel/backgrounds/classroom-overcast.png") center/cover no-repeat}.scene[data-scene="library-window"] .scene-art,.scene[data-scene="old-library"] .scene-art{background:linear-gradient(90deg,rgba(8,19,23,.16),transparent 55%),url("../../assets/images/visual-novel/backgrounds/old-library-bluehour.png") center/cover no-repeat}.scene[data-scene="rooftop"] .scene-art{background:linear-gradient(90deg,rgba(8,19,23,.12),transparent 55%),url("../../assets/images/visual-novel/backgrounds/rooftop-sunset.png") center/cover no-repeat}.scene[data-scene="rooftop-dawn"] .scene-art{background:linear-gradient(90deg,rgba(242,172,123,.11),transparent 55%),url("../../assets/images/visual-novel/backgrounds/rooftop-sunset.png") center/cover no-repeat;filter:hue-rotate(-13deg) brightness(1.08)}.scene[data-scene="rain-room"] .scene-art{background:linear-gradient(90deg,rgba(8,19,23,.16),transparent 58%),url("../../assets/images/visual-novel/backgrounds/rain-room-night.png") center/cover no-repeat}.scene[data-scene="station"] .scene-art{background:linear-gradient(90deg,rgba(8,19,23,.18),transparent 58%),url("../../assets/images/visual-novel/backgrounds/station-night.png") center/cover no-repeat}.scene[data-scene="riverside"] .scene-art{background:linear-gradient(90deg,rgba(8,19,23,.08),transparent 55%),url("../../assets/images/visual-novel/backgrounds/riverside-morning.png") center/cover no-repeat}.scene[data-scene="cafe"] .prop,.scene[data-scene="classroom"] .prop,.scene[data-scene="library-window"] .prop,.scene[data-scene="old-library"] .prop,.scene[data-scene="rooftop"] .prop,.scene[data-scene="rooftop-dawn"] .prop,.scene[data-scene="rain-room"] .prop,.scene[data-scene="station"] .prop,.scene[data-scene="riverside"] .prop{opacity:0}
.game-topbar{position:absolute;z-index:20;left:24px;right:24px;top:18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.game-topbar .chrome-button:last-child{justify-self:end}.chapter-label{display:grid;justify-items:center;text-shadow:0 2px 15px rgba(0,0,0,.45)}.chapter-label span{color:var(--gold);font:800 .64rem/1.2 monospace;letter-spacing:.2em}.chapter-label strong{font:500 1rem Georgia,"Songti SC",serif}
.characters{position:absolute;z-index:5;inset:8% 4% 18%;overflow:hidden;pointer-events:none;transition:opacity .24s,visibility .24s}.characters.is-exploring{opacity:0;visibility:hidden}.character{position:absolute;bottom:-12%;width:min(35vw,430px);height:min(82vh,760px);overflow:hidden;filter:drop-shadow(0 22px 28px rgba(0,0,0,.28));transition:opacity .32s,transform .42s}.character[data-side="left"]{left:3%}.character[data-side="center"]{left:50%;transform:translateX(-50%)}.character[data-side="right"]{right:3%}.character.is-dim{opacity:.55}.character-sprite{display:block;width:116%;height:116%;margin-left:-8%;object-fit:contain;object-position:center top}.character-nameplate{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);padding:7px 13px;color:#24353a;background:rgba(250,247,239,.88);font-weight:800;white-space:nowrap}.character[data-mood="away"]{transform:translateX(8%)}.character[data-side="center"][data-mood="away"]{transform:translateX(-42%)}
.dialogue-panel{position:absolute;z-index:30;left:50%;bottom:max(72px,calc(env(safe-area-inset-bottom) + 62px));width:min(1120px,calc(100% - 48px));min-height:176px;transform:translateX(-50%);padding:22px 30px 24px;color:#23363b;border:1px solid rgba(238,235,225,.7);background:rgba(249,247,239,.94);box-shadow:var(--shadow);backdrop-filter:blur(14px)}.speaker-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.speaker{color:var(--accent);font-size:.92rem;letter-spacing:.08em}.progress-label{color:#75817e;font-size:.72rem}.dialogue-text{display:block;width:100%;min-height:82px;padding:12px 0 0;color:#26383d;border:0;background:transparent;font-size:clamp(1rem,1.8vw,1.18rem);line-height:1.85;text-align:left;cursor:pointer}.dialogue-text:focus-visible{outline:2px solid var(--teal);outline-offset:4px}.next-indicator{position:absolute;right:24px;bottom:12px;color:var(--accent);font-size:1.3rem;animation:bob 1.1s ease-in-out infinite}.choices{display:grid;gap:8px;margin-top:10px}.choice{width:100%;padding:11px 15px;color:#24383d;border:1px solid #bcc7c2;background:#fffefa;text-align:left;cursor:pointer;transition:border .18s,transform .18s,background .18s}.choice:hover,.choice:focus-visible{transform:translateX(5px);border-color:var(--accent);background:#fff9f2;outline:0}.choice-index{display:inline-grid;width:1.7em;height:1.7em;margin-right:9px;place-items:center;color:#fff;border-radius:50%;background:var(--accent);font:800 .72rem/1 monospace}
.quickbar{position:absolute;z-index:35;left:50%;bottom:max(18px,env(safe-area-inset-bottom));display:flex;transform:translateX(-50%);border:1px solid var(--line);background:rgba(14,28,33,.7);backdrop-filter:blur(14px)}.quickbar button{min-height:38px;padding:7px 13px;color:#dfe8e3;border:0;border-right:1px solid var(--line);background:transparent;font-size:.74rem;cursor:pointer}.quickbar button:last-child{border-right:0}.quickbar button.active{color:var(--gold);background:rgba(229,181,109,.12)}
.explore-layer{position:absolute;z-index:25;inset:0}.hotspot{position:absolute;width:34px;height:34px;border:1px solid rgba(255,250,230,.8);border-radius:50%;background:rgba(229,181,109,.22);box-shadow:0 0 0 9px rgba(229,181,109,.08),0 0 25px rgba(229,181,109,.35);cursor:pointer;animation:pulse 1.8s infinite}.hotspot.visited{background:rgba(95,150,146,.55);box-shadow:none;animation:none}.hotspot-label{position:absolute;left:50%;top:calc(100% + 8px);display:none;min-width:max-content;padding:5px 8px;color:#24373b;border:1px solid rgba(255,250,230,.75);background:rgba(255,252,244,.94);box-shadow:0 5px 14px rgba(5,18,22,.25);font-size:.7rem;font-weight:800;transform:translateX(-50%);white-space:nowrap}.hotspot:hover .hotspot-label,.hotspot:focus-visible .hotspot-label{display:block}.explore-card{position:absolute;right:24px;top:82px;width:min(330px,calc(100% - 48px));padding:18px;color:#24373b;border:1px solid #d6d0c2;background:rgba(250,248,240,.94);box-shadow:var(--shadow)}.explore-card h2{margin:4px 0 6px;font:600 1.3rem Georgia,"Songti SC",serif}.explore-card p{margin:0 0 12px}.explore-count{color:var(--accent);font-size:.72rem;font-weight:800}.small-button{min-height:36px;padding:6px 12px;font-size:.76rem}.cg-explore{background:linear-gradient(90deg,rgba(7,17,22,.22),transparent 38%,rgba(7,17,22,.08))}.cg-explore .explore-card{top:max(76px,env(safe-area-inset-top));right:24px;width:min(278px,calc(100% - 48px));padding:15px 16px;border-color:rgba(255,250,234,.72);background:rgba(249,247,239,.9);backdrop-filter:blur(12px)}.cg-explore .explore-card h2{font-size:1.13rem}.cg-explore .explore-card p{font-size:.84rem;line-height:1.55}.cg-explore .hotspot{width:28px;height:28px;background:rgba(228,177,87,.34)}.cg-explore .hotspot-label{display:block;opacity:.88;pointer-events:none}.cg-explore .hotspot:hover .hotspot-label,.cg-explore .hotspot:focus-visible .hotspot-label{opacity:1}
.phone-layer{position:absolute;z-index:28;inset:0;display:grid;place-items:center;background:rgba(7,18,22,.5);backdrop-filter:blur(5px)}.phone-shell{width:min(380px,calc(100% - 28px));height:min(650px,78vh);overflow:hidden;color:#22343a;border:9px solid #19292e;border-radius:32px;background:#eef1ed;box-shadow:0 30px 90px rgba(0,0,0,.5)}.phone-shell header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;min-height:58px;padding:0 8px;border-bottom:1px solid #cdd5d0;background:#fff;text-align:center}.phone-shell header button{border:0;background:transparent;font-size:2rem;cursor:pointer}.phone-messages{height:calc(100% - 98px);padding:16px;overflow:auto}.bubble{max-width:82%;margin:0 0 10px;padding:9px 12px;border-radius:14px;background:#fff}.bubble.me{margin-left:auto;color:#fff;background:#477d78}.phone-typing{height:40px;padding:8px 16px;color:#788782;font-size:.75rem}
.toast{position:absolute;z-index:80;left:50%;top:74px;transform:translate(-50%,-10px);padding:8px 14px;color:#1f3439;background:#fff8eb;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s}.toast.show{transform:translate(-50%,0);opacity:1}
.modal{width:min(720px,calc(100% - 28px));max-height:min(86vh,820px);padding:0;color:#25383c;border:1px solid #c9cdc5;background:var(--paper);box-shadow:0 30px 90px rgba(0,0,0,.38)}.modal::backdrop{background:rgba(8,20,24,.7);backdrop-filter:blur(5px)}.modal-card{padding:clamp(24px,5vw,42px)}.modal-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.modal-card h2{margin:0 0 12px;font:600 clamp(1.8rem,5vw,2.8rem)/1.05 Georgia,"Songti SC",serif}.modal-card p{color:#5f706f}.modal-card label{display:grid;gap:7px;margin:16px 0;color:#3b5153;font-weight:800}.modal-card input[type="text"],.modal-card input:not([type]),.modal-card select{width:100%;min-height:44px;padding:8px 11px;color:#24373b;border:1px solid #bfc8c3;background:#fff}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.icon-button{width:38px;height:38px;color:#31484b;border:1px solid #c3cbc6;background:transparent;font-size:1.4rem;cursor:pointer}.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.menu-grid button{min-height:52px;color:#274044;border:1px solid #c7cec8;background:#fff;cursor:pointer}.wide-card{width:100%}.save-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:58vh;overflow:auto}.save-slot{min-height:106px;padding:14px;color:#33494c;border:1px solid #c9d0ca;background:#fff;text-align:left;cursor:pointer}.save-slot strong,.save-slot span{display:block}.save-slot span{margin-top:8px;color:#778380;font-size:.76rem}.history-list{max-height:60vh;overflow:auto;border-top:1px solid #d5d7cf}.history-item{padding:12px 2px;border-bottom:1px solid #dedfd8}.history-item strong{display:block;color:var(--accent);font-size:.75rem}.history-item p{margin:3px 0;color:#304548}.check-row{grid-template-columns:auto 1fr!important;align-items:center}.setting-note{font-size:.78rem}.trend-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.trend{padding:12px;border:1px solid #d0d3cc;background:#fff}.trend strong{display:block;color:var(--accent)}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.title-actions{display:grid;width:min(430px,100%);gap:2px;padding:7px;border:1px solid rgba(231,239,233,.14);border-left-color:rgba(229,181,109,.62);background:rgba(10,25,31,.32);box-shadow:0 18px 55px rgba(0,0,0,.14);backdrop-filter:blur(12px)}.title-actions .title-button{min-height:48px;padding:9px 15px;color:#e8efea;border:0;background:transparent;text-align:left;font-weight:600;letter-spacing:.03em;box-shadow:none}.title-actions .title-button:hover,.title-actions .title-button:focus-visible{transform:none;color:#fff;background:rgba(240,244,238,.09);outline:0}.title-actions .title-button.primary{color:#fff;border:0;background:rgba(200,107,75,.18);box-shadow:inset 3px 0 0 var(--accent)}.title-actions .title-button:disabled{color:#94a29f;background:transparent;opacity:.5}
.game-topbar{pointer-events:none}.game-topbar>*{pointer-events:auto}.chrome-button.chrome-icon{display:grid;width:42px;height:42px;min-height:42px;padding:0;place-items:center;color:rgba(243,246,241,.82);border:1px solid rgba(237,241,238,.13);border-radius:50%;background:rgba(10,25,30,.22);box-shadow:0 7px 26px rgba(0,0,0,.1);backdrop-filter:blur(10px);transition:color .18s,background .18s,border-color .18s,transform .18s}.chrome-button.chrome-icon>span[aria-hidden]{font:300 1.65rem/1 sans-serif;transform:translateY(-1px)}#menuButton.chrome-icon>span[aria-hidden]{font-size:1.4rem;transform:translateY(-4px)}.chrome-button.chrome-icon:hover,.chrome-button.chrome-icon:focus-visible{color:#fff;border-color:rgba(229,181,109,.55);background:rgba(10,25,30,.5);transform:translateY(-1px);outline:0}.chapter-label{min-width:150px;padding:6px 18px 7px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(8,22,27,.3),transparent);backdrop-filter:blur(6px)}
.dialogue-panel{transition:opacity .24s ease,transform .3s cubic-bezier(.2,.75,.25,1)}.speaker-row{min-height:30px}.dialogue-collapse{display:grid;width:34px;height:28px;margin:-7px -12px 0 auto;padding:0;place-items:center;color:#76817e;border:0;border-radius:999px;background:transparent;cursor:pointer;transition:color .18s,background .18s}.dialogue-collapse:hover,.dialogue-collapse:focus-visible{color:var(--accent);background:rgba(200,107,75,.09);outline:0}.dialogue-collapse span{font-size:1.2rem;line-height:1}.dialogue-restore{position:absolute;z-index:38;left:50%;bottom:max(68px,calc(env(safe-area-inset-bottom) + 58px));display:flex;min-height:36px;padding:6px 13px;align-items:center;gap:7px;transform:translateX(-50%);color:rgba(240,244,239,.8);border:1px solid rgba(237,241,238,.17);border-radius:999px;background:rgba(11,27,32,.52);box-shadow:0 10px 30px rgba(0,0,0,.18);backdrop-filter:blur(12px);cursor:pointer;font-size:.72rem}.dialogue-restore:hover,.dialogue-restore:focus-visible{color:#fff;border-color:rgba(229,181,109,.55);outline:0}.dialogue-restore span:first-child{font-size:1rem}.dialogue-hidden .dialogue-panel{opacity:0;transform:translate(-50%,calc(100% + 90px));pointer-events:none}.ui-hidden .dialogue-restore{display:none!important}
.ui-hidden .game-topbar,.ui-hidden .dialogue-panel,.ui-hidden .quickbar{opacity:0;pointer-events:none}.ui-hidden:after{content:"点击任意位置恢复界面";position:absolute;right:18px;bottom:18px;color:rgba(255,255,255,.6);font-size:.72rem}
@keyframes bob{50%{transform:translateY(4px)}}@keyframes pulse{50%{transform:scale(1.12)}}@keyframes title-spark-float{50%{transform:translateY(-4px) rotate(8deg);opacity:.78}}@keyframes cg-arrive{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
@media(max-width:720px){.title-screen{min-height:0}.title-topbar{width:calc(100% - 28px);padding-top:max(14px,env(safe-area-inset-top))}.title-copy{width:calc(100% - 34px);margin-left:17px;padding-top:clamp(54px,9vh,82px)}.title-copy h1{font-size:clamp(2.75rem,13.4vw,3.45rem);letter-spacing:-.1em;white-space:nowrap}.title-monitor{width:55vw;right:-12%;opacity:.5}.title-actions{display:grid;grid-template-columns:1fr;width:100%;padding:5px}.title-button{padding-inline:10px}.game-topbar{left:10px;right:10px;top:max(8px,env(safe-area-inset-top))}.chrome-button.chrome-icon{width:38px;height:38px;min-height:38px}.chapter-label{min-width:116px;padding-inline:10px}.characters{inset:14% 0 32%}.character{width:52vw;height:50vh}.character[data-side="left"]{left:-8%}.character[data-side="right"]{right:-8%}.dialogue-panel{bottom:max(62px,calc(env(safe-area-inset-bottom) + 54px));width:calc(100% - 16px);min-height:196px;padding:16px 17px 18px}.dialogue-collapse{margin:-4px -7px 0 auto}.dialogue-text{font-size:1rem;line-height:1.75}.dialogue-restore{bottom:max(58px,calc(env(safe-area-inset-bottom) + 50px))}.quickbar{width:calc(100% - 16px);bottom:max(8px,env(safe-area-inset-bottom));justify-content:stretch}.quickbar button{flex:1;padding-inline:4px;font-size:.68rem}.explore-card{right:10px;top:66px;width:calc(100% - 20px);padding:12px}.cg-explore .explore-card{top:max(58px,env(safe-area-inset-top));right:10px;width:min(250px,calc(100% - 20px));padding:11px 12px}.cg-explore .explore-card p{margin-bottom:8px;font-size:.76rem}.cg-explore .hotspot-label{font-size:.62rem}.save-grid{grid-template-columns:1fr}.modal-card{padding:22px}.title-footer{display:none}}
  /* 探索说明不再遮挡画面：卡片本身让点击穿透，只有结束按钮接受点击。 */
  .explore-card{width:min(300px,calc(100% - 48px));padding:16px;border-color:rgba(255,250,235,.68);background:rgba(249,247,239,.58);box-shadow:0 14px 42px rgba(4,14,18,.18);backdrop-filter:blur(7px) saturate(.9);pointer-events:none}.explore-card .small-button{pointer-events:auto;background:rgba(255,253,246,.82)}.cg-explore{background:linear-gradient(90deg,rgba(7,17,22,.12),transparent 38%,rgba(7,17,22,.04))}.cg-explore .explore-card{width:min(264px,calc(100% - 48px));padding:14px 15px;border-color:rgba(255,250,234,.58);background:rgba(249,247,239,.48);backdrop-filter:blur(6px) saturate(.88)}
.chapter-transition{position:absolute;z-index:72;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:28px;color:#f4eee5;background:rgba(6,16,20,.58);backdrop-filter:blur(5px);text-align:center}.chapter-transition p{margin:0;color:var(--gold);font:800 .78rem/1.2 monospace;letter-spacing:.22em}.chapter-transition h2{margin:0;font:500 clamp(2.6rem,7vw,5.7rem)/1 Georgia,"Songti SC",serif}.chapter-transition button{min-width:104px;padding:10px 18px;color:#eef1ed;border:1px solid rgba(237,241,238,.45);background:rgba(15,35,40,.42);cursor:pointer}.chapter-transition button:hover{background:rgba(191,94,61,.54)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}

/* Keep the cover's left title area clear of the five-person artwork. */
@media(min-width:721px){
  .title-copy{width:min(560px,calc(100% - 48px));}
  .title-copy h1{font-size:clamp(3rem,4.3vw,5.4rem);line-height:.95;}
  .title-subtitle{max-width:520px;}
}
.settings-disclaimer{margin-top:20px;padding-top:16px;border-top:1px solid #d5d8d0;}
.settings-disclaimer .modal-kicker{margin-bottom:4px;color:var(--accent);font-size:.68rem;}
.settings-disclaimer .setting-note{margin:0;line-height:1.65;}

/*
 * Full-body portraits must not be cut by the character staging layer.
 * The source PNGs include transparent breathing room below the shoes; the
 * old `overflow:hidden` plus 116% sprite scale clipped that lower canvas,
 * which made feet disappear when a portrait was mounted in a scene.
 */
.characters{overflow:visible}
.character{overflow:visible}
.character-sprite{width:116%;height:116%;margin-left:-8%;object-fit:contain;object-position:center top}
.character-nameplate{display:none!important}

/* Chapter 04 uses the same full-body staging as Chapter 02.  The previous
 * compact 56vh override made characters look small and float too high above
 * the scene.  Keep the chapter-specific clothes/actions, but restore the
 * familiar scale, bottom anchor, and breathing room used by Chapter 02. */
.scene[data-chapter="chapter4"] .characters{inset:8% 4% 18%;}
.scene[data-chapter="chapter4"] .character{bottom:-12%;height:min(82vh,760px);}
.scene[data-chapter="chapter4"] .character-sprite{width:116%;height:116%;margin-left:-8%;}

@media(max-width:720px){
  .scene[data-chapter="chapter4"] .characters{inset:14% 0 32%;}
  .scene[data-chapter="chapter4"] .character{bottom:-8%;width:52vw;height:50vh;}
  .scene[data-chapter="chapter4"] .character-sprite{width:116%;height:116%;margin-left:-8%;}
}

/* Chapter 05 uses the same comfortable composition as Chapter 02: portraits
 * stay on their declared left/right side, leave an inner margin, and remain
 * large enough for the upper-body acting to read above the dialogue panel.
 * The transparent source canvas and overflow-visible staging keep the shoes
 * intact without forcing the character into the centre. */
.scene[data-chapter="chapter5"] .characters{inset:8% 4% 18%;}
.scene[data-chapter="chapter5"] .character{bottom:-12%;width:min(35vw,430px);height:min(82vh,760px);}
.scene[data-chapter="chapter5"] .character-sprite{width:116%;height:116%;margin-left:-8%;object-position:center top;}
.scene[data-chapter="chapter5"] .prop{display:none!important;}
.scene[data-chapter="chapter5"] .scene-background{display:block;}

@media(max-width:720px){
  .scene[data-chapter="chapter5"] .characters{inset:11% 0 29%;}
  .scene[data-chapter="chapter5"] .character{bottom:0;width:52vw;height:52vh;}
  .scene[data-chapter="chapter5"] .character-sprite{width:100%;height:100%;margin-left:0;object-position:center bottom;}
}

/* Chapter 06 portraits use the same readable two-side composition as the
 * earlier chapters.  Keep the full-body source canvas intact, anchor shoes
 * to the lower scene edge, and leave the dialogue panel clear. */
.scene[data-chapter="chapter6"] .characters{inset:8% 4% 18%;}
.scene[data-chapter="chapter6"] .character{bottom:-12%;width:min(35vw,430px);height:min(82vh,760px);}
.scene[data-chapter="chapter6"] .character-sprite{width:116%;height:116%;margin-left:-8%;object-position:center top;}
.scene[data-chapter="chapter6"] .prop{display:none!important;}

  @media(max-width:720px){
   .scene[data-chapter="chapter6"] .characters{inset:11% 0 29%;}
   .scene[data-chapter="chapter6"] .character{bottom:0;width:52vw;height:52vh;}
   .scene[data-chapter="chapter6"] .character-sprite{width:100%;height:100%;margin-left:0;object-position:center bottom;}
  }

  /* Chapter 07 keeps the established two-side composition so the new
   * accountability-arc wardrobe reads at the same scale as Chapters 2–6.
   * Do not let the portrait layer cover the dialogue panel or crop shoes. */
  .scene[data-chapter="chapter7"] .characters{inset:8% 4% 18%;}
  .scene[data-chapter="chapter7"] .character{bottom:-12%;width:min(35vw,430px);height:min(82vh,760px);}
  .scene[data-chapter="chapter7"] .character-sprite{width:116%;height:116%;margin-left:-8%;object-position:center top;}
  .scene[data-chapter="chapter7"] .prop{display:none!important;}

  /* Chapter 07's approved pack starts with one clean, full-body sprite per
   * character.  The script still needs visible acting between those beats,
   * so its semantic action value gets a restrained staging transform.  These
   * are deliberately small (they never move the feet out of the scene); a
   * future expression/pose asset can replace the alias without changing the
   * story data or its QA contract. */
  .scene[data-chapter="chapter7"] .character-sprite{transform-origin:center bottom;transition:transform .28s ease,filter .28s ease;}
  .scene[data-chapter="chapter7"] .character[data-action="open-posture"] .character-sprite{transform:translateY(-.6%) rotate(-.45deg);}
  .scene[data-chapter="chapter7"] .character[data-action="listening"] .character-sprite{transform:translateX(.7%) rotate(.35deg);}
  .scene[data-chapter="chapter7"] .character[data-action="relaxed-gesture"] .character-sprite{transform:translateX(-1%) rotate(-.7deg);}
  .scene[data-chapter="chapter7"] .character[data-action="animated-gesture"] .character-sprite{transform:translateY(-1%) rotate(-1deg);filter:saturate(1.04);}
  .scene[data-chapter="chapter7"] .character[data-action="hesitant"] .character-sprite{transform:translateX(1.1%) scale(.992);filter:saturate(.96);}
  .scene[data-chapter="chapter7"] .character[data-action="closed-posture"] .character-sprite{transform:translateX(1.2%) rotate(1deg);filter:saturate(.94);}
  .scene[data-chapter="chapter7"] .character[data-action="firm-gesture"] .character-sprite{transform:translateX(-.8%) rotate(.7deg);filter:contrast(1.03);}
  .scene[data-chapter="chapter7"] .character[data-action="prop-action"] .character-sprite{transform:translateX(-.5%) scale(1.006);}

  @media(max-width:720px){
   .scene[data-chapter="chapter7"] .characters{inset:11% 0 29%;}
   .scene[data-chapter="chapter7"] .character{bottom:0;width:52vw;height:52vh;}
   .scene[data-chapter="chapter7"] .character-sprite{width:100%;height:100%;margin-left:0;object-position:center bottom;}
  }

  /* Chapter 08 uses the same readable two-side staging as Chapters 2–7.
   * The final chapter has its own portrait files, but not a new scale: keep
   * faces readable above the dialogue panel while leaving the full shoes in
   * the scene.  Actions are intentionally restrained so the sprite itself,
   * rather than a CSS silhouette, remains the source of expression. */
  .scene[data-chapter="chapter8"] .characters{inset:8% 4% 18%;}
  .scene[data-chapter="chapter8"] .character{bottom:-12%;width:min(35vw,430px);height:min(82vh,760px);}
  .scene[data-chapter="chapter8"] .character-sprite{width:116%;height:116%;margin-left:-8%;object-position:center top;transform-origin:center bottom;transition:transform .28s ease,filter .28s ease;}
  .scene[data-chapter="chapter8"] .prop{display:none!important;}
  .scene[data-chapter="chapter8"] .character[data-action="open-posture"] .character-sprite{transform:translateY(-.6%) rotate(-.45deg);}
  .scene[data-chapter="chapter8"] .character[data-action="listening"] .character-sprite{transform:translateX(.7%) rotate(.35deg);}
  .scene[data-chapter="chapter8"] .character[data-action="relaxed-gesture"] .character-sprite{transform:translateX(-1%) rotate(-.7deg);}
  .scene[data-chapter="chapter8"] .character[data-action="animated-gesture"] .character-sprite{transform:translateY(-1%) rotate(-1deg);filter:saturate(1.04);}
  .scene[data-chapter="chapter8"] .character[data-action="hesitant"] .character-sprite{transform:translateX(1.1%) scale(.992);filter:saturate(.96);}
  .scene[data-chapter="chapter8"] .character[data-action="closed-posture"] .character-sprite{transform:translateX(1.2%) rotate(1deg);filter:saturate(.94);}
  .scene[data-chapter="chapter8"] .character[data-action="firm-gesture"] .character-sprite{transform:translateX(-.8%) rotate(.7deg);filter:contrast(1.03);}
  .scene[data-chapter="chapter8"] .character[data-action="prop-action"] .character-sprite{transform:translateX(-.5%) scale(1.006);}

  @media(max-width:720px){
   .scene[data-chapter="chapter8"] .characters{inset:11% 0 29%;}
   .scene[data-chapter="chapter8"] .character{bottom:0;width:52vw;height:52vh;}
   .scene[data-chapter="chapter8"] .character-sprite{width:100%;height:100%;margin-left:0;object-position:center bottom;}
  }

  /* Development preview: keep chapter headers on their own row and let
 * scene/CG shortcuts form a readable responsive grid instead of shrinking
 * every button into a one-character vertical strip. */
.preview-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:24px;align-items:stretch;justify-content:initial}
.preview-actions .title-button{width:100%;min-width:0;min-height:58px;padding:12px 14px;line-height:1.35;text-align:left;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.preview-actions .title-button.primary{grid-column:1/-1;min-height:50px;text-align:left;font-size:1rem}
#previewDialog{overflow:auto}
@media(max-width:900px){.preview-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.preview-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preview-actions .title-button{min-height:54px;padding:10px 11px;font-size:.9rem}}
@media(max-width:420px){.preview-actions{grid-template-columns:1fr}.preview-actions .title-button.primary{grid-column:1}}

/* Public title screen polish
 * The development shortcut remains available only to automated QA through
 * its internal hook; readers see a quieter, story-first landing page. */
.title-cover-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,16,21,.04) 48%,rgba(5,16,21,.46) 100%),radial-gradient(circle at 18% 42%,transparent 0 34%,rgba(4,14,19,.2) 82%);}
.title-topbar{padding-top:20px;padding-bottom:18px;border-bottom-color:rgba(237,241,238,.18);}
.back-link{display:inline-flex;align-items:center;min-height:38px;padding:7px 12px;border:1px solid transparent;border-radius:999px;color:rgba(231,239,235,.78);font-size:.88rem;letter-spacing:.02em;transition:color .2s,background .2s,border-color .2s;}
.back-link:hover,.back-link:focus-visible{color:#fff;background:rgba(10,28,34,.38);border-color:rgba(229,181,109,.35);outline:0;}
.language-select{min-width:112px;border-radius:999px;padding-inline:16px;color:#f2f3ed;background:rgba(10,27,33,.5);border-color:rgba(237,241,238,.28);font-size:.86rem;font-weight:700;letter-spacing:.04em;}
.title-copy{max-width:560px;padding:clamp(72px,12vh,142px) 28px 28px;border-left:1px solid rgba(229,181,109,.5);background:linear-gradient(90deg,rgba(7,21,27,.28),transparent 92%);}
.title-copy h1{letter-spacing:.035em;text-shadow:0 9px 36px rgba(0,0,0,.34),1px 2px 0 rgba(12,27,32,.36);}
.title-english{margin-top:16px;text-shadow:0 4px 16px rgba(0,0,0,.28);}
.title-subtitle{max-width:490px;margin-top:25px;color:rgba(233,239,235,.86);font-size:clamp(1rem,1.65vw,1.14rem);line-height:1.8;text-wrap:balance;}
.title-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(392px,100%);gap:10px;margin-top:34px;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;}
.title-actions .title-button{min-height:50px;padding:11px 16px;border:1px solid rgba(237,241,238,.27);border-radius:7px;color:#eef2ed;background:rgba(10,27,33,.56);text-align:center;font-weight:700;letter-spacing:.03em;box-shadow:0 12px 28px rgba(2,12,16,.14);backdrop-filter:blur(10px);transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;}
.title-actions .title-button:hover,.title-actions .title-button:focus-visible{transform:translateY(-2px);border-color:rgba(229,181,109,.7);background:rgba(21,45,51,.72);box-shadow:0 16px 32px rgba(2,12,16,.22);outline:0;}
.title-actions .title-button.primary{grid-column:1/-1;min-height:58px;color:#fff;background:linear-gradient(135deg,#c86b4b,#a9523c);border-color:rgba(255,218,170,.45);box-shadow:0 14px 32px rgba(139,57,43,.3),inset 0 1px 0 rgba(255,255,255,.18);}
.title-actions .title-button.primary:hover,.title-actions .title-button.primary:focus-visible{background:linear-gradient(135deg,#d27652,#b75b43);box-shadow:0 18px 36px rgba(139,57,43,.38),inset 0 1px 0 rgba(255,255,255,.22);}
#previewButton{display:none!important;}

@media(max-width:720px){
  .title-topbar{padding-bottom:13px;}
  .title-copy{width:calc(100% - 34px);padding:clamp(48px,8vh,78px) 0 20px;border-left:0;background:none;}
  .title-copy h1{font-size:clamp(2.7rem,12.8vw,3.5rem);letter-spacing:-.04em;}
  .title-subtitle{max-width:32rem;line-height:1.65;}
  .title-actions{grid-template-columns:1fr 1fr;width:100%;gap:8px;margin-top:26px;}
  .title-actions .title-button{min-height:48px;padding-inline:10px;font-size:.92rem;}
  .title-actions .title-button.primary{min-height:54px;}
}