/* GENERATED by scripts/sync-study-ui.mjs. Edit packages/study-ui, then sync. */
/* Study visual system v2. Semantic teaching colors and original character/brand assets
   remain owned by their applications. No network fonts or root service worker. */
:root {
  color-scheme: light;
  --study-page: #f7f5ef;
  --study-surface: #fffefa;
  --study-heading: #243f38;
  --study-text: #34483f;
  --study-muted: #59665d;
  --study-action: #294f43;
  --study-action-hover: #203f35;
  --study-action-pressed: #19382f;
  --study-selected: #eaf0e9;
  --study-accent: #a9553b;
  --study-line: #dadfd5;
  --study-boundary: #7a8980;
  --study-focus: #356f62;
  --study-error: #963f32;
  --study-error-surface: #faeeea;
  --study-warning: #80522b;
  --study-warning-surface: #f3e8dc;
  --study-radius-control: 12px;
  --study-radius-panel: 16px;
  --study-font: 'Lab Sans', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --study-font-system: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --study-focus-ring: 3px solid var(--study-focus);
}


/* Reading rhythm for compact screens. Board geometry and answer hit areas are
   owned by their components; these rules only tighten text and layout spacing. */
@media (max-width: 760px) {
  .tm-shell, .en-shell { --sp-2:6px; --sp-3:10px; --sp-4:12px; --sp-5:16px; --sp-6:20px; --sp-7:24px; --sp-8:28px; }
  .tm-shell .tm-main { gap:12px; }
  .tm-shell .tm-start-hero { padding-bottom:4px; }
  .tm-shell .tm-start-hero__title { margin-block:4px 6px; }
  .tm-shell .tm-start-hero :is(p,.tm-muted) { margin-block:4px 0; line-height:1.5; }
  .tm-shell :is(.tm-card,.tm-search,.tm-notice) { padding:12px; }
  .tm-shell :is(.tm-notice,.tm-step,.tm-mnemonic__text,.tm-flash__plain,.tm-q__stem,.tm-life__eg,.tm-life__use,.tm-verdict) { line-height:1.55; }
  .tm-shell .tm-search__label { margin-bottom:6px; line-height:1.5; }
  .tm-shell .tm-empty { padding-block:16px; }
  .tm-shell .tm-row[aria-label='选年级'] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tm-shell .tm-hero { padding:14px; }
  .en-shell :is(.en-card,.en-range,.en-game,.en-today) { padding:12px; }
  .en-shell .en-range__summary { padding-block:0; }
  .en-shell .en-game__icon { margin-bottom:6px; }
  .en-shell .en-game em { margin-top:6px; }
  .en-shell .en-rowgroup { margin-top:16px; padding-left:8px; }
  .en-shell .en-h2 { margin-block:16px 8px; }
  .en-shell :is(.en-note,.en-today__sub,.en-verdict) { line-height:1.5; }
  .mq-shell :is(.mq-head,.mq-loading,.mq-empty) { padding-block:4px 12px; }
  .mq-shell .mq-head__line { margin-bottom:8px; line-height:1.5; }
  .mq-shell .mq-sub { margin-top:18px; }
  .mq-shell .mq-card { padding:14px 16px; }
  .mq-shell .mq-card__line { line-height:1.5; }
  .mq-shell .mq-tally { padding:12px; margin-bottom:14px; }
  .mq-shell .mq-foot-note { margin-top:16px; }

  /* Chess home, rules, lessons, puzzles and public reading pages. */
  .app-shell .page-wrap :is(.section-heading,.page-title,.page-title-row) { gap:6px; margin-bottom:12px; padding-block:0 8px; }
  .app-shell .page-wrap :is(.section-heading,.page-title,.hero-copy,.battlefield-card,.piece-school,.lesson-detail,.public-page-header) :is(h1,h2,h3) { margin-top:0; margin-bottom:8px; line-height:1.35; }
  .app-shell .page-wrap :is(.hero-copy,.battlefield-card,.piece-school,.lesson-detail,.public-page,.privacy-document,.culture-hero,.rule-lab,.coach-panel,.clue-panel,.coach-card) p:not(.sr-only) { line-height:1.55; margin-block:6px; }
  .app-shell .page-wrap :is(.piece-school,.path-card,.timeline-section,.learning-path-section,.family-ritual,.story-grid,.quick-grid,.family-digest-card,.evidence-badges) { margin-top:18px; }
  .app-shell .page-wrap :is(.battlefield-card,.piece-school,.rule-lab,.culture-hero,.public-page-header,.privacy-document,.coach-panel,.clue-panel,.coach-card,.puzzle-clue-card,.learning-path-section,.task-detail-card) { padding:14px; gap:14px; }
  .app-shell .page-wrap .battlefield-card li { padding:7px 10px; line-height:1.5; }
  .app-shell .page-wrap .battlefield-card ul { margin-block:8px; gap:4px; }
  .app-shell .page-wrap .hero-card { padding-bottom:18px; gap:18px; }
  .app-shell .page-wrap .hero-actions { margin-top:14px; gap:8px; }
  .app-shell .page-wrap .hero-stats { margin-top:16px; }
  .app-shell .page-wrap .piece-tabs { gap:6px; }
  .app-shell .page-wrap .piece-tabs button { padding:8px 4px; min-height:76px; box-shadow:none; }
  .app-shell .page-wrap .piece-tabs button i { font-size:36px; line-height:1.1; }
  .app-shell .page-wrap .piece-tabs button span { margin-top:4px; line-height:1.4; }
  .app-shell .page-wrap .lesson-detail { padding:12px; gap:10px; margin-top:10px; grid-template-columns:64px minmax(0,1fr); }
  .app-shell .page-wrap .lesson-glyph { width:64px; height:64px; font-size:34px; }
  .app-shell .page-wrap .lesson-detail > .primary-button { grid-column:1/-1; }

  .app-shell .page-wrap :is(.adventure-copy,.lesson-card,.academy-mastery,.reasoning-checks,.family-digest-card,.evidence-badges,.exhibit-intro,.quick-card,.public-card,.public-section) { padding:14px; }
  .app-shell .page-wrap :is(.adventure-copy,.lesson-card,.rule-lab-copy,.academy-mastery-heading,.reasoning-check-heading) :is(h1,h2,h3) { margin-block:8px; line-height:1.35; }
  .app-shell .page-wrap :is(.content-page,.quick-card,.family-digest-card,.evidence-badges) p { margin-block:6px; line-height:1.55; }
  .app-shell .page-wrap :is(.content-page,.lesson-grid,.mastery-question-list) { gap:14px; }
  .app-shell .page-wrap :is(.mastery-question-list,.reasoning-check-grid) article { padding:12px; min-height:0; }
  .app-shell .page-wrap .adventure-header { min-height:0; }
  .app-shell .page-wrap .adventure-art { min-height:0; padding:0 14px 12px; }
  .app-shell .page-wrap .adventure-art img { max-height:160px; width:auto; max-width:100%; object-fit:contain; }

  /* Native task workspace. Compact prose while retaining its 44px controls. */
  .page .page-heading { margin-bottom:14px; }
  .page .eyebrow { margin-bottom:5px; }
  .page :is(p,.help,.muted,.pet-talk) { line-height:1.55; }
  .page p { margin-bottom:8px; }
  .page :is(.card,.hero,.plan-support-section,.mobile-day-agenda,.focus-workspace) { padding:14px; }
  .page .empty { padding:24px 16px; }
  .page .empty p { margin:8px auto 14px; }
  .page :is(.grid,.stack,.today-grid) { gap:14px; }
  .page .section { margin-top:18px; }
  .page .today-grid > aside { padding-top:16px; }
  .page .capacity-card { padding:14px 0; margin-block:8px; }
  .page .task-row { padding-block:12px; }
  .page h2 { margin-bottom:10px; }
  .page .metric { padding:12px; }
  .public-page .public-main :is(p,li) { line-height:1.6; }
  .public-page .public-main h2 { margin-top:20px; margin-bottom:8px; }
  .family-dialog p { line-height:1.55; margin-block:8px; }
}


html { background: var(--study-page); -webkit-text-size-adjust: 100%; }
body { background: var(--study-page); color: var(--study-text); font-family: var(--study-font); font-synthesis: none; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { color: var(--study-heading); font-weight: 700; text-wrap: balance; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible { outline: var(--study-focus-ring); outline-offset: 3px; }
::selection { color: var(--study-heading); background: var(--study-selected); }

/* Shared account state colors continue to communicate the existing contract. */
.family-account-pill {
  --fs-pill-line: var(--study-boundary);
  --fs-pill-surface: var(--study-surface);
  --fs-pill-ink: var(--study-text);
  min-height: 44px;
  box-shadow: none;
}
.family-dialog {
  --fs-paper: var(--study-surface);
  --fs-text: var(--study-text);
  --fs-muted: var(--study-muted);
  --fs-rule: var(--study-line);
  --fs-accent: var(--study-action);
  border: 1px solid var(--study-line);
  border-radius: var(--study-radius-panel);
  box-shadow: 0 16px 48px #243f3820;
}
.family-dialog h2 { font-weight: 700; font-size: 26px; }
.family-dialog p, .family-dialog label, .family-section > strong, .family-link { font-size: 14px; letter-spacing: 0; }
.family-dialog p { line-height: 1.7; }
.family-dialog input[type], .family-dialog select {
  min-height: 48px;
  border-color: var(--study-boundary);
  border-radius: var(--study-radius-control);
  background: var(--study-surface);
}
.family-primary, .family-secondary, .family-danger {
  min-height: 48px;
  border-radius: var(--study-radius-control);
  font-size: 16px;
}
.family-secondary { background: var(--study-surface); border-color: var(--study-boundary); }
.family-primary:hover { background: var(--study-action-hover); }
.family-dialog-close { width: 44px; height: 44px; background: var(--study-surface); }
.family-error { background: var(--study-error-surface); color: var(--study-error) !important; }
.family-account-pill.pending-enable { border-color:var(--study-action); color:var(--study-action); }
.family-account-pill.pending-enable i { background:var(--study-action); }
.global-feedback-corner { background: var(--study-surface); color: var(--study-action); border-color: var(--study-boundary); box-shadow: none; backdrop-filter: none; }
.site-footer { color: var(--study-muted); border-color: var(--study-line); background: var(--study-page); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Keep the feedback destination readable on small screens too. */
@media(max-width:680px) {
  .global-feedback-corner b { display:inline; font-size:12px; font-weight:700; }
  .global-feedback-corner { gap:5px; padding:0 12px; min-height:44px; }
}

/* 2026-09-07: compact footer description, feedback stays in the footer. */
.site-footer .footer-brand > div > span { display:block; white-space:nowrap; font-size:13px; }
.site-footer { padding-bottom:calc(24px + env(safe-area-inset-bottom)); }

/* Native workspace adapter. Shared visual styling; room coordinates live in room-layout.mjs. */
:root {
  --paper: var(--study-page); --card: var(--study-surface); --ink: var(--study-heading); --muted: var(--study-muted);
  --green: var(--study-action); --green-dark: var(--study-action-hover); --green-soft: var(--study-selected);
  --soft: var(--study-selected); --line: var(--study-line); --line-strong: var(--study-boundary);
  --error: var(--study-error); --peach: var(--study-warning-surface); --peach-soft: var(--study-surface); --shadow: none;
  font-family: var(--study-font-system);
}
body { font-family: var(--study-font-system); }
/* One uncropped room coordinate system for equipped decor and preview. */
.pet-scene.room-scene, .decor-preview-layout .pet-scene.room-scene {
  width:100%; max-width:560px; height:auto; aspect-ratio:4/3; margin-inline:auto;
}
.pet-scene.room-scene .scene-background { object-fit:contain; }
.pet-scene.room-scene .pet-hit { left:19%; bottom:10%; width:34%; height:52%; }
.pet-scene.room-scene .pet-speech { left:54%; right:auto; top:34%; width:40%; max-height:30%; overflow:auto; padding:10px; font-size:14px; line-height:1.5; }
.pet-scene.room-scene .scene-name { left:5%; top:4%; }
.pet-scene.room-scene .scene-hint { display:none; }
.decor-preview-layout .decor-detail img { height:200px; }
#main, .public-main { padding-top: 16px; }
body[data-onboarding='true'] #navigation { display: none; }
.first-use { max-width: 760px; margin-inline: auto; padding-block: 8px 24px; }
.first-use h1 { margin-bottom: 12px; }
.first-use > p { color: var(--study-muted); }
.first-use-art { width: 190px; height: 190px; margin: 12px auto; }
.first-use .pet-picker { margin-block: 20px; }
.first-use .pet-choice { border: 1px solid var(--study-line); }
.first-use .pet-choice.selected { border: 2px solid var(--study-action); background: var(--study-selected); }
.first-use-actions { display: flex; gap: 12px; align-items: center; }
.site-header, #navigation { background: var(--study-page); }
button { border-radius: var(--study-radius-control); font-weight: 700; }
button:hover { background: var(--study-selected); border-color: var(--study-boundary); }
.primary { background: var(--study-action); border-color: var(--study-action); box-shadow: none; }
.primary:hover { background: var(--study-action-hover); }
h1 { font-size: 32px; letter-spacing: 0; }
h2 { font-size: 22px; font-weight: 700; }
.page-heading { margin-bottom: 28px; }
.eyebrow { color: var(--study-muted); font-size: 14px; letter-spacing: 0; }
.card { border: 1px solid var(--study-line); border-radius: var(--study-radius-panel); box-shadow: none; }
.hero { border: 1px solid var(--study-line); border-left: 3px solid var(--study-action); background: var(--study-selected); padding: 28px; }
.hero h2 { font-size: 28px; font-weight: 700; }
.hero p { font-size: 17px; line-height: 1.7; }
.hero .help { font-size: 14px; }
.hero .primary { min-height: 48px; }
.today-grid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 40px; }
.today-grid > aside { border-left: 1px solid var(--study-line); padding-left: 32px; }
.task-list { gap: 0; }
.task-row { border: 0; border-bottom: 1px solid var(--study-line); border-radius: 0; background: transparent; padding: 18px 8px; box-shadow: none; }
.task-row:hover { background: var(--study-selected); }
.task-row .number { border-radius: 10px; background: var(--study-selected); color: var(--study-action); }
.task-row .task-text strong { font-size: 17px; font-weight: 700; }
.task-row .meta { font-size: 14px; color: var(--study-muted); }
.companion { border: 0; padding: 0; background: transparent; box-shadow: none; }
.today-scene, .focus-scene { background: transparent; border-radius: 0; }
.today-scene .scene-background, .focus-scene .scene-background { display: none; }
.today-scene { height: 270px; }
.today-scene .pet-hit { left: 8%; width: 70%; height: 64%; bottom: 4%; }
.today-scene .pet-speech { top: 20%; left: 8%; right: auto; width: 84%; max-height: 29%; }
.today-scene .scene-name { top: 4%; left: 8%; padding: 0; background: transparent; font-size: 15px; color: var(--study-heading); }
.today-scene .scene-hint { display: none; }
.pet-speech { background: var(--study-surface); border-color: var(--study-line); box-shadow: none; border-radius: var(--study-radius-control); font-size: 15px; color: var(--study-text); }
.companion-controls, .scene-footer { color: var(--study-muted); font-size: 14px; }
.capacity-card { padding: 18px 0; background: transparent; border: 0; border-top: 1px solid var(--study-line); border-radius: 0; }
.capacity-card h2 { font-size: 18px; }
.capacity-card p { font-size: 14px; line-height: 1.7; }
.focus-workspace { background: var(--study-surface); }
.plan-support-section, .mobile-day-agenda, .month-layout, .week-layout, .single-day-view { box-shadow: none; border-radius: var(--study-radius-panel); }
dialog { background: var(--study-surface); color: var(--study-text); border-radius: var(--study-radius-panel); border: 1px solid var(--study-line); }
dialog input:not([type='checkbox']):not([type='radio']), dialog select, dialog textarea { border-color: var(--study-boundary); background: var(--study-surface); border-radius: var(--study-radius-control); }
dialog input:not([type='checkbox']):not([type='radio']), dialog select { min-height: 48px; }
.form-error { color: var(--study-error); background: var(--study-error-surface); }
.public-page h1 { font-size: 34px; }
.public-page p, .public-page li { color: var(--study-text); line-height: 1.8; }
.privacy-summary { background: var(--study-selected); border-radius: var(--study-radius-panel); }
@media(max-width:760px) {
  .decor-preview-layout .decor-detail img { height:140px; }
  .decor-preview-layout { gap:10px; }
  #main, .public-main { padding-top: 10px; }
  .first-use .pet-picker { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .first-use .pet-thumb { height: 76px; }
  .first-use-actions .primary { flex: 1; }
  h1, .public-page h1 { font-size: 28px; }
  .page-heading { margin-bottom: 20px; }
  .today-grid { grid-template-columns: 1fr; gap: 24px; }
  .today-grid > aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--study-line); padding-top: 24px; }
  .hero { padding: 20px; }
  .hero h2 { font-size: 24px; }
  .hero p { font-size: 16px; }
  .hero .help { font-size: 14px; }
  .today-scene { height: 210px; }
  .today-scene .pet-hit { left: 2%; bottom: 6%; width: 43%; height: 73%; }
  .today-scene .pet-speech { left: auto; right: 2%; top: 28%; width: 52%; max-height: 60%; font-size: 14px; }
  .task-row { padding: 16px 4px; }
  .task-row .task-text strong { font-size: 16px; }
}
.global-feedback-corner { position:fixed; z-index:40; right:16px; bottom:16px; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 14px; border:1px solid var(--study-boundary); border-radius:999px; background:var(--study-surface); color:var(--study-action); font-size:14px; text-decoration:none; }
@media(max-width:760px) { body:has(#navigation) .global-feedback-corner { bottom:calc(82px + env(safe-area-inset-bottom)); right:12px; } }

/* Normalize transparent artwork margins without modifying the source images. */
.room-decor .decor-crop { display:block; position:absolute; inset:0; overflow:hidden; }
.room-decor .decor-crop img { position:absolute; display:block; max-width:none; object-fit:fill; }