.onb{background:var(--surface);min-height:100svh}.onb [tabindex="-1"]:focus{outline:none}.onb-screen{flex-direction:column;width:min(560px,100%);min-height:100svh;margin:0 auto;display:flex}.onb-top{z-index:5;align-items:center;gap:var(--s-2);min-height:64px;padding:var(--s-2) var(--s-5) var(--s-2) var(--s-2);background:var(--surface);display:flex;position:sticky;top:0}.onb-top .appbar-btn{width:48px;height:48px;color:var(--ink-soft)}.onb-top-main{flex:1;min-width:0}.onb-body{padding:var(--s-3) var(--s-5) var(--s-6);flex:1}.onb-foot{z-index:5;gap:var(--s-1);padding:var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom));background:var(--surface);border-top:2px solid var(--border);display:grid;position:sticky;bottom:0}.onb-foot .btn-main{margin-bottom:4px}.has-feedback .onb-body{padding-bottom:300px}.onb h1{font-size:30px}.onb .onb-title{font-size:26px}.onb h2{font-size:24px}.onb-hint{margin-top:var(--s-2);color:var(--ink-soft)}.onb-choices{margin-top:var(--s-6)}.onb-subjects{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--border)}.onb-guide{align-items:flex-end;gap:var(--s-3);margin-bottom:var(--s-5);display:flex}.onb-guide-mascot{flex:none;width:60px}.onb-bubble{margin-bottom:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-l);border-bottom-left-radius:var(--s-1);background:var(--surface-2);flex:1;font-weight:700;line-height:1.35;position:relative}.onb-ask .tile,.onb-ask .choice{background:var(--surface-2);box-shadow:none;border-color:#0000}.onb-ask .tile:hover,.onb-ask .choice:hover{border-color:var(--border-strong)}.onb-ask .tile:active,.onb-ask .choice:active{box-shadow:none;transform:scale(.98)}:is(.onb-ask .tile:has(input:checked),.onb-ask .choice:has(input:checked)){border-color:var(--ink);background:var(--surface);box-shadow:none}.onb-ask .tile-art{background:var(--surface)}.onb-ask .choice-box{border-color:var(--border-strong)}.onb-ask .choice:has(input:checked) .choice-box{border-color:var(--ink);background-color:var(--ink)}.onb .choice-lead:has(.icon-tile){background:0 0;border:0;min-width:0;height:auto;padding:0}.onb .choice-lead .icon-tile{border-radius:var(--r-s);width:40px;height:40px}.onb-meter{align-items:flex-end;gap:3px;height:20px;display:flex}.onb-meter span{background:var(--border-strong);border-radius:2px;width:5px}.onb-meter span:first-child{height:25%}.onb-meter span:nth-child(2){height:50%}.onb-meter span:nth-child(3){height:75%}.onb-meter span:nth-child(4){height:100%}.onb-meter .is-on{background:var(--ink-soft)}.choice:has(input:checked) .onb-meter .is-on{background:var(--brand)}.onb-welcome .onb-body{padding-top:var(--s-4);flex-direction:column;display:flex}.onb-logo{aspect-ratio:5126/1253;align-self:flex-start;width:auto;height:28px}.onb-hero{align-content:start;justify-items:start;gap:var(--s-2);min-height:290px;margin-top:var(--s-6);padding:var(--s-6) var(--s-5) var(--s-7);color:#fff;box-shadow:0 6px 0 var(--action-edge);background:linear-gradient(155deg,#b64218,#a23e14);border-radius:24px;display:grid;position:relative;overflow:hidden}.onb-hero:before{content:"";background:#ffffff12;border-radius:50%;width:230px;height:230px;position:absolute;top:-70px;right:-70px}.onb-hero>*{position:relative}.onb-hero-kicker{letter-spacing:.04em;text-transform:uppercase;font-size:13px;font-weight:900}.onb .onb-hero h1{max-width:13ch;font:900 28px/1.15 var(--display);color:#fff}.onb-hero-meta{max-width:calc(100% - 120px);font-weight:700;line-height:1.4}.onb-hero>.onb-hero-mascot{pointer-events:none;width:124px;position:absolute;bottom:-34px;right:-6px}.onb-start{gap:var(--s-1);margin-top:var(--s-6);display:grid}.onb-perks{gap:var(--s-4);margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--border);list-style:none;display:grid}.onb-perks li{align-items:center;gap:var(--s-3);color:var(--ink-soft);font-weight:700;display:flex}.onb-perks .icon-tile{--tile:var(--ink-soft);border-radius:var(--r-s);width:40px;height:40px}.onb-ask .tile:has(input:checked) .tile-art{background:var(--brand-soft)}.onb-loading .onb-body{align-content:center;justify-items:center;gap:var(--s-5);text-align:center;display:grid}.onb-loading-mascot{width:min(240px,64vw);margin-bottom:calc(var(--s-2) * -1)}.onb-gauge{background:var(--surface-2);border-radius:999px;width:min(280px,100%);height:8px;position:relative;overflow:hidden}.onb-gauge-fill{border-radius:inherit;background:var(--brand);position:absolute;inset:0 auto 0 0}.onb-gauge-value{margin-top:calc(var(--s-3) * -1);color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700}.onb-steps{gap:var(--s-3);text-align:left;list-style:none;display:grid}.onb-steps li{align-items:center;gap:var(--s-3);color:var(--ink-soft);display:flex}.onb-steps strong{color:var(--ink);font-weight:700}.onb-steps small{margin-left:var(--s-1);color:var(--ink-soft);font-size:14px}.onb-step-dot{border:2px solid var(--border-strong);width:24px;height:24px;animation:onb-done .3s var(--ease) var(--at) forwards;border-radius:50%;flex:none;place-items:center;display:grid}.onb-step-dot .icon{color:#fff;stroke-width:3px;opacity:0;width:14px;height:14px;animation:onb-show .2s var(--ease) var(--at) forwards}.onb-ready .onb-plan-head{gap:var(--s-2);text-align:center;flex-direction:column}.onb-ready .onb-plan-mascot{width:min(132px,36vw)}.onb-ready .onb-hint{margin-top:0}.onb-recap{margin-top:var(--s-6);padding:0 var(--s-4);border-radius:var(--r-l);background:var(--surface-2);list-style:none}.onb-recap li{align-items:center;gap:var(--s-3);padding:var(--s-4) 0;display:flex}.onb-recap li+li{border-top:1px solid var(--border-strong)}.onb-recap .icon-tile{--tile:var(--ink-soft);border-radius:var(--r-s);width:40px;height:40px}.onb-recap-text{gap:2px;min-width:0;display:grid}.onb-recap-text strong{color:var(--ink);font-weight:800}.onb-recap-sub{color:var(--ink-soft);font-size:14px}.onb-next{align-items:center;gap:var(--s-3);margin-top:var(--s-3);padding:var(--s-4);border:2px solid var(--brand);border-radius:var(--r-l);background:var(--brand-soft);display:flex}.onb-next .label{color:var(--brand-text)}.onb-next-play{background:var(--brand);color:#fff;border-radius:50%;flex:none;place-items:center;width:40px;height:40px;display:grid}.onb-next-play .icon{width:20px;height:20px}.onb-ready .onb-recap,.onb-ready .onb-next{animation:onb-rise .4s var(--ease) backwards}.onb-ready .onb-next{animation-delay:.1s}@keyframes onb-done{to{background:var(--green);border-color:var(--green)}}@keyframes onb-show{to{opacity:1}}@keyframes onb-rise{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:reduce){.onb-step-dot,.onb-step-dot .icon,.onb-ready .onb-recap,.onb-ready .onb-next{animation:none}.onb-step-dot{background:var(--green);border-color:var(--green)}.onb-step-dot .icon{opacity:1}}.onb-plan-head{align-items:center;gap:var(--s-4);display:flex}.onb-plan-mascot{flex:none;width:64px}.onb-quiz-head{align-items:center;gap:var(--s-3);margin-bottom:var(--s-3);display:flex}.onb-quiz-head .onb-guide-mascot{width:48px}.onb .md.onb-md{margin-top:var(--s-5)}.onb-win{justify-items:center;gap:var(--s-1);padding-bottom:var(--s-6);text-align:center;display:grid}.onb-win-mascot{width:112px}.onb-points{font-family:var(--display);color:var(--brand-text);font-size:40px;font-weight:800;line-height:1.1}.onb-points .sliding{vertical-align:bottom}.onb-win h1{font-size:24px}.onb-account .onb-body{padding-top:var(--s-6)}.onb-account .onb-plan-head{margin-bottom:var(--s-5)}.onb-save{gap:var(--s-4);display:grid}.onb-win+.onb-save{padding-top:var(--s-2)}.onb-save .onb-hint{margin-top:calc(var(--s-3) * -1)}.onb-save .auth-alert{margin-top:0}.field-optional{color:var(--ink-soft);font-weight:400}@media (width>=720px){.onb-body{padding:var(--s-5) var(--s-6) var(--s-7)}.onb-welcome .onb-body{justify-content:center;padding-bottom:12vh}.onb-hero{min-height:0;padding:var(--s-7)}.onb .onb-hero h1{font-size:32px}.onb-hero>.onb-hero-mascot{right:var(--s-5);width:150px;bottom:-24px}.onb-hero-meta{max-width:calc(100% - 190px)}.onb-perks{gap:var(--s-5);text-align:center;grid-template-columns:repeat(3,minmax(0,1fr))}.onb-perks li{flex-direction:column;font-size:15px}.onb-start{justify-items:center}.onb-start .btn{width:auto;min-width:280px}.onb-top{padding:var(--s-4) var(--s-6) var(--s-2) var(--s-3)}.onb-foot{padding:var(--s-4) var(--s-6) var(--s-6);border-top:0}}.onb .choice.is-correct{border-color:var(--green);background:var(--green-soft);box-shadow:0 3px 0 var(--green)}.onb .choice.is-correct .choice-lead{border-color:var(--green);color:var(--green-ink)}.onb .choice.is-wrong{border-color:var(--red);background:var(--red-soft);box-shadow:0 3px 0 var(--red)}.onb .choice.is-wrong .choice-lead{border-color:var(--red);color:var(--red-ink)}.onb .feedback.is-correct .feedback-icon{background:var(--green)}.onb .feedback.is-wrong .feedback-icon{background:var(--red)}.onb-body .tiles{margin-top:var(--s-4)}.onb-code{justify-content:center;align-items:center;gap:var(--s-2);min-height:48px;margin-top:var(--s-2);padding:0 var(--s-3);border-radius:var(--r);color:var(--ink-soft);font:inherit;text-align:center;background:0 0;border:0;font-size:15px;font-weight:700;display:flex}button.onb-code{text-underline-offset:3px;cursor:pointer;text-decoration:underline}button.onb-code:hover{color:var(--ink)}.onb-code .icon{width:18px;height:18px;color:var(--brand-text);flex:none}