/* Layout and motion only. Liquid Glass materials live in liquid-glass.css. */
body.showing-onboarding .app-shell {max-width:none;padding:0;overflow-y:auto}
body.showing-onboarding .app-header {display:none}
#onboarding {min-height:var(--app-height,100dvh);box-sizing:border-box;width:100%}
.onb-wrap {box-sizing:border-box;min-height:var(--app-height,100dvh);max-width:1040px;margin:auto;padding:max(20px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:20px}
.onb-header {display:flex;align-items:center;justify-content:space-between;gap:16px}
.onb-footer-top {display:flex;justify-content:flex-end}
.onb-wordmark {font-size:25px;font-weight:700;letter-spacing:-1px}
.onb-main {flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);align-items:center;gap:clamp(20px,5vw,80px)}
.onb-copy {align-self:center}
#onb-title {font-size:clamp(40px,5vw,68px);line-height:1.07;letter-spacing:-2px;font-weight:720;margin:0;outline:0}
.onb-description {font-size:clamp(17px,2vw,21px);line-height:1.45;max-width:480px;margin:18px 0 0}
.onb-visual {width:100%;max-width:420px;justify-self:center}
.onb-preview {box-sizing:border-box;min-height:380px;border-radius:30px;padding:22px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.onb-preview h3 {font-size:27px;letter-spacing:-.8px;margin:0 0 8px}
.onb-preview h3 small {font-size:13px;font-weight:500;letter-spacing:0;margin-left:4px}
.onb-preview-row {border-radius:18px;padding:14px;display:flex;align-items:center;gap:13px}
.onb-preview-row span:nth-child(2){display:flex;flex-direction:column;gap:3px;flex:1}
.onb-preview-row strong {font-size:16px}
.onb-preview-row small,.onb-hero-card small {font-size:12px}
.onb-row-icon {width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:22px}
.onb-row-icon svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.onb-chevron {font-size:27px}
.onb-mini-brand {font-weight:700;font-size:18px;margin-bottom:3px}
.onb-mini-brand span {font-size:14px}
.onb-hero-card {border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:8px;margin-bottom:2px}
.onb-hero-card span {font-size:12px}
.onb-hero-card strong {font-size:24px;letter-spacing:-.8px}
.onb-demo-field {height:59px;box-sizing:border-box;border-radius:14px;padding:8px 14px;display:flex;flex-direction:column;gap:3px}
.onb-demo-field small {font-size:11px}
.onb-demo-field span {font-size:16px;font-weight:600;min-height:19px}
.onb-demo-save {min-height:43px;border-radius:999px;display:grid;place-items:center;font-size:15px;font-weight:600;margin-top:auto}
.onb-calendar {display:flex;gap:5px;justify-content:space-between}
.onb-schedule-school {font-size:12px;line-height:1.25;margin:-8px 0 3px}
.onb-calendar span {width:20%;border-radius:14px;min-height:49px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:500}
.onb-calendar em {font-style:normal;font-size:17px;font-weight:700}
.onb-lesson {border-radius:17px;padding:14px 16px;display:flex;flex-direction:column;gap:5px;border-left-width:3px!important}
.onb-lesson span,.onb-lesson small {font-size:12px}
.onb-lesson strong {font-size:16px}
.onb-order-form,.onb-order-result {border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:13px;min-height:222px;box-sizing:border-box}
.onb-order-form small,.onb-order-result small {font-size:13px}
.onb-order-form strong,.onb-order-result strong {font-size:22px;letter-spacing:-.5px}
.onb-order-form span {font-size:14px}
.onb-order-result p {font-size:14px;line-height:1.4;margin:0}
.onb-state {align-self:flex-start;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600}
.onb-coins>small {font-size:13px}
.onb-coins img {object-fit:contain;align-self:center;max-width:45%;height:auto;margin:5px 0}
.onb-coin-bottom {margin-top:auto;display:flex;align-items:center;gap:12px}
.onb-coin-bottom>span:first-child {display:flex;flex-direction:column;min-width:85px}
.onb-coin-bottom strong {font-size:30px;line-height:1}
.onb-coin-bottom small {font-size:12px}
.onb-coin-claim {height:44px;padding:0 16px;border-radius:999px;display:grid;place-items:center;flex:1;font-size:14px;font-weight:600;text-align:center}
.onb-finish {align-items:center;justify-content:center;text-align:center;gap:17px}
.onb-finish-mark {width:92px;height:92px;border-radius:28px;display:grid;place-items:center;font-size:52px;font-weight:700}
.onb-finish strong {font-size:28px;letter-spacing:-.7px}
.onb-finish p {font-size:16px;margin:0}
.onb-footer {margin-top:auto}
.onb-dots {display:flex;gap:7px}
.onb-dots span {width:7px;height:7px;border-radius:50%}
.onb-next {width:100%;margin-top:15px}
.onb-status {font-size:13px;text-align:center;margin:10px 0 0}
@media(max-width:700px){
 .onb-wrap {max-width:480px;gap:14px}
 .onb-main {display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:18px}
 #onb-title {font-size:clamp(33px,9vw,46px);letter-spacing:-1.4px}
 .onb-description {font-size:16px;line-height:1.35;margin-top:10px}
 .onb-visual {max-width:360px;margin:auto}
 .onb-preview {min-height:310px;padding:17px;gap:9px;border-radius:25px}
 .onb-preview h3 {font-size:23px;margin-bottom:2px}
 .onb-demo-field {height:52px;padding:6px 12px}
 .onb-hero-card {padding:15px;gap:5px}
 .onb-preview-row {padding:10px}
 .onb-coins img {width:120px;max-width:38%}
 .onb-footer {padding-top:2px}
}
@media(max-height:670px) and (max-width:700px){.onb-wrap{gap:10px}.onb-main{gap:10px}.onb-preview{min-height:275px}.onb-description{margin-top:6px}}