/* Final notebook details: warm paper, clear ink, and quiet movement. */
:root{--ink:#493e33;--muted:#776755;--shadow:0 6px 22px #70532d08}
body{background-image:radial-gradient(#d5c3ac30 .7px,transparent .7px)}
.topbar{backdrop-filter:blur(16px);box-shadow:0 1px 0 #ffffff90}
.workspace-caption,.breadcrumb-root{color:#89755f}
.page-intro,.reference-intro{padding-bottom:6px}
.page-intro p,.reference-intro p{line-height:1.95;max-width:600px}
.eyebrow{letter-spacing:1.8px;color:#a66a2e}
.panel,.stat,.course,.curriculum-group{box-shadow:0 5px 20px #795b3207}
.panel,.stat,.course{border-color:#e9dcc8}
.section-title h2{letter-spacing:.02em}
.section-title p,.stat-sub,.course-meta,.course-footer,.step-label{color:#826b50}
.home-hero{background:linear-gradient(125deg,#fff3ca,#ffe8a2);border-color:#eccc85;box-shadow:0 7px 0 #e8c17d15,0 12px 30px #ac7e2810}
.home-hero p,.hero-kicker{color:#83623d}
.scene-note{color:#83643e;background:#fffdf0}
.buddy-message,.buddy-message small{color:#806542}
.buddy-message{box-shadow:0 3px 0 #e0bf8a1c}
.stat-title,.stat-number small,.next-tip p{color:#806c50}
.next-tip strong{color:#735c30}
.course-body{background:linear-gradient(#fffefb,#fffdf8)}
.course-description{line-height:1.95}
.course-symbol{box-shadow:0 3px 0 #ffffff40}
.group-head{position:relative;overflow:hidden}
.group-head h2{line-height:1.6}
.group-head small{color:var(--course-ink)}
.lesson-row{transition:background .2s,box-shadow .2s}
.lesson-row h3{line-height:1.8}
.lesson-row p{line-height:1.95;color:#78634d}
.lesson-row time{color:#907a5f}
.lesson-key-row{background:#fffaf0;border-color:#ebddc4;color:#7c613d;line-height:1.7}
.lesson-key-row kbd{color:#7b5b31;box-shadow:0 2px 0 #ddcba82b}
.support{padding-top:24px;background:linear-gradient(135deg,#fffefb,#fffaf0);box-shadow:0 5px 0 #e3c8a215}
.support:after{content:'✳︎';font-family:Arial,sans-serif;color:#e7b85f;font-size:45px;right:12px;top:17px;line-height:1;opacity:.8}
.support strong{font-size:18px;line-height:1.8;position:relative;z-index:1}
.support p{color:#806b52;line-height:1.95}
.support-line{color:#987f5b;letter-spacing:1.2px}
.support-link{color:#8f612e;min-height:40px}
.nav{min-height:48px;transition:background .2s,border-color .2s,color .2s,transform .2s}
.nav-label{color:#957651}
.stamp-nav{color:#597442;min-height:44px;transition:background .2s,transform .2s}
.profile{color:#7d5f3d}.profile small{color:#967e61}
.primary,.secondary,.icon-btn,.keycap-copy,.mobile-nav button{transition:background .18s,transform .18s,box-shadow .18s,border-color .18s}
button:focus-visible,a:focus-visible{outline:3px solid #c98736;outline-offset:4px}
.check-item:has(input:checked){background:#f0f7e8;border-radius:8px}
.review-item{transition:background .2s,border-color .2s}
.review-item:has(input:checked){background:#f0f7e8;border-color:#c5d9ad}
.lesson-step p{color:#63503c;line-height:2}
.lesson-summary{color:#776140}
.lesson-key-box .lesson-key-row,.lesson-key-box kbd{color:#7b603d}
.check-item,.quiz-option{color:#65583f}
.export-method ol,.export-method code{color:#7c633e}
.png-method ol,.png-method code{color:#566d3e}
.reference-note,.filename-example p{color:#7d6849}
.key-group h3{line-height:1.8}
@media(hover:hover){.nav:hover{transform:translateX(3px)}.secondary:hover .ui-icon,.support-link:hover .ui-icon,.course-footer button:hover .ui-icon{transform:translate(2px,-2px)}.ui-icon{transition:transform .2s}.keycap-copy:hover{transform:translateY(-2px);box-shadow:0 3px 0 #d6bb8b30}}
@media(prefers-reduced-motion:no-preference){
 .hero-buddy{animation:notebook-float 6s ease-in-out infinite}
 .scene-star.one{animation:star-turn 7s ease-in-out infinite}
 dialog[open]{animation:dialog-arrive .25s cubic-bezier(.22,1,.36,1)}
 dialog[open]::backdrop{animation:backdrop-arrive .2s ease-out}
 .mobile-nav button.active .ui-icon{animation:nav-settle .3s ease-out}
}
@keyframes notebook-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(-2deg)}}
@keyframes star-turn{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}}
@keyframes dialog-arrive{from{opacity:.5;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@keyframes nav-settle{0%{transform:translateY(2px)}55%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@media(max-width:760px){
 .sidebar{transition:transform .32s cubic-bezier(.22,1,.36,1);box-shadow:12px 0 45px #62462212;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
 .sidebar.open .nav{animation:menu-item-arrive .32s ease-out both}
 .sidebar.open .nav:nth-child(2){animation-delay:40ms}.sidebar.open .nav:nth-child(3){animation-delay:80ms}
 .sidebar-close.icon-btn{width:36px;height:36px;right:-6px;top:-8px}
 .support{padding:22px 18px 14px}.support p{font-size:12px}.support strong{font-size:19px}.support:after{font-size:40px}
 .mobile-nav{padding-top:9px;box-shadow:0 -5px 24px #795b3208}
 .mobile-nav button{font-size:10px;min-height:50px}
 .mobile-nav button.active{box-shadow:0 2px 0 #e5c99535}
 .page-intro h1,.reference-intro h1{line-height:1.55}
 .panel{border-radius:18px}.lesson-row{padding-top:23px;padding-bottom:23px}
 .group-head h2{font-size:18px}
}
@keyframes menu-item-arrive{from{opacity:.5;translate:-7px 0}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}