/* ============================================================
   纸墨信笺 · 第四版
   一张摊开的信，右侧是「信 / 页 / 跋」，没有卡片、没有汉堡。
   功能栏（此刻/换肤/昼夜/导航/我的）、导航凹角、勾选项三件，
   与另外三套共用 shared/chrome.css + chrome.js；本页只写纸张、竖排与印章。
   最后留下的那张纸，只装你自己写的话、你挑的照片或旧底片。
   ============================================================ */
.paper{
  --paper:#f7f8f3; --paper-2:#ffffff; --paper-3:#dcebf2;
  --ink:#191e18; --ink-2:#5a7a8e; --ink-3:#7c8a7c;
  --seal:#E0D457; --line:rgba(41,38,32,.15);
  --app-bg:var(--paper); --desk:#256081;
  /* 卡面落款专用字：悠然楷（已内置，6,955 字 / CJK 基本区 6,766）。
     老板导入新字体时：把文件放 pwa/src/assets/fonts/import.woff2，
     再把下面这条改成 --font-card:"SQ Import","Youran Kai",var(--font-serif);
     并在文件末尾补一段 @font-face（参照 618 行 Youran Kai 那两条），
     最后 node tools/make-dist.cjs 把新字体带进 PRECACHE —— 只改这一行不够。 */
  --font-card:system-ui,"PingFang SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  position:relative; color:var(--ink); background:var(--paper);
  font-family:var(--font-serif);
  transition:background .45s ease, color .45s ease;
}
.paper[data-night="1"]{
  --paper:#151310; --paper-2:#1d1a15; --paper-3:#26221b;
  --ink:#ece2cc; --ink-2:#b9ad96; --ink-3:#8b8170;
  --seal:#d15a41; --line:rgba(236,226,204,.16);
}
body{ background:#e7e9e2; }

/* 纸：纤维 / 光斑 / 老化边，全 CSS */
.paper::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:none;
  mix-blend-mode:multiply; transition:opacity .45s ease;
}
.paper[data-night="1"]::before{
  background:
    radial-gradient(120% 80% at 84% 2%,rgba(255,226,178,.1),transparent 48%),
    radial-gradient(90% 70% at 0 100%,rgba(255,226,178,.07),transparent 62%),
    repeating-linear-gradient(93deg,rgba(255,240,210,.009) 0 1px,transparent 1px 7px);
  mix-blend-mode:screen;
}
.paper::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  box-shadow:none;
}
.paper[data-night="1"]::after{ box-shadow:inset 0 0 90px rgba(0,0,0,.6),inset 0 0 22px rgba(0,0,0,.5); }

/* 方格纸底纹（2026-10-29 选型 A）
   48px 主格 + 12px 细格；径向遮罩：中心 80%，58% 处 42%，88% 处消失。
   单独一层，不动 paper::before 的光斑与纤维，也不占任何布局。 */
.paper-grid{ position:absolute; display:none;
  -webkit-mask-image:radial-gradient(130% 110% at 50% 34%,rgba(0,0,0,.8) 22%,rgba(0,0,0,.42) 58%,transparent 88%);
  mask-image:radial-gradient(130% 110% at 50% 34%,rgba(0,0,0,.8) 22%,rgba(0,0,0,.42) 58%,transparent 88%);
  transition:opacity .45s ease;
}
.paper[data-night="1"] .paper-grid{
  background-image:
    repeating-linear-gradient(90deg,rgba(236,226,204,.01) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(0deg,rgba(236,226,204,.01) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(90deg,rgba(236,226,204,.004) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(0deg,rgba(236,226,204,.004) 0 1px,transparent 1px 12px);
}

/* 装订线 */
.binding{ position:absolute; left:7px; top:0; bottom:0; width:2px; z-index:1;
  background:linear-gradient(180deg,transparent,rgba(41,38,32,.18) 7%,rgba(41,38,32,.18) 93%,transparent); }
.paper[data-night="1"] .binding{ background:linear-gradient(180deg,transparent,rgba(236,226,204,.14) 7%,rgba(236,226,204,.14) 93%,transparent); }
.binding i{ position:absolute; left:-3px; width:8px; height:8px; border-radius:50%;
  background:var(--paper-3); box-shadow:inset 0 1px 2px rgba(41,38,32,.4); }
.binding i:nth-child(1){ top:12%; } .binding i:nth-child(2){ top:32%; }
.binding i:nth-child(3){ top:52%; } .binding i:nth-child(4){ top:72%; }
.binding i:nth-child(5){ top:90%; }

/* 页眉：刊头。上方让出系统状态栏（--sq-top），不再压到手机时间下面。 */
.masthead{ position:absolute; left:24px; right:24px; top:var(--sq-top,26px); height:32px; z-index:9;
  display:flex; align-items:center; gap:8px; }
.mini-seal{ width:20px; height:20px; flex:none; border:1px solid var(--seal); color:var(--seal);
  border-radius:2px; display:grid; place-items:center; font-size:8px; letter-spacing:.02em;
  transform:rotate(-3deg); opacity:.86; }
.masthead .name{ font-size:11px; letter-spacing:.32em; color:var(--ink-2); white-space:nowrap; }
.masthead .date{ margin-left:auto; font-size:9px; letter-spacing:.14em; color:var(--ink-3); white-space:nowrap; }
/* 导航的骨骼/凹角/选中态在 shared/chrome.css 的 .sq-nav 里，四套共用；
   这里只留本套自己的纸面颜色：槽要比纸深一阶，选中页与纸面同色才能真正连上去。 */
.paper .sq-nav{ --q-track:var(--paper-3); --q-face:var(--paper); --q-bg:var(--paper-2);
  --q-ink:var(--ink); --q-ink-3:var(--ink-3); --q-sel-ink:var(--seal); --q-mark:#f6efe2; }

/* 批注：信/页/跋 收进右侧竖直栏（纸墨专属；共享横条留给 forms，这里只覆盖位置与排法）。
   沿用 Spacious74 radio-inputs 凹角：选中页从槽里凸向正文，左缘上下各挖一块槽色缺口。 */
.paper .sq-nav{
  left:auto; right:9px; top:calc(var(--sq-top,26px) + 128px); bottom:72px;
  flex-direction:column; align-items:stretch; gap:6px;
  padding:0 6px;
  background:var(--paper-3);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-right:0;
  border-radius:8px 0 0 8px;
}
.paper .sq-nav .sq-tab{
  flex:1 1 0; min-height:0; min-width:42px;
  writing-mode:vertical-rl; text-indent:0; letter-spacing:.34em;
  justify-content:center; border-radius:6px 0 0 6px;
}
.paper .sq-nav input:checked + .sq-tab{ background:var(--paper); color:var(--seal); }
/* 竖版凹角：横版「底部左右两角挖圆」顺时针转 90° → 选中页左缘上、下各一块槽色方砖，
   圆角挖掉朝向板内的角，纸色阴影补出「板凸向正文」的曲面。 */
.paper .sq-nav input:checked + .sq-tab::before,
.paper .sq-nav input:checked + .sq-tab::after{
  content:""; position:absolute; left:-12px; width:12px; height:12px;
  background:var(--paper-3); pointer-events:none;
}
.paper .sq-nav input:checked + .sq-tab::before{
  top:-12px; border-bottom-right-radius:300px; box-shadow:-4px -4px 0 4px var(--paper);
}
.paper .sq-nav input:checked + .sq-tab::after{
  bottom:-12px; border-top-right-radius:300px; box-shadow:-4px 4px 0 4px var(--paper);
}
/* 正文与页脚给右竖栏让位 */
.paper .sheet{ right:60px; }
.paper .footline{ right:60px; }
/* 全屏时竖栏隐藏，正文收回满宽 */
.paper[data-nav="off"] .sheet{ right:15px; }

/* 信纸区 / 页脚：左右只留 15px，与标签页同宽；右上角那栏空白不再存在。 */
.sheet{ position:absolute; left:15px; right:15px; z-index:3;
  top:calc(var(--sq-top,26px) + 154px); bottom:calc(38px + var(--sq-safe-bottom,0px));
  min-height:0; overflow:hidden;
  transition:transform .24s cubic-bezier(.2,.9,.22,1), top .3s ease; }
/* 滑动返回：纸面跟着手指往右让一点，松手才决定退不退 */
.paper.is-swiping .sheet{ transform:translateX(calc(var(--sq-swipe,0px) * .32)); transition:none; }
.paper[data-nav="off"] .sheet{ top:calc(var(--sq-top,26px) + 56px); }
.footline{ position:absolute; left:20px; right:20px; bottom:calc(10px + var(--sq-safe-bottom,0px)); z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  font-size:9px; letter-spacing:.2em; color:var(--ink-3); white-space:nowrap; }
.paper[data-nav="off"] .masthead,
.paper[data-nav="off"] .footline{ opacity:0; visibility:hidden; pointer-events:none; }
.masthead,.footline{ transition:opacity .3s ease, visibility .3s; }
.footline .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); opacity:.6; }

/* 页面：不做整页淡入（避免每次 render 重播造成闪屏），切换即显 */
.page{ position:absolute; inset:0; }
/* 竖排字 */
.vt{ writing-mode:vertical-rl; text-orientation:upright; }
.vt > * + *{ margin-left:18px; }
.vt h1,.vt h2{ font-weight:500; }
.vt p{ color:var(--ink-2); }
.vt .dim{ color:var(--ink-3); }

/* 首屏 */
.cover{ display:flex; flex-direction:column; }
.cover-text{ flex:1; min-height:0; overflow:hidden; }
.cover-text h1{ font-size:44px; line-height:1.7; letter-spacing:.14em; margin-left:0; }
.cover-text h1 em{ font-style:normal; color:var(--seal); }
.cover-text p{ font-size:15px; line-height:2.1; letter-spacing:.18em; margin-top:16px; }
.cover-dock{ height:96px; flex:none; display:flex; align-items:center; gap:14px; padding-bottom:6px; }
.ink-dot{ position:relative; width:58px; height:58px; flex:none; display:grid; place-items:center;
  border-radius:50%; }
.ink-dot b{ width:22px; height:22px; border-radius:50% 46% 52% 48%; background:var(--ink);
  box-shadow:0 2px 9px rgba(41,38,32,.32); transition:transform .4s cubic-bezier(.2,.9,.22,1.14); }
.ink-dot::after{ content:""; position:absolute; inset:2px; border:1px solid var(--line); border-radius:50%;
  animation:breath 3.6s ease-in-out infinite; }
.ink-dot:active b,.ink-dot.is-press b{ transform:scale(.68); }
@keyframes breath{ 0%,100%{ transform:scale(.82); opacity:.55 } 50%{ transform:scale(1.12); opacity:0 } }
.dock-copy{ display:flex; flex-direction:column; gap:5px; }
.dock-copy b{ font-size:13px; font-weight:500; letter-spacing:.3em; color:var(--ink-2); }
.dock-copy span{ font-size:9px; letter-spacing:.18em; color:var(--ink-3); }

/* 揭晓：一封信 */
.drawn{ display:flex; flex-direction:column; }
.drawn-text{ flex:1; min-height:0; overflow:hidden; padding-top:34px; }
.drawn-text h2{ font-size:36px; line-height:1.7; letter-spacing:.1em; }
.drawn-text .line{ font-size:15px; line-height:2.1; letter-spacing:.16em; margin-top:18px; }
.drawn-text .note{ font-size:11px; line-height:2; letter-spacing:.14em; margin-top:8px; }
.drawn-dock{ flex:none; height:78px; display:flex; align-items:flex-end; gap:12px; padding-bottom:4px; }
.meta-row{ flex:1; display:flex; flex-direction:column; gap:5px; font-size:9px; letter-spacing:.16em; color:var(--ink-3); }
.meta-row i{ font-style:normal; color:var(--seal); letter-spacing:.1em; }
.ink-word{ font-family:var(--font-serif); font-size:11px; letter-spacing:.18em; color:var(--ink-2);
  padding:10px 2px; border-bottom:1px solid var(--line); min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center; }
.ink-word:active{ color:var(--seal); border-color:var(--seal); }

/* 印章 */
.seal{ position:relative; width:56px; height:56px; flex:none; border-radius:3px; background:var(--seal);
  color:#f6efe2; display:grid; place-items:center; font-size:14px; letter-spacing:.1em; line-height:1.2;
  padding:6px 0; box-shadow:0 2px 0 #7e2a1f,0 6px 14px rgba(126,42,31,.28);
  transform:rotate(-2.5deg); transition:transform .32s cubic-bezier(.2,1.6,.4,1),box-shadow .3s,opacity .3s; }
.seal::after{ content:""; position:absolute; inset:2px; border:1px solid rgba(246,239,226,.48); border-radius:2px; }
.seal:active,.seal.is-press{ transform:rotate(-2.5deg) scale(.9);
  box-shadow:0 1px 0 #7e2a1f,0 2px 6px rgba(126,42,31,.3); }
.seal.small{ width:44px; height:44px; font-size:11px; }
.seal[disabled]{ cursor:default; background:none; color:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--line); transform:rotate(-2.5deg); }
.seal[disabled]::after{ border-color:var(--line); }
.seal[disabled]::before{ content:""; position:absolute; inset:6px; border:1px dashed var(--line); border-radius:2px; }

/* 进行中 */
.active{ display:flex; flex-direction:column; }
.active-head{ flex:none; display:flex; flex-direction:row-reverse; justify-content:flex-start;
  align-items:flex-start; gap:10px; padding-bottom:10px; }
.active-head h2{ writing-mode:vertical-rl; font-size:16px; letter-spacing:.24em; font-weight:500; }
.active-head span{ writing-mode:vertical-rl; font-size:9px; letter-spacing:.2em; color:var(--ink-3); margin-top:4px; }
.steps{ flex:1; min-height:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  direction:rtl; gap:2px; }
.step{ position:relative; min-width:44px; display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:4px 2px; border-left:1px solid var(--line); }
.step:last-child{ border-left:0; }
.step .no{ font-size:9px; letter-spacing:.16em; color:var(--ink-3); }
.step .txt-wrap{ flex:1; min-height:0; width:100%; display:flex; align-items:flex-start;
  justify-content:center; position:relative; }
.step .txt{ position:relative; writing-mode:vertical-rl; text-orientation:upright; height:auto; max-height:100%;
  font-size:15px; line-height:1.78; letter-spacing:.1em; color:var(--ink);
  transition:color .3s ease; }
.step .dot{ width:6px; height:6px; flex:none; border-radius:50%; border:1px solid var(--ink-3);
  margin-bottom:2px; transition:.3s; }
/* 勾选项：方框、对勾、整格转 360° 的那套在 shared/chrome.css 的 .sq-check 里，四套共用。
   这里只说：每一格多高、勾打上以后字怎么被划掉。 */
.step .sq-check{ margin-bottom:2px; --q-sel-ink:var(--seal); --q-mark:var(--paper); }
.step.done .txt{ color:var(--ink); }
.step.done .txt::after{ content:""; position:absolute; left:50%; top:0; width:1.5px;
  height:100%; background:var(--seal); opacity:.72; transform:translateX(-50%) scaleY(0);
  transform-origin:top; animation:mark .46s cubic-bezier(.3,1,.4,1) forwards; }
@keyframes mark{ to{ transform:translateX(-50%) scaleY(1) } }
.step.done .dot{ background:var(--seal); border-color:var(--seal); }
.step:active .txt{ color:var(--ink); }
.active-dock{ flex:none; height:74px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-bottom:2px; }
.progress{ display:flex; flex-direction:column; gap:6px; }
.progress b{ font-family:var(--font-mono); font-size:15px; font-weight:400; letter-spacing:.12em; color:var(--ink-2); }
.progress span{ font-size:9px; letter-spacing:.18em; color:var(--ink-3); }

/* 落款 / 改写：整页横向排满。上一版把输入框设成一栏竖字（flex:1），
   十来个字只占右边一条，左边剩一大块空白 —— 老板说的就是这里。 */
.compose{ display:flex; flex-direction:column; gap:9px; overflow-y:auto; }
.compose-head{ flex:none; display:flex; align-items:baseline; gap:10px; }
.compose-head h2{ font-size:18px; letter-spacing:.18em; font-weight:500; }
.compose-head p{ flex:1; min-width:0; font-size:10px; line-height:1.7; letter-spacing:.04em; color:var(--ink-3); }
.compose-head .counter{ flex:none; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--ink-3); }
.compose-head .counter b{ font-weight:400; color:var(--ink-2); }

/* 批注11：实时预览置顶、占最大，一个面板内看全，输入即见 */
.compose-preview{ flex:1 1 auto; min-height:150px; display:grid; place-items:center; }
.compose-preview .card{ width:min(100%,320px); }

.compose-body{ flex:none; display:flex; flex-direction:column; gap:9px; }

/* 落款输入框：eslam-hany 硬阴影交互适配纸墨——只留浅左右边，focus 硬阴影消失、顶/底线展开 */
.input-wrap{ position:relative; flex:none; margin:6px 0 2px; }
.compose-line{ width:100%; height:72px; flex:none; writing-mode:horizontal-tb; resize:none;
  font-family:var(--font-card); font-size:14px; line-height:1.9; letter-spacing:.06em; color:var(--ink);
  background:transparent; outline:none; caret-color:var(--seal);
  border:2px solid color-mix(in srgb,var(--ink-2) 22%,transparent);
  border-top:none; border-bottom:none;
  padding:14px 12px 10px;
  box-shadow:7px 7px 0 0 color-mix(in srgb,var(--ink-2) 18%,transparent);
  transition:box-shadow .45s ease,border-color .45s ease; }
.compose-line:focus{ box-shadow:none; border-color:color-mix(in srgb,var(--seal) 38%,transparent); }
.compose-line::placeholder{ color:color-mix(in srgb,var(--ink-3) 70%,transparent); opacity:.85; transition:color .3s; }
.input-wrap:focus-within .compose-line::placeholder{ color:transparent; }
/* 浮动提示：默认藏在框内，focus 或有字时升起成小标 */
.iw-label{ position:absolute; top:14px; left:12px; color:var(--ink-3); font-size:13px;
  letter-spacing:.06em; pointer-events:none; transform:scale(0); transform-origin:left center; z-index:-1;
  transition:all .45s cubic-bezier(.68,-.55,.265,1.55); }
.input-wrap:focus-within .iw-label,
.input-wrap.has-value .iw-label{ top:-10px; transform:scale(1); color:var(--seal); }
.iw-topline,.iw-underline{ position:absolute; right:0; height:2px; background:var(--seal); width:0; transition:width .45s ease; }
.iw-topline{ top:0; }
.iw-underline{ bottom:0; }
.input-wrap:focus-within .iw-topline{ width:35%; }
.input-wrap:focus-within .iw-underline{ width:100%; }

.compose-picks{ display:flex; flex-direction:column; gap:8px; }
.pick-row{ display:flex; align-items:center; gap:8px; min-height:44px; }
.side-label{ width:58px; flex:none; font-size:9px; letter-spacing:.14em; color:var(--ink-3); }
.pick{ width:116px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:6px;
  border:1px solid var(--line); padding:8px; min-height:44px; font-size:10px; letter-spacing:.06em;
  color:var(--ink-2); background:none; }
.pick:active{ border-color:var(--seal); color:var(--seal); }
.pick span:last-child{ font-size:13px; line-height:1; }
.pick-preview{ position:relative; width:96px; flex:none; aspect-ratio:3/2; border:1px solid var(--line);
  background-size:cover; background-position:center; display:none; }
.pick-preview.is-on{ display:block; }
.pick-preview button{ position:absolute; right:-6px; top:-6px; width:44px; height:44px; border-radius:50%;
  background:transparent; color:var(--paper); font-size:0; display:grid; place-items:start end; }
.pick-preview button::before{ content:"×"; width:18px; height:18px; margin:6px; border-radius:50%; background:var(--ink);
  color:var(--paper); font-size:10px; line-height:1; display:grid; place-items:center; }

/* 批注 7/9：默认底片改水平 palette 横条（arshshaikh06 展开交互，纸墨配色），不再铺 212 张。
   2026-11-02：palette 从 6 张补到 12 族全给；6 列时每格只有 35px 看不出画，改 4 列三行（约 55×44）；
   格子小了不能再接“悬停才露名”，改成名字常驻 + 底部压暗；「留白」挪出网格当独立小按钮。 */
.palette{ flex:1; min-width:0; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; height:auto; overflow:visible; }
.sw{ position:relative; min-width:0; aspect-ratio:5/4; border:1px solid var(--line); background-size:cover;
  background-position:center; cursor:pointer; display:flex; align-items:flex-end; justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease; }
.sw span{ opacity:1; width:100%; text-align:center; font-size:9px; letter-spacing:.1em; color:#fff;
  padding:5px 2px 2px; text-shadow:0 1px 3px rgba(0,0,0,.75); white-space:nowrap;
  background:linear-gradient(transparent,rgba(20,17,13,.45)); }
.sw:hover,.sw:focus{ transform:translateY(-2px); z-index:2; box-shadow:0 6px 16px rgba(50,40,25,.22); }
.sw.is-on{ box-shadow:0 6px 16px rgba(50,40,25,.22);
  outline:1.5px solid var(--seal); outline-offset:1px; }
/* 留白：竖排小按钮，与两行格子齐高；选中同样描朱砂边 */
.sw-blank{ flex:none; width:30px; align-self:stretch; border:1px solid var(--line); background:var(--paper-2);
  color:var(--ink-3); font-size:10px; letter-spacing:.12em; writing-mode:vertical-rl;
  display:grid; place-items:center; cursor:pointer; }
.sw-blank.is-on{ color:var(--seal); outline:1.5px solid var(--seal); outline-offset:1px; }

/* 批注8：录音栏 */
.rec-row{ gap:10px; }
.rec-btn{ flex:none; display:flex; align-items:center; gap:7px; border:1px solid var(--line);
  border-radius:999px; padding:8px 14px; font-size:11px; letter-spacing:.1em; color:var(--ink-2); background:none;
  min-height:40px; cursor:pointer; transition:border-color .25s,color .25s; }
.rec-dot{ width:9px; height:9px; border-radius:50%; background:var(--ink-3); flex:none; transition:background .25s; }
.rec-row.recording .rec-dot{ background:var(--seal); animation:recBlink 1s ease-in-out infinite; }
.rec-row.recording .rec-btn{ border-color:var(--seal); color:var(--seal); }
@keyframes recBlink{ 50%{ opacity:.25; } }
.rec-time{ flex:1; min-width:0; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec-del{ flex:none; border:none; background:none; font-size:10px; letter-spacing:.1em; color:var(--ink-3);
  text-decoration:underline; cursor:pointer; padding:6px; }
.rec-del:active{ color:var(--seal); }
.rec-row audio{ flex:1; min-width:0; height:32px; }
/* 录音实时小波浪：只在录制中显示，5 根错峰跳动 */
.rec-wave{ display:none; flex:none; align-items:center; gap:2px; height:18px; }
.rec-wave.is-on{ display:flex; }
.rec-wave i{ width:2px; height:6px; background:var(--seal); border-radius:1px; animation:recBar .9s ease-in-out infinite; }
.rec-wave i:nth-child(1){ animation-delay:0s; }
.rec-wave i:nth-child(2){ animation-delay:.15s; }
.rec-wave i:nth-child(3){ animation-delay:.3s; }
.rec-wave i:nth-child(4){ animation-delay:.45s; }
.rec-wave i:nth-child(5){ animation-delay:.6s; }
@keyframes recBar{ 0%,100%{ height:5px; } 50%{ height:15px; } }

.compose-foot{ flex:none; height:54px; display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.counter{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-3); }
.counter b{ font-weight:400; color:var(--ink-2); }

/* 完成：对折 → 一张卡 */
.done{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.fold-stage{ position:relative; width:100%; display:grid; place-items:center; }
.fold-panel{ position:absolute; inset:0; z-index:4; background:var(--paper-2);
  box-shadow:0 8px 22px rgba(50,40,25,.14); pointer-events:none; }
.fold-panel.top{ clip-path:polygon(0 0,100% 0,100% 50%,0 50%); transform-origin:50% 50%; }
.fold-panel.bot{ clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%); transform-origin:50% 50%; }
.fold-stage.folded .fold-panel.top{ animation:foldTop .82s cubic-bezier(.5,.05,.2,1) both; }
.fold-stage.folded .fold-panel.bot{ animation:foldBot .82s cubic-bezier(.5,.05,.2,1) both; }
.fold-stage.folded .fold-panel{ opacity:0; transition:opacity .26s .68s; }
@keyframes foldTop{ 0%{ transform:perspective(900px) rotateX(0) } 55%{ transform:perspective(900px) rotateX(-86deg) } 100%{ transform:perspective(900px) rotateX(-176deg) } }
@keyframes foldBot{ 0%{ transform:perspective(900px) rotateX(0) } 100%{ transform:perspective(900px) rotateX(5deg) } }

.card{ position:relative; width:100%; max-width:330px; aspect-ratio:3/2; padding:9px;
  background:var(--paper-2); border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(50,40,25,.18),0 1px 0 rgba(255,255,255,.4) inset;
  display:flex; flex-direction:column; gap:0; }
.fold-stage.folded .card{ animation:appear .5s .55s both; }
@keyframes appear{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.card-main{ flex:1; min-height:0; position:relative; z-index:1; display:flex; gap:8px; }
/* 底片：整卡全局背景，铺在图与文字底下。
   旧值把 .26 的底片又盖了一层 62% 实纸罩，两层相乘后整张图的明暗差只剩约 13/255，
   肉眼就是一张素纸 —— 这就是「勾了底片不显示」。现在底片提到 .5，
   纸罩改成左透右实的渐变：文字那一侧仍保住可读，空着的一侧真的看得见。 */
.card-bg{ position:absolute; inset:9px; background-size:cover; background-position:center;
  opacity:.5; filter:saturate(.86) contrast(1.02); z-index:0; }
.card.has-bg .card-bg{ display:block; }
.paper[data-night="1"] .card.has-bg .card-bg{ opacity:.34; }
.card-figure{ width:50%; flex:none; position:relative; background-size:cover; background-position:center;
  border:1px solid var(--line); filter:saturate(.92) contrast(.98); }
/* 手账胶带：压在照片上沿，斜一点、半透，像自己贴上去的（借「支线日记」的 colTape）。
   只在有照片时出现，不给纯文字的纸贴东西；导出图里同步画了一块，两边一致。 */
.card-figure::after{ content:""; position:absolute; left:-7px; top:7px; width:46px; height:13px;
  transform:rotate(-4deg); pointer-events:none;
  background:linear-gradient(180deg,rgba(222,169,63,.34),rgba(222,169,63,.20));
  border-left:1px dashed rgba(222,169,63,.5); border-right:1px dashed rgba(222,169,63,.5);
  box-shadow:0 1px 2px rgba(50,40,25,.14); }
.paper[data-night="1"] .card-figure::after{ background:linear-gradient(180deg,rgba(222,169,63,.26),rgba(222,169,63,.14)); }
.card-plain .card-figure{ display:none; }
.card.has-bg .card-paper{ background:linear-gradient(90deg,
  transparent 0%,
  color-mix(in srgb,var(--paper-2) 30%,transparent) 34%,
  color-mix(in srgb,var(--paper-2) 62%,transparent) 100%); }
.card-paper{ flex:1; min-width:0; position:relative; display:flex; justify-content:center; padding:2px 6px 0; }
/* 竖排落款：上一版 14–17px 在 330px 卡上占满三列，字大且挤 —— 老板说“字体丑、还特别大”。
   降到 12–14.5px，字距拉开到 .14em，列间距 2.05；cardPer() 里的算法与本处一一对应，改一处必须改两处。 */
.card-line{ writing-mode:vertical-rl; text-orientation:upright; height:100%; max-height:100%;
  font-family:var(--font-card); font-weight:500;
  font-size:clamp(12px,3.5vw,13.5px); line-height:2.05; letter-spacing:.14em; color:var(--ink); overflow:hidden; }
.card-plain .card-line{ font-size:clamp(13px,3.8vw,14.5px); line-height:2.1; }
.card-foot{ flex:none; height:26px; display:flex; align-items:center; gap:8px;
  font-size:8px; letter-spacing:.14em; color:var(--ink-3); }
.card-foot .serial{ font-family:var(--font-mono); letter-spacing:.06em; }
.card-stamp{ margin-left:auto; width:22px; height:22px; border:1px solid var(--seal); color:var(--seal);
  display:grid; place-items:center; font-size:7px; transform:rotate(-3deg); }
.done-actions{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.done-actions .ink-word{ min-height:44px; padding:8px 2px; }

/* 留页：一本可以翻的册子（引擎来自 create-photo-flipbook-ui 的 2D Book / StPageFlip） */
.archive{ display:flex; flex-direction:column; min-height:0; }
.archive-stage{ position:relative; flex:1; min-height:0; display:grid; place-items:center;
  padding:2px 0 6px; perspective:1800px; }
.book-rig{ position:relative; z-index:1; width:100%; height:100%; display:grid; place-items:center; }
.book{ position:relative; isolation:isolate; filter:drop-shadow(0 16px 22px rgba(31,28,22,.22)); }
/* 封面/内页底下露出一叠纸边，书才不像一块平板 */
.book::before{ content:""; position:absolute; z-index:-1; inset:3px -4px -4px 3px;
  background:repeating-linear-gradient(90deg,var(--paper-3) 0 1px,var(--paper-2) 1px 3px);
  border:1px solid var(--line); box-shadow:3px 4px 10px rgba(31,28,22,.12); }
.book-page{ position:relative; overflow:hidden; background:var(--paper); color:var(--ink);
  box-sizing:border-box; user-select:none; -webkit-user-select:none; }
.book-page::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    repeating-linear-gradient(0deg,rgba(41,38,32,.022) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(41,38,32,.016) 0 1px,transparent 1px 6px);
  mix-blend-mode:multiply; }
.book-page.--left::before, .book-page.--right::before{ content:""; position:absolute; top:0; bottom:0;
  z-index:3; width:14px; pointer-events:none; }
.book-page.--left::before{ right:0; background:linear-gradient(to left,rgba(27,24,20,.22),transparent); }
.book-page.--right::before{ left:0; background:linear-gradient(to right,rgba(27,24,20,.22),transparent); }

/* 封面 / 封底 */
.b-cover, .b-back{ background:#243f39; color:#f0e9d8; }
.b-cover::after, .b-back::after{ mix-blend-mode:screen; opacity:.14; }
.b-cover-inner{ position:absolute; inset:0; padding:22px 18px 18px 24px; }
.b-cover-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
  font-size:8px; letter-spacing:.18em; color:rgba(240,233,216,.7); }
.b-cover-title{ position:absolute; right:20px; top:54px; writing-mode:vertical-rl;
  text-orientation:upright; }
.b-cover-title h2{ font-size:38px; font-weight:500; letter-spacing:.24em; line-height:1.15; }
.b-cover-title small{ display:block; margin-top:14px; font-size:8px; letter-spacing:.3em;
  color:rgba(240,233,216,.62); }
.b-cover-seal{ position:absolute; left:24px; bottom:22px; width:42px; height:42px;
  border:1px solid rgba(240,233,216,.6); display:grid; place-items:center; font-size:10px;
  letter-spacing:.12em; line-height:1.3; text-align:center; transform:rotate(-3deg); }
.b-thread{ position:absolute; left:13px; top:12%; bottom:12%; width:1px;
  background:rgba(240,233,216,.18); }
.b-thread i{ position:absolute; left:-3.5px; width:8px; height:8px; border-radius:50%;
  background:#243f39; box-shadow:inset 0 0 0 1px rgba(240,233,216,.35); }
.b-thread i:nth-child(1){ top:0; } .b-thread i:nth-child(2){ top:24%; }
.b-thread i:nth-child(3){ top:49%; } .b-thread i:nth-child(4){ top:74%; }
.b-thread i:nth-child(5){ bottom:0; }

/* 扉页 / 末页 */
.b-inner{ position:absolute; inset:0; padding:24px 20px 18px; display:flex; flex-direction:column; }
.b-kicker{ font-size:8px; letter-spacing:.22em; color:var(--ink-3); }
.b-title{ writing-mode:vertical-rl; text-orientation:upright; margin-top:16px; font-size:21px;
  line-height:1.9; letter-spacing:.14em; font-weight:500; color:var(--ink); height:76%; }
.b-title small{ display:block; margin-top:10px; font-size:8px; letter-spacing:.18em; color:var(--ink-3); }
.b-title-note{ margin-top:10px; font-size:9px; line-height:1.8; letter-spacing:.12em;
  color:var(--ink-3); max-width:190px; }
.b-meta{ position:absolute; left:20px; bottom:18px; font-size:8px; letter-spacing:.14em; color:var(--ink-3); }
.b-page{ position:absolute; right:20px; bottom:16px; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.08em; color:var(--ink-3); }
.b-close-inner{ position:absolute; inset:0; padding:24px 20px; display:grid; place-items:center; }
.b-close-text{ writing-mode:vertical-rl; text-orientation:upright; font-size:17px; line-height:2.1;
  letter-spacing:.16em; color:var(--ink-2); }

/* 一张卡：贴在册页上，四角有相角 */
.b-card-head{ position:absolute; left:18px; right:18px; top:13px; display:flex;
  justify-content:space-between; gap:8px; font-size:7px; letter-spacing:.12em; color:var(--ink-3); }
.b-card-wrap{ position:absolute; left:18px; right:18px; top:32px; bottom:38px;
  display:grid; place-items:center; }
.b-mount{ position:relative; width:100%; }
.b-mount .card{ width:100%; max-width:none; box-shadow:0 7px 18px rgba(50,40,25,.16); }
.b-card-wrap .card-line{ font-size:clamp(12px,3.6vw,14px); }
.b-card-wrap .card-plain .card-line{ font-size:clamp(13px,4vw,16px); }
.b-corners i{ position:absolute; width:13px; height:13px; border:0 solid rgba(41,38,32,.32);
  pointer-events:none; }
.b-corners i:nth-child(1){ left:-5px; top:-5px; border-left-width:1px; border-top-width:1px; }
.b-corners i:nth-child(2){ right:-5px; top:-5px; border-right-width:1px; border-top-width:1px; }
.b-corners i:nth-child(3){ left:-5px; bottom:-5px; border-left-width:1px; border-bottom-width:1px; }
.b-corners i:nth-child(4){ right:-5px; bottom:-5px; border-right-width:1px; border-bottom-width:1px; }
.b-card-foot{ position:absolute; left:18px; right:18px; bottom:13px; display:flex;
  justify-content:space-between; gap:8px; font-size:8px; letter-spacing:.1em; color:var(--ink-3); }
.b-card-foot span:first-child{ flex:1; min-width:0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }

/* 翻页控制 */
.book-controls{ flex:none; height:44px; display:flex; align-items:center; justify-content:center; gap:12px; }
.book-controls button{ width:44px; height:44px; flex:none; border:1px solid var(--line); border-radius:50%;
  color:var(--ink-2); background:none; font-size:18px; display:grid; place-items:center;
  transition:color .25s,border-color .25s,opacity .25s; }
.book-controls button:disabled{ opacity:.25; }
.book-controls button:not(:disabled):active{ color:var(--seal); border-color:var(--seal); }
.book-status{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:92px; }
.book-status b{ font-size:11px; font-weight:500; letter-spacing:.16em; color:var(--ink-2); }
.book-status span{ font-size:8px; letter-spacing:.12em; color:var(--ink-3); }
.book-actions{ flex:none; height:46px; display:flex; align-items:center; justify-content:center; gap:18px; }
.book-actions .ink-word{ font-size:10px; min-height:44px; padding:4px 2px; }
.book-actions .ink-word[disabled]{ color:var(--ink-3); border-color:var(--line); opacity:.45; }

/* 跋 · 个人主页 / 设置：头像卡 + 2×2 入口 + 一条跋语。
   上一版是两段竖排字浮在右上角，下面孤零零两颗按钮 —— 现在整页铺满。 */
.about{ display:flex; flex-direction:column; gap:12px; }
.me-card{ flex:none; display:flex; align-items:center; gap:12px; padding:12px;
  border:1px solid var(--line); background:color-mix(in srgb,var(--paper-2) 55%,transparent); }
.me-seal{ width:52px; height:52px; flex:none; border:1px solid var(--seal); color:var(--seal);
  display:grid; place-items:center; font-size:18px; letter-spacing:.06em; transform:rotate(-3deg); }
.me-copy{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.me-copy strong{ font-size:15px; font-weight:500; letter-spacing:.12em; }
.me-copy small{ font-size:9px; letter-spacing:.1em; color:var(--ink-3); }
.me-stats{ display:flex; gap:14px; font-size:9px; letter-spacing:.08em; color:var(--ink-3); }
.me-stats b{ font-family:var(--font-mono); font-size:13px; font-weight:400; color:var(--ink-2); margin-right:3px; }
/* 批注12：我的页横版展开卡（joe-watson 交互，纸墨配色；窄条露竖排字，hover/聚焦展开露标题） */
.fan-card{ flex:none; display:flex; gap:5px; height:100px; border-radius:4px; }
.fan-pane{ position:relative; flex:1; min-width:0; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); border-radius:3px; background:color-mix(in srgb,var(--paper-2) 55%,transparent);
  display:flex; align-items:center; justify-content:center;
  transition:flex .35s ease, box-shadow .35s ease, border-color .3s ease; }
.fan-vert{ writing-mode:vertical-rl; font-size:20px; letter-spacing:.3em; color:var(--seal); font-weight:500;
  transition:opacity .3s ease; }
.fan-body{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:10px 12px; opacity:0; transform:translateX(8px); transition:opacity .3s ease, transform .3s ease; text-align:left; }
.fan-body b{ font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--ink); }
.fan-body small{ font-size:9px; letter-spacing:.05em; color:var(--ink-3); }
.fan-pane:hover,.fan-pane:focus{ flex:4; box-shadow:0 6px 18px rgba(50,40,25,.18); border-color:var(--seal); }
.fan-pane:hover .fan-vert,.fan-pane:focus .fan-vert{ opacity:0; }
.fan-pane:hover .fan-body,.fan-pane:focus .fan-body{ opacity:1; transform:none; }
.fan-pane:active{ border-color:var(--seal); }
/* 手机无鼠标：不靠 hover 展开，三片均分、标题说明常显，点按直接跳转 */
@media (hover:none), (pointer:coarse){
  .fan-card{ height:auto; min-height:96px; }
  .fan-pane{ flex:1; padding:10px 8px; }
  .fan-vert{ display:none; }
  .fan-body{ position:static; opacity:1; transform:none; align-items:flex-start; gap:3px; }
  .fan-pane:active{ background:color-mix(in srgb,var(--paper-2) 70%,transparent); }
}
/* 最近留页：主页下半截不再是空的，三张真卡可以点开 */
.me-recent{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
.me-recent-head{ flex:none; display:flex; align-items:baseline; justify-content:space-between;
  font-size:9px; letter-spacing:.16em; color:var(--ink-3); }
.me-recent-row{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.me-mini{ display:flex; flex-direction:column; min-height:0; padding:0; border:1px solid var(--line);
  background:none; text-align:left; overflow:hidden; }
.me-mini .face{ flex:1; min-height:64px; background-size:cover; background-position:center;
  border-bottom:1px solid var(--line); }
.me-mini .face.plain{ background:var(--paper-2); display:grid; place-items:center; color:var(--ink-3); font-size:10px; }
.me-mini b{ flex:none; padding:7px 8px; font-size:10px; font-weight:400; line-height:1.5; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me-empty{ grid-column:1 / -1; display:grid; place-items:center; gap:6px; border:1px dashed var(--line);
  color:var(--ink-3); font-size:10px; letter-spacing:.1em; }
.me-slot{ border-style:dashed; }
.me-slot .face.plain{ font-size:20px; color:var(--ink-3); }
.me-note{ flex:none; font-size:10px; line-height:1.9; letter-spacing:.06em; color:var(--ink-3);
  border-top:1px solid var(--line); padding-top:10px; }

/* 备案号为法定展示内容：要看得见、要能点得开，但不能抢正文。
   所以：比跋语再小一档、居中、用同色墨，只在 hover/focus 时露出下划线与朱砂。 */
.me-legal{ flex:none; margin:8px 0 2px; text-align:center; font-size:9px; letter-spacing:.08em; }
.me-legal a{ color:var(--ink-3); text-decoration:none; }
.me-legal a:hover,.me-legal a:focus-visible{ color:var(--seal); text-decoration:underline; }

/* 看一张旧卡 */
.viewer{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.viewer .card{ opacity:1; animation:none; }

/* 主题漫开 */
.wash{ position:absolute; z-index:30; border-radius:50%; pointer-events:none; opacity:0;
  transform:scale(.01); will-change:transform,opacity; }

/* 轻提示 */
.toast{ position:absolute; left:50%; bottom:110px; z-index:40; transform:translate(-50%,8px);
  padding:7px 14px; border-radius:999px; background:rgba(20,18,15,.84); color:#f7f8f3;
  font-size:10px; letter-spacing:.18em; opacity:0; transition:.3s ease; pointer-events:none; }
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* 预览台：缩放条在手机外，不进入皮肤本身 */
.zdock{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:50;
  display:none; align-items:center; gap:9px; height:32px; padding:0 13px; border-radius:999px;
  background:rgba(22,20,16,.62); border:1px solid rgba(243,235,218,.16); color:#cfc4ad;
  font:10px/1 var(--font-ui); letter-spacing:.18em; backdrop-filter:blur(10px); user-select:none; }
.zdock .zlab{ opacity:.7; }
.ztrack{ position:relative; width:112px; height:16px; display:flex; align-items:center; cursor:ew-resize; touch-action:none; }
.ztrack::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px;
  background:rgba(243,235,218,.2); border-radius:2px; }
.zfill{ position:absolute; left:0; top:50%; height:2px; margin-top:-1px; background:#d8c8a6; border-radius:2px; }
.zknob{ position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%;
  background:#f7f8f3; box-shadow:0 0 0 3px rgba(243,235,218,.16); }
.zval{ width:34px; text-align:right; font-family:var(--font-mono); letter-spacing:.02em; }
@media (min-width:521px){ .zdock{ display:flex; } }
html.embed .zdock{ display:none !important; }

/* 窗口矮一点 */
@media (max-height:720px){
  .cover-text h1{ font-size:34px; }
  .cover-text p{ font-size:14px; }
  .drawn-text h2{ font-size:30px; }
  .drawn-text .line{ font-size:14px; }
  .step .txt{ font-size:13px; }
  .cover-dock{ height:82px; }
  .drawn-dock{ height:66px; }
  .active-dock{ height:64px; }
}

  /* 底图铺底（2026-10-28）：抽卡 / 进行 / 票根 / 观阅 后面是我们自己的图版，压纸色纱保证可读 */
  [data-screen="drawn"] .page,
  [data-screen="active"] .page,
  [data-screen="done"] .page,
  [data-screen="viewer"] .page{
    background-image: linear-gradient(rgba(243,235,218,.88), rgba(243,235,218,.88)), var(--plate, none);
    background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
  }

/* 2026-10-28 老板批「字要更高更好看」：竖排大标题放大 8%、字距 .16em，行气放开 */
.vt h1{ font-size:1.08em; line-height:1.62; letter-spacing:.16em; }
.vt h2{ font-size:1.04em; line-height:1.58; letter-spacing:.13em; }
.vt p { line-height:2.02; letter-spacing:.06em; }
.vt .dim{ letter-spacing:.1em; }

/* 2026-10-28 逻辑线追加（已在交接登记）：定位行。
   paper.html 里一直有这个 #locLine，但样式与逻辑在一次回滚里丢了，
   它就以默认样式挂在状态栏下方、永远写着“正在定位…”。
   这里只补“诚实三态”的排版，不抢戏：高度就是让给状态栏的那一段。 */
/* 顶条已下线：状态搬进封面定位 chip（见 .loc-chip），这里只留空壳供旧写入逻辑落字 */
.locline{ display:none; }

/* 封面定位 chip：可见、可点，三态诚实 */
.loc-chip{
  flex:none; align-self:flex-start; display:flex; align-items:center; gap:8px;
  margin:6px 0 2px; padding:9px 14px; border:1px solid var(--line); border-radius:999px;
  background:color-mix(in srgb, var(--paper-2) 55%, transparent);
  font:400 12px/1.4 var(--font-serif); letter-spacing:.1em; color:var(--ink-2);
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .25s, background .25s;
}
.loc-chip:active{ background:color-mix(in srgb, var(--paper-2) 90%, transparent); }
.loc-chip i{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.6; flex:none; }
.loc-chip span{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:220px; }
.loc-chip[data-state="locating"] i{ animation:locpulse 1.2s ease-in-out infinite; }
.loc-chip[data-state="ok"]{ color:var(--seal); border-color:color-mix(in srgb,var(--seal) 40%,var(--line)); }
.loc-chip[data-state="denied"]{ color:var(--ink-3); }
@keyframes locpulse{ 50%{ opacity:.15; transform:scale(.6); } }
@media (prefers-reduced-motion: reduce){ .loc-chip[data-state="locating"] i{ animation:none; } }

/* ============================================================
   2026-10-28 设计线 · 新视觉层（纯 CSS，不动状态机/数据）
   ① 悠然小楷只用于艺术字标题（封面 / 揭晓）；常规界面仍用宋体/无衬线。
   ② 揭晓标题整体淡入 + 雾上升（逐字打字机版属逻辑线，待接）。
   ③ 我的页入口做不等大错位网格，常规字体。
   ============================================================ */
/* 悠然小楷：仅艺术字标题（封面大句 / 揭晓支线名），常规界面不用 */
@font-face{
  font-family:"Youran Kai";
  src:url("../src/assets/fonts/youran-kai.woff2") format("woff2");
  font-display:swap;
}
/* 艺术字标题：封面大句 / 揭晓支线名 */
.cover-text h1,
.drawn-text h2{
  font-family:"Youran Kai", var(--font-serif);
  font-weight:400;
}
.cover-text h1{ font-size:44px; line-height:1.7; letter-spacing:.14em; }
.drawn-text h2{ font-size:36px; line-height:1.7; letter-spacing:.1em; }

/* 揭晓：整句从雾里浮出（整体版；逐字见逻辑线） */
.drawn-text{ position:relative; }
.drawn-text h2{
  animation:kaiRise .9s cubic-bezier(.2,.8,.2,1) both;
}
.drawn-text .line{ animation:kaiFade 1.1s .25s ease both; }
@keyframes kaiRise{
  0%{ opacity:0; filter:blur(9px); transform:translateY(10px); }
  60%{ filter:blur(2px); }
  100%{ opacity:1; filter:blur(0); transform:none; }
}
@keyframes kaiFade{ from{ opacity:0 } to{ opacity:1 } }

/* 柔雾：压掉光秃方格，只在封面/揭晓铺一层，不挡字 */
.page.cover::after,
.page.drawn::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(255,255,255,.34), transparent 60%),
    radial-gradient(80% 50% at 80% 12%, rgba(255,255,255,.22), transparent 55%);
}
.paper[data-night="1"] .page.cover::after,
.paper[data-night="1"] .page.drawn::after{
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(236,226,204,.08), transparent 60%),
    radial-gradient(80% 50% at 80% 12%, rgba(236,226,204,.05), transparent 55%);
}

/* 跋 · 我的：横版展开卡（常规界面字体，不用艺术字） */

/* ---------- 逐字打字机 + 每字水雾（揭晓标题） ---------- */
.drawn-text h2 .ch{ opacity:0; position:relative; display:inline-block; }
.drawn-text h2 .ch.type{ animation:sqCharType .38s ease forwards; }
@keyframes sqCharType{
  0%{ opacity:0; filter:blur(6px); transform:translateY(4px); }
  60%{ opacity:.55; filter:blur(2px); }
  100%{ opacity:1; filter:blur(0); transform:translateY(0); }
}
.drawn-text h2 .ch::after{
  content:""; position:absolute; inset:-14px -18px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(243,235,218,.35),transparent 72%);
  opacity:0; pointer-events:none; }
.drawn-text h2 .ch.type::after{ animation:sqMistPuff 1.6s ease-out forwards; }
@keyframes sqMistPuff{
  0%{ opacity:.7; transform:scale(.6); }
  100%{ opacity:0; transform:scale(1.9); }
}

/* ---------- 四色环加载（墨黑/灰/深灰/朱砂） ---------- */
.sheet-loader{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:8;
  display:flex; flex-direction:column; align-items:center; gap:16px; padding:30px 36px; border-radius:18px;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  box-shadow:0 14px 44px rgba(60,45,25,.20);
  opacity:0; pointer-events:none; transition:opacity .3s; }
.sheet-loader.show{ opacity:1; pointer-events:auto; }
.sq-pl{ width:6em; height:6em; }
.sq-pl__ring{ animation:sqRingA 2s linear infinite; }
.sq-pl__ring--a{ stroke:var(--ink); }
.sq-pl__ring--b{ animation-name:sqRingB; stroke:#7e7e7e; }
.sq-pl__ring--c{ animation-name:sqRingC; stroke:#686868; }
.sq-pl__ring--d{ animation-name:sqRingD; stroke:var(--seal); }
@keyframes sqRingA{ from,4%{stroke-dasharray:0 660;stroke-width:20;stroke-dashoffset:-330;}12%{stroke-dasharray:60 600;stroke-width:30;stroke-dashoffset:-335;}32%{stroke-dasharray:60 600;stroke-width:30;stroke-dashoffset:-595;}40%,54%{stroke-dasharray:0 660;stroke-width:20;stroke-dashoffset:-660;}62%{stroke-dasharray:60 600;stroke-width:30;stroke-dashoffset:-665;}82%{stroke-dasharray:60 600;stroke-width:30;stroke-dashoffset:-925;}90%,to{stroke-dasharray:0 660;stroke-width:20;stroke-dashoffset:-990;} }
@keyframes sqRingB{ from,12%{stroke-dasharray:0 220;stroke-width:20;stroke-dashoffset:-110;}20%{stroke-dasharray:20 200;stroke-width:30;stroke-dashoffset:-115;}40%{stroke-dasharray:20 200;stroke-width:30;stroke-dashoffset:-195;}48%,62%{stroke-dasharray:0 220;stroke-width:20;stroke-dashoffset:-220;}70%{stroke-dasharray:20 200;stroke-width:30;stroke-dashoffset:-225;}90%{stroke-dasharray:20 200;stroke-width:30;stroke-dashoffset:-305;}98%,to{stroke-dasharray:0 220;stroke-width:20;stroke-dashoffset:-330;} }
@keyframes sqRingC{ from{stroke-dasharray:0 440;stroke-width:20;stroke-dashoffset:0;}8%{stroke-dasharray:40 400;stroke-width:30;stroke-dashoffset:-5;}28%{stroke-dasharray:40 400;stroke-width:30;stroke-dashoffset:-175;}36%,58%{stroke-dasharray:0 440;stroke-width:20;stroke-dashoffset:-220;}66%{stroke-dasharray:40 400;stroke-width:30;stroke-dashoffset:-225;}86%{stroke-dasharray:40 400;stroke-width:30;stroke-dashoffset:-395;}94%,to{stroke-dasharray:0 440;stroke-width:20;stroke-dashoffset:-440;} }
@keyframes sqRingD{ from,8%{stroke-dasharray:0 440;stroke-width:20;stroke-dashoffset:0;}16%{stroke-dasharray:40 400;stroke-width:30;stroke-dashoffset:-5;}36%{stroke-dasharray:40 400;stroke-width:30;stroke-dashoffset:-175;}44%,50%{stroke-dasharray:0 440;stroke-width:20;stroke-dashoffset:-220;}58%{stroke-dasharray:40 400;stroke-width:30;stroke-dashoffset:-225;}78%{stroke-dasharray:40 400;stroke-width:30;stroke-dashoffset:-395;}86%,to{stroke-dasharray:0 440;stroke-width:20;stroke-dashoffset:-440;} }
.sheet-loader .cap{ margin-top:14px; font-size:10px; letter-spacing:.3em; color:var(--ink-2); }

@media (prefers-reduced-motion: reduce){
  .drawn-text h2, .drawn-text .line,
  .drawn-text h2 .ch{ animation:none !important; opacity:1 !important; filter:none !important; transform:none !important; }
  .sq-pl__ring{ animation:none; }
}

/* ============================================================
   稍后待办：纸墨横版小笺，点按头部展开、步骤可勾选（已弃用 Uiverse 黑混凝土块）。
   ============================================================ */
.ink-word.is-on{ color:var(--seal); border-color:var(--seal); }

.page.later{ display:flex; flex-direction:column; padding:6px 2px 4px; }
.later-head{ flex:none; display:flex; flex-direction:column; gap:3px;
  align-items:flex-start; padding:2px 4px 12px; }
.later-head h2{ font-size:18px; font-weight:500; letter-spacing:.28em; }
.later-head span{ font-size:9px; letter-spacing:.16em; color:var(--ink-3); }
.later-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:24px; }
.later-empty h2{ font-size:22px; font-weight:500; letter-spacing:.3em; }
.later-empty p{ font-size:12px; line-height:2.1; letter-spacing:.12em; color:var(--ink-3); }

/* 稍后待办：纸墨横版小笺，单列竖排堆叠，点按头部展开可勾选步骤（去纯黑、去瀑布双列） */
.later-flow{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column;
  gap:10px; padding-bottom:8px; }
.later-flow::-webkit-scrollbar{ width:0; }

.later-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:6px;
  overflow:hidden; cursor:pointer; break-inside:avoid;
  transition:border-color .25s ease; }
.later-card.is-open{ border-color:color-mix(in srgb,var(--seal) 45%,var(--line)); }

.later-head-row{ display:flex; align-items:center; gap:11px; padding:12px 14px; }
.later-index{ flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--seal);
  color:var(--seal); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:12px; }
.later-titles{ flex:1; min-width:0; }
.later-titles h3{ font-family:var(--font-serif); font-size:15px; font-weight:500; letter-spacing:.06em;
  color:var(--ink); margin:0 0 3px; line-height:1.5; }
.later-meta{ font-size:10px; letter-spacing:.1em; color:var(--ink-3); margin:0; }
.later-progress{ flex:none; font-size:11px; font-family:var(--font-serif); color:var(--ink-2); }
.later-chev{ flex:none; color:var(--ink-3); font-size:16px; line-height:1;
  transition:transform .3s ease,color .3s ease; }
.later-card.is-open .later-chev{ transform:rotate(90deg); color:var(--seal); }

/* 展开体：max-height 流程，不裁切按钮；无 hover 依赖，纯点按 */
.later-body{ max-height:0; opacity:0; overflow:hidden;
  transition:max-height .35s ease,opacity .25s ease; }
.later-card.is-open .later-body{ max-height:600px; opacity:1; }
.later-steps{ display:flex; flex-direction:column; gap:8px; padding:4px 14px 10px; }
.later-step{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; padding:4px 2px; }
.ls-check{ position:absolute; opacity:0; width:0; height:0; }
.ls-box{ flex:none; width:16px; height:16px; margin-top:2px; border:2px solid var(--ink-3);
  border-radius:3px; box-sizing:border-box; position:relative; transition:all .2s ease; }
.ls-check:checked + .ls-box{ background:var(--seal); border-color:var(--seal); }
.ls-check:checked + .ls-box::after{ content:"✓"; position:absolute; inset:0; color:#f6efe2;
  font-size:11px; display:flex; align-items:center; justify-content:center; }
.ls-text{ flex:1; font-size:13px; line-height:1.6; letter-spacing:.05em; color:var(--ink-2);
  transition:color .2s; }
.later-step.is-done .ls-text{ color:var(--ink-3); text-decoration:line-through; }

.later-actions{ display:flex; gap:10px; padding:6px 14px 14px; }
.later-go{ flex:1; min-height:38px; border:0; border-radius:3px; background:var(--seal);
  color:#f6efe2; font-family:var(--font-serif); font-size:12px; letter-spacing:.18em; cursor:pointer; }
.later-drop{ min-height:38px; padding:0 14px; background:transparent; color:var(--ink-3);
  border:1px solid var(--line); border-radius:3px; font-size:11px; letter-spacing:.14em; cursor:pointer; }
.later-go:active{ filter:brightness(1.12); }
.later-drop:active{ color:var(--seal); }

/* ============================================================
   纸墨 · 加色层（2026-10-29，自 design/paper-color-20261029/apps/color.css 合并）
   只动颜色与不占位的点缀；尺寸/间距/位置沿用上文。已删副本 @font-face；
   已修：.b-cover-title 生产为绝对定位竖排标题，不再改 position。
   ============================================================ */
.paper{
  --sky:#8FB8C9;
  --sky-2:#D9ECF2;
  --honey:#DEA93F;
  --honey-2:#F4DCA0;
  --sage:#8FAE87;
  --sage-2:#DCE7D5;
  --lilac:#B3A3C6;
  --clay:#C4795C;
  /* 墨往绿里挪一点，纸上不再是单一褐灰 */
  --ink-2:#4E564C;
  --ink-3:#818978;
}

/* 纸上的光：天光蓝 + 蜜黄，只铺封面与揭晓，不碰纸底色（替换原柔雾背景） */
.page.cover::after,
.page.drawn::after{
  background:
    radial-gradient(120% 62% at 52% 102%, rgba(217,236,242,.42), transparent 64%),
    radial-gradient(74% 48% at 84% 6%, rgba(244,220,160,.42), transparent 58%);
}
.paper[data-night="1"] .page.cover::after,
.paper[data-night="1"] .page.drawn::after{
  background:
    radial-gradient(120% 62% at 52% 102%, rgba(143,184,201,.10), transparent 64%),
    radial-gradient(74% 48% at 84% 6%, rgba(222,169,63,.10), transparent 58%);
}

/* 装订孔：五颗小彩点，面积不到 40px² */
.binding i:nth-child(1){ background:var(--sky); }
.binding i:nth-child(2){ background:var(--honey); }
.binding i:nth-child(3){ background:var(--sage); }
.binding i:nth-child(4){ background:var(--seal); }
.binding i:nth-child(5){ background:var(--lilac); }

/* 刊头：小印变实印；日期前一颗天光点 */
.mini-seal{ background:var(--seal); color:#F8F0E2; border-color:var(--seal); opacity:.92; }
.masthead .date::before{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--sky); margin-right:6px; vertical-align:1px;
}

/* 功能栏：四枚图标上色，标题仍墨色（昼夜不上色） */
.sq-bar-item[data-tool="context"] svg{ color:#5E8FA4; }
.sq-bar-item[data-tool="journal"] svg{ color:#C08A2A; }
.sq-bar-item[data-tool="full"] svg{ color:#6F8A66; }
.sq-bar-item[data-tool="me"] svg{ color:var(--seal); }

/* 竖栏导航：未选中的三个字各给自己一点颜色；选中页改蜜黄 */
.paper .sq-nav{
  --q-face:color-mix(in srgb,var(--honey-2) 46%,var(--paper));
}
.paper .sq-nav input:not(:checked) + .sq-tab[data-nav="later"]{ color:#5E8FA4; }
.paper .sq-nav input:not(:checked) + .sq-tab[data-nav="archive"]{ color:#6F8A66; }
.paper .sq-nav input:not(:checked) + .sq-tab[data-nav="about"]{ color:#8E7CA6; }
.paper .sq-nav input:checked + .sq-tab{ background:var(--q-face); }
.paper .sq-nav input:checked + .sq-tab::before{ box-shadow:-4px -4px 0 4px var(--q-face); }
.paper .sq-nav input:checked + .sq-tab::after{ box-shadow:-4px 4px 0 4px var(--q-face); }

/* 封面：小字转鼠尾草绿 */
.cover-text p{ color:#7C8B70; }

/* 定位胶囊：天光底；定位成功转鼠尾草 */
.loc-chip{
  background:color-mix(in srgb,var(--sky-2) 52%,transparent);
  border-color:color-mix(in srgb,var(--sky) 42%,var(--line));
}
.loc-chip[data-state="ok"]{
  color:#3F6B52;
  border-color:color-mix(in srgb,#3F6B52 40%,var(--line));
  background:color-mix(in srgb,var(--sage-2) 62%,transparent);
}
.loc-chip[data-state="ok"] i{ background:#3F6B52; }

/* 拆信墨点：改朱砂；外圈呼吸线改蜜黄 */
.ink-dot b{ background:var(--seal); box-shadow:0 2px 9px rgba(163,52,39,.34); }
.ink-dot::after{ border-color:color-mix(in srgb,var(--honey) 55%,transparent); }

/* 页脚：封号用朱砂 */
#foot{ color:var(--seal); }

/* 揭晓：时长改朱砂，注释转鼠尾草 */
.meta-row i{ color:var(--seal); }
.drawn-text .note{ color:#7C8B70; }

/* 进行中：进度数字转深绿 */
.progress b{ color:#3F6B52; }

/* 留页封面：蜜黄书签线 + 暖白书名 + 暖金封印（标题保持生产绝对定位，只加伪元素线） */
.b-cover-title::before{
  content:""; position:absolute; right:-12px; top:0; bottom:0; width:2px;
  background:var(--honey); opacity:.6;
}
.b-cover-title h2{ color:#F7EAC8; }
.b-cover-title small{ color:rgba(244,220,160,.7); }
.b-cover-top{ color:rgba(244,220,160,.72); }
.b-cover-seal{ border-color:rgba(244,220,160,.62); color:#F4DCA0; }

/* 跋：头像印改实印；三块入口各一条彩线；空留页虚线分色 */
.me-seal{ background:var(--seal); border-color:var(--seal); color:#F8F0E2; }
.fan-pane::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--sky); opacity:.9;
}
.fan-pane:nth-child(2)::before{ background:var(--honey); }
.fan-pane:nth-child(3)::before{ background:var(--sage); }
.me-slot:nth-child(1){ border-color:color-mix(in srgb,var(--sky) 56%,var(--line)); }
.me-slot:nth-child(2){ border-color:color-mix(in srgb,var(--honey) 56%,var(--line)); }
.me-slot:nth-child(3){ border-color:color-mix(in srgb,var(--sage) 56%,var(--line)); }

/* 留页内页：页码朱砂，四角相角转蜜黄 */
.b-page{ color:var(--seal); }
.b-corners i{ border-color:color-mix(in srgb,var(--honey) 62%,transparent); }

/* 完成卡：底部印章改实印 */
.card-stamp{ background:var(--seal); color:#F8F0E2; }

/* 稍后小笺：序号圈用蜜黄底 */
.later-index{ background:var(--honey-2); }

/* 夜间：同一套彩点提亮一档，选中页改成暗蜜黄 + 浅字 */
.paper[data-night="1"] .sq-nav{
  --q-face:color-mix(in srgb,var(--honey) 26%,var(--paper-2));
}
.paper[data-night="1"] .sq-nav input:checked + .sq-tab{ color:#F2DCAE; }
.paper[data-night="1"] .sq-nav input:not(:checked) + .sq-tab[data-nav="later"]{ color:#A9CEDD; }
.paper[data-night="1"] .sq-nav input:not(:checked) + .sq-tab[data-nav="archive"]{ color:#B4CCA9; }
.paper[data-night="1"] .sq-nav input:not(:checked) + .sq-tab[data-nav="about"]{ color:#CBBBDD; }
.paper[data-night="1"] .sq-bar-item[data-tool="context"] svg{ color:#A9CEDD; }
.paper[data-night="1"] .sq-bar-item[data-tool="journal"] svg{ color:#E8C477; }
.paper[data-night="1"] .sq-bar-item[data-tool="full"] svg{ color:#B4CCA9; }
.paper[data-night="1"] .loc-chip{ background:color-mix(in srgb,#A9CEDD 14%,transparent); }
.paper[data-night="1"] .cover-text p{ color:#A9B79B; }

/* ---------- 支线日记覆盖层（./diary.html） ---------- */
body.locked{ overflow:hidden; }
.diary-overlay{
  position:fixed; inset:0; z-index:90; background:#F2EDE0;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .18s ease;
}
.diary-overlay.is-open{ opacity:1; visibility:visible; }
.diary-overlay iframe{
  flex:1; width:100%; border:0; background:#F2EDE0;
}
.diary-close{
  align-self:flex-start; margin:10px 12px 0; min-height:40px; padding:0 16px;
  border:1px solid var(--line, rgba(19,28,22,.12)); border-radius:999px;
  background:var(--card, #FFFDF7); color:var(--ink, #131C16);
  font-family:var(--sans, system-ui, sans-serif); font-size:13px; letter-spacing:.12em;
  cursor:pointer; z-index:2;
}
.diary-close:active{ filter:brightness(.96); }

/* ---------- 照片裁剪层：交互学「支线日记」精修台（拖动改构图 + 缩放 + 翻转旋转），
   但皮用纸墨自己的：米白纸盒、朱砂主按钮、等宽读数，不给弹窗黑底。 ---------- */
.cut-sheet{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; }
.cut-mask{ position:absolute; inset:0; background:rgba(20,17,13,.52); }
.cut-box{ position:relative; width:min(340px,92vw); background:var(--paper); border:1px solid var(--line);
  box-shadow:0 18px 44px -18px rgba(20,17,13,.55); padding:14px 16px 12px; }
.cut-head{ display:flex; align-items:baseline; gap:8px; }
.cut-head h3{ margin:0; font-family:var(--font-card); font-size:15px; font-weight:500; letter-spacing:.14em; color:var(--ink); }
.cut-head p{ flex:1; min-width:0; margin:0; font-size:9.5px; line-height:1.6; color:var(--ink-3); }
.cut-x{ flex:none; width:22px; height:22px; border:1px solid var(--line); background:transparent;
  color:var(--ink-2); font-size:14px; line-height:1; cursor:pointer; }
.cut-stage{ position:relative; width:min(296px,78vw); margin:12px auto 10px; }
.cut-stage canvas{ display:block; width:100%; height:auto; touch-action:none; cursor:grab; background:#12100d; }
.cut-stage canvas:active{ cursor:grabbing; }
/* 三分参考线：只帮构图，不遮图 */
.cut-grid{ position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(255,253,247,.6) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,253,247,.6) 1px,transparent 1px);
  background-size:33.34% 33.34%; background-position:0 0; }
.cut-hint{ position:absolute; left:50%; bottom:7px; transform:translateX(-50%); white-space:nowrap;
  font-size:9px; letter-spacing:.16em; color:rgba(255,253,247,.86); background:rgba(20,17,13,.44); padding:3px 8px; }
.cut-zoom{ display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.14em; color:var(--ink-2); }
.cut-zoom input[type=range]{ flex:1; min-width:0; accent-color:var(--seal); }
.cut-zoom b{ flex:none; width:36px; text-align:right; font-family:var(--font-mono); font-size:10px; font-weight:400; color:var(--ink-3); }
.cut-btns{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.cut-btns button{ flex:1 0 auto; min-height:34px; padding:0 8px; font-size:10px; letter-spacing:.1em;
  font-family:var(--font-ui); background:transparent; border:1px solid var(--line); color:var(--ink-2); cursor:pointer; }
.cut-btns button:active{ background:color-mix(in srgb,var(--ink-2) 12%,transparent); }
.cut-foot{ display:flex; gap:10px; margin-top:13px; }
.cut-foot button{ flex:1; height:36px; font-size:11px; letter-spacing:.16em; font-family:var(--font-ui); cursor:pointer; }
.cut-foot .ghost{ background:transparent; border:1px solid var(--line); color:var(--ink-2); }
.cut-foot .primary{ background:var(--seal); border:1px solid var(--seal); color:#f8f2e6; }
/* 重裁入口：跟在照片预览的 × 旁边，只在已有照片时可点。
   .pick-preview button 那一条会给所有按钮挂一个 × 小角标，这里必须洗掉。 */
.pick-preview .cut-again{ position:absolute; left:5px; bottom:5px; right:auto; top:auto; width:22px; height:22px;
  border-radius:0; border:1px solid var(--line); background:color-mix(in srgb,var(--paper) 84%,transparent);
  color:var(--ink-2); font-size:10px; line-height:1; display:grid; place-items:center; cursor:pointer; }
.pick-preview .cut-again::before{ content:none; }
.pick-preview:not(.is-on) .cut-again{ display:none; }

/* ===== 现代改造：右侧竖栏导航 -> 底部横排胶囊（照 5292 next-nav） ===== */
.paper .sq-nav#rail{
  left:50% !important; right:auto !important; top:auto !important;
  bottom:max(12px,env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  width:min(420px,calc(100% - 24px)) !important;
  flex-direction:row !important; align-items:center !important;
  gap:6px !important; padding:6px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid #d0d9cd !important;
  border-radius:30px !important;
  box-shadow:0 12px 42px rgba(36,62,40,.19) !important;
  backdrop-filter:blur(18px) !important;
  height:auto !important; z-index:60 !important;
}
.paper .sq-nav#rail .sq-tab{
  writing-mode:horizontal-tb !important;
  letter-spacing:0 !important; text-indent:0 !important;
  min-height:46px !important; min-width:0 !important;
  flex:1 1 0 !important;
  border-radius:24px !important;
  background:transparent !important;
  color:#4a5b49 !important;
  font-size:13px !important; font-weight:600 !important;
  display:grid !important; place-items:center !important;
}
.paper .sq-nav#rail .sq-tab::before,
.paper .sq-nav#rail .sq-tab::after{ display:none !important; }
.paper .sq-nav#rail input:checked + .sq-tab{
  background:#256081 !important; color:#f9fff5 !important; font-weight:800 !important;
  border-radius:24px !important;
}
.paper .sheet{ right:24px !important; }
.paper .footline{ right:24px !important; }

/* 现代改造补：强制底部胶囊常驻显示 */
.paper .sq-nav#rail{
  position:fixed !important;
  visibility:visible !important; opacity:1 !important;
  display:flex !important;
}

/* ===== 现代改造：去掉全屏按钮 + 去掉缩放控件，默认全屏铺满 ===== */
.paper .sq-bar-item[data-tool="full"]{ display:none !important; }
.zknob, .zoom-knob, .zoom-slider, [class*="zoom"]{ display:none !important; }
/* .paper 本身铺满，不要缩放 transform */
.paper{ transform:none !important; }
.zdock{ display:none !important; }

/* finesse · register=h5/product · design-language=apple · apple-mode=app
   Surface treatment only: the supplied 5319 layout and APK page flow stay in place. */
.paper{
  --paper:#f0f2ef;--paper-2:#fcfdfb;--paper-3:#e5ebe8;
  --ink:#172421;--ink-2:#365667;--ink-3:#53666b;
  --seal:#256081;--line:#25608130;--desk:#256081;
  background:radial-gradient(ellipse at 84% 12%,#e3eff4 0,transparent 56%),var(--paper);
}
.paper[data-night="1"]{
  --paper:#182328;--paper-2:#20343d;--paper-3:#293f48;
  --ink:#f3f7f7;--ink-2:#bad9e7;--ink-3:#a8bbc3;--seal:#e0d457;--line:#aac5d43b;
  background:radial-gradient(ellipse at 84% 12%,#264b5b 0,transparent 56%),var(--paper);
}
.paper .sq-nav#rail{background:#fbfdfbe8!important;border-color:#ccd9dc!important;box-shadow:0 9px 26px #203c451e!important}
.paper .sq-nav#rail .sq-tab{color:#365667!important}
.paper .sq-nav#rail input:checked + .sq-tab{background:#256081!important;color:#fff!important}
.paper .seal:not([disabled]){background:#e0d457;color:#183143;border-radius:19px;box-shadow:0 5px 15px #5e591a28}
.paper .seal:not([disabled])::after{border-color:#66591635;border-radius:16px}
.paper .seal:disabled{border-radius:19px}
.paper .cover-text h1 em{color:#256081}
.paper .card,.paper .cut-box,.paper .later-card{border-radius:21px;box-shadow:0 8px 22px #183b4c1c}
.paper .pick,.paper .cut-foot button,.paper .cut-btns button{border-radius:14px}
.paper .step.done .dot{background:#ca84b4;border-color:#8d527b}
.paper .step .sq-check{--q-sel-ink:#256081;--q-mark:#fff}
.paper[data-night="1"] .cover-text h1 em{color:#e0d457}
.paper[data-night="1"] .sq-nav#rail{background:#20343df0!important;border-color:#45616c!important}
.paper[data-night="1"] .sq-nav#rail .sq-tab{color:#d1e5ed!important}
.paper[data-night="1"] .sq-nav#rail input:checked + .sq-tab{background:#e0d457!important;color:#142b3a!important}
@media(prefers-reduced-motion:no-preference){.paper .seal:not([disabled]){transition:transform .2s cubic-bezier(.2,.75,.25,1),box-shadow .2s ease}}
@media(prefers-reduced-transparency:reduce){.paper .sq-nav#rail{backdrop-filter:none!important;background:var(--paper-2)!important}}

/* Reference gradients, laid over the same neutral reading surface. */
.paper{--tone-start:#f4dc84;--tone-end:#79bedf;--tone-ink:#214e65}
html[data-tone="mist"] .paper{--tone-start:#c9ddc4;--tone-end:#1f5cac;--tone-ink:#1e4885}
html[data-tone="sunset"] .paper{--tone-start:#fbe693;--tone-end:#fe8e28;--tone-ink:#743c15}
.paper:not([data-night="1"]){
  --seal:var(--tone-ink);
  background:linear-gradient(155deg,color-mix(in srgb,var(--tone-start) 47%,#f7f9f7),#f7f9f7 56%,color-mix(in srgb,var(--tone-end) 31%,#f7f9f7));
}
.paper:not([data-night="1"]) .cover-text h1 em{color:var(--tone-ink)}
.paper:not([data-night="1"]) .sq-nav#rail input:checked + .sq-tab{background:var(--tone-ink)!important}
.paper:not([data-night="1"]) .seal:not([disabled]),.paper:not([data-night="1"]) .ink-dot{
  background:linear-gradient(145deg,var(--tone-start),color-mix(in srgb,var(--tone-end) 62%,var(--tone-start)));
  color:#172421;box-shadow:0 5px 15px color-mix(in srgb,var(--tone-ink) 20%,transparent)
}
.paper:not([data-night="1"]) .ink-dot{border-radius:50%}

/* The supplied bottom rail overlapped the next action on the drawn screen. */
.paper .sheet:has(.page:is(.drawn,.active,.compose,.done,.viewer)){
  bottom:calc(max(12px,env(safe-area-inset-bottom)) + 66px);
}

/* Studio, the default preview. Explicit gradient variants remain available. */
html:not([data-tone]) .paper:not([data-night="1"]){
 --paper:#f3f4f6;--paper-2:#fdfdfd;--paper-3:#e9edf3;--ink:#1b222a;--ink-2:#364d5a;--ink-3:#566371;--line:#d6dce4;
 --tone-start:#e0d457;--tone-end:#ca84b4;--tone-ink:#256081;
 background:radial-gradient(ellipse at 89% 13%,#dee9f5,transparent 53%),radial-gradient(ellipse at 11% 83%,#f0e5f0,transparent 38%),#f6f7f9;
}
html:not([data-tone]) .paper:not([data-night="1"]) .ink-dot{background:#20252e;box-shadow:0 7px 20px #2631462c}
html:not([data-tone]) .paper:not([data-night="1"]) .ink-dot b{background:#e0d457;box-shadow:0 0 12px #e0d4574d}
html:not([data-tone]) .paper:not([data-night="1"]) .seal:not([disabled]){background:#e0d457;color:#25313b}
html:not([data-tone]) .paper:not([data-night="1"]) .sq-nav#rail{background:#fdfdfff0!important;border-color:#fff!important;box-shadow:0 8px 28px #2e3e5b23!important}
html:not([data-tone]) .paper:not([data-night="1"]) .sq-bar-item[data-tool="journal"] svg{color:#8b507e}

/* Full viewport preview, with the directory removed from the bottom edge. */
html:has(.paper),body:has(.paper){width:100%;height:100%;margin:0;overflow:hidden}
body:has(.paper){display:block}
body:has(.paper) #rig,body:has(.paper) #stage.paper{
 width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;
 border-radius:0!important;box-shadow:none!important;
}
.paper .sq-nav#rail{display:none!important}
.paper .sheet,.paper .sheet:has(.page:is(.drawn,.active,.compose,.done,.viewer)){
 right:15px!important;bottom:calc(38px + var(--sq-safe-bottom,0px));
 top:calc(var(--sq-top,26px) + 114px);
}
.paper:has(#sqBar[data-open="0"]) .sheet{top:calc(var(--sq-top,26px) + 76px)}
.paper #sqBar[data-open="0"]{
 left:0;top:calc(var(--sq-top,26px) + 34px);transform:none;border-radius:0 999px 999px 0;
}
.paper .me-shortcuts{display:flex;gap:12px;flex:none}
.paper .me-shortcuts button{min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:18px;background:var(--paper-2)}
#rig:has(#stage.paper){transform:none!important;margin:0!important}

/* Horizontal homepage and family-tinted draw reveal. */
.paper[data-screen=idle],.paper[data-screen=drawn]{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif}
.paper[data-screen=idle] .binding,.paper[data-screen=drawn] .binding{opacity:.18}
.paper:is([data-screen=idle],[data-screen=drawn]) .sheet{left:max(14px,calc((100% - 900px)/2));right:max(14px,calc((100% - 900px)/2))!important}
.paper .field-home{gap:12px;justify-content:center}
.paper .field-home::after,.paper .page.drawn::after{content:none!important}
.field-feature,.field-channel,.paper .page.drawn{border-radius:28px;overflow:hidden;border:1px solid #fff9;box-shadow:0 9px 28px #253f4e19}
.field-feature{display:grid;grid-template-columns:1.15fr 1fr;min-height:clamp(142px,28dvh,245px);background:linear-gradient(145deg,#ecf7f3,#cee3ee);color:#182b30}
.field-editorial{padding:clamp(13px,4vw,28px);align-self:center}
.field-kicker{display:block;font:700 10px/1.4 system-ui;letter-spacing:.12em}
.field-editorial h1{font:800 clamp(23px,5.1vw,48px)/1.13 system-ui;margin:9px 0;letter-spacing:-.045em}
.field-editorial p,.field-channel p{font-size:13px;line-height:1.45;margin:0}
.field-feature-art{width:100%;height:100%;min-height:0;object-fit:cover;mask-image:linear-gradient(90deg,transparent,#000 24%)}
.field-channels{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-channel{display:grid;gap:5px;padding:clamp(11px,3vw,21px);background:#faf9f3;color:#273632}
.field-channel h2{font:750 clamp(15px,3.9vw,27px)/1.2 system-ui;margin:0;overflow-wrap:anywhere}
.field-side{background:#203b43;color:#f1fcf6}
.field-channel button,.field-track button{justify-self:start;padding:8px 11px;min-height:40px;border-radius:19px;background:#e0ebde;color:#203630;font:750 12px/1.2 system-ui}
.field-side button{background:#e4f6aa}
.paper .field-home .loc-chip{margin:0;align-self:flex-start}
.paper[data-screen=drawn]{background:var(--field-wash);transition:background .55s ease}
.paper .page.drawn{isolation:isolate;position:relative;background:linear-gradient(145deg,var(--field-wash),var(--field-accent));color:#172725;padding:clamp(14px,4vw,28px)}
.paper .page.drawn::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--plate) center/cover;mix-blend-mode:multiply;opacity:.67;mask-image:linear-gradient(160deg,transparent 14%,#000 63%,transparent 105%)}
.paper .drawn-text{padding:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.paper .drawn-text h2{writing-mode:horizontal-tb;font:800 clamp(25px,6vw,52px)/1.19 system-ui;letter-spacing:-.045em;margin:10px 0 5px;max-width:19em;text-shadow:none}
.paper .drawn-text p{writing-mode:horizontal-tb;font:500 clamp(13px,3.2vw,17px)/1.45 system-ui;margin:5px 0;letter-spacing:0;color:#213930}
.paper .drawn-text h2 .ch{display:inline;animation:none;opacity:1}
.paper .drawn-text h2 .ch::after{display:none}
.paper .drawn-dock{height:auto;min-height:58px;align-items:center}
.field-track{width:min(370px,calc(100% - 24px));box-sizing:border-box;border:1px solid #d7e1de;border-radius:26px;padding:18px;background:#fcfdfa;color:#223631;font:15px/1.45 system-ui}
.field-track::backdrop{background:#152c275e}.field-track header{display:flex;justify-content:space-between;align-items:center}.field-track h2{margin:0;font-size:22px}
.field-track form{display:grid;gap:8px;margin:12px 0}.field-track label{display:grid;gap:5px}.field-track input{font:inherit;padding:9px;border-radius:12px;border:1px solid #afc2b9}
@media(max-height:690px){.paper .field-home{gap:7px}.field-feature{min-height:125px}.field-channel{gap:4px}.field-channel button{min-height:34px}}
@media(prefers-reduced-motion:reduce){.paper[data-screen=drawn]{transition:none}}

.field-reflect{display:flex;gap:5px;align-items:center;justify-content:space-between;background:#eef0f7;border-radius:20px;padding:7px 9px;color:#263543}
.field-reflect strong{font-size:13px}.field-reflect button{padding:5px 7px;min-height:38px;border-radius:15px;background:#fff9;color:#263543;font:700 11px system-ui}
.field-track .reflect-choice{display:flex;align-items:center;gap:8px;min-height:42px;background:#edf2ee;border-radius:13px;padding:0 9px}
.field-track blockquote{margin:12px 0;background:#edf2ee;padding:12px;border-radius:14px}
@media(max-height:690px){.paper .field-feature{min-height:113px}.paper .field-home .loc-chip{min-height:30px}.paper .field-home{gap:6px}}

/* Play preview: warm color fields, layered tabs and a geometric mascot. */
html[data-look=play] .paper[data-screen=idle]{background:#fae17f}
html[data-look=play] .paper:is([data-screen=idle],[data-screen=drawn]) .sheet{left:max(14px,calc((100% - 540px)/2));right:max(14px,calc((100% - 540px)/2))!important}
html[data-look=play] .paper:is([data-screen=idle],[data-screen=drawn]) .binding{display:none}
html[data-look=play] .paper .field-home{gap:10px;justify-content:center}
html[data-look=play] .field-feature{background:#fff9e7;border-color:#fff3c5;min-height:clamp(150px,29dvh,260px);position:relative;grid-template-columns:1.25fr 1fr;box-shadow:none}
html[data-look=play] .field-editorial{position:relative;z-index:1}
html[data-look=play] .field-editorial h1{color:#20231b;font-size:clamp(25px,6.4vw,44px)}
html[data-look=play] .field-editorial p{color:#424536}
html[data-look=play] .field-channels{position:relative;gap:8px;margin-top:13px}
html[data-look=play] .field-channels::before,html[data-look=play] .field-channels::after{content:"";position:absolute;z-index:-1;height:32px;top:-11px;border-radius:15px}
html[data-look=play] .field-channels::before{left:5px;width:49%;background:#f1b0d5;transform:rotate(-4deg)}
html[data-look=play] .field-channels::after{right:5px;width:49%;background:#bdd5f1;transform:rotate(4deg)}
html[data-look=play] .field-channel{border:0;box-shadow:none;border-radius:22px;background:#c8d59a;color:#242c1a}
html[data-look=play] .field-side{background:#c5d9f0;color:#202c3b}
html[data-look=play] .field-channel button{background:#20251b;color:#fffbed;border-radius:999px}
html[data-look=play] .field-reflect{background:#f4c0db}
html[data-look=play] .paper[data-screen=drawn]{background:#202727}
html[data-look=play] .paper[data-screen=drawn] .masthead :is(.name,.date),html[data-look=play] .paper[data-screen=drawn] .footline{color:#f7f1dc}
html[data-look=play] .paper .page.drawn{display:grid;grid-template-rows:minmax(0,1fr) minmax(90px,.85fr) auto;gap:4px;background:linear-gradient(180deg,#fff7db,var(--field-wash) 55%,var(--field-accent));border-radius:32px;padding:14px}
html[data-look=play] .paper .page.drawn::before{opacity:.16}
html[data-look=play] .drawn-text{justify-content:center;text-align:center;align-items:center;overflow:visible}
html[data-look=play] .drawn-text h2{font-size:clamp(22px,6vw,44px)}
html[data-look=play] .drawn-text .note{font-size:12px}
html[data-look=play] .paper .drawn-dock .seal{background:#202727;color:#fff8e6;border-radius:24px}
@media(max-height:680px){html[data-look=play] .field-feature{min-height:120px}html[data-look=play] .paper .field-home{gap:6px}html[data-look=play] .field-channels{margin-top:7px}}
html[data-look=play] .paper .page.drawn{height:100%;box-sizing:border-box;grid-template-rows:minmax(min-content,1fr) minmax(0,.85fr) auto}

/* Continuous palette drift, with a stable reading surface over it. */
html[data-look=play] .paper:is([data-screen=idle],[data-screen=drawn]){
 background-image:linear-gradient(125deg,#f4dc84,#79bedf,#c9ddc4,#1f5cac,#b8a9c6,#ff81a6,#e4f6aa,#fbe693,#fe8e28,#f4dc84);
 background-size:430% 430%;background-position:0 50%;
}
html[data-look=play] .field-feature{background:linear-gradient(145deg,#fffaf0e8,#e8f4f3e6)}
html[data-look=play] .field-channel{background:linear-gradient(140deg,#eff4d9f2,#c9ddc4ed)}
html[data-look=play] .field-side{background:linear-gradient(140deg,#f2f3ffed,#c4dcefec)}
html[data-look=play] .field-reflect{background:linear-gradient(110deg,#f9efedf2,#eed5eaf0)}
html[data-look=play] .paper .page.drawn{grid-template-rows:minmax(0,1fr) auto}
html[data-look=play] .paper .page.drawn::before{opacity:.53;mask-image:linear-gradient(165deg,transparent 12%,#000 67%,transparent 112%)}
html[data-look=play] .paper[data-screen=drawn] .masthead :is(.name,.date),html[data-look=play] .paper[data-screen=drawn] .footline{color:#182e38}
@media(prefers-reduced-motion:no-preference){
 html[data-look=play] .paper:is([data-screen=idle],[data-screen=drawn]){animation:play-gradient-drift 36s ease-in-out infinite alternate}
 @keyframes play-gradient-drift{to{background-position:100% 50%}}
}