/* Star-moon storybook: additive 2D skin, not a repaint of forest/cloud.
   An open illustrated stage: flower canopy, breakout bunny, cloud terrace.
   Paper, controls and live text are separate from pointer-transparent artwork.
   UI symbols below are small native vector shapes; character/scene art is bitmap. */
:root[data-skin="storybook"] {
  color-scheme: light;
  --ink: #302353; --muted: #665477; --line: #d8cbb8;
  --surface: #fff5e2; --canvas: #d8d4ed;
  --brand: #7965a5; --brand-dark: #594078; --brand-soft: #e9dfef;
  --green: #548c87; --danger: #a63256;
  --card-bg: var(--surface); --card-border: #68567e;
  --input-bg: #fffaee; --input-border: #cdbca6;
  --mini-bg: #f6ecd9; --subject-row-bg: #fff9ed; --subject-row-border: #d8cbb8;
  --history-border: #d8cbb8; --timer-color: #302353;
  --goal-fill: #9586ca; --subject-fill: #9586ca;
  --study-subject-0-color: #9586ca; --study-subject-1-color: #6c98bf;
  --study-subject-2-color: #dd96b5; --study-subject-3-color: #bbac7c;
  --shadow: 0 3px 0 rgb(63 45 91 / 12%);
  --story-outline: #68567e; --story-scene-filter: none;
  --story-paper-ink: #302353;
  --story-reward: #d4e7e9; --story-reward-ink: #25577c;
  --story-heading-ink: #302353; --story-heading-halo: #fff5e2;
  --story-title: "Cloud Garden Hand", "YouYuan", "Microsoft YaHei", sans-serif;
  --story-digits: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
}
:root[data-skin="storybook"][data-theme="dark"] {
  color-scheme: dark;
  --ink: #f6ecd9; --muted: #c8bfd8; --line: #655775;
  --surface: #302a46; --canvas: #242439; --brand: #b4a2d8; --brand-dark: #cbb8ed;
  --brand-soft: #473b5d; --input-bg: #29243c; --input-border: #817092;
  --mini-bg: #3b324d; --subject-row-bg: #3b324d; --subject-row-border: #655775;
  --history-border: #655775; --story-outline: #b8a9cd; --story-scene-filter: brightness(.58) saturate(.82);
  --story-reward: #253e51; --story-reward-ink: #d4e9f5; --danger: #ffafc6;
  --story-heading-ink: #fff5e2; --story-heading-halo: #302353;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="storybook"]:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #f6ecd9; --muted: #c8bfd8; --line: #655775;
    --surface: #302a46; --canvas: #242439; --brand: #b4a2d8; --brand-dark: #cbb8ed;
    --brand-soft: #473b5d; --input-bg: #29243c; --input-border: #817092;
    --mini-bg: #3b324d; --subject-row-bg: #3b324d; --subject-row-border: #655775;
    --history-border: #655775; --story-outline: #b8a9cd; --story-scene-filter: brightness(.58) saturate(.82);
    --story-reward: #253e51; --story-reward-ink: #d4e9f5; --danger: #ffafc6;
    --story-heading-ink: #fff5e2; --story-heading-halo: #302353;
  }
}
:root[data-skin="storybook"] body { color: var(--ink); background: var(--canvas); }
:root[data-skin="storybook"] .skin-scene > * { display: none; }
:root[data-skin="storybook"] .skin-scene::before {
  content: ""; position: absolute; inset: 0;
  background: url("./assets/storybook/moon-village.webp") center top / cover no-repeat;
  filter: var(--story-scene-filter);
}
:root[data-skin="storybook"] .skin-scene::after { display: none; }
:root[data-skin="storybook"] .app-shell {
  position: relative; z-index: 1; width: min(440px, calc(100% - 32px));
  min-height: 100vh; margin-inline: auto;
  padding-top: max(16px, calc(env(safe-area-inset-top) + 8px));
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
  background: none; border: 0; box-shadow: none;
}
:root[data-skin="storybook"] .topbar { gap: 10px; margin-bottom: 10px; padding: 0; }
:root[data-skin="storybook"] .brand { gap: 8px; color: #fff6df; text-shadow: 0 2px 1px #514573, 1px 0 #514573, -1px 0 #514573; }
:root[data-skin="storybook"] .brand strong { font-family: var(--story-title); font-size: 20px; font-weight: 700; }
:root[data-skin="storybook"] .brand small,
:root[data-skin="storybook"] .storage-badge,
:root[data-skin="storybook"] .welcome-mascot { display: none; }
:root[data-skin="storybook"] .brand-mark {
  width: 38px; height: 40px; font-size: 0; background: none; box-shadow: none; border-radius: 0;
}
:root[data-skin="storybook"] .brand-mark::before {
  content: ""; width: 38px; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Cg stroke='%23514573' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 20 20 5l14 15v20H6Z' fill='%23ffe0a0'/%3E%3Cpath d='m3 21 17-18 17 18' fill='none'/%3E%3Cpath d='M16 40V28h8v12' fill='%23a4bace'/%3E%3Ccircle cx='20' cy='18' r='4' fill='%23fff6df'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-skin="storybook"] .topbar-actions { gap: 8px; }
:root[data-skin="storybook"] .icon-button {
  width: 44px; min-width: 44px; height: 44px; padding: 0;
  color: var(--ink); background: var(--surface); border: 2px solid var(--story-outline);
  border-radius: 15px; box-shadow: var(--shadow); transform: none;
}
:root[data-skin="storybook"] .icon-button:hover { background: var(--mini-bg); transform: none; }
:root[data-skin="storybook"] .settings-btn { font-size: 0; }
:root[data-skin="storybook"] .settings-btn::before {
  content: ""; width: 25px; height: 25px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 3 1-2h4l1 2 3 2 2 1 2 4-1 2-1 3v2l-3 3-2-1-3 1-2 1-4-2-1-2-2-3-2-1v-4l2-1 2-3Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-skin="storybook"] .welcome-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
:root[data-skin="storybook"] .welcome-left { padding: 0; background: none; box-shadow: none; border: 0; }
:root[data-skin="storybook"] #todayLabel { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
:root[data-skin="storybook"] .cloud-date {
  display: table; max-width: 100%; padding: 6px 12px; margin: 0 0 10px;
  color: var(--ink); background: var(--surface); border: 2px solid var(--story-outline); border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.5;
}
:root[data-skin="storybook"] .cloud-date::before { content: "▣"; margin-right: 8px; }
:root[data-skin="storybook"] .welcome-left h1 {
  max-width: none; margin: 0 0 4px; font-family: var(--story-title); font-size: 30px;
  font-weight: 700; line-height: 1.18; letter-spacing: .035em; color: var(--story-heading-ink);
  text-shadow: 0 0 3px var(--story-heading-halo), 0 0 9px var(--story-heading-halo), 0 0 18px var(--story-heading-halo);
}
:root[data-skin="storybook"] .welcome-left h1 > span { display: block; }
:root[data-skin="storybook"] .welcome-left .lead {
  margin: 0; max-width: 30em; font-size: 12px; line-height: 1.6; color: var(--ink);
  text-shadow: 0 0 6px var(--surface), 0 0 12px var(--surface);
}
:root[data-skin="storybook"] .welcome-right { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-items: stretch; }
:root[data-skin="storybook"] .streak-badge,
:root[data-skin="storybook"] .today-total {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 0; width: auto; min-height: 70px; margin: 0; padding: 8px 10px;
  border: 2px solid var(--story-outline); border-radius: 26px 21px 28px 20px;
  background: var(--surface); box-shadow: var(--shadow); text-align: center;
}
:root[data-skin="storybook"] .today-total { display: grid; gap: 0; border-radius: 21px 28px 20px 26px; transform: translateY(4px); }
:root[data-skin="storybook"] #storyTodayMinutes { display: block; }
:root[data-skin="storybook"] .today-total #todayTotal {
  position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden;
}
:root[data-skin="storybook"] .streak-badge strong,
:root[data-skin="storybook"] .today-total strong { display: block; font-family: var(--story-digits); color: var(--ink); font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
:root[data-skin="storybook"] .streak-badge span:not(.streak-fire),
:root[data-skin="storybook"] .today-total > span { font-size: 12px; line-height: 1.6; color: var(--ink); }
:root[data-skin="storybook"] .today-total small { display: none; }
:root[data-skin="storybook"] .streak-fire { display: block; width: 28px; height: 34px; flex: 0 0 28px; font-size: 0; }
:root[data-skin="storybook"] .streak-fire::before {
  content: ""; display: block; width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cg fill='%23a3b792' stroke='%23514573' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 36V20M16 22C5 24 2 16 3 9c10 0 14 5 13 13Z'/%3E%3Cpath d='M16 19C16 6 22 4 29 4c1 11-5 16-13 15Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-skin="storybook"] .main-grid { grid-template-columns: 1fr; }
:root[data-skin="storybook"][data-cloud-view] .main-grid { display: none; }
:root[data-skin="storybook"] .cloud-view-panel { display: grid; gap: 26px; }
:root[data-skin="storybook"] #cloudRewardsPanel { gap: 24px; padding-top: 8px; }
:root[data-skin="storybook"] #cloudRewardsPanel > * { margin-top: 0; }
:root[data-skin="storybook"] .scallop-wrap { min-width: 0; }
:root[data-skin="storybook"] .card {
  position: relative; min-width: 0; border: 2px solid var(--story-outline); border-radius: 26px;
  background: var(--surface); box-shadow: var(--shadow);
}
:root[data-skin="storybook"] .timer-card {
  padding: 12px 18px 0; isolation: isolate; overflow: visible;
  border: 0; background: transparent; box-shadow: none;
}
:root[data-skin="storybook"] .timer-card::before {
  content: ""; position: absolute; z-index: -1; inset: 52px 10px 54px;
  border: 2px solid var(--story-outline); border-top: 0;
  border-radius: 0 0 42px 36px; background: var(--surface); pointer-events: none;
}
:root[data-skin="storybook"] .timer-card::after {
  content: ""; display: block; position: absolute; z-index: 0;
  left: -2px; top: -18px; width: calc(100% + 4px); aspect-ratio: 1086 / 258;
  background: url("./assets/storybook/focus-crown-v2.webp") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
:root[data-skin="storybook"] .card-heading { gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
:root[data-skin="storybook"] .card-heading h2 { font-family: var(--story-title); font-size: 21px; line-height: 1.4; font-weight: 700; color: var(--ink); }
:root[data-skin="storybook"] .timer-card .card-heading {
  position: relative; z-index: 1; justify-content: center;
  margin: 0 0 14px; padding: 0; border: 0; text-align: center;
}
:root[data-skin="storybook"] .timer-card .card-heading h2 { padding-inline: 8px; border-radius: 999px; background: #fff5e2; color: var(--story-paper-ink); }
:root[data-skin="storybook"] .timer-card .eyebrow,
:root[data-skin="storybook"] #timerTitle,
:root[data-skin="storybook"] .cloud-home-copy p { display: none; }
:root[data-skin="storybook"] .cloud-home-copy { display: block; }
:root[data-skin="storybook"] .timer-mode-row { position: relative; z-index: 1; display: block; margin: 0 0 8px; }
:root[data-skin="storybook"] .mode-toggle { display: flex; width: 100%; padding: 3px; border: 1px solid #b4a2a4; border-radius: 17px; background: var(--mini-bg); }
:root[data-skin="storybook"] .mode-btn { flex: 1; min-width: 0; min-height: 44px; padding: 10px 5px; color: var(--ink); font-size: 14px; border-radius: 13px; }
:root[data-skin="storybook"] .mode-btn.active { color: #fff6e9; }
:root[data-skin="storybook"] .mode-btn::before {
  content: ""; display: inline-block; width: 14px; height: 18px; margin-right: 7px; vertical-align: middle; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M3 2h10M3 18h10M4 2v4l4 4 4-4V2M4 18v-4l4-4 4 4v4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-skin="storybook"] .mode-slider { background: #7c659e; border-radius: 13px; box-shadow: none; }
:root[data-skin="storybook"] .subject-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
:root[data-skin="storybook"] .subject-row label { color: var(--ink); font-size: 13px; font-weight: 700; }
:root[data-skin="storybook"] .subject-row select { flex: 1; width: auto; min-width: 0; border-radius: 13px; padding-right: 32px; }
:root[data-skin="storybook"] input,
:root[data-skin="storybook"] select { min-height: 44px; font-size: 16px; background: var(--input-bg); color: var(--ink); border-color: var(--input-border); }
:root[data-skin="storybook"] .custom-subject { flex-basis: 100%; width: 100%; margin: 0; }
:root[data-skin="storybook"] .countdown-row { flex-direction: row; align-items: center; gap: 8px; margin: 0 0 10px; }
:root[data-skin="storybook"] .countdown-row input { width: 85px; }
:root[data-skin="storybook"] .preset-chips { flex-basis: 100%; gap: 7px; }
:root[data-skin="storybook"] .preset-chip { min-height: 44px; padding-inline: 10px; border-radius: 11px; color: var(--ink); background: var(--mini-bg); border-color: var(--line); }
:root[data-skin="storybook"] .preset-chip.active { background: var(--brand-soft); border-color: var(--brand); }
:root[data-skin="storybook"] .timer-stage {
  position: relative; z-index: 2; display: block; aspect-ratio: 1.85; min-height: 0;
  width: calc(100% + 64px); margin: -4px -32px -8px; padding: 0; isolation: isolate;
}
:root[data-skin="storybook"] .timer-dial-decor {
  display: block; position: absolute; z-index: 0; opacity: 1; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: 0; box-shadow: none;
  background: url("./assets/storybook/reading-stage.webp") center / contain no-repeat;
}
:root[data-skin="storybook"] .timer-dial-decor::before,
:root[data-skin="storybook"] .timer-dial-decor::after,
:root[data-skin="storybook"] .timer-stage::before,
:root[data-skin="storybook"] .timer-stage::after { display: none; }
:root[data-skin="storybook"] .timer-display {
  position: absolute; z-index: 1; left: 65%; top: 52%; transform: translate(-50%,-50%);
  display: flex; align-items: baseline; justify-content: center; margin: 0; color: #302353;
  font-family: var(--story-digits); font-size: clamp(26px,8.6vw,37px); font-weight: 800;
  line-height: 1.15; letter-spacing: -.035em; text-shadow: none; font-variant-numeric: tabular-nums;
  background: #fff7e9; border-radius: 18px; padding: 3px 5px;
}
:root[data-skin="storybook"] .clock-digit,
:root[data-skin="storybook"] .clock-colon { margin: 0; color: #302353; text-shadow: none; transform: none; animation: none; }
:root[data-skin="storybook"] .clock-digit { width: .6em; }
:root[data-skin="storybook"] .clock-colon { width: .26em; }
:root[data-skin="storybook"][data-cloud-view] #timerStatus {
  position: absolute; z-index: 1; left: 65%; top: 67%; transform: translateX(-50%);
  padding: 2px 12px; background: #fff6e6; border: 1px solid #cfbca2; border-radius: 999px;
  color: #302353; font-size: 12px; line-height: 1.5; font-weight: 700;
}
:root[data-skin="storybook"] .timer-hint { position: relative; z-index: 3; width: fit-content; max-width: 100%; margin: 0 auto; padding: 3px 8px; border-radius: 999px; background: #fff5e2; color: var(--story-paper-ink); font-size: 12px; line-height: 1.6; text-align: center; }
:root[data-skin="storybook"] .timer-actions {
  position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 0 20px; isolation: isolate;
}
:root[data-skin="storybook"] .timer-actions::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -32px; right: -32px; bottom: -4px; height: 136px;
  background: url("./assets/storybook/cloud-terrace-v2.webp") center bottom / 100% auto no-repeat;
}
:root[data-skin="storybook"] .timer-actions .button { flex: 1 1 120px; min-width: 0; }
:root[data-skin="storybook"] .button {
  min-height: 44px; border-radius: 16px; padding: 11px 14px; border: 1px solid var(--line);
  font-weight: 700; box-shadow: none; transform: none;
}
:root[data-skin="storybook"] .button-primary { color: #fff6e9; background: #6b558d; border-color: #594578; }
:root[data-skin="storybook"] #startButton { min-height: 48px; padding: 9px 14px; line-height: 1.2; border-radius: 999px; border: 2px solid #fff6e9; outline: 2px solid #8e78a6; font-family: var(--story-title); font-size: 20px; box-shadow: 0 3px 0 #ddcbae; }
:root[data-skin="storybook"] .button-secondary,
:root[data-skin="storybook"] .button-ghost,
:root[data-skin="storybook"] .button-alert { color: var(--ink); background: var(--input-bg); border-color: var(--line); }
:root[data-skin="storybook"] .button:hover { transform: none; filter: brightness(1.04); }
:root[data-skin="storybook"] .button:disabled { opacity: 1; color: var(--muted); background: var(--mini-bg); filter: none; box-shadow: none; }
:root[data-skin="storybook"] .text-button { color: var(--muted); }
:root[data-skin="storybook"] .goal-card,
:root[data-skin="storybook"] .chart-card,
:root[data-skin="storybook"] .leisure-card,
:root[data-skin="storybook"] .achievement-card,
:root[data-skin="storybook"] .history-card { padding: 16px; }
:root[data-skin="storybook"] .goal-card {
  margin-inline: 4px; border-radius: 36px 30px 34px 26px;
  padding-inline: 18px; box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--line), var(--shadow);
}
:root[data-skin="storybook"] .goal-card::after {
  content: ""; position: absolute; z-index: 2; top: 54px; right: -16px;
  width: 60px; height: 126px; pointer-events: none;
  background: url("./assets/storybook/flower-lantern-v2.webp") right top / contain no-repeat;
}
:root[data-skin="storybook"] .goal-card .card-heading,
:root[data-skin="storybook"] .leisure-card .card-heading { margin-bottom: 6px; padding-bottom: 0; border: 0; }
:root[data-skin="storybook"] .goal-card .goal-subtitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:root[data-skin="storybook"] .eyebrow { margin-bottom: 3px; color: var(--muted); font-size: 11px; letter-spacing: .05em; }
:root[data-skin="storybook"] .status-chip,
:root[data-skin="storybook"] .record-count,
:root[data-skin="storybook"] .leisure-status { color: var(--ink); background: var(--mini-bg); border-color: var(--line); font-size: 11px; }
:root[data-skin="storybook"] .cloud-goal-summary { display: flex; align-items: baseline; gap: 7px; margin: 0 0 8px; color: var(--ink); font-size: 18px; font-weight: 700; }
:root[data-skin="storybook"] .cloud-goal-summary > strong { font-family: var(--story-digits); font-size: 32px; line-height: 1.2; }
:root[data-skin="storybook"] .goal-subtitle,
:root[data-skin="storybook"] .goal-meta { color: var(--muted); font-size: 12px; line-height: 1.6; }
:root[data-skin="storybook"] .storybook-heading { display: inline; }
:root[data-skin="storybook"] .standard-goal-heading,
:root[data-skin="storybook"] .standard-leisure-heading,
:root[data-skin="storybook"] .standard-achievement-heading,
:root[data-skin="storybook"] .goal-card .eyebrow,
:root[data-skin="storybook"] .leisure-card .eyebrow,
:root[data-skin="storybook"] .achievement-card .eyebrow,
:root[data-skin="storybook"] .mini-stats { display: none; }
:root[data-skin="storybook"] .storybook-heading::before { content: "✦"; display: inline-block; margin-right: 7px; color: #a87869; }
:root[data-skin="storybook"] .progress-track { height: 14px; background: var(--line); border: 0; border-radius: 999px; }
:root[data-skin="storybook"] .progress-bar { background: #9586ca; }
:root[data-skin="storybook"] .goal-meta { margin-top: 7px; }
:root[data-skin="storybook"] .subject-goal-list { gap: 7px; margin-top: 12px; }
:root[data-skin="storybook"] .subject-goal-row { position: relative; min-height: 52px; padding: 6px 10px 6px 50px; border: 1px solid var(--line); border-radius: 17px; background: var(--subject-row-bg); }
:root[data-skin="storybook"] .subject-goal-header { gap: 6px; color: var(--ink); font-size: 12px; }
:root[data-skin="storybook"] .subject-goal-header strong { font-size: 14px; color: var(--ink); }
:root[data-skin="storybook"] .subject-icon { position: absolute; top: 13px; left: 12px; width: 27px; height: 30px; font-size: 24px; margin: 0; font-variant-emoji: text; }
:root[data-skin="storybook"] .subject-goal-header > span { white-space: nowrap; }
:root[data-skin="storybook"] .subject-goal-track { height: 9px; margin-top: 7px; background: var(--line); }
:root[data-skin="storybook"] .goal-editor { margin-top: 14px; padding: 12px; background: var(--mini-bg); }
:root[data-skin="storybook"] .mini-stats { margin-top: 12px; gap: 8px; }
:root[data-skin="storybook"] .mini-stats > div { padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: var(--mini-bg); color: var(--ink); }
:root[data-skin="storybook"] .mini-stats strong { color: var(--ink); font-family: var(--story-digits); }
:root[data-skin="storybook"] .mini-stats span { color: var(--muted); }
:root[data-skin="storybook"] .leisure-card {
  overflow: visible; isolation: isolate; margin-inline: 4px;
  background: var(--story-reward); color: var(--story-reward-ink); border-color: #6792a5;
  border-radius: 36px 26px 32px 22px;
}
:root[data-skin="storybook"] .leisure-glow { display: none; }
:root[data-skin="storybook"] .leisure-card h2,
:root[data-skin="storybook"] .leisure-card .eyebrow { color: var(--story-reward-ink); }
:root[data-skin="storybook"] .leisure-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 0; }
:root[data-skin="storybook"] .leisure-orb {
  position: relative; width: 100%; min-height: 102px; margin: 0; padding: 6px 110px 10px 0;
  border: 0; border-radius: 0; color: var(--story-reward-ink); background: none; box-shadow: none;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
:root[data-skin="storybook"] .leisure-orb::after {
  content: ""; position: absolute; z-index: 0; right: -28px; bottom: -58px;
  width: calc(100% + 48px); height: 188px;
  background: url("./assets/storybook/rest-garden-v2.webp") right bottom / contain no-repeat;
  pointer-events: none;
}
:root[data-skin="storybook"] .orb-label,
:root[data-skin="storybook"] #leisureDisplay { position: relative; z-index: 1; }
:root[data-skin="storybook"] .orb-icon,
:root[data-skin="storybook"] .orb-foot { display: none; }
:root[data-skin="storybook"] .orb-label { color: var(--story-reward-ink); font-size: 12px; }
:root[data-skin="storybook"] #leisureDisplay { font-family: var(--story-digits); font-size: 29px; line-height: 1.5; letter-spacing: -.025em; color: var(--story-reward-ink); text-shadow: none; }
:root[data-skin="storybook"] .reward-rule { position: relative; z-index: 1; width: fit-content; max-width: 100%; justify-content: flex-start; gap: 6px; margin: -14px 0 24px; padding: 3px 5px; border-radius: 10px; background: var(--story-reward); font-size: 11px; line-height: 1.4; color: var(--story-reward-ink); }
:root[data-skin="storybook"] .reward-rule strong,
:root[data-skin="storybook"] .reward-rule b { color: var(--story-reward-ink); }
:root[data-skin="storybook"] .leisure-stats { gap: 7px; }
:root[data-skin="storybook"] .leisure-stats > div { min-width: 0; padding: 8px; border: 1px solid #99bcc5; border-radius: 12px; background: rgb(255 255 255 / 16%); }
:root[data-skin="storybook"] .leisure-stats span,
:root[data-skin="storybook"] .leisure-stats strong { color: var(--story-reward-ink); font-size: 11px; }
:root[data-skin="storybook"] .leisure-meter { background: #adcbd3; height: 8px; }
:root[data-skin="storybook"] .leisure-hint { color: var(--story-reward-ink); font-size: 12px; line-height: 1.6; }
:root[data-skin="storybook"] .leisure-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-skin="storybook"] .leisure-actions .button { flex: 1 1 120px; min-width: 0; }
:root[data-skin="storybook"] .button-reward { background: #39739e; border: 2px solid #fff5e2; color: #fff9ed; }
:root[data-skin="storybook"] .button-reward-soft { background: var(--story-reward); border-color: #6792a5; color: var(--story-reward-ink); }
:root[data-skin="storybook"] .leisure-alert-row { padding: 12px; border: 1px dashed #99bcc5; border-radius: 14px; }
:root[data-skin="storybook"] .leisure-alert-row strong,
:root[data-skin="storybook"] .leisure-alert-row p,
:root[data-skin="storybook"] .leisure-limit-note { color: var(--story-reward-ink); }
:root[data-skin="storybook"] .story-reward-details { position: relative; z-index: 2; margin-top: 8px; border-top: 1px solid #99bcc5; color: var(--story-reward-ink); font-size: 12px; }
:root[data-skin="storybook"] .story-reward-details summary { min-height: 44px; padding: 12px 4px; cursor: pointer; font-weight: 700; }
:root[data-skin="storybook"] .story-reward-details[open] > :not(summary) { margin-top: 12px; }
:root[data-skin="storybook"] .achievement-card { border-radius: 32px 26px 38px 30px; }
:root[data-skin="storybook"] .achievement-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 8px; }
:root[data-skin="storybook"] .achievement-item { order: 3; padding: 0 2px; background: none; border: 0; border-radius: 0; opacity: 1; filter: none; }
:root[data-skin="storybook"] .achievement-item[data-achievement-id="total10"] { order: 0; }
:root[data-skin="storybook"] .achievement-item[data-achievement-id="streak3"] { order: 1; }
:root[data-skin="storybook"] .achievement-item[data-achievement-id="streak7"] { order: 2; }
:root[data-skin="storybook"] .achievement-emoji { display: grid; place-items: center; width: min(88px,100%); height: auto; aspect-ratio: 1; margin: 0 auto 3px; font-size: 27px; border: 0; border-radius: 0; background: none; }
:root[data-skin="storybook"] .achievement-item.locked .achievement-emoji { filter: grayscale(1); opacity: .65; }
:root[data-skin="storybook"] .achievement-name { color: var(--ink); font-size: 13px; font-family: var(--story-title); }
:root[data-skin="storybook"] .achievement-desc { color: var(--muted); font-size: 11px; line-height: 1.5; }
:root[data-skin="storybook"] .chart-area { height: 160px; }
:root[data-skin="storybook"] .chart-avg,
:root[data-skin="storybook"] .chart-legend-item,
:root[data-skin="storybook"] .chart-day-info { color: var(--muted); font-size: 12px; }
:root[data-skin="storybook"] .tip-card { padding: 14px; color: var(--ink); background: var(--surface); }
:root[data-skin="storybook"] .tip-icon { background: var(--mini-bg); color: var(--brand-dark); }
:root[data-skin="storybook"] .tip-card p { color: var(--muted); font-size: 12px; }
:root[data-skin="storybook"] .empty-illustration { width: 130px; height: 96px; margin: 0 auto 12px; background: url("./assets/storybook/resting-bunny.webp") center / contain no-repeat; border: 0; color: transparent; font-size: 0; }
:root[data-skin="storybook"] .empty-state h3,
:root[data-skin="storybook"] .session-title { color: var(--ink); }
:root[data-skin="storybook"] .empty-state p,
:root[data-skin="storybook"] .session-meta { color: var(--muted); }
:root[data-skin="storybook"] .tools-row { flex-wrap: wrap; gap: 8px; }
:root[data-skin="storybook"] .tools-row .button { flex: 1 1 100px; }
:root[data-skin="storybook"] .data-note,
:root[data-skin="storybook"] .backup-hint,
:root[data-skin="storybook"] .footer { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1.7; }
:root[data-skin="storybook"] .backup-hint:empty { display: none; }
:root[data-skin="storybook"] .footer { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-skin="storybook"][data-cloud-view] .cloud-nav {
  display: block; position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: max(8px,env(safe-area-inset-bottom)); width: min(440px,calc(100% - 24px)); padding: 5px;
  border: 2px solid var(--story-outline); border-radius: 22px; background: var(--surface); box-shadow: 0 4px 0 rgb(66 45 91 / 20%);
}
:root[data-skin="storybook"] .cloud-nav [role="tablist"] { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
:root[data-skin="storybook"] .cloud-nav button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; padding: 8px 10px; border: 0; border-radius: 15px; font-size: 14px; font-weight: 700; color: var(--muted); background: transparent; }
:root[data-skin="storybook"] .cloud-nav button[aria-selected="true"] { background: var(--brand-soft); color: var(--ink); }
:root[data-skin="storybook"] .cloud-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-skin="storybook"] [id^="forest"] { scroll-margin-block: 14px 84px; }
:root[data-skin="storybook"] :focus-visible { outline: 3px solid #ac7d42; outline-offset: 3px; }
:root[data-skin="storybook"] .settings-panel,
:root[data-skin="storybook"] .alarm-dialog { background: var(--surface); border: 2px solid var(--story-outline); }
:root[data-skin="storybook"] .settings-header,
:root[data-skin="storybook"] .setting-row { border-color: var(--line); }
:root[data-skin="storybook"] .settings-section h3 { color: var(--brand-dark); }
:root[data-skin="storybook"] .settings-header h2,
:root[data-skin="storybook"] .setting-row label,
:root[data-skin="storybook"] .setting-row span { color: var(--ink); }
:root[data-skin="storybook"] .seg-btn { color: var(--muted); }
:root[data-skin="storybook"] .seg-btn.active { color: var(--ink); background: var(--surface); }
:root[data-skin="storybook"] .skin-card { color: var(--ink); border-color: var(--line); }
:root[data-skin="storybook"] .skin-card.active { border-color: var(--brand); }
:root[data-skin="storybook"] .skin-card:hover { transform: none; }
:root[data-skin="storybook"] .settings-version { color: var(--muted); }
#skinGrid .skin-card-storybook { background: #e8e0f1; color: #302353; }
#skinGrid .skin-card-storybook .skin-name { color: #302353; }
#skinGrid .skin-card-storybook .skin-preview { display: block; height: 58px; margin: -4px -2px 8px; border-radius: 10px; background-size: cover; background-position: center 30%; }
:root[data-skin="storybook"] .subject-icon { font-size: 0; background: var(--story-subject-symbol) center / contain no-repeat; }
:root[data-skin="storybook"] .subject-goal-row:nth-child(1) { --story-subject-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Cg%20stroke%3D'%23514573'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%205v30h30Z'%20fill%3D'%23ffe2a0'%2F%3E%3Cpath%20d%3D'M12%2018v11h11Z'%20fill%3D'%23fff8e9'%2F%3E%3Cpath%20d%3D'm11%2011%202-2m4%208%202-2m4%208%202-2'%20fill%3D'none'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
:root[data-skin="storybook"] .subject-goal-row:nth-child(2) { --story-subject-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Cg%20stroke%3D'%23514573'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cellipse%20cx%3D'20'%20cy%3D'20'%20rx%3D'7'%20ry%3D'17'%20fill%3D'none'%2F%3E%3Cellipse%20cx%3D'20'%20cy%3D'20'%20rx%3D'7'%20ry%3D'17'%20transform%3D'rotate(60%2020%2020)'%20fill%3D'none'%2F%3E%3Cellipse%20cx%3D'20'%20cy%3D'20'%20rx%3D'7'%20ry%3D'17'%20transform%3D'rotate(120%2020%2020)'%20fill%3D'none'%2F%3E%3Ccircle%20cx%3D'20'%20cy%3D'20'%20r%3D'3'%20fill%3D'%23a6c2d4'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
:root[data-skin="storybook"] .subject-goal-row:nth-child(3) { --story-subject-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Cg%20stroke%3D'%23514573'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm9%204%2022%203%201%2028-24%202Z'%20fill%3D'%23edafbe'%2F%3E%3Cpath%20d%3D'm12%208%2015%202v20l-14%202Z'%20fill%3D'%23fff8e9'%2F%3E%3Cpath%20d%3D'm15%2026%205-13%205%2013m-8-5h6'%20fill%3D'none'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
:root[data-skin="storybook"] .subject-goal-row:nth-child(4) { --story-subject-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2040'%3E%3Cg%20stroke%3D'%23514573'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm3%2012%2017-9%2017%209ZM6%2032h28v4H6Z'%20fill%3D'%23ffe2a0'%2F%3E%3Cpath%20d%3D'M9%2014v16m7-16v16m8-16v16m7-16v16'%20fill%3D'none'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
:root[data-skin="storybook"] .achievement-emoji { font-size: 0; background: var(--story-achievement-symbol) center / contain no-repeat; }
:root[data-skin="storybook"] .achievement-item[data-achievement-type="sessions"] { --story-achievement-symbol: url("./assets/storybook/badge-book-v2.webp"); }
:root[data-skin="storybook"] .achievement-item[data-achievement-type="streak"] { --story-achievement-symbol: url("./assets/storybook/badge-house-v2.webp"); }
:root[data-skin="storybook"] .achievement-item[data-achievement-type="hours"] { --story-achievement-symbol: url("./assets/storybook/badge-hourglass-v2.webp"); }
:root[data-skin="storybook"] .achievement-item[data-achievement-type="dayHours"] { --story-achievement-symbol: url("./assets/storybook/badge-star-v2.webp"); }
:root[data-skin="storybook"] .achievement-item[data-achievement-id="streak3"] { --story-achievement-symbol: url("./assets/storybook/badge-bunny-v2.webp"); }
:root[data-skin="storybook"] .achievement-item[data-achievement-id="streak30"] { --story-achievement-symbol: url("./assets/storybook/badge-star-v2.webp"); }
@media (max-width: 360px) {
  :root[data-skin="storybook"] .app-shell { width: calc(100% - 24px); }
  :root[data-skin="storybook"] .brand strong { font-size: 17px; }
  :root[data-skin="storybook"] .welcome-left h1 { font-size: 29px; max-width: none; }
  :root[data-skin="storybook"] .card-heading h2 { font-size: 18px; }
  :root[data-skin="storybook"] .timer-card { padding-inline: 14px; }
  :root[data-skin="storybook"] .timer-stage { width: calc(100% + 48px); margin-inline: -24px; }
  :root[data-skin="storybook"] .timer-actions::before { left: -24px; right: -24px; }
  :root[data-skin="storybook"] .goal-card,
  :root[data-skin="storybook"] .leisure-card,
  :root[data-skin="storybook"] .achievement-card { padding: 12px; }
  :root[data-skin="storybook"] .subject-goal-header { font-size: 11px; }
  :root[data-skin="storybook"] .leisure-orb { padding-right: 95px; }
  :root[data-skin="storybook"] .leisure-orb::after { height: 158px; right: -20px; }
  :root[data-skin="storybook"] #leisureDisplay { font-size: 24px; }
}
@media (max-width: 599px) and (min-height: 741px) and (max-height: 820px) {
  :root[data-skin="storybook"] .topbar { margin-bottom: 8px; }
  :root[data-skin="storybook"] .cloud-date { padding-block: 4px; }
  :root[data-skin="storybook"] .welcome-left h1 { font-size: 28px; line-height: 1.15; }
  :root[data-skin="storybook"] .welcome-left .lead { font-size: 11px; line-height: 1.5; }
  :root[data-skin="storybook"] .streak-badge,
  :root[data-skin="storybook"] .today-total { min-height: 64px; padding-block: 6px; }
  :root[data-skin="storybook"] .streak-badge strong,
  :root[data-skin="storybook"] .today-total strong { font-size: 25px; }
  :root[data-skin="storybook"] .cloud-view-panel { gap: 12px; }
  :root[data-skin="storybook"] .timer-card { padding-top: 14px; }
}
@media (max-width: 599px) and (max-height: 740px) {
  :root[data-skin="storybook"] .app-shell { padding-top: max(10px,calc(env(safe-area-inset-top) + 8px)); }
  :root[data-skin="storybook"] .topbar { margin-bottom: 8px; }
  :root[data-skin="storybook"] .cloud-date { margin-bottom: 8px; padding-block: 4px; }
  :root[data-skin="storybook"] .welcome-left h1 { max-width: none; font-size: 26px; line-height: 1.3; letter-spacing: 0; }
  :root[data-skin="storybook"] .welcome-left h1 > span { display: inline; }
  :root[data-skin="storybook"] .welcome-left .lead { display: none; }
  :root[data-skin="storybook"] .welcome-grid { gap: 10px; }
  :root[data-skin="storybook"] .streak-badge,
  :root[data-skin="storybook"] .today-total { min-height: 62px; padding-block: 5px; }
  :root[data-skin="storybook"] .streak-badge strong,
  :root[data-skin="storybook"] .today-total strong { font-size: 23px; }
  :root[data-skin="storybook"] .cloud-view-panel { gap: 20px; }
  :root[data-skin="storybook"] .timer-card { padding-top: 16px; }
  :root[data-skin="storybook"] .timer-stage { width: min(350px,calc(100% + 48px)); left: 50%; transform: translateX(-50%); margin-inline: 0; }
  :root[data-skin="storybook"] .timer-hint { font-size: 11px; margin-bottom: 8px; }
}
@media (max-width: 599px) and (max-height: 720px) {
  :root[data-skin="storybook"] .timer-card { padding-top: 8px; padding-bottom: 8px; }
  :root[data-skin="storybook"] .timer-card .card-heading { margin-bottom: 4px; }
  :root[data-skin="storybook"] .timer-card .card-heading h2 { font-size: 19px; line-height: 1.2; }
  :root[data-skin="storybook"] .timer-stage { width: min(292px,100%); margin: -2px 0 0; }
  :root[data-skin="storybook"] .timer-card[data-status="idle"] .timer-hint { display: none; }
}
@media (min-width: 600px) {
  :root[data-skin="storybook"] .app-shell { padding-top: 28px; }
  :root[data-skin="storybook"] .skin-scene::before { background-size: auto max(100vh,960px); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-skin="storybook"] *, :root[data-skin="storybook"] *::before, :root[data-skin="storybook"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}