/* ==========================================================================
   PLIK Lab · homepage v3 · 卡片、材质、影子（L1 + L2）
   卡片样式以 spike 02 的幻灯片卡为底：白卡纸、0.5px 发丝边、3:2 窗口、15px 标题、mono 元数据、几乎看不出的影子。
   v3 的影子规则（见 LAYER-CONTRACT「L2」和 js/flip.js 文件头）：
     · 每张卡只有一个影子元素 i.sh，是 .flip 的兄弟元素；.face 上没有任何 box-shadow / drop-shadow / filter。
     · 影子宽 = |cos θ| × 卡宽（--c），离墙高度 z = 静止 z + hover 抬起 --zh + 翻面 --zf（= z_flip × |sin θ|）。
     · 偏移 / 模糊 / 浓度都只从 z 算：z 越高，影子越远、越软、越淡。卡和影子由 js/flip.js 的同一个 rAF 时钟驱动。
   ========================================================================== */

/* 主题切换：墙、纸、墨约 600ms 平滑过渡（reduced-motion 下直接切） */
html.theme-anim body, html.theme-anim .face, html.theme-anim .sheet, html.theme-anim .sh, html.theme-anim .obj,
html.theme-anim #L0, html.theme-anim #L4, html.theme-anim .l4-board, html.theme-anim .masthead, html.theme-anim .wallfoot {
  transition: background-color var(--theme-dur) ease, color var(--theme-dur) ease, box-shadow var(--theme-dur) ease, opacity var(--theme-dur) ease !important;
}

/* ===================== 小物件（开关、衣服贴纸、圆钮）：沿用 v2 的 contact + key 公式 =====================
   这些不翻面，所以继续用 box-shadow / drop-shadow；--vx/--vy 由 js/tiles.js 写入。 */
.obj {
  --z-rest: 1;
  --obj-z: calc(var(--z-rest) * var(--z-k));
  --vx: .6; --vy: .7;
  --cz: calc(1 + var(--obj-z) / var(--contact-z));
  --kz: calc(1 + var(--obj-z) / var(--key-fade));
  --ca: calc(var(--shadow-strength) * var(--contact-a) * var(--sh-k) * var(--boost, 1) / (var(--cz) * var(--cz)));
  --ka: calc(var(--shadow-strength) * var(--key-a) * var(--sh-k) * var(--boost, 1) / var(--kz));
  --cx: calc(var(--obj-z) * var(--vx) * var(--contact-off) * 1px);
  --cy: calc(var(--obj-z) * var(--vy) * var(--contact-off) * 1px);
  --cb: calc((var(--contact-blur0) + var(--obj-z) * var(--contact-blur-k)) * 1px);
  --kx: calc(var(--obj-z) * var(--vx) * 1px);
  --ky: calc(var(--obj-z) * var(--vy) * 1px);
  --kb: calc((var(--key-blur0) + var(--obj-z) * var(--light-soft) * var(--key-blur-k)) * 1px);
  --sh:
    var(--cx) var(--cy) var(--cb) 0 rgb(var(--c-contact, var(--sh-rgb)) / var(--ca)),
    var(--kx) var(--ky) var(--kb) 0 rgb(var(--c-key, var(--sh-rgb)) / var(--ka));
  --sh-d:
    drop-shadow(var(--cx) var(--cy) calc(var(--cb) / 2) rgb(var(--c-contact, var(--sh-rgb)) / var(--ca)))
    drop-shadow(var(--kx) var(--ky) calc(var(--kb) / 2) rgb(var(--c-key, var(--sh-rgb)) / var(--ka)));
  transition: --obj-z .35s var(--ease);
}

/* ===================== Tile（L1）===================== */
.tile {
  --z-rest: 1; --zh: 0; --zf: 0; --th: 0; --c: 1; --s: 0; --fo: 1; --bo: 0;
  --obj-z: calc(var(--z-rest) * var(--z-k) + var(--zh) + var(--zf));
  --vx: .6; --vy: .7; --r: 6px;
  position: relative; display: grid; min-width: 0; min-height: 0;
  isolation: isolate; perspective: 1600px; container: tile / inline-size;
  rotate: calc(var(--tilt, 0) * 1deg);
  scroll-margin-top: 24px;
  transition: --zh .35s var(--ease);
}
/* 「拿起来」只在 hover：轻轻离墙；手机上是按下的那一下 */
@media (hover: hover) and (pointer: fine) { .tile:hover { --zh: var(--z-hover); } }
@media (hover: none) { .tile:active { --zh: var(--z-hover); } }

/* ---------- L2：唯一的影子元素 ---------- */
.sh {
  --ox: calc(var(--obj-z) * var(--vx) * var(--sh-off-k) * 1px);
  --oy: calc(var(--obj-z) * var(--vy) * var(--sh-off-k) * 1px);
  --blur: calc((var(--sh-blur0) + var(--obj-z) * var(--light-soft) * var(--sh-blur-k)) * 1px);
  --a: calc(var(--sh-a) * var(--shadow-strength) * var(--sh-k) * var(--boost, 1) / (1 + var(--obj-z) / var(--sh-fade)));
  position: absolute; z-index: -1; top: 0; bottom: 0; pointer-events: none;
  /* 宽 = |cos θ| × 卡宽，以卡的竖直中线为轴收窄；两边各留 1px，侧过来时还剩一条片边的影子 */
  left: calc((1 - var(--c)) * 50% - 1px * var(--s)); right: calc((1 - var(--c)) * 50% - 1px * var(--s));
  border-radius: var(--r);
  translate: var(--ox) var(--oy);
  background: rgb(var(--c-key, var(--sh-rgb)) / var(--a));
  filter: blur(var(--blur));
}
/* 透明卡的影子 = 被片染蓝的光 + 片边挡住的一圈暗线（同一个元素） */
.m-film > .sh {
  --fa: calc(var(--film-tint) * var(--shadow-strength) * var(--boost, 1) / (1 + var(--obj-z) / var(--sh-fade)));
  background: rgb(var(--c-film, var(--film-rgb)) / var(--fa));
  box-shadow: inset 0 0 0 calc(1px + var(--s) * 1.5px) rgb(var(--c-key, var(--sh-rgb)) / calc(var(--a) * .9));
}

/* ---------- 翻面：.flip 由 js/flip.js 写 --th（同一个时钟写影子的 --c / --zf）---------- */
.flip {
  grid-area: 1 / 1; display: grid; min-width: 0; min-height: 0; position: relative;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--zf) * 1px)) rotateY(calc(var(--th) * 1deg));
}
.face {
  grid-area: 1 / 1; position: relative; display: flex; min-width: 0; min-height: 0;
  border-radius: var(--r);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: translateZ(.5px);
}
.flip-tile .face.back { transform: rotateY(180deg) translateZ(.5px); }
.flip-tile:not(.is-flipped) .face.back, .flip-tile.is-flipped .face.front { pointer-events: none; }
/* 片边：侧过来时变粗（--s = |sin θ|）。是边线，不是影子 */
.face::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  border: calc(var(--edge-w0, .5px) + var(--s) * var(--edge-wk, 1.2px)) solid var(--edge-c, var(--edge));
}
.face-body {
  position: relative; flex: 1; min-width: 0; min-height: 0; border-radius: inherit; overflow: hidden;
  padding: 14px 14px 12px; display: flex; flex-direction: column;
}
.flip-tile .face.back .face-body { overflow-y: auto; scrollbar-width: thin; }
/* 3D 的纸边 / 片边厚度：侧到 90° 时正好看到它 */
.edge { position: absolute; top: 0; bottom: 0; width: var(--thick, 1px); background: var(--edge-thick); pointer-events: none; }
.edge-l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.edge-r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }

/* ===================== 材质 ===================== */
/* 幻灯片卡（spike 02 .slide）：纯白卡纸 + 0.5px 发丝边 */
.m-slide .face { background: var(--card); }
.m-slide .face.back { background: var(--card-back); }
.m-slide { --edge-c: var(--edge); }

/* Magical Pen：一张真实的白纸。没有框、没有边、没有窗口；纸面 = Magical Pen app 的 .paper（style.css）+ 「细腻绘图纸」纹理（js/paper.js） */
.m-paper { --r: var(--card-r); --edge-w0: 0px; --edge-wk: 1px; --edge-c: var(--paper-edge); --thick: 1px; }
.m-paper .face {
  background-color: var(--paper);
  background-image: linear-gradient(135deg, rgb(255 255 255 / .35) 0%, rgb(255 255 255 / 0) 45%, rgb(0 0 0 / 0) 75%, rgb(0 0 0 / .02) 100%), var(--paper-tex);
  background-size: 100% 100%, 384px 384px;
}
.m-paper .face.back { background-position: 0 0, 37px 91px; }   /* 同一张纸的背面：纹理换个位置 */
/* 夜里：纸还是那张亮纸（墙暗、内容不暗），只压一点点亮度，免得在深墙上刺眼 */
:root[data-theme="night"] .m-paper .face { --paper: #ECEAE5; }

/* 透明卡：一张片（.sheet，两面都看得见）+ 印在片上的字（正面 / 背面各一层）
   过 90° 时正面淡出、背面淡入；翻过去以后还能透过片看到约 8% 的正面镜像（--fo / --bo 由 js/flip.js 写） */
.m-film { --r: 8px; --thick: 1.5px; --edge-w0: .5px; --edge-wk: 1.6px; --edge-c: rgb(var(--film-edge) / .9); }
.m-film .sheet {
  grid-area: 1 / 1; position: relative; border-radius: var(--r); pointer-events: none;
  background: rgb(var(--film-rgb) / var(--film-a));
  border: calc(.5px + var(--s) * 1.6px) solid rgb(var(--film-edge) / .9);
  --edge-thick: rgb(var(--film-edge) / .9);
}
.m-film .face { -webkit-backface-visibility: visible; backface-visibility: visible; background: none; }
.m-film .face::before { display: none; }   /* 片边画在 .sheet 上，只有一圈 */
.m-film .face.front { opacity: var(--fo); }
.m-film .face.back { opacity: var(--bo); }
.m-film .edge { background: rgb(var(--film-edge) / .9); }
.m-film .win:not(.lit) { background: rgb(255 255 255 / .42); }
:root[data-theme="night"] .m-film .win:not(.lit) { background: rgb(255 255 255 / .9); }

/* 翘起一角的便签：右上角离墙更高，角下面多一块影子 */
.m-curl { --r: var(--card-r); --corner: 30px; --corner-z: calc(var(--obj-z) + 10); }
.m-curl .face { background: var(--card); }
.m-curl .curl-sh {
  position: absolute; z-index: -1; top: 0; right: 0; width: calc(var(--corner) * 1.6); height: calc(var(--corner) * 1.6); pointer-events: none;
  background: linear-gradient(225deg, rgb(var(--sh-rgb) / calc(var(--shadow-strength) * var(--sh-k) * .22)) 0 30%, transparent 62%);
  translate: calc(var(--corner-z) * var(--vx) * 1px) calc(var(--corner-z) * var(--vy) * 1px);
  filter: blur(calc((2 + var(--corner-z) * var(--light-soft) * .5) * 1px));
}
.m-curl .curl-flap {
  position: absolute; top: 0; right: 0; width: var(--corner); height: var(--corner); pointer-events: none; border-top-right-radius: 3px; z-index: 5;
  background: linear-gradient(225deg, rgb(255 255 255 / .6), rgb(var(--ink-rgb) / .05) 48%, transparent 50%);
}
:root[data-theme="night"] .m-curl .curl-flap { background: linear-gradient(225deg, rgb(255 255 255 / .10), rgb(0 0 0 / .2) 48%, transparent 50%); }

/* ===================== 窗口（spike 02 的 3:2 缩略图窗）===================== */
.win { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; flex: 0 0 auto; padding: 0; border: 0; border-radius: 2px; overflow: hidden; isolation: isolate; background: var(--win); transition: background-color .6s; }
button.win { cursor: pointer; }
.win > .films, .screen .slide > .films { position: absolute; inset: 0; isolation: isolate; pointer-events: none; }
.win i.film, .screen .slide i.film { position: absolute; mix-blend-mode: multiply; background-color: var(--fc); border: .5px solid rgb(30 36 48 / .1);
  transition: background-color .6s, left .7s var(--ease), top .7s var(--ease); }
.win.lit, .screen .slide.lit { background: #181C24; }
.win.lit i.film, .screen .slide.lit i.film { background-color: var(--fcn); border-color: rgb(255 255 255 / .14); }
.win > img.th, .screen .slide > img.th { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; transition: opacity .6s; }
.win > img.th-night, .screen .slide > img.th-night { opacity: 0; }
.win.lit > img.th-night, .screen .slide.lit > img.th-night { opacity: 1; }
.win.lit > img.th-day, .screen .slide.lit > img.th-day { opacity: 0; }

/* ===================== 字（spike 02：标题 15px ink、元数据 mono 10.5px ink-3）===================== */
.tile-title { font-weight: 500; font-size: var(--fs-title); line-height: 1.45; color: var(--ink); }
.cap { margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tile-text { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.slide-body > .tile-title, .slide-txt > .tile-title { margin-top: 12px; }
.slide-txt > .tile-title:first-child { margin-top: 0; }
.back-title { margin-top: 6px; font-size: 15px; color: var(--ink); font-weight: 500; }
.story { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); flex: 1; }
.story p:first-child { color: var(--ink); }

/* ===================== 链接与唯一的主 CTA ===================== */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: auto; padding-top: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 2px 0; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--hair-2); text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color .2s, text-decoration-color .2s;
}
.btn:hover { color: var(--ink); text-decoration-color: currentColor; }
.btn.cta {
  padding: 10px 20px; border-radius: 999px; background: var(--ink); color: var(--wall);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--ease), background-color var(--theme-dur), color var(--theme-dur);
}
.btn.cta:hover { color: var(--wall); transform: translateY(-1px); }
.btn.cta:active { transform: translateY(1px); }

/* 「翻过来」：右上角一个 ink-3 的小图标，hover 时才出字 */
.flip-btn { position: absolute; top: 6px; right: 8px; z-index: 6; border: 0; background: none; cursor: pointer; padding: 1px 2px; font-size: 11.5px; line-height: 16px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.flip-btn i { font-style: normal; font-size: 12.5px; display: inline-block; transition: rotate .4s var(--ease); }
.flip-btn .fb-t { opacity: 0; transition: opacity .2s; }
.tile:hover .flip-btn .fb-t, .flip-btn:focus-visible .fb-t { opacity: 1; }
.flip-btn:hover { color: var(--ink); } .flip-btn:hover i { rotate: 180deg; }
@media (hover: none) { .flip-btn .fb-t { opacity: 1; } }

/* ===================== 横版小卡（hero 右边上下两张）：窗口在左，字在右 ===================== */
.slide-body { padding: 14px 14px 12px; }
.wide .slide-body { flex-direction: row; align-items: stretch; gap: 16px; }
.wide .slide-body > .win { flex: 0 0 46%; align-self: flex-start; }
.wide .slide-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 2px 18px 0 0; }
.wide .slide-txt .btn-row { padding-top: 8px; }
@container tile (max-width: 420px) {
  .wide .slide-body { flex-direction: column; gap: 0; }
  .wide .slide-body > .win { flex: none; width: 100%; }
  .wide .slide-txt { padding: 12px 0 0; }
}

/* ===================== Magical Pen（hero，一张纸）===================== */
.m-paper .pen-body { padding: 16px 18px 16px; gap: 0; }
.pen-stage { position: relative; flex: 1 1 auto; min-height: 280px; margin: 0 -4px; }
.pen-guide { position: absolute; inset: 4% 0 2%; width: 100%; height: 94%; pointer-events: none; }
.pg-line { stroke: #1E2430; stroke-opacity: .26; }
.pg-start { fill: #F08FAE; fill-opacity: .55; }
#pen-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.pen-clear { position: absolute; top: 0; left: 4px; border: 0; background: none; cursor: pointer; font-size: 12px; color: rgb(30 36 48 / .68); text-decoration: underline; text-underline-offset: 3px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.pen-stage.drawn .pen-clear { opacity: 1; pointer-events: auto; }
.pen-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 10px; }
.pen-foot .tile-title { font-size: 16px; }
/* 纸上的字永远是纸上的墨（夜里纸还是亮的，所以墨也保持深色） */
.m-paper .tile-title, .m-paper .back-title { color: #1E2430; }
.m-paper .cap, .m-paper .flip-btn { color: rgb(30 36 48 / .67); }
.m-paper .story, .m-paper .btn { color: rgb(30 36 48 / .78); }
.m-paper .story p:first-child { color: #1E2430; }
.m-paper .btn.cta { background: var(--cta-bg); color: var(--cta-fg); }   /* [v3 · R39] 派生 token，见 tokens.css */
.m-paper .btn:not(.cta) { text-decoration-color: rgb(30 36 48 / .2); }

/* ===================== 衣服的家 · 小玩法（窗口保持 4:3，房子坐标按 400×300 画）===================== */
.win.home-game { aspect-ratio: 4 / 3; }
.hg-houses { position: absolute; inset: 0; width: 100%; height: 100%; }
.hg-houses .hf { mix-blend-mode: multiply; }
.win.lit .hg-houses { isolation: isolate; }
.win.lit .hg-houses .hf:nth-child(1) { fill: #8ED1F1; } .win.lit .hg-houses .hf:nth-child(2) { fill: #FAA8C2; } .win.lit .hg-houses .hf:nth-child(3) { fill: #FFE47A; }
.hg-board { position: absolute; inset: 0; z-index: 1; isolation: isolate; }
.hg-zone { position: absolute; top: 48%; height: 37%; width: 17%; border-radius: 4px; pointer-events: none; transition: background-color .2s; }
.hg-zone[data-house="blue"] { left: 24%; } .hg-zone[data-house="pink"] { left: 41.5%; } .hg-zone[data-house="yellow"] { left: 59%; }
.hg-zone.over { background: rgb(30 36 48 / .07); }
.win.lit .hg-zone.over { background: rgb(255 255 255 / .1); }
.hg-item {
  position: absolute; width: 21%; aspect-ratio: 96 / 68; padding: 0; border: 0; background: none; cursor: grab;
  touch-action: none; -webkit-tap-highlight-color: transparent; z-index: 2; mix-blend-mode: multiply;
  transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), --obj-z .3s var(--ease), rotate .45s var(--ease);
}
.hg-item svg { width: 100%; height: 100%; display: block; overflow: visible; filter: var(--sh-d); }
.hg-item[data-fits="pink"] { left: 5%; top: 14%; rotate: -10deg; }
.hg-item[data-fits="yellow"] { left: 39%; top: 7%; rotate: 8deg; }
.hg-item[data-fits="blue"] { left: 72%; top: 16%; rotate: 14deg; }
.hg-item.dragging { cursor: grabbing; transition: --obj-z .2s var(--ease), rotate .3s; --obj-z: 14; z-index: 5; }
.hg-item.home { cursor: default; width: 14%; rotate: 0deg; }
.hg-item.home[data-fits="blue"] { left: 25.5%; top: 63%; }
.hg-item.home[data-fits="pink"] { left: 43%; top: 63%; }
.hg-item.home[data-fits="yellow"] { left: 60.5%; top: 63%; }
.hg-item.nope { animation: nope .4s; }
@keyframes nope { 25% { translate: -5px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
@media (hover: hover) and (pointer: fine) { .hg-item:not(.home):not(.dragging):hover { --obj-z: 6; } }
.hg-status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3); }
.hg-status .link-btn { margin-left: 8px; font-family: var(--font-text); }
:root[data-theme="night"] .hg-item, :root[data-theme="night"] .hg-houses .hf { mix-blend-mode: normal; }

/* ===================== 幻灯机 + 圆钮 ===================== */
.proj-body { gap: 0; }
.proj-body .screen { aspect-ratio: 3 / 2; }
.screen .slide { position: absolute; inset: 0; opacity: 0; translate: 0 -100%; background: var(--win); overflow: hidden; isolation: isolate; }
.screen .slide.is-on { opacity: 1; translate: 0 0; animation: slide-in .26s cubic-bezier(.3, 1.4, .5, 1); }
.screen .slide.is-off { opacity: 1; animation: slide-out .22s ease-in forwards; }
@keyframes slide-in { from { translate: 0 -100%; } to { translate: 0 0; } }
@keyframes slide-out { from { translate: 0 0; } to { translate: 0 100%; opacity: .6; } }
.proj-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.proj-row .cap { margin: 0; }
.m-button { --z-rest: 3; }
.m-button:active { --obj-z: .6; }
.projector {
  position: relative; z-index: 2; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at calc(50% + var(--ldx, 0) * 26%) calc(50% + var(--ldy, 0) * 26%), #fff 0%, #F7F6F2 55%, #E6E4DE 100%);
  box-shadow: var(--sh);
}
.p-count { font: 500 10px var(--font-mono); color: #1E2430; opacity: .7; }

/* ===================== 小窗 ===================== */
.toy-body { gap: 0; }
.window { aspect-ratio: 3 / 2; cursor: crosshair; box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 3.5px var(--edge); border-radius: 2px; }
.sky { position: absolute; inset: 0; background: linear-gradient(#BFE3F5, #E8F5FA 70%, #F6EFD8); }
:root[data-theme="night"] .sky { background: linear-gradient(#1C2440, #2E3A63); }
.sun { position: absolute; left: 15%; top: 10%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FFF8D0, var(--yellow) 60%, #F0C94B); box-shadow: 0 0 14px 4px rgb(255 232 150 / .6); transition: left .5s var(--ease), top .5s var(--ease); }
:root[data-theme="night"] .sun { background: radial-gradient(circle at 60% 40%, #fff, #E9E4FF 60%, #B9B2E6); box-shadow: 0 0 14px 4px rgb(200 195 255 / .35); }
.mull { position: absolute; background: var(--card); }
.mull-v { left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; } .mull-h { top: 46%; left: 0; right: 0; height: 3px; margin-top: -1.5px; }
.toy-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.toy-row .cap { margin: 0; }
.toy-reset, .link-btn { border: 0; background: none; cursor: pointer; padding: 0; font-size: 12px; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
.toy-reset:hover, .link-btn:hover { color: var(--ink); }

/* ===================== 便签 / 关于 / 邮件 ===================== */
.note-body { gap: 6px; padding: 18px 16px 16px; background: repeating-linear-gradient(transparent 0 25px, var(--hair) 25px 26px); background-position: 0 4px; }
.note-title { font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--ink); }
.note-body p { font-size: 13.5px; color: var(--ink-2); } .note-body small { display: block; font-size: 12px; color: var(--ink-3); }
.note-btn { align-self: flex-start; }
.note-body textarea { width: 100%; font: inherit; font-size: 13.5px; color: var(--ink); border: 0; border-bottom: 1px solid var(--hair-2); padding: 6px 0; background: transparent; resize: none; }
.about-body { gap: 8px; padding: 16px 18px; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.about-body .cap { margin: 0 0 2px; }
.about-small { font-size: 12px; color: var(--ink-3); }
.news-body { gap: 0; }
.news-form { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.news-form input { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; color: var(--ink); padding: 5px 0; border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0; background: transparent; }
.news-form input::placeholder { color: var(--ink-3); }
.news-form input:focus-visible { outline: 0; border-bottom-color: var(--ink); }
.proto-note { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }

/* ===================== 手机 ===================== */
@media (max-width: 699.98px) {
  .pen-stage { min-height: 260px; }
  .tile-text, .story { font-size: 14px; }
}

/* ===================== 减少动效：不转，直接换面 ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .tile, .obj, .win i.film { transition: none !important; }
  .flip { transform: none !important; }
  .flip-tile .face.back { transform: none; }
  .flip-tile .face { -webkit-backface-visibility: visible; backface-visibility: visible; transition: opacity .28s ease !important; }
  .flip-tile .face.back { opacity: 0; }
  .flip-tile.is-flipped .face.front { opacity: 0; }
  .flip-tile.is-flipped .face.back { opacity: 1; }
}