:root {
  color-scheme: light;
  --paper:#f8f6ef;
  --white:#fffefa;
  --ink:#27223b;
  --muted:#625d70;
  --line:#e5dfec;
  --purple:#513f80;
  --purple-dark:#3c2b67;
  --lavender:#eee8f9;
  --mint:#e0f1e9;
  --amber:#f6e4b7;
  --shadow:0 16px 54px #35224b0e;
  font: 16px/1.6 "Microsoft YaHei UI","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
body { margin:0; min-width:0; background:var(--paper); color:var(--ink); }
button { color:inherit; font:inherit; cursor:pointer; }
button:focus-visible, summary:focus-visible { outline:3px solid #9872c9; outline-offset:4px; }
button:disabled { opacity:.5; cursor:default; }
h1, h2, h3, p { margin:0; }
img { display:block; width:100%; height:auto; }
.shell { width:min(100% - 40px,1000px); margin:auto; }
.site-header { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; font-size:.96rem; font-weight:750; letter-spacing:.03em; }
.brand-mark { width:28px; height:28px; display:grid; grid-template-columns:1fr 1fr; gap:2px; transform:rotate(-8deg); flex:none; }
.brand-mark i:nth-child(1) { background:#7354a2; clip-path:polygon(12% 0,100% 10%,85% 100%,0 85%); }
.brand-mark i:nth-child(2) { background:#76a894; clip-path:polygon(10% 8%,86% 0,100% 84%,0 96%); }
.brand-mark i:nth-child(3) { background:#d6a04c; clip-path:polygon(0 16%,89% 0,100% 100%,13% 89%); }
.brand-mark i:nth-child(4) { background:#a38dce; clip-path:polygon(9% 0,100% 15%,88% 88%,0 100%); }
.trial-tag { flex:none; background:#f1e9db; border:1px solid #eadfcb; color:#65543c; border-radius:999px; padding:4px 11px; font-size:.75rem; font-weight:700; }
.site-footer { display:flex; justify-content:space-between; gap:12px; padding:22px 0 32px; font-size:.76rem; color:var(--muted); }
.site-footer span { text-align:right; }
.card { border:1px solid var(--line); border-radius:27px; background:var(--white); box-shadow:var(--shadow); }
.hero { display:grid; grid-template-columns:1.04fr .96fr; min-height:490px; overflow:hidden; }
.hero-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(30px,5.5vw,62px); }
.eyebrow { color:var(--purple); font-size:.8rem; font-weight:760; letter-spacing:.15em; }
.hero h1 { font-size:clamp(2rem,5vw,3.45rem); line-height:1.16; letter-spacing:-.045em; margin:14px 0 15px; }
.hero-lead { color:var(--muted); max-width:32ch; font-size:1rem; }
.hero-meta { margin:23px 0; padding:0; display:flex; flex-wrap:wrap; gap:7px; list-style:none; }
.hero-meta li { padding:5px 11px; border-radius:8px; color:#51456c; font-size:.78rem; font-weight:670; background:#f1ecf8; }
.hero-meta li:nth-child(2) { background:#eaf2ec; color:#3d604f; }
.hero-meta li:nth-child(3) { background:#f7edd7; color:#6c552b; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.primary { min-height:49px; border:0; border-radius:12px; background:var(--purple); color:#fff; font-weight:740; padding:11px 23px; box-shadow:0 5px 0 #342654; display:inline-flex; gap:12px; justify-content:center; align-items:center; }
.primary:hover { background:var(--purple-dark); }
.primary:active { transform:translateY(2px); box-shadow:0 3px 0 #342654; }
.soft { border:1px solid var(--line); border-radius:11px; padding:8px 13px; background:#f8f5fc; color:var(--purple-dark); font-size:.88rem; }
.soft:hover, .skip:hover, .back:hover { background:var(--lavender); }
.hero-note { margin-top:18px; max-width:36ch; font-size:.79rem; color:var(--muted); }
.hero-art { position:relative; min-height:295px; display:grid; align-content:center; overflow:hidden; isolation:isolate; background:#e9e4f4; }
.hero-art::before, .hero-art::after { position:absolute; content:""; z-index:-1; }
.hero-art::before { width:71%; height:75%; top:-13%; right:-17%; background:#d9cdea; clip-path:polygon(0 5%,85% 0,100% 52%,48% 100%,14% 70%); }
.hero-art::after { width:72%; height:58%; bottom:-16%; left:-15%; background:#d3e7df; clip-path:polygon(21% 0,77% 12%,100% 60%,70% 100%,0 81%); }
.hero-art-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:23px; }
.mini-art { position:relative; margin:0; min-width:0; align-self:center; padding:7px; border:1px solid #fff9; background:#ffffff9e; border-radius:16px; box-shadow:0 10px 24px #4a346923; }
.mini-art:nth-child(1) { transform:translateY(-12px) rotate(-5deg); }
.mini-art:nth-child(2) { transform:translateY(13px) rotate(5deg); }
.mini-art figcaption { padding:6px 3px 1px; text-align:center; font-size:.69rem; color:#4c4165; font-weight:730; }
.art-frame { position:relative; aspect-ratio:1; overflow:hidden; border-radius:11px; background:var(--tint,#e9e0f5); display:grid; place-items:center; }
.art-frame img { z-index:1; width:100%; height:100%; object-fit:contain; }
.art-fallback { position:absolute; inset:0; display:grid; place-items:center; }
.art-fallback svg { width:83%; height:83%; }
.narrow { max-width:690px; margin:auto; }
.quiz { padding:clamp(23px,5.5vw,44px); }
.progress-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:0 0 8px; }
.progress-label { font-weight:760; color:var(--purple); font-size:.82rem; }
.progress-number { font-size:.87rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.progress { display:block; width:100%; height:8px; border:0; appearance:none; background:#eee7f3; border-radius:999px; overflow:hidden; }
.progress::-webkit-progress-bar { background:#eee7f3; }
.progress::-webkit-progress-value { background:var(--purple); border-radius:999px; }
.progress::-moz-progress-bar { background:var(--purple); border-radius:999px; }
.quiz-kicker { margin-top:24px; color:var(--muted); font-size:.79rem; }
.question { margin:7px 0 21px; font-size:clamp(1.3rem,4.6vw,1.8rem); line-height:1.5; font-weight:780; overflow-wrap:anywhere; }
.question:focus, .result-title:focus { outline:none; }
.choices { display:grid; gap:8px; }
.choice { display:flex; align-items:center; text-align:left; gap:12px; width:100%; min-height:48px; padding:8px 13px; border:1px solid #e4dcec; background:#fff; border-radius:11px; font-weight:650; }
.choice:hover, .choice[aria-pressed="true"] { background:#f4edf9; border-color:#b69bd2; }
.choice-dot { display:grid; place-items:center; flex:none; width:24px; height:24px; color:#624b88; border-radius:7px; background:#f0e9f8; font-size:.73rem; }
.choice[aria-pressed="true"] .choice-dot { background:var(--purple); color:#fff; }
.quiz-actions { display:flex; justify-content:space-between; align-items:center; gap:9px; padding-top:16px; }
.back, .skip { min-height:42px; border:0; border-radius:9px; background:transparent; color:var(--purple); font-size:.83rem; padding:5px 8px; }
.back:disabled { background:transparent; }
.result { display:grid; gap:16px; }
.result-top, .result-detail { padding:clamp(22px,4.8vw,42px); }
.result-top { display:grid; gap:24px; grid-template-columns:minmax(0,1fr) minmax(145px,.6fr); align-items:center; }
.result-top.no-art { grid-template-columns:1fr; }
.result-art { border:1px solid #fff; border-radius:17px; box-shadow:0 8px 24px #30204715; }
.result-title { line-height:1.23; font-size:clamp(1.65rem,5.8vw,2.58rem); margin:8px 0 11px; overflow-wrap:anywhere; }
.result-summary { color:var(--muted); font-size:.96rem; }
.result-tie-list { margin:13px 0 0; padding-left:1.25em; color:var(--muted); }
.result-tie-list li + li { margin-top:8px; }
.result-detail { display:grid; gap:17px; }
.insight { padding:15px 17px; border-radius:13px; background:#f4eaf7; }
.insight.adjust { background:#e7f2eb; }
.insight.secondary { background:#f8eed8; }
.insight h2 { font-size:1rem; margin-bottom:4px; }
.insight p { color:#473f53; font-size:.93rem; }
.result-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.extra { border-top:1px solid var(--line); padding-top:16px; }
.extra summary { cursor:pointer; font-weight:730; color:var(--purple-dark); }
.extra-content { padding-top:8px; }
.extra fieldset { margin:12px 0 0; border:1px solid var(--line); border-radius:12px; padding:10px 13px; min-width:0; }
.extra legend { padding:0 4px; font-size:.88rem; font-weight:690; }
.extra label { display:flex; align-items:flex-start; gap:9px; font-size:.87rem; padding:6px 0; }
.extra input { accent-color:var(--purple); width:17px; height:17px; flex:none; margin:3px 0 0; }
.extra-note { margin-top:10px; color:var(--muted); font-size:.84rem; }
.extra-output { margin-top:12px; padding:10px 13px; background:#f5f0fa; border-radius:9px; font-size:.88rem; }
.extra-output:empty { display:none; }
@media (max-width:660px) {
  .shell { width:min(100% - 24px,540px); }
  .site-header { min-height:59px; }
  .brand { font-size:.88rem; }
  .brand-mark { width:24px; height:24px; }
  .hero { grid-template-columns:1fr; min-height:0; border-radius:22px; }
  .hero-copy { padding:25px 22px 23px; }
  .hero h1 { margin:10px 0 10px; }
  .hero-lead { max-width:36ch; font-size:.94rem; }
  .hero-meta { margin:15px 0 16px; }
  .hero-actions { width:100%; }
  .hero-actions .primary { flex:1 0 auto; }
  .hero-note { margin-top:14px; max-width:unset; }
  .hero-art { min-height:0; }
  .hero-art-grid { max-width:360px; width:100%; margin:auto; padding:18px 22px 23px; }
  .quiz { border-radius:21px; }
  .result-top { grid-template-columns:1fr; gap:16px; border-radius:21px; }
  .result-art { max-width:245px; width:78%; justify-self:center; grid-row:1; }
  .site-footer { padding:14px 0 25px; }
  .site-footer span { display:none; }
}
@media (prefers-reduced-motion:no-preference) {
  .choice, .primary, .back, .soft, .skip { transition:background-color .15s ease,border-color .15s ease; }
}
.art-frame img[hidden] { display:none; }
.confirm-type { display:grid; gap:12px; margin-top:20px; }
.confirm-type label { font-weight:700; }
.confirm-type select { display:block; width:100%; min-width:0; min-height:48px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font:inherit; padding:6px 10px; }
.confirm-type select:focus-visible { outline:3px solid #9872c9; outline-offset:2px; }
.confirm-type .result-actions { margin-top:5px; }

.teacher-card { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:17px; align-items:center; border:1px solid #dfdfd4; background:#f8f7ee; padding:18px; border-radius:15px; }
.teacher-card h2 { font-size:1.12rem; line-height:1.45; margin-bottom:7px; }
.teacher-copy > p { font-size:.88rem; color:#514d58; margin:6px 0; }
.teacher-copy .teacher-message { margin:10px 0; padding:8px 10px; background:#fffefa; border-radius:8px; overflow-wrap:anywhere; }
.teacher-copy-status { display:block; font-size:.8rem; margin-top:4px; color:var(--purple-dark); }
.teacher-copy-status:empty { display:none; }
.teacher-qr { margin:0; text-align:center; }
.teacher-qr img { width:100%; height:auto; border:1px solid #ede9e0; background:#fff; border-radius:8px; }
.teacher-qr figcaption { padding-top:5px; font-size:.81rem; }
.teacher-qr a { color:var(--purple-dark); }
.teacher-qr a:focus-visible { outline:3px solid #9872c9; outline-offset:3px; }
@media (max-width:660px) {
  .teacher-card { grid-template-columns:1fr; gap:12px; padding:15px; }
  .teacher-qr { width:min(100%, 190px); justify-self:center; }
}