:root {
  --ink: #151515; --paper: #faf9f4; --white: #fff; --yellow: #ffc900;
  --bluegray: #718797; --bluegray-soft: #e6edf1; --coral: #f2a99c;
  --sage: #b8d5bd; --sky: #b9d8ea; --lilac: #d8cee9; --butter: #f5dfa0;
  --line: 2px solid var(--bluegray); --black-line: 2px solid var(--ink);
  --shadow: 5px 6px 0 rgba(113,135,151,.25);
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(rgba(113,135,151,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(113,135,151,.035) 1px,transparent 1px),var(--paper); background-size:28px 28px; font-family:ui-rounded,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
button { color:inherit; font:inherit; cursor:pointer; }
.shell { width:min(760px,100%); margin:0 auto; padding:20px 18px 54px; }
.home { display:grid; gap:14px; }
.hero-visual { position:relative; overflow:hidden; border:1px solid #d9dfe2; background:#fff; box-shadow:0 14px 34px rgba(37,53,64,.12); }
.hero-visual img { display:block; width:100%; height:auto; }
.hero-hotspot { position:absolute; left:16%; right:16%; bottom:9.4%; height:8.7%; border:0; border-radius:18px; background:transparent; color:transparent; }
.hero-hotspot:focus-visible { outline:5px solid #1b5cff; outline-offset:4px; }
.home-note { margin:0; text-align:center; color:#57646d; font-size:12px; line-height:1.65; }
.panel { position:relative; background:rgba(255,255,255,.95); border:var(--line); box-shadow:var(--shadow); overflow:hidden; }
.quiz-panel,.result-panel { padding:clamp(20px,5vw,38px); }
.panel::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 0 68%,rgba(255,201,0,.055) 68% 76%,transparent 76%); }
.quiz-top { position:relative; display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; }
.question-count { display:flex; align-items:baseline; gap:5px; font-weight:950; }
.question-count strong { font-size:34px; line-height:1; }
.question-count span,.quiz-hint { color:#647581; font-size:13px; }
.quiz-hint { max-width:180px; text-align:right; }
.folder-tabs { position:relative; z-index:2; display:grid; grid-template-columns:repeat(9,1fr); gap:3px; align-items:end; padding:0 8px; margin-bottom:-2px; }
.folder-tab { display:flex; align-items:center; justify-content:center; height:27px; padding-top:3px; border:1.5px solid var(--bluegray); border-bottom:0; border-radius:8px 8px 0 0; background:#eef2f4; color:#71828d; font-size:10px; clip-path:polygon(9% 0,91% 0,100% 100%,0 100%); }
.folder-tab:nth-child(n+10) { margin-top:-1px; transform:translateY(2px); }
.folder-tab.done { background:#dce5ea; color:#40545f; }
.folder-tab.current { height:34px; background:var(--yellow); color:var(--ink); border-color:var(--ink); font-size:12px; font-weight:950; }
.folder-sheet { position:relative; z-index:1; margin-bottom:18px; padding:35px 18px 20px; border:var(--line); border-radius:5px 5px 10px 10px; background:#fff; box-shadow:4px 6px 0 #cbd5da; }
.folder-label { position:absolute; right:18px; top:10px; color:#657984; font-size:10px; font-weight:900; letter-spacing:.08em; }
.work-window { position:relative; border:0; border-bottom:1px dashed #aab7bf; background:#fff; margin:0 0 18px; padding:12px 4px 22px; }
.question { position:relative; margin:0; font-size:clamp(24px,5.3vw,38px); line-height:1.35; letter-spacing:-.025em; }
.question::after { content:""; display:block; width:54px; height:7px; margin-top:17px; background:var(--yellow); }
.answers { position:relative; display:grid; gap:14px; }
.answer { display:grid; grid-template-columns:46px 1fr 20px; align-items:center; gap:13px; width:100%; min-height:84px; padding:15px; text-align:left; background:#fffdf5; border:var(--line); border-radius:8px; box-shadow:0 5px 0 #cbd5da; font-size:16px; line-height:1.55; transition:transform .14s,box-shadow .14s,background .14s; }
.answer:nth-child(2) { background:#f7fafb; }
.answer:hover { transform:translateY(-2px); box-shadow:0 7px 0 #aebec7; background:#fff8d8; }
.answer:active { transform:translateY(4px); box-shadow:0 1px 0 #aebec7; }
.answer-letter { display:grid; place-items:center; width:40px; height:40px; border-radius:7px; border:var(--black-line); background:var(--yellow); font-weight:950; font-size:19px; }
.answer:nth-child(2) .answer-letter { background:var(--sky); } .answer:nth-child(3) .answer-letter { background:var(--sage); }
.answer-arrow { color:var(--bluegray); font-size:22px; }
.quiz-footer { position:relative; display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; }
.back { border:0; background:transparent; padding:10px 0; color:#536975; text-decoration:underline; text-underline-offset:4px; }
.tiny-worker { display:flex; align-items:flex-end; gap:6px; color:#647581; font-size:12px; }
.person-mark { --person:var(--sky); display:inline-grid; place-items:center; width:31px; height:31px; border:1.5px solid var(--ink); border-radius:50% 50% 45% 45%; background:var(--person); font-size:13px; font-weight:950; }
.result-header { position:relative; padding-right:82px; }
.result-stamp { display:inline-block; padding:5px 9px; border:2px solid var(--ink); background:var(--yellow); font-size:12px; font-weight:950; transform:rotate(-2deg); }
.result-title { margin:18px 0 10px; font-size:clamp(42px,10vw,76px); line-height:.94; letter-spacing:-.065em; font-weight:1000; }
.result-title span { display:block; color:var(--yellow); -webkit-text-stroke:2px var(--ink); text-shadow:3px 3px 0 #fff; }
.result-figure { position:absolute; right:4px; bottom:2px; width:62px; height:76px; }
.result-figure .head { position:absolute; left:20px; top:0; width:22px; height:22px; border:2px solid var(--ink); border-radius:50%; background:var(--coral); }
.result-figure .body { position:absolute; left:15px; top:20px; width:32px; height:45px; border:2px solid var(--ink); border-radius:46% 46% 35% 35%; background:var(--coral); transform:rotate(7deg); }
.result-figure::after { content:""; position:absolute; left:8px; right:0; bottom:0; height:3px; background:var(--yellow); }
.formula { position:relative; display:grid; gap:14px; margin:26px 0; }
.persona { --person:var(--sky); position:relative; display:grid; grid-template-columns:58px minmax(0,1fr) 86px; gap:14px; align-items:center; padding:18px; border:var(--line); background:#fff; box-shadow:0 5px 0 #cbd5da; }
.persona:nth-child(2) { --person:var(--sage); } .persona:nth-child(3) { --person:var(--butter); }
.rank-badge { display:grid; place-items:center; align-content:center; gap:4px; border-right:1px dashed #9aabb5; font-weight:950; }
.rank-badge .person-mark { width:36px; height:36px; } .rank-badge small { color:#647581; }
.persona-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.persona-name { font-size:clamp(21px,4.5vw,28px); font-weight:1000; line-height:1.1; }
.persona-name small { display:inline-block; margin-left:8px; padding:3px 6px; border:1.5px solid var(--ink); background:var(--yellow); font-size:10px; letter-spacing:.08em; vertical-align:middle; }
.stars { white-space:nowrap; color:#d3a500; letter-spacing:1px; font-size:13px; }
.persona p { margin:9px 0 0; color:#43545e; line-height:1.55; }
.hidden { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 90px; align-items:center; gap:14px; margin:26px 0; padding:22px; border:var(--black-line); background:var(--yellow); box-shadow:5px 5px 0 var(--ink); }
.hidden::before { content:"?"; position:absolute; right:18px; top:8px; font-size:60px; line-height:1; font-weight:1000; opacity:.13; }
.hidden small { display:block; font-weight:900; margin-bottom:8px; } .hidden strong { font-size:26px; } .hidden strong em { margin-left:8px; font-size:11px; font-style:normal; letter-spacing:.08em; } .hidden p { margin:8px 0 0; line-height:1.55; }
.summary { margin:0; padding:19px; border-left:7px solid var(--bluegray); background:var(--bluegray-soft); font-size:17px; line-height:1.7; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.primary,.secondary { min-height:54px; padding:12px 16px; border:var(--black-line); border-radius:8px; font-weight:950; transition:transform .14s,box-shadow .14s; }
.primary { background:var(--yellow); box-shadow:0 5px 0 var(--ink); } .secondary { background:#fff; box-shadow:0 5px 0 var(--bluegray); }
.primary:hover,.secondary:hover { transform:translateY(-2px); } .primary:active,.secondary:active { transform:translateY(4px); box-shadow:none; }
.persona-art { position:relative; width:92px; height:104px; justify-self:end; overflow:hidden; border-bottom:3px solid var(--yellow); background:linear-gradient(150deg,#fff 55%,var(--bluegray-soft)); }
.persona-art img { display:block; width:100%; height:100%; object-fit:contain; }
@media (min-width:761px) { .hero-visual,.panel { border-radius:12px; } }
@media (max-width:520px) {
  .shell { padding:0 0 36px; } .home-note { padding:0 16px; } .panel { border-left:0; border-right:0; box-shadow:none; }
  .quiz-panel,.result-panel { padding:20px 16px 30px; } .quiz-hint { font-size:11px; } .folder-tabs { grid-template-columns:repeat(9,1fr); gap:1px; padding:0 2px; }
  .folder-tab { font-size:8px; height:23px; } .folder-tab.current { height:30px; font-size:10px; } .folder-sheet { padding:32px 12px 16px; }
  .answer { grid-template-columns:40px 1fr 14px; padding:13px 12px; } .answer-letter { width:35px; height:35px; }
  .actions { grid-template-columns:1fr; } .persona { grid-template-columns:44px minmax(0,1fr) 72px; padding:15px 10px; gap:9px; } .persona-art { width:70px; height:82px; } .stars { font-size:10px; } .hidden { grid-template-columns:minmax(0,1fr) 72px; padding:18px 14px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }