:root{--bg:oklch(.985 0 0);--ink:oklch(.25 .015 170);--muted:oklch(.45 .02 170);--primary:oklch(.40 .065 175);--soft:oklch(.94 .018 175);--line:oklch(.82 .015 175);--warning:oklch(.40 .09 35);--white:oklch(1 0 0);font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}
.portrait img{width:100%;height:210px;object-fit:cover;object-position:50% 20%;border-radius:80px 80px 0 0}body[data-active=true] .portrait img{height:160px}.portrait figcaption{padding-bottom:12px}details{margin-top:20px;font-size:14px}summary{cursor:pointer;min-height:44px;padding:12px 0}#difficulty-reasons{white-space:pre-line}
body[data-active=true] .stage{padding:18px 0}body[data-active=true] h1{font-size:30px;margin:8px 0}body[data-active=true] .portrait{min-height:185px}body[data-active=true] .portrait-name{font-size:36px}body[data-active=true] .edition{display:none}
*{box-sizing:border-box}body{margin:0}main{width:min(100% - 40px,600px);margin:auto;padding:24px 0 max(24px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;min-height:44px;border-bottom:1px solid var(--line);font-size:14px}h1,h2{font-family:"Songti SC","STSong","SimSun",serif;text-wrap:balance}h1{font-size:40px;line-height:1.35;font-weight:500;margin:12px 0 18px}h2{font-size:24px;font-weight:500;margin:12px 0}p{line-height:1.7;text-wrap:pretty}.stage{display:flex;gap:24px;align-items:center;padding:32px 0}.intro{flex:1;min-width:0}.intro p{color:var(--muted);font-size:14px}.edition{margin:0}.portrait{align-self:stretch;width:38%;min-height:220px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--soft);border-radius:100px 100px 4px 4px;position:relative}.portrait-name{font-family:"Songti SC","SimSun",serif;font-size:48px;writing-mode:vertical-rl;letter-spacing:12px}.portrait figcaption{font-size:11px;color:var(--muted);margin-top:20px}.seal{position:absolute;right:12px;top:34px;font-size:12px;border:1px solid var(--primary);padding:5px;writing-mode:vertical-rl;color:var(--primary)}button,input,select{font:inherit}button{min-height:48px;padding:10px 16px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:7px;cursor:pointer;transition:background .18s ease-out,transform .18s ease-out}button:hover:not(:disabled){background:var(--soft)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.48;cursor:not-allowed}:focus-visible{outline:3px solid var(--primary);outline-offset:3px}.primary{width:100%;background:var(--primary);color:var(--white);border-color:var(--primary);min-height:58px;font-size:18px}.primary:hover:not(:disabled){background:oklch(.33 .06 175)}.quiet{border:0;font-size:14px;text-decoration:underline;text-underline-offset:4px}form{border-top:1px solid var(--line);padding-top:12px}label{display:block;font-size:15px;margin:12px 0 8px}input[type=password],select{width:100%;min-height:48px;border:1px solid var(--line);border-radius:7px;padding:12px;background:var(--white);color:var(--ink)}input::placeholder{color:var(--muted)}.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.7;margin:18px 0}input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:var(--primary)}.small{font-size:12px;color:var(--muted)}.mode-row{display:flex;border-bottom:1px solid var(--line);gap:12px}.mode-row button{flex:1;border:0;border-radius:7px 7px 0 0}.mode-row [aria-pressed=true]{background:var(--soft);color:var(--primary);font-weight:600}.question{padding:16px 0 0}.question p{font-size:14px;color:var(--muted)}#segment{white-space:pre-line}#phase{font-size:14px;margin-bottom:4px}.record-info{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:12px;font-variant-numeric:tabular-nums}meter{flex:1;height:12px;accent-color:var(--primary)}.actions{display:flex;gap:8px;margin-top:10px}.actions button{flex:1;font-size:14px;padding:10px 5px}.hint{padding:12px;background:var(--soft);border-radius:6px}#result{border-top:1px solid var(--line);margin-top:24px;padding-top:12px}.result-label{color:var(--primary);font-size:14px}#feedback{font-family:"Songti SC","SimSun",serif;font-size:23px}#replay{width:100%}.reset{display:block;margin:22px auto 0}#notice{background:oklch(.95 .025 35);color:var(--warning);padding:14px;border-radius:6px;font-size:14px}footer{text-align:center;font-size:12px;color:var(--muted);line-height:1.9;margin-top:32px}footer span{font-size:11px}[hidden]{display:none!important}body[data-phase=recording] .portrait{outline:2px solid var(--primary);outline-offset:5px}body[data-phase=recording] #record{background:var(--warning);border-color:var(--warning)}@media(max-width:360px){main{width:calc(100% - 28px)}h1{font-size:32px}.stage{gap:12px}.portrait{min-height:200px}.portrait-name{font-size:40px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}