/* J02 · a brighter, playful workshop, with the original violet/orange identity. */
:root{--sun:#ffd65a;--teal:#33c7b4;--pink:#fa84b4;--paper:#f8f6ff;--line:#ded5f0}
body{background:#f8f6ff;background-image:radial-gradient(#cfc1ee75 .7px,transparent .7px);background-size:18px 18px}
.topbar{border-bottom:2px solid #e7dcff}.brandmark{background:var(--purple);box-shadow:4px 4px 0 var(--sun);rotate:-7deg}.header-actions{gap:12px}.motion-switch{font-size:.8rem;padding:8px 11px;min-height:38px;border-color:#d5c5ef}
.shell{background:#ffffffba}.sidebar{background:linear-gradient(165deg,#f0e8ff 0%,#ffffff 72%);border-right:2px solid #e6daf9}.sidebar h1{color:#5220a5;font-size:2.85rem}.sidebar h1 .accent{color:#ef7624}.sidebar-caption{color:#625176}.step-button{border:1px solid transparent}.step-button.active{background:var(--purple);color:white;box-shadow:3px 4px 0 #c3a8f4}.active .step-no{background:var(--sun);border-color:var(--sun);color:var(--ink)}.step-button:hover:not(:disabled):not(.active){background:#fff}.step-button:disabled{opacity:.6}
.sidebar-companion{display:block;width:100%;max-height:140px;object-fit:cover;border-radius:20px;margin-bottom:14px;border:3px solid white;box-shadow:0 5px 18px #5220a512}
.intro-grid{grid-template-columns:1fr 1.05fr;gap:20px;padding:10px 0 0}.intro-grid h2{font-size:clamp(2.1rem,3.2vw,3.5rem);letter-spacing:-.045em}.intro-grid h2 em{color:var(--purple);font-style:normal;background:linear-gradient(transparent 68%,var(--sun) 68%);padding:0 5px 4px 0}.intro-art-wrap{margin:0;border:0;background:transparent;border-radius:28px;padding:0;position:relative;overflow:visible}.intro-art{border-radius:28px;aspect-ratio:3/2;object-fit:cover;width:100%;max-height:none;box-shadow:0 14px 35px #5520a515}.art-sticker{position:absolute;bottom:14px;right:15px;background:var(--sun);color:var(--ink);font-size:.8rem;font-weight:750;border:2px solid white;box-shadow:3px 4px 0 #69349b25;border-radius:10px;padding:9px 13px;rotate:-4deg}
.tag{background:#e8ddff;color:#5320a2;border:1px solid #d4c0f7;font-size:.8rem}.mission-brief{background:#edf9f6;border-color:var(--teal);color:#164f48;border-radius:0 18px 18px 0}.proof-card{border:1px solid #d2c0f0;box-shadow:0 4px 0 #e6ddf7;border-radius:16px}.proof-card:nth-child(2){background:#fff6d6;border-color:#ead482;box-shadow:0 4px 0 #f1e3ae}.proof-card:nth-child(3){background:#eaf9f5;border-color:#a8d9cd;box-shadow:0 4px 0 #c5e9df}.proof-card b{font-size:.8rem}.button{border-radius:12px;box-shadow:0 3px 0 #482081;transition:transform .18s,background .18s,box-shadow .18s}.button:hover{transform:translateY(-2px);box-shadow:0 5px 0 #482081}.button:active{transform:translateY(2px);box-shadow:0 1px 0 #482081}.button.light{box-shadow:0 3px 0 #e2d8ef}.button.light:hover{box-shadow:0 5px 0 #d9cbed}.button.dark{background:#173e74;box-shadow:0 3px 0 #102b53}.text-button{box-shadow:none}
.panel{border-radius:22px;box-shadow:0 5px 0 #ede7f7}.download-card{background:#fff8df;border-color:#e9dba5;box-shadow:0 5px 0 #f1e6bd}.check-row{background:#f7f4fc;border:1px solid transparent}.check-row:has(input:checked){background:#e9f8f2;border-color:#b2dbc9}.field{color:#4b2d72}.paper{background:#fffdf3;border-color:#e6dba8;border-top:5px solid var(--sun);box-shadow:5px 5px 0 #ede5c6}.paper,.observation{font-size:1rem}.tip{background:#fff2d3;color:#684815;border:1px solid #f2dc9d}.feedback.good{background:#e0f6eb;border-color:#278867}.feedback.warning{background:#fff2d2}.feedback strong{font-size:1.03rem}.choices-stack .choice.selected,.choice-grid .choice.selected{box-shadow:0 0 0 1px var(--purple)}.choice{transition:background .15s,border-color .15s}.mission-tab{border-radius:14px;box-shadow:0 3px 0 #e8e0f3}.mission-tab.active{background:var(--purple);border-color:var(--purple);box-shadow:0 4px 0 #c6aafa}.mission-tab:nth-child(2).active{background:#126b5f;border-color:#126b5f;box-shadow:0 4px 0 #96d6c8}.mission-tab:nth-child(3).active{background:#8d4b12;border-color:#8d4b12;box-shadow:0 4px 0 #f1ce8e}.mission-tab span{font-size:.8rem}
.quest-banner{display:grid;grid-template-columns:220px 1fr;align-items:center;border-radius:24px;overflow:hidden;background:#eae1ff;border:1px solid #d8c7f3;margin:0 0 27px;min-height:146px}.quest-banner img{display:block;width:220px;height:160px;object-fit:cover}.quest-banner>div{padding:22px 26px}.quest-banner h3{font-size:1.6rem;margin:8px 0}.quest-banner p{color:#513b6a;max-width:650px}.quest-banner .tag{background:white}.quest-banner.tone-mint{background:#e2f7f0;border-color:#b8e5d7}.quest-banner.tone-mint p{color:#275e52}.quest-banner.tone-sun{background:#fff2c9;border-color:#ead496}.quest-banner.tone-sun p{color:#74532a}
.mission-progress{display:flex;align-items:center;gap:16px;margin:3px 0 18px}.mission-progress label{font-size:.85rem;color:#5a486d;white-space:nowrap;cursor:default}.mission-progress progress{accent-color:var(--purple);height:12px;width:100%;border:0;border-radius:12px;overflow:hidden}.mission-progress progress::-webkit-progress-bar{background:#e7def4}.mission-progress progress::-webkit-progress-value{background:linear-gradient(90deg,var(--purple),#b365e7);border-radius:12px}.mission-progress progress::-moz-progress-bar{background:var(--purple)}
.animation-card{margin:22px 0 26px;border:1px solid #d5c1f0;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 5px 0 #e8dff6}.animation-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:18px 23px;background:#f4edff}.animation-heading h3{font-size:1.1rem;letter-spacing:-.02em}.animation-heading span{font-size:.8rem;color:#624582}.motion-screen{background:#f3edff;aspect-ratio:16/9;position:relative;overflow:hidden;isolation:isolate}.motion-fallback{padding:34px;font-size:1.1rem;color:#433059}.motion-lesson-note{font-size:.875rem;line-height:1.6;color:#5d4a71;padding:16px 22px;background:#fff}.animation-card.compact{margin-top:0}.flow-board{background:#eef9f6;border-color:#b6dfd4}.flow-card.on{background:var(--sun);border-color:#d6b649}.flow-top{gap:20px}.summary-head{position:relative;background:#5825ac;color:white;border:0;overflow:hidden;padding-right:230px;min-height:230px}.summary-head h2{font-size:2.25rem}.summary-head p{color:#f1eaff;max-width:650px}.summary-head .eyebrow{color:var(--sun)}.summary-mascot{position:absolute;width:215px;height:215px;object-fit:cover;right:12px;bottom:0;border:5px solid #b290de;border-radius:50%;rotate:7deg}.summary-stats .stat:nth-child(1){background:#fff2cb;border-color:#ead6a0}.summary-stats .stat:nth-child(2){background:#e4f7f1;border-color:#b6e1d3}.summary-stats .stat:nth-child(3){background:#ede3ff;border-color:#d2b9f4}.stat{box-shadow:0 4px 0 #e4dce9}.stat strong{font-size:2rem}.stat span{font-size:.9rem}.insight img{border-radius:20px;max-height:245px;object-fit:cover}.mode-banner{background:#fff2ce}.site-footer{background:#faf8ff}
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}body.motion-paused .button:hover{transform:none}
@media(max-width:1080px){.intro-grid{grid-template-columns:1fr 1fr}.intro-grid h2{font-size:2.2rem}.intro-art-wrap{max-width:none;margin:0}.quest-banner{grid-template-columns:165px 1fr}.quest-banner img{width:165px;height:165px}.quest-banner>div{padding:18px}.quest-banner h3{font-size:1.35rem}.summary-head{padding-right:180px}.summary-mascot{width:160px;height:160px}.header-actions .motion-switch{font-size:.75rem}.sidebar-companion{max-height:115px}}
@media(max-width:720px){.intro-grid{grid-template-columns:1fr}.intro-grid h2{font-size:2.45rem}.intro-art-wrap{width:100%;max-width:480px;margin:5px auto}.intro-art{max-height:255px;object-position:center}.art-sticker{bottom:10px;right:10px}.header-actions{gap:6px}.header-actions .motion-switch{padding:7px 9px;font-size:.75rem}.quest-banner{grid-template-columns:100px 1fr;min-height:120px}.quest-banner img{width:100px;height:100%;min-height:145px}.quest-banner>div{padding:14px}.quest-banner h3{font-size:1.15rem}.quest-banner p{font-size:.9rem}.quest-banner .tag{font-size:.75rem}.mission-progress{gap:10px}.summary-head{padding:25px 20px 160px}.summary-mascot{width:140px;height:140px;right:22px;bottom:0}.summary-head h2{font-size:2rem}.animation-heading{padding:15px;align-items:flex-start}.animation-heading h3{font-size:1rem}.animation-heading span{font-size:.75rem;white-space:nowrap}.motion-lesson-note{padding:14px 16px}.stat span{font-size:.8rem}.sidebar-companion{display:none}.brand small{display:none}.brand{gap:9px;font-size:.92rem}.proof-card{display:block}.proof-card b{margin-bottom:6px}.motion-fallback{padding:20px;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:white}.quest-banner,.animation-card,.sidebar-companion,.summary-mascot{display:none!important}.summary-head{padding:20px;min-height:0;background:white;color:black}.summary-head p{color:black}.panel,.stat,.paper{box-shadow:none}.mission-progress{display:none}.intro-art{box-shadow:none}}
.prep-art{display:block;width:100%;height:190px;object-fit:cover;border-radius:14px;margin-bottom:20px}.motion-screen{aspect-ratio:auto}.lesson-player-controls{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#251b38;color:white;position:relative;z-index:3}.lesson-player-controls button{border:1px solid #776390;background:#fff;color:#3e235e;font-weight:700;border-radius:8px;padding:8px 12px;font-size:14px;min-height:38px;white-space:nowrap;box-shadow:none}.lesson-player-controls button:hover{background:#ffd65a}.scrub-label{flex:1;display:flex;align-items:center;min-width:35px}.scrub-label input{accent-color:#ffd65a;width:100%;cursor:pointer}.player-time{font-size:13px;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:720px){.lesson-player-controls{gap:6px;padding:10px 8px}.lesson-player-controls button{padding:7px 8px;font-size:13px}.player-time{font-size:12px}.prep-art{height:190px}}