/*
 * [INPUT]: 依赖 studio.css 与 ds/simatrix.css 的主题和排版变量。
 * [OUTPUT]: 提供全站背景、Loop、工程合图与演示布局。
 * [POS]: 响应式内容层；保留品牌模板，手机优先展示作品和触控入口。
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
/* ---------- 闭环靠位置表达顺序，文字只保留节点 ---------- */
.public-loop { padding:88px 0; border-top:1px solid var(--sm-line); }
.public-loop>.sm-container { display:grid; grid-template-columns:.9fr 1.1fr; gap:30px 64px; align-items:center; }
.loop-intro { max-width:480px; }
.loop-intro h2 { margin:22px 0; }
.loop-intro>p { color:var(--sm-fg-2); font-size:15px; line-height:1.8; }
.loop-cycle { position:relative; grid-column:2; grid-row:1/span 3; }
.loop-stages { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
.loop-stages li { position:relative; padding:24px; min-height:175px; border:1px solid var(--sm-line-strong); border-radius:22px; background:var(--studio-glass); backdrop-filter:blur(12px); }
.loop-stages li:nth-child(3) { grid-column:2; grid-row:2; }
.loop-stages li:nth-child(4) { grid-column:1; grid-row:2; }
.loop-stage-number { display:inline-grid; place-items:center; width:30px; height:30px; border:1px solid var(--sm-accent); border-radius:50%; font:12px var(--sm-font-mono); color:var(--sm-accent); }
.loop-stages small { display:block; margin:15px 0 7px; color:var(--sm-fg-3); font:10px var(--sm-font-mono); letter-spacing:.08em; }
.loop-stages h3 { margin:0; font-size:21px; }
.loop-stages p { margin:9px 0 0; color:var(--sm-fg-2); font-size:12px; line-height:1.7; }
.loop-stages li::after { position:absolute; font-size:22px; color:var(--sm-accent); }
.loop-stages li:nth-child(1)::after { content:'→'; right:-25px; top:45%; }
.loop-stages li:nth-child(2)::after { content:'↓'; bottom:-28px; left:47%; }
.loop-stages li:nth-child(3)::after { content:'←'; left:-25px; top:45%; }
.loop-stages li:nth-child(4)::after { content:'↑'; top:-28px; left:47%; }
.loop-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; gap:3px; padding:9px 12px; background:var(--sm-bg); border:1px solid var(--sm-line); border-radius:12px; color:var(--sm-accent); font:10px var(--sm-font-mono); letter-spacing:.1em; }
.loop-center>span { font-size:19px; }
.loop-roles { display:flex; gap:24px; border-top:1px solid var(--sm-line); padding-top:20px; }
.loop-roles p { margin:0; }
.loop-roles b { display:block; font-size:17px; margin-bottom:7px; }
.loop-roles span { color:var(--sm-fg-3); font-size:12px; }
.loop-footer { align-self:start; }
.loop-boundary { margin:0 0 14px; color:var(--sm-fg-3); font-size:12px; line-height:1.8; }
@media(max-width:800px) {
 .public-loop { padding:64px 0; }
 .public-loop>.sm-container { grid-template-columns:1fr; gap:28px; }
 .loop-cycle { grid-column:1; grid-row:auto; }
 .loop-intro h2 { margin:18px 0; }
 .loop-roles { justify-content:space-between; padding-top:22px; }
}
@media(max-width:480px) {
 .loop-stages { gap:24px; }
 .loop-stages li { min-height:154px; padding:17px 14px; border-radius:18px; }
 .loop-stages h3 { font-size:17px; line-height:1.4; }
 .loop-stages small { margin:12px 0 6px; font-size:9px; }
 .loop-stages p { font-size:11px; }
 .loop-stage-number { width:27px; height:27px; }
 .loop-stages li:nth-child(1)::after { right:-22px; }
 .loop-stages li:nth-child(3)::after { left:-22px; }
 .loop-stages li:nth-child(2)::after { bottom:-24px; }
 .loop-stages li:nth-child(4)::after { top:-24px; }
 .loop-center { padding:6px 8px; font-size:9px; }
 .loop-center>span { font-size:16px; }
}

.hero-fab-view { position:relative; width:100%; aspect-ratio:1.3; overflow:hidden; border-radius:26px; }
.hero-fab-view>img,.hero-fab-view>iframe { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; border-radius:inherit; }
.hero-fab-view>img { object-fit:contain; }
.hero-fab-view>iframe { opacity:0; pointer-events:none; transition:opacity .4s ease; color-scheme:normal; }
.hero-fab[data-state="live"] iframe { opacity:1; pointer-events:auto; }
.hero-fab[data-state="live"] .hero-fab-view>img { visibility:hidden; }
.hero-fab-caption { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; }
.hero-fab-caption>span { margin-right:auto; }
.hero-fab-caption>a,.hero-fab-caption>button { font:inherit; color:var(--sm-accent); }
.hero-fab-caption>button { padding:0; border:0; background:transparent; cursor:pointer; }
.hero-fab[data-state="live"] [data-fab-start] { display:none; }
@media(prefers-reduced-motion:reduce) { .hero-fab-view>iframe { transition:none; } }
/* ---------- 联系入口只公开公司邮箱；概念流程不生成可扫描业务码 ---------- */
.contact-page-grid { grid-template-columns:1fr; }
.public-demo-code { width:84px; height:84px; display:grid; place-content:center; text-align:center; border:1px dashed currentColor; color:var(--sm-fg-3); font:12px var(--sm-font-mono); }
.public-demo-code small { font-size:10px; }

/* ---------- 案例演示沿用原 dialog：视频分镜与按需互动 ---------- */
.project-demo { margin:22px 0; min-width:0; }
.demo-stage { position:relative; background:var(--sm-bg-sunk); border:1px solid var(--sm-line); border-radius:14px; overflow:hidden; }
.demo-stage video { display:block; width:100%; max-height:60vh; background:#101113; }
.demo-interactive { aspect-ratio:16/10; }
.demo-interactive img,.demo-interactive iframe { width:100%; height:100%; object-fit:contain; border:0; position:absolute; inset:0; }
.demo-interactive iframe[hidden] { display:none; }
.demo-interactive>img { pointer-events:none; }
.demo-load { position:absolute!important; z-index:2; inset:0; margin:auto!important; width:max-content; max-width:90%; height:50px; }
.project-demo[data-loaded=true] .demo-load,.project-demo[data-loaded=true] .demo-interactive>img { display:none; }
.demo-caption { font-size:11px; line-height:1.8; color:var(--sm-fg-3); margin:12px 0; }
.demo-chapters { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
.demo-chapters button,.demo-actions button,.demo-actions a { border:1px solid var(--sm-line-strong); background:transparent; color:var(--sm-fg-2); padding:8px 11px; border-radius:8px; font:12px var(--sm-font-sans); cursor:pointer; }
.demo-chapters button[aria-pressed=true] { color:var(--sm-accent); border-color:var(--sm-accent); }
.demo-chapters small { opacity:.6; margin-right:8px; font-family:var(--sm-font-mono); }
.demo-actions { display:flex; gap:8px; flex-wrap:wrap; }
.project-demo:fullscreen { padding:24px; background:var(--sm-bg); display:flex; flex-direction:column; justify-content:center; }
.project-demo:fullscreen .demo-stage { flex:1; min-height:0; }
.project-demo:fullscreen video { height:100%; max-height:none; object-fit:contain; }
.dialog:has(.project-demo) { width:min(1040px,calc(100vw - 32px)); }
.project-tile .project-cover>img { width:100%; height:100%; object-fit:contain; }
@media(max-width:640px) { .demo-chapters button { font-size:11px; padding:9px; } .project-demo:fullscreen { padding:10px; } }

/* ---------- 首页直接播放当前作品；轮播切换不代替媒体控制 ---------- */
.case-interactive { position:relative; width:100%; aspect-ratio:1.6; border:1px solid var(--sm-line-strong); border-radius:var(--sm-r-md); overflow:hidden; }
.case-interactive>img,.case-interactive>iframe { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; }
.case-interactive>iframe { opacity:0; pointer-events:none; }
.case-interactive[data-loaded=true]>iframe { opacity:1; pointer-events:auto; }
.case-interactive[data-loaded=true]>img { visibility:hidden; }
.case-media-controls { display:flex; justify-content:flex-end; padding-top:10px; }
.case-media-controls button { font:11px var(--sm-font-sans); color:var(--sm-fg-2); border:1px solid var(--sm-line-strong); border-radius:20px; background:var(--studio-glass); min-height:36px; padding:7px 15px; cursor:pointer; }

/* ---------- 工程能力合图与全站 DS 像素背景 ---------- */
.pixel-ocean { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.9; }
:root[data-theme=light] .pixel-ocean { opacity:.85; }
.studio-site:after { display:none; }
[data-pixel-toggle][aria-pressed=true] { color:var(--sm-accent); }
[data-pixel-toggle] svg { width:15px; height:15px; }

/* ---------- 让作品占据主视觉，保留明确的阅读和触控层级 ---------- */
html { scroll-padding-top:calc(var(--sm-nav-h) + 14px); scroll-padding-bottom:110px; }
[data-deck],section[id] { scroll-margin-top:0; }
.hero-loop-trail { list-style:none; display:flex; gap:0; padding:0; margin:20px 0 0; color:var(--sm-fg-2); font-size:12px; }
.hero-loop-trail li { display:flex; align-items:center; }
.hero-loop-trail li:not(:last-child)::after { content:'→'; margin:0 16px; color:var(--sm-accent); }
.hero-loop-trail li:last-child::after { content:'↺'; margin-left:16px; color:var(--sm-accent); }
.engineering-overview { margin:0; padding:0; border:0; background:transparent; }
.engineering-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.engineering-panel { min-width:0; display:block; }
.engineering-panel:last-child { grid-column:1/-1; }
.engineering-label { display:flex; align-items:center; gap:9px; min-height:42px; color:var(--sm-fg-2); font-size:13px; }
.engineering-label b { font:10px var(--sm-font-mono); color:var(--sm-accent); }
.engineering-label i { margin-left:auto; font-style:normal; color:var(--sm-accent); }
.engineering-panel img { display:block; width:100%; aspect-ratio:1.7; object-fit:cover; border-radius:12px; border:1px solid var(--sm-line-strong); }
.engineering-panel:last-child img { aspect-ratio:2.8; }
.engineering-overview figcaption { margin:14px 0 0; font-size:11px; color:var(--sm-fg-3); }
#case-0 .case-actions { display:none; }
.project-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
.project-tile-body { padding:24px; }
.project-tile-body h2 { font-size:24px; line-height:1.4; }
.project-tile-body>p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.project-tile-body .rf-text-link { min-height:44px; margin-top:10px; }
body[data-page=contact]>.contact-band { display:none; }
@media(max-width:1100px) { .project-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
 :root { --sm-nav-h:74px; }
 .studio-site .rf-hero-copy { padding-top:18px; }
 .studio-site .rf-kicker { margin-bottom:16px; font-size:9px; }
 .studio-site .rf-hero .sm-mega { font-size:clamp(50px,14.1vw,60px); line-height:1.14; }
 .studio-site .rf-hero .sm-lead { font-size:14px; line-height:1.8; margin-top:20px; }
 .hero-loop-trail { margin-top:14px; font-size:11px; }
 .studio-site .rf-hero-actions { margin-top:22px; gap:10px; }
 .studio-site .rf-hero-actions .sm-btn { min-height:48px; font-size:12px; padding-inline:18px; }
 .hero-visual { margin:12px auto 14px; }
 .hero-fab-view { aspect-ratio:1.3; }
 .hero-visual figcaption { font-size:10px; margin-top:7px; }
 .hero-fab-caption { gap:6px; }
 .hero-fab-caption>span { font-size:9px; }
 .hero-fab-caption>a { margin-left:auto; min-height:44px; display:flex; align-items:center; }
 .hero-fab-caption>button { min-height:44px; min-width:64px; }
 .studio-site .rf-hero-bottom { min-height:34px; padding-bottom:4px; }
 .rf-hero-bottom>.sm-mono { display:none; }
 .rf-hero-bottom>a { margin-left:auto; }
 .book-showcase { padding-top:52px; }
 .rf-section-head .sm-h1 { font-size:34px; }
 .rf-section-aside>p { display:none; }
 .rf-section-aside { justify-content:flex-end; }
 .book-deck .rf-case-viewport { width:100%; }
 .book-deck .rf-case-track { align-items:start; }
 .book-deck .rf-case { display:flex; flex-direction:column; align-self:start; gap:0; min-height:550px; padding:20px 20px 22px; }
 .book-deck .rf-case:not(.is-current):not(.is-turning) { display:none; }
 .book-deck .rf-case:not(.is-current) { visibility:hidden; pointer-events:none; }
 .book-deck .rf-case:not(.is-current) .rf-case-copy,.book-deck .rf-case:not(.is-current) .rf-case-media { visibility:hidden; }
 .rf-case-copy { display:contents; }
 .rf-case-copy .rf-case-meta { order:0; margin-bottom:14px; }
 .rf-case-meta>.sm-mono { display:none; }
 .book-deck .rf-case h3 { order:1; font-size:27px; line-height:1.3; max-width:none; margin:0 0 20px; }
 #case-0 h3 { font-size:25px; }
 .rf-case-copy>p { display:none; }
 .rf-case-media { order:2; width:100%; }
 .rf-case-media .product-demo { max-height:270px; overflow:hidden; }
 .case-actions { order:3; margin-top:14px; }
 .case-actions .rf-case-link { min-height:44px; margin-top:0; }
 .book-deck .demo-notice { order:4; position:static; max-width:none; text-align:left; margin-top:12px; font-size:10px; line-height:1.7; }
 .engineering-panels { gap:8px 12px; }
 .engineering-label { min-height:40px; font-size:12px; gap:6px; }
 .engineering-panel img { aspect-ratio:1.3; border-radius:8px; }
 .engineering-panel:last-child img { aspect-ratio:2.1; }
 .engineering-overview figcaption { font-size:10px; margin-top:10px; }
 .case-side { top:auto; bottom:-69px; width:44px; height:44px; background:var(--sm-bg-raise)!important; }
 .case-side-prev { left:0; }
 .case-side-next { right:0; }
 .book-deck .rf-carousel-bottom { margin:18px 54px 0; min-height:48px; }
 .rf-case-tabs { gap:14px; max-width:calc(100% - 40px); }
 .rf-case-tabs button { font-size:11px; min-height:44px; flex:none; }
 .case-media-controls button { min-height:44px; font-size:12px; }
 .studio-site .rf-inner { padding-top:calc(var(--sm-nav-h) + 28px); }
 .page-heading { margin-bottom:26px; gap:18px; }
 .page-heading h1 { font-size:clamp(33px,9.5vw,40px); line-height:1.35; }
 .page-heading>p { font-size:13px; }
 [data-filters] { position:sticky; top:calc(var(--sm-nav-h) + 8px); z-index:12; background:var(--sm-bg-raise); backdrop-filter:blur(18px); }
 [data-filters] button { min-height:44px; padding-inline:12px; }
 .project-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
 .project-tile:first-child { grid-column:1/-1; }
 .project-tile { border-radius:18px; }
 .project-cover { padding:0; aspect-ratio:1.4; border-radius:18px 18px 0 0; }
 .project-tile:first-child .project-cover { aspect-ratio:1.9; padding:12px 18px; }
 .project-tile-body { padding:16px 13px; }
 .project-tile-body h2 { font-size:18px; margin-top:9px; line-height:1.45; }
 .project-tile:first-child h2 { font-size:23px; }
 .project-tile .project-status { font-size:10px; line-height:1.6; }
 .project-tile-body>p { display:none; }
 .project-tile-body .rf-text-link { min-height:44px; font-size:12px; margin-top:7px; }
 .cover-index { top:9px; left:9px; padding:3px 6px; border-radius:6px; background:var(--sm-bg-raise); color:var(--sm-fg-2); }
 .cover-notice { display:none; }
 .project-tile .project-cover>img { border-radius:0; object-fit:cover; }
 .project-footnote { font-size:11px; margin-top:22px; }
 .studio-site .dialog { position:fixed; inset:auto 0 0; width:100%; max-width:none; max-height:calc(100svh - 24px); margin:0; padding:20px 20px calc(24px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; background:var(--sm-bg-raise); }
 .dialog-top { position:sticky; top:-20px; z-index:3; background:var(--sm-bg-raise); padding:14px 0; margin-bottom:8px; }
 .dialog-top h2 { font-size:23px; line-height:1.35; }
 .studio-site .dialog .dialog-close { width:44px; height:44px!important; min-height:44px!important; flex:none; }
 .dialog>p,.dialog li { font-size:13px; line-height:1.8; }
 .demo-chapters button,.demo-actions button,.demo-actions a { min-height:44px; font-size:12px; }
 .studio-site .dialog>.sm-btn { min-height:48px; }
 .contact-option { padding:30px 22px; }
 .contact-option h2 { font-size:clamp(21px,6.4vw,27px); }
 .rf-footer-bottom { font-size:11px; line-height:1.8; }
 .rf-footer-link { min-height:44px; }
 .sm-dock a { min-height:48px; }
 .contact-float { display:none; }
}
@media(max-width:640px) and (max-height:740px) {
 .studio-site .rf-hero-copy { padding-top:10px; }
 .studio-site .rf-kicker { margin-bottom:12px; }
 .studio-site .rf-hero .sm-mega { font-size:50px; }
 .studio-site .rf-hero .sm-lead { margin-top:14px; }
 .hero-loop-trail { margin-top:10px; }
 .studio-site .rf-hero-actions { margin-top:16px; }
}

/* ---------- 手机将闭环完整收在一个阅读单元 ---------- */
@media(max-width:640px) {
 .public-loop { padding:28px 0; }
 .public-loop>.sm-container { gap:16px; }
 .loop-intro .rf-section-index { margin-bottom:0; font-size:10px; }
 .loop-intro h2 { font-size:28px; line-height:1.25; margin:10px 0; }
 .loop-intro>p { font-size:12px; line-height:1.7; margin:0; }
 .loop-stages { gap:20px; }
 .loop-stages li { display:grid; grid-template-columns:28px 1fr; align-content:start; align-items:center; column-gap:7px; min-height:124px; padding:14px; }
 .loop-stage-number { width:26px; height:26px; }
 .loop-stages small { grid-column:2; margin:0; font-size:9px; }
 .loop-stages h3 { grid-column:1/-1; font-size:16px; line-height:1.4; margin-top:12px; }
 .loop-stages p { grid-column:1/-1; margin-top:8px; font-size:11px; }
 .loop-stages li:nth-child(1)::after { right:-20px; }
 .loop-stages li:nth-child(3)::after { left:-20px; }
 .loop-stages li:nth-child(2)::after { bottom:-23px; }
 .loop-stages li:nth-child(4)::after { top:-23px; }
 .loop-roles { padding-top:13px; gap:8px; }
 .loop-roles p { display:flex; align-items:center; gap:6px; }
 .loop-roles b { display:inline; font-size:13px; margin:0; }
 .loop-roles span { font-size:10px; }
 .loop-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
 .loop-boundary { max-width:62%; font-size:11px; margin:0; }
 .loop-footer .rf-text-link { min-height:44px; display:flex; align-items:center; font-size:11px; white-space:nowrap; }
}