:root {
  --ink:#302A2D;
  --ink-2:#51484D;
  --bg:#FFF9F7;
  --bg-2:#FCEFF1;
  --surface:#FFFFFF;
  --surface-raised:#FFFCFB;
  --surface-soft:#F7DDE3;
  --pink:#E7A7B5;
  --pink-dark:#C96F85;
  --pink-deep:#A84E68;
  --pink-soft:rgba(231,167,181,.20);
  --blush:#F4C9D3;
  --cream:#FFF1EB;
  --mist:#B6A7B2;
  --sage:#789080;
  --text:#302A2D;
  --text-2:#655B61;
  --text-3:#988B92;
  --line:#ECDDE1;
  --line-strong:#DABFC6;
  --shadow:0 14px 34px rgba(117,72,85,.09);
  --shadow-strong:0 24px 64px rgba(117,72,85,.15);
  --radius:10px;
  --radius-card:20px;
  --radius-large:34px;
  --wrap:1340px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body {
  margin:0;
  min-width:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  line-height:1.72;
  text-rendering:optimizeLegibility;
}
body.overlay-open { overflow:hidden; }
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--pink-deep); }
img { display:block; max-width:100%; height:auto; object-fit:cover; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button,.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--pink-deep);
  color:#fff;
  padding:.68rem 1.1rem;
  font-weight:700;
}
button:hover,.button:hover { filter:brightness(.97); color:#fff; }
.button.ghost,.ghost { background:#fff; color:var(--pink-deep); border-color:rgba(255,255,255,.72); }
.wrap { width:min(calc(100% - 40px),var(--wrap)); margin-inline:auto; }
.skip { position:fixed; left:-9999px; top:10px; z-index:1000; }
.skip:focus { left:12px; background:#fff; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); }
.tiny { font-size:12px; color:var(--text-3); }
.notice { background:var(--surface-raised); border:1px solid var(--line); border-left:4px solid var(--sage); border-radius:14px; padding:18px 20px; color:var(--text-2); }
.meta { color:var(--pink-deep); font-size:12px; font-weight:700; letter-spacing:.03em; }

/* Recommendation strip */
.recommend {
  height:30px;
  display:flex;
  align-items:center;
  gap:10px;
  padding-inline:14px;
  overflow:hidden;
  background:linear-gradient(90deg,var(--bg-2),var(--blush),var(--bg-2));
  color:var(--ink-2);
  border-bottom:1px solid rgba(201,111,133,.12);
  font-size:13px;
}
.recommend>i { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--sage); box-shadow:0 0 0 4px rgba(120,144,128,.12); }
.recommend-viewport { overflow:hidden; flex:1; }
.recommend-track { display:flex; width:max-content; gap:34px; white-space:nowrap; animation:recommendFlow 28s linear infinite; }
.recommend-track span::after { content:"✦"; color:var(--pink-dark); margin-left:34px; }
@keyframes recommendFlow { to { transform:translateX(-50%); } }

/* Header */
.site-header { height:74px; position:sticky; top:0; z-index:120; background:rgba(255,249,247,.91); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.head { height:74px; display:flex; align-items:center; gap:18px; }
.brand { display:flex; align-items:center; gap:10px; min-width:max-content; }
.brand img { width:42px; height:42px; border-radius:50%; object-fit:cover; }
.brand span { display:grid; line-height:1.2; }
.brand b { font-size:17px; letter-spacing:.05em; }
.brand small { margin-top:3px; color:var(--text-3); font-size:10px; font-weight:600; letter-spacing:.08em; }
.desktop-nav { display:flex; align-items:center; justify-content:center; gap:2px; flex:1; min-width:0; }
.desktop-nav a { position:relative; padding:9px 9px; border-radius:999px; color:var(--ink-2); font-size:14px; white-space:nowrap; }
.desktop-nav a.on { background:var(--pink-soft); color:var(--pink-deep); font-weight:800; }
.desktop-nav a.on::after { content:""; position:absolute; left:30%; right:30%; bottom:4px; height:2px; border-radius:999px; background:var(--pink-deep); }
.tools { display:flex; align-items:center; gap:3px; min-width:max-content; }
.tools a,.tools button { min-height:36px; padding:7px 9px; background:transparent; color:var(--ink-2); border-color:transparent; font-size:13px; font-weight:650; }
.tools .menu { border-color:var(--line); background:#fff; color:var(--pink-deep); }
.mobile-drawer { position:absolute; left:0; right:0; top:74px; background:rgba(255,252,251,.98); border-bottom:1px solid var(--line); box-shadow:var(--shadow-strong); }
.mobile-drawer.open { display:block; }
.mobile-groups { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-block:22px 28px; }
.mobile-groups section { padding:0; }
.mobile-groups h2 { margin:0 0 8px; color:var(--pink-deep); font-size:13px; }
.mobile-groups a { display:block; padding:6px 0; color:var(--text-2); font-size:14px; }

/* Search overlay */
.search-layer { position:fixed; inset:0; z-index:300; background:rgba(48,42,45,.42); padding:15vh 20px 20px; backdrop-filter:blur(5px); }
.search-layer form { width:min(720px,100%); margin:auto; display:grid; gap:13px; background:#fff; border:1px solid var(--line); border-radius:26px; padding:24px; box-shadow:var(--shadow-strong); }
.search-layer-head { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.search-layer-head button { background:var(--bg-2); color:var(--ink-2); }
.search-layer input,.search-page input,.filters select,.search-page select { width:100%; min-height:46px; border:1px solid var(--line-strong); border-radius:12px; background:#fff; color:var(--text); padding:10px 12px; }

main { min-height:60vh; }
section { padding:68px 0; }
.soft { background:var(--bg-2); }
.tint { background:linear-gradient(135deg,var(--cream),var(--surface-soft)); }
.section-head { margin-bottom:24px; }
.section-head>span,.kicker,.date-label,.page-intro>span,.home-hero .hero-copy>span,.rank-top>div>span,.community-head>div>span,.app-stage>div>span,.mag-spread>div>span { color:var(--pink-deep); font-size:12px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.section-head h2 { max-width:900px; margin:6px 0 10px; font-size:clamp(26px,3vw,43px); line-height:1.18; letter-spacing:-.02em; }
.section-head p { max-width:800px; margin:0; color:var(--text-2); }
.prose { max-width:880px; color:var(--text-2); }
.prose p { margin:0 0 16px; }

/* Shared cards and rows */
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.card { min-width:0; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow); }
.card img { width:100%; aspect-ratio:16/9; border-radius:0; }
.card.portrait img { aspect-ratio:3/4; }
.card>div { padding:16px 17px 18px; }
.card h3 { margin:5px 0 8px; line-height:1.4; font-size:18px; }
.card p { margin:0; color:var(--text-2); font-size:14px; }
.rows { display:grid; border-top:1px solid var(--line); }
.rows>a { display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:18px; align-items:center; padding:15px 4px; border-bottom:1px solid var(--line); }
.rows a b { min-width:0; }
.rows a span { color:var(--text-3); font-size:13px; text-align:right; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips>* { display:inline-flex; align-items:center; min-height:36px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--text-2); }
.chips button[aria-selected="true"],.chips button[aria-pressed="true"] { background:var(--pink-deep); color:#fff; border-color:var(--pink-deep); }
.badge { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:var(--bg-2); color:var(--ink-2); font-size:12px; font-weight:700; }
.badge.verify { background:#edf3ee; color:#496452; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; color:var(--text-3); font-size:13px; margin-bottom:18px; }
.grid-index { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.grid-index>* { min-width:0; padding:17px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.grid-index a { display:grid; }
.grid-index span { color:var(--text-3); font-size:12px; }
.split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:start; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.steps>* { padding:18px; background:#fff; border:1px solid var(--line); border-radius:15px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.tag-cloud>* { padding:8px 13px; border:1px solid var(--line); background:#fff; border-radius:999px; }
.tag-cloud>*:nth-child(3n+1) { font-size:1.15em; }
.tag-cloud>*:nth-child(4n) { background:var(--cream); }
.quotes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.quotes blockquote,.post { margin:0; padding:20px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.quotes p,.post p { margin:0 0 10px; color:var(--text-2); }
.quotes cite { color:var(--pink-deep); font-size:13px; font-style:normal; }

/* Homepage: multiple distinct rhythms */
.home-hero { padding:0; }
.hero-frame { position:relative; width:min(100%,1600px); }
.hero-frame>img { width:100%; height:min(64vh,760px); min-height:480px; border-radius:0 0 var(--radius-large) var(--radius-large); }
.hero-frame::after { content:""; position:absolute; inset:0; border-radius:0 0 var(--radius-large) var(--radius-large); background:linear-gradient(90deg,rgba(48,42,45,.48),rgba(48,42,45,.05) 70%); pointer-events:none; }
.hero-copy { position:absolute; left:5%; bottom:12%; z-index:1; max-width:680px; color:#fff; }
.hero-copy h1 { margin:9px 0 15px; font-size:clamp(38px,5.4vw,72px); line-height:1.04; letter-spacing:-.04em; }
.hero-copy p { max-width:620px; margin:0 0 18px; font-size:17px; }
.hero-copy>span { color:#fff; opacity:.92; }
.hero-copy>div { display:flex; gap:10px; flex-wrap:wrap; }
.drawer { margin-top:-34px; position:relative; z-index:3; background:var(--surface); border:1px solid var(--line); border-radius:30px; padding:22px; box-shadow:var(--shadow-strong); }
.drawer .featured { padding:4px 2px 14px; }
.drawer .featured b { font-size:20px; }
.drawer .featured p { max-width:740px; margin:4px 0 0; color:var(--text-2); }
.drawer .cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
.drawer .card p { display:none; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding-block:24px; }
.stats b { padding:16px; text-align:center; border-radius:14px; background:var(--surface); border:1px solid var(--line); }
.masonry .cards { align-items:start; }
.masonry .card:nth-child(3n+2) { margin-top:24px; }
.masonry .card:nth-child(3n) { margin-top:48px; }
.filmstrip .cards { display:flex; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:10px; }
.filmstrip .card { flex:0 0 330px; scroll-snap-align:start; }
.album { display:grid; grid-template-columns:1.05fr .95fr; gap:38px; align-items:center; }
.album>div:first-child { padding:14px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); transform:rotate(-1.2deg); }
.album img { width:100%; aspect-ratio:4/3; border-radius:8px; }
.collage .cards { grid-template-columns:1.6fr repeat(2,minmax(0,1fr)); grid-auto-rows:auto; }
.collage .card:first-child { grid-row:span 2; }
.collage .card:first-child img { aspect-ratio:3/4; }
.widescreen { background:#302A2D; color:#fff; }
.widescreen .wrap { display:grid; grid-template-columns:1.4fr .6fr; gap:34px; align-items:center; }
.widescreen img { width:100%; aspect-ratio:21/9; border-radius:22px; }
.widescreen .section-head p { color:rgba(255,255,255,.76); }
.avatars { display:flex; gap:12px; overflow-x:auto; padding:5px 2px 12px; }
.avatars a { flex:0 0 148px; display:grid; justify-items:center; gap:6px; text-align:center; padding:16px 10px; background:#fff; border:1px solid var(--line); border-radius:22px; }
.avatars span { display:grid; place-items:center; width:62px; height:62px; border-radius:50%; background:linear-gradient(135deg,var(--blush),var(--cream)); color:var(--pink-deep); font-size:23px; font-weight:800; }
.avatars small { color:var(--text-3); }
.before-after { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; align-items:stretch; }
.before-after>div:not(.section-head) { padding:22px; border-radius:18px; border:1px solid var(--line); background:#fff; }
.calendar { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.calendar>* { text-align:center; padding:16px 10px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.topic-banner { position:relative; padding:0; margin-block:68px; overflow:hidden; border-radius:28px; }
.topic-banner>img { width:100%; aspect-ratio:21/8; }
.topic-banner>div { position:absolute; left:5%; right:auto; bottom:10%; max-width:600px; padding:20px 22px; background:rgba(255,252,251,.92); border-radius:18px; box-shadow:var(--shadow); }
.share-call { text-align:center; background:linear-gradient(135deg,var(--surface-soft),var(--cream)); }
.share-call .section-head p { margin-inline:auto; }
.app-show { display:grid; grid-template-columns:.7fr 1.3fr; gap:36px; align-items:center; }
.devices { position:relative; min-height:500px; }
.devices img:first-child { width:76%; margin-left:auto; }
.devices img:not(:first-child) { position:absolute; width:24%; bottom:0; box-shadow:var(--shadow-strong); border:6px solid #fff; border-radius:24px; }
.devices img:nth-child(2) { left:0; transform:rotate(-5deg); }
.devices img:nth-child(3) { left:26%; transform:translateY(15px); }
.devices img:nth-child(4) { left:52%; transform:rotate(4deg); }
.safety-block { display:grid; grid-template-columns:.7fr 1.3fr; gap:30px; align-items:center; }
.safety-block img { width:100%; aspect-ratio:3/2; border-radius:22px; }
.end-note { text-align:center; }
.end-note .section-head p,.end-note .chips { justify-content:center; margin-inline:auto; }

/* Hot directory */
.hot-directory { border-top:1px solid var(--line-strong); }
.hot-row { display:grid; grid-template-columns:76px minmax(0,1fr) 190px; gap:22px; padding:23px 4px; border-bottom:1px solid var(--line); align-items:start; }
.rank-no { color:var(--pink-deep); font-size:34px; line-height:1; font-weight:850; letter-spacing:-.04em; }
.hot-main h3 { margin:4px 0 7px; font-size:22px; }
.hot-main p { margin:0 0 6px; color:var(--text-2); }
.hot-main .reason { color:var(--ink-2); font-size:13px; }
.hot-meta { display:grid; gap:4px; justify-items:end; color:var(--text-3); font-size:12px; }

/* Newsroom */
.news-hero { display:grid; grid-template-columns:7fr 5fr; gap:26px; padding-top:34px; }
.news-lead { display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:end; }
.news-lead img { width:100%; height:100%; min-height:420px; border-radius:24px; }
.news-lead h1 { margin:8px 0 12px; font-size:clamp(34px,4vw,58px); line-height:1.08; }
.news-hero aside { align-self:stretch; background:#fff; border:1px solid var(--line); border-radius:20px; padding:14px 18px; }
.ticker { padding:12px 0; background:var(--pink-deep); color:#fff; }
.ticker b { margin-right:16px; }
.timeline { display:grid; border-left:1px solid var(--pink-dark); margin-left:8px; }
.timeline article { position:relative; padding:5px 0 22px 28px; }
.timeline article::before { content:""; position:absolute; left:-5px; top:10px; width:9px; height:9px; border-radius:50%; background:var(--pink-deep); }
.timeline time { display:block; color:var(--text-3); font-size:12px; }
.timeline h3 { margin:5px 0; }
.timeline p { margin:0; color:var(--text-2); }
.wide-figure { margin:30px 0 0; }
.wide-figure img,.channel-visual img { width:100%; aspect-ratio:21/8; border-radius:24px; }
.wide-figure figcaption,.channel-visual p { margin:10px 0 0; color:var(--text-2); }

/* Streaming catalog */
.cinema-hero { padding:28px 0 0; }
.cinema { position:relative; }
.cinema img { width:100%; aspect-ratio:21/9; border-radius:26px; }
.cinema>div { position:absolute; left:4%; bottom:10%; max-width:610px; padding:22px; background:rgba(255,252,251,.93); border:1px solid rgba(255,255,255,.76); border-radius:20px; box-shadow:var(--shadow); }
.cinema h1 { margin:7px 0 9px; font-size:clamp(34px,4.5vw,60px); line-height:1.08; }
.filterbar { position:sticky; top:74px; z-index:70; padding:11px 0; background:rgba(255,252,251,.94); backdrop-filter:blur(12px); border-block:1px solid var(--line); }
.filterbar .chips { flex-wrap:nowrap; overflow-x:auto; }
.channel-visual { margin-top:30px; }

/* Short-film studio */
.shorts-hero { display:grid; grid-template-columns:.9fr 1.35fr; gap:24px; align-items:start; padding-top:34px; }
.portrait-feature { position:relative; }
.portrait-feature img { width:100%; aspect-ratio:3/4; border-radius:24px; }
.portrait-feature>div { position:absolute; left:16px; right:16px; bottom:16px; padding:18px; background:rgba(255,252,251,.94); border-radius:18px; }
.portrait-feature h1 { margin:6px 0 9px; font-size:clamp(30px,3.5vw,52px); line-height:1.08; }
.mini-film .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mini-film .card:nth-child(even) { transform:translateY(28px); }
.horizontal-rail { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; padding:6px 2px 14px; }
.horizontal-rail>.card { flex:0 0 min(330px,82vw); scroll-snap-align:start; }
.rail-controls { display:flex; gap:8px; margin-bottom:12px; }
.rail-controls button { background:#fff; color:var(--pink-deep); border-color:var(--line); }

/* Life diary */
.diary-hero { display:grid; grid-template-columns:.72fr 1.28fr; gap:34px; align-items:center; padding-top:36px; }
.diary-hero h1 { margin:8px 0 12px; font-size:clamp(36px,5vw,66px); line-height:1.08; }
.diary-hero img { width:100%; aspect-ratio:4/3; border-radius:30px; box-shadow:var(--shadow); }
.diary-grid { border-left:10px solid var(--surface-soft); padding-left:28px; }

/* Anime theater */
.theater-hero { padding-top:30px; background:linear-gradient(180deg,var(--surface-soft),var(--bg)); }
.theater-hero .wrap { position:relative; }
.theater-hero img { width:100%; aspect-ratio:16/8; border-radius:28px; }
.arc-title { position:relative; width:min(760px,90%); margin:-72px auto 0; padding:34px 38px 27px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:50% 50% 24px 24px/30% 30% 24px 24px; box-shadow:var(--shadow); }
.arc-title h1 { margin:7px 0 9px; font-size:clamp(34px,4.6vw,58px); line-height:1.08; }

/* Magazine topic */
.mag-spread,.dual-cover,.text-wrap { display:grid; grid-template-columns:1.25fr .75fr; gap:34px; align-items:center; }
.mag-spread { padding-top:38px; }
.mag-spread img { width:100%; aspect-ratio:2/1; border-radius:4px 28px 28px 4px; }
.mag-spread h1 { margin:8px 0 12px; font-size:clamp(36px,5vw,64px); line-height:1.05; }
.dual-cover { grid-template-columns:.7fr 1.3fr; }
.dual-cover img { width:100%; aspect-ratio:3/4; border-radius:24px; box-shadow:var(--shadow); }
.text-wrap img { width:100%; aspect-ratio:3/2; border-radius:4px; }
.closing-banner { position:relative; padding:0; }
.closing-banner img { width:100%; aspect-ratio:21/8; border-radius:0; }
.closing-banner>div { position:absolute; left:8%; bottom:12%; max-width:640px; padding:22px; background:rgba(255,252,251,.92); border-radius:18px; }

/* Ranking dashboard */
.rank-top { display:grid; grid-template-columns:.62fr 1.38fr; gap:36px; align-items:start; padding-top:40px; }
.rank-top h1 { margin:7px 0; font-size:clamp(46px,6vw,78px); line-height:1; }
.rank-panels { display:grid; grid-template-columns:1fr; }
.rank-panel { padding:24px; background:#fff; border:1px solid var(--line); border-radius:22px; }
.rank-panel h2 { margin-top:0; }
.ranking-list { counter-reset:rank; list-style:none; padding:0; margin:0; }
.ranking-list li { position:relative; padding:15px 12px 15px 52px; border-bottom:1px solid var(--line); }
.ranking-list li::before { counter-increment:rank; content:counter(rank,decimal-leading-zero); position:absolute; left:8px; top:14px; color:var(--pink-deep); font-weight:850; }
.ranking-list span { display:block; margin-top:4px; color:var(--text-3); font-size:12px; }

/* Community */
.community-head { display:grid; grid-template-columns:.72fr 1.28fr; gap:30px; align-items:center; padding-top:36px; }
.community-head img { width:100%; aspect-ratio:4/3; border-radius:28px; }
.community-head h1 { margin:7px 0 12px; font-size:clamp(36px,5vw,64px); line-height:1.08; }
.community-layout { display:grid; grid-template-columns:180px minmax(0,1fr) 250px; gap:24px; align-items:start; }
.sidecats { position:sticky; top:146px; display:grid; gap:8px; }
.sidecats a { padding:11px 13px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.community-layout>aside:last-of-type { padding:18px; background:var(--bg-2); border-radius:18px; }
.post { display:grid; gap:8px; }
.post button { justify-self:start; min-height:34px; padding:5px 10px; background:var(--bg-2); color:var(--pink-deep); border-color:var(--line); }
.post-actions { display:flex; flex-wrap:wrap; gap:8px; }
.triple-media { grid-column:2/4; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:center; margin-top:12px; }
.triple-media img { width:100%; aspect-ratio:3/2; border-radius:20px; }
.triple-media p { grid-column:1/-1; color:var(--text-2); }

/* Product pages */
.browser-window { display:grid; grid-template-columns:1.12fr .88fr; gap:34px; align-items:center; }
.browser-window>img { width:100%; aspect-ratio:16/10; border-radius:24px; box-shadow:var(--shadow-strong); }
.browser-window h1 { margin:7px 0 12px; font-size:clamp(38px,5vw,64px); line-height:1.08; }
.callouts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.callouts>* { padding:22px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.manual-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.manual-card { padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.manual-card h3 { margin-top:0; }
.app-stage { min-height:610px; display:grid; grid-template-columns:.7fr 1.3fr; gap:32px; align-items:center; padding-top:38px; }
.app-stage h1 { margin:7px 0 12px; font-size:clamp(40px,5.5vw,70px); line-height:1.04; }
.phone-stack { position:relative; min-height:560px; display:grid; place-items:center; background:radial-gradient(circle at 50% 45%,var(--blush),transparent 62%); }
.phone-stack img:first-child { width:72%; border-radius:30px; box-shadow:var(--shadow); }
.phone-stack img:last-child { position:absolute; width:35%; right:3%; bottom:0; border:8px solid #fff; border-radius:30px; box-shadow:var(--shadow-strong); transform:rotate(4deg); }
.screen-track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x proximity; padding:10px 3px 18px; }
.screen-track img { flex:0 0 28%; min-width:250px; aspect-ratio:1/2; border-radius:25px; border:7px solid #fff; box-shadow:var(--shadow); scroll-snap-align:start; }
.app-feature,.favorite-drawer { display:grid; grid-template-columns:2fr 1fr; gap:34px; align-items:center; }
.app-feature img,.favorite-drawer img { width:100%; max-height:680px; object-fit:contain; border-radius:28px; }
.search-panel img { width:100%; aspect-ratio:16/8; border-radius:28px; box-shadow:var(--shadow); }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.feature-copy { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; }
.feature-copy h3 { margin:0 0 7px; }
.feature-copy p { color:var(--text-2); }
.feature-copy ul { margin-bottom:0; padding-left:20px; }

/* General inner pages */
.page-intro { padding-top:42px; padding-bottom:34px; }
.page-intro>img { width:100%; max-height:520px; margin-bottom:28px; border-radius:28px; }
.page-intro h1 { max-width:980px; margin:8px 0 10px; font-size:clamp(38px,5vw,64px); line-height:1.08; }
.page-intro p { max-width:860px; color:var(--text-2); }
.filters,.search-page { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:end; }
.search-page { grid-template-columns:auto 2fr auto 1fr auto; }
.filters label,.search-page label { display:grid; gap:6px; color:var(--text-2); font-size:13px; }
.pagination { display:flex; flex-wrap:wrap; gap:8px; padding-top:10px; padding-bottom:56px; }
.pagination a { padding:8px 12px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.pagination a[aria-current="page"] { background:var(--pink-deep); color:#fff; border-color:var(--pink-deep); }
.empty { padding:34px; text-align:center; background:#fff; border:1px dashed var(--line-strong); border-radius:18px; }
.search-groups { display:grid; gap:32px; }
.search-group { padding:22px; background:#fff; border:1px solid var(--line); border-radius:22px; }
.search-group>h2 { margin-top:0; }
.detail-head h1 { max-width:980px; margin:7px 0 11px; font-size:clamp(38px,5vw,62px); line-height:1.08; }
.detail-head>p { max-width:860px; color:var(--text-2); }
.detail-media { display:grid; grid-template-columns:1.5fr .5fr; gap:22px; align-items:start; }
.detail-media>img { width:100%; aspect-ratio:16/9; border-radius:26px; }
.detail-media aside { padding:20px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.detail-media aside p { margin:3px 0 14px; color:var(--text-2); }
.faq,details { border-bottom:1px solid var(--line); padding:15px 0; }
summary { cursor:pointer; font-weight:760; }
details p { color:var(--text-2); }

/* Footer and mobile utilities */
footer { padding:55px 0 92px; background:var(--bg-2); border-top:2px solid var(--pink-dark); }
.foot { display:grid; grid-template-columns:1.55fr repeat(3,1fr); gap:30px; }
.foot h2 { margin:0 0 10px; color:var(--ink); font-size:14px; }
.foot>div>a:not(.brand) { display:block; margin:6px 0; color:var(--text-2); }
.foot-brand p { color:var(--text-2); }
.footer-tags { display:flex; flex-wrap:wrap; gap:6px; }
.footer-tags a { padding:5px 9px; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:12px; }
.footer-note { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); color:var(--text-2); font-size:13px; }
.footer-note p { margin:5px 0; }
.mobile-bottom { display:none; }
.favorite-panel { position:fixed; right:14px; bottom:76px; z-index:220; width:min(360px,calc(100% - 28px)); max-height:58vh; overflow:auto; padding:18px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-strong); }
.favorite-panel-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.favorite-panel-head button { min-height:34px; padding:5px 10px; background:var(--bg-2); color:var(--pink-deep); }
#favorite-list { display:grid; }
#favorite-list a { padding:10px 0; border-bottom:1px solid var(--line); }
.back-top { position:fixed; right:18px; bottom:18px; z-index:130; opacity:0; pointer-events:none; transform:translateY(8px); transition:.2s ease; box-shadow:var(--shadow); }
.back-top.show { opacity:1; pointer-events:auto; transform:none; }

:focus-visible { outline:3px solid var(--pink-deep); outline-offset:3px; }

@media (max-width:1200px) {
  .desktop-nav a { padding-inline:6px; font-size:13px; }
  .tools>a { display:none; }
  .community-layout { grid-template-columns:150px minmax(0,1fr); }
  .community-layout>aside:last-of-type { grid-column:2; }
  .triple-media { grid-column:2; }
  .calendar { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:992px) {
  .desktop-nav { display:none; }
  .tools { margin-left:auto; }
  .tools .search-open,.tools .menu { display:inline-flex; }
  .mobile-groups { grid-template-columns:repeat(2,1fr); }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split,.news-hero,.diary-hero,.browser-window,.app-stage,.app-feature,.favorite-drawer,.safety-block,.album,.app-show,.mag-spread,.dual-cover,.text-wrap,.rank-top,.widescreen .wrap { grid-template-columns:1fr; }
  .community-layout { grid-template-columns:1fr; }
  .community-layout>aside:last-of-type,.triple-media { grid-column:auto; }
  .sidecats { position:static; display:flex; overflow-x:auto; }
  .grid-index { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .before-after { grid-template-columns:1fr 1fr; }
  .before-after .section-head { grid-column:1/-1; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .news-lead { grid-template-columns:1fr; align-items:start; }
  .news-lead img { min-height:360px; }
  .cinema>div { max-width:560px; }
  .phone-stack { min-height:470px; }
  .screen-track img { flex-basis:38%; }
}

@media (max-width:768px) {
  body { padding-bottom:68px; }
  .wrap { width:min(calc(100% - 28px),var(--wrap)); }
  section { padding:50px 0; }
  .recommend { justify-content:flex-start; }
  .site-header,.head { height:68px; }
  .mobile-drawer { top:68px; max-height:calc(100vh - 98px); overflow:auto; }
  .brand small { display:none; }
  .tools .search-open { min-width:36px; padding-inline:8px; }
  .hero-frame>img { height:54vh; min-height:410px; }
  .hero-copy { left:18px; right:18px; bottom:38px; }
  .hero-copy h1 { font-size:clamp(34px,9vw,50px); }
  .drawer { margin-top:14px; border-radius:22px; }
  .drawer .cards,.cards,.collage .cards,.mini-film .cards,.quotes,.feature-grid,.manual-grid { grid-template-columns:1fr 1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .masonry .card { margin-top:0 !important; }
  .filmstrip .card { flex-basis:78vw; }
  .album>div:first-child { transform:none; }
  .collage .card:first-child { grid-row:auto; }
  .widescreen { padding-block:50px; }
  .before-after { grid-template-columns:1fr; }
  .before-after .section-head { grid-column:auto; }
  .calendar { grid-template-columns:repeat(2,1fr); }
  .topic-banner { margin-block:50px; border-radius:0; width:100%; }
  .topic-banner>div,.cinema>div { position:relative; left:auto; right:auto; bottom:auto; margin:-34px 14px 0; max-width:none; }
  .devices { min-height:410px; }
  .hot-row { grid-template-columns:58px minmax(0,1fr); }
  .hot-meta { grid-column:2; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px 14px; }
  .shorts-hero { grid-template-columns:1fr; }
  .mini-film .card:nth-child(even) { transform:none; }
  .diary-hero img { order:-1; }
  .arc-title { margin-top:-36px; padding:27px 18px; }
  .community-head { grid-template-columns:1fr; }
  .triple-media { grid-template-columns:1fr 1fr; }
  .screen-track img { flex-basis:58%; min-width:220px; }
  .filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .search-page { grid-template-columns:1fr; }
  .detail-media { grid-template-columns:1fr; }
  .foot { grid-template-columns:1fr 1fr; }
  .mobile-bottom { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:180; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:7px 3px calc(7px + env(safe-area-inset-bottom)); }
  .mobile-bottom a,.mobile-bottom button { display:grid; place-items:center; min-height:44px; padding:4px 2px; border:0; background:transparent; color:var(--ink-2); border-radius:8px; font-size:12px; font-weight:700; }
  .back-top { bottom:84px; }
  .favorite-panel { bottom:78px; }
  footer { padding-bottom:105px; }
}

@media (max-width:520px) {
  .wrap { width:min(calc(100% - 22px),var(--wrap)); }
  .mobile-groups { grid-template-columns:1fr; }
  .drawer .cards,.cards,.collage .cards,.mini-film .cards,.quotes,.grid-index,.stats,.calendar,.foot,.filters,.feature-grid,.manual-grid,.triple-media { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .hero-frame>img { min-height:370px; }
  .hero-copy { left:14px; right:14px; bottom:25px; }
  .hero-copy p { font-size:14px; }
  .rows>a { grid-template-columns:1fr; gap:4px; }
  .rows a span { text-align:left; }
  .hot-row { grid-template-columns:45px minmax(0,1fr); gap:12px; }
  .rank-no { font-size:26px; }
  .hot-main h3 { font-size:18px; }
  .screen-track img { flex-basis:74%; }
  .phone-stack img:first-child { width:86%; }
  .phone-stack img:last-child { width:43%; }
  .arc-title { width:94%; }
  .section-head h2 { font-size:30px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .recommend-track { animation:none; transform:none; }
}