/*
 * 共此时（SPEC-together §6；由 Claude Code 亲自做）。
 * 墙是"一间屋子，两种光"：一整面墙，颜色在两边的墙色之间做一道很宽、很柔的过渡，没有硬线。
 * 窗的位图层只做 transform 与 opacity；SVG 风景里仍然不用渐变。
 */
/* 墙纸：固定在最底层，两种光之间一道很宽、很柔的过渡；换色时新的一层淡入（together-view.js）。 */
.tg-wallpaper { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.tg-wp { position: absolute; inset: 0; will-change: opacity; }
/* 画布（html）用中间色兜底；body 透明，否则会盖住 z-index:-1 的墙纸。 */
html.tg-wall { background: var(--wall); }
html.tg-wall body { background: transparent; }
/* 不在 :root 上过渡继承的颜色变量（会让两扇窗的几千个节点每帧重算样式）；各文字容器自己过渡 --ink 等
   （home.css 用 @property 注册过，可以插值），容器里的字继承过渡中的值。opacity 的时长由 fadeChrome 设。 */
:root.tg-wall { transition: none; }
.tg-wall .room-sign, .tg-wall .room-nav, .tg-wall .now, .tg-wall .proto-panel {
  transition: --ink var(--tg-text-ms, 900ms) var(--ease-light), --ink-muted var(--tg-text-ms, 900ms) var(--ease-light),
    --chip var(--tg-text-ms, 900ms) var(--ease-light), opacity var(--tg-chrome-ms, .6s) var(--ease-light),
    transform .8s var(--ease-light); }

/* 窗：两扇实时的窗叠在同一个 4:5 的盒子里，各露一半 */
.tg-box { isolation: isolate; }
.tg-live { position: absolute; inset: 0; }
.tg-side { position: absolute; inset: 0; }
.tg-live[data-view="both"] .tg-side-me { clip-path: inset(0 47.4167% 0 0); }
.tg-live[data-view="both"] .tg-side-them { clip-path: inset(0 0 0 52.5833%); }
.tg-live[data-view="me"] .tg-side-them, .tg-live[data-view="them"] .tg-side-me { visibility: hidden; }
.tg-seam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tg-live:not([data-view="both"]) > .tg-seam { visibility: hidden; }
.tg-ghost { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* 拼合动画的图层（位图） */
.tg-anim { position: absolute; inset: 0; z-index: 2; pointer-events: auto; } /* 轻点跳过拼合 */
.tg-win, .tg-fold, .tg-fold-in, .tg-winbox { position: absolute; inset: 0; }
.tg-win { will-change: transform, opacity; }
.tg-fold { overflow: hidden; will-change: transform; }
.tg-fold-in { will-change: transform; }
.tg-open { position: absolute; overflow: hidden; }
.tg-viewlayer { position: absolute; will-change: transform; }
.tg-viewlayer canvas, .tg-winbox > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tg-seam-anim { z-index: 1; will-change: transform, opacity; }

/* 穿窗而过（D-2026-10-06-38）：满屏的一层，室内与窗外各自缩放；轻点跳过。
   缩放的层不加 will-change：浏览器按动画的最大倍数栅格化，平涂色块放大后仍是清晰的边。 */
.tg-dive { position: fixed; inset: 0; z-index: 40; overflow: hidden; contain: strict; cursor: pointer; touch-action: none; }
.tg-dive-layer { position: absolute; }
.tg-dive-layer > *, .tg-dive-bits > * { position: absolute; }
.tg-dive-bits { inset: 0; }
.tg-dive-full { left: 0; top: 0; width: 100%; height: 100%; display: block; }
.tg-dive-strip { display: block; }
.tg-dive-caption { position: absolute; left: 0; right: 0; margin: 0; padding: 0 1.5rem; text-align: center; pointer-events: none; opacity: 0;
  font-family: var(--font-serif); font-size: clamp(1.1rem, 1.7vw, 1.4rem); letter-spacing: .08em; line-height: 1.8; transform: translateY(-50%); }
/* 页面文字在穿窗层之上淡出（前 0.4 秒），不被盖住后突然消失。 */
html.tg-diving .room-sign, html.tg-diving .room-nav, html.tg-diving .now { z-index: 41; }

/* "此刻"：看法、句子、两边简况、窗台动作 */
.tg-views { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1.35rem; margin: 0 0 .35rem;
  font-family: var(--font-sans); font-size: .74rem; }
.tg-views .seg { min-height: 40px; padding: .45rem 0; }
.tg-replay { color: var(--ink-muted); opacity: .78; }
.tg-views .tg-replay { margin-left: .4rem; }
.tg-line2-sep { display: inline-block; margin: 0 .55em; opacity: .55; }
.tg-actions { margin-top: .15rem; }
.tg-actions .tool-link { letter-spacing: .08em; }

/* 原型页的控制条（只在 proto/together.html） */
.proto-panel { max-width: 62rem; margin: 0 auto; padding: 1.2rem 1.5rem 3rem; font-family: var(--font-sans); font-size: .72rem; color: var(--ink-muted); }
.proto-panel h2 { font-size: .72rem; font-weight: 500; letter-spacing: .14em; margin: 0 0 .6rem; color: var(--ink); }
.proto-panel p { margin: .2rem 0 .6rem; line-height: 1.8; }
.proto-panel .row { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .35rem 0; }
.proto-panel a, .proto-panel button { color: inherit; background: none; border: 0; padding: .35rem 0; font: inherit; cursor: pointer; text-underline-offset: .3em; }
.proto-panel a[aria-current="true"], .proto-panel button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; }

/* 手机横屏：窗靠左占满高度，"此刻"放在窗的右侧 */
@media (orientation: landscape) and (max-height: 520px) {
  .room-sign { position: absolute; top: auto; bottom: .7rem; left: auto; right: 1.4rem; text-align: right; }
  .room-sign h1 { font-size: .95rem; }
  .room-sign p { font-size: .5rem; margin-top: .25rem; }
  .room { min-height: 100dvh; grid-template-columns: minmax(0, auto) minmax(0, 1fr); grid-template-rows: auto 1fr auto;
    grid-template-areas: "stage nav" "stage now" "art art"; padding: .4rem 1rem .4rem 1rem; }
  .room .stage-wrap { height: calc(100vh - .8rem); height: calc(100svh - .8rem); max-width: none; width: auto; }
  .room-nav { grid-area: nav; justify-self: stretch; flex-direction: row; justify-content: flex-end; align-items: center; gap: 1.2rem;
    display: flex; flex-wrap: wrap; padding: .2rem 0 0 1rem; }
  .room-nav .sky-toggle { margin: 0; }
  .room-nav .nav-pages { flex-direction: row; gap: 1rem; }
  .now { grid-area: now; align-self: center; text-align: left; width: auto; max-width: 30rem; padding: 0 .5rem 2.5rem 1.6rem; }
  .now-line1 { font-size: 1.05rem; }
  .tg-views, .now-tools { justify-content: flex-start; }
  /* 横屏是左右两列；托盘退出竖屏的隐式 tray 网格，署名仍留在右下。 */
  .elsewhere { position: fixed; grid-area: auto; display: block; left: 0; right: var(--tray-sign-space, 10rem); width: auto;
    margin-top: 0; padding: 0 0 .9rem; transform: translateY(18px);
    transition: opacity .7s var(--ease-light), transform .8s var(--ease-light), visibility 0s linear .8s; }
  .tray-open .elsewhere { margin-top: 0; transform: none;
    transition: opacity .9s var(--ease-light) .12s, transform .9s var(--ease-light) .12s, visibility 0s; }
  .elsewhere-inner { overflow: visible; }
  .elsewhere-row { padding-top: .3rem; padding-bottom: .25rem; }
  .pane { --pane-w: clamp(54px, 5vw, 80px); }
  .elsewhere-close { position: absolute; right: calc(1.4rem - var(--tray-sign-space, 10rem)); bottom: 3.3rem; margin: 0; }
  .tray-open .stage-wrap { transform: translateY(var(--tray-stage-y, 0px)) scale(var(--tray-scale, 1)); }
  .tray-open .now { justify-self: stretch; min-width: 0; padding-bottom: 0; transform: translateY(var(--tray-now-y, 0px)); }
  .tray-open .now:has(.tg-traces.is-hint) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; }
  .tray-open .now > .now-line1, .tray-open .now > .now-line2 { flex-basis: 100%; }
  .tray-open .now > .tg-traces.is-hint { margin-right: auto; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 760px) {
  /* 窄横屏改用固定托盘，仍保留原窄屏淡入淡出和 750ms 的布局运动。 */
  .elsewhere { transition: opacity .6s var(--ease-light), transform .75s var(--ease-light), visibility 0s linear .75s; }
  .tray-open .elsewhere { transition: opacity .8s var(--ease-light) .15s, transform .75s var(--ease-light), visibility 0s; }
}

/* 共此时的"此刻"比首页多一行（三种看法），窗略小一点，让四行都在第一屏里；窗台下那段空墙收一些。 */
.together .stage-wrap { height: min(82vh, 900px); height: min(calc(100dvh - 12.5rem), 900px); }
.together .now { margin-top: -4.2rem; }
@media (max-width: 760px), (max-aspect-ratio: 3/4) {
  .together .stage-wrap { height: auto; }
  .together .now { margin-top: -2.2rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* svh：地址栏收起时窗不跟着变大（变大会让预先画好的位图作废）。 */
  .together .stage-wrap { height: calc(100vh - .8rem); height: calc(100svh - .8rem); }
  .together .now { margin-top: 0; }
}
/* 矮的竖屏手机（375×667、360×640）：窗略收小，拼合后的那句话和两边简况留在第一屏。 */
@media (max-width: 760px) and (max-height: 760px) and (orientation: portrait) {
  .together .stage-wrap { width: min(100vw, 36rem, calc((100vh - 16.5rem) * .8)); width: min(100vw, 36rem, calc((100svh - 16.5rem) * .8));
    justify-self: center; }
}

/* 很窄的手机：三种看法加三个页面放不进一行，页面链接换到第二行，不拆字。 */
.together .nav-link, .together .seg { white-space: nowrap; }
@media (max-width: 400px) {
  .together .room-nav { grid-template-columns: 1fr; row-gap: 0; }
  .together .sky-toggle { gap: 1.1rem; }
  .together .nav-pages { justify-content: flex-start; gap: 1.3rem; }
}

/* 文字按位置取色（together-view.js 的 setWall）：标题在左上，跟我这边的墙；桌面导航在右上，跟 TA 那边的墙。 */
.tg-wall .room-sign { --ink: var(--tg-ink-a); --ink-muted: var(--tg-ink-muted-a); color: var(--ink); }
.tg-wall .room-nav { --ink: var(--tg-ink-b); --ink-muted: var(--tg-ink-muted-b); color: var(--ink); }
@media (max-width: 760px), (max-aspect-ratio: 3/4) {
  /* 手机：导航在顶上横排，左边的"看法"跟我这边，右边的页面跟 TA 那边。 */
  .tg-wall .room-nav { --ink: var(--tg-ink-a); --ink-muted: var(--tg-ink-muted-a); }
  .tg-wall .room-nav .nav-pages { --ink: var(--tg-ink-b); --ink-muted: var(--tg-ink-muted-b); color: var(--ink);
    transition: --ink var(--tg-text-ms, 900ms) var(--ease-light), --ink-muted var(--tg-text-ms, 900ms) var(--ease-light); }
}
@media (max-width: 400px) {
  /* 很窄时页面链接换到第二行、靠左，压在我这边的墙上，跟我这边取色。 */
  .tg-wall .room-nav .nav-pages { --ink: var(--tg-ink-a); --ink-muted: var(--tg-ink-muted-a); }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* 手机横屏：标题在右下、"此刻"在窗的右侧，都压在 TA 那边的墙上。 */
  .tg-wall .room-sign, .tg-wall .now { --ink: var(--tg-ink-b); --ink-muted: var(--tg-ink-muted-b); color: var(--ink); }
}

/* ===================================================================================
   首页里的共此时（2026-10-06，together-home.js）：入口、拼窗、窗台动作、痕迹、小卡、纸鹤展开、我的窗。
   与首页同一种安静：没有卡片阴影、渐变按钮与图标；按钮是带细下划线的字。
   =================================================================================== */

/* 合成一扇显示时，首页自己的那扇窗藏在下面（仍在计算"我这边"的光，只是不画） */
.stage-wrap.tg-on > svg.stage { visibility: hidden; }
/* 正式中梃在两扇窗里各画一半（在书之后）；接缝层里那一根只给拼合动画的位图用 */
.tg-live > .tg-seam.has-real-post .tg-post { visibility: hidden; }

/* 窗框右下角的刻号：点它打开"我的窗"。不可见，至少 44×44 */
.carve-hit { position: absolute; z-index: 4; left: 80.8%; top: 73.7%; width: max(8.6%, 44px); height: 44px; transform: translate(-50%, -50%);
  padding: 0; border: 0; background: transparent; cursor: pointer; }
.carve-hit:focus-visible { outline: var(--focus-width) solid currentColor; outline-offset: 2px; }
/* 只裁分不可见命中面；按钮本身的 44px 布局与键盘焦点轮廓保留。 */
.stage-wrap .carve-hit { pointer-events: none; }
.carve-hit::before { content: ""; position: absolute; inset: 0; pointer-events: auto; clip-path: var(--carve-hit-region, none); }
/* 铸钥匙等运行动画仍可轻点窗来跳过；输入刻格时让空墙透传，结束后也不留下挡板。 */
#stage-wrap:has(+ #now.tg-in-ritual):not(:has(+ #now .kr-input)) { pointer-events: auto; }

/* 共此时的面板："此刻"两行之下 */
.tg-panel { margin-top: .55rem; font-family: var(--font-sans); }
.tg-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1.5rem; margin: 0; }
.tg-act { min-height: 44px; display: inline-flex; align-items: center; padding: .4rem .2rem; border: 0; background: none; color: var(--ink-muted);
  font: inherit; font-family: var(--font-sans); font-size: .8rem; letter-spacing: .1em; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.tg-act:hover, .tg-act:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
.tg-act:disabled { cursor: default; opacity: .55; }
.tg-act.tg-primary { color: var(--ink); font-size: .86rem; }
.tg-act.tg-danger { color: var(--ink); }
.tg-cancel { margin-top: .2rem; }
.tg-cancel .tool-link { font-size: .66rem; }
.tg-ritual { min-height: 7.5rem; }

/* 开窗仪式进行中："此刻"只留刻格与提示 */
#now.tg-in-ritual > .now-line1, #now.tg-in-ritual > .now-line2, #now.tg-in-ritual > .place-line,
#now.tg-in-ritual > .place-ask, #now.tg-in-ritual > .tg-traces, #now.tg-in-ritual > .tg-note { display: none; }

/* 多个连接时，窗下一行名字；三种看法 */
.tg-names { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .7rem; margin: 0 0 .1rem;
  font-family: var(--font-sans); font-size: .74rem; }
.tg-names .seg { min-height: 40px; padding: .4rem 0; }
.tg-dot { color: var(--ink-muted); opacity: .7; font-size: .72rem; }

/* 窗台动作、痕迹的一行、动作后的一句 */
.tg-panel .tg-actions { margin-top: .1rem; }
.tg-actions .tool-link[aria-busy="true"] { opacity: .55; cursor: progress; }
.tg-traces { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .55rem; margin: .1rem auto 0; max-width: 40rem;
  font-family: var(--font-sans); }
.tg-trace { font-size: .72rem; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.tg-trace-text { font-size: .72rem; color: var(--ink-muted); line-height: 1.8; }
/* 窗那边：只一行很淡的提示 */
.tg-traces.is-hint .tg-hint { font-size: .68rem; color: var(--ink-muted); opacity: .78; text-decoration: none; }
.tg-traces.is-hint .tg-hint:hover, .tg-traces.is-hint .tg-hint:focus-visible { opacity: 1; text-decoration: underline; }
.tg-note { margin: .2rem auto 0; max-width: 34rem; font-family: var(--font-sans); font-size: .74rem; line-height: 1.8; color: var(--ink); }
.tg-extra { margin: .35rem auto 0; max-width: 34rem; font-family: var(--font-sans); font-size: .74rem; }
.tg-chime-ask { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .2rem .7rem; }
.tg-chime-ask label { color: var(--ink-muted); line-height: 1.8; }
.tg-inline-input { width: 10.5rem; padding: .45rem .2rem .35rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 60%, transparent);
  border-radius: 0; background: transparent; color: var(--ink); font: .86rem/1.6 var(--font-serif); letter-spacing: .05em; text-align: center; outline: none; }
.tg-inline-input:focus { border-bottom-color: var(--ink); }
.my-window { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.chime-toggle[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }

/* ---- 小卡：从下方浮起的一张纸。一次只开一张 ---- */
.tg-card { position: fixed; z-index: 45; left: 0; right: 0; bottom: calc(.9rem + env(safe-area-inset-bottom)); margin: 0 auto;
  width: min(25rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain;
  padding: 1.15rem 1.3rem 1rem; color: var(--ink); background: color-mix(in srgb, var(--wall) 86%, #000 14%);
  border: 1px solid color-mix(in srgb, var(--ink-muted) 35%, transparent); font-family: var(--font-sans); }
.tg-card-close { position: absolute; top: .1rem; right: .2rem; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--ink-muted);
  font-size: 1.3rem; line-height: 1; cursor: pointer; }
.tg-card-close:hover, .tg-card-close:focus-visible { color: var(--ink); }
.tg-card-body { padding-right: 1.2rem; }
.tg-card-title { margin: 0 0 .6rem; font-family: var(--font-serif); font-size: 1rem; font-weight: 500; letter-spacing: .1em; }
.tg-card-line { margin: 0 0 .45rem; font-family: var(--font-serif); font-size: .92rem; line-height: 1.85; letter-spacing: .03em; }
.tg-card-line + .tg-card-line { color: var(--ink-muted); font-size: .8rem; }
.tg-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.2rem; margin: .4rem 0 0; }
.tg-card-note { margin: .3rem 0 0; min-height: 1.2em; font-size: .74rem; line-height: 1.7; color: var(--ink-muted); }
.tg-card-note:empty { min-height: 0; margin: 0; }

/* 拼窗码：两串数字写大，读得清 */
.tg-code { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .1rem 1rem; margin: .2rem 0 .8rem; }
.tg-code-label { font-size: .7rem; letter-spacing: .14em; color: var(--ink-muted); }
.tg-code-n, .tg-code-c { font-family: var(--font-serif); font-size: 1.7rem; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.tg-link { width: 100%; margin: .3rem 0 0; padding: .45rem .1rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 50%, transparent);
  background: transparent; color: var(--ink-muted); font: .72rem/1.5 var(--font-sans); outline: none; }
.tg-code-form { margin: 0; }
.tg-code-fields { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.tg-field { display: flex; flex-direction: column; gap: .15rem; margin: 0 0 .5rem; font-size: .72rem; color: var(--ink-muted); }
.tg-field input { width: 8.5rem; padding: .45rem .1rem .35rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 60%, transparent);
  border-radius: 0; background: transparent; color: var(--ink); font: 1.25rem/1.4 var(--font-serif); letter-spacing: .18em;
  font-variant-numeric: tabular-nums; outline: none; }
.tg-field input:focus { border-bottom-color: var(--ink); }
.tg-field-wide input { width: 100%; font-size: .95rem; letter-spacing: .05em; }

/* 叠一只纸鹤：预设句是安静的一列字，选中的那句加下划线 */
.crane-presets { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; margin: 0 0 .4rem; }
.crane-preset { min-height: 40px; padding: .35rem 0; border: 0; background: none; color: var(--ink-muted); font: .95rem/1.6 var(--font-serif);
  letter-spacing: .04em; text-align: left; cursor: pointer; text-underline-offset: .4em; }
.crane-preset:hover, .crane-preset:focus-visible { color: var(--ink); }
.crane-preset[aria-checked="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
.crane-own { display: flex; align-items: baseline; gap: .8rem; margin: .2rem 0 .3rem; }
.crane-own-label { flex: none; font-size: .74rem; color: var(--ink-muted); }
.crane-input { flex: 1; min-width: 0; padding: .45rem .1rem .35rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 60%, transparent);
  border-radius: 0; background: transparent; color: var(--ink); font: .95rem/1.6 var(--font-serif); outline: none; }
.crane-input:focus { border-bottom-color: var(--ink); }
.crane-rules { margin: .2rem 0 0; font-size: .64rem; line-height: 1.75; color: var(--ink-muted); opacity: .85; }

/* ---- 纸鹤展开成方笺：一折一折（只动 transform 与 opacity） ---- */
.tg-card-crane .tg-card-body { padding-right: 0; display: flex; justify-content: center; }
.crane-note { position: relative; width: min(16.5rem, 70vw); aspect-ratio: 1; margin: .4rem auto .2rem;
  --paper: color-mix(in srgb, #efe6d1 90%, var(--wall) 10%); --paper-shade: color-mix(in srgb, #d9ccb2 88%, var(--wall) 12%); --paper-ink: #3d3328; }
.crane-fold { position: absolute; left: 27%; top: 30%; width: 46%; height: auto; overflow: visible; }
.crane-fold .cf-paper { fill: var(--paper); }
.crane-fold .cf-shade { fill: var(--paper-shade); }
.crane-fold .cf-line { fill: none; stroke: var(--paper-ink); stroke-width: 1.1; stroke-linejoin: round; opacity: .7; }
.crane-fold .cf-diamond { opacity: 0; }
.crane-paper { position: absolute; inset: 0; background: var(--paper); color: var(--paper-ink); opacity: 0; transform-origin: 50% 50%; }
.crane-creases { position: absolute; inset: 0; width: 100%; height: 100%; }
.crane-creases path { fill: none; stroke: var(--paper-ink); stroke-width: .35; opacity: .14; vector-effect: non-scaling-stroke; }
.crane-words { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 12% 13%; opacity: 0; }
.crane-text { margin: 0; font-family: "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: clamp(1.05rem, 4.6vw, 1.32rem); line-height: 1.9; letter-spacing: .06em; text-wrap: pretty; }
.crane-sign { margin: 1rem 0 0; align-self: flex-end; font-family: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", "SimSun", serif;
  font-size: .82rem; letter-spacing: .04em; opacity: .78; }
.crane-note.is-open .crane-fold { display: none; }
.crane-note.is-open .crane-paper, .crane-note.is-open .crane-words { opacity: 1; }
.crane-note.is-refolding .crane-paper, .crane-note.is-refolding .crane-words { opacity: 1; }
.crane-note.is-refolding .crane-fold { opacity: 0; }

/* 我的窗 */
.mw-title { font-variant-numeric: tabular-nums; }
.mw-rule { color: var(--ink-muted); font-size: .8rem; }
.mw-pairs { list-style: none; margin: .6rem 0 .2rem; padding: 0; }
.mw-pair { padding: .35rem 0; border-top: 1px solid color-mix(in srgb, var(--ink-muted) 25%, transparent); }
.mw-pair-head { display: flex; align-items: baseline; gap: .7rem; margin: 0; font-family: var(--font-serif); }
.mw-pair-name { font-size: .95rem; letter-spacing: .06em; }
.mw-pair-city { font-size: .74rem; color: var(--ink-muted); font-family: var(--font-sans); }
.mw-pair-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6rem; margin: 0; }
.mw-pair-actions .tool-link, .mw-tail .tool-link { font-size: .7rem; }
.mw-rename { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; }
.mw-tail { margin-top: .5rem; padding-top: .3rem; border-top: 1px solid color-mix(in srgb, var(--ink-muted) 25%, transparent); }
.mw-confirm { margin: .4rem 0 .2rem; }
.mw-pin .tg-field input { width: 6.5rem; }
.mw-keycard { margin: .5rem 0; }
.mw-keycard img { display: block; width: 100%; max-width: 15rem; height: auto; }

/* 明信片 */
.tg-card-postcard { width: min(26rem, calc(100vw - 2rem)); }
.pc-box { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.pc-box img { max-height: calc(100vh - 15rem); max-height: calc(100dvh - 15rem); width: auto !important; max-width: 100% !important; }
.pc-box a, .pc-box button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 .2rem; border: 0; background: none; color: var(--ink);
  font: .82rem var(--font-sans); letter-spacing: .08em; cursor: pointer; text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 1px; }
.pc-box p { margin: .2rem 0; font-size: .74rem; color: var(--ink-muted); }
.pc-box textarea { width: 100%; min-height: 4.5rem; background: transparent; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink-muted) 40%, transparent); }
.pc-audience { gap: 0 1rem; }

@media (max-width: 760px), (max-aspect-ratio: 3/4) {
  .tg-card { bottom: calc(.5rem + env(safe-area-inset-bottom)); width: calc(100vw - 1rem); padding: 1rem 1.1rem .9rem; }
  .tg-code-n, .tg-code-c { font-size: 1.5rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .tg-card { left: auto; right: .6rem; margin: 0; width: min(24rem, 52vw); top: .6rem; bottom: .6rem; max-height: none; }
  .tg-row { justify-content: flex-start; }
  .tg-traces { justify-content: flex-start; margin-left: 0; }
}