/* ================= 首页（编排） ================= */
.hero { position:relative; min-height:min(84vh, 820px); display:grid; grid-template-columns:1.1fr 1fr .5fr; align-items:center; gap:3vw; }
.hero-copy { position:relative; z-index:3; padding-bottom:6%; animation:intro .6s var(--ease) both; }
.hero-copy .kicker { margin-bottom:28px; }
.hero-copy h1 { font-size:clamp(38px, 4.4vw, 64px); letter-spacing:.08em; line-height:1.45; }
.hero-copy p { color:var(--fg2); margin:24px 0 34px; line-height:2; }
.art { position:relative; height:520px; }
.disc { position:absolute; left:50%; top:50%; width:360px; height:360px; transform:translate(-50%,-50%); border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 38%, var(--surface), var(--bg2) 72%); }
.ground { position:absolute; left:50%; top:calc(50% + 112px); width:150px; height:16px; transform:translateX(-62%); border-radius:50%; background:radial-gradient(ellipse, rgb(15 30 51 / .14), transparent 70%); animation:ground 6s ease-in-out infinite; }
.bamboo { position:absolute; left:50%; top:50%; width:360px; height:360px; transform:translate(-50%,-50%); pointer-events:none; clip-path:circle(50%); }
.bamboo .cane, .bamboo .node { fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; }
.bamboo .cane { opacity:.45; }
.bamboo .node { opacity:.6; }
.bamboo .leaves { fill:var(--gold); opacity:.22; transform-origin:252px 300px; animation:sway 8s ease-in-out infinite; }
@keyframes sway { 50% { transform:rotate(2deg); } }
.hero-mascot { position:absolute; left:50%; top:50%; width:196px; height:auto; transform:translate(-62%,-50%); animation:float 6s ease-in-out infinite; }
[data-theme=dark] .hero-mascot { filter:drop-shadow(0 0 1px rgb(255 247 234 / .5)) drop-shadow(0 0 16px rgb(214 193 156 / .18)); }
[data-theme=dark] .disc { background:radial-gradient(circle at 50% 38%, #24344a, #142030 70%); }
[data-theme=dark] .ground { background:radial-gradient(ellipse, rgb(0 0 0 / .45), transparent 70%); }
@keyframes float { 50% { transform:translate(-62%, calc(-50% - 8px)); } }
@keyframes ground { 50% { transform:translateX(-62%) scaleX(.9); opacity:.7; } }
.art:hover .hero-mascot, .art:hover .ground { animation-play-state:paused; }
.hero-stats { display:flex; align-items:center; gap:14px; margin:22px 0 0 !important; font-size:13px; color:var(--muted); line-height:1 !important; }
.hero-stats b { font:600 16px Georgia, serif; color:var(--fg); margin-right:2px; }
.hero-stats i { width:1px; height:12px; background:var(--line); }
.vertical { justify-self:end; align-self:start; margin-top:60px; display:flex; gap:12px; font:600 clamp(40px, 4.4vw, 64px)/1.2 var(--serif); letter-spacing:.05em; }
.vertical span { writing-mode:vertical-rl; }
.vertical span:nth-child(2) { margin-top:64px; color:var(--gold); }
.scroll { position:absolute; bottom:20px; right:0; font-size:10px; letter-spacing:.22em; color:var(--muted); }

.section { padding-block:clamp(88px, 9vw, 130px); }
.head { display:flex; justify-content:space-between; align-items:end; gap:48px; margin-bottom:56px; }
.head h2 { font-size:clamp(28px, 2.8vw, 40px); margin-top:12px; letter-spacing:.06em; }
.head p { max-width:420px; color:var(--muted); line-height:1.9; }
.head .link { flex:none; }

.apps-band { background:var(--bg2); }
.apps-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:8%; align-items:start; }
.apps-layout h2 { font-size:clamp(28px, 3vw, 42px); margin:12px 0 16px; }
.apps-layout .desc { color:var(--muted); max-width:400px; }
.timeline { margin-top:40px; border-left:1px solid var(--line); }
.item { position:relative; display:grid; grid-template-columns:44px 1fr auto; gap:14px; width:100%; padding:16px 0 16px 24px; text-align:left; color:var(--muted); border-bottom:1px solid var(--line); }
.item::before { content:""; position:absolute; left:-5px; top:25px; width:9px; height:9px; border-radius:50%; background:var(--bg2); border:1px solid var(--muted); transition:.2s; }
.item:hover { color:var(--fg2); }
.item.on { color:var(--fg); }
.item.on::before { background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
.item strong { font-weight:500; }
.item span:last-child { font-size:12px; }
.visual { background:var(--surface); height:clamp(360px, 36vw, 480px); position:relative; overflow:hidden; box-shadow:var(--shadow); }
.scene { position:absolute; inset:0; padding:36px; opacity:0; transform:scale(1.03); transition:opacity .4s, transform .6s; pointer-events:none; }
.scene.on { opacity:1; transform:none; pointer-events:auto; }
.scene img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left; }
.scene .big { font:italic 600 28px/1 Georgia, serif; color:var(--muted); opacity:.5; position:absolute; right:36px; top:32px; }
.scene .mock { position:absolute; left:36px; right:36px; top:76px; bottom:36px; display:grid; grid-template-columns:30% 1fr; border:1px solid var(--line); background:var(--bg); }
.scene .mock .sb { border-right:1px solid var(--line); padding:16px 14px; }
.scene .mock .sb i, .scene .mock .mn i { display:block; height:8px; border-radius:4px; background:var(--line); margin-bottom:12px; }
.scene .mock .sb i:first-child { background:var(--gold-soft); width:70%; }
.scene .mock .mn { padding:18px 20px; position:relative; }
.scene .mock .mn i { height:30px; border-radius:6px; background:var(--bg2); margin-bottom:9px; }
.scene .mock .mn i:first-child { background:none; border:1px solid var(--line); }
.scene .mock .mn i:nth-child(2) { background:var(--hl); }
.scene .mock .gl { position:absolute; right:20px; bottom:14px; font-size:44px; }
.caption { display:flex; justify-content:space-between; align-items:end; gap:20px; padding-top:22px; }
.caption h3 { font-size:24px; }
.caption p { color:var(--muted); font-size:13px; margin-top:6px; }
.caption .n { font:italic 28px Georgia, serif; color:var(--muted); opacity:.6; text-align:right; }

.band { background:var(--band); color:var(--band-fg); }
.band .eyebrow { color:var(--band-gold); }
.band-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:9%; align-items:start; }
.band h2 { font-size:clamp(30px, 3vw, 44px); margin:12px 0 18px; }
.band p { color:var(--band-muted); max-width:420px; }
.band .link { display:inline-block; margin-top:28px; color:var(--band-fg); }
.band .link:hover { color:var(--band-gold); }
.post-row { display:grid; grid-template-columns:90px 1fr auto; gap:20px; padding:20px 0; border-bottom:1px solid var(--band-line); transition:padding .3s; }
.post-row:hover { padding-left:12px; }
.post-row:hover h3 { color:var(--band-gold); }
.post-row h3 { font-size:18px; transition:color .2s; }
.post-row span { color:var(--band-muted); font-size:12px; }

/* ================= 软件下载页（留白） ================= */
.app-hero { text-align:center; padding:48px 24px 0; }
.app-icon { width:76px; height:76px; margin:0 auto 22px; display:grid; place-items:center; font-size:38px; background:var(--surface); border-radius:20px; box-shadow:var(--shadow); animation:intro .5s var(--ease) both; }
.app-hero h1 { font:600 clamp(52px, 8vw, 92px)/1.12 var(--serif); letter-spacing:-.02em; margin:0 0 18px; animation:intro .5s var(--ease) 40ms both; }
.app-hero .sub { font-size:18px; color:var(--fg2); margin:0 0 28px; animation:intro .5s var(--ease) 80ms both; }
.dl-btn { display:inline-flex; align-items:center; gap:22px; background:var(--btn); color:var(--btn-fg); border-radius:99px; padding:13px 28px; font-size:15px; transition:opacity .15s; animation:intro .5s var(--ease) 120ms both; }
.dl-btn:hover { opacity:.86; }
.dl-btn span { transition:transform .15s var(--ease); }
.dl-btn:hover span { transform:translate(2px, 2px); }
.os-note { font-size:13px; color:var(--muted); margin-top:14px; }
.os-note a { border-bottom:1px solid var(--line); }
.os-note a:hover { color:var(--fg); }
.stage { max-width:1000px; margin:48px auto 0; position:relative; }
.stage::before { content:""; position:absolute; left:6%; right:6%; bottom:-30px; height:60px; background:radial-gradient(ellipse, rgb(15 30 51 / .1), transparent 70%); animation:shadow 5.6s ease-in-out infinite; }
.breath { animation:breath 5.6s ease-in-out infinite; }
.stage:hover .breath, .stage:hover::before { animation-play-state:paused; }
@keyframes breath { 50% { transform:translateY(-7px); } }
@keyframes shadow { 50% { opacity:.5; transform:scaleX(1.05); } }
.shot { aspect-ratio:16/8; contain-intrinsic-size:auto 500px; border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-lg); position:relative; }
.shot img { width:100%; height:100%; object-fit:cover; object-position:top left; }
.shot .fake { position:absolute; inset:0; display:grid; grid-template-columns:200px 1fr; text-align:left; }
.fake .side { background:var(--bg2); border-right:1px solid var(--line); padding:16px 14px; }
.fake .dots { display:flex; gap:7px; margin-bottom:22px; }
.fake .dots b { width:11px; height:11px; border-radius:50%; background:var(--line); }
.fake .side i, .fake .main i { display:block; height:9px; border-radius:5px; background:var(--line); margin:0 0 14px; }
.fake .side i:nth-child(2) { background:var(--gold-soft); }
.fake .main { padding:24px 28px; }
.fake .main i { height:34px; border-radius:8px; background:var(--bg2); margin-bottom:10px; }
.fake .main i:first-child { height:40px; border:1px solid var(--line); background:none; margin-bottom:18px; }
.fake .main i:nth-child(2) { background:var(--hl); }
.fake .glyph { position:absolute; right:40px; bottom:24px; font-size:64px; opacity:.85; }

.feat { max-width:1000px; margin:110px auto 0; padding:0 24px; }
.feat h2, .install h2 { font:500 34px/1.4 var(--serif); text-align:center; margin:0 0 36px; }
.feat-row { display:grid; grid-template-columns:48px 220px 1fr; gap:20px; padding:26px 0; border-top:1px solid var(--line); }
.feat-row:last-child { border-bottom:1px solid var(--line); }
.feat-row .num { font:13px/28px var(--mono); color:var(--muted); }
.feat-row h3 { font:500 17px/1.65 var(--sans); }
.feat-row p { color:var(--muted); }
.install { max-width:1032px; margin:96px auto 0; padding:40px 40px 32px; background:var(--bg2); }
.install h2 { text-align:left; font-size:30px; margin-bottom:28px; }
.platforms { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:36px 48px; }
.platforms h3 { display:flex; align-items:baseline; gap:12px; font:500 17px var(--sans); margin-bottom:10px; }
.platforms h3 small { color:var(--muted); font-size:13px; font-weight:400; }
.platforms p { color:var(--muted); margin-bottom:14px; }
.install-note { margin-top:28px; color:var(--muted); font-size:14px; }
.app-docs { max-width:1032px; margin:28px auto 100px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.app-docs a { padding:20px 22px; border:1px solid var(--line); transition:border-color .2s, transform .3s var(--ease); }
.app-docs a:hover { border-color:var(--fg); transform:translateY(-3px); }
.app-docs small { display:block; color:var(--gold); font-size:11px; letter-spacing:.14em; margin-bottom:6px; }
.app-docs b { font-weight:500; }

/* ================= 软件列表 ================= */
.app-list { padding:20px 0 100px; }
.page-head:has(+ .software-filters) { border-bottom:0; padding-bottom:25px; }
.software-filters { display:flex; align-items:stretch; gap:30px; padding:0 2px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; overscroll-behavior-x:contain; }
.software-filter { position:relative; display:inline-flex; flex:none; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:10px 3px 15px; border:0; border-radius:0; white-space:nowrap; color:var(--muted); font:13px/1.7 var(--sans); transition:color .18s; }
.software-filter::after { content:''; position:absolute; bottom:0; left:3px; right:3px; height:2px; border-radius:2px; background:var(--gold); opacity:0; transform:scaleX(.45); transition:opacity .18s,transform .18s; }
.software-filter > span { display:inline-grid; place-items:center; min-width:21px; height:21px; padding:0 5px; border-radius:6px; background:var(--bg2); color:var(--muted); font:10px/1 var(--mono); }
.software-filter:only-child > span { display:none; }
.software-filter:hover { color:var(--fg); }
.software-filter.active { color:var(--fg); font-weight:600; }
.software-filter.active::after { opacity:1; transform:scaleX(1); }
.software-filter.active > span { background:var(--gold-soft); color:var(--gold); }
.software-filter:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; border-radius:5px; }
.software-filters + .app-list { padding-top:5px; }
@media (max-width:600px) { .software-filters { gap:23px; } .software-filter { min-height:48px; font-size:12px; gap:7px; } }
.software-category-badge { display:inline-block; margin:5px 0 0 10px; padding:2px 8px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font:11px/1.6 var(--sans); vertical-align:middle; letter-spacing:0; }
.app-row { display:grid; grid-template-columns:60px 72px 1fr 1.3fr 140px; gap:24px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); transition:padding .3s var(--ease); }
.app-row:hover { padding-left:12px; }
.app-row:hover h3 { color:var(--gold); }
.app-row .no { font:italic 26px Georgia, serif; color:var(--muted); opacity:.7; }
.app-row .ico { width:56px; height:56px; display:grid; place-items:center; font-size:28px; background:var(--bg2); }
.app-row h3 { font-size:24px; transition:color .2s; }
.app-row p { color:var(--muted); }
.app-row small { text-align:right; font-size:12px; letter-spacing:.08em; color:var(--muted); }

.recommend-row { grid-template-columns:60px 1fr 1.3fr 140px; }

/* ================= 文章列表 ================= */
.filter { display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; padding:22px 0; border-bottom:1px solid var(--line); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { padding:5px 14px; border:1px solid var(--line); border-radius:99px; font-size:13px; color:var(--fg2); transition:.2s; }
.chip:hover { border-color:var(--fg); }
.chip.on { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.search { margin-left:auto; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); padding:4px 0; min-width:240px; color:var(--muted); }
.search:focus-within { border-color:var(--fg); }
.search input { flex:1; border:0; outline:0; background:none; font-size:14px; color:var(--fg); }
.search svg { width:15px; height:15px; }
.year { font:italic 40px/1 Georgia, serif; color:var(--muted); opacity:.5; padding:44px 0 8px; }
.entry { display:grid; grid-template-columns:90px 1fr 120px; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); transition:padding .3s var(--ease); }
.entry:hover { padding-left:12px; }
.entry:hover h3 { color:var(--gold); }
.entry time { color:var(--muted); font:14px Georgia, serif; padding-top:3px; }
.entry h3 { font-size:20px; transition:color .2s; }
.entry p { color:var(--muted); font-size:14px; margin-top:4px; }
.entry .cat { text-align:right; font-size:12px; letter-spacing:.12em; color:var(--gold); padding-top:6px; }
.empty { padding:80px 0; text-align:center; color:var(--muted); }
.list-wrap { padding-bottom:100px; }

/* ================= 文章页 ================= */
.bar { position:fixed; top:0; left:0; height:2px; width:0; background:var(--gold); z-index:30; }
.post-layout { display:grid; grid-template-columns:200px minmax(0, 700px); justify-content:start; gap:64px; }
.post-layout > .post { grid-column:2; grid-row:1; }
.post-layout > .toc { grid-column:1; grid-row:1; }
.post { padding:48px 0 100px; min-width:0; }
.crumb { font-size:13px; color:var(--muted); }
.crumb a:hover { color:var(--fg); }
.crumb span { color:var(--gold); }
.post h1 { font-size:clamp(28px, 3.4vw, 40px); line-height:1.35; margin:12px 0 14px; letter-spacing:.02em; }
.post .lead { font-size:18px; color:var(--fg2); margin-bottom:28px; }
.meta-line { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--muted); padding-bottom:28px; border-bottom:1px solid var(--line); margin-bottom:36px; }
.meta-line + .info { margin-top:-36px; }
.info { display:flex; flex-wrap:wrap; align-items:center; gap:12px 32px; padding:16px 0; border-bottom:1px solid var(--line); font-size:14px; margin-bottom:36px; }
.info b { display:block; font-weight:400; color:var(--muted); font-size:12px; }
.info .dl-btn { margin-left:auto; padding:9px 22px; font-size:14px; animation:none; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:48px; }
.tags span { font-size:12px; color:var(--muted); border:1px solid var(--line); padding:2px 10px; border-radius:99px; }
.pager { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
.pager a { display:block; transition:color .2s; }
.pager a:hover { color:var(--gold); }
.pager small { display:block; color:var(--muted); font-size:12px; letter-spacing:.1em; }
.pager .next { text-align:right; }
.toc { position:sticky; top:40px; align-self:start; padding-top:56px; font-size:13px; max-height:calc(100vh - 60px); overflow:auto; scrollbar-width:none; }
.toc::-webkit-scrollbar { display:none; }
.toc .kicker { display:block; margin-bottom:12px; }
.toc a { display:block; color:var(--muted); padding:4px 0 4px 14px; border-left:1px solid var(--line); transition:color .2s, border-color .2s; }
.toc a.h3 { padding-left:26px; font-size:12px; }
.toc a.on, .toc a:hover { color:var(--fg); border-color:var(--gold); }
.mobile-toc { display:none; }

/* ================= 联系我们 ================= */
.contact-grid { display:grid; grid-template-columns:repeat(3, 1fr); border-left:1px solid var(--line); margin:56px 0 0; }
.ct { padding:30px 30px 34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; transition:background .3s; }
.ct:nth-child(-n+3) { border-top:1px solid var(--line); }
.ct:hover { background:var(--surface); }
.ct .kicker { display:flex; justify-content:space-between; align-items:center; }
.ct .ic { width:22px; height:22px; color:var(--gold); }
.ct .ic svg { width:100%; height:100%; }
.ct h3 { margin-top:26px; }
.ct h3 { font-size:22px; }
.ct p { color:var(--muted); font-size:14px; margin:6px 0 20px; }
.ct .val { margin-top:auto; }
.ct .val { font:15px var(--mono); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ct .qr { width:132px; height:132px; background:var(--surface); padding:6px; border:1px solid var(--line); margin-bottom:12px; }
.ct .qr img { width:100%; height:100%; object-fit:contain; }
.copy { font:12px var(--sans); color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:2px 12px; transition:.2s; }
.copy:hover { color:var(--fg); border-color:var(--fg); }
.copy.ok { color:var(--gold); border-color:var(--gold); }
.contact-note { padding:48px 0 100px; color:var(--muted); font-size:14px; max-width:620px; line-height:1.9; }

/* ================= 空状态 ================= */
.empty-state { text-align:center; padding:64px 20px 80px; }
.empty-state h3 { font-size:22px; }
.empty-state p { color:var(--muted); margin-top:6px; }
.apps-band .head { margin-bottom:0; }
.band-empty { color:var(--band-muted); padding:20px 0; border-top:1px solid var(--band-line); border-bottom:1px solid var(--band-line); }
.preview-tip { position:sticky; top:0; z-index:25; text-align:center; font-size:13px; padding:8px; background:var(--gold); color:#fff; }

/* ================= 404 ================= */
.nf { min-height:60vh; display:grid; place-content:center; text-align:center; gap:16px; }
.nf b { font:italic 96px/1 Georgia, serif; color:var(--gold); }

/* ================= 响应式 ================= */
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding-block:40px 80px; min-height:0; }
  .vertical, .scroll { display:none; }
  .art { height:360px; order:-1; }
  .disc { width:280px; height:280px; }
  .bamboo { width:280px; height:280px; }
  .hero-mascot { width:152px; }
  .ground { top:calc(50% + 86px); width:116px; }
  .apps-layout, .band-layout, .post-layout { grid-template-columns:1fr; gap:48px; }
  .post-layout > .post { grid-column:1; }
  .toc { display:none; }
  .mobile-toc { display:block; position:sticky; top:12px; z-index:10; margin:0 0 30px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:0 4px 18px #00000006; font-family:var(--sans); }
  .mobile-toc summary { display:flex; align-items:center; gap:10px; min-height:48px; padding:11px 16px; list-style:none; cursor:pointer; font-size:14px; }
  .mobile-toc summary::-webkit-details-marker { display:none; }
  .mobile-toc summary > span { margin-left:auto; color:var(--muted); font-size:12px; }
  .mobile-toc summary svg { width:16px; height:16px; transition:transform .2s; }
  .mobile-toc[open] summary svg { transform:rotate(180deg); }
  .mobile-toc nav { max-height:min(55dvh,420px); overflow:auto; overscroll-behavior:contain; scrollbar-width:none; padding:4px 16px 14px; border-top:1px solid var(--line); }
  .mobile-toc nav::-webkit-scrollbar { display:none; }
  .mobile-toc a { display:flex; align-items:center; min-height:44px; padding:8px 0 8px 12px; border-left:1px solid var(--line); font-size:14px; line-height:1.6; color:var(--fg2); overflow-wrap:anywhere; }
  .mobile-toc a.h3 { padding-left:24px; font-size:13px; }
  .mobile-toc a.on { color:var(--gold); border-left-color:var(--gold); }
  .contact-grid { grid-template-columns:1fr 1fr; }
  .ct:nth-child(3) { border-top:0; }
  .app-row { grid-template-columns:40px 56px 1fr; }
  .app-row p, .app-row small { grid-column:3; text-align:left; }
  .recommend-row { grid-template-columns:40px 1fr; }
  .recommend-row p, .recommend-row small { grid-column:2; }
  .app-docs { grid-template-columns:1fr; margin-inline:24px; }
  .install { margin-inline:24px; }
}
@media (max-width:650px) {
  .hero { padding-block:24px 40px; gap:12px; }
  .hero-copy { padding-bottom:0; }
  .hero-copy .kicker { margin-bottom:16px; line-height:1.8; }
  .hero-copy h1 { font-size:clamp(30px,9vw,40px); letter-spacing:.04em; }
  .hero-copy p { margin:16px 0 24px; }
  .hero-stats { margin-top:18px !important; flex-wrap:wrap; line-height:1.5 !important; }
  .section { padding-block:56px; }
  .head { margin-bottom:30px; }
  .head { display:block; }
  .head p { margin-top:16px; }
  .head .link { display:inline-block; margin-top:20px; }
  .post-row, .entry { grid-template-columns:1fr; gap:4px; }
  .entry .cat { text-align:left; padding:0; }
  .feat-row { grid-template-columns:28px 1fr; row-gap:6px; }
  .feat-row p { grid-column:2; }
  .feat-row { grid-template-columns:28px minmax(0,1fr); gap:6px 14px; }
  .app-hero { padding:32px 20px 0; }
  .app-hero h1 { font-size:clamp(34px,10vw,54px); overflow-wrap:anywhere; }
  .app-hero .sub { font-size:16px; line-height:1.85; }
  .app-hero .stage { margin-top:30px; }
  .feat { margin-top:64px; padding-inline:20px; }
  .feat h2,.install h2 { font-size:26px; }
  .shot { aspect-ratio:4/3; }
  .shot .fake { grid-template-columns:1fr; }
  .fake .side { display:none; }
  .install { margin:56px 20px 0; padding:26px 20px; }
  .platforms { grid-template-columns:minmax(0,1fr); gap:26px; }
  .platforms h3 { flex-wrap:wrap; gap:6px 12px; line-height:1.6; }
  .platforms a { display:inline-flex; align-items:center; min-height:44px; }
  .app-docs { margin:20px 20px 64px; }
  .app-row { grid-template-columns:44px minmax(0,1fr); gap:8px 14px; padding:24px 0; }
  .app-row .no { display:none; }
  .app-row .ico { width:44px; height:44px; font-size:24px; grid-row:1 / 3; }
  .app-row h3,.app-row p,.app-row small { grid-column:2; min-width:0; overflow-wrap:anywhere; }
  .app-row h3 { font-size:21px; }
  .app-row p { font-size:14px; }
  .app-row small { font-size:12px; letter-spacing:0; }
  .recommend-row { grid-template-columns:minmax(0,1fr); }
  .recommend-row h3,.recommend-row p,.recommend-row small { grid-column:1; }
  .timeline { margin-top:28px; }
  .item { grid-template-columns:24px minmax(0,1fr); padding-left:18px; gap:4px 8px; }
  .item span:last-child { grid-column:2; }
  .visual { height:280px; }
  .scene .mock { left:20px; right:20px; top:64px; bottom:24px; }
  .scene .mock .sb,.scene .mock .mn { padding:14px 12px; min-width:0; }
  .caption { flex-direction:column; align-items:start; }
  .caption > div:last-child { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; }
  .caption .n { font-size:24px; }
  .caption .link { display:inline-flex; align-items:center; min-height:44px; }
  .post { padding-block:28px 64px; }
  .post h1 { font-size:28px; overflow-wrap:anywhere; }
  .post .lead { font-size:16px; line-height:1.85; margin-bottom:22px; }
  .meta-line { font-size:12px; gap:6px 14px; padding-bottom:22px; margin-bottom:26px; }
  .pager { grid-template-columns:minmax(0,1fr); gap:22px; }
  .pager .next { text-align:left; }
  .ct { padding:24px 20px 28px; }
  .ct .val { overflow-wrap:anywhere; }
  .copy { min-height:36px; }
  .contact-grid { grid-template-columns:1fr; }
  .ct { border-top:0 !important; }
  .ct:first-child { border-top:1px solid var(--line) !important; }
  .search { margin-left:0; width:100%; min-width:0; min-height:44px; }
  .search input { min-width:0; font-size:16px; }
  .chip { min-height:40px; }
  .art { height:260px; order:0; }
  .disc { width:236px; height:236px; }
  .bamboo { width:236px; height:236px; }
  .hero-mascot { width:128px; }
  .ground { top:calc(50% + 72px); width:98px; }
}
@media (hover:none) { .app-row:hover,.entry:hover,.post-row:hover { padding-left:0; } }

.article-wallpaper { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.prose img[role=button] { cursor:zoom-in; }
.article-image-dialog { max-width:94vw; max-height:94dvh; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--fg); margin:auto; }
.article-image-dialog::backdrop { background:#0b111ad9; }
.article-image-dialog button { display:block; min-height:44px; margin:0 0 8px auto; padding-inline:10px; font-size:13px; color:var(--fg2); }
.article-image-dialog img { max-width:100%; max-height:calc(90dvh - 70px); object-fit:contain; }
.article-wallpaper > div { inset:0; pointer-events:none; }
.post-custom-background { position:relative; isolation:isolate; }
.post-custom-background .post { padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.post-custom-background .toc { padding:20px; background:var(--surface); border-radius:12px; }
@media(max-width:640px) { .post-custom-background .post { padding:20px; } }