/* A compact study companion, alongside the existing homepage mascot. */
#top .hero #studyCompanion #focusCompanion { grid-column:1 / -1; background:#f4f7ef!important; border:1px solid rgba(74,106,80,.24)!important; border-radius:24px; color:#244535!important; box-shadow:0 10px 35px rgba(15,38,28,.09); }
body:not(.theme-light) #top .hero #studyCompanion #focusCompanion { background:#182e26!important; color:#e9efdf!important; border-color:rgba(180,201,160,.25)!important; }
#top #focusCompanion * { box-sizing:border-box; font-family:system-ui,-apple-system,'Microsoft YaHei',sans-serif; }
#top #focusCompanion .focus-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#top #focusCompanion h2 { margin:0; font-size:21px; font-weight:700; color:inherit!important; }
#top #focusCompanion .focus-eyebrow { font-size:10px; letter-spacing:.16em; color:#819164!important; margin:0 0 5px; }
#top #focusCompanion #focusToday { font-size:12px; color:#6e806f!important; }
body:not(.theme-light) #top #focusCompanion #focusToday { color:#b3c3a8!important; }
#top #focusCompanion .focus-body { display:grid; grid-template-columns:minmax(170px,.9fr) minmax(0,1fr); gap:24px; align-items:center; margin-top:15px; }
#top #focusCompanion .focus-clock { display:flex; align-items:center; gap:12px; min-width:0; }
#top #focusCompanion #focusTimer { display:block; color:inherit!important; font-size:clamp(40px,4.2vw,56px); font-weight:600; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
#top #focusCompanion #focusPlan { display:block; margin-top:8px; font-size:12px; color:#70826c!important; }
body:not(.theme-light) #top #focusCompanion #focusPlan { color:#b4c4a6!important; }
#top #focusCompanion .focus-presets { display:flex; gap:6px; }
#top #focusCompanion button { cursor:pointer; border:1px solid rgba(83,117,90,.2); border-radius:10px; padding:8px 12px; background:transparent!important; color:inherit!important; font-size:12px; line-height:1.4; }
#top #focusCompanion button:disabled { cursor:default; opacity:.5; }
#top #focusCompanion button:focus-visible { outline:3px solid #c99b45; outline-offset:3px; }
#top #focusCompanion [data-focus-minutes][aria-pressed='true'] { background:rgba(99,137,101,.18)!important; border-color:#7a9967; }
#top #focusCompanion .focus-actions { display:flex; gap:8px; margin-top:10px; }
#top #focusCompanion #focusPrimary { background:#466c50!important; border-color:#466c50; color:#fff!important; font-weight:650; min-width:115px; }
#top #focusCompanion #focusStatus { margin:14px 0 9px; font-size:13px; color:inherit!important; }
#top #focusCompanion #focusProgress { height:4px; overflow:hidden; border-radius:6px; background:rgba(122,153,103,.17); }
#top #focusCompanion #focusProgress::after { content:''; display:block; width:var(--focus-progress,0%); height:100%; background:#b99b54; border-radius:6px; transition:width .5s linear; }
#top #focusCompanion #focusHint { display:block; margin-top:9px; font-size:11px; color:#84917b!important; }
#top #focusCompanion .focus-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#top #focusCompanion .focus-mascot { display:none; flex-shrink:0; width:68px; aspect-ratio:443 / 532; background:url('assets/archive-squirrel-actions-v1.png?v=20260913-clean') 100% 0 / 400% 200% no-repeat; }
body[data-squirrel-study='focus'] #top .resource-squirrel-stage .resource-squirrel-sprite,
body[data-squirrel-study='focus'] #top #focusCompanion .focus-mascot { opacity:1!important; background-image:url('assets/archive-squirrel-actions-v1.png?v=20260913-clean')!important; background-size:400% 200%!important; animation:squirrel-study-reading 12s ease-in-out infinite!important; }
body[data-squirrel-study='break'] #top .resource-squirrel-stage .resource-squirrel-sprite,
body[data-squirrel-study='break'] #top #focusCompanion .focus-mascot { opacity:1!important; background-image:url('assets/squirrel-study-break-v1.webp?v=20261009')!important; background-size:200% 100%!important; animation:squirrel-study-break 20s ease-in-out infinite!important; }
body[data-squirrel-study='paused'] #top .resource-squirrel-stage .resource-squirrel-sprite,
body[data-squirrel-study='paused'] #top #focusCompanion .focus-mascot { opacity:1!important; background-image:url('assets/archive-squirrel-actions-v1.png?v=20260913-clean')!important; background-size:400% 200%!important; background-position:100% 0!important; animation:none!important; transform:none!important; }
body:is([data-squirrel-study='focus'],[data-squirrel-study='break'],[data-squirrel-study='paused']) #top .resource-squirrel-laugh,
body:is([data-squirrel-study='focus'],[data-squirrel-study='break'],[data-squirrel-study='paused']) #top .resource-squirrel-trails { display:none!important; }
@keyframes squirrel-study-reading { 0%,48% {background-position:100% 0;transform:translateY(0);} 24% {transform:translateY(-3px);} 49%,100% {background-position:0 100%;} 74% {transform:translateY(-2px);} }
@keyframes squirrel-study-break { 0%,19% {background-position:0 0;transform:translateY(0);} 9% {transform:translateY(-4px);} 20%,100% {background-position:100% 0;} 60% {transform:translateY(-3px);} }
@media(max-width:1100px) { #top #focusCompanion .focus-mascot { display:block; } }
@media(max-width:600px) {
 #top #focusCompanion .focus-header { align-items:flex-start; flex-direction:column; gap:7px; }
 #top #focusCompanion .focus-body { grid-template-columns:1fr; gap:14px; }
 #top #focusCompanion #focusTimer { font-size:48px; }
 #top #focusCompanion .focus-clock { gap:18px; }
 #top #focusCompanion .focus-presets button { flex:1; }
 #top #focusCompanion .focus-actions button { flex:1; }
}
@media(prefers-reduced-motion:reduce) {
 body[data-squirrel-study='focus'] #top .resource-squirrel-stage .resource-squirrel-sprite,
 body[data-squirrel-study='focus'] #top #focusCompanion .focus-mascot {animation:none!important;background-position:100% 0!important;}
 body[data-squirrel-study='break'] #top .resource-squirrel-stage .resource-squirrel-sprite,
 body[data-squirrel-study='break'] #top #focusCompanion .focus-mascot {animation:none!important;background-position:100% 0!important;}
 #top #focusCompanion #focusProgress::after {transition:none;}
}
body[data-squirrel-study='paused'][data-squirrel-study-phase='break'] #top .resource-squirrel-stage .resource-squirrel-sprite,
body[data-squirrel-study='paused'][data-squirrel-study-phase='break'] #top #focusCompanion .focus-mascot {background-image:url('assets/squirrel-study-break-v1.webp?v=20261009')!important;background-size:200% 100%!important;background-position:100% 0!important;}
#top #focusCompanion * {font-family:system-ui,-apple-system,'Microsoft YaHei',sans-serif!important;}
#top #focusCompanion h2 {font-size:21px!important;line-height:1.3!important;}
#top #focusCompanion .focus-eyebrow {font-size:10px!important;line-height:1.5!important;margin:0 0 5px!important;}
#top #focusCompanion #focusToday,#top #focusCompanion #focusPlan {font-size:12px!important;line-height:1.5!important;}
#top #focusCompanion #focusTimer {font-size:clamp(40px,4.2vw,56px)!important;line-height:1!important;}
#top #focusCompanion #focusStatus {font-size:13px!important;line-height:1.5!important;}
#top #focusCompanion #focusHint {font-size:11px!important;line-height:1.5!important;}
#top #focusCompanion button {font-size:12px!important;line-height:1.4!important;}
@media(max-width:600px) {#top #focusCompanion #focusTimer {font-size:48px!important;}}
/* Each desktop column flows independently; no reserved gap under search. */
#top .hero {grid-template-rows:auto!important;align-items:start!important;}
#top .hero .hero-main-column {grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:20px;min-width:0;}
#top .hero .hero-side-column {grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:14px;min-width:0;}
#top .hero .hero-side-column #focusCompanion {min-width:0;padding:18px!important;background:#f4f7ef!important;border:1px solid rgba(74,106,80,.24)!important;border-radius:22px;color:#244535!important;box-shadow:0 10px 35px rgba(15,38,28,.09);}
body:not(.theme-light) #top .hero .hero-side-column #focusCompanion {background:#182e26!important;color:#e9efdf!important;border-color:rgba(180,201,160,.25)!important;}
#top .hero .hero-side-column .resource-squirrel-stage {min-height:400px!important;}
@media(min-width:1101px) {
 #top .hero .hero-side-column #focusCompanion {padding:14px 18px!important;}
 #top #focusCompanion .focus-eyebrow {display:none!important;}
 #top #focusCompanion h2 {font-size:17px!important;}
 #top #focusCompanion #focusToday {font-size:11px!important;}
 #top #focusCompanion .focus-body {grid-template-columns:minmax(140px,.9fr) minmax(0,1fr);gap:12px;margin-top:8px;}
 #top #focusCompanion #focusTimer {font-size:42px!important;}
 #top #focusCompanion #focusPlan {font-size:11px!important;margin-top:5px;}
 #top #focusCompanion button {padding:5px 10px;font-size:11px!important;border-radius:8px;}
 #top #focusCompanion .focus-presets {gap:5px;}
 #top #focusCompanion .focus-actions {margin-top:6px;gap:6px;}
 #top #focusCompanion #focusPrimary {min-width:105px;}
 #top #focusCompanion #focusStatus {margin:8px 0 6px;font-size:12px!important;}
 #top #focusCompanion:not([data-storage-unavailable='true']) #focusHint {display:none!important;}
}
@media(max-width:1100px) {
 #top .hero .hero-main-column,#top .hero .hero-side-column {display:contents!important;}
 #top .hero .hero-copy {grid-column:1;grid-row:1;}
 #top .hero #focusCompanion {grid-column:1;grid-row:2;}
 #top .hero #studyCompanion {grid-column:1;grid-row:3!important;}
 #top .hero .hero-live-panel {grid-column:1;grid-row:4!important;}
 #top .hero .resource-squirrel-stage {grid-column:1;grid-row:5!important;min-height:0!important;}
}
/* Frosted glass matches the woodland cards without losing timer contrast. */
#top .hero .hero-side-column #focusCompanion {
 background:rgba(242,248,238,.66)!important;
 border-color:rgba(255,255,255,.52)!important;
 -webkit-backdrop-filter:blur(20px) saturate(115%)!important;
 backdrop-filter:blur(20px) saturate(115%)!important;
 box-shadow:0 14px 34px rgba(10,28,22,.13),inset 0 1px 0 rgba(255,255,255,.32)!important;
}
body:not(.theme-light) #top .hero .hero-side-column #focusCompanion {
 background:rgba(18,37,29,.57)!important;
 border-color:rgba(217,233,204,.24)!important;
 color:#f0f5e8!important;
 box-shadow:0 14px 34px rgba(7,21,16,.2),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 #top .hero .hero-side-column #focusCompanion {background:rgba(242,248,238,.9)!important;}
 body:not(.theme-light) #top .hero .hero-side-column #focusCompanion {background:rgba(18,37,29,.9)!important;}
}
#top #focusCompanion .focus-status-row {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
#top #focusCompanion #focusPresence {display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin:8px 0 6px;font-size:11px!important;line-height:1.5!important;color:#4e7057!important;}
body:not(.theme-light) #top #focusCompanion #focusPresence {color:#c4d7b7!important;}
#top #focusCompanion #focusPresence::before {content:'';width:5px;height:5px;border-radius:50%;background:#83a767;}
#top .hero-copy {position:relative!important;}
#top .hero-copy .hero-motto-companion {position:absolute;top:28px;right:32px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 64px);color:#bca46f;}
#top .hero-copy .hero-motto-portrait {display:block;flex-shrink:0;width:104px;height:156px;object-fit:contain;mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%);}
#top .hero-copy .hero-motto-copy {min-width:0;}
#top .hero-copy .hero-motto-author {display:block;margin-top:8px;color:inherit!important;font-family:'STKaiti','KaiTi','楷体','Noto Serif SC',serif!important;font-size:14px!important;font-weight:400!important;line-height:1.5!important;letter-spacing:.06em;text-align:right;}
#top .hero-copy #heroMotto {position:static!important;display:grid!important;gap:5px;margin:0!important;padding:0!important;color:inherit!important;font-family:'STKaiti','KaiTi','楷体','Noto Serif SC',serif!important;font-size:clamp(19px,1.5vw,24px)!important;font-weight:400!important;line-height:1.6!important;letter-spacing:.08em!important;text-align:left;opacity:1!important;}
#top .hero-copy #heroMotto span {color:inherit!important;font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
body.theme-light #top .hero-copy .hero-motto-companion {color:#806a40;}
@media(max-width:1350px) {#top .hero-copy .hero-motto-companion {position:static;align-self:flex-end;max-width:100%;margin:12px 0 0;}#top .hero-copy .hero-motto-portrait {width:88px;height:132px;}}
@media(max-width:600px) {#top .hero-copy .hero-motto-companion {align-self:stretch;justify-content:flex-start;gap:14px;margin:12px 0 0;}#top .hero-copy .hero-motto-portrait {width:72px;height:108px;}#top .hero-copy #heroMotto {font-size:19px!important;}}
/* Subject selection and study receipts stay inside the companion's glass card. */
#top #focusCompanion .focus-header {flex-wrap:wrap;gap:6px 12px;}
#top #focusCompanion .focus-subject-row {display:flex;align-items:center;gap:12px;margin-top:12px;}
#top #focusCompanion .focus-subject-row label {font-size:12px!important;flex-shrink:0;color:inherit!important;}
#top #focusCompanion #focusSubject {flex:1;min-width:0;width:100%;padding:8px 30px 8px 10px;border:1px solid rgba(83,117,90,.28);border-radius:9px;background:rgba(255,255,255,.5)!important;color:#244535!important;font-size:13px!important;line-height:1.4!important;}
#top #focusCompanion #focusSubject:focus-visible {outline:3px solid #c99b45;outline-offset:2px;}
#top #focusCompanion #focusSubject:disabled {opacity:.75;}
#top #focusCompanion #focusSubjectHint {display:block;margin:5px 0 0;color:#52684f!important;font-size:11px!important;line-height:1.6!important;}
body:not(.theme-light) #top #focusCompanion #focusSubject {background:#243e30!important;color:#f0f5e8!important;border-color:#6a8062;}
body:not(.theme-light) #top #focusCompanion #focusSubjectHint {color:#c4d7b7!important;}
#top #focusCompanion .focus-today-details {display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
#top #focusCompanion .focus-today-details:empty {display:none;}
#top #focusCompanion .focus-today-details span {font-size:11px!important;line-height:1.5!important;padding:3px 7px;border-radius:6px;background:rgba(99,137,101,.12);color:inherit!important;}
#top #focusCompanion .focus-export-row {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid rgba(99,137,101,.2);}
#top #focusCompanion .focus-export-row>span {font-size:10px!important;color:#52684f!important;}
body:not(.theme-light) #top #focusCompanion .focus-export-row>span {color:#c4d7b7!important;}
#top #focusCompanion #focusExport {font-weight:650;border-color:rgba(83,117,90,.4);}
.squirrel-study-card-dialog {width:min(480px,calc(100vw - 28px));max-height:calc(100dvh - 32px);padding:18px;border:1px solid #d4ddc9;border-radius:20px;background:#f5f7ef;color:#244535;overflow:auto;box-sizing:border-box;box-shadow:0 20px 80px #10241966;}
.squirrel-study-card-dialog::backdrop {background:#10241999;backdrop-filter:blur(5px);}
.squirrel-study-card-dialog * {box-sizing:border-box;font-family:system-ui,-apple-system,'Microsoft YaHei',sans-serif!important;}
.squirrel-study-card-dialog .study-card-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.squirrel-study-card-dialog h2 {margin:0;font-size:19px!important;color:inherit!important;line-height:1.5!important;}
.squirrel-study-card-dialog button {cursor:pointer;border:1px solid #c5d1bc;background:#e8eee0;color:#244535;border-radius:9px;padding:8px 12px;font-size:13px!important;line-height:1.5!important;}
.squirrel-study-card-dialog button:focus-visible {outline:3px solid #c99b45;outline-offset:2px;}
.squirrel-study-card-dialog img {display:block;width:100%;height:auto;border-radius:12px;}
.squirrel-study-card-dialog p {font-size:12px!important;line-height:1.6!important;margin:12px 0;color:inherit!important;}
.squirrel-study-card-dialog .study-card-save {width:100%;background:#466c50;color:white;border-color:#466c50;font-weight:650;}
body:not(.theme-light) .squirrel-study-card-dialog {background:#182e26;color:#e9efdf;border-color:#6a8062;}
/* Tablet search introduction stays in one shared row instead of reserving a
   separate portrait row. Explicit grid placement also survives larger fonts. */
@media(min-width:601px) and (max-width:1350px) {
 #top .hero .hero-copy {display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;}
 #top .hero .hero-copy > .eyebrow {grid-column:1;grid-row:1;}
 #top .hero .hero-copy > h1 {grid-column:1;grid-row:2;min-width:0;font-size:32px!important;}
 #top .hero .hero-copy > p:not(.eyebrow):not(.hero-blessing) {grid-column:1;grid-row:3;min-width:0;}
 #top .hero .hero-copy .hero-motto-companion {grid-column:2;grid-row:1 / 4;align-self:center;position:static;margin:0;gap:8px;max-width:100%;}
 #top .hero .hero-copy .hero-motto-portrait {width:72px;height:108px;}
 #top .hero .hero-copy #heroMotto {font-size:17px!important;letter-spacing:.04em!important;}
 #top .hero .hero-copy .hero-search {grid-column:1 / -1;grid-row:4;min-width:0;}
 #top .hero .hero-copy .hero-actions {grid-column:1 / -1;grid-row:5;flex-wrap:wrap;}
}
@media(max-width:600px) {
 #top .hero .hero-copy .hero-motto-companion {margin-top:8px;gap:10px;}
 #top .hero .hero-copy .hero-motto-portrait {width:56px;height:84px;}
 #top .hero .hero-copy #heroMotto {font-size:17px!important;}
}
/* The timer reacts to its card width, including tablet split-screen windows. */
#top #focusCompanion {container-type:inline-size;container-name:focus-card;}
@container focus-card (max-width:350px) {
 #top #focusCompanion .focus-body {grid-template-columns:1fr;gap:12px;}
 #top #focusCompanion .focus-presets button,#top #focusCompanion .focus-actions button {flex:1;}
}
@container focus-card (min-width:351px) {
 #top #focusCompanion .focus-body {grid-template-columns:minmax(130px,.8fr) minmax(0,1fr);gap:12px;}
 #top #focusCompanion .focus-presets button {flex:1;padding-inline:6px;}
}
/* Service descriptions can wrap within each column instead of leaking out. */
html body #top .hero .hero-live-panel .hero-live-services {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;}
html body #top .hero .hero-live-panel .hero-live-services > span {min-width:0!important;}
html body #top .hero .hero-live-panel .hero-live-services > span > :is(b,small) {min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;}
html body #top .hero .hero-live-panel {container-type:inline-size;container-name:notice-card;}
@container notice-card (max-width:480px) {
 html body #top .hero .hero-live-panel .hero-live-services > span {display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:6px!important;padding:0 6px!important;}
 html body #top .hero .hero-live-panel .hero-live-services > span:first-child {padding-left:0!important;}
 html body #top .hero .hero-live-panel .hero-live-services > span > i {grid-column:1!important;grid-row:1 / 3!important;width:28px!important;height:28px!important;}
 html body #top .hero .hero-live-panel .hero-live-services > span > i::after {width:14px!important;height:14px!important;margin:7px!important;}
 html body #top .hero .hero-live-panel .hero-live-services > span > b {grid-column:2!important;grid-row:1!important;font-size:12px!important;line-height:1.5!important;}
 html body #top .hero .hero-live-panel .hero-live-services > span > small {grid-column:2!important;grid-row:2!important;font-size:10px!important;line-height:1.5!important;}
}
@container notice-card (max-width:300px) {
 html body #top .hero .hero-live-panel .hero-live-services > span {grid-template-columns:minmax(0,1fr)!important;grid-template-rows:28px auto auto!important;row-gap:4px!important;}
 html body #top .hero .hero-live-panel .hero-live-services > span > i {grid-column:1!important;grid-row:1!important;}
 html body #top .hero .hero-live-panel .hero-live-services > span > b {grid-column:1!important;grid-row:2!important;}
 html body #top .hero .hero-live-panel .hero-live-services > span > small {grid-column:1!important;grid-row:3!important;}
}