/* VibeJam 刺绣版 · STITCH —— 白帆布 + 一种靛蓝，没有第三种颜色 */
@property --sew { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --r { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: -20%; }

:root {
  --ind: #1F3A96; --ind-d: #14286C; --ind-l: #3553B5;
  --paper: #F6F4EE;
  --line: rgba(31, 58, 150, .5); --line-s: rgba(31, 58, 150, .22);
  --top: 76px; --bot: 0px; --pad: clamp(20px, 3.3vw, 48px);
  --f-serif: "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif;
  --f-cn: "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-emb: "Archivo Black", "Arial Black", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper) url(media/canvas.webp) 0 0 / 192px repeat;
  color: var(--ind); font: 14px/1.6 var(--f-sans);
  overflow: hidden; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  transition: background-color .5s;
}
html.dark body { background-color: var(--ind); background-blend-mode: multiply; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 50; background: var(--ind); color: #fff; padding: 8px 14px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px dashed var(--ind); outline-offset: 3px; }
html.dark :focus-visible { outline-color: #fff; }
:where(canvas.emb) { display: block; width: 100%; height: 100%; }

/* ============================================================= 顶栏 */
.top { position: fixed; inset: 0 0 auto 0; height: var(--top); z-index: 20; display: flex; align-items: center; padding: 0 var(--pad); gap: 16px; }
/* 左上织唛徽标 */
.badge { position: relative; display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 3px; padding: 6px 10px 5px; background: var(--ind); color: #fff; text-decoration: none; border-radius: 2px; line-height: 1;
  box-shadow: 0 1px 0 var(--ind-d), 0 3px 5px -2px rgba(20, 40, 108, .45); transform: rotate(-2deg);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px); }
.badge::before { content: ""; position: absolute; inset: 3px; border: 1.2px dashed rgba(255,255,255,.75); border-radius: 1px; }
.badge b { font: 22px/1 var(--f-emb); letter-spacing: -.02em; }
.badge i { font: 600 13px/1 var(--f-mono); font-style: normal; padding-bottom: 2px; }
.badge small { grid-column: 1 / 3; font: 500 7px/1 var(--f-mono); letter-spacing: .32em; margin-top: 4px; opacity: .85; }
.pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--ind); color: #fff; font: 600 11px/1 var(--f-sans); letter-spacing: .12em; padding: 6px 14px; border-radius: 99px; white-space: nowrap; }
html.dark .pill { background: #fff; color: var(--ind); }

/* 布标导航：每个菜单项是一枚缝在帆布上的小布标 */
.tags { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.tag { --r: 0deg; position: relative; display: grid; place-items: center; align-content: center; min-width: 78px; height: 46px; padding: 0 14px; text-decoration: none;
  background: var(--paper); color: var(--ind); border-radius: 2px;
  background-image: repeating-linear-gradient(0deg, rgba(31,58,150,.06) 0 1px, transparent 1px 2.5px), repeating-linear-gradient(90deg, rgba(31,58,150,.035) 0 1px, transparent 1px 3px);
  box-shadow: 0 1px 0 rgba(20,40,108,.28), 0 2px 3px -1px rgba(20,40,108,.22);
  transform: rotate(var(--r)); transform-origin: 50% 100%;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background-color .3s, color .3s; }
.tag:nth-child(1) { --r: -1.4deg; } .tag:nth-child(2) { --r: .9deg; } .tag:nth-child(3) { --r: -.6deg; } .tag:nth-child(4) { --r: 1.3deg; } .tag:nth-child(5) { --r: -1deg; }
.tag::before, .tag::after { content: ""; position: absolute; inset: 4px; border: 1.4px dashed var(--line); border-radius: 1px; pointer-events: none; }
.tag::after { border-color: #fff; opacity: 0; -webkit-mask: conic-gradient(from -90deg at 50% 50%, #000 var(--sew), transparent 0); mask: conic-gradient(from -90deg at 50% 50%, #000 var(--sew), transparent 0); }
.tag b { font: 700 14px/1.1 var(--f-cn); letter-spacing: .04em; }
.tag small { font: 600 9px/1 var(--f-serif); letter-spacing: .22em; margin-top: 3px; opacity: .8; }
.tag .tick { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; stroke: var(--ind); stroke-width: 3.4; background: var(--paper); border-radius: 50%; padding: 2px; opacity: 0; stroke-dasharray: 24; stroke-dashoffset: 24; box-shadow: 0 1px 2px rgba(20,40,108,.3); }
@media (hover: hover) {
  .tag:hover { transform: rotate(calc(var(--r) - 2deg)) translateY(-3px) perspective(260px) rotateX(14deg); box-shadow: 0 1px 0 rgba(20,40,108,.2), 0 10px 14px -8px rgba(20,40,108,.55); }
}
.tag[aria-current] { background-color: var(--ind); color: #fff;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 2.5px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }
.tag[aria-current]::before { border-color: rgba(255,255,255,.28); }
.tag[aria-current]::after { opacity: 1; --sew: 360deg; animation: sew .7s var(--ease) both; }
.tag[aria-current] .tick { opacity: 1; animation: tick .35s .6s var(--ease) forwards; }
html.dark .tag[aria-current] { box-shadow: 0 0 0 1.5px #fff, 0 6px 10px -4px rgba(0,0,0,.4); }
@keyframes sew { from { --sew: 0deg; } to { --sew: 360deg; } }
@keyframes tick { to { stroke-dashoffset: 0; } }

/* ============================================================= 舞台 + 视图 */
.stage { position: fixed; inset: var(--top) 0 var(--bot) 0; }
.v { position: absolute; inset: 0; padding: 4px var(--pad) 22px; overflow: hidden; }
.v[hidden] { display: none !important; }
.v.is-in { animation: vin .5s var(--ease) backwards; }
@keyframes vin { from { opacity: 0; transform: translateY(10px); } }
.v-head { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 14px; }
.v-head h2 { margin: 0; display: flex; align-items: baseline; gap: 14px; }
.ttl { font: 900 clamp(26px, 3.2vw, 40px)/1.1 var(--f-cn); letter-spacing: .04em; }
.ttl-en { font: 600 13px/1 var(--f-serif); letter-spacing: .22em; }
.v-sub { margin: 0 0 4px auto; font-size: 13px; opacity: .85; }
.mini-arr { display: inline-grid; place-items: center; width: 28px; height: 18px; border: 1.3px solid var(--ind); border-radius: 9px; font-size: 11px; line-height: 1; }
.eyebrow { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; margin: 0 0 10px; opacity: .85; }

/* 主按钮：靛蓝底 + 内侧白色虚线缝线 */
.btn-main, .btn-white { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 99px; text-decoration: none; font: 700 16px/1 var(--f-cn); letter-spacing: .04em;
  background: var(--ind); color: #fff; box-shadow: 0 1px 0 var(--ind-d), 0 8px 16px -10px rgba(20,40,108,.7); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn-main::before, .btn-white::before { content: ""; position: absolute; inset: 4px; border: 1.4px dashed rgba(255,255,255,.7); border-radius: 99px; pointer-events: none; }
.btn-main svg, .btn-white svg { width: 20px; height: 20px; stroke-width: 2.2; transition: transform .25s var(--ease); }
.btn-main:hover, .btn-white:hover { transform: translateY(-2px); box-shadow: 0 1px 0 var(--ind-d), 0 14px 20px -12px rgba(20,40,108,.8); }
.btn-main:hover svg, .btn-white:hover svg { transform: translateX(4px); }
.btn-white { background: #fff; color: var(--ind); box-shadow: 0 10px 22px -12px rgba(0,0,0,.6); }
.btn-white::before { border-color: rgba(31,58,150,.55); }
.btn-blue { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 4px; background: var(--ind); color: #fff; font: 600 13px/1 var(--f-sans); }
.btn-blue svg { width: 16px; height: 16px; }
.btn-line { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1.4px solid var(--ind); border-radius: 4px; font: 600 13px/1 var(--f-sans); }
.btn-line svg { width: 15px; height: 15px; }

/* ============================================================= 作品卡（线稿 → 彩色） */
/* .pic：两张图叠放，上层是靛蓝刺绣线稿；--p 控制「绣进来」，--r 控制「拆线」圆形揭示 */
.pic { position: relative; display: block; overflow: hidden; background: var(--paper); --r: 0px;
  -webkit-mask: linear-gradient(112deg, #000 calc(var(--p) - 2%), rgba(0,0,0,.35) var(--p), transparent calc(var(--p) + 6%)); mask: linear-gradient(112deg, #000 calc(var(--p) - 2%), rgba(0,0,0,.35) var(--p), transparent calc(var(--p) + 6%));
  transition: --p .9s var(--ease); }
.pic.sewn { --p: 130%; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pic .ink { -webkit-mask: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent var(--r), #000 calc(var(--r) + .5px)); mask: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent var(--r), #000 calc(var(--r) + .5px)); }
.pic.color { --r: 420px; }
.pic.half { --r: 92px; }
.pic.half .ring { opacity: 1; }
.pic { transition: --p .9s var(--ease), --r 1.1s var(--ease); }
/* 拆线的那一圈：沿揭示边缘走的白色虚线 */
.pic .ring { position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed rgba(255,255,255,.95); box-shadow: 0 0 0 1.5px rgba(31,58,150,.5); opacity: 0; pointer-events: none; }
.pic.unpicking .ring { opacity: 1; transition: opacity .2s; }

/* ============================================================= 首页 */
.v-home { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: minmax(0, 1fr) auto; column-gap: clamp(20px, 3vw, 48px); }
.h-head { grid-area: 1 / 1; align-self: center; min-width: 0; }
.h-eyebrow { display: flex; gap: 18px; margin: 0 0 4px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; }
.h-eyebrow span + span::before { content: "✕"; margin-right: 18px; font-size: 8px; opacity: .6; }
.emb-title { width: min(900px, 100%); height: clamp(104px, 22vh, 196px); margin-left: -6px; }
.h-subrow { display: flex; align-items: center; gap: 22px; margin: 2px 0 clamp(12px, 2.4vh, 24px); }
.emb-sub { width: clamp(240px, 24vw, 350px); height: clamp(46px, 7.4vh, 68px); flex: none; }
.h-lede { margin: 0; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.65; }
.h-lede b { font-weight: 700; }
.h-slogan { grid-area: 1 / 3; align-self: center; width: clamp(120px, 12.5vw, 184px); height: clamp(260px, 46vh, 420px); }
.h-stats { grid-area: 1 / 2; align-self: end; margin: 0 0 12px; display: grid; gap: 10px; text-align: right; }
.h-stats div { border-top: 1px solid var(--line); padding-top: 6px; }
.h-stats dt { font: 500 10px/1 var(--f-mono); letter-spacing: .12em; opacity: .8; }
.h-stats dd { margin: 3px 0 0; font: 700 clamp(18px, 1.8vw, 24px)/1 var(--f-serif); }
.h-stats .st-make dd { font: 700 13px/1 var(--f-serif); letter-spacing: .2em; }
.h-band { grid-area: 2 / 1 / 3 / 4; position: relative; }
.h-prompt { display: flex; align-items: center; gap: 10px; height: 34px; margin: 0 0 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 500 12px/1 var(--f-mono); min-width: 0; }
.hp-tag { background: var(--ind); color: #fff; padding: 4px 7px; font-size: 10px; letter-spacing: .14em; border-radius: 2px; flex: none; }
.hp-model { border: 1.2px solid var(--ind); padding: 3px 7px; border-radius: 99px; font-size: 10.5px; flex: none; white-space: nowrap; }
.hp-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font: inherit; }
.caret { width: 7px; height: 14px; background: var(--ind); flex: none; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.card button { display: block; width: 100%; text-align: left; position: relative; }
.card .pic { aspect-ratio: 1; width: 100%; max-height: 23vh; outline: 1px solid var(--line); outline-offset: 4px; }
.card .ctag, .cell .ctag, .so-works .ctag { position: absolute; left: 0; top: 0; background: var(--ind); color: #fff; font: 500 9.5px/1 var(--f-mono); padding: 4px 6px; letter-spacing: .04em; z-index: 2; white-space: nowrap; }
.card .cap { display: block; margin-top: 9px; line-height: 1.25; }
.card .cap b { display: block; font: 700 13px/1.25 var(--f-serif); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .cap small { display: block; font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.live .pic { outline: 2px solid var(--ind); }
.card button:hover .cap b { text-decoration: underline; text-underline-offset: 3px; text-decoration-style: dashed; }
.hint { position: absolute; left: 0; top: -50px; z-index: 4; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; background: var(--ind); color: #fff; font-size: 13px; border-radius: 2px; transform: rotate(-1.5deg);
  box-shadow: 0 8px 14px -8px rgba(20,40,108,.7); transition: opacity .4s, transform .4s; }
.hint::before { content: ""; position: absolute; inset: 3px; border: 1.2px dashed rgba(255,255,255,.7); pointer-events: none; }
.hint svg { transform: rotate(90deg); width: 15px; height: 15px; }
.hint.out { opacity: 0; transform: rotate(-1.5deg) translateY(6px); }
.hint[hidden] { display: none; }

/* ============================================================= 创作者故事：漫画分格 */
.v-stories { display: flex; flex-direction: column; }
.panels { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.25fr; grid-template-rows: 1fr 1fr; gap: 10px; }
/* 格子自带帆布底：肖像用 multiply 融进去时不依赖外层（视图切换动画会形成隔离组） */
.panel, .so-panel { background: var(--paper) url(media/canvas.webp) 0 0 / 192px; }
.panel { position: relative; overflow: hidden; }
.panel::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--ind); pointer-events: none; z-index: 2; clip-path: inset(0 100% 100% 0); transition: clip-path .7s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.panel .pn-pt { position: absolute; left: 2%; bottom: 0; height: 88%; width: auto; aspect-ratio: 3 / 4; object-fit: cover; mix-blend-mode: multiply; --p: -20%;
  -webkit-mask: linear-gradient(180deg, #000 calc(var(--p) - 4%), transparent calc(var(--p) + 4%)); mask: linear-gradient(180deg, #000 calc(var(--p) - 4%), transparent calc(var(--p) + 4%));
  transition: --p 1.1s var(--ease); transition-delay: calc(var(--i) * 110ms + .15s); }
.panels .panel:nth-child(4n+2) .pn-pt, .panels .panel:nth-child(4n+3) .pn-pt { left: -9%; }
.panel .pn-line, .panel .pn-who { text-shadow: 0 0 2px var(--paper), 0 0 4px var(--paper), 0 0 6px var(--paper), 0 0 8px var(--paper); }
.panel .pn-no { position: absolute; left: 10px; top: 8px; font: 500 11px/1 var(--f-mono); z-index: 3; }
.panel .pn-line { position: absolute; right: 12px; top: 14px; margin: 0; writing-mode: vertical-rl; font: 700 clamp(13px, 1.25vw, 17px)/1.75 var(--f-cn); letter-spacing: .12em; max-height: 62%; z-index: 3;
  clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease); transition-delay: calc(var(--i) * 110ms + .45s); }
.panel .pn-who { position: absolute; right: 12px; bottom: 50px; text-align: right; line-height: 1.2; z-index: 3; }
.panel .pn-who b { display: block; font: 700 17px/1.1 var(--f-serif); }
.panel .pn-who small { font-size: 11px; opacity: .85; }
.panel .pn-go { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: grid; place-items: center; width: 52px; height: 30px; border: 1.5px solid var(--ind); border-radius: 15px; background: var(--paper); transition: background-color .2s, color .2s, transform .2s; }
.panel .pn-go svg { width: 18px; height: 18px; stroke-width: 2; }
.panel .pn-go::after { content: ""; position: absolute; inset: -8px; }
.panel .pn-go:hover { background: var(--ind); color: #fff; transform: translateX(2px); }
.panel .pn-stat { position: absolute; left: 10px; bottom: 10px; z-index: 3; background: var(--ind); color: #fff; font: 500 10px/1 var(--f-mono); padding: 4px 6px; }
.panels.sewn .panel::before { clip-path: inset(0); }
.panels.sewn .pn-pt { --p: 115%; }
.panels.sewn .pn-line { clip-path: inset(0); }
/* 展开：这一格放大，旁边展开 TA 的作品 */
.v-stories.is-open .panels, .v-stories.is-open .v-head, .story-open[hidden] { display: none; }
.story-open { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 28px; animation: vin .45s var(--ease) both; }
.so-panel { position: relative; border: 1.5px solid var(--ind); overflow: hidden; min-height: 0; }
.so-panel .pn-pt { position: absolute; left: 3%; bottom: 0; height: 92%; width: auto; aspect-ratio: 3 / 4; object-fit: cover; mix-blend-mode: multiply; }
.so-panel .so-line { position: absolute; right: 18px; top: 22px; margin: 0; writing-mode: vertical-rl; font: 900 clamp(20px, 2.3vw, 32px)/1.6 var(--f-cn); letter-spacing: .1em; max-height: 88%; }
.so-panel .pn-no { position: absolute; left: 14px; top: 12px; font: 500 12px/1 var(--f-mono); }
.so-side { display: flex; flex-direction: column; min-height: 0; }
.so-top { display: flex; align-items: flex-start; gap: 16px; }
.so-top h3 { margin: 0; font: 700 clamp(30px, 3vw, 42px)/1 var(--f-serif); }
.so-top p { margin: 6px 0 0; font-size: 13px; }
.so-x { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1.4px solid var(--ind); border-radius: 20px; font-size: 13px; flex: none; }
.so-x svg { width: 15px; height: 15px; }
.so-more { margin: 14px 0 6px; font: 700 clamp(15px, 1.4vw, 19px)/1.55 var(--f-cn); }
.so-stat { display: inline-block; background: var(--ind); color: #fff; font: 500 11px/1 var(--f-mono); padding: 5px 8px; margin-bottom: 14px; align-self: flex-start; }
.so-works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; flex: 1; min-height: 0; align-content: start; }
.so-works .pic { aspect-ratio: 1; width: 100%; max-height: calc((100svh - var(--top) - 330px) / 2); }
.so-works button { display: block; width: 100%; text-align: left; position: relative; }
.so-works .cap { display: block; margin-top: 8px; }
.so-works .cap b { display: block; font: 700 15px/1.2 var(--f-serif); }
.so-works .cap small { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================= 作品：细线分格 + 筛选胶囊 + 刺绣页码 */
.v-works { display: flex; flex-direction: column; }
.w-head { align-items: center; flex-wrap: wrap; row-gap: 10px; }
.w-ttl { align-items: center !important; gap: 6px !important; }
.emb-works { width: clamp(270px, 25vw, 350px); height: clamp(50px, 7.2vh, 64px); }
.w-plus { width: 26px; height: 26px; stroke-width: 1.6; }
.chips { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 34px; padding: 0 14px; border: 1.4px solid var(--ind); border-radius: 17px; font: 600 13px/1 var(--f-sans); display: inline-flex; align-items: center; transition: background-color .2s, color .2s; }
.chip sup { font: 500 9px/1 var(--f-mono); margin-left: 2px; transform: translateY(-4px); }
.chip[aria-pressed="true"] { background: var(--ind); color: #fff; }
.chip:hover:not([aria-pressed="true"]) { background: rgba(31,58,150,.08); }
.grid { --cols: 6; --rows: 2; list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cell { position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 10px 8px; min-height: 0; display: flex; flex-direction: column; }
.cell button { flex: 1; min-height: 0; display: flex; flex-direction: column; text-align: left; position: relative; }
.cell .pic { flex: 1; min-height: 0; width: 100%; }

.cell .cap { display: block; padding-top: 7px; line-height: 1.2; }
.cell .cap b { display: block; font: 700 15px/1.2 var(--f-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .cap small { display: block; font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .no { position: absolute; right: 10px; bottom: 10px; font: 500 9.5px/1 var(--f-mono); opacity: .7; z-index: 2; }
.cell .cap { padding-right: 38px; }
.cell.empty { pointer-events: none; }
/* 剪线：虚线框闪一下，再收起淡出 */
.cell.cut { animation: cut .34s var(--ease) forwards; }
.cell.cut::after { content: ""; position: absolute; inset: 6px; border: 1.5px dashed var(--ind); }
@keyframes cut { 0% { opacity: 1; } 40% { opacity: 1; transform: scale(.98); clip-path: inset(0); } 100% { opacity: 0; transform: scale(.9); clip-path: inset(0 0 0 100%); } }
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 10px; }
.pg-arr { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.4px solid var(--ind); }
.pg-arr svg { width: 20px; height: 20px; stroke-width: 2.2; }
.pg-arr:disabled { opacity: .3; cursor: default; }
.pg-nums { display: flex; gap: 4px; }
.pg-n { position: relative; width: 52px; height: 44px; opacity: .42; transition: opacity .2s; }
.pg-n canvas { width: 100%; height: 100%; }
.pg-n[aria-current] { opacity: 1; }
.pg-n[aria-current]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px; border-bottom: 1.6px dashed var(--ind); }
.pg-n:hover { opacity: .8; }

/* ============================================================= Jam：海浪 */
.v-jam { display: flex; flex-direction: column; }
.sea { position: relative; flex: 0 0 50%; min-height: 200px; margin: 0 calc(var(--pad) * -1); overflow: hidden; }
.sea-cap { position: absolute; left: var(--pad); top: 2px; margin: 0; font: 700 clamp(14px, 1.3vw, 17px)/1 var(--f-cn); z-index: 2; }
.sea-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.sea-line path { stroke: var(--ind); stroke-width: 1.6; vector-effect: non-scaling-stroke; fill: none; }
.emb-wave { position: absolute !important; left: 0; bottom: 0; height: 72% !important; }
.boat { position: absolute; left: 0; top: 0; width: clamp(64px, 6.4vw, 92px); height: auto; overflow: visible; z-index: 3; will-change: transform; }
.boat .hull { fill: var(--ind); stroke: var(--ind); }
.boat .mast { stroke: var(--ind); stroke-width: 3; }
.boat .sail { fill: #fff; stroke: var(--ind); stroke-width: 2.4; stroke-dasharray: 4 3; }
.boat .sail-t { fill: var(--ind); font: 900 12px/1 var(--f-cn); stroke: none; }
.jam-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr .85fr 1.35fr; gap: clamp(20px, 3vw, 44px); padding-top: 14px; }
.jam-info h2 { margin: 0 0 10px; font: 900 clamp(26px, 3vw, 40px)/1.1 var(--f-cn); }
.jam-info p { margin: 0 0 10px; font-size: 14px; }
.jam-info .small { font-size: 12.5px; opacity: .9; border-top: 1px solid var(--line); padding-top: 10px; }
.cd { display: flex; gap: 8px; margin: 0 0 14px; }
.cd span { display: grid; justify-items: center; min-width: 56px; padding: 8px 4px 6px; border: 1.4px solid var(--ind); border-radius: 3px; position: relative; }
.cd span::before { content: ""; position: absolute; inset: 3px; border: 1px dashed var(--line); }
.cd b { font: 700 28px/1 var(--f-serif); font-variant-numeric: lining-nums tabular-nums; }
.cd small { font-size: 10px; }
.prize { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.prize small { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; }
.prize b { font: 700 clamp(34px, 3.4vw, 48px)/1 var(--f-serif); }
.jam-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jb { display: grid; grid-template-columns: 26px 46px minmax(0, 1fr) 96px; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line-s); cursor: pointer; }
.jb > b { font: 500 14px/1 var(--f-mono); }
.jb .pic { width: 46px; height: 46px; }
.jb div b { display: block; font: 700 15px/1.2 var(--f-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb div small { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vote { font: 500 11px/1 var(--f-mono); display: grid; gap: 5px; }
.vote i { display: block; height: 5px; width: var(--w); background: repeating-linear-gradient(112deg, var(--ind) 0 3px, transparent 3px 5px); }
.jb:hover div b { text-decoration: underline dashed; text-underline-offset: 3px; }

/* ============================================================= 宣言：整屏靛蓝 */
.v-statement { background: var(--ind) url(media/canvas.webp) 0 0 / 192px; background-blend-mode: multiply; color: #fff; padding-top: 6px; }
.mf { height: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: 32px; }
.mf-h { grid-column: 1 / 3; margin: 0 0 10px; font: 600 12px/1 var(--f-serif); letter-spacing: .26em; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 10px; }
.mf-text { grid-column: 1 / 3; columns: 4; column-gap: 26px; column-rule: 1px solid rgba(255,255,255,.18); font-size: clamp(11px, 1.7vh, 15px); line-height: 1.62; text-align: justify; color: rgba(255,255,255,.92); overflow: hidden; min-height: 0; }
.mf-text p { margin: 0 0 .7em; }
.mf-text b { color: #fff; font-weight: 700; }
.mf-text .mf-en { font: italic 600 1.15em/1.45 var(--f-serif); letter-spacing: .02em; }
.mf-cta { grid-column: 2; grid-row: 3; display: grid; justify-items: end; gap: 6px; align-self: end; padding-top: 10px; }
.mf-seat { margin: 0; font: 500 11px/1 var(--f-mono); opacity: .85; }
.mf-big { grid-column: 1 / 3; grid-row: 4; height: clamp(96px, 21vh, 190px); margin: 0 -10px; }
.foot { position: absolute; left: var(--pad); bottom: 6px; margin: 0; font: 500 10px/1 var(--f-mono); opacity: .75; }

/* ============================================================= 详情 */
.sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: rgba(246,244,238,.94) url(media/canvas.webp) 0 0 / 192px; }
.sheet[hidden] { display: none; }
.sheet-card { position: relative; width: min(1220px, 100%); height: min(780px, calc(100svh - 48px)); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border: 1.5px solid var(--ind); background: var(--paper); box-shadow: 0 30px 60px -40px rgba(20,40,108,.6); }
.sheet.opening .sheet-card { animation: unfold .5s var(--ease) both; }
.sheet.closing { animation: fade .26s ease forwards; }
@keyframes unfold { from { opacity: 0; transform: translateY(14px) scale(.985); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes fade { to { opacity: 0; } }
.sh-x { position: absolute; right: 12px; top: 12px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; border: 1.4px solid var(--ind); border-radius: 50%; background: var(--paper); }
.sh-x svg { width: 20px; height: 20px; stroke-width: 2; }
.sh-fig { margin: 0; padding: 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.sh-img { position: relative; flex: 1; min-height: 0; overflow: hidden; --r: 0px; transition: --r 1s var(--ease); }
.sh-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sh-img .sh-ink { -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + .5px)); mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + .5px)); }
.sh-img.color { --r: 900px; }
.sh-toggle { display: flex; align-self: center; border: 1.4px solid var(--ind); border-radius: 20px; padding: 3px; }
.sh-toggle button { height: 34px; padding: 0 18px; border-radius: 17px; font-size: 13px; font-weight: 600; }
.sh-toggle button[aria-pressed="true"] { background: var(--ind); color: #fff; }
.sh-info { padding: 26px 30px 22px; overflow: auto; display: flex; flex-direction: column; min-height: 0; }
.sh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 50px 12px 0; }
.sh-tags span { background: var(--ind); color: #fff; font: 500 10.5px/1 var(--f-mono); padding: 5px 7px; }
.sh-info h2 { margin: 0; font: 700 clamp(28px, 2.8vw, 40px)/1.08 var(--f-serif); }
.sh-by { margin: 6px 0 14px; font-size: 14px; }
.sh-by b { font-weight: 700; }
.sh-lbl { margin: 10px 0 6px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; display: flex; align-items: center; gap: 8px; }
.sh-model { border: 1.2px solid var(--ind); border-radius: 99px; padding: 3px 7px; letter-spacing: .02em; }
.sh-desc { margin: 0; font: 700 15px/1.65 var(--f-cn); }
.sh-prompt { position: relative; border: 1.4px dashed var(--ind); padding: 12px 14px; background: rgba(255,255,255,.5); }
.sh-prompt code { font: 500 12.5px/1.6 var(--f-mono); }
.sh-stats { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sh-stats li { padding: 9px 0; }
.sh-stats li + li { border-left: 1px solid var(--line-s); padding-left: 12px; }
.sh-stats small { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .1em; }
.sh-stats b { font: 700 22px/1.2 var(--f-serif); }
.sh-who { display: flex; gap: 14px; align-items: center; text-decoration: none; margin-bottom: 14px; padding-right: 8px; }
.sh-who[hidden] { display: none; }
.sh-who img { width: 64px; height: 85px; object-fit: cover; mix-blend-mode: multiply; border: 1px solid var(--line); flex: none; }
.sh-who span { display: grid; gap: 3px; line-height: 1.35; }
.sh-who small { font: 500 10px/1 var(--f-mono); letter-spacing: .1em; }
.sh-who b { font: 700 16px/1.2 var(--f-serif); }
.sh-who i { font: 700 13px/1.5 var(--f-cn); font-style: normal; }
.sh-who em { font-style: normal; font-size: 12px; text-decoration: underline dashed; text-underline-offset: 3px; }
.sh-act { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sh-steps { margin-left: auto; display: flex; gap: 8px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--bot) + 24px); z-index: 60; margin: 0; transform: translate(-50%, 20px); background: var(--ind); color: #fff; padding: 10px 18px; border-radius: 2px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.toast::before { content: ""; position: absolute; inset: 3px; border: 1.2px dashed rgba(255,255,255,.7); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================= 中屏 */
@media (max-width: 1180px) {
  .tag { min-width: 66px; padding: 0 10px; }
  .h-stats { display: none; }
  .jam-body { grid-template-columns: 1fr 1fr; }
  .jam-board-wrap { grid-column: 1 / 3; }
  .mf-text { columns: 3; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .tag { height: 42px; }
  :root { --top: 68px; }
  .card .cap small { display: none; }
  .jam-board { gap: 2px; } .jb .pic { width: 40px; height: 40px; } .jb { grid-template-columns: 26px 40px minmax(0, 1fr) 96px; padding: 2px 0; }
  .jam-info p { font-size: 13px; }
}

/* ============================================================= 手机：底部一排布标 */
@media (max-width: 760px) {
  :root { --top: 58px; --bot: calc(66px + env(safe-area-inset-bottom)); --pad: 16px; }
  .pill { left: auto; right: 16px; transform: translateY(-50%); }
  .tags { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bot); z-index: 25; margin: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
    background: var(--paper) url(media/canvas.webp) 0 0 / 192px; border-top: 1px solid var(--line); }
  html.dark .tags { background-color: var(--ind); background-blend-mode: multiply; border-top-color: rgba(255,255,255,.3); }
  .tag { min-width: 0; height: 50px; padding: 0 2px; }
  .tag b { font-size: 13px; }
  .tag small { font-size: 7.5px; letter-spacing: .12em; }
  .tag .tick { top: -7px; right: -4px; }
  .v { overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px 22px; -webkit-overflow-scrolling: touch; }
  .v-head { flex-wrap: wrap; gap: 6px 14px; }
  .v-sub { margin: 0; flex-basis: 100%; }

  .v-home { display: grid; grid-template-columns: minmax(0, 1fr) 84px; grid-template-rows: auto auto auto; column-gap: 10px; }
  .h-head { grid-area: 1 / 1; align-self: start; }
  .h-eyebrow span + span { display: none; }
  .card .ctag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 8.5px; }
  .emb-title { height: 74px; margin: 4px 0 0 -4px; }
  .h-subrow { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
  .emb-sub { width: 190px; height: 40px; }
  .h-lede { font-size: 13px; }
  .btn-main { height: 50px; padding: 0 20px; font-size: 15px; }
  .h-slogan { grid-area: 1 / 2; width: 80px; height: 262px; align-self: start; margin-top: 8px; }
  .h-stats { display: grid; grid-area: 2 / 1 / 3 / 3; grid-template-columns: repeat(4, 1fr); text-align: left; gap: 8px; margin: 16px 0 12px; }
  .h-stats .st-make { display: none; }
  .h-stats dd { font-size: 17px; }
  .h-band { grid-area: 3 / 1 / 4 / 3; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
  .strip .card:nth-child(n+7) { display: none; }
  .card .pic { max-height: none; outline-offset: 2px; }
  .card .cap b { font-size: 13.5px; }
  .card .cap small { font-size: 10px; }
  .h-prompt { height: auto; min-height: 34px; padding: 6px 0; flex-wrap: wrap; row-gap: 4px; }
  .hp-text { flex-basis: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.45; font-size: 11px; }
  .caret { display: none; }
  /* 手机：提示是作品带上方独立的一行，不压任何内容；消失时收起 */
  .hint { position: relative; top: auto; left: auto; width: fit-content; margin: 0 0 10px; transform: none; max-height: 44px; overflow: hidden; transition: opacity .3s, max-height .4s .2s, margin .4s .2s, padding .4s .2s; }
  .hint.out { transform: none; max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; }

  .panels { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 232px; gap: 8px; flex: none; }
  .panels .panel .pn-pt { height: 68%; left: -10%; bottom: 0; }
  .panel .pn-line { font-size: 11px; line-height: 1.55; letter-spacing: .06em; right: 6px; top: 8px; max-height: 60%; }
  .panel .pn-who { right: 8px; bottom: 44px; }
  .panel .pn-who b { font-size: 14px; }
  .panel .pn-who small { display: none; }
  .panel .pn-go { width: 46px; height: 28px; right: 8px; bottom: 8px; }
  .panel .pn-stat { display: none; }
  .story-open { grid-template-columns: 1fr; grid-template-rows: 300px auto; gap: 16px; flex: none; }
  .so-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .so-works .pic { max-height: none; }

  .w-head { margin-bottom: 10px; }
  .emb-works { width: 250px; height: 48px; }
  .chips { margin: 0; gap: 6px; }
  .chip { height: 34px; padding: 0 11px; font-size: 12.5px; }
  .grid { --cols: 2; --rows: 3; flex: none; height: min(660px, 168vw); }
  .cell { padding: 8px 8px 6px; }
  .cell .ctag { max-width: calc(100% - 4px); overflow: hidden; text-overflow: ellipsis; }
  .cell .no { display: none; }
  .cell .cap { padding-right: 0; }
  .cell .cap b { font-size: 14px; }
  .pager { padding-top: 12px; }
  .pg-n { width: 44px; }

  .sea { flex: none; height: 230px; }
  .jam-body { grid-template-columns: 1fr; gap: 18px; }
  .jam-board-wrap { grid-column: auto; }
  .jb { grid-template-columns: 22px 44px minmax(0, 1fr) 76px; gap: 10px; }
  .cd span { min-width: 54px; }

  .v-statement { padding-bottom: 36px; }
  .mf { height: auto; grid-template-columns: 1fr; grid-template-rows: none; }
  .mf-h { grid-column: 1; line-height: 1.5; }
  .mf-text { grid-column: 1; columns: 1; font-size: 12px; line-height: 1.58; overflow: visible; }
  .mf-cta { grid-column: 1; grid-row: auto; justify-items: start; padding: 14px 0 6px; }
  .mf-big { grid-column: 1; grid-row: auto; height: 84px; margin: 6px -6px 0; }
  .foot { position: static; margin-top: 8px; }

  .sheet { padding: 0; place-items: stretch; }
  .sheet-card { height: 100%; width: 100%; grid-template-columns: 1fr; grid-template-rows: auto 1fr; border: 0; overflow: auto; display: block; }
  .sh-fig { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .sh-img { flex: none; height: min(46svh, 92vw); }
  .sh-info { overflow: visible; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
  .sh-steps { margin-left: 0; }
  .sh-x { position: fixed; right: 12px; top: 12px; }
}
@media (max-width: 380px) { .h-stats { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================= 减少动画：直接终态 */
html.rm *, html.rm *::before, html.rm *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
html.rm .caret { animation: none; }