@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;900&family=Noto+Serif+SC:wght@600;700;900&display=swap');

:root {
  --ink: #09101a;
  --navy: #101c2b;
  --steel: #95a7b8;
  --ice: #dbe4e9;
  --paper: #f2f0e9;
  --red: #b52228;
  --gold: #a48755;
  --line: rgba(202, 218, 228, .18);
  font-family: "Noto Sans SC", "PingFang SC", sans-serif;
  color: var(--ice);
  background: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); }
body { overflow-x: hidden; }
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.screen { display: none; min-height: 100svh; animation: enter .5s cubic-bezier(.2,.8,.2,1); }
.screen.is-active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }

.topbar { height: 74px; max-width: 1180px; margin: auto; padding: 0 28px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--steel); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; color: var(--paper); background: var(--red); font-family: "Noto Serif SC", serif; font-size: 21px; font-weight: 900; line-height: 1; letter-spacing: 0; }
.case-status { display: flex; align-items: center; gap: 8px; color: var(--steel); font-size: 11px; letter-spacing: .08em; }
.case-status i, .chat-person i { width: 6px; height: 6px; background: #6da588; border-radius: 50%; box-shadow: 0 0 0 5px rgba(109,165,136,.12); }
.hero { min-height: calc(100svh - 180px); max-width: 1180px; margin: auto; padding: 74px 28px 58px; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 8vw; }
.eyebrow { color: var(--steel); font-size: 10px; font-weight: 700; letter-spacing: .26em; }
.hero h1 { margin: 19px 0 25px; color: var(--paper); font-family: "Noto Serif SC", serif; font-size: clamp(62px, 8.2vw, 118px); font-weight: 900; line-height: .88; letter-spacing: -.08em; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1px var(--steel); }
.hero-line { margin: 0 0 36px; color: var(--ice); font-family: "Noto Serif SC", serif; font-size: clamp(20px, 2vw, 29px); font-weight: 600; line-height: 1.6; }
.primary-button { width: min(100%, 350px); min-height: 60px; padding: 0 8px 0 22px; border: 1px solid rgba(255,255,255,.22); background: var(--red); display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 700; transition: .25s; }
.primary-button b { display: grid; place-items: center; align-self: stretch; width: 52px; border-left: 1px solid rgba(255,255,255,.25); font-size: 20px; }
.primary-button:hover { background: #c82b31; transform: translateY(-2px); }
.fine-print { color: #657889; font-size: 10px; margin-top: 14px; }

.gu-portrait { position: relative; aspect-ratio: .8; max-height: 650px; overflow: hidden; border: 1px solid rgba(191,210,221,.22); background: linear-gradient(145deg,#aab9c3,#4d6070 55%,#1b2937); box-shadow: 30px 38px 70px rgba(0,0,0,.35); }
.portrait-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size: 42px 42px; }
.portrait-title { position: absolute; right: -6px; top: -45px; font: 900 220px/1 Arial; color: rgba(220,231,236,.1); letter-spacing: -.12em; }
.silhouette { position: absolute; inset: 13% 10% 0; filter: drop-shadow(15px 15px 18px rgba(0,0,0,.25)); }
.silhouette .head { position: absolute; width: 33%; height: 29%; top: 3%; left: 35%; border-radius: 45% 47% 42% 48%; background: linear-gradient(110deg,#24313c 48%,#151f29 49%); transform: rotate(-2deg); }
.silhouette .head:after { content:""; position: absolute; top: 17%; right: -8%; width: 22%; height: 44%; border-radius: 0 60% 55% 0; background:#151f29; }
.silhouette .body { position: absolute; left: 4%; right: 0; bottom: -12%; height: 78%; background: linear-gradient(112deg,#18242f 0 48%,#0c141e 49%); clip-path: polygon(36% 5%,63% 5%,100% 33%,92% 100%,5% 100%,0 34%); }
.silhouette .body:after { content:""; position:absolute; left:48%; top:0; width:2px; height:100%; background:rgba(177,197,209,.18); transform:rotate(-6deg); }
.silhouette .tie { position: absolute; top: 28%; left: 48%; width: 9%; height: 31%; background: #7f1d25; clip-path: polygon(50% 0,100% 18%,65% 100%,15% 100%,0 18%); }
.redaction { position:absolute; height: 8px; background: rgba(9,16,26,.72); }
.r1 { width: 35%; right: 4%; top: 25%; }.r2 { width: 22%; left: 5%; bottom: 28%; }
.profile-stamp { position:absolute; z-index:2; right:7%; top:46%; width:82px; height:82px; border:3px double #c43035; border-radius:50%; color:#c43035; display:grid; place-items:center; text-align:center; font:700 16px/1.25 "Noto Serif SC"; transform:rotate(12deg); opacity:.86; }
.profile-caption { position:absolute; left:0; right:0; bottom:0; padding:24px 26px; background:linear-gradient(transparent,rgba(4,9,15,.94)); display:flex; flex-direction:column; gap:7px; }
.profile-caption span { color:var(--steel); font-size:10px; letter-spacing:.15em; }.profile-caption strong { font-family:"Noto Serif SC"; font-size:17px; }
.stats-bar { min-height:106px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,170px) 1fr; align-items:center; justify-content:center; gap:30px; padding:18px 28px; background:rgba(255,255,255,.015); }
.stats-bar div { padding-right:28px; border-right:1px solid var(--line); }.stats-bar span { display:block; color:#657889; font-size:10px; margin-bottom:6px; }.stats-bar strong { font:600 22px "Noto Serif SC"; }.stats-bar p { justify-self:end; margin:0; color:#657889; font:600 13px/1.7 "Noto Serif SC"; }
.site-credit { padding: 10px 20px 14px; color: #415160; text-align: center; font-size: 9px; letter-spacing: .04em; }

.text-button,.icon-button { border:0; background:none; cursor:pointer; color:var(--steel); font-size:12px; }.text-button:hover{color:#fff}
.section-header { max-width:1124px; margin:0 auto; padding:70px 0 44px; }.section-header h2 { margin:12px 0; color:var(--paper); font:900 clamp(38px,5vw,68px)/1.2 "Noto Serif SC"; letter-spacing:-.055em; }.section-header h2 em { color:var(--steel); font-style:normal; }.section-header>p:last-child{color:#718597;font-size:14px}
.scene-list { max-width:1124px; margin:auto; padding-bottom:80px; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }
.scene-card { position:relative; min-height:180px; padding:28px 78px 28px 26px; color:inherit; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line); cursor:pointer; transition:.25s; }.scene-card:nth-child(odd){border-right:1px solid var(--line)}.scene-card:hover{background:rgba(191,210,221,.055);padding-left:34px}.scene-card .num{color:#526678;font:11px monospace}.scene-card h3{margin:28px 0 8px;color:var(--paper);font:700 23px "Noto Serif SC"}.scene-card p{margin:0;color:#718597;font-size:12px}.scene-card .arrow{position:absolute;right:28px;top:50%;font-size:24px;color:var(--red)}

.chat-screen { background:#e8e9e6; color:var(--ink); height:100svh; height:100dvh; min-height:0; overflow:hidden; flex-direction:column; }.chat-screen.is-active{display:flex}.chat-topbar { flex:none;height:68px; padding:0 max(20px,calc((100% - 760px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:var(--paper); }.chat-person{display:flex;align-items:center;gap:10px}.chat-person .avatar{width:38px;height:38px;display:grid;place-items:center;background:#243242;border:1px solid #66798a;font:700 17px "Noto Serif SC"}.chat-person strong,.chat-person span{display:block}.chat-person span{color:#6f8495;font-size:9px;margin-top:4px;display:flex;align-items:center;gap:6px}.chat-topbar .icon-button{font-size:20px}.case-strip{flex:none;height:44px;padding:0 max(20px,calc((100% - 760px)/2));display:flex;align-items:center;justify-content:space-between;background:#d4d9da;border-bottom:1px solid #b9c2c4;color:#67757d;font:10px monospace;letter-spacing:.06em}.case-strip strong{color:#1c2832;font:600 11px "Noto Sans SC";letter-spacing:0}
.case-back,.nav-spacer{width:92px}.case-back{text-align:left;color:#a9b6bf}.nav-spacer{display:block}.typing-bubble{display:flex;align-items:center;gap:5px;min-width:64px}.typing-bubble i{width:5px;height:5px;border-radius:50%;background:#7c8b92;animation:typingDot .9s infinite}.typing-bubble i:nth-child(2){animation-delay:.15s}.typing-bubble i:nth-child(3){animation-delay:.3s}@keyframes typingDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-log{width:100%;max-width:760px;min-height:0;flex:1;margin:0 auto;padding:28px 20px 26px;display:flex;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex-direction:column;gap:22px}.message{display:flex;gap:12px;animation:messageIn .4s ease}.message.user{justify-content:flex-end}.message-avatar{flex:none;width:30px;height:30px;display:grid;place-items:center;background:var(--ink);color:#fff;font:700 13px "Noto Serif SC"}.message-bubble{max-width:78%;padding:14px 16px;background:#fff;border:1px solid #d5d8d5;box-shadow:0 3px 10px rgba(14,30,40,.05);font-size:14px;line-height:1.7}.message.user .message-bubble{background:#1c2a39;color:#eef2f3;border-color:#1c2a39}.message-label{display:block;margin-bottom:5px;color:#87939a;font-size:9px;letter-spacing:.1em}@keyframes messageIn{from{opacity:0;transform:translateY(8px)}}
.choice-panel{position:relative;flex:none;padding:15px max(20px,calc((100% - 760px)/2)) max(15px,env(safe-area-inset-bottom));background:rgba(236,237,234,.98);border-top:1px solid #c8cdcc;box-shadow:0 -10px 30px rgba(28,42,57,.06);backdrop-filter:blur(12px)}.choice-heading{display:flex;justify-content:space-between;margin-bottom:7px;font-size:11px;font-weight:700}.choice-heading small{color:#89949a;font-weight:400}.choice{width:100%;margin-top:7px;padding:11px 14px;border:1px solid #c5cbcb;background:#f8f8f5;color:#22303a;text-align:left;cursor:pointer;font-size:12px;line-height:1.45;transition:.18s}.choice:hover{border-color:#6b7d88;background:#fff;transform:translateX(3px)}.choice:disabled{opacity:.45}.end-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.end-choices.single{grid-template-columns:1fr}.end-choices .choice{margin:0;text-align:center}.end-choices .choice.primary{background:var(--red);color:#fff;border-color:var(--red)}.ending-button{min-height:48px;font-weight:700;letter-spacing:.03em}

.result-screen{background:radial-gradient(circle at 50% 20%,#26394b,#09101a 65%)}.result-nav{max-width:none;color:#718596;font-size:10px;letter-spacing:.08em}.result-wrap{width:min(100% - 28px,480px);margin:32px auto 0;padding-bottom:50px}.result-card{position:relative;overflow:hidden;background:var(--paper);color:#14202a;padding:28px 30px 22px;box-shadow:0 30px 70px rgba(0,0,0,.4)}.paper-corner{position:absolute;right:0;top:0;border-style:solid;border-width:0 42px 42px 0;border-color:transparent #b9c0bd transparent transparent}.result-kicker{display:flex;justify-content:space-between;color:#6d787a;font:8px monospace;letter-spacing:.12em}.result-kicker b{color:var(--red)}.result-card header{position:relative;margin:25px 0 19px;padding-bottom:18px;border-bottom:3px double #26343b}.result-card header p{margin:0 0 7px;font-size:9px;letter-spacing:.12em}.result-card header h2{margin:0;font:900 37px/1.12 "Noto Serif SC";letter-spacing:.08em}.file-no{position:absolute;right:0;bottom:18px;font:9px monospace;color:#758184}.result-parties{display:grid;grid-template-columns:1fr 1.35fr;gap:0;border:1px solid #aeb5b4}.result-parties div{padding:10px 12px;border-right:1px solid #aeb5b4;border-bottom:1px solid #aeb5b4}.result-parties div:nth-child(2){border-right:0}.result-parties div:last-child{grid-column:1/-1;border:0}.result-parties span,.score-block>span,.verdict>span{display:block;color:#788285;font-size:8px;letter-spacing:.1em;margin-bottom:4px}.result-parties strong{font:600 12px "Noto Serif SC"}.score-block{margin:18px 0}.score-block strong{display:block;color:var(--red);font:900 49px/1 "Noto Serif SC"}.score-block small{color:#687477;font:10px monospace}.score-line{height:4px;margin-top:9px;background:#d7d9d5}.score-line i{display:block;width:0;height:100%;background:var(--red);transition:width 1s .3s}.verdict{padding:14px 0;border-top:1px solid #abb3b2;border-bottom:1px solid #abb3b2}.verdict h3{margin:0;font:900 20px "Noto Serif SC"}.result-card blockquote{position:relative;margin:18px 0;padding:16px 44px 16px 16px;background:#182631;color:#f2f0e9;font:600 15px/1.7 "Noto Serif SC"}.result-card blockquote:before{content:'“';position:absolute;right:12px;top:-5px;color:#667986;font:50px Georgia}.result-meta{display:flex;flex-wrap:wrap;gap:5px 14px;color:#737e80;font-size:8px}.seal{position:absolute;right:25px;bottom:69px;width:68px;height:68px;border:3px double var(--red);border-radius:50%;display:grid;place-items:center;color:var(--red);text-align:center;font:700 11px/1.1 "Noto Serif SC";transform:rotate(-13deg);opacity:.8}.seal b{font-size:15px}.result-card footer{margin-top:38px;padding-top:11px;border-top:1px solid #bbbeba;display:grid;grid-template-columns:1fr auto;gap:4px;color:#7b8382;font-size:6px}.result-card footer strong{color:#303a3e;font-size:8px}.result-card footer i{grid-column:2;grid-row:1/3;color:var(--red);font-style:normal;font-weight:700}.result-actions{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;margin-top:14px}.primary-button.light,.secondary-button{width:100%;min-height:52px}.primary-button.light{background:var(--paper);color:var(--ink);border:0}.primary-button.light b{border-color:#c8c8c2}.secondary-button{border:1px solid #526474;background:transparent;cursor:pointer}.save-hint{text-align:center;color:#657888;font-size:10px}.toast{position:fixed;left:50%;bottom:32px;z-index:50;transform:translate(-50%,20px);padding:10px 16px;background:#fff;color:#111;font-size:11px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
.simple-result header h2{font-size:43px}.encounter{padding:20px 0;border-bottom:1px solid #abb3b2}.encounter span{color:#788285;font-size:9px;letter-spacing:.1em}.encounter h3{margin:7px 0 5px;font:900 27px "Noto Serif SC"}.encounter p{margin:0;color:#758184;font-size:10px}.simple-result .score-block{margin:25px 0}.simple-result .score-block strong{font-size:68px}.simple-result blockquote{min-height:106px;display:flex;align-items:center;font-size:18px}.simple-result .seal{bottom:67px}

@media(max-width:760px){
  .topbar{height:62px;padding:0 18px}
  .home-screen .hero{min-height:auto;padding:42px 22px 44px;display:flex;flex-direction:column;align-items:stretch;gap:34px}
  .hero-copy{min-width:0}
  .hero .eyebrow{font-size:9px;line-height:1.5;letter-spacing:.2em}
  .hero h1{margin:16px 0 24px;font-size:clamp(54px,16vw,66px);line-height:.9}
  .hero-line{margin-bottom:28px;font-size:18px;line-height:1.6}
  .hero .primary-button{min-height:56px;padding-left:18px;font-size:13px;line-height:1.35}
  .hero .primary-button b{width:46px}
  .fine-print{margin-top:12px;font-size:9px;line-height:1.5}
  .gu-portrait{width:min(68%,210px);max-height:none;align-self:flex-end;box-shadow:18px 22px 42px rgba(0,0,0,.34)}
  .portrait-title{top:-24px;font-size:128px}
  .profile-stamp{right:5%;top:41%;width:56px;height:56px;font-size:10px;border-width:2px}
  .profile-caption{padding:34px 13px 15px;gap:5px}
  .profile-caption span{font-size:8px;letter-spacing:.1em}
  .profile-caption strong{font-size:11px;line-height:1.55}
  .stats-bar{min-height:112px;grid-template-columns:repeat(3,1fr);gap:12px 8px;padding:18px 18px 14px}
  .stats-bar div{padding-right:8px}
  .stats-bar span{font-size:9px;margin-bottom:5px}
  .stats-bar strong{font-size:18px}
  .stats-bar p{display:block;grid-column:1/-1;justify-self:center;text-align:center;font-size:12px;line-height:1.55}
  .site-credit{padding:10px 16px 14px;font-size:8px}
  .section-header{padding:54px 20px 34px}.section-header h2{font-size:39px}.scene-list{display:block}.scene-card{width:100%;min-height:145px;padding:22px 62px 22px 20px;border-right:0!important}.scene-card h3{margin:18px 0 7px;font-size:20px}
  .chat-log{padding:22px 18px 20px;gap:18px}.choice-panel{padding:13px 18px max(13px,env(safe-area-inset-bottom))}.case-strip{gap:8px}.case-strip>span:first-child{display:none}.case-strip strong{max-width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.case-strip #round-label{max-width:66%;text-align:right;white-space:nowrap}
  .result-wrap{margin-top:24px;padding-bottom:44px}.result-card{padding:24px 23px 20px}.result-card header h2{font-size:32px}.simple-result header h2{font-size:36px}.result-actions{grid-template-columns:1fr}.result-nav>span{display:none}.case-back,.nav-spacer{width:88px}.case-back{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}