*{box-sizing:border-box}:root{--ink:#202020;--paper:#fff}body{margin:0;background:#f6f6f6;color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;min-height:48px;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #829eff;outline-offset:5px}button:disabled{opacity:.3;cursor:default}#app{max-width:520px;margin:auto;min-height:100svh;background:#fff}.home{min-height:100svh;display:flex;flex-direction:column;align-items:center;text-align:center;padding:46px 28px 28px}.brand{font-size:11px;letter-spacing:3px;border-bottom:2px solid;padding:0 0 12px}.home h1{font-family:"Kaiti SC","STKaiti",serif;font-size:clamp(32px,8.5vw,44px);line-height:1.5;letter-spacing:1px;font-weight:600;margin:65px -12px 24px;transform:rotate(-1deg)}.home h1 strong{font-weight:700;white-space:nowrap;display:inline-block;border-bottom:3px solid;border-radius:0 0 35% 8%}.tape{font-size:12px;letter-spacing:4px;border:1.8px solid;padding:9px 19px;border-radius:4px 8px 3px 6px;transform:rotate(2deg)}.intro{font-size:16px;line-height:2;letter-spacing:2px;margin:37px 0 58px}.home .primary{width:100%;max-width:340px;font-size:19px;padding:17px 20px}.arrow{float:right}.meta{font-size:12px;letter-spacing:2px;margin:22px 0}.home footer{margin-top:auto;padding-top:45px;font-size:10px;color:#777;line-height:1.9}.primary{display:inline-block;border:2px solid #202020;background:#fff;color:#202020;border-radius:7px 11px 6px 9px;box-shadow:3px 4px 0 #202020;padding:13px 23px;font-weight:600;font-size:16px;letter-spacing:1px}.primary:hover{background:#f3edff}.primary:active{transform:translate(2px,3px);box-shadow:1px 1px 0 #202020}.textbutton{border:0;background:none;padding:0 8px;font-size:13px;color:#555}.paper{min-height:100svh;padding:25px 24px 36px;background:#fff}.topbar{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1px}.progress{height:7px;border:1.5px solid #202020;border-radius:3px 5px 2px 4px;margin:22px 0 38px;overflow:hidden}.progress i{display:block;height:100%;background:#202020;transition:width .2s}.chapter{font-size:11px;color:#777;letter-spacing:2px}.question h1{font-family:"Kaiti SC","STKaiti",serif;font-size:26px;line-height:1.6;margin:17px 0 30px;font-weight:600}.options{display:grid;gap:15px}.option{display:flex;align-items:center;gap:14px;text-align:left;padding:17px 14px;border:1.8px solid #202020;background:#fff;border-radius:9px 5px 11px 6px;font-size:15px;line-height:1.75;transition:background .15s,box-shadow .15s}.option:nth-child(even){border-radius:5px 10px 6px 12px}.option span{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border:1.5px solid;border-radius:45% 52% 46% 50%;font:600 13px sans-serif}.option[aria-checked=true]{background:#e1e9ff;box-shadow:3px 4px 0 #202020}.option:nth-child(2)[aria-checked=true]{background:#fff0ae}.option:nth-child(3)[aria-checked=true]{background:#e1efd9}.option:nth-child(4)[aria-checked=true]{background:#f7dce9}.option[aria-checked=true] span{background:#fff;transform:rotate(-7deg);border-width:2px}.nav{display:flex;justify-content:space-between;gap:20px;margin-top:32px}.hint{font-size:10px;line-height:1.9;text-align:center;color:#888;margin-top:27px}.result-header{text-align:center;padding:38px 0 30px}.result-header h1{font-family:"Kaiti SC","STKaiti",serif;font-size:51px;margin:18px 0;font-weight:600;transform:rotate(-2deg)}.percent{font:52px Georgia,serif}.percent small{font-size:21px}.small{font-size:12px;line-height:1.8;color:#777}.result-card{border:1.8px solid #202020;border-radius:8px 13px 6px 10px;padding:24px 20px;margin-bottom:21px}.result-card h2{font-family:"Kaiti SC","STKaiti",serif;font-size:21px;font-weight:600;margin:0 0 20px}.result-card p{font-size:14px;line-height:2;margin:0;white-space:pre-line}.result-card .portrait-note{font-size:11px;line-height:1.9;color:#888;margin:0 0 23px;padding-bottom:18px;border-bottom:1px dashed #ccc}.ranking{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:12px;margin-top:20px}.ranking span{display:flex;justify-content:space-between;gap:5px}.ranking b{font-weight:500}details summary{font-size:13px;cursor:pointer}.actions{display:grid;gap:17px;margin-top:30px}.notice{font-size:10px;line-height:1.9;color:#888;text-align:center;margin:25px 0}.loading{min-height:100svh;display:grid;place-content:center;text-align:center;line-height:2}.loading-mark{width:40px;height:40px;border:2px solid;border-radius:7px 12px 6px 10px;margin:0 auto 20px;animation:tilt 1s ease-in-out infinite alternate}@keyframes tilt{to{transform:rotate(12deg)}}#toast{position:fixed;bottom:35px;left:50%;transform:translateX(-50%);background:#202020;color:#fff;border-radius:6px;padding:12px 20px;z-index:10;display:none;max-width:90%;font-size:13px}dialog{border:2px solid;background:#fff;padding:20px;border-radius:9px 14px 7px 11px;max-width:94vw;width:420px;color:#202020}dialog::backdrop{background:#0008}dialog img{width:100%;max-height:68svh;object-fit:contain}dialog .primary{width:100%;margin-top:12px}a.download{text-align:center;text-decoration:none}@media(min-width:650px){#app{border-left:1px solid #ddd;border-right:1px solid #ddd}.home{min-height:850px}}@media(max-width:380px){.paper{padding-left:19px;padding-right:19px}.question h1{font-size:24px}.home h1{font-size:30px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Friendship notebook: original linework, soft arcade palette. */
:root{--ink:#263c36;--paper:#fffdf4;--mint:#73b7a6;--coral:#ee8273;--yellow:#f2ce73}body{background:#dbe9df;color:var(--ink)}#app{background:var(--paper)}.home{background:var(--paper);padding-top:42px;border-top:12px solid var(--mint)}.brand{font-size:11px;border:1.5px solid var(--ink);border-radius:7px 11px 5px 8px;background:#e9f2e5;padding:10px 17px;transform:rotate(-2deg);letter-spacing:2px}.home h1{margin-top:58px;line-height:1.55;transform:rotate(-1deg);color:#263c36}.home h1 strong{border-bottom:4px solid var(--coral);border-radius:0 0 25% 10%}.tape{background:#f8e8b9;border-color:var(--ink);box-shadow:3px 3px 0 #263c36;letter-spacing:3px;margin-bottom:66px}.primary{border-color:var(--ink);background:#a9d2b9;box-shadow:3px 4px 0 var(--ink);color:var(--ink);border-radius:9px 13px 7px 11px}.primary:hover{background:#bee1cc}.primary:active{box-shadow:1px 1px 0 var(--ink)}.home .primary{background:var(--coral);font-size:20px}.home .primary:hover{background:#f29b87}.meta{font-family:ui-monospace,monospace;font-size:11px;color:#65756b;letter-spacing:1px}.home footer{color:#7b8274}.paper{background:var(--paper);border-top:7px solid var(--mint)}.topbar{color:#5c7367}.textbutton{color:#526b5e}.progress{height:9px;border-color:var(--ink);background:#eeeede}.progress i{background:var(--mint)}.chapter{color:#728572;letter-spacing:2px}.question h1{font-size:26px}.option{background:#fffef9;border-color:var(--ink);box-shadow:2px 3px 0 #dcded0}.option span{background:#f4f0df;border-color:var(--ink);font-family:ui-monospace,monospace}.option[aria-checked=true]{background:#d3e5f1;box-shadow:3px 4px 0 var(--ink)}.option:nth-child(2)[aria-checked=true]{background:#fae4a6}.option:nth-child(3)[aria-checked=true]{background:#cce4cd}.option:nth-child(4)[aria-checked=true]{background:#f3d1c7}.option[aria-checked=true] span{background:#fffdf4}.result-header h1{color:var(--ink)}.result-header .percent{color:#568d7b}.result-card{background:#fffefa;border-color:var(--ink);box-shadow:3px 4px 0 #d7ddc9;position:relative}.result-card h2{font-size:21px;display:table;border-bottom:3px solid #efb3a0;padding-bottom:5px}.result-card .portrait-note{color:#858b79;border-color:#d7d9c8}.ranking b{font-family:ui-monospace,monospace;color:#568d7b}.notice{color:#858b79}.loading{background:var(--paper)}.loading-mark{background:#cce4cd;border-color:var(--ink)}dialog{background:var(--paper);border-color:var(--ink)}#toast{background:#263c36}@media(min-width:650px){#app{border-left:1px solid #bbccbd;border-right:1px solid #bbccbd;box-shadow:12px 0 0 #cadace55,-12px 0 0 #cadace55}}

/* Cool paper palette: aqua, white and berry accents. */
:root{--ink:#293b4a;--paper:#fff;--mint:#88ced9;--coral:#e86aa6;--yellow:#e9defa}body{background:#bce7ec;color:var(--ink)}#app,.home,.paper,.loading{background:#fff}.home{border-top-color:#88ced9}.paper{border-top-color:#88ced9}.brand{background:#e9f8fa;border-color:#293b4a;color:#476d83}.home h1{color:#293b4a}.home h1 strong{border-bottom-color:#e86aa6}.tape{background:#f4e4f2;border-color:#293b4a;box-shadow:3px 3px 0 #293b4a;color:#a23b77}.primary{background:#cfedf2;color:#293b4a;border-color:#293b4a;box-shadow:3px 4px 0 #293b4a}.primary:hover{background:#b9e3ec}.home .primary{background:#f3a5ca;color:#492e46}.home .primary:hover{background:#ef90bc}.meta,.chapter{color:#778390}.topbar,.textbutton{color:#536c80}.progress{background:#eef6f9;border-color:#293b4a}.progress i{background:#88ced9}.option{background:#fff;border-color:#293b4a;box-shadow:2px 3px 0 #dce7ed}.option span{background:#edf6fa;border-color:#293b4a}.option[aria-checked=true]{background:#d4edf9;box-shadow:3px 4px 0 #293b4a}.option:nth-child(2)[aria-checked=true]{background:#f7d9eb}.option:nth-child(3)[aria-checked=true]{background:#e8dff6}.option:nth-child(4)[aria-checked=true]{background:#d1f0eb}.option[aria-checked=true] span{background:#fff}.result-header h1{color:#293b4a}.result-header .percent{color:#b44886}.result-card{background:#fff;border-color:#293b4a;box-shadow:3px 4px 0 #dae8f0}.result-card h2{border-bottom-color:#f0b1d4}.result-card .portrait-note{color:#7e8794;border-color:#dce5ed}.ranking b{color:#b44886}.notice,.home footer{color:#7e8794}.loading-mark{background:#e8dff6;border-color:#293b4a}dialog{background:#fff;border-color:#293b4a}#toast{background:#293b4a}@media(min-width:650px){#app{border-left-color:#a5cbd7;border-right-color:#a5cbd7;box-shadow:12px 0 0 #acd6e155,-12px 0 0 #acd6e155}}

/* Aqua is the page canvas; white is reserved for reading cards. */
:root{--paper:#a4dfe7}body{background:#8fd5df}#app,.home,.paper,.loading{background:#a4dfe7}.home{border-top-color:#70c6d4}.paper{border-top-color:#70c6d4}.brand{background:#ffffffcc}.tape{background:#f7e5f2}.option,.result-card{background:#fff}.result-card{box-shadow:3px 4px 0 #6db8c7}.home footer,.notice{color:#4f7182}.chapter,.meta,.hint{color:#557486}.progress{background:#e5f7fa}.progress i{background:#b44886}dialog{background:#fff}.home .primary{background:#f3a5ca}@media(min-width:650px){#app{border-left-color:#74bdcc;border-right-color:#74bdcc;box-shadow:12px 0 0 #6dbdcb44,-12px 0 0 #6dbdcb44}}

/* Crayon friendship journal: textured green, pink pencil, blue paper. */
:root{--ink:#555259;--paper:#b6d9b9;--mint:#a9d6ed;--coral:#f0aed1}body{background:#b6d9b9;color:#555259}#app,.home,.paper,.loading{background-color:#b6d9b9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.15' filter='url(%23grain)'/%3E%3C/svg%3E");background-blend-mode:soft-light}.home{border-top:0;padding-top:44px}.brand{background:#d8eaf5;color:#625e69;border:2px solid #74727b;border-radius:9px 5px 12px 6px;box-shadow:3px 3px 0 #ffffff80;font-family:"Kaiti SC","STKaiti",serif;transform:rotate(-3deg);font-size:13px}.home h1{color:#57525d;background:repeating-linear-gradient(0deg,#fffafd 0,#fffafd 27px,#eddae6 28px,#fffafd 30px);padding:27px 20px 31px;margin:48px -10px 27px;transform:rotate(-2deg);font-weight:700;line-height:1.5;box-shadow:5px 7px 0 #53776235;clip-path:polygon(1% 2%,38% 0,40% 2%,95% 0,100% 5%,98% 42%,100% 45%,98% 96%,68% 100%,65% 98%,2% 100%,0 77%,2% 73%)}.home h1 strong{color:#c16a98;border-bottom:3px solid #d496b7;border-radius:0 0 40% 12%;text-shadow:1px 1px #fff}.tape{background:#f6cce7;color:#685566;border:2px solid #fff;border-radius:14px 8px 18px 9px;box-shadow:3px 4px 0 #64866a55;font-family:"Kaiti SC","STKaiti",serif;font-size:16px;transform:rotate(3deg);margin-bottom:52px}.primary{background:#bbdef0;border:2px solid #69636e;color:#56515e;border-radius:12px 7px 16px 8px;box-shadow:3px 4px 0 #5b676c;font-family:"Kaiti SC","STKaiti",serif;font-size:19px}.home .primary{background:#f2bddb;color:#665463;border:3px solid #fff;box-shadow:4px 5px 0 #627d6866;font-size:24px;transform:rotate(-1deg)}.primary:hover,.home .primary:hover{background:#f6d4e8}.meta{color:#f7fff5;font-size:12px}.home footer,.notice{color:#384e40}.paper{border-top:8px solid #bddfec}.topbar,.textbutton{color:#374f42}.chapter{color:#374f42}.question h1{color:#fffdfd;font-family:"Kaiti SC","STKaiti",serif;text-shadow:1px 1px #527b5d55;font-size:28px}.progress{border:2px solid #f8fff8;background:#649873;border-radius:5px 8px 4px 6px}.progress i{background:#f1c4df}.option{background:#fffafd;color:#59545d;border:2px solid #77717b;border-radius:10px 6px 14px 7px;box-shadow:3px 4px 0 #537e6155}.option span{background:#e0eff8;border-color:#7b7580;color:#67606d}.option[aria-checked=true]{background:#c5e3f3;border-color:#62596e;box-shadow:3px 4px 0 #5f666f}.option:nth-child(2)[aria-checked=true]{background:#f3c4df}.option:nth-child(3)[aria-checked=true]{background:#e2d2f0}.option:nth-child(4)[aria-checked=true]{background:#d1ebcb}.option[aria-checked=true] span{background:#fff9fd}.hint{color:#3d5947}.result-header h1{color:#fffafd;text-shadow:2px 2px #658b71;font-family:"Kaiti SC","STKaiti",serif}.result-header .chapter,.result-header .small{color:#344f3e}.result-header .percent{color:#fce0ef;text-shadow:1px 2px #61766b}.result-card{background:#fffafd;border:2px solid #77717b;border-radius:9px 5px 13px 7px;box-shadow:4px 5px 0 #5d876a66;color:#555259}.result-card h2{color:#9d6088;border-bottom:3px solid #eac2dc;font-family:"Kaiti SC","STKaiti",serif}.result-card .portrait-note{color:#8b7e8b;border-color:#e8d9e5}.ranking b{color:#a2638b}.loading-mark{background:#f1c4df;border-color:#6e6373}.loading p{color:#fff}.small{color:#76717b}dialog{background:#fffafd;border-color:#77717b}#toast{background:#66606e;border:1px solid #fff}@media(min-width:650px){#app{border-left:1px solid #a9d1ae;border-right:1px solid #a9d1ae;box-shadow:12px 0 0 #729d7d44,-12px 0 0 #729d7d44}}

/* Keep headings readable on the lighter green canvas. */
.question h1,.result-header h1{color:#555259;text-shadow:none}.result-header .percent{color:#98668a;text-shadow:none}.meta{color:#48644d}.loading p{color:#48644d}