/* A playful, tactile showcase treatment; all learning and reporting stays live. */
:root{--bg:#f3f4ed;--bg-soft:#e7ebdd;--surface:#fffef8;--surface-2:#f5f6ee;--border:#dfe4d3;--border-strong:#c4d0b7;--ink:#213229;--ink-soft:#5b6d5a;--ink-3:#697a65;--r-xl:24px;--brand-400:#ffe38e;--brand-500:#ffd66b;--brand-600:#efbd43;--brand-700:#896316;--g-brand:linear-gradient(135deg,#ffe59a,#f5c451);--brand-ink:#43330f}
body{background:var(--bg)}body:before{opacity:.4}.app{border-radius:26px;border-color:var(--border);box-shadow:0 30px 80px -35px #183a3033}.demobar{background:var(--surface);padding-bottom:16px;border-bottom:1px solid var(--border)}.brand{letter-spacing:-.045em;font-weight:800}.brand .brand-mark{border-radius:13px;transform:rotate(-5deg);box-shadow:0 5px 0 #d6ad52}.demo-badge{border-radius:5px;letter-spacing:.07em;font-size:10px}.role-switch{padding:5px;border-radius:12px}.role-switch button{border-radius:8px}.role-note{border-radius:10px;background:var(--surface-2);font-size:12px}.kidbar .greeting h1{font-weight:750;letter-spacing:-.045em}.tile{border-radius:22px;border:1px solid #ffffff6b;box-shadow:0 7px 0 color-mix(in srgb,var(--c1) 50%,#102a34),0 18px 24px -18px #21322999;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}.tile:after{background:linear-gradient(120deg,#ffffff24,transparent 50%)}.tile:hover:not(.locked){transform:translateY(-6px) rotate(-1deg);box-shadow:0 11px 0 color-mix(in srgb,var(--c1) 50%,#102a34),0 23px 25px -18px #21322988}.tile .icon{border-radius:23px;box-shadow:inset 0 1px 0 #ffffff88,0 8px 20px -5px #0003;transform:rotate(-4deg)}.tile .label{font-weight:750;letter-spacing:-.03em}.tile .set-status{opacity:.9}.stars{border-radius:12px;background:var(--g-brand);color:var(--brand-ink);box-shadow:0 4px 0 #d6ad52}.set-card{border-radius:20px;transition:transform .3s}.set-card:hover{transform:translateY(-4px)}.stat-cards .sc{background:var(--surface);border-radius:12px;padding:20px}.stat-cards .sc:before{width:4px}.qcard{border-radius:22px}.progress .bar{height:10px}.progress .bar>i{background:var(--g-brand)}.btn{border-radius:10px}
@media(prefers-color-scheme:dark){:root{--bg:#101d18;--bg-soft:#1b2b22;--surface:#1b2b22;--surface-2:#22362a;--border:#324937;--border-strong:#46634c;--ink:#eef4e3;--ink-soft:#b4c7ac;--ink-3:#93ab8d}.app{box-shadow:0 35px 80px -30px #0008}}
@media(prefers-reduced-motion:reduce){.tile:hover:not(.locked),.set-card:hover{transform:none}.tile,.set-card{transition:none}}