* { box-sizing: border-box; }
[hidden] { display: none !important; }
main { overflow-wrap: anywhere; }
.page-heading > *, .metric { min-width: 0; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 1rem/1.65 var(--font); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--pink-700); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; top: -100px; left: 16px; padding: 12px; background: white; }
.skip-link:focus { top: 12px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); }
.sidebar { background: linear-gradient(180deg,var(--nav-background),var(--nav-surface)); border-right: 1px solid var(--nav-border); padding: 30px 18px 20px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
.brand { display:flex; align-items:center; gap: 10px; font-weight: 800; font-size: 1.1875rem; color: var(--nav-text); }
.brand small { display:block; font-size: 0.75rem; font-weight: 500; letter-spacing: 1px; }
.brand-mark { border: 2px solid white; background: var(--nav-active-background); border-radius: 17px; width: 43px; height: 46px; display:grid; place-items:center; color:var(--nav-text); }
.nav-caption { margin: 34px 12px 12px; font-size: 0.75rem; letter-spacing: 2px; color: var(--muted); }
nav { display: grid; gap: 8px; }
.nav-link { display:flex; align-items:center; gap: 14px; border:1px solid transparent; min-height: 49px; border-radius: 14px; padding: 8px 16px; color:var(--nav-text); font-weight: 600; transition: background .18s, transform .18s; }
.nav-link:hover { background: var(--nav-hover-background); transform: translateX(2px); }
.nav-link[aria-current="page"] { color:var(--nav-text); background: var(--nav-active-background); border-color:var(--nav-border); box-shadow: 0 4px 10px var(--nav-shadow-color); }
.nav-icon { font-size: 1.5rem; line-height: 1.3; }
.nav-link[aria-current="page"]::after { content:""; margin-left:auto; width:6px; height:6px; background:var(--nav-active-text); border-radius:50%; }
.sidebar-note { margin: auto 0 0; padding-top: 30px; text-align:center; color:var(--pink-700); }
.sidebar-note > span { font-size: 2.5rem; }.sidebar-note p { font-size: 0.875rem; margin:4px 0; }.sidebar-note small { font-size: 0.75rem; color:var(--muted); }
.edition { font-size: 0.75rem; text-align:center; margin-top:28px; color:var(--muted); }
.workspace { min-width:0; }
.topbar { min-height:76px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 40px; background:var(--palette-fffafbd9); }
.breadcrumb { color:var(--muted); font-size: 0.875rem; }.breadcrumb span { margin:0 10px; color:var(--palette-d9b9c7); }.breadcrumb strong { color:var(--ink); font-weight:500; }
.local-badge { font-size: 0.75rem; display:flex; gap:7px; align-items:center; color:var(--palette-526b58); }.local-badge i { width:6px; height:6px; background:var(--palette-83ac8d); border-radius:50%; }
main { max-width:1260px; margin:0 auto; padding:30px 40px; outline:none; }
h1,h2,h3,p { margin-top:0; }h1 { font-size: 1.875rem; letter-spacing:1px; line-height:1.4; margin-bottom:8px; }h2 { font-size: 1.1875rem; margin-bottom:0; }h3 { font-size: 1.0625rem; margin-bottom:4px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }.eyebrow { font-size: 0.75rem; color:var(--pink-700); letter-spacing:2px; margin-bottom:7px; }.subtitle { color:var(--muted); font-size: 0.875rem; margin:0; }.date { color:var(--muted); font-size: 0.875rem; text-align:right; }.date strong { display:block; color:var(--ink); font-weight:500; }
.intro-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; margin-bottom:26px; }
.welcome-card { background:linear-gradient(115deg,var(--palette-fff4db),var(--palette-fffaf0)); border:1px solid var(--palette-f1e4c7); border-radius:var(--radius-lg); padding:28px; position:relative; overflow:hidden; }
.welcome-top { display:flex; align-items:center; gap:14px; }.avatar { width:54px; height:54px; display:grid; place-items:center; border:2px solid var(--palette-fff); border-radius:50%; background:var(--palette-f9dfe8); font-size: 1.625rem; }.welcome-top h2 { font-size: 1.375rem; }.welcome-top p { color:var(--muted); font-size: 0.875rem; margin:3px 0 0; }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; padding-top:20px; border-top:1px dashed var(--palette-e5d7b9); }.metric + .metric { border-left:1px solid var(--palette-ebdfc8); padding-left:18px; }.metric strong { display:block; font-size: 1.625rem; line-height:1.25; }.metric span { font-size: 0.8125rem; color:var(--muted); }.metric small { font-size: 0.8125rem; font-weight:400; color:var(--muted); }
.encouragement { background:var(--palette-fceaf1); border:1px solid var(--palette-f1d6e1); border-radius:var(--radius-lg); padding:26px; display:flex; flex-direction:column; justify-content:center; }.encouragement .eyebrow { letter-spacing:1px; }.encouragement blockquote { font-size: 1.25rem; margin:10px 0; line-height:1.9; font-weight:600; }.encouragement small { font-size: 0.75rem; color:var(--pink-700); }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow); }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }.section-heading > span { color:var(--muted); font-size: 0.75rem; }
.category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.category-card { border:1px solid var(--palette-f5e5e8); border-radius:16px; background:var(--card-color,var(--pink-50)); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 8px 16px; min-height:145px; transition:transform .2s,box-shadow .2s; }.category-card:hover { transform:translateY(-3px); box-shadow:0 7px 14px var(--palette-9d566215); }.category-card .icon { font-size: 2.125rem; line-height:1.4; margin-bottom:10px; }.category-card strong { font-size: 1rem; }.category-card small { font-size: 0.75rem; color:var(--muted); margin-top:4px; }.category-note { display:flex; flex-direction:column; justify-content:center; text-align:center; color:var(--pink-700); font-size: 0.875rem; padding:12px; }.category-note span { font-size: 1.875rem; }
.belle-panel { text-align:center; background:var(--cream); overflow:hidden; }.belle-label { font-size: 0.75rem; letter-spacing:2px; color:var(--pink-700); }.belle-art { width:100%; aspect-ratio:1; object-fit:contain; display:block; mix-blend-mode:multiply; }.belle-fallback { aspect-ratio:1; display:grid; place-content:center; gap:12px; color:var(--pink-700); background:var(--palette-fff0f5); border-radius:50%; margin:20px 0; }.belle-fallback span { font-size: 3.375rem; }.belle-panel p { font-size: 0.875rem; color:var(--muted); margin:6px 0 18px; }.text-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 20px; border:1px solid var(--palette-ecc6d3); background:white; border-radius:12px; font-size: 0.875rem; color:var(--pink-700); gap:20px; }
.phase-note { margin-top:20px; padding:14px 18px; border:1px dashed var(--palette-e7cfda); border-radius:12px; font-size: 0.8125rem; color:var(--muted); background:var(--palette-fffbfc); }.phase-note strong { color:var(--pink-700); }
.module-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; }.task-preview { list-style:none; padding:0; margin:0; display:grid; gap:12px; }.task-preview li { display:flex; align-items:center; gap:14px; background:var(--palette-fff9fb); border:1px solid var(--border); border-radius:14px; padding:15px 18px; min-height:58px; }.task-preview .task-dot { width:20px; height:20px; border:2px solid var(--palette-d7c4cd); border-radius:6px; flex-shrink:0; }.task-preview small { margin-left:auto; color:var(--muted); font-size: 0.75rem; }.task-preview .penalty { color:var(--palette-a73644); }.module-note { color:var(--muted); font-size: 0.875rem; margin:18px 0 0; }.pet-preview { max-width:400px; margin:auto; }.status-list { display:grid; gap:18px; margin-top:24px; }.status-row { display:flex; justify-content:space-between; border-bottom:1px dashed var(--border); padding-bottom:12px; }.status-row small { color:var(--muted); }
footer { padding:4px 30px 28px; text-align:center; color:var(--muted); font-size: 0.75rem; }footer span { color:var(--pink-500); }footer small { display:block; font-size: 0.75rem; margin-top:5px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }