:root {
  --paper: #f7f4ee;
  --paper-deep: #eee9e0;
  --ink: #202723;
  --muted: #737b74;
  --line: #dedbd3;
  --sage: #b4c6b2;
  --sage-deep: #54715f;
  --coral: #f07f62;
  --coral-soft: #f7d8ce;
  --yellow: #f2cb72;
  --yellow-soft: #f8edc9;
  --blue: #abc9d1;
  --blue-soft: #deebed;
  --lavender: #d7cee3;
  --night: #16201d;
  --night-soft: #202e2a;
  --night-card: #253530;
  --white: #fffdfa;
  --shadow: 0 10px 25px rgba(47, 51, 43, 0.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
  transition: background .25s ease, color .25s ease;
}
button, textarea, input { font: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 1240px; margin: 0 auto; padding: 0 34px 30px; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 17px; text-decoration: none; letter-spacing: .02em; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; background: var(--ink); color: var(--yellow); border-radius: 7px; font-size: 16px; }
.topbar-right { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 12px; }
.live-status { display: inline-flex; align-items: center; gap: 6px; }
.live-status i { width: 7px; height: 7px; display: inline-block; background: #7dae74; border-radius: 50%; box-shadow: 0 0 0 3px #e0eadb; }
.clock-label { font-variant-numeric: tabular-nums; }
.icon-button, .avatar { border: 0; display: grid; place-items: center; }
.icon-button { width: 33px; height: 33px; background: transparent; color: var(--ink); border-radius: 50%; font-size: 20px; }
.icon-button:hover { background: var(--paper-deep); }
.avatar { width: 33px; height: 33px; background: var(--coral); color: white; border-radius: 50%; font-weight: 700; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(390px, .9fr); gap: 56px; padding: 72px 0 61px; align-items: center; }
.eyebrow, .section-kicker { color: var(--sage-deep); font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.eyebrow > span { width: 24px; height: 1px; background: var(--coral); display: inline-block; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 19px 0 17px; font-size: clamp(40px, 5vw, 68px); line-height: 1.07; letter-spacing: -.045em; font-weight: 700; }
h1 em { color: var(--coral); font-style: normal; position: relative; }
h1 em::after { content: ""; position: absolute; height: 7px; width: 100%; left: 1px; bottom: -1px; background: var(--yellow); z-index: -1; transform: rotate(-2deg); }
.hero-lede { max-width: 430px; margin-bottom: 27px; color: var(--muted); font-size: 16px; }
.mood-picker { display: flex; flex-wrap: wrap; gap: 9px; max-width: 500px; margin-bottom: 26px; }
.mood-chip, .state-pill { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 5px; transition: border .18s, background .18s, transform .18s; }
.mood-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; font-size: 13px; }
.mood-chip span { color: var(--coral); font-size: 17px; line-height: 1; }
.mood-chip:hover, .mood-chip.selected { background: var(--white); border-color: var(--coral); transform: translateY(-1px); }
.mood-chip.selected { box-shadow: 0 3px 0 var(--coral); }
.primary-button { border: 0; background: var(--ink); color: white; display: inline-flex; justify-content: center; align-items: center; gap: 17px; min-height: 45px; padding: 0 19px; border-radius: 5px; font-size: 13px; font-weight: 650; transition: background .18s, transform .18s; }
.primary-button:hover { background: var(--sage-deep); transform: translateY(-2px); }
.primary-button span, .card-action span, .text-button span, .outline-button span { font-size: 17px; line-height: 1; }
.microcopy { margin: 12px 0 0; color: var(--muted); font-size: 11px; }

.hero-scene { height: 372px; background: #263834; color: #f5efe3; position: relative; overflow: hidden; border-radius: 8px; box-shadow: var(--shadow); }
.scene-topline { position: absolute; left: 24px; right: 24px; top: 20px; display: flex; justify-content: space-between; color: #b7c8bd; font-size: 9px; letter-spacing: .18em; }
.window-frame { width: 190px; height: 216px; position: absolute; right: 74px; top: 54px; border: 8px solid #d7d6c6; background: #a9c5c5; box-shadow: 12px 11px 0 rgba(12, 33, 29, .35); }
.window-frame::after, .window-frame::before { content: ""; position: absolute; background: #d7d6c6; }
.window-frame::after { width: 6px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); }
.window-frame::before { height: 6px; width: 100%; top: 50%; left: 0; transform: translateY(-50%); }
.window-pane { position: absolute; inset: 0; background: #88a9ae; }
.pane-one { clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%); background: #638f97; }
.pane-two { clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%); background: #729da1; }
.window-moon { position: absolute; z-index: 2; top: 37px; right: 37px; color: #ffebba; font-size: 38px; transform: rotate(-18deg); }
.window-star { position: absolute; z-index: 2; color: #f9db87; font-size: 28px; }
.star-a { left: 24px; top: 32px; }.star-b { right: 28px; bottom: 33px; font-size: 19px; }
.scene-shelf { position: absolute; width: 259px; height: 9px; background: #a46b4e; right: 34px; bottom: 94px; box-shadow: 0 8px 0 rgba(10, 25, 22, .18); }
.scene-shelf span { position: absolute; bottom: 9px; width: 19px; height: 29px; background: #e7b46c; border-radius: 4px 4px 0 0; }
.scene-shelf span:nth-child(1) { left: 25px; height: 23px; background: #d88b67; }.scene-shelf span:nth-child(2) { left: 57px; height: 38px; background: #93b29c; }.scene-shelf span:nth-child(3) { left: 102px; background: #ded29e; }.scene-shelf span:nth-child(4) { left: 150px; height: 22px; background: #ceabbf; }
.scene-plant { position: absolute; left: 61px; bottom: 98px; width: 73px; height: 94px; }
.scene-plant b { position: absolute; bottom: 0; left: 13px; width: 48px; height: 37px; background: #c77f62; border-radius: 5px 5px 16px 16px; }
.scene-plant i { position: absolute; bottom: 26px; left: 33px; width: 24px; height: 66px; border-radius: 100% 0 100% 0; background: #7fa28a; transform-origin: bottom; transform: rotate(-28deg); }.scene-plant i:nth-child(2) { left: 16px; height: 50px; transform: rotate(-60deg); background: #9fbc9e; }.scene-plant i:nth-child(3) { left: 48px; height: 55px; transform: rotate(22deg); background: #6c927b; }
.scene-lamp { position: absolute; left: 203px; bottom: 85px; width: 70px; height: 100px; }.lamp-shade { position: absolute; top: 0; left: 5px; width: 60px; height: 35px; background: #f2ce8c; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }.lamp-stem { width: 5px; height: 50px; background: #f2ce8c; position: absolute; top: 31px; left: 33px; }.lamp-base { width: 42px; height: 7px; background: #f2ce8c; position: absolute; bottom: 8px; left: 14px; border-radius: 50%; }
.scene-blanket { position: absolute; left: 37px; bottom: 44px; width: 291px; height: 91px; background: #dfb8a2; border-radius: 56px 72px 7px 7px; box-shadow: inset 0 -10px 0 rgba(151, 81, 72, .18); }.blanket-fold { position: absolute; left: 35px; top: 22px; width: 180px; height: 43px; border-top: 3px solid rgba(113, 68, 63, .25); transform: rotate(4deg); }.blanket-head { position: absolute; right: 26px; top: -20px; width: 62px; height: 62px; display: grid; place-items: center; background: #e8c18e; border-radius: 50%; font-size: 31px; border: 4px solid #d7a276; }
.scene-caption { position: absolute; bottom: 18px; left: 24px; display: flex; flex-direction: column; gap: 2px; }.scene-caption strong { font-size: 17px; font-weight: 600; }.scene-caption span { color: #b7c8bd; font-size: 11px; }

.state-strip { display: grid; grid-template-columns: 1fr auto minmax(190px, .75fr); gap: 32px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 19px 0; }
.state-intro { display: flex; align-items: center; gap: 14px; }.state-intro strong { font-size: 14px; font-weight: 650; }.state-pills { display: flex; gap: 6px; }.state-pill { padding: 8px 12px; font-size: 12px; white-space: nowrap; }.state-pill span { color: var(--coral); margin-right: 5px; font-size: 15px; }.state-pill.active { background: var(--ink); color: white; border-color: var(--ink); }.state-pill.active span { color: var(--yellow); }.state-note { color: var(--muted); font-size: 12px; text-align: right; }

.topbar-tool { color: var(--sage-deep); text-decoration: none; font-size: 12px; font-weight: 650; }.topbar-tool:hover { color: var(--coral); }
.pattern-generator { padding: 54px 0 4px; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; }
.pattern-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 21px; }.pattern-heading h2 { margin: 5px 0 7px; font-size: 30px; line-height: 1.18; letter-spacing: -.035em; }.pattern-heading p { max-width: 570px; margin: 0; color: var(--muted); font-size: 13px; }.pattern-board-note { flex: 0 0 auto; padding: 12px 15px; border: 1px solid #e4d9ca; border-radius: 6px; background: #fff9f2; color: #816a5b; }.pattern-board-note strong, .pattern-board-note span { display: block; }.pattern-board-note strong { margin-bottom: 2px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }.pattern-board-note span { font-size: 15px; font-weight: 700; }
.pattern-workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; }.pattern-controls, .pattern-preview-panel { border: 1px solid var(--line); border-radius: 7px; background: var(--white); }.pattern-controls { padding: 14px; }.pattern-upload { min-height: 156px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 18px; border: 1px dashed #c6cfc4; border-radius: 6px; background: #f7f9f5; text-align: center; transition: border .18s, background .18s; }.pattern-upload:hover, .pattern-upload.dragging { border-color: var(--coral); background: #fff4ee; }.pattern-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }.upload-mark { width: 31px; height: 31px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; background: var(--coral-soft); color: #b85c4a; font-size: 21px; line-height: 1; }.pattern-upload strong { font-size: 14px; }.pattern-upload span { margin-top: 3px; color: var(--muted); font-size: 11px; }.pattern-upload small { margin-top: 10px; color: #9aa39b; font-size: 9px; }.pattern-source-meta { min-height: 31px; padding: 9px 2px 7px; color: #8a938b; font-size: 10px; overflow-wrap: anywhere; }
.pattern-ai-tools { padding: 13px 0 2px; border-top: 1px solid var(--line); }.pattern-ai-head { display: flex; align-items: center; gap: 8px; }.pattern-ai-head strong, .pattern-ai-head small { display: block; }.pattern-ai-head strong { color: var(--ink); font-size: 11px; }.pattern-ai-head small { margin-top: 2px; color: #89938b; font-size: 9px; }.ai-badge { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 5px; background: #e8e0ee; color: #715c80; font-size: 9px; font-weight: 800; letter-spacing: .04em; }.pattern-ai-button { width: 100%; min-height: 34px; margin-top: 10px; border: 1px solid #b9a5c5; border-radius: 4px; background: #f5eff7; color: #6a5678; font-size: 11px; font-weight: 700; }.pattern-ai-button span { margin-left: 6px; color: #ae6a91; font-size: 14px; }.pattern-ai-button:hover { border-color: #8c6d9f; background: #eee4f2; }.pattern-ai-button:disabled { cursor: not-allowed; opacity: .48; }.pattern-ai-status { min-height: 25px; margin: 7px 0 0; color: #9aa39b; font-size: 9px; line-height: 1.45; }
.pattern-setting { padding-top: 14px; border-top: 1px solid var(--line); }.setting-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; color: var(--muted); font-size: 11px; }.setting-label strong { color: var(--ink); font-size: 17px; }.pattern-setting input[type="range"] { width: 100%; accent-color: var(--coral); }.range-ends { display: flex; justify-content: space-between; margin-top: 3px; color: #9aa39b; font-size: 9px; }.pattern-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 11px; }.pattern-presets button { min-height: 30px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; }.pattern-presets button:hover, .pattern-presets button.active { border-color: var(--coral); color: #a34e43; background: var(--coral-soft); }.pattern-options { display: grid; gap: 9px; }.check-setting { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }.check-setting input { width: 14px; height: 14px; accent-color: var(--sage-deep); }.pattern-download { width: 100%; min-height: 36px; margin-top: 15px; border: 0; border-radius: 4px; background: var(--ink); color: white; font-size: 11px; font-weight: 650; }.pattern-download span { margin-left: 7px; color: var(--yellow); font-size: 17px; vertical-align: -1px; }.pattern-download:hover { background: var(--sage-deep); }.pattern-download:disabled { cursor: not-allowed; opacity: .4; }
.pattern-preview-panel { padding: 14px; }.pattern-preview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }.pattern-preview-head h3 { margin: 4px 0 3px; font-size: 20px; letter-spacing: -.025em; }.pattern-preview-head p { margin: 0; color: var(--muted); font-size: 11px; }.pattern-status { padding: 5px 8px; border-radius: 4px; background: #eef0eb; color: #89938b; font-size: 10px; white-space: nowrap; }.pattern-status.ready { background: #e5efdf; color: var(--sage-deep); }.pattern-preview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 185px; gap: 13px; align-items: start; }.pattern-canvas-wrap { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 5px; background: #f3f5f0; }.pattern-canvas-wrap canvas { display: block; width: min(100%, 600px); height: auto; aspect-ratio: 1; margin: 0 auto; border: 1px solid #d2dbd1; background: white; image-rendering: pixelated; }.pattern-canvas-footer { display: flex; justify-content: space-between; gap: 8px; padding: 7px 1px 0; color: #8b958c; font-size: 9px; }.pattern-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.pattern-stat { padding: 8px 9px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.55); }.pattern-stat span { display: block; margin-bottom: 2px; color: #89938b; font-size: 9px; }.pattern-stat strong { font-size: 16px; }.pattern-legend { grid-column: 1 / -1; padding: 10px 9px; border: 1px solid var(--line); border-radius: 4px; }.legend-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }.legend-title strong { font-size: 11px; }.legend-title span { color: #9aa39b; font-size: 9px; }.pattern-legend-rows { display: grid; gap: 5px; }.pattern-legend-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 6px; align-items: center; color: var(--muted); font-size: 10px; }.pattern-legend-row > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }.pattern-legend-row b { color: var(--ink); font-size: 10px; line-height: 1.1; }.pattern-legend-row small { color: #9aa39b; font-size: 8px; line-height: 1.1; }.pattern-legend-row strong { color: var(--ink); font-size: 10px; }.pattern-swatch { width: 14px; height: 14px; border: 1px solid rgba(32,39,35,.18); border-radius: 3px; }.legend-empty { color: #9aa39b; font-size: 10px; }.pattern-scale-strip { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }.scale-strip-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }.scale-strip-title strong { font-size: 11px; }.scale-strip-title span { color: #9aa39b; font-size: 9px; }.scale-strip-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }.scale-strip-items button { min-width: 0; padding: 5px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); text-align: left; }.scale-strip-items button:hover, .scale-strip-items button.active { border-color: var(--coral); background: #fff4ee; }.scale-mini { display: block; padding: 3px; background: #f1f4ef; }.scale-mini canvas { display: block; width: 100%; aspect-ratio: 1; background: white; image-rendering: pixelated; }.scale-strip-items b, .scale-strip-items small { display: block; }.scale-strip-items b { margin-top: 5px; color: var(--ink); font-size: 10px; }.scale-strip-items small { margin-top: 1px; color: #9aa39b; font-size: 8px; }.pattern-disclaimer { margin: 10px 0 0; color: #9aa39b; font-size: 10px; line-height: 1.5; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 38px; padding: 59px 0 55px; }.main-column { min-width: 0; }.side-column { display: flex; flex-direction: column; gap: 15px; }.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }.section-heading h2 { margin: 5px 0 0; font-size: 25px; line-height: 1.2; letter-spacing: -.03em; }.text-button { border: 0; background: transparent; color: var(--sage-deep); display: inline-flex; gap: 9px; align-items: center; padding: 7px 0; font-size: 12px; font-weight: 650; }.text-button:hover { color: var(--coral); }.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.activity-card { min-height: 205px; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); position: relative; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }.activity-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.activity-card h3 { margin: 20px 0 6px; font-size: 17px; letter-spacing: -.02em; }.activity-card p { color: var(--muted); font-size: 12px; line-height: 1.6; margin-bottom: 17px; max-width: 230px; }.card-head { display: flex; justify-content: space-between; align-items: center; }.activity-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 5px; font-size: 19px; }.activity-icon.coral { background: var(--coral-soft); color: #c65d46; }.activity-icon.yellow { background: var(--yellow-soft); color: #a97826; }.activity-icon.blue { background: var(--blue-soft); color: #4d8590; }.activity-icon.sage { background: #e1ebdf; color: #53775f; }.duration { color: #9ca19b; font-size: 9px; letter-spacing: .14em; }.card-action { margin-top: auto; align-self: flex-start; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 12px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 650; }.card-action:hover { color: var(--coral); }
.activity-breathe { background: var(--coral-soft); border-color: #e9beb1; }.activity-task { background: var(--yellow-soft); border-color: #eadcae; }.activity-senses { background: var(--blue-soft); border-color: #c8dcdf; }.activity-prompt { background: #e7e0ec; border-color: #d4c9db; }

.game-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 23px; background: var(--ink); color: #fff; border-radius: 7px; padding: 25px; margin: 42px 0 46px; min-height: 246px; overflow: hidden; }.game-copy { display: flex; flex-direction: column; align-items: flex-start; }.game-copy .section-kicker { color: var(--yellow); }.game-copy h2 { margin: 6px 0 9px; font-size: 23px; letter-spacing: -.03em; }.game-copy p { color: #bbc6bf; font-size: 12px; line-height: 1.65; margin-bottom: 11px; max-width: 220px; }.game-score { display: flex; align-items: baseline; gap: 5px; margin-bottom: 16px; }.game-score span { color: var(--yellow); font-size: 30px; line-height: 1; font-weight: 700; }.game-score small { color: #9bab9f; font-size: 10px; }.primary-button.compact { min-height: 38px; padding: 0 14px; font-size: 12px; background: var(--coral); }.primary-button.compact:hover { background: #ff9c7f; }.game-stage { min-height: 195px; background: #304840; border: 1px solid #4b6057; border-radius: 5px; position: relative; overflow: hidden; }.game-stage::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(#476057 1px, transparent 1px), linear-gradient(90deg, #476057 1px, transparent 1px); background-size: 32px 32px; }.game-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #aabbb0; font-size: 12px; z-index: 1; text-align: center; padding: 20px; }.game-star { position: absolute; z-index: 2; width: 36px; height: 36px; border: 0; background: var(--yellow); color: #70522c; clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 69% 56%, 79% 92%, 50% 70%, 20% 92%, 31% 56%, 2% 35%, 39% 34%); animation: star-pop .28s ease-out; filter: drop-shadow(0 0 7px rgba(245, 213, 111, .48)); }.game-star:hover { transform: scale(1.13); }.game-over { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 6px; background: rgba(30, 47, 41, .92); color: white; text-align: center; }.game-over strong { color: var(--yellow); font-size: 18px; }.game-over span { color: #b6c7bd; font-size: 12px; }
@keyframes star-pop { from { opacity: 0; transform: scale(.5) rotate(-15deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

.notes-heading { margin-bottom: 18px; }.save-state { color: #a4aba4; font-size: 10px; }.notes-panel { border: 1px solid var(--line); background: var(--white); border-radius: 7px; padding: 18px 20px 13px; }.notes-panel textarea { display: block; width: 100%; min-height: 88px; border: 0; resize: vertical; outline: 0; background: transparent; color: var(--ink); font-size: 14px; line-height: 1.65; }.notes-panel textarea::placeholder { color: #b2b5af; }.notes-footer { display: flex; align-items: center; gap: 16px; color: #a1a69f; font-size: 10px; }.notes-footer .text-button { margin-left: auto; color: #9a9f99; font-size: 11px; }.primary-button.mini { min-height: 31px; padding: 0 12px; font-size: 11px; gap: 8px; background: var(--sage-deep); }

.side-card { border: 1px solid var(--line); border-radius: 7px; background: var(--white); padding: 20px; }.side-card-top { display: flex; align-items: center; justify-content: space-between; }.drawer-mark { color: var(--coral); font-size: 21px; }.prompt-card { background: #f1e6dd; border-color: #e5cec1; min-height: 238px; }.prompt-card h2 { margin: 32px 0 22px; font-size: 21px; line-height: 1.38; letter-spacing: -.03em; max-width: 235px; }.prompt-author { display: flex; align-items: center; gap: 8px; color: #8b7e78; font-size: 10px; margin-bottom: 21px; }.mini-avatar { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: white; font-size: 10px; font-weight: 700; }.outline-button { min-height: 34px; padding: 0 12px; border: 1px solid #c69e8d; color: #7e5d52; background: transparent; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; }.outline-button:hover { background: rgba(255,255,255,.4); border-color: var(--coral); }.rhythm-card { background: #e5eddf; border-color: #ceddc8; }.rhythm-value { color: var(--sage-deep); font-size: 12px; font-weight: 700; }.rhythm-bar { height: 7px; background: #cad8c3; border-radius: 8px; margin: 20px 0 10px; overflow: hidden; }.rhythm-bar span { display: block; height: 100%; width: 25%; background: var(--sage-deep); transition: width .35s ease; }.rhythm-card p { margin-bottom: 16px; color: #70826f; font-size: 11px; }.rhythm-list { display: flex; flex-direction: column; gap: 11px; font-size: 11px; color: #627261; }.check-dot { display: inline-grid; place-items: center; width: 19px; height: 19px; border: 1px solid #adc1a6; border-radius: 50%; margin-right: 7px; color: var(--sage-deep); font-size: 10px; }.check-dot.done { background: var(--sage-deep); color: white; border-color: var(--sage-deep); }.checkin-card { background: #e5e0eb; border-color: #d2c7db; }.checkin-card .side-card-top > span:last-child { color: #857a8f; font-size: 10px; }.checkin-card h3 { margin: 24px 0 17px; font-size: 16px; }.battery-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; color: #847c8e; font-size: 10px; }.battery-row input { accent-color: #7a648d; width: 100%; }.energy-label { margin-top: 10px; color: #685c76; font-size: 11px; }.side-quote { margin: 18px 9px 0; display: flex; gap: 11px; color: var(--muted); }.side-quote span { color: var(--coral); font-family: Georgia, serif; font-size: 39px; line-height: .8; }.side-quote p { font-size: 12px; line-height: 1.7; margin: 0; }

.footer { display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); padding-top: 20px; color: #a2a7a1; font-size: 10px; letter-spacing: .03em; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: none; place-items: center; padding: 20px; background: rgba(24, 34, 30, .58); }.modal-backdrop.open { display: grid; }.breath-modal { width: min(100%, 390px); position: relative; background: var(--paper); color: var(--ink); border-radius: 7px; padding: 31px; text-align: center; box-shadow: 0 20px 60px rgba(10, 20, 16, .24); }.modal-close { position: absolute; top: 12px; right: 15px; border: 0; background: transparent; color: var(--muted); font-size: 24px; }.breath-modal h2 { margin: 7px 0 7px; font-size: 25px; }.breath-modal > p { color: var(--muted); font-size: 12px; margin-bottom: 22px; }.breath-orb { width: 172px; height: 172px; border-radius: 50%; margin: 0 auto 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--coral-soft); color: #a95343; border: 10px solid #f4c7ba; transition: transform 1s ease, background .6s, border-color .6s; }.breath-orb.active-inhale { transform: scale(1.12); background: var(--blue-soft); border-color: #b8d6db; color: #48767d; }.breath-orb.active-hold { transform: scale(1.12); background: var(--yellow-soft); border-color: #efdb9e; color: #91702d; }.breath-orb.active-exhale { transform: scale(.88); background: #e3dfeb; border-color: #ccc2d7; color: #6f5b80; }.breath-orb span { font-size: 16px; font-weight: 650; }.breath-orb small { margin-top: 3px; font-size: 11px; opacity: .75; }.breath-controls { display: flex; justify-content: center; gap: 10px; }.breath-controls .outline-button { border-color: var(--line); color: var(--muted); }
.toast { position: fixed; z-index: 20; bottom: 22px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: white; padding: 10px 16px; border-radius: 5px; font-size: 12px; transition: opacity .2s, transform .2s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

.pet-dock { position: fixed; z-index: 8; right: 20px; bottom: 20px; width: 278px; padding: 15px 15px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 15px 40px rgba(27, 38, 31, .16); transition: opacity .2s, transform .2s; }.pet-close { position: absolute; right: 9px; top: 7px; width: 24px; height: 24px; border: 0; color: var(--muted); background: transparent; font-size: 19px; line-height: 1; }.pet-dock-head { display: flex; align-items: center; justify-content: space-between; padding-right: 27px; }.pet-dock-head strong { display: block; margin-top: 2px; font-size: 13px; }.pet-pulse { width: 8px; height: 8px; background: #83ac79; border-radius: 50%; box-shadow: 0 0 0 4px #e0eadb; }.pet-stage { height: 154px; margin-top: 7px; position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #eef1e9; }.pet-sprite { position: absolute; left: 11px; bottom: -4px; width: 144px; height: 156px; background-image: url("assets/xiaohui-spritesheet.webp"); background-size: 1152px 1716px; background-position: calc(var(--frame-col, 0) * -144px) calc(var(--frame-row, 0) * -156px); background-repeat: no-repeat; image-rendering: auto; filter: drop-shadow(0 5px 5px rgba(37, 54, 44, .13)); }.pet-bubble { position: absolute; right: 9px; top: 28px; width: 114px; padding: 9px 10px; background: white; border: 1px solid #dae1d9; border-radius: 5px; color: #53635a; font-size: 11px; line-height: 1.5; }.pet-bubble::after { content: ""; position: absolute; left: -7px; bottom: 12px; width: 12px; height: 12px; background: white; border-left: 1px solid #dae1d9; border-bottom: 1px solid #dae1d9; transform: rotate(45deg); }.pet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 10px; }.pet-actions button { min-height: 31px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 4px; font-size: 11px; }.pet-actions button:first-child { background: var(--ink); color: white; border-color: var(--ink); }.pet-actions button:hover { border-color: var(--coral); }.pet-actions span { margin-left: 4px; color: var(--coral); }.pet-actions button:first-child span { color: var(--yellow); }.pet-reopen { display: none; position: fixed; z-index: 8; right: 18px; bottom: 18px; min-height: 38px; padding: 0 13px; border: 0; border-radius: 5px; background: var(--ink); color: white; font-size: 12px; box-shadow: 0 8px 20px rgba(27, 38, 31, .16); }.pet-reopen span { color: var(--yellow); margin-left: 5px; }body.pet-hidden .pet-dock { opacity: 0; pointer-events: none; transform: translateY(12px); }body.pet-hidden .pet-reopen { display: inline-flex; align-items: center; }

body.night { --paper: #16201d; --paper-deep: #24302b; --ink: #eff3eb; --muted: #a5b1a7; --line: #36453e; --white: #202e2a; --shadow: 0 10px 25px rgba(0, 0, 0, .18); }.night .brand-mark { background: #e6ede3; color: #263834; }.night .icon-button:hover { background: #2a3933; }.night .mood-chip, .night .state-pill { color: var(--ink); }.night .mood-chip:hover, .night .mood-chip.selected { background: #202e2a; }.night .activity-breathe { background: #4d322e; border-color: #70483f; }.night .activity-task { background: #4e4226; border-color: #695b38; }.night .activity-senses { background: #263f43; border-color: #3e5f64; }.night .activity-prompt { background: #3c3344; border-color: #5b4c63; }.night .prompt-card { background: #46332d; border-color: #6a4e45; }.night .rhythm-card { background: #2b3c2e; border-color: #425944; }.night .checkin-card { background: #393344; border-color: #564c65; }.night .notes-panel, .night .side-card { color: var(--ink); }.night .modal-backdrop { background: rgba(0, 0, 0, .72); }.night .breath-modal { background: var(--night); }.night .pattern-controls, .night .pattern-preview-panel { background: var(--white); }.night .pattern-upload { background: #26332d; border-color: #526258; }.night .pattern-upload:hover, .night .pattern-upload.dragging { background: #3c302c; border-color: var(--coral); }.night .pattern-board-note { background: #302d26; border-color: #5c5541; color: #d4c39b; }.night .pattern-stat, .night .pattern-legend { background: rgba(12, 20, 17, .2); }.night .pattern-status { background: #303a34; }.night .pattern-status.ready { background: #2e4631; }.night .scale-strip-items button:hover, .night .scale-strip-items button.active { background: #3c302c; }.night .pattern-download { background: #e6ede3; color: #263834; }.night .pattern-download:hover { background: var(--coral); color: white; }
.night .ai-badge { background: #3b3042; color: #d0b7dc; }.night .pattern-ai-button { background: #33283a; border-color: #776087; color: #ddc5e7; }.night .pattern-ai-button:hover { background: #44334e; }

/* AI stage previews */
.scale-ai { display: block; aspect-ratio: 1.35; padding: 3px; margin-bottom: 4px; background: #ecefea; }
.scale-ai-image { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; background: white; }

@media (max-width: 880px) {
  .app-shell { padding: 0 22px 24px; }.hero-grid { grid-template-columns: 1fr; gap: 32px; padding: 50px 0 45px; }.hero-scene { height: 330px; }.state-strip { grid-template-columns: 1fr; gap: 13px; }.state-note { text-align: left; }.content-grid { grid-template-columns: 1fr; padding-top: 44px; }.side-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }.side-quote { grid-column: span 2; }.game-panel { grid-template-columns: 1fr; }.game-stage { min-height: 200px; }
}
@media (max-width: 560px) {
  .app-shell { padding: 0 15px 22px; }.topbar { height: 64px; }.live-status, .clock-label { display: none; }.topbar-right { gap: 8px; }.hero-grid { padding: 40px 0 37px; gap: 24px; }.hero-copy h1 { font-size: 37px; }.hero-lede { font-size: 14px; }.hero-scene { height: 288px; }.window-frame { width: 145px; height: 166px; right: 29px; top: 42px; }.scene-shelf { right: 12px; bottom: 71px; width: 214px; }.scene-plant { left: 27px; bottom: 77px; transform: scale(.8); transform-origin: bottom left; }.scene-lamp { left: 127px; bottom: 63px; transform: scale(.8); transform-origin: bottom left; }.scene-blanket { left: 22px; width: 235px; height: 75px; bottom: 27px; }.blanket-head { width: 53px; height: 53px; right: 15px; top: -15px; font-size: 26px; }.scene-caption { bottom: 12px; left: 17px; }.scene-caption strong { font-size: 14px; }.mood-picker { gap: 7px; }.mood-chip { padding: 8px 10px; font-size: 12px; }.state-pills { overflow-x: auto; padding-bottom: 2px; }.state-pill { font-size: 11px; padding: 8px 10px; }.activity-grid { grid-template-columns: 1fr; }.activity-card { min-height: 175px; }.game-panel { padding: 21px; margin: 34px 0 39px; }.game-stage { min-height: 183px; }.side-column { grid-template-columns: 1fr; }.side-quote { grid-column: auto; }.footer { flex-direction: column; gap: 6px; }.section-heading h2 { font-size: 22px; }.save-state { display: none; }.notes-panel { padding: 15px; }.notes-footer { gap: 9px; }.pet-dock { right: 15px; bottom: 15px; left: 15px; width: auto; }.pet-stage { height: 145px; }.pet-sprite { transform: scale(.92); transform-origin: left bottom; }.pet-bubble { right: 8px; width: 125px; }
}

@media (max-width: 880px) {
  .pattern-heading { align-items: start; }
  .pattern-workspace { grid-template-columns: 1fr; }
  .pattern-controls { display: grid; grid-template-columns: minmax(175px, .8fr) 1fr; column-gap: 14px; }
  .pattern-upload { grid-row: span 2; min-height: 177px; }
  .pattern-source-meta { min-height: auto; }
  .pattern-setting { grid-column: 2; }
  .pattern-options { grid-column: 2; }
  .pattern-download { grid-column: 1 / -1; }
  .pattern-preview-grid { grid-template-columns: minmax(0, 1fr) 200px; }
}

@media (max-width: 560px) {
  .topbar-tool { font-size: 11px; }
  .pattern-generator { padding-top: 39px; }
  .pattern-heading { display: block; }
  .pattern-heading h2 { font-size: 24px; }
  .pattern-board-note { display: inline-block; margin-top: 13px; }
  .pattern-controls { display: block; }
  .pattern-upload { min-height: 144px; }
  .pattern-setting { margin-top: 13px; }
  .pattern-preview-grid { grid-template-columns: 1fr; }
  .pattern-summary { grid-template-columns: repeat(3, 1fr); }
  .pattern-stat { min-width: 0; }
  .pattern-stat strong { font-size: 14px; }
  .pattern-legend { grid-column: 1 / -1; }
  .scale-strip-items { gap: 5px; }
  .scale-strip-items button { padding: 4px; }
}