/* The home is one sunlit desk. Physical objects share its unboxed surface. */
body{background:linear-gradient(115deg,#e0e3f018,#d6d9e329),url('../assets/workshop/desk.png') center top/cover fixed}
main.workbench{max-width:940px;padding:12px 28px 32px;gap:25px}
.learning-home-header{padding:0 7px 0 5px}.learning-home-header h1{font-size:1.8rem;letter-spacing:-.06em;color:#443b57}.learning-home-header .eyebrow{font-size:.7rem;letter-spacing:.14em;color:#655a77}
.learning-home-header>a{background:#fff8e9;padding:9px 14px;transform:rotate(3deg);box-shadow:3px 5px 0 #73739128;border-radius:1px;border:1px solid #dad2c9;font-size:.74rem}
.desk-composition{display:grid;grid-template-columns:1.15fr 1fr;align-items:start;gap:22px;position:relative}
.current-lesson{grid-column:1;grid-row:1;position:relative;isolation:isolate;transform:rotate(-1.2deg);padding:27px 25px 22px;border:12px solid #b1a0c5;border-left:17px solid #88749e;border-top-width:25px;border-bottom-width:18px;border-radius:4px 9px 10px 3px;background:repeating-linear-gradient(0deg,#8e789905 0 1px,transparent 1px 4px),#fff9e9;box-shadow:inset 4px 0 9px #4b3f6012,0 3px #efe8d9,0 5px #c8becb,0 8px #f3ebdc,0 11px #89759e,12px 22px 0 #737ea52a,16px 25px 24px #45507719;gap:16px!important}
.current-lesson:before{content:'';position:absolute;left:-13px;top:-22px;bottom:-16px;width:2px;background:#d4c4dd77;pointer-events:none}
.current-lesson:after{content:'';position:absolute;top:-30px;right:20px;width:17px;height:44px;background:linear-gradient(90deg,#8e4a76,#b96893 42%,#9f507f);clip-path:polygon(0 0,100% 0,100% 100%,50% 83%,0 100%);filter:drop-shadow(2px 3px 1px #58435f55);pointer-events:none}
.current-lesson>.eyebrow{letter-spacing:.16em;font-size:.68rem;border-bottom:1px solid #b4a2bd;padding-bottom:10px;align-self:flex-start;color:#7a6488}
.current-lesson h2{font-size:1.9rem;letter-spacing:-.04em;color:#47354d}.lesson-goal{font-size:.86rem;line-height:1.85;max-width:28em}.lesson-path{border:0;border-bottom:1px dashed #c7b5c9;gap:5px;padding:7px 0 14px;font-size:.73rem}
.current-lesson>.primary{background:#765571;border:1px solid #67445f;border-radius:3px;box-shadow:0 3px #4f354d;font-size:.93rem;min-height:48px}
.notebook-entry{min-height:65px;margin:0;padding-top:14px;border:0;gap:12px}.notebook-entry strong{font-size:.86rem}.notebook-entry small{font-size:.69rem}.mini-notebook{width:34px;height:46px;border-left-width:4px;box-shadow:0 2px #fff7e4,0 4px #9a88a8,3px 5px 0 #73799535}.mini-notebook span{font-size:7px;padding:4px}
.home-objects{grid-column:2;grid-row:1;align-self:center;min-width:0;gap:0!important;position:relative}
.home-objects .toy-stage{height:330px;background:none;border:0;border-radius:0;box-shadow:none;overflow:hidden;margin:0;isolation:isolate}
.home-objects .toy-stage canvas{mix-blend-mode:normal}.home-objects .toy-loading{font-size:.74rem;color:#625b77;padding:90px 10px}
.home-objects .toy-actions{gap:0;justify-content:center;align-items:center;padding:0 8px;transform:rotate(1deg)}
.home-objects .toy-actions button{flex:0 1 auto;padding:7px 10px;font-size:.72rem;color:#5b476b;min-height:44px;background:none;border:0;box-shadow:none;text-decoration:underline;text-decoration-color:#8d7c9e60;text-underline-offset:5px}
.home-objects .toy-actions button:disabled{opacity:.45}.home-objects .toy-actions button:hover:not(:disabled){background:#faf1e780}
.home-objects .dice-result{background:none;border:0;padding:6px 10px;min-height:0;font-size:.74rem;text-align:center;color:#50405f}.home-objects .dice-result:empty{display:none}
.home-objects .roll-history{margin:3px 10px;background:none;border:0;font-size:.7rem;padding:0}.home-objects .roll-history summary{font-size:.7rem;text-align:center;padding:5px;min-height:30px}.home-objects .roll-history ol{grid-template-columns:repeat(2,1fr);gap:5px}.home-objects .roll-history li{font-size:.7rem;padding:6px;background:#fff8e5}
.study-shortcuts{gap:24px;padding:8px 6px 5px}.study-shortcuts .destination{padding:17px 18px;position:relative;background:repeating-linear-gradient(0deg,transparent 0 23px,#b6a6bc22 23px 24px),#fff8e9;border:1px solid #cdc1c9;border-radius:3px;box-shadow:0 3px #d5c8d6,0 5px #fcf3e2,6px 11px 0 #737d9e28;transform:rotate(1.6deg)}
.study-shortcuts .destination:nth-child(2){background:#d6c7dc;transform:rotate(-2deg);border-top:7px solid #897693;box-shadow:0 3px #b8a5c4,5px 10px 0 #737d9e28}.study-shortcuts .destination strong{font-size:.95rem}.study-shortcuts .destination small{font-size:.7rem;color:#62566e}
.workbench>.destination{margin:4px 7px;padding:14px 10px;border-bottom:1px solid #8a7c9966}.workbench>.destination strong{font-size:.93rem}.workbench>.destination small{font-size:.72rem}
nav{border-radius:6px;border:1px solid #b4a8c0;background:#c4b8d0;box-shadow:inset 0 2px #e4dce7,0 5px #9686a8,8px 12px 0 #6c719426;padding:5px 7px calc(5px + env(safe-area-inset-bottom))}nav a{border-radius:3px}nav a[aria-current]{background:#fff8e9;box-shadow:0 3px #a79aac}nav a[aria-current]:after{background:#a85388}

/* Mobile composition is designed for a portrait viewport, not a scaled desktop. */
.current-lesson{display:flex;flex-direction:column}
@media(max-width:650px){
 body:has(main.workbench) .brand{display:none}
 body{background-size:auto,auto 110svh;background-position:center top}
 main.workbench{padding:22px 18px calc(100px + env(safe-area-inset-bottom));margin:0 auto;min-height:100svh;gap:20px;max-width:480px}
 .learning-home-header{padding:0;min-height:44px;gap:10px}
 .learning-home-header h1{font-size:1.4rem;letter-spacing:-.04em}
 .learning-home-header .eyebrow{font-size:.75rem;letter-spacing:.07em}
 .learning-home-header>a{font-size:.75rem;padding:9px 12px;min-height:44px;transform:rotate(2deg)}
 .desk-composition{display:flex;flex-direction:column;gap:12px}
 .current-lesson{order:0;width:100%;margin:0;transform:none;padding:20px 18px 16px;border-width:8px;border-left-width:12px;border-top-width:18px;border-bottom-width:12px;gap:12px!important;box-shadow:inset 3px 0 6px #4b3f6012,0 3px #efe8d9,0 5px #c8becb,0 8px #89759e,8px 13px 0 #737ea524}
 .current-lesson>.eyebrow{font-size:.75rem;padding-bottom:6px}
 .current-lesson h2{font-size:1.65rem;line-height:1.35}
 .current-lesson .lesson-goal{font-size:.9rem;line-height:1.7}
 .current-lesson:before{left:-9px;top:-15px;bottom:-10px}
 .current-lesson:after{top:-22px;height:35px;width:14px;right:17px}
 .current-lesson .lesson-path{font-size:.78rem;padding:3px 0 10px;gap:4px}
 .current-lesson>.primary{min-height:48px;font-size:.95rem;margin:0;padding:10px 12px}
 .notebook-entry{min-height:48px;padding:6px 0 0;gap:12px}
 .notebook-entry strong{font-size:.88rem}.notebook-entry small{font-size:.75rem}
 .mini-notebook{width:30px;height:40px}
 .home-objects{order:1;width:100%;align-self:stretch;margin:0;display:flex;flex-direction:column}
 .home-objects .toy-stage{height:clamp(135px,18svh,160px);margin:0;width:100%}
 .home-objects .toy-actions{margin:-5px 0 0;padding:0;transform:none;justify-content:space-evenly}
 .home-objects .toy-actions button{font-size:.78rem;min-height:44px;padding:8px 10px}
 .home-objects .dice-result{font-size:.8rem;padding:4px 0;line-height:1.55}
 .home-objects .roll-history summary{font-size:.75rem;min-height:44px;padding:10px}
 .study-shortcuts{gap:12px;padding:0}
 .study-shortcuts .destination{min-height:82px;padding:12px 10px;gap:8px;transform:none}
 .study-shortcuts .destination:nth-child(2){transform:none;border-top-width:4px}
 .study-shortcuts .destination strong{font-size:.9rem}
 .study-shortcuts .destination small{font-size:.75rem;line-height:1.5}
 .study-shortcuts .destination>svg{display:none}
 .workbench>.destination{min-height:64px;margin:0;padding:8px 4px}.workbench>.destination small{font-size:.78rem}
 nav{bottom:0;width:100%;border-radius:10px 10px 0 0;padding:5px 8px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -3px 15px #53435d20,inset 0 2px #ede7ef;gap:4px}
 nav a{min-height:54px;font-size:.72rem;padding:4px 2px;gap:3px}nav svg{width:21px;height:21px}
 main{scroll-margin-bottom:90px}
}
@media(max-width:360px){
 main.workbench{padding:16px 13px calc(95px + env(safe-area-inset-bottom));gap:16px}
 .learning-home-header h1{font-size:1.25rem}
 .current-lesson{padding:17px 13px 14px;gap:10px!important}.current-lesson h2{font-size:1.45rem}
 .current-lesson .lesson-goal{font-size:.85rem}.current-lesson .lesson-path{font-size:.73rem}
 .home-objects .toy-actions button{font-size:.75rem;padding-inline:8px}
}