/* Learn → practice → explain */
.journey-hero{min-height:310px}.hero-side{display:block;font-size:11px;margin-top:10px;color:#665b77}.quest-note{position:absolute;top:12px;left:12%;width:260px;padding:25px 22px;background:#fff;border:1px solid #d1c7df;border-radius:12px;transform:rotate(-6deg);box-shadow:0 16px 35px #62516e20}.quest-note strong{display:block;font-size:29px;margin-top:12px}.quest-note strong small{font:italic 18px Georgia;color:#7b6a94;margin-left:7px}.quest-note p{margin:8px 0 18px}.fake-toast{padding:11px 12px;background:#2d5143;color:white;border-radius:7px;font-size:11px}.quest-art .float-card{bottom:-8px}.quest-art .float-card strong{font-size:19px;letter-spacing:0}.map-explainer{font-size:13px;color:var(--muted);margin-top:-7px;margin-bottom:22px}.mission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.mission-tile{display:block;background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px;transition:transform .16s,box-shadow .16s}.mission-tile:hover{transform:translateY(-3px);box-shadow:0 9px 22px #223e3510}.mission-tile.cleared{border-color:#9ebc87;background:#fbfdf7}.mission-number{display:flex;justify-content:space-between;align-items:center;color:#7c866e;font:13px Georgia}.mission-number span{font-family:inherit;font-size:11px;color:var(--green)}.mission-symbol{width:49px;height:49px;display:grid;place-items:center;background:#e7eddc;border-radius:13px;font-size:27px;margin:19px 0;color:#3d5a32}.mission-tile:nth-child(3n+2) .mission-symbol{background:#ebe4f3;color:#705785}.mission-tile:nth-child(3n) .mission-symbol{background:#f7e9cc;color:#926b2f}.mission-tile h3{font-size:17px;margin-bottom:8px;line-height:1.5}.mission-tile p{font-size:12px;color:var(--muted);min-height:38px}.term-chips{display:flex;gap:5px;flex-wrap:wrap}.term-chips span{padding:3px 7px;background:#f2f4ef;color:#596650;font-size:10px;border-radius:5px}.mission-tile-foot{border-top:1px solid var(--line);margin-top:21px;padding-top:12px;display:flex;justify-content:space-between;font-size:10px;color:#61705d}.mission-tile-foot span:last-child{color:var(--green);font-weight:650}.mission-heading .text-link{display:block;width:max-content;margin-bottom:12px}.mission-heading .tag{margin-top:3px}.mission-heading h1{font-size:32px;margin:7px 0 12px}.mission-heading>p{max-width:760px;font-size:14px;color:var(--muted);line-height:1.9}.step-nav{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);margin:25px 0 30px;gap:10px}.step-nav button{border:0;background:transparent;display:flex;gap:9px;align-items:center;justify-content:center;padding:13px 6px;color:#667360;border-bottom:3px solid transparent;font-size:13px}.step-nav button.current{border-bottom-color:var(--green);color:var(--green);font-weight:700}.step-nav button span{font-size:10px;border-radius:50%;width:25px;height:25px;background:#e8ede2;display:grid;place-items:center}.step-nav button:disabled{opacity:.5}.learn-play{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}.term-lessons>.muted{font-size:13px}.term-detail{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:15px 17px;font-size:13px}.term-detail summary{cursor:pointer;font-size:15px;font-weight:700;min-height:26px}.term-detail summary small{font-size:10px;color:#79688d;font-weight:400;margin-left:9px}.term-detail p{margin:12px 0 9px;font-size:13px;line-height:1.8}.term-tip{font-size:12px;color:var(--muted);background:#f5f7f1;border-radius:5px;padding:10px 12px;line-height:1.8}.mission-brief{background:#e8e3f3;border:1px solid #dcd4e8;border-radius:14px;padding:30px;align-self:start;position:sticky;top:20px}.mission-brief .mission-symbol{background:white;margin-top:0}.mission-brief .eyebrow{color:#77658b;display:block;margin:24px 0 13px}.mission-brief h2{font-size:23px}.mission-brief p{font-size:13px;line-height:1.9;color:#61596e}.brief-goals{font-size:12px;line-height:2.2;border-top:1px solid #cfc5df;margin:20px 0;padding-top:15px}.mission-brief .btn{width:100%}.mission-brief .source-note{font-size:10px;text-align:center;margin-bottom:0}.practice-grid{display:grid;grid-template-columns:290px minmax(0,1fr);gap:24px;align-items:start}.practice-guide>h2{font-size:19px}.goal-count{font-size:12px;font-weight:700;margin-bottom:12px;color:var(--green)}.goal{display:flex;gap:10px;padding:10px 0;font-size:12px;color:#6b7369;border-bottom:1px solid var(--line)}.goal span{width:15px;flex-shrink:0}.goal.met{color:#366227}.goal.met span{font-weight:800}.hint{font-size:12px;margin:18px 0;padding:13px;background:#edf0e6;border-radius:8px}.hint summary{cursor:pointer;min-height:24px}.hint p{margin:9px 0 0;line-height:1.9}.practice-guide .inline-actions{display:block}.practice-guide .btn{width:100%;padding:12px 10px;font-size:12px}.btn:disabled{opacity:.45;background:#61705e;cursor:not-allowed}.reset-link{font-size:12px;color:#58684f;text-decoration:underline;text-underline-offset:3px;background:transparent;border:0;padding:12px 0;min-height:44px}.pocket-title{font-size:14px;margin:22px 0 12px}.practice-guide .term-detail{padding:12px}.practice-guide .term-detail summary{font-size:12px}.practice-guide .term-detail summary small{display:block;margin:3px 0 0 17px}.workbench{border:1px solid #d5ded0;border-radius:14px;background:#fff;min-width:0}.workbench-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 20px;border-bottom:1px solid var(--line)}.workbench-top .tiny{font-size:9px;letter-spacing:1.4px}.live-dot{font-size:10px;color:#69775f}.live-dot:before{content:' ';display:inline-block;background:#7a9a57;width:6px;height:6px;border-radius:50%;margin-right:6px}.settings-strip{padding:20px;background:#fcfdf9;border-bottom:1px solid var(--line);font-size:12px;border-radius:12px 12px 0 0}.settings-strip>p{margin:0;font-size:12px;color:#67735f;line-height:1.8}.settings-strip .control{margin-bottom:18px}.settings-strip .control:last-child{margin-bottom:0}.settings-strip select{display:block;width:100%;border:1px solid #c8d1c1;border-radius:7px;background:#fff;min-height:42px;padding:8px 10px;margin:4px 0 12px;color:var(--ink);font-size:13px}.setting-label{display:block;margin-top:8px;font-size:12px;font-weight:650}.setting-toggle{display:flex;gap:10px;align-items:center;min-height:44px;margin:1px 0;font-size:13px}.setting-toggle input{flex-shrink:0}.setting-toggle input[type=radio]{accent-color:var(--green);width:19px;height:19px}.stage-surface{background:#edf0e7;padding:28px;min-height:340px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px}.workbench-note{padding:13px 20px;font-size:10px;color:#66745d;border-top:1px solid var(--line);border-radius:0 0 14px 14px}.sample-card{width:100%;max-width:360px;padding:23px;background:white;border:1px solid #d6ddce;border-radius:12px;box-shadow:0 12px 25px #354d3010;font-size:14px}.sample-card h3{font-size:19px;margin-bottom:12px}.sample-card p{font-size:14px;line-height:1.8;margin-bottom:15px}.sample-visual{height:95px;background:#eee5d5;border-radius:8px;margin-bottom:18px;display:grid;place-items:center;font-size:45px;font-family:Georgia;color:#637948}.sample-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.sample-card-head h3{margin:0}.sample-icon{width:44px;height:44px;border:1px solid #d1daca;border-radius:8px;background:#fff;display:inline-grid;place-items:center;font-size:22px;color:var(--green);flex-shrink:0}.sample-card>.btn{margin:5px 0;width:100%}.sample-muted{display:block;font-size:11px;line-height:1.8;color:#63725c;margin-top:10px}.sample-card [role=status]{font-size:12px;margin-top:10px}.sample-card fieldset{border:1px solid #d9e0d4;border-radius:8px;margin:16px 0;padding:10px 14px}.sample-card legend{font-size:12px;padding:0 5px;font-weight:650}.segmented{display:flex;border:1px solid #c8d1c1;border-radius:7px;padding:3px;gap:3px}.segmented label{flex:1;text-align:center;padding:8px;cursor:pointer;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px}.segmented label.selected{background:#e3edcf}.segmented input{accent-color:var(--green)}.sample-status{background:#f3f5ee;border-radius:7px;font-size:12px;padding:12px}.note-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:19px 0;margin-top:12px;border-top:1px solid var(--line);font-size:12px}.example-toast,.sample-snackbar{border-radius:7px;background:#28483d;color:white;padding:13px 14px;font-size:12px;margin:10px 0}.sample-snackbar{display:flex;justify-content:space-between;align-items:center;gap:12px}.sample-snackbar button{background:transparent;border:0;color:#e1f2ab;text-decoration:underline;min-height:44px;white-space:nowrap;padding:8px}.overlay-demo{width:100%;max-width:400px;text-align:center}.overlay-demo h3{margin-bottom:22px}.overlay-buttons{display:flex;flex-direction:column;gap:14px}.overlay-buttons>.btn,.overlay-buttons .anchor-demo>.btn{width:100%}.anchor-demo{position:relative}.example-popover{position:absolute;top:calc(100% + 7px);left:15px;right:15px;z-index:3;text-align:left;padding:20px;background:#fff;box-shadow:0 7px 26px #1e372d30;border:1px solid #bdcdb0;border-radius:9px;font-size:13px}.example-tooltip{position:absolute;bottom:calc(100% + 5px);left:8%;right:8%;padding:9px;background:#213d33;color:white;border-radius:5px;font-size:12px;z-index:4}.example-dialog{max-width:480px}.example-dialog.drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;border-radius:15px 0 0 15px;width:min(360px,90vw)}.example-dialog.sheet{margin:auto auto 0;max-width:600px;border-radius:20px 20px 0 0;width:100%;padding-bottom:35px}.example-dialog.sheet:before{content:'';display:block;margin:-20px auto 24px;background:#bcc7b7;width:40px;height:4px;border-radius:4px}.sample-app{width:100%;min-width:0;background:white;padding:20px;border:1px solid #d2ddc8;border-radius:10px}.sample-nav{display:flex;gap:10px;margin-bottom:18px}.sample-nav button,.breadcrumbs button{border:0;background:transparent;padding:8px;color:var(--green);min-height:44px;text-decoration:underline;text-underline-offset:3px}.sample-nav button[aria-current]{font-weight:750;background:#ebf1e3;border-radius:6px}.breadcrumbs{font-size:11px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 0 15px}.breadcrumbs button{padding:4px;font-size:11px}.sample-tabs{display:flex;margin-bottom:18px;border-bottom:1px solid var(--line)}.sample-tabs button{background:transparent;border:0;border-bottom:3px solid transparent;padding:12px 19px;font-size:13px}.sample-tabs button[aria-selected=true]{border-bottom-color:var(--green);font-weight:700}.sample-app [role=tabpanel]{min-height:140px;font-size:13px}.page-indicator{font-size:12px;display:grid;place-items:center}.sample-app .inline-actions{align-items:center}.sample-app .btn{font-size:11px;padding:9px 12px}.filter-row{display:flex;gap:7px;margin-bottom:18px}.filter-row .chip{font-size:11px;padding:6px 12px}.content-card{box-shadow:none;margin:auto}.badge-demo{font-size:10px;border:1px solid #d7cce7;background:#eee7f5;color:#6b4e83;border-radius:6px;min-height:44px;padding:8px;margin-left:8px}.demo-divider{border:0;border-top:1px solid #cad5c0;margin:20px 0}.content-card details{border:1px solid var(--line);padding:10px;border-radius:6px;font-size:12px;margin-top:14px}.content-card summary{cursor:pointer;min-height:26px}.content-card details p{font-size:12px;margin:10px 0 0}.carousel-controls{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:12px}.loading-card{text-align:center;min-height:260px;display:flex;flex-direction:column;justify-content:center}.empty-illustration{font-size:48px;color:#8b9c7b}.skeleton{height:15px;background:#e6eade;border-radius:5px;margin-bottom:12px}.skeleton.image-placeholder{height:90px}.skeleton.short{width:60%}.spinner-demo{width:42px;height:42px;border:4px solid #e1e8d8;border-top-color:var(--green);border-radius:50%;margin:20px auto;animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}progress{width:100%;height:17px;accent-color:var(--green)}.box-model{width:100%;max-width:400px;border:1px dashed #b59668;background:#f6dfbe;border-radius:5px;padding:0 0 2px}.padding-space{background:#d4e7bb;border:2px solid #4b6840}.content-space{background:#fff;min-width:0;padding:1px;font-size:15px}.content-space p{font-size:12px;line-height:1.8}.gap-space{display:flex;flex-wrap:wrap}.gap-space .btn{font-size:12px;padding:10px 15px}.viewport-scroll{max-width:100%;width:100%;overflow:auto;border:1px solid #c6d1bc;border-radius:8px;background:#dde5d4;padding:12px}.virtual-viewport{background:#fff;min-height:220px;padding:15px;border:1px solid #c4d0b9;border-radius:6px}.viewport-label{font-size:11px;color:#6b775f;margin-bottom:14px}.responsive-grid{display:grid;gap:12px}.responsive-grid>div{background:#eef2e6;border-radius:6px;padding:12px;min-width:0;border:1px solid #d9e2ce}.responsive-grid h4{font-size:13px;margin:0 0 9px}.responsive-grid p{font-size:12px;margin:8px 0}.color-pair{display:flex;gap:16px;margin-bottom:15px}.color-pair label{flex:1;font-size:12px;font-weight:600}.color-pair input{display:block;width:100%;height:43px;margin-top:7px;border:1px solid #c9d3c2;padding:2px;background:white;border-radius:5px}.error-box{border:2px solid #b44138;padding:12px;border-radius:6px}.contrast-live{text-align:center;display:flex;flex-direction:column;gap:5px}.contrast-live strong{font-size:27px}.contrast-live span{font-size:12px}.mission-win{border-radius:12px;background:#eaf1dd;text-align:center;padding:26px;margin:24px 0}.win-star{font-size:38px;color:#698442}.mission-win h2{margin:9px 0}.mission-win>strong{font-size:24px}.mission-win p{font-size:13px;margin-top:14px}.mission-win .term-chips{justify-content:center}.mission-win .term-chips span{background:white}.catalog-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px}.catalog-card h3 small{display:block;margin:4px 0 0}.term-practice{font-size:12px;font-weight:650;color:var(--green);border-top:1px solid var(--line);padding-top:13px;min-height:39px}.catalog-card .tag{margin-bottom:8px}.workbench [hidden]{display:none!important}.mission-heading{scroll-margin-top:20px}#missionBody{scroll-margin-top:20px}
@media(max-width:1150px){.mission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-grid{grid-template-columns:245px minmax(0,1fr);gap:18px}.stage-surface{padding:20px}.workbench-top{padding:15px}.live-dot{font-size:9px}.quest-note{width:220px;left:3%}.learn-play{grid-template-columns:1fr 1fr;gap:20px}.mission-brief{padding:23px}.mission-heading h1{font-size:29px}.sample-card{padding:18px}.practice-guide .btn{font-size:11px}.workbench-top .tiny{letter-spacing:.7px}}
@media(max-width:950px){.practice-grid{grid-template-columns:1fr}.practice-guide{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}.practice-guide>h2{grid-column:1/-1;margin-bottom:0}.practice-guide>#goalList{grid-row:2/5}.practice-guide>.hint{margin:0}.practice-guide>.inline-actions{grid-column:2}.practice-guide>.pocket-title{grid-column:1/-1;margin:12px 0 2px}.practice-guide>.term-detail{margin:0}.learn-play{grid-template-columns:1fr}.mission-brief{position:static}.mission-brief .mission-symbol{display:none}.mission-brief .eyebrow{margin-top:0}.journey-hero{min-height:280px}.workbench{margin-top:7px}.workbench-top{padding:17px 22px}.workbench-top .tiny{letter-spacing:1.4px}.live-dot{font-size:11px}}
@media(max-width:600px){.journey-hero{min-height:0}.journey-hero h1{font-size:29px}.hero-side{font-size:10px}.mission-grid{grid-template-columns:1fr;gap:14px}.mission-tile{padding:19px}.mission-tile .mission-symbol{margin:12px 0;width:42px;height:42px;font-size:24px}.mission-tile h3{font-size:18px}.mission-tile p{min-height:0;font-size:12px;margin-bottom:14px}.mission-tile-foot{margin-top:17px}.map-explainer{font-size:11px}.mission-heading h1{font-size:27px;letter-spacing:-1px}.mission-heading>p{font-size:12px}.step-nav{gap:2px;margin:21px 0 25px}.step-nav button{font-size:11px;gap:5px;padding:12px 1px}.step-nav button span{font-size:9px;width:22px;height:22px}.learn-play{gap:18px}.term-lessons h2{font-size:20px}.term-detail{padding:15px}.term-detail summary{font-size:14px}.term-detail summary small{font-size:9px}.mission-brief{padding:22px}.mission-brief h2{font-size:21px}.practice-guide{display:block}.practice-guide>h2{font-size:19px;margin-bottom:15px}.practice-guide>.hint{margin:17px 0}.practice-guide>.term-detail{margin:9px 0}.practice-guide>.pocket-title{margin-top:18px}.practice-guide .term-detail summary small{display:inline;margin-left:8px}.practice-guide .btn{font-size:12px}.workbench{margin-top:10px}.stage-surface{padding:18px 14px;min-height:310px}.workbench-top{padding:14px}.workbench-top .tiny{font-size:8px;letter-spacing:.8px}.live-dot{font-size:9px}.settings-strip{padding:17px}.sample-card{padding:18px}.sample-card h3{font-size:18px}.sample-card p{font-size:13px}.sample-app{padding:15px}.sample-app .inline-actions{gap:6px}.sample-app .btn{flex:initial;font-size:10px;padding:8px}.sample-muted{font-size:10px}.goal{font-size:12px}.practice-guide #goalList{background:#eef2e6;padding:14px;border-radius:9px}.goal:last-child{border-bottom:0}.catalog-card{padding:20px}.term-practice{min-height:44px}.box-model .btn{font-size:10px;padding:8px 10px}.example-dialog{padding:35px 23px}.example-dialog h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.spinner-demo{animation:none;border-style:dashed}}
@media(max-width:600px){.practice-grid{display:flex;flex-direction:column;gap:14px}.practice-guide{display:contents}.practice-guide>h2{order:0;margin:0}.practice-guide>#goalList{order:1;width:100%}.workbench{order:2;width:100%;margin:0}.practice-guide>.hint{order:3;width:100%;margin:0}.practice-guide>.inline-actions{order:4;width:100%}.practice-guide>.pocket-title{order:5;width:100%;margin:8px 0 0}.practice-guide>.term-detail{order:6;width:100%;margin:0}nav{justify-content:space-evenly}nav a{min-width:80px}}