body:has(.h12){margin:0}
.h12{--ink:#263e52;--muted:#536778;--blue:#28688a;--paper:#fffdf8;--line:#d6e0e5;color:var(--ink);background:var(--paper);font-family:system-ui,-apple-system,"Segoe UI","Microsoft JhengHei",sans-serif;line-height:1.7;padding:28px 20px 72px;min-height:65vh}.h12 *{box-sizing:border-box}.h12 #home12-app{max-width:1040px;margin:auto}.h12 h1,.h12 h2,.h12 h3{color:var(--ink);line-height:1.3;margin:0 0 16px}.h12 h1{font-size:clamp(2rem,5vw,3.7rem);letter-spacing:-.035em}.h12 h2{font-size:clamp(1.4rem,3vw,2rem)}.h12 p{margin:0 0 16px}.h12 a{color:var(--blue)}.h12 button,.h12 .button{font:inherit;cursor:pointer;border:1px solid var(--blue);border-radius:12px;padding:12px 20px;min-height:48px;background:white;color:var(--blue);font-weight:650;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}.h12 button:hover,.h12 .button:hover{background:#eef5f7}.h12 .primary{background:var(--blue);color:#fff}.h12 .primary:hover{background:#1d506b}.h12 button:disabled{opacity:.5;cursor:default}.h12 :focus-visible,.h12-skip:focus{outline:3px solid #bd5708;outline-offset:4px}.h12-skip{position:fixed;left:12px;top:-100px;z-index:9999;padding:12px;background:white;color:#173b52}.h12-skip:focus{top:8px}.h12 .toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:30px}.h12 .toolbar a{font-size:.9rem}.h12 .eyebrow{font-size:.8rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}.h12 .muted{color:var(--muted)}.h12 .hero{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:32px 0 46px}.h12 .intro-copy{font-size:1.08rem;max-width:34em}.h12 .actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.h12 .facts{display:flex;gap:20px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);padding-top:20px}.h12 .mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(2deg)}.h12 .tile{border:1px solid #d5e2e9;border-radius:24px;padding:16px 8px;text-align:center;background:#e4f2fa}.h12 .tile:nth-child(3n+2){background:#fff0e2}.h12 .tile:nth-child(3n){background:#e8f0e7}.h12 .tile:nth-child(2n){transform:translateY(12px)}.h12 .character{display:block;width:100%;height:auto;object-fit:contain}.h12 .tile .character{border-radius:12px}.h12 .tile small{display:block;font-size:.68rem;line-height:1.4;margin-top:8px;font-weight:650}.h12 .section{margin-top:32px}.h12 .note{font-size:.88rem;color:var(--muted);margin-top:24px}.h12 .quiz{max-width:700px;margin:0 auto}.h12 .progress-meta{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:10px}.h12 progress{width:100%;height:9px;display:block;accent-color:var(--blue);margin-bottom:30px;border:0}.h12 .question-card{border:1px solid var(--line);padding:clamp(20px,4vw,36px);border-radius:24px;background:white}.h12 fieldset{padding:0;margin:0;border:0;min-width:0}.h12 legend{font-size:clamp(1.35rem,3vw,1.8rem);font-weight:720;line-height:1.5;margin-bottom:24px;float:left;width:100%}.h12 .options{clear:both;display:grid;gap:12px}.h12 .option{display:flex;align-items:center;gap:14px;border:1px solid #c6d4dc;border-radius:14px;padding:16px;cursor:pointer;min-height:64px;line-height:1.5}.h12 .option:has(input:checked){border:2px solid var(--blue);padding:15px;background:#edf6fa}.h12 .option:hover{background:#f4f8fa}.h12 input[type=radio]{width:20px;height:20px;accent-color:var(--blue);flex-shrink:0}.h12 .quiz-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px}.h12 .result{max-width:780px;margin:auto}.h12 .result-hero{background:var(--tint,#e4f2fa);border:1px solid var(--line);border-radius:28px;padding:36px;text-align:center}.h12 .result-hero h1{font-size:clamp(2rem,5vw,3rem)}.h12 .type-icon{width:min(100%,280px);height:auto;display:grid;place-items:center;background:#fff9;border-radius:32px;margin:20px auto}.h12 .type-icon .character{border-radius:20px}.h12 .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}.h12 .tags span{padding:5px 12px;background:#fff;border-radius:30px;font-size:.85rem}.h12 .result-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.h12 .panel{padding:26px;border:1px solid var(--line);border-radius:20px;background:white}.h12 .panel h2{font-size:1.2rem}.h12 .panel p:last-child{margin:0}.h12 .wide{grid-column:1/-1}.h12 .story{background:#fff6f8;border-color:#efdae1}.h12 .story blockquote{margin:20px 0;padding:16px 20px;border-left:3px solid #bb5976;background:#fff;border-radius:0 12px 12px 0}.h12 .tip{padding:16px;background:#edf5ef;border-radius:12px}.h12 .sharequote{font-size:1.2rem;font-weight:650}.h12 .catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.h12 .catalog button{display:block;text-align:left;border-color:var(--line);padding:22px;background:#fff}.h12 .catalog .character{border-radius:12px;margin-bottom:16px}.h12 .catalog strong{display:block;color:var(--ink);font-size:1.05rem}.h12 .catalog small{display:block;color:var(--muted);font-weight:400;margin-top:6px}.h12 .review-row{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding:18px 0}.h12 .review-row p{margin:4px 0;font-size:.9rem}.h12 #share-status{min-height:1.7em}.h12 .copy-fallback{width:100%;padding:12px;font:inherit}.h12 .error{border:1px solid #b93838;padding:20px;border-radius:12px}.h12 [hidden]{display:none!important}.h12 svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.h12 .explain{border-top:1px solid var(--line);padding-top:24px}.h12 .number{font-weight:750;color:var(--blue)}
@media(max-width:680px){.h12{padding:20px 16px 44px}.h12 .hero{grid-template-columns:1fr;gap:20px;padding-top:12px}.h12 .hero h1{font-size:2.5rem}.h12 .mosaic{max-width:420px;margin:0 auto 16px;transform:none;gap:8px}.h12 .tile{padding:12px 8px;border-radius:18px}.h12 .catalog{grid-template-columns:1fr 1fr;gap:12px}.h12 .catalog button{padding:16px}.h12 .result-hero{padding:28px 18px}.h12 .result-grid{grid-template-columns:1fr}.h12 .wide{grid-column:auto}.h12 .panel{padding:22px}.h12 .actions>*{flex:1 1 150px}.h12 .toolbar{margin-bottom:20px}.h12 .review-row{gap:10px}.h12 .review-row button{padding:10px;flex-shrink:0}.h12 .question-card{padding:20px 16px}}
@media(prefers-reduced-motion:reduce){.h12 *{scroll-behavior:auto!important;transition:none!important}}