/* Paper Garden 纸上花园 · 官网。花园配色：纸色底、苔绿、叶绿、暖金点缀；无网页字体文件，使用系统字体。 */
:root {
  color-scheme: light dark;
  --paper: #f4f0e6; --paper-2: #fbf9f3; --paper-3: #ebe4d3; --field: #fff;
  --ink: #26302a; --ink-2: #4a5a4f; --muted: #5c665d;
  --moss: #2f4337; --moss-2: #1b2a22; --on-moss: #f6f1e6; --moss-text: #3b6149; --leaf: #76a887; --leaf-text: #437055; --leaf-soft: #dce9df;
  --gold: #b8955a; --gold-text: #765a24; --line: #ddd5c3; --line-strong: #cfc6b2;
  /* 红色只做小点缀（「推荐」「免费」这类小标签） */
  --red: #c0392b; --red-text: #c0392b; --red-soft: #f8e6e1;
  --topbar-bg: rgba(244,240,230,.88); --dot: #d6ccb7; --rest: #5c665d;
  --serif: "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --radius: 14px;
  /* 缓动：按手感命名（out 到达 / soft 落定 / glide 短移）；不用冲过头的曲线 */
  --e-out: cubic-bezier(.16, 1, .3, 1); --e-soft: cubic-bezier(.22, 1, .36, 1); --e-glide: cubic-bezier(.47, .2, .15, 1);
  --shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -22px rgba(38,48,42,.35);
  --window-shadow: 0 30px 60px -36px rgba(27,42,34,.5);
}
/* 深色：整页一起换成 iOS 深色系统色（底 #000、卡片 #1c1c1e / #2c2c2e、文字白与系统灰、强调色系统绿，小标签系统红）。 */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #000; --paper-2: #1c1c1e; --paper-3: #2c2c2e; --field: #2c2c2e;
    --ink: #fff; --ink-2: #d1d1d6; --muted: #aeaeb2;
    --moss: #30d158; --moss-2: #34c759; --on-moss: #000; --moss-text: #30d158; --leaf: #30d158; --leaf-text: #30d158; --leaf-soft: rgba(48,209,88,.18);
    --gold: #ffd60a; --gold-text: #ffd60a; --line: #38383a; --line-strong: #48484a;
    --red: #ff453a; --red-text: #ff6961; --red-soft: rgba(255,69,58,.14);
    --topbar-bg: rgba(0,0,0,.82); --dot: #48484a; --rest: #8e8e93;
    --shadow: 0 0 0 1px rgba(255,255,255,.04); --window-shadow: 0 0 0 1px rgba(255,255,255,.06);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--moss-text); }
/* 跳到某一节时，留出顶栏（和手机上小路线条）的高度 */
[id] { scroll-margin-top: calc(var(--topbar-h, 57px) + 12px); }
@media (max-width: 900px) { [id] { scroll-margin-top: calc(var(--topbar-h, 57px) + 56px); } }
.skip { position: absolute; left: -999px; top: 8px; display: inline-flex; align-items: center; min-height: 44px; background: var(--moss); color: var(--on-moss); padding: 0 14px; border-radius: 8px; z-index: 30; }
.skip:focus { left: 8px; }

/* 顶栏 */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 12px clamp(16px, 4vw, 48px); background: var(--topbar-bg); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.topbar-brand { display: inline-flex; align-items: center; min-height: 44px; }
.topbar-brand img { height: 32px; width: auto; }
.topbar .btn-small { margin-left: auto; }
/* 小路线条：和大路线条、各节小标题同一套名字。滚过大路线条后缓慢淡入，当前这一节点亮（苔绿字 + 下面一道短线）。 */
.flow-mini { position: absolute; left: 50%; top: 0; bottom: 0; translate: -50% 0; display: flex; align-items: center; gap: 2px; font-size: 14px; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.flow-past .flow-mini { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.flow-mini a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .3s ease; }
.flow-mini a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--moss-text); transform: scaleX(0); transition: transform .45s var(--e-soft); }
.flow-mini a:hover { color: var(--ink); }
.flow-mini a.is-active { color: var(--moss-text); font-weight: 700; }
.flow-mini a.is-active::after { transform: none; }

/* 按钮 */
.btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 999px; padding: 12px 22px; font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: var(--cursor-hand, pointer); transition: transform .18s ease, background .18s ease; }
.btn-small { padding: 8px 16px; font-size: 13px; background: var(--moss); color: var(--on-moss); }
/* 顶栏按钮本身 44px 高（顶栏 68px，留得下），不靠伪元素撑点击区。 */
.topbar .btn-small { position: relative; flex-shrink: 0; gap: .3em; white-space: nowrap; min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn-primary { background: var(--moss); color: var(--on-moss); box-shadow: 0 10px 24px -12px rgba(27,42,34,.7); }
/* 插件还没开放时，Obsidian 是描边的次要按钮：不抢「开始使用」的头号位置 */
.btn-outline { background: transparent; color: var(--moss-text); border-color: currentColor; }
.btn-outline:hover { background: var(--leaf-soft); }
.obsidian-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.other-os { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-2); text-underline-offset: 3px; }
.other-os:hover { color: var(--ink); }
.step-note { max-width: 28em; font-size: 14px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.btn-primary:hover { transform: translateY(-1px); background: var(--moss-2); }
/* 按钮里的小字（「电脑版 · 去官网下载」「iPhone / iPad 版」）：和下面说明文字同色同级，13px，不再半透明 */
.btn-sub { font-weight: 400; font-size: 13px; }
.btn-outline .btn-sub { color: var(--muted); }
.btn-primary .btn-sub { opacity: .88; }
.btn-plugin { background: var(--paper-2); color: var(--ink-2); border-color: var(--line); }
.btn-plugin:disabled { cursor: not-allowed; }
.btn-plugin img { width: 24px; height: 24px; border-radius: 6px; }
.badge { font-size: 12px; font-weight: 600; color: var(--moss-text); background: var(--leaf-soft); border-radius: 999px; padding: 3px 9px; }
.btn-plugin[hidden], .plugin-soon[hidden] { display: none; }
/* 插件还没开放下载：一枚安静的状态牌，不是按钮 */
.plugin-soon { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px dashed var(--line-strong); border-radius: 999px; font: 600 15px/1.2 var(--sans); color: var(--ink-2); background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.plugin-soon img { width: 24px; height: 24px; border-radius: 6px; }
/* 隐私小标签：点了跳到「隐私与同步」 */
/* 无 AI 承诺：挂在副标题下面的一行字，不是按钮也不是第三个选项。苔绿字、叶形小记号，点开去「隐私」一节。 */
.trust-line { margin: 20px 0 0; font: 500 16px/1.5 var(--sans); }
.trust-line a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--moss-text); text-decoration: none; }
.trust-line a span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--e-soft); }
.trust-line a:hover span, .trust-line a:focus-visible span { background-size: 100% 1px; }
.trust-line svg { width: 18px; height: 18px; flex-shrink: 0; fill: color-mix(in srgb, var(--leaf) 28%, transparent); stroke: var(--leaf); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.btn-mini { padding: 6px 14px; font-size: 13px; background: var(--moss); color: var(--on-moss); }
.btn-mini.pressed { transform: scale(.94); background: var(--leaf); }
.fine { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* 首屏：写作在正中（正文窗口和字数），灵感卡片、剧情卡在旁边，终点是一本排好的书（「月亮」封面） */
.hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "copy stage" "install stage"; column-gap: clamp(24px, 4vw, 64px); row-gap: 8px; align-content: center; align-items: center; min-height: calc(100svh - 58px); padding: clamp(32px, 5vw, 64px) clamp(16px, 5vw, 72px) clamp(20px, 3vw, 36px); max-width: 1320px; margin: 0 auto; }
.hero-wordmark { width: min(437px, 100%); height: auto; }
.hero h1 { font: 700 clamp(34px, 4.4vw, 58px)/1.18 var(--serif); letter-spacing: .02em; margin: 26px 0 12px; text-wrap: balance; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); margin: 0; text-wrap: balance; }
.hero-copy { grid-area: copy; align-self: end; }
.hero-stage { grid-area: stage; }
.hero-install { grid-area: install; align-self: start; margin-top: 32px; }
/* 首屏桌面：两步上下排，编号就是顺序 */
.hero .install-steps { flex-direction: column; align-items: flex-start; gap: 22px; }
.hero .install-step + .install-step::before { content: none; }
/* 两步下载：① 写作软件 → ② 插件 */
.install-steps { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 40px; margin: 0; padding: 0; counter-reset: none; }
.install-step { position: relative; display: grid; justify-items: start; gap: 8px; }
.install-step + .install-step::before { content: "→"; position: absolute; left: -29px; top: 44px; font: 600 20px/1 var(--sans); color: var(--muted); }
.step-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.step-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 12px/1 var(--sans); background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.install-step.is-first .step-num { background: var(--moss); color: var(--on-moss); border-color: var(--moss); }
.install-step.is-first .btn { padding: 12px 24px; font-size: 16px; }
/* 首屏图：正文窗口居中，灵感卡片在右上，剧情卡在左下，终点是一本「花园档案」封面的书。只有字段和留白，没有故事内容。 */
.hero-stage { position: relative; aspect-ratio: 1.08; min-height: 380px; }
.hero-editor { position: absolute; left: 2%; top: 9%; width: 70%; height: 62%; display: flex; flex-direction: column; }
.hero-editor-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 30%; }
.hero-lines { display: grid; align-content: start; gap: 13px; padding: 24px 26px 0; }
.hero-lines b { width: 34%; height: 13px; margin-bottom: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.hero-lines i { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.hero-lines i:first-of-type, .hero-lines .is-end + i { margin-left: 2em; }
.hero-lines .is-end { width: 58%; margin-bottom: 8px; }
.hero-outline { display: grid; align-content: start; gap: 10px; padding: 18px 14px; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--paper-3) 45%, transparent); }
.hero-outline span { font: 600 12px/1 var(--sans); letter-spacing: .08em; color: var(--muted); margin-bottom: 2px; }
.hero-outline i { position: relative; height: 38px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.hero-outline i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--mark); }
.hero-outline i::after { content: ""; position: absolute; left: 12px; right: 22%; top: 50%; height: 6px; translate: 0 -50%; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.hero-editor-foot, .editor-foot { display: flex; justify-content: flex-start; gap: 20px; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--paper-3); font: 12.5px/1.4 var(--sans); color: var(--muted); white-space: nowrap; }
.hero-editor-foot b, .editor-foot b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-editor-foot b { margin-right: 6px; font-weight: 600; }
.hero-idea { position: absolute; right: 0; top: 0; width: 40%; transform: rotate(1.5deg); }
.hero-stage .hero-idea .m-card-body { font-size: 16px; line-height: 1.8; }
.hero-plot { position: absolute; left: 0; bottom: 3%; width: 38%; transform: rotate(-1.2deg); }
.hero-stage .hero-hint { margin: 8px 0 12px; font: 16px/1.6 var(--serif); color: var(--muted); }
.hero-hint .caret { margin-left: 2px; }
.hero-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--moss-text); }
.hero-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.hero-plot header { align-items: center; }
.hero-stage .hero-plot .hero-hint { margin: 2px 0 4px; font-size: 15px; }
.hero-book { position: absolute; right: 6%; bottom: 3%; width: 31%; aspect-ratio: 1000 / 1419; }
.hero-book::after { content: ""; position: absolute; left: 6%; right: -4%; bottom: -5%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(27,42,34,.32), transparent); z-index: -1; }
.hero-cover { position: absolute; inset: 0; border-radius: 2px 5px 5px 2px; overflow: hidden; background: #ece6d8; color-scheme: light;
  /* 书口和书根露出的一叠纸边 + 落在桌上的影子 */
  box-shadow: 1px 1px 0 #f4efe3, 2px 2px 0 #d9d0bd, 3px 3px 0 #f2ece0, 4px 4px 0 #d4cab6, 5px 5px 0 #efe8da, 6px 6px 0 #c9bea8, 0 30px 44px -22px rgba(27,42,34,.6); }
.hero-cover::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 8%; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(0,0,0,.2) 45%, rgba(255,255,255,.07) 75%, transparent); pointer-events: none; }
.hero-cover picture, .hero-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 路线条：七步，和下面各节的小标题同名、同顺序（写正文最大）。当前在看的一节点亮。 */
.flow { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 72px) clamp(24px, 4vw, 48px); }
.flow ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr 1fr 1fr 1fr; align-items: center; gap: 22px; margin: 0; padding: 0; }
.flow li { position: relative; text-align: center; }
.flow li + li::before { content: "→"; position: absolute; left: -13px; top: 50%; translate: -50% -50%; font: 600 16px/1 var(--sans); color: var(--muted); }
.flow a { display: grid; justify-items: center; gap: 2px; min-height: 44px; padding: 12px 6px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.flow a:hover { background: var(--paper-2); }
.flow b { font: 700 19px/1.3 var(--serif); }
.flow span { font-size: 13px; line-height: 1.5; color: var(--muted); }
.flow .is-core a { padding: 16px 12px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.flow .is-core b { font-size: 27px; color: var(--moss-text); }
.flow .is-core span { color: var(--ink-2); }
.flow li.is-active b { color: var(--moss-text); }

/* 卡片 */
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.card p { margin: 6px 0 0; font: 15px/1.7 var(--serif); }
.card strong { display: block; font: 700 18px/1.3 var(--serif); margin-top: 4px; }
.card-kicker { font-size: 12px; color: var(--leaf-text); font-weight: 600; letter-spacing: .06em; }
.card-plot { border-top: 4px solid var(--gold); }
/* Cards show their form only: kicker bar, title bar and text lines, no sample wording. */
.card-blank { display: grid; align-content: start; gap: 10px; }
.card-blank i { display: block; height: 8px; border-radius: 4px; background: var(--line); }
.card-blank i:first-child { width: 34%; height: 6px; background: color-mix(in srgb, var(--leaf) 45%, transparent); }
.card-blank i:nth-child(2) { width: 62%; height: 12px; background: color-mix(in srgb, var(--ink, #26302a) 18%, transparent); }
.card-blank i:nth-child(3) { width: 88%; }
.card-blank i:nth-child(4) { width: 72%; }
.card-plot.card-blank i:first-child { background: color-mix(in srgb, var(--gold) 55%, transparent); }

/* 叙事场景 */
.scene { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1320px; margin: 0 auto; padding: clamp(56px, 9vw, 120px) clamp(16px, 5vw, 72px); }
.scene-wide { grid-template-columns: 1fr; }
.scene-wide .scene-copy { text-align: center; }
/* 各节小标题：同一个样式、同样居中，名字和路线条一致 */
.step { font-size: 14px; letter-spacing: .14em; color: var(--leaf-text); font-weight: 700; margin: 0 0 10px; }
.scene h2 { font: 700 clamp(28px, 3.6vw, 46px)/1.2 var(--serif); margin: 0; text-wrap: balance; }
.scene-visual { min-width: 0; }
.scene-wide .scene-visual { margin-top: 36px; }

.window { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--window-shadow); overflow: hidden; }
.window-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--paper-3); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.window-bar span { margin-left: 8px; }

/* 记灵感：上面是输入框，保存后下面多一张灵感卡片（卡面同首屏和插件：小标题、正文、# 标签） */
.collect-visual { display: grid; justify-items: center; gap: 22px; }
.capture { width: min(620px, 100%); text-align: left; }
.capture-field { margin: 16px 18px 12px; min-height: 64px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); font: 18px/1.7 var(--serif); color: var(--ink); }
.inline-tag { margin-left: 2px; padding: 1px 6px; border-radius: 6px; background: var(--leaf-soft); color: var(--moss-text); font-family: var(--sans); font-size: .82em; white-space: nowrap; }
.caret { display: inline-block; width: 2px; height: 1.1em; background: var(--leaf); vertical-align: -3px; animation: blink 1s steps(1) infinite; animation-play-state: paused; }
.scene.is-visible .caret { animation-play-state: running; }
@keyframes blink { 50% { opacity: 0; } }
.capture-actions { display: flex; justify-content: space-between; align-items: center; padding: 0 18px 16px; }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--leaf-soft); color: var(--moss-text); }
.idea-cards { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: min(1080px, 100%); margin: 0; padding: 0; text-align: left; }
/* 灵感卡片：照插件素材卡（materials.css 的 .m-card）——白底、圆角 16px、双层阴影，深色模式也保持白卡；字号比插件略大，网页上读得清。 */
.m-card { --m-ink: #2a150a; --m-muted: #705b4d; --m-alt: #f6f6f6; --m-line: #ececec; display: block; padding: 20px; background: #fff; border-radius: 1rem; box-shadow: rgba(50,50,93,.25) 0 6px 12px -2px, rgba(0,0,0,.3) 0 3px 7px -3px; color: var(--m-ink); text-align: left; }
.m-card-body { margin: 0 0 12px; font: 15px/1.9 var(--sans); color: var(--m-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.m-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 9px; }
.m-tags span { border-radius: 4px; padding: 2px 7px; background: var(--m-alt); color: var(--m-muted); font-size: 12px; }
.m-card-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 5px; padding-top: 7px; border-top: 1px solid var(--m-line); }
.m-card-meta { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 12px; color: var(--m-muted); }
.m-card-meta time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-card-binding-count { display: inline-flex; align-items: center; gap: 3px; }
.m-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--m-muted); }
.m-card svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-card svg.m-card-favorite { width: 17px; height: 17px; fill: #666; stroke: none; }
.m-card svg.m-card-delete { width: 14px; height: 14px; }
.m-text-button { display: inline-flex; align-items: center; gap: 3px; padding: 3px 2px; font-size: 12px; color: var(--m-muted); white-space: nowrap; border-radius: 6px; transition: background-color .3s ease, color .3s ease; }
.m-text-button.pressed { background: #efe9e4; }
.m-text-button.is-done { color: #3b6149; }
.idea-card { opacity: 0; transition: opacity 1.1s var(--e-soft); }
/* 四张一样高（跨行也一样），底部那一行贴底。 */
.idea-cards { grid-auto-rows: 1fr; }
.idea-card { display: flex; flex-direction: column; }
.idea-card .m-card-bottom { margin-top: auto; }
.idea-card.in { opacity: 1; }
.no-js .idea-card { opacity: 1; }
@media (max-width: 1000px) { .idea-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(620px, 100%); } }

/* 剧情卡 */
.chapter-head { display: flex; align-items: baseline; justify-content: center; gap: 6px; font: 600 18px/1.4 var(--serif); margin-bottom: 18px; }
.chapter-head .crumb { color: var(--muted); font-weight: 400; }
.chapter-head .count { margin-left: 12px; font: 14px var(--sans); color: var(--muted); }
/* 横向滑动：键盘聚焦后可用方向键滚；放不下时下方出现一行「左右滑动」 */
[data-scroller]:focus-visible { outline: 2px solid var(--moss-text); outline-offset: 4px; border-radius: 8px; }
.scroll-hint { display: none; margin: 6px 0 0; font-size: 14px; color: var(--muted); text-align: right; }
.scroll-hint.is-shown { display: block; }
.plot-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; min-height: 150px; align-items: stretch; }
.plot-card { min-height: 132px; align-self: stretch; }
.plot-card { opacity: 0; transform: translateY(8px); transition: opacity .8s var(--e-soft), transform .9s var(--e-soft); }
.plot-card.in { opacity: 1; transform: none; }
.plot-card.selected { box-shadow: var(--shadow), 0 0 0 2px var(--leaf); }
/* 剧情卡卡面：字段与顺序同插件 OutlineStoryCard（左侧边色 = 主要重要标签） */
.story-card { position: relative; display: grid; align-content: start; gap: 8px; padding: 14px 14px 14px 19px; overflow: hidden; text-align: left; }
.story-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--mark, var(--gold)); }
.story-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.story-card header strong { margin: 0; font: 700 17px/1.3 var(--serif); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-scene { flex-shrink: 0; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.story-card .story-summary { margin: 0; font: 14.5px/1.6 var(--serif); color: var(--ink); }
.story-change { display: grid; gap: 3px; margin: 0; padding-top: 7px; border-top: 1px solid var(--line); font: 12.5px/1.5 var(--serif); }
.story-change div { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 6px; }
.story-change dt { color: var(--muted); font-size: 11.5px; letter-spacing: .08em; }
.story-change dd { margin: 0; color: var(--ink-2); }
.story-tags, .story-context, .story-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.story-tag { padding: 1px 8px; border-radius: 999px; background: var(--pill); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.story-more { padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.story-context { font-size: 12px; color: var(--muted); }
.story-context span + span { padding-left: 6px; border-left: 1px solid var(--line); }
.story-status { font-size: 12px; color: var(--muted); }
.story-status i { font-style: normal; }
.story-status.is-done { color: var(--moss-text); }
.hero-stage .hero-plot { position: absolute; }
.story-card.is-compact { gap: 6px; padding: 12px 12px 12px 17px; }
.story-card.is-compact .story-summary { font-size: 13.5px; line-height: 1.55; }
.idea-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.idea-meta small { font-size: 11.5px; color: var(--muted); }
/* 卡内字段按 标题 → 剧情 → 标签 顺序淡入 */
.plot-card > * { opacity: 0; transition: opacity .4s ease; }
.plot-card.in > * { opacity: 1; }
.plot-card.in > :nth-child(2) { transition-delay: .12s; }
.plot-card.in > :nth-child(n+3) { transition-delay: .24s; }

/* 正文 + 细纲 */
.editor-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 460px; }
.manuscript { padding: 28px 36px; max-height: 520px; overflow: auto; font: 17px/2 var(--serif); border-right: 1px solid var(--line); }
.manuscript h3 { font: 700 26px/1.3 var(--serif); margin: 0 0 14px; }
.manuscript p { margin: 0 0 1em; text-indent: 2em; }
.manuscript .comment { color: var(--ink-2); }
.outline { padding: 20px; background: var(--paper); }
.outline-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
.outline ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.outline li { padding: 10px 12px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); font: 14px/1.6 var(--serif); opacity: 0; transform: translateY(6px); transition: opacity .8s var(--e-soft), transform .8s var(--e-soft); }
.outline li.in { opacity: 1; transform: none; }
.outline li b { display: block; font-size: 15px; }
.outline li.selected { border-color: var(--leaf); box-shadow: 0 0 0 2px var(--leaf-soft); }
.link-chip { margin-top: 14px; padding: 12px; border-radius: 10px; border: 1px dashed var(--leaf); font: 13px/1.6 var(--serif); gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.link-chip.in { opacity: 1; transform: none; }
.link-chip span { font: 700 11px var(--sans); color: var(--leaf-text); margin-right: 4px; }
.link-chip em { display: block; font: 600 12px var(--sans); color: var(--moss-text); font-style: normal; margin-top: 4px; }
/* 写作时的功能：插件里有的才写 */
.write-features { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; text-align: left; }
.write-features li { display: grid; }
.write-features button { position: relative; display: grid; align-content: start; gap: 4px; width: 100%; padding: 14px 16px 38px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; font: inherit; text-align: left; color: inherit; cursor: var(--cursor-hand, pointer); transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.write-features button:hover { border-color: var(--leaf); }
.write-features button:focus-visible { outline: 2px solid var(--moss-text); outline-offset: 2px; }
.write-features button[aria-pressed="true"] { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft); }
.write-features b { font: 700 16px/1.4 var(--serif); color: var(--ink); }
.write-features span { font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.wf-play { position: absolute; left: 16px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--sans); font-style: normal; color: var(--moss-text); }
.wf-play::before { content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
[aria-pressed="true"] .wf-play::after { content: "· 正在演示"; font-weight: 500; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 演示层：盖在正文窗口上，只放一张小卡或右侧一栏，演完停住；下一次点卡片时换掉。 */
.window.editor { position: relative; }
.write-demo { position: absolute; inset: 41px 0 37px; pointer-events: none; }
.write-demo > * { opacity: 0; transition: opacity .5s var(--e-soft), translate .5s var(--e-soft); translate: 0 8px; }
.write-demo > .in { opacity: 1; translate: none; }
.wd-card { position: absolute; left: 50%; top: 50%; width: min(340px, calc(100% - 32px)); margin: 0; transform: translate(-50%, -50%); padding: 18px 20px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -24px rgba(27,42,34,.45); font-size: 14px; }
.write-demo.is-focus::before, .write-demo.is-import::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--paper) 55%, transparent); opacity: 0; animation: wd-veil .5s var(--e-soft) forwards; }
@keyframes wd-veil { to { opacity: 1; } }
.wd-side { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; padding: 20px; background: var(--paper); border-left: 1px solid var(--line); display: grid; align-content: start; gap: 12px; font-size: 14px; }
/* 专注这一程：照插件 FocusSurface.svelte 的结构、文字和比例做的小一号（窗口只有约 520px 高）；手机上用插件原尺寸。 */
.wd-fs { --fs-soft: color-mix(in srgb, var(--paper-3) 55%, var(--paper-2)); --fs-notice: #89785e; position: absolute; left: 50%; top: 50%; width: min(330px, calc(100% - 24px)); transform: translate(-50%, -50%); display: flex; flex-direction: column; box-sizing: border-box; padding: 14px 22px 8px; background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -28px rgba(27,42,34,.5); font-family: var(--serif); text-align: center; }
.wd-fs [hidden] { display: none !important; }
.wd-fs header { display: flex; align-items: center; justify-content: space-between; }
.wd-fs header b { font-size: 17px; font-weight: 600; letter-spacing: .4px; }
.wd-fs-tools { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.wd-fs-help { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; font: 12px/1 var(--serif); font-style: normal; }
.wd-fs-close { font: 24px/1 var(--sans); font-style: normal; }
.wd-fs-switch { display: flex; width: 196px; align-self: center; gap: 5px; margin-top: 10px; padding: 4px; border-radius: 30px; background: var(--fs-soft); }
.wd-fs-switch span { flex: 1; padding: 6px 10px; border-radius: 24px; color: var(--muted); font-size: 13px; transition: background .25s ease, color .25s ease; }
.wd-fs-switch span.on { background: var(--paper-2); color: var(--moss-text); font-weight: 600; }
.wd-fs-live { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 37px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.wd-fs-live i { width: 6px; height: 6px; border-radius: 50%; background: #91a580; }
.wd-fs-live span { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--line); }
.wd-fs-plant { position: relative; height: 128px; margin: 6px auto 0; width: 100%; max-width: 300px; overflow: hidden; isolation: isolate; }
.wd-fs-plant > span { position: absolute; pointer-events: none; }
.wd-fs-halo { inset: 0 -4px; background: radial-gradient(ellipse at 50% 53%, #e9efdfb0 0%, #eef2e67d 42%, #f3f5ec32 69%, transparent 83%); }
.wd-fs-sun { width: 72px; height: 72px; left: calc(50% + 12px); top: 0; background: radial-gradient(circle, #f3e5bd9c 0%, #f7edcf77 31%, #fbf2db27 60%, transparent 77%); }
.wd-fs-shadow { left: 50%; bottom: 8px; width: 120px; height: 24px; transform: translateX(-50%); background: radial-gradient(ellipse, #dce4cd95 0%, #e5eadf42 48%, transparent 72%); }
.wd-fs-plant img { position: absolute; left: 50%; bottom: 14px; height: 108px; width: auto; transform: translateX(-50%); transform-origin: 50% 100%; }
.wd-fs-plant.is-planted img { animation: wd-fs-plant .7s var(--e-out); }
@keyframes wd-fs-plant { from { scale: .92; } 60% { scale: 1.04; } to { scale: 1; } }
.wd-fs-label { display: block; font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.wd-fs-duration { display: inline-flex; align-items: baseline; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.15; }
.wd-fs-value { font-size: 46px; letter-spacing: -2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.wd-fs-duration.is-running .wd-fs-value { font-size: 42px; letter-spacing: -1px; }
.wd-fs-duration i { width: 6px; height: 6px; align-self: center; margin-left: 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.wd-fs-deadline { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
.wd-fs-goal { display: flex; align-items: center; gap: 9px; width: min(100%, 236px); margin: 10px auto 0; font-size: 12px; color: var(--muted); }
.wd-fs-goal b { margin-left: auto; width: 100px; padding: 7px 10px; border-radius: 12px; background: var(--fs-soft); box-shadow: 4px 4px 12px color-mix(in srgb, var(--ink) 7%, transparent), -4px -4px 12px color-mix(in srgb, var(--paper-2) 80%, transparent); font-size: 16px; font-weight: 400; color: var(--ink); }
.wd-fs-goal small { font-size: 12px; }
.wd-fs-progress { width: min(100%, 236px); margin: 10px auto 0; }
.wd-fs-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; font-size: 12px; color: var(--muted); }
.wd-fs-count { font-size: 22px; color: var(--ink); }
.wd-fs-count small { font-size: 12px; color: var(--muted); }
.wd-fs-track { height: 5px; border-radius: 20px; background: var(--fs-soft); }
.wd-fs-task { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.wd-fs-task span { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line); font-size: 10px; }
.wd-fs-notice { margin: 10px 0 0; font-size: 11px; color: var(--fs-notice); }
.wd-fs-primary { display: block; width: min(100%, 200px); margin: 8px auto 0; padding: 10px 12px; border-radius: 14px; background: var(--moss); color: var(--on-moss); font-size: 15px; font-weight: 600; letter-spacing: 2px; transition: scale .2s ease, filter .2s ease; }
.wd-fs-primary.pressed { scale: .95; filter: brightness(1.15); }
.wd-fs-secondary { margin-top: 6px; font-size: 12px; color: var(--muted); }
.wd-fs-more { margin-top: 2px; font-size: 11px; color: var(--muted); }
.wd-fs-more::before { content: "▸ "; }
.wd-fs-garden { margin-top: 6px; padding: 4px 0; font-size: 11px; color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .wd-fs { --fs-notice: #c1b194; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
  .wd-fs-halo { opacity: .13; } .wd-fs-sun { opacity: .18; } .wd-fs-shadow { opacity: .3; }
}
@media (max-width: 640px) {
  .wd-fs { padding: 22px 22px 14px; }
  .wd-fs header b { font-size: 19px; }
  .wd-fs-switch { margin-top: 20px; } .wd-fs-switch span { padding: 9px 12px; font-size: 14px; }
  .wd-fs-plant { height: 200px; } .wd-fs-plant img { height: 168px; bottom: 22px; }
  .wd-fs-sun { width: 104px; height: 104px; } .wd-fs-shadow { width: 170px; height: 34px; bottom: 12px; }
  .wd-fs-value { font-size: 61px; } .wd-fs-duration.is-running .wd-fs-value { font-size: 57px; }
  .wd-fs-goal, .wd-fs-progress { margin-top: 20px; } .wd-fs-task { margin-top: 14px; } .wd-fs-notice { margin-top: 20px; }
  .wd-fs-primary { margin-top: 12px; padding: 13px 12px; font-size: 16px; } .wd-fs-garden { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .wd-fs-plant.is-planted img { animation: none; } }
.wd-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.wd-btn { justify-self: start; display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; margin-top: 4px; border-radius: 999px; background: var(--moss); color: var(--on-moss); font: 600 13px/1 var(--sans); transition: scale .2s ease, filter .2s ease; }
.wd-btn.pressed { scale: .95; filter: brightness(1.15); }
.wd-card .wd-btn { margin-top: 14px; }
.wd-modes, .wd-versions, .wd-tree { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.wd-modes li, .wd-versions li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); transition: border-color .35s ease, box-shadow .35s ease; }
.wd-side .wd-versions li { background: var(--paper-2); }
.wd-modes li.on, .wd-versions li.on { border-color: var(--leaf); box-shadow: 0 0 0 2px var(--leaf-soft); }
.wd-modes b, .wd-versions b { font: 600 15px/1.4 var(--serif); color: var(--ink); }
.wd-modes small, .wd-versions small { font-size: 12px; color: var(--muted); }
.wd-versions li.is-new { opacity: 0; transition: opacity .5s ease; }
.wd-versions li.is-new.in { opacity: 1; }
.wd-help { margin: 0; font-size: 12.5px; color: var(--muted); }
.wd-note { margin: 10px 0 0; font-size: 13px; color: var(--moss-text); opacity: 0; transition: opacity .5s ease; }
.wd-note.in { opacity: 1; }
.wd-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; font: 600 13px/1.3 var(--sans); color: var(--ink-2); opacity: 0; translate: 0 -6px; transition: opacity .45s ease, translate .45s var(--e-soft); }
.wd-file::before { content: "DOCX"; padding: 2px 5px; border-radius: 4px; background: var(--leaf-soft); color: var(--moss-text); font-size: 10px; }
.wd-file.in { opacity: 1; translate: none; }
.wd-tree { margin-top: 12px; gap: 2px; }
.wd-tree li { padding: 3px 0 3px 18px; font: 15px/1.5 var(--serif); color: var(--ink); opacity: 0; transition: opacity .4s ease; position: relative; }
.wd-tree li::after { content: "✓"; position: absolute; right: 0; font: 600 12px var(--sans); color: var(--moss-text); }
.wd-tree li.is-vol { padding-left: 0; font-weight: 700; }
.wd-tree li.is-vol::after { content: none; }
.wd-tree li.in { opacity: 1; }
.wd-side .m-card { opacity: 0; translate: 0 8px; transition: opacity .5s var(--e-soft), translate .5s var(--e-soft); }
.wd-side .m-card.in { opacity: 1; translate: none; }
.manuscript .wd-diff { border-radius: 3px; background: transparent; transition: background-color .6s ease; }
.manuscript .wd-diff.in { background: color-mix(in srgb, var(--gold) 26%, transparent); }
.manuscript .wd-diff.is-restored { background: var(--leaf-soft); }
.wd-timer, .focus-link { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--moss-text); font-weight: 600; }
.wd-timer { margin-left: auto; opacity: 0; transition: opacity .5s ease; }
.wd-timer[hidden], .focus-link[hidden] { display: none; }
.wd-timer.in { opacity: 1; }
.wd-timer::before, .focus-link::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
.focus-link:not([hidden]) { animation: wd-veil .8s var(--e-soft) both; opacity: 0; }

/* 排日程：新版「创作日程」——没有窗口外壳：上面四个分段按钮，下面一块底板，中间一张大的今天卡，
   这一周和右边的面板退到次要位置。只有一个强调色（浅色 = 苔绿，深色 = 白），绿色只用在小的状态字上。
   状态由 [data-planner][data-state] 切换：today / missed / plan / queue。圆角统一：底板 24、卡片 16、小块 12。 */
.planner {
  --sc-panel: color-mix(in srgb, var(--paper-3) 45%, var(--paper));
  --sc-card: var(--paper-2);
  --sc-accent: var(--moss); --sc-on-accent: var(--on-moss);
  --sc-track: color-mix(in srgb, var(--ink) 9%, transparent);
  --sc-tint: color-mix(in srgb, var(--moss) 9%, transparent);
  --sc-ok: var(--moss-text);
  --sc-groove: color-mix(in srgb, var(--paper-3) 80%, var(--paper));
  --sc-ledge: var(--moss-2);
  --sc-leaf: var(--leaf);
  --sc-flag: var(--moss-text);
  --sc-plank: color-mix(in srgb, var(--paper-3) 60%, var(--ink) 18%);
  --sc-plank-shade: color-mix(in srgb, var(--ink) 10%, transparent);
  --sc-mark: color-mix(in srgb, var(--leaf) 30%, transparent);
  --sc-r1: 24px; --sc-r2: 16px; --sc-r3: 12px;
  position: relative; max-width: 1080px; margin: 0 auto; text-align: left;
}
@media (prefers-color-scheme: dark) {
  .planner {
    --sc-panel: var(--paper-2); --sc-card: var(--paper-3);
    --sc-accent: var(--ink); --sc-on-accent: var(--paper);
    --sc-track: color-mix(in srgb, var(--ink) 14%, transparent);
    --sc-tint: color-mix(in srgb, var(--ink) 9%, transparent);
    --sc-ok: var(--leaf);
    --sc-groove: var(--paper);
    --sc-ledge: color-mix(in srgb, var(--ink) 55%, var(--paper));
    --sc-flag: var(--leaf);
    --sc-plank: var(--line-strong);
    --sc-plank-shade: color-mix(in srgb, var(--paper) 60%, transparent);
    --sc-mark: color-mix(in srgb, var(--leaf) 28%, transparent);
  }
}
/* 标题只在词组之间换行（手机上不会把「一场」拆开） */
#plan-title .ph, #organize-title .ph { display: inline-block; }

/* 分段按钮：一条凹进去的槽，一颗会滑动的「滑块」（像插件的昼夜开关），按下时轻轻一压。 */
.sc-switch { display: grid; justify-items: center; gap: 12px; margin-bottom: 18px; }
.sc-tabs { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 16px; background: var(--sc-groove); box-shadow: inset 0 1px 3px color-mix(in srgb, var(--ink) 14%, transparent), 0 1px 0 color-mix(in srgb, var(--paper-2) 70%, transparent); isolation: isolate; }
.sc-tabs::before { content: ""; position: absolute; z-index: -1; left: 0; top: 4px; bottom: 4px; width: var(--tw, 0); translate: var(--tx, 0) 0; border-radius: 12px; background: var(--sc-card); box-shadow: 0 1px 0 color-mix(in srgb, var(--paper-2) 80%, transparent) inset, 0 2px 6px color-mix(in srgb, var(--ink) 16%, transparent); opacity: 0; transition: translate .42s var(--e-out), width .42s var(--e-out), opacity .2s ease; }
.sc-tabs.has-thumb::before { opacity: 1; }
.sc-tabs button { position: relative; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: transparent; font: 500 15px/1 var(--sans); color: var(--ink-2); cursor: var(--cursor-hand, pointer); overflow: hidden; transition: color .3s ease, scale .15s ease; -webkit-tap-highlight-color: transparent; }
.sc-tabs button:hover { color: var(--ink); }
.sc-tabs button:active { scale: .95; }
.sc-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.sc-tabs:not(.has-thumb) button[aria-selected="true"] { background: var(--sc-card); }
.sc-tabs button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
/* 自动演示时，选中按钮下面一道细线跟着走；滚出屏幕就停住。手机上不自动切换，也不画这道线。 */
/* 四句卖点叠在同一格：换句子时高度不变 */
.sc-pitch { display: grid; list-style: none; margin: 0; padding: 0; text-align: center; }
.sc-pitch li { grid-area: 1 / 1; transition: opacity .35s ease; }
.sc-pitch li[hidden] { display: block; visibility: hidden; opacity: 0; }
.sc-pitch span { font-size: 15px; color: var(--muted); }

/* 底板：左边今天卡 + 这一周，右边按情况换的面板（面板叠在同一格，切换时不跳） */
.sc-stage { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 28px; border-radius: var(--sc-r1); background: var(--sc-panel); }
.sc-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; min-width: 0; }
.sc-stage h3 { margin: 0; font: 600 16px/1.4 var(--serif); color: var(--ink); }
.sc-note { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.sc-note b { font-weight: 600; color: var(--ink-2); }

/* 今天卡：标题、一大一小两个数、一根会长的茎 */
.sc-today { position: relative; padding: 26px 28px 22px; border-radius: 20px; background: var(--sc-card); box-shadow: 0 1px 0 color-mix(in srgb, var(--paper-2) 80%, transparent) inset, 0 18px 40px -24px color-mix(in srgb, var(--ink) 35%, transparent); }
.sc-today-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
/* 日期放在卡片右上角，小字；下面的花往下让一行。 */
.sc-date { position: absolute; top: 24px; right: 28px; font-size: 14px; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-today-top .sc-flower { margin-top: 26px; }
.sc-eyebrow { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; font-size: 14px; color: var(--muted); }
.sc-today .sc-title { margin: 6px 0 4px; font: 700 28px/1.3 var(--serif); }
.sc-sum { margin: 0; font: 15px/1.75 var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-flower { display: grid; justify-items: center; align-content: start; gap: 4px; width: 108px; text-align: center; font-size: 13px; line-height: 1.45; color: var(--muted); white-space: pre-line; }
.sc-flower img { width: 46px; height: 46px; object-fit: contain; }
.sc-flower.is-bud img { filter: grayscale(1) opacity(.45); }
/* 数字一行：大数 + 斜着的「/ 目标」，不是一排「小标签 + 大数」的格子 */
.sc-progress { margin-top: 18px; }
.sc-big { display: flex; align-items: baseline; gap: 10px; margin: 0; font-variant-numeric: tabular-nums; }
.sc-big strong { font: 700 72px/.95 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.sc-of { font: 500 20px/1 var(--serif); color: var(--ink-2); }
/* 进度：一根茎从左边长出来，头上一粒芽；目标那一端是一面小旗 */
.sc-bar { position: relative; height: 12px; margin: 16px 0 10px; border-radius: 12px; background: var(--sc-track); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent); }
.sc-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--sc-accent) 70%, transparent), var(--sc-accent)); transform-origin: 0 50%; scale: var(--p, 0) 1; transition: scale .5s var(--e-out); }
.sc-tip { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50% 50% 50% 4px; rotate: -45deg; background: var(--sc-leaf); box-shadow: 0 0 0 3px var(--sc-card), 0 3px 8px color-mix(in srgb, var(--ink) 25%, transparent); transition: left .5s var(--e-out); }
.sc-bar::after { content: ""; position: absolute; right: -2px; top: -7px; width: 4px; height: 26px; border-radius: 2px; background: var(--sc-flag); }
.sc-left { margin: 0; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sc-progress[hidden], .sc-focus[hidden], .sc-text[hidden], .sc-pill[hidden] { display: none; }
.sc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
/* 主按钮：有厚度的一块，悬停抬起一点、按下压到底，箭头往前探 */
.sc-primary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px 0 22px; border: 0; border-radius: 14px; background: var(--sc-accent); color: var(--sc-on-accent); font: 600 15px/1 var(--sans); cursor: var(--cursor-hand, pointer); box-shadow: 0 4px 0 var(--sc-ledge), 0 12px 20px -12px color-mix(in srgb, var(--ink) 70%, transparent); transition: translate .14s ease, box-shadow .14s ease; -webkit-tap-highlight-color: transparent; }
.sc-primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate .25s var(--e-out); }
.sc-primary:hover { translate: 0 -2px; box-shadow: 0 6px 0 var(--sc-ledge), 0 16px 24px -12px color-mix(in srgb, var(--ink) 70%, transparent); }
.sc-primary:hover svg { translate: 3px 0; }
.sc-primary:active { translate: 0 4px; box-shadow: 0 0 0 var(--sc-ledge), 0 4px 8px -6px color-mix(in srgb, var(--ink) 60%, transparent); }
/* 专注：像插件的专注按钮，一颗小番茄钟；开着时外圈慢慢转 */
.sc-focus { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 12px; border-radius: 14px; background: var(--sc-track); font: 500 14px/1 var(--sans); color: var(--ink-2); transition: scale .2s ease, color .3s ease, background-color .3s ease; }
.sc-focus::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: .55; }
.sc-focus.pressed { scale: .94; }
.sc-focus.is-on { color: var(--ink); background: var(--sc-tint); }
.sc-focus.is-on::before { border-color: var(--sc-ok); border-top-color: transparent; opacity: 1; animation: sc-spin 2.4s linear infinite; }
@keyframes sc-spin { to { rotate: 360deg; } }
.sc-text { min-height: 48px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; font: 500 14px/1 var(--sans); color: var(--ink-2); cursor: var(--cursor-hand, pointer); text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color .25s ease, color .25s ease; }
.sc-text:hover { color: var(--ink); text-decoration-color: currentColor; }
.sc-primary:focus-visible, .sc-text:focus-visible, .sc-choices button:focus-visible, .sc-wk button:focus-visible, .sc-items button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
/* 全书一行：书名、一根细丝带、到哪天截稿，最后一枚「能按时写完」的小印章 */
.sc-pace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 22px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-strong); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-book { color: var(--ink); font: 600 15px var(--serif); }
.sc-ribbon { position: relative; width: 64px; height: 6px; border-radius: 6px; background: var(--sc-track); overflow: hidden; }
.sc-ribbon i { position: absolute; inset: 0; background: var(--sc-ok); transform-origin: 0 50%; scale: var(--p, 0) 1; }
.sc-words b { font-weight: 700; color: var(--ink); }
.sc-ok { margin-left: auto; padding: 3px 9px; border: 1.5px solid currentColor; border-radius: 6px; font: 700 14px/1.3 var(--serif); color: var(--sc-ok); letter-spacing: .08em; rotate: -4deg; box-shadow: inset 0 0 0 2px var(--sc-card), inset 0 0 0 3px color-mix(in srgb, currentColor 35%, transparent); }
.sc-flash { animation: sc-flash .7s var(--e-soft); }
@keyframes sc-flash { from { opacity: .3; } }

/* 这一周：一层花架，七天的盆花排在同一块木板上；今天那一盆底下一圈光，休息日是一圈虚线的空位 */
.sc-week header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin-bottom: 8px; padding: 0 4px; }
.sc-streak { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; margin: 0 2px; border-radius: 50%; background: var(--sc-accent); color: var(--sc-on-accent) !important; font: 700 13px/1 var(--sans); }
.sc-shelf { position: relative; border-radius: 14px; }
.sc-days { position: relative; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0 6px; }
.sc-days::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 34px; height: 6px; border-radius: 3px; background: var(--sc-plank); box-shadow: 0 3px 0 var(--sc-plank-shade); pointer-events: none; }
.sc-day { position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; min-height: 128px; padding: 6px 2px 6px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sc-d { display: flex; gap: 4px; align-items: baseline; font-size: 14px; color: var(--muted); white-space: nowrap; }
.sc-d b { font-weight: 700; color: var(--ink-2); }
.sc-pot { align-self: end; width: 100%; height: 66px; margin-bottom: 5px; object-fit: contain; object-position: 50% 100%; transition: translate .3s var(--e-out); }
.sc-day:hover .sc-pot { translate: 0 -3px; }
.sc-pot.sc-sprout { height: 44px; }
.sc-pot.is-empty { height: 34px; }
.sc-day .sc-w { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.sc-day.is-today { background: var(--sc-tint) padding-box; border-radius: 999px 999px 14px 14px; }
.sc-day.is-today .sc-d { padding: 1px 8px; border-radius: 999px; background: var(--sc-accent); color: var(--sc-on-accent); }
.sc-day.is-today .sc-d b { color: inherit; }
.sc-day.is-today .sc-w { color: var(--ink); font-weight: 700; }
.sc-day.is-miss .sc-w { color: var(--muted); }
.sc-day.is-rest { grid-template-rows: auto 1fr auto; }
.sc-day.is-rest::after { content: ""; grid-row: 2; align-self: end; width: 34px; height: 30px; margin-bottom: 7px; border: 1.5px dashed var(--line-strong); border-radius: 6px 6px 12px 12px; }
.sc-day.is-rest .sc-w { grid-row: 3; color: var(--muted); }

/* 右边的面板（三块叠在同一格，只露出当前这一块） */
.sc-side { display: grid; min-width: 0; padding-top: 2px; }
.sc-pane { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s .3s; }
.planner[data-state="today"] .sc-queue, .planner[data-state="queue"] .sc-queue, .planner[data-state="missed"] .sc-missed, .planner[data-state="plan"] .sc-plan { display: block; visibility: visible; opacity: 1; transition: opacity .3s ease .05s, visibility 0s; }
.sc-pane header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.sc-pane > h3 { margin-bottom: 4px; }

/* 接下来的场次 */
.sc-items { list-style: none; margin: 0; padding: 0; }
/* 场次排成一叠小卡片：左边一道剧情卡的颜色（同插件 tag 色），选中的浮起来。 */
.sc-cards { display: grid; gap: 8px; }
@media (min-width: 901px) {
  /* 右栏跟左边今天卡一样高、底边对齐：卡片均分高度，不留一截空白。 */
  .planner .sc-queue, .planner[data-state] .sc-queue { align-self: start; display: flex; flex-direction: column; min-height: calc(var(--today-h, 2px) - 2px); }
  .sc-queue .sc-cards { flex: 1; grid-auto-rows: 1fr; }
  .sc-queue .sc-cards li { display: flex; }
  .sc-queue .sc-cards li > button { flex: 1; }
}
.sc-cards button { position: relative; overflow: hidden; padding-left: 18px; background: color-mix(in srgb, var(--sc-card) 70%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent); transition: background-color .3s ease, translate .25s var(--e-out), box-shadow .3s ease; }
.sc-cards button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--edge, var(--sc-accent)); }
.sc-cards button:hover { background: var(--sc-card); translate: 0 -2px; box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--ink) 45%, transparent); }
.sc-cards button:active { translate: 0 0; }
.sc-items button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 7px 12px; border: 0; border-radius: var(--sc-r3); background: transparent; font: inherit; color: inherit; text-align: left; cursor: var(--cursor-hand, pointer); transition: background-color .3s ease, translate .25s var(--e-out); }
.sc-items button[aria-pressed="true"] { background: var(--sc-card); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--ink) 40%, transparent); }
.sc-item-text { display: grid; min-width: 0; flex: 1; }
.sc-item-text b { font: 500 15px/1.5 var(--serif); color: var(--ink-2); }
.sc-items button[aria-pressed="true"] b { font-weight: 700; color: var(--ink); }
.sc-item-text small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.sc-pill { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; background: var(--sc-accent); font-size: 13px; font-weight: 600; color: var(--sc-on-accent); white-space: nowrap; }
.sc-hint { margin: 8px 12px 0; font-size: 13px; color: var(--muted); }

/* 断了一天：差的字从左边一张小签上，一颗颗落到后面五个写作日的柱子上 */
.sc-flow { margin: 14px 0 16px; }
.sc-flow-src { display: inline-flex; align-items: baseline; gap: 12px; margin: 0 0 14px; padding: 8px 14px; border-radius: 10px 10px 10px 2px; background: var(--sc-card); font-size: 14px; color: var(--muted); box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--ink) 45%, transparent); }
.sc-flow-src b { font: 700 16px/1.4 var(--serif); color: var(--ink); transition: color .4s ease; }
.sc-flow-src.is-spent b { color: var(--muted); text-decoration: line-through 1.5px; }
.sc-flow-days { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 8px; height: 164px; margin: 0; padding: 0; border-bottom: 2px solid var(--sc-plank); }
.sc-chip { display: grid; grid-template-rows: auto auto auto; justify-items: center; align-content: end; gap: 3px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-chip b { font: 700 17px/1.2 var(--serif); color: var(--ink-2); }
.sc-col { display: grid; align-content: end; width: min(36px, 100%); }
.sc-col i { height: calc(var(--add, 0) * 1px); border-radius: 8px 8px 0 0; background: var(--sc-leaf); transition: height .45s var(--e-out); }
.sc-col i + i { height: 44px; border-radius: 0; background: color-mix(in srgb, var(--sc-accent) 22%, var(--sc-card)); }
.sc-chip:not(.is-up) .sc-col i + i { border-radius: 8px 8px 0 0; }
.sc-chip > span { padding-bottom: 4px; white-space: nowrap; }
.sc-chip.is-up b { color: var(--ink); }
.sc-chip small { font-size: 13px; font-weight: 700; color: var(--sc-ok); min-height: 1.3em; }
.sc-chip.is-today > span { color: var(--sc-ok); font-weight: 700; }
.sc-flow-tail { margin: 10px 0 0; min-height: 3.2em; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.sc-flow-tail b { font-weight: 700; color: var(--ink); }
.sc-drop { position: absolute; z-index: 3; padding: 2px 8px; border-radius: 9px; background: var(--sc-accent); color: var(--sc-on-accent); font: 600 13px/1.4 var(--sans); pointer-events: none; }
/* 三个办法：自己画的单选圆点，选中时圆点「啵」地一下长出来 */
.sc-choices { display: grid; gap: 6px; }
.sc-choices button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 50px; padding: 8px 14px 8px 12px; border: 0; border-radius: 14px; background: transparent; font: 500 15px/1.4 var(--sans); color: var(--ink-2); text-align: left; cursor: var(--cursor-hand, pointer); transition: background-color .3s ease, box-shadow .3s ease, translate .2s ease; }
.sc-choices button::before { content: ""; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); background: radial-gradient(circle, var(--sc-accent) 0 45%, transparent 48%) center / 0 0 no-repeat; transition: background-size .3s var(--e-out), box-shadow .3s ease; }
.sc-choices button small { font-weight: 400; font-size: 14px; color: var(--muted); }
.sc-choices button:hover { background: var(--sc-track); }
.sc-choices button:active { translate: 0 1px; }
.sc-choices button[aria-checked="true"] { background: var(--sc-card); color: var(--ink); font-weight: 600; box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--ink) 45%, transparent); }
.sc-choices button[aria-checked="true"]::before { box-shadow: inset 0 0 0 2px var(--sc-accent); background-size: 100% 100%; }
.sc-choices button[aria-checked="true"] small { color: var(--ink-2); }

/* 定截稿日：一句话写目标，七颗圆按钮选写作日，算式的结果用荧光笔划出来 */
.sc-goal { margin: 12px 0 2px; font: 500 16px/1.6 var(--serif); color: var(--ink-2); }
.sc-goal b { margin: 0 2px; padding: 0 2px; font: 700 22px/1.3 var(--serif); color: var(--ink); background: linear-gradient(transparent 62%, var(--sc-mark) 62%); }
.sc-label { margin: 16px 0 8px; font-size: 14px; color: var(--muted); }
.sc-wk { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-wk button { flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); font: 600 14px/1 var(--sans); color: var(--ink-2); cursor: var(--cursor-hand, pointer); transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, scale .15s ease; -webkit-tap-highlight-color: transparent; }
.sc-wk button:hover { box-shadow: inset 0 0 0 2px var(--sc-accent); }
.sc-wk button:active { scale: .88; }
.sc-wk button[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-on-accent); box-shadow: inset 0 -3px 0 var(--sc-ledge); }
.sc-calc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 6px; font-size: 15px; color: var(--ink-2); }
.sc-calc b { font: 700 22px/1.3 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-calc i { font-style: normal; font-size: 18px; color: var(--muted); }
.sc-per { padding: 2px 10px; border-radius: 10px; background: var(--sc-mark); color: var(--ink); }

@media (max-width: 900px) {
  .sc-stage { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; }
  .sc-side { padding: 0 4px; }
}
/* 手机：只看今天卡和这一周。今天卡和三块面板叠在同一格，点上面的分段按钮就在这一格里换，
   不自动切换；格子按最高的那一块定高，所以下面的内容永远不动。正文字号都不小于 14px。 */
@media (max-width: 560px) {
  .sc-switch { gap: 10px; margin-bottom: 14px; }
  .sc-tabs { display: flex; width: 100%; }
  .sc-tabs button { flex: 1; min-height: 46px; padding: 0 2px; font-size: 14px; }
  .sc-pitch { padding: 0 8px; }
  .sc-pitch span { margin: 0; font-size: 14px; }
  .sc-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "week"; margin-inline: -8px; padding: 12px 12px 16px; gap: 18px; border-radius: 22px; }
  .sc-main, .sc-side { display: contents; }
  .sc-today, .sc-pane { grid-area: card; align-self: stretch; min-width: 0; }
  .sc-week { grid-area: week; min-width: 0; }
  .sc-today { padding: 20px 18px 18px; transition: opacity .3s ease, visibility 0s; }
  .planner:not([data-state="today"]) .sc-today { visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s .2s; }
  .sc-pane { padding: 20px 16px 18px; border-radius: 20px; background: var(--sc-card); }
  .planner[data-state="today"] .sc-queue { visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s .2s; }
  .sc-today .sc-title { font-size: 24px; }
  .sc-flower { width: 56px; }
  .sc-flower img { width: 40px; height: 40px; }
  .sc-flower span { display: none; }
  .sc-big strong { font-size: 60px; }
  .sc-acts { gap: 10px; }
  .sc-acts .sc-text { display: none; }
  .sc-pace { gap: 6px 10px; }
  .sc-ok { margin-left: 0; }
  .sc-week header { padding: 0 2px; }
  .sc-shelf { margin: 0 -12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 12px; scrollbar-width: none; overscroll-behavior-x: contain; container-type: inline-size; }
  .sc-shelf::-webkit-scrollbar { display: none; }
  .sc-shelf:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -2px; box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--sc-accent) 18%, transparent); }
  .sc-days { display: flex; gap: 4px; width: max-content; padding: 0 12px; }
  /* 一行正好放下四天：默认停在「前两天 + 今天 + 明天」，左边从前天开始，不会被滚动到底卡住。 */
  .sc-day { flex: 0 0 max(64px, calc((100cqi - 36px) / 4)); scroll-snap-align: start; }
  .sc-date { top: 18px; right: 18px; }
  .sc-today-top .sc-flower { margin-top: 24px; }
  .sc-hint { display: none; }
  .sc-item-text small, .sc-pill, .sc-chip small, .sc-streak { font-size: 14px; }
  /* 面板本身就是一张卡：选中的场次、选中的办法、「差 393 字」小签改用浅一层的底色，不和卡片糊在一起 */
  .sc-items button[aria-pressed="true"], .sc-choices button[aria-checked="true"] { background: var(--sc-tint); box-shadow: none; }
  .sc-flow-src { background: var(--sc-panel); box-shadow: none; }
  .sc-flow-days { gap: 6px; }
  .sc-goal b { font-size: 20px; }
  .sc-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .sc-wk button { width: 100%; min-width: 44px; height: 44px; border-radius: 14px; }
  .sc-calc { font-size: 14px; }
  .sc-calc b { font-size: 20px; }
}
@media (max-width: 900px) {
  .wd-side { top: auto; left: 0; width: auto; border-left: 0; border-top: 1px solid var(--line); max-height: 72%; overflow: hidden; }
}
@media (max-width: 1080px) { .write-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 排版 */
.styles { display: flex; justify-content: center; gap: 10px; margin-bottom: 26px; }
/* 选样式：选中 = ✓ + 一圈柔和的光，不画框 */
.styles button { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; border: 0; background: var(--paper-2); border-radius: 999px; padding: 0 20px; font: 600 15px var(--sans); color: var(--ink-2); cursor: var(--cursor-hand, pointer); box-shadow: 0 1px 2px rgba(38,48,42,.08); transition: box-shadow .4s var(--e-soft), color .3s ease; }
.styles .tick { display: inline-block; width: 0; overflow: hidden; font-style: normal; color: var(--moss-text); opacity: 0; transition: width .3s var(--e-soft), opacity .3s ease; }
.styles button[aria-checked="true"] { color: var(--moss-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--leaf) 22%, transparent), 0 0 22px 2px color-mix(in srgb, var(--leaf) 45%, transparent); }
.styles button[aria-checked="true"] .tick { width: 1em; opacity: 1; }
.styles button:focus-visible { outline: 2px solid var(--moss-text); outline-offset: 3px; }
.spread { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); min-height: 220px; }
.page { position: relative; aspect-ratio: 148/210; background: #fff; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06), 0 22px 36px -24px rgba(38,48,42,.4); overflow: hidden; }
.page.fade-in { animation: fade-in .9s var(--e-soft) both; animation-delay: calc(var(--i) * 120ms); }
@keyframes fade-in { from { opacity: 0; } }
.page picture, .page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-label { position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; font-size: 13px; color: var(--muted); }
.page-frame { position: relative; }
[data-page-note] { margin-top: 36px; text-align: center; }

/* 成书 */
.book-poster { position: absolute; inset: 14% 12%; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transition: opacity .6s ease; }
.book-poster.hidden { opacity: 0; pointer-events: none; }
.poster-page { background: #fff; box-shadow: 0 24px 40px -26px rgba(38,48,42,.55); }
.poster-page.left { background: linear-gradient(90deg, #fff 88%, #ececea); }
.poster-page.right { background: linear-gradient(270deg, #fff 88%, #ececea); }

/* 印刷：一本可以转的书（平时停在封面上），上面是装帧切换，右边（手机在下面）是功能卡片。
   和整页同一套纸色、衬线字；红色只用在选中装帧的页数和「换封面」这类小标记上。 */
.pf-lead { margin: 12px 0 0; font-size: 16px; color: var(--muted); }
.mk {
  --mk-bg: var(--paper-2); --mk-card: var(--paper); --mk-ink: var(--ink); --mk-ink-2: var(--ink-2);
  --mk-muted: var(--muted); --mk-line: var(--line); --mk-pill: var(--paper-3); --mk-shadow: 0 1px 2px rgba(38,48,42,.06), 0 12px 30px -16px rgba(38,48,42,.3);
  --mk-accent: var(--red); --mk-accent-text: var(--red-text); --mk-accent-soft: var(--red-soft);
  position: relative; max-width: 1240px; height: clamp(560px, 47vw, 680px); margin: 0 auto; overflow: hidden; text-align: left; font-family: var(--serif);
  background: var(--mk-bg); color: var(--mk-ink); border: 1px solid var(--mk-line); border-radius: 24px;
}
@media (prefers-color-scheme: dark) { .mk { --mk-shadow: 0 0 0 1px rgba(255,255,255,.06); } }
/* 每种装帧和别的不一样在哪：一句话，跟着装帧切换 */
.mk-binding-note { position: absolute; z-index: 3; left: clamp(16px, 2.2vw, 28px); top: calc(clamp(16px, 2.2vw, 26px) + 58px); max-width: 30em; margin: 0; font-size: 15px; line-height: 1.6; color: var(--mk-ink-2); transition: opacity .5s ease; }
.mk-binding-note { display: flex; align-items: center; gap: 12px; }
.mk-binding-note b { color: var(--mk-ink); }
.bind-fig { flex: none; width: 56px; height: 36px; fill: none; stroke: var(--mk-ink-2); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.bind-fig .cover { stroke: var(--mk-ink); stroke-width: 2.6; }
.bind-fig .pin { stroke: var(--mk-accent); stroke-width: 2.4; }
.mk-binding-note.is-swap { opacity: 0; transition-duration: .2s; }
.mk-tabs { position: absolute; z-index: 3; left: clamp(16px, 2.2vw, 28px); top: clamp(16px, 2.2vw, 26px); display: inline-flex; gap: 2px; padding: 3px; background: var(--mk-pill); border-radius: 14px; font-family: var(--serif); }
.mk-tabs button { display: grid; justify-items: center; gap: 0; min-width: 84px; padding: 6px 14px 5px; border: 0; border-radius: 11px; background: none; color: var(--mk-ink-2); font: inherit; cursor: var(--cursor-hand, pointer); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.mk-tabs b { font-size: 15px; line-height: 1.35; }
.mk-tabs span { font: 500 12.5px/1.35 var(--sans); color: var(--mk-muted); font-variant-numeric: tabular-nums; }
.mk-tabs button[aria-selected="true"] { background: var(--mk-card); color: var(--mk-ink); box-shadow: 0 1px 3px rgba(38, 48, 42, .16); }
.mk-tabs button[aria-selected="true"] span { color: var(--mk-accent-text); }
.mk-tabs button:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 1px; }
.mk-stage { position: absolute; inset: 0; }
.mk-chip, .mk-tabs button { -webkit-tap-highlight-color: transparent; }
.mk-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.mk .book-poster { inset: 34% 52% 12% 10%; }
.mk-lines { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .5s ease; }
.mk-lines.is-shown { opacity: 1; transition-duration: .7s; }
/* 批注用铅笔绘图的样子：暖石墨色细线、小圆点、建筑制图式尺寸线（45° 斜点），标签像一张小纸签。 */
.mk { --mk-pencil: rgba(58, 54, 50, .62); --mk-pencil-ink: #3f3a35; --mk-tag: var(--paper); }
@media (prefers-color-scheme: dark) { .mk { --mk-pencil: rgba(229, 226, 220, .6); --mk-pencil-ink: #ebe7df; --mk-tag: #2c2c2e; } }
.mk-link { fill: none; stroke: var(--mk-pencil); stroke-width: 1; stroke-linecap: round; }
.mk-dot { fill: var(--mk-pencil-ink); }
.mk-dot-ring { fill: none; stroke: var(--mk-pencil); stroke-width: 1; }
.mk-dim { fill: none; stroke: var(--mk-pencil); stroke-width: .9; }
.mk-tick { stroke-width: 1.3; stroke: var(--mk-pencil-ink); }
.mk-dim-label, .mk-tag-label { font: 500 11.5px/1 var(--serif); fill: var(--mk-pencil-ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mk-dim-label { paint-order: stroke; stroke: var(--mk-tag); stroke-width: 4px; stroke-linejoin: round; }
.mk-tag { fill: var(--mk-tag); stroke: var(--mk-pencil); stroke-width: .8; }
/* 「装帧」的内页纸标签：大一号、暖金描边，前面一个纸张图标；第一次出现时外圈轻闪两下 */
.mk-tag-strong .mk-tag { fill: var(--paper-2); stroke: var(--gold); stroke-width: 1.4; filter: drop-shadow(0 6px 10px rgba(38,48,42,.18)); }
.mk-tag-strong .mk-tag-label { font: 600 16px/1 var(--serif); fill: var(--ink); letter-spacing: .02em; }
.mk-tag-strong .mk-tag-icon { fill: none; stroke: var(--gold-text); stroke-width: 1.5; stroke-linejoin: round; }
.mk-tag-ring { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; }
.mk-tag-strong.is-first .mk-tag-ring { animation: mk-ring 1.4s ease-out 2; }
@keyframes mk-ring { 0% { opacity: .7; } 100% { opacity: 0; } }
@media (max-width: 760px) { .mk-tag-strong .mk-tag-label { font-size: 14px; } }
.mk-bleed { fill: rgba(232, 205, 140, .42); stroke: none; }
.mk-bleed-edge { fill: none; stroke: var(--mk-pencil); stroke-width: .9; stroke-dasharray: 4 3; }
.mk-fold { fill: none; stroke: var(--mk-pencil); stroke-width: 1; stroke-dasharray: 6 4; }
.mk-hl { fill: rgba(232, 205, 140, .38); stroke: none; }
@media (prefers-color-scheme: dark) { .mk-bleed { fill: rgba(232, 205, 140, .3); } .mk-hl { fill: rgba(232, 205, 140, .26); } }
.mk-chips { position: absolute; z-index: 3; right: clamp(16px, 2.6vw, 36px); top: 50%; transform: translateY(-50%); width: min(340px, 31%); display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.mk-chips li { display: flex; }
.mk-chips[hidden] { display: none !important; }
.mk-chips li:nth-child(4n + 2) { padding-left: 26px; }
.mk-chips li:nth-child(4n + 3) { padding-left: 10px; }
.mk-chips li:nth-child(4n) { padding-left: 34px; }
.mk-chip {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; row-gap: 1px; width: 100%; padding: 10px 14px 11px;
  text-align: left; font-family: var(--serif); color: var(--mk-ink); background: var(--mk-card); border: 0; border-radius: 14px; box-shadow: var(--mk-shadow);
  cursor: var(--cursor-hand, pointer); transform-origin: 0 50%; transition: box-shadow .4s ease, opacity .5s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.mk-chip:hover { box-shadow: var(--mk-shadow), 0 0 0 1px var(--mk-line); }
.mk-chip:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
.mk-chip[aria-pressed="true"] { box-shadow: var(--mk-shadow), 0 0 0 1px var(--mk-pencil); }
@media (min-width: 761px) { .mk-chip[aria-pressed="true"] { transform: scale(1.03); } }
.mk-chip-static { cursor: var(--cursor-default, default); box-shadow: none; background: transparent; border: 1px dashed var(--mk-line); }
.mk-chip-static:hover { box-shadow: none; }
.mk-chip.is-dim { opacity: .6; }
.mk-cat { padding: 1px 7px; border-radius: 999px; background: var(--mk-pill); font: 600 11px/1.6 var(--sans); font-style: normal; color: var(--mk-muted); }
.mk-chip[data-chip="swap"] .mk-cat { background: var(--mk-accent-soft); color: var(--mk-accent-text); }
.mk-chip[aria-pressed="true"] .mk-cat { background: var(--mk-pencil-ink); color: var(--mk-card); }
.mk-chip b { font-size: 16px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.mk-chip span { grid-column: 1 / -1; font: 14px/1.6 var(--sans); color: var(--mk-muted); font-variant-numeric: tabular-nums; }
.mk.is-armed .mk-chip:not(.is-in) { opacity: 0; pointer-events: none; }
.mk-hint { position: absolute; z-index: 3; right: clamp(16px, 2.6vw, 36px); bottom: 14px; margin: 0; font-size: 13px; color: var(--mk-muted); }
/* 能再点一次换下一种时：提示变成一枚小胶囊，字大一号、颜色更深，前面一个循环图标 */
.mk-hint.is-cycle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--gold); border-radius: 999px; background: var(--paper-2); font-size: 16px; font-weight: 600; color: var(--ink); box-shadow: 0 8px 18px -12px rgba(38,48,42,.4); }
.mk-hint.is-cycle::before { content: "↻"; font-size: 17px; line-height: 1; color: var(--gold-text); }
.mk-hint.is-first { animation: mk-hint-pulse 1.3s ease-out 2; }
@keyframes mk-hint-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@media (max-width: 1080px) and (min-width: 761px) {
  .mk-chips { width: min(300px, 36%); }
  .mk-chips li { padding-left: 0 !important; }
  .mk-chip b { font-size: 15px; }
}
/* 手机：书在上，卡片在下方两列依次淡入；不转镜头。 */
@media (max-width: 760px) {
  .mk { display: flex; flex-direction: column; height: auto; padding: 12px 10px 14px; margin-inline: calc(-1 * clamp(4px, 2vw, 16px)); border-radius: 20px; }
  .mk-tabs { position: relative; left: auto; top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-tabs button { min-width: 0; min-height: 48px; padding: 6px 4px 5px; }
  .mk-binding-note { position: static; max-width: none; margin: 10px 4px 0; font-size: 14px; min-height: 3.2em; }
  .mk-stage { position: relative; inset: auto; aspect-ratio: 1 / .78; margin: 2px -10px 0; }
  .mk .book-poster { inset: 18% 14% 12%; }
  .mk-chips { position: relative; right: auto; top: auto; transform: none; width: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mk-chips li { padding-left: 0 !important; }
  .mk-chips li:last-child { grid-column: 1 / -1; }
  .mk-chips-fold li:last-child { grid-column: auto; }
  .mk-chip { padding: 9px 11px 10px; column-gap: 6px; border-radius: 12px; }
  .mk-chip b { grid-column: 1 / -1; font-size: 14.5px; }
  .mk-chip span { font-size: 14px; }
  .mk-hint { position: static; margin-top: 10px; text-align: center; font-size: 14px; }
  .mk-hint.is-cycle { display: flex; width: fit-content; margin-inline: auto; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-chip { transition: opacity .4s ease, box-shadow .2s ease; }
  .mk-lines { transition-duration: .2s; }
}

/* 花园：花架是这一节的主角（大、出血到右边缘）；年度数字是一句批注，统计是一行账目，规则是页边注。 */
.garden-scene { display: block; --pad: clamp(16px, 5vw, 72px); }
.garden-head { max-width: 760px; margin: 0 auto; text-align: center; }
.garden-head h2 { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.15; }
.garden { margin-top: clamp(8px, 2vw, 24px); text-align: left; }
/* 电脑上花架上方钉着一条异色花批注：花架整体下移，批注不压标题第二行 */
@media (min-width: 901px) { .garden { margin-top: clamp(56px, 6vw, 96px); } }
.garden dl, .garden dd { margin: 0; }
.garden-hero { position: relative; display: grid; grid-template-columns: minmax(330px, .64fr) minmax(0, 1.36fr); align-items: end; column-gap: clamp(16px, 3vw, 40px); }
.garden-note { position: relative; z-index: 2; padding-bottom: clamp(8px, 3vw, 40px); }
.cov-total-label { margin: 0; font: 15px/1.5 var(--serif); color: var(--ink-2); }
.cov-total { margin: 2px 0 0; display: flex; align-items: baseline; gap: 8px; }
.cov-total strong { font: 700 clamp(56px, 7.4vw, 108px)/.95 var(--serif); color: var(--moss); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cov-total span { font: 600 22px var(--serif); color: var(--ink-2); }
.ledger { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin-top: 20px !important; font-size: 13px; color: var(--muted); }
.ledger div { display: grid; gap: 1px; padding: 0 18px; border-left: 1px solid var(--line); white-space: nowrap; }
.ledger div:first-child { padding-left: 0; border-left: 0; }
.ledger dd b { font: 600 18px/1.3 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger dd small { margin-left: 2px; font-size: 12px; }
.garden-rules { list-style: none; counter-reset: rule; display: grid; gap: 12px; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0 0 0 16px; border-left: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 340px; }
.garden-rules li { counter-increment: rule; position: relative; }
.garden-rules li::before { content: counter(rule); position: absolute; left: -16px; top: 3px; width: 16px; transform: translateX(-50%); padding: 3px 0; font: italic 700 12px/1 var(--serif); color: var(--gold-text); background: var(--paper); text-align: center; }
.garden-rules b { display: block; font: 700 14px/1.5 var(--serif); color: var(--ink); }
.garden-stage { position: relative; margin: 0 calc(-1 * var(--pad) - max(0px, (100vw - 1320px) / 2)) 0 -4%; }
.garden-stage figcaption { display: grid; justify-items: end; gap: 2px; padding: 0 var(--pad) 0 0; margin-top: -2%; text-align: right; }
.bed-title { font: 600 18px/1.4 var(--serif); color: var(--ink-2); }
.bed-title strong { font-size: 26px; color: var(--moss); font-variant-numeric: tabular-nums; }
.bed-meta { font-size: 13px; color: var(--muted); }
.bed-stand { position: relative; aspect-ratio: 960 / 627; }
.bed-stand-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bed-slot { position: absolute; display: block; }
/* 花的样子不变；透明按钮叠在花上，居中撑到至少 44 × 44（按钮本身就有这么大，不靠伪元素）。 */
.bed-hit { position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%; padding: 0; border: 0; border-radius: 10px; background: none; cursor: var(--cursor-hand, pointer); -webkit-tap-highlight-color: transparent; }
.bed-hit:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.bed-slot.is-picked .flower { filter: drop-shadow(0 0 6px rgba(201,162,39,.55)); }
.bed-slot.is-picked .flower.is-shiny { filter: drop-shadow(0 0 7px rgba(201,162,39,.95)); }
/* 气泡：指着当前这盆花，写花名、普通或异色、怎么收到的。位置由 main.js 算好，只在花架范围里。 */
.bed-pin { position: absolute; z-index: 2000; display: grid; gap: 1px; width: max-content; max-width: min(250px, 70%); padding: 9px 13px 10px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); box-shadow: 0 10px 24px -14px rgba(38,48,42,.45); font-size: 12px; line-height: 1.5; color: var(--ink-2); text-align: left; pointer-events: none; opacity: clamp(0, calc((var(--grow, 1) - .85) * 8), 1); transition: left .35s var(--e-out), top .35s var(--e-out), opacity .3s ease; }
.bed-pin::after { content: ""; position: absolute; left: calc(var(--tail, 50%) - 6px); bottom: -6px; width: 10px; height: 10px; background: var(--paper-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); rotate: 45deg; }
.bed-pin.is-below::after { bottom: auto; top: -6px; rotate: 225deg; }
.bed-pin b { font: 700 14px/1.4 var(--serif); color: var(--ink); }
.bed-pin.is-shiny b { color: var(--gold-text); }
.bed-pin small { font-size: 12px; color: var(--muted); }
.bed-pin span { margin-top: 3px; }
.bed-slot .flower { --t: clamp(0, calc(var(--grow, 1) * (var(--n, 12) + 2) - var(--i, 0)), 1); display: block; width: 100%; height: auto; transform-origin: 50% 100%; scale: calc(.12 + .88 * var(--t)); opacity: var(--t); transition: scale .45s var(--e-out), opacity .3s ease; }
.is-regrow .bed-slot .flower { animation: sprout .9s var(--e-out) backwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes sprout { from { scale: .12; opacity: 0; } }
.flower.is-shiny { filter: drop-shadow(0 0 4px rgba(201,162,39,.8)); }
/* 月份：次要信息，平铺在一条细线下面 */
.garden-month { margin-top: clamp(48px, 7vw, 96px); padding-top: 22px; border-top: 1px solid var(--line); }
.month-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.months { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.months button { position: relative; flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 0; background: none; padding: 6px 9px 8px; font: 14px var(--sans); color: var(--muted); cursor: var(--cursor-hand, pointer); }
.months button::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 2px; border-radius: 2px; background: var(--moss); transform: scaleX(0); transition: transform .45s var(--e-out); }
.months button[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.months button[aria-selected="true"]::after { transform: none; }
.month-stats { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; color: var(--muted); }
.month-stats div { display: flex; align-items: baseline; gap: 6px; }
.month-stats div + div::before { content: ""; width: 1px; height: 12px; margin: 0 12px; background: var(--line); align-self: center; }
.month-stats dd b { font: 600 16px var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.month-stats dd small { margin-left: 2px; font-size: 12px; }
.calendar-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(16px, 3vw, 40px); }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar .dow { font-size: 11px; color: var(--muted); text-align: center; }
.day { position: relative; min-height: 62px; padding: 6px 7px; border-radius: 10px; background: var(--paper-2); border: 1px solid transparent; text-align: left; font: 12px/1.3 var(--sans); color: var(--ink-2); cursor: var(--cursor-hand, pointer); transition: border-color .2s ease, background .2s ease; }
.day:hover { border-color: var(--line); }
.day b { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.day .words { display: block; margin-top: 6px; font: 600 13px var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.day.rest { background: transparent; }
.day.rest .words { color: var(--rest); font-weight: 400; }
.day .pots { position: absolute; right: 6px; top: 5px; font: 600 11px var(--serif); color: #b0506b; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .day .pots { color: #ff6482; } }
.day .pots.has-shiny { color: var(--gold-text); }
.day.best b::after { content: "♛"; margin-left: 3px; color: var(--gold); }
.day[aria-pressed="true"] { border-color: var(--leaf); background: var(--field); }
.day.blank { background: transparent; cursor: var(--cursor-default, default); }
.harvest { padding: 4px 0 0 clamp(0px, 2vw, 24px); border-left: 1px solid var(--line); font-size: 14px; }
.harvest h3 { margin: 0 0 10px; font: 700 16px var(--serif); }
.harvest dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 12px; }
.harvest dt { color: var(--muted); }
.harvest dd { font-variant-numeric: tabular-nums; }
.day-blooms { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.day-blooms span { display: grid; justify-items: center; width: 56px; }
.day-blooms .flower { width: auto; height: 64px; }
.day-blooms small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.day-blooms small.is-shiny { color: var(--gold-text); font-weight: 600; }
/* 图鉴：一排标本架，花站在同一条细线上 */
.species { margin-top: clamp(48px, 6vw, 80px); }
.species header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.species h3 { margin: 0; font: 700 18px var(--serif); }
.species header span { font-size: 13px; color: var(--muted); }
.species ol { list-style: none; display: grid; grid-template-columns: repeat(17, minmax(62px, 1fr)); gap: 4px; margin: 0; padding: 0 0 8px; overflow-x: auto; scrollbar-width: thin; background: linear-gradient(var(--line), var(--line)) 0 72px / 100% 1px no-repeat; }
.species li { display: grid; justify-items: center; align-content: start; gap: 2px; }
.species li .flower { width: auto; max-width: 100%; height: 66px; object-fit: contain; object-position: 50% 100%; margin-bottom: 12px; }
.flower.is-locked { filter: brightness(0) opacity(.12); }
.species li b { font: 600 12px/1.25 var(--serif); text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.species li small { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* 手机上收起的「每月记录」「花种图鉴」：电脑上直接展开，按钮不显示 */
.garden-toggle { display: none; }
.species li.is-locked b { color: var(--muted); font-weight: 400; }

/* 结尾：把读者送回第一步 */
.finale { max-width: 1320px; margin: 0 auto; padding: clamp(72px, 12vw, 160px) clamp(16px, 5vw, 72px) clamp(64px, 9vw, 120px); text-align: center; }
.finale h2 { margin: 0 auto; max-width: 14em; font: 700 clamp(32px, 4.8vw, 64px)/1.15 var(--serif); text-wrap: balance; }
.finale h2 span { display: block; }
.finale h2 span + span { margin-top: .2em; font-size: .62em; font-weight: 600; color: var(--ink-2); }
.finale-sub { margin: 18px 0 0; font-size: 16px; letter-spacing: .04em; color: var(--muted); }
.finale-steps { justify-content: center; margin-top: 40px; text-align: left; }

/* 页脚 */
.footer { text-align: center; padding: 48px 16px 64px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
.footer img { margin: 0 auto 12px; height: 34px; width: auto; }
.footer p { margin: 4px 0; }
.footer .credits { margin-top: 20px; font-size: 12.5px; }
.footer .credits span + span { white-space: nowrap; }

/* 进场：只在第一次进入视口时出现，不随回滚倒放 */
.scene-copy, .scene-visual { opacity: 0; transform: translateY(12px); transition: opacity 1s var(--e-soft), transform 1.1s var(--e-soft); }
.scene.is-played .scene-copy, .scene.is-played .scene-visual { opacity: 1; transform: none; }
.scene.is-played .scene-visual { transition-delay: .12s; }
.no-js .scene-copy, .no-js .scene-visual { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .topbar .btn-small { margin-left: auto; min-height: 44px; padding: 0 18px; font-size: 14px; }
  /* 手机：小路线条是顶栏下面的一行，滚过大路线条才淡入 */
  .flow-mini { left: 0; right: 0; top: 100%; bottom: auto; translate: none; justify-content: safe center; gap: 0; padding: 0 8px; overflow-x: auto; scrollbar-width: none; background: var(--topbar-bg); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
  .flow-mini::-webkit-scrollbar { display: none; }
  .flow-mini a { padding: 0 8px; flex: 0 0 auto; }
  .flow-mini a::after { left: 8px; right: 8px; }
  /* 窄屏：标题、副标题、承诺居中在最上面，图紧挨在两步下载的正上方 */
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "install"; row-gap: 0; min-height: 0; padding-top: 40px; padding-bottom: 48px; }
  .hero-copy { text-align: center; }
  .hero-wordmark { display: none; }
  .hero h1 { margin-top: 0; }
  .hero .lede { max-width: 30em; margin-inline: auto; }
  .trust-line { display: flex; justify-content: center; }
  .hero-stage { min-height: 0; aspect-ratio: 1.3; width: min(100%, 640px); justify-self: center; margin-top: 32px; }
  .hero-install { margin-top: 32px; justify-self: center; }
  .install-steps { justify-content: center; }
  .hero .install-steps { align-items: center; }
  .hero .install-step { justify-items: center; }
  .write-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene { grid-template-columns: 1fr; }
  .plot-row { grid-template-columns: repeat(4, minmax(236px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; scroll-padding-inline: 4px; }
  .plot-card { scroll-snap-align: start; }
  .editor-body { grid-template-columns: 1fr; }
  .manuscript { max-height: 360px; border-right: 0; border-bottom: 1px solid var(--line); padding: 20px; }
  .spread { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .calendar-wrap { grid-template-columns: 1fr; }
  .harvest { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0 0; }
  /* 手机：先是一年写了多少字，再是花架，然后是规则；每月记录和图鉴收起来 */
  .garden-hero { grid-template-columns: 1fr; }
  .garden-note { display: contents; }
  .cov-summary { order: 1; padding-top: 12px; }
  .garden-stage { order: 2; margin: 20px calc(-1 * var(--pad)) 0; }
  .garden-rules { order: 3; }
  .garden-stage figcaption { justify-items: start; text-align: left; padding: 0 var(--pad); margin-top: -4%; }
  .garden-toggle { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 28px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); color: var(--moss-text); font: 600 15px var(--sans); cursor: var(--cursor-hand, pointer); }
  .garden-toggle + .garden-month, .garden-toggle + .species { display: none; margin-top: 20px; }
  .garden-toggle + .garden-month.is-open, .garden-toggle + .species.is-open { display: block; }
  .garden-month { border-top: 0; padding-top: 0; }
  .months button { min-height: 44px; padding: 0 12px; font-size: 15px; }
  .months button::after { left: 12px; right: 12px; bottom: 4px; }
  .month-bar { display: grid; }
  .month-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  .month-stats div + div::before { content: none; }
  .month-stats div { display: grid; gap: 0; }
  .calendar { gap: 4px; }
  .calendar .dow { font-size: 13px; }
  .day { min-height: 56px; min-width: 0; padding: 4px 5px; }
  .day b { font-size: 14px; }
  .day .words { margin-top: 4px; font-size: 13px; }
  .day .pots { font-size: 12px; top: 4px; right: 4px; }
  .day.best b::after { content: none; }
  .harvest { font-size: 15px; }
  .ledger, .month-stats { font-size: 14px; }
  .scroll-hint { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .caret { animation: none; }
}
@media (max-width: 560px) {
  /* 手机首屏：一张小构图（书 + 两张卡片），不放整组桌面界面 */
  .hero { padding-top: 32px; }
  .hero h1 { margin: 0 0 12px; font-size: clamp(30px, 8.6vw, 36px); }
  .lede { font-size: 16px; }
  .trust-line { margin-top: 12px; font-size: 14px; }
  .trust-line a { min-height: 44px; }
  .hero-stage { aspect-ratio: .95; margin-top: 24px; }
  .hero-install { margin-top: 24px; justify-self: stretch; }
  .install-steps, .hero .install-steps { flex-direction: column; align-items: stretch; gap: 32px; }
  .install-step { gap: 8px; justify-items: stretch; }
  .install-step .step-label { justify-self: center; }
  .obsidian-row { display: grid; justify-items: center; gap: 2px; }
  .install-step .btn, .plugin-soon { width: 100%; min-height: 52px; justify-content: center; }
  .install-step.is-first .btn { padding: 12px 20px; }
  .step-note { justify-self: center; text-align: center; }
  .finale-steps .install-step { text-align: center; }
  .plugin-soon { padding: 10px 16px; }
  .install-step + .install-step::before { content: "↓"; left: 50%; top: -26px; bottom: auto; transform: translateX(-50%); font-size: 16px; }
  .fine, .chapter-head .count { font-size: 14px; }
  .pf-lead { font-size: 16px; }
  .idea-card { padding: 16px; }
  .capture-field { font-size: 16px; min-height: 84px; }
  .hero-editor { display: none; }
  .hero-book { right: 3%; top: 3%; bottom: auto; width: 38%; }
  .hero-idea { left: 0; right: auto; top: 5%; width: 56%; padding: 14px; transform: rotate(-1.5deg); z-index: 1; }
  .hero-stage .hero-idea .m-card-body { margin-bottom: 6px; font-size: 14px; line-height: 1.7; }
  .hero-idea .m-tags { margin: 2px 0 6px; }
  .hero-idea .m-card-meta { min-height: 22px; }
  .hero-plot { left: 12%; bottom: 3%; width: 56%; transform: rotate(1deg); z-index: 1; }
  .hero-stage .hero-plot .hero-hint { font-size: 14px; }
  .write-features { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .write-features li { padding: 12px 14px; }
  .plot-row { grid-template-columns: repeat(4, 82vw); gap: 12px; margin-inline: calc(-1 * clamp(16px, 5vw, 72px)); padding-inline: clamp(16px, 5vw, 72px); scroll-padding-inline: clamp(16px, 5vw, 72px); }
}
@media (max-width: 760px) {
  /* 手机：七步排成两行（四个加三个），只留名字，按顺序编号；不画箭头，免得挤 */
  .flow { padding-bottom: 28px; }
  .flow ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; counter-reset: flow; }
  .flow li { flex: 0 0 calc((100% - 18px) / 4); }
  .flow li { counter-increment: flow; }
  .flow li + li::before { content: none; }
  .flow a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
  .flow a::before { content: counter(flow); font: 600 12px/1 var(--sans); color: var(--muted); }
  .flow span { display: none; }
  .flow b { font-size: 15px; white-space: nowrap; }
  .flow a { gap: 4px; padding: 4px 3px; }
  .flow .is-core a { padding: 4px 6px; box-shadow: none; }
  .flow .is-core b { font-size: 17px; }
  .finale-steps { width: min(340px, 100%); margin-inline: auto; }
}

/* ── 动效（js/motion.js）：只有 html.motion 时才隐藏初始状态；减少动态 / 无脚本时一切直接显示。
   只做缓慢淡入：位移不超过 12px，时长 0.8–1.2 s，不飞入、不旋转、不回弹。 ── */
.motion [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 1s var(--e-soft), transform 1.1s var(--e-soft); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion [data-reveal="stagger"] { opacity: 1; transform: none; }
.motion [data-reveal="stagger"] > * { opacity: 0; transform: translateY(8px); transition: opacity .9s var(--e-soft), transform 1s var(--e-soft); transition-delay: calc(var(--k, 0) * 120ms + 120ms); }
.motion [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }
.no-js .scene-copy, .no-js .scene-visual { opacity: 1; transform: none; }

/* 首屏：文字先到，下载区紧跟着出现；正文窗口、两张卡片和书依次淡入，之后不再动 */
.motion [data-hero]:not(.is-in) :is(.hero-wordmark, h1, .lede, .trust-line, .hero-install, .hero-editor, .hero-idea, .hero-plot, .hero-book) { opacity: 0; }
.motion [data-hero].is-in :is(.hero-wordmark, h1, .lede, .trust-line, .hero-install, .hero-editor, .hero-idea, .hero-plot, .hero-book) { animation: rise 1s var(--e-soft) backwards; }
.motion [data-hero].is-in h1 { animation-delay: .08s; }
.motion [data-hero].is-in .lede { animation-delay: .16s; }
.motion [data-hero].is-in .trust-line { animation-delay: .24s; }
.motion [data-hero].is-in .hero-install { animation-delay: .3s; }
.motion [data-hero].is-in .hero-editor { animation-duration: 1.2s; animation-delay: .2s; }
.motion [data-hero].is-in .hero-idea { animation-delay: .45s; }
.motion [data-hero].is-in .hero-plot { animation-delay: .6s; }
.motion [data-hero].is-in .hero-book { animation-duration: 1.2s; animation-delay: .75s; }
@keyframes rise { from { opacity: 0; translate: 0 12px; } }

/* 各节进场：同一个动作（淡入加 12px 上浮），只是节奏略有不同 */
.motion :is(#collect, #organize, #plan, #link, #book) .scene-copy { transition: opacity 1s var(--e-soft), transform 1.1s var(--e-soft); }
.motion :is(#collect, #organize, #plan, #link, #book) .scene-visual { transform: translateY(12px); transition: opacity 1.1s var(--e-soft), transform 1.2s var(--e-soft); }
.motion :is(#collect, #organize, #plan, #link, #book).is-played :is(.scene-copy, .scene-visual) { opacity: 1; transform: none; }

@media (max-width: 900px) {
  /* 手机：动作更短、更轻 */
  .motion [data-reveal] { transform: translateY(8px); transition-duration: .8s, .9s; }
  .motion :is(#collect, #organize, #plan, #link, #book) .scene-visual { transform: translateY(8px); transition-duration: .8s, .9s; }
}
@media (prefers-reduced-motion: reduce) {
  .bed-slot .flower { scale: 1; opacity: 1; }
}
/* 手机上底栏只留一行：专注中时先收起「细纲 · 4 场」，倒计时出现时收起「专注中」那一条。 */
@media (max-width: 640px) {
  .editor-foot { gap: 14px; overflow: hidden; }
  .editor-foot.has-focus > span:nth-child(2) { display: none; }
  .editor-foot.has-timer .focus-link { display: none; }
}
/* 首屏：标题上方一行小字，说明这是什么。 */
/* 「这是什么」一行：次要字（灰、常规字重），不和 H1 抢；按词组断行，不留孤字。 */
.product-kind { margin: 18px 0 -6px; font: 400 14px/1.6 var(--sans); letter-spacing: .02em; color: var(--muted); text-wrap: balance; }
.nw { display: inline-block; white-space: nowrap; }
@media (max-width: 900px) { .product-kind { margin: 0 0 10px; } }

/* 鼠标指针：Phosphor 四叶草（默认）+ 手指（可点的地方），MIT（许可证随站放在指针文件夹的 licenses 里）。
   只给有鼠标的设备（触屏不受影响）。SVG 优先，不支持 SVG 指针的浏览器用 32px PNG，再不行回到系统指针。
   四叶草的热点在四片叶子交汇的中心；手指的热点在食指指尖。 */
@media (hover: hover) and (pointer: fine) {
  :root {
    --cursor-default: url("assets/cursor/clover.svg") 16 15, url("assets/cursor/clover-32.png") 16 15, auto;
    --cursor-hand: url("assets/cursor/hand.svg") 14 2, url("assets/cursor/hand-32.png") 14 2, pointer;
    cursor: var(--cursor-default);
  }
  :where(a[href], button:not(:disabled), [role="button"], [role="tab"], summary, label[for], select, .bed-hit, [data-demo], .mk-chip:not(.mk-chip-static)) { cursor: var(--cursor-hand); }
  :where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, [contenteditable]:not([contenteditable="false"]), .manuscript, .capture-field) { cursor: text; }
}