/* style.css —— 设计基线（唯一真身：所有页面都从这些 token 取值）
 *
 * 参考系：官网学 Playdate（克制、大留白、产品先行），社区学 itch.io（卡片网格）。
 * 三条纪律：
 *   ① **只有一个强调色**（青 #33E0D0，和真机同色）—— 出现第二个颜色就俗了；
 *   ② **不用阴影堆叠**，靠 1px 描边 + 层次分明的底色表达层级；
 *   ③ 间距用 4 的倍数、字号用固定梯度 —— 别随手写像素。
 */
:root{
  /* ===== 浅色（默认）=====
   * 深浅两套只改这一块：下面那份 `[data-theme="dark"]` 是覆盖。
   * ★ 规矩没变：**颜色只有这一处**，页面里不许出现硬编码色值。*/
  --bg:#F6F7FB;          /* 页面底 */
  --surface:#FFFFFF;     /* 卡片 */
  --surface2:#EFF2F8;    /* 卡片里的次级块 / hover */
  --line:#E2E6F0;        /* 1px 描边 */
  --line2:#CBD3E4;
  --text:#0F1424;
  --dim:#5B6684;
  --dim2:#8B94AB;
  --acc:#12B5A6;         /* ★ 唯一强调色（浅底上要比设备的青更深一点，才压得住）*/
  --acc-hi:#0FA294;
  --acc-ink:#FFFFFF;
  --warn:#D6377A;
  --code-bg:#0E1119;     /* 代码块：两套皮肤都用深色（读代码舒服，也像终端）*/
  --code-fg:#C8D2E8;
  /* 行内代码**不是**代码块 —— 表格里一排深底白字的药丸太吵（2026-09-20 用户：
     "这个强调配色也太丑了"）。浅底 + 强调色文字：一眼看出是代码，又不抢正文。*/
  --ci-bg:#EDF1F7;
  --ci-fg:#0B6B63;
  --ci-line:#DCE3EF;
  --shot-bg:#05070F;     /* 游戏画面背后（屏幕本来就是黑的）*/
  --nav-bg:rgba(246,247,251,.85);
  --dev1:#20283F; --dev2:#161D2F; --dev-line:#0B1220;   /* 机身：两套都深（它是实物）*/
  --shadow:none;

  /* 字号梯度 */
  --fs-hero:clamp(34px,5.2vw,58px);
  --fs-h2:clamp(24px,2.6vw,32px);
  --fs-h3:20px; --fs-body:16px; --fs-sm:14px; --fs-xs:12.5px;

  /* 间距：4 的倍数 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r1:10px; --r2:14px; --r3:20px; --rp:999px;
  --w:1120px;
  --t:160ms cubic-bezier(.2,.7,.3,1);
}
:root[data-theme="dark"]{
  --bg:#0A0E18; --surface:#121829; --surface2:#1A2136;
  --line:#232C45; --line2:#2E3A5C;
  --text:#EDF3FF; --dim:#93A4C4; --dim2:#6C7C9E;
  --acc:#33E0D0; --acc-hi:#4CF0E2; --acc-ink:#06231F; --warn:#FF5C9E;
  --code-bg:#070B14; --code-fg:#93A4C4; --shot-bg:#05070F;
  --ci-bg:#1B2438; --ci-fg:#7FE3D6; --ci-line:#2A3450;
  --nav-bg:rgba(10,14,24,.82);
  --dev1:#20283F; --dev2:#161D2F; --dev-line:#0B1220;
}
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:var(--fs-body)/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- 布局 ---------- */
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--s5)}
.sec{padding:var(--s9) 0}
.sec--tight{padding:var(--s7) 0}
.row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.grid{display:grid;gap:var(--s5)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--games{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media(max-width:900px){.grid--3,.grid--4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid--3,.grid--4,.grid--games{grid-template-columns:1fr}
  .sec{padding:var(--s8) 0}}

/* ---------- 顶栏 ---------- */
.nav{position:sticky;top:0;z-index:20;background:var(--nav-bg);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .in{display:flex;align-items:center;gap:var(--s6);height:64px}
.logo{display:flex;align-items:center;gap:var(--s2);font-weight:650;letter-spacing:.2px}
.logo i{width:22px;height:22px;border-radius:6px;background:var(--acc);display:block;
  box-shadow:0 0 0 4px rgba(51,224,208,.12)}
.nav a.lnk{color:var(--dim);font-size:var(--fs-sm);transition:color var(--t)}
.nav a.lnk:hover,.nav a.lnk.on{color:var(--text)}
.nav .sp{flex:1}                    /* 老页面可能还留着它，留着无害 */
/* ---------- 顶栏右侧：主题图标 + 账户（全站统一，2026-09-20） ----------
 * 以前那块是**各页不一样**的：有的放「接上我的机器」、有的放「固件/OTA」、
 * 有的什么都没有 ✗。现在固定成「主题图标（纯图标，不带文字）+ 账户」。*/
.navright{display:flex;align-items:center;gap:var(--s4);margin-left:auto}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  padding:0;background:none;border:1px solid var(--line2);border-radius:var(--rp);
  color:var(--text);font-size:16px;line-height:1;cursor:pointer;
  transition:border-color var(--t),color var(--t)}
.iconbtn:hover{border-color:var(--acc);color:var(--acc)}
.nav details.navmenu{position:relative}
.nav details.navmenu>summary{list-style:none;cursor:pointer;color:var(--dim);
  font-size:var(--fs-sm);transition:color var(--t)}
.nav details.navmenu>summary::-webkit-details-marker{display:none}
.nav details.navmenu>summary:hover,.nav details.navmenu[open]>summary{color:var(--text)}
.navmenu-list{position:absolute;right:0;top:calc(100% + 12px);min-width:156px;z-index:30;
  display:flex;flex-direction:column;padding:var(--s2);background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r2);
  box-shadow:0 12px 32px rgba(8,12,24,.14)}
.navmenu-list a{padding:8px 10px;border-radius:var(--r1);color:var(--text);
  font-size:var(--fs-sm);text-decoration:none}
.navmenu-list a:hover{background:var(--surface2)}
/* ★ 手机上的折叠菜单（2026-09-20 修）：
 *   原来窄屏是把 `.lnk` 直接 `display:none` —— **导航整条没了**，
 *   手机用户在「游戏库」页面既回不了首页也进不去文档 ✗。
 *   现在留一个 ☰ 按钮（`site.js` 注入，不用每个页面各写一遍），
 *   点开把链接摊成竖排。默认收着，不占地方。*/
.nav .menu{display:none;background:none;border:1px solid var(--line2);color:var(--text);
  border-radius:var(--r1);width:38px;height:34px;font-size:16px;line-height:1;cursor:pointer}
.nav .menu:hover{border-color:var(--acc)}
@media(max-width:720px){
  .nav .in{gap:var(--s3);flex-wrap:wrap}
  /* ★ 只藏**菜单里**那五个链接（`.in` 的直接子元素）；右侧那块里的「登录」
   *   也是 `a.lnk`，一起藏掉的话手机上就只剩"注册"、没有"登录"了 ✗（2026-09-20 发现）。*/
  .nav .in > a.lnk{display:none}
  .nav .navright{order:1;gap:var(--s3)}
  .nav .menu{display:block;order:1}         /* ☰ 在最右（DOM 里排在右侧组之后）*/
  /* 收着 = 链接不显示；展开 = 竖排铺满一整行 */
  .nav.open .in > a.lnk{display:block;order:3;flex:0 0 100%;padding:var(--s3) 0;
    border-top:1px solid var(--line)}
  .nav.open .in{height:auto;padding-bottom:var(--s3)}
  .nav .pill{display:none}          /* 窄屏先让位给 logo 和按钮 */
}
/* 窄到 420 也别塌：hero 的机身、卡片、代码块都留了退路 */
@media(max-width:460px){
  .wrap{padding:0 var(--s4)}
  .device{padding:10px 10px 16px;border-radius:20px}
  .hero{padding:var(--s8) 0 var(--s7)}
  .sec{padding:var(--s7) 0}
  .card{padding:var(--s4)}
  pre.read,pre.code,textarea{font-size:12px}
}

/* ---------- 代码 ----------
 * ★ 行内 `code` 和代码块 `pre` **是两种东西，别用同一套色**：
 *   行内 = 浅底 + 强调色文字（在正文/表格里当"名词标记"用，要轻）；
 *   代码块 = 深底浅字（像终端，要稳）。
 *   规矩没变：颜色只在这份 css 里出现，页面里不许硬编码。*/
code{background:var(--ci-bg);color:var(--ci-fg);border:1px solid var(--ci-line);
  padding:1px 6px;border-radius:5px;font:.92em/1.5 ui-monospace,Menlo,monospace}
pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s2);height:42px;padding:0 var(--s5);
  border-radius:var(--rp);border:1px solid var(--line2);background:transparent;
  color:var(--text);font:inherit;font-size:var(--fs-sm);cursor:pointer;
  transition:transform var(--t),background var(--t),border-color var(--t)}
.btn:hover{transform:translateY(-2px);border-color:var(--dim2)}
.btn--pri{background:var(--acc);border-color:transparent;color:var(--acc-ink);font-weight:600}
.btn--pri:hover{background:var(--acc-hi)}
.btn--sm{height:34px;padding:0 var(--s4);font-size:var(--fs-xs)}
.btn[disabled]{opacity:.45;cursor:default;transform:none}

/* ---------- 首屏 ---------- */
.hero{padding:var(--s10) 0 var(--s9);position:relative;overflow:hidden}
.hero h1{font-size:var(--fs-hero);line-height:1.12;letter-spacing:-.02em;
  margin:0 0 var(--s5);font-weight:680;max-width:15em}
.hero p.lead{color:var(--dim);font-size:clamp(15px,1.4vw,18px);max-width:34em;margin:0 0 var(--s6)}
.hero .row{gap:var(--s3)}
/* 真机示意：CSS 画的机身 + 里面放**真机截图**（不是效果图，是预览器渲染的）*/
.device{width:340px;max-width:86vw;padding:14px 14px 22px;border-radius:26px;
  background:linear-gradient(180deg,var(--dev1),var(--dev2));border:1px solid var(--line2);
  margin:0 auto}
.device .screen{border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--dev-line)}
.device .screen img{width:100%;image-rendering:pixelated}
.device .dot{width:6px;height:6px;border-radius:50%;background:#39456B;margin:12px auto 0}

/* ---------- 卡片 ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s5);transition:transform var(--t),border-color var(--t),background var(--t)}
.card:hover{transform:translateY(-2px);border-color:var(--line2);background:var(--surface2)}
.card h3{margin:0 0 var(--s2);font-size:var(--fs-h3);font-weight:620}
.card p{margin:0;color:var(--dim);font-size:var(--fs-sm)}
.card .num{color:var(--acc);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase}

/* 游戏卡：封面 + 信息（社区那种）*/
.game{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--t),border-color var(--t)}
.game:hover{transform:translateY(-3px);border-color:var(--line2)}
.game .cov{position:relative;aspect-ratio:4/3;background:var(--shot-bg);
  border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;overflow:hidden}
/* ★ 封面是**现场渲染**出来的（第一次要 ~2 秒）：
   底下一行小字当骨架，图加载完淡入盖上去 —— 别让人干等一块黑。*/
.game .cov::after{content:"加载游戏画面";position:absolute;inset:0;display:grid;
  place-items:center;color:var(--dim2);font-size:var(--fs-xs)}
/* ★★ `position:relative;z-index:1` 不能省（2026-09-20 修）：
 *   骨架那行字是**绝对定位**、封面图是**静态定位** —— 同一层里定位元素画在
 *   静态元素之上，于是**每张卡都变成"图上盖着『生成封面…』"** ✗
 *   （审图时一眼看出来的：18 张卡全中）。给图一个定位 + z-index 压回去，
 *   骨架就只在图没出来时露着了。*/
.game .cov img{position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;image-rendering:pixelated;
  animation:covin .35s var(--t)}          /* ★ 不依赖 JS：图没加载出来时它本来就是透明，
                                             底下那行"生成封面…"自然露出来；加载完盖上去。
                                             别写 opacity:0（万一 JS 没打标记，封面会消失 ✗）*/
@keyframes covin{from{opacity:.35}to{opacity:1}}
.game .in{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.game .t{font-weight:600}
.game .d{color:var(--dim);font-size:var(--fs-xs);flex:1}
.game .m{display:flex;justify-content:space-between;color:var(--dim2);font-size:var(--fs-xs)}

/* ---------- 文字工具 ---------- */
.eyebrow{color:var(--acc);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;margin:0 0 var(--s3)}
h2.h{font-size:var(--fs-h2);margin:0 0 var(--s4);font-weight:660;letter-spacing:-.01em}
p.sub{color:var(--dim);margin:0 0 var(--s7);max-width:36em}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--rp);
  background:var(--surface2);border:1px solid var(--line);color:var(--dim);font-size:var(--fs-xs)}
.muted{color:var(--dim2);font-size:var(--fs-xs)}
hr.sep{border:0;border-top:1px solid var(--line);margin:var(--s8) 0}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line);padding:var(--s7) 0;color:var(--dim2);
  font-size:var(--fs-xs)}
footer .in{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

/* ===== 2026 重构第一阶段：硬件实验室 × 游戏大厅 ===== */
:root{
  --bg:#101513; --surface:#18201d; --surface2:#202a26; --line:#34423c; --line2:#52635a;
  --text:#f3f1e8; --dim:#aeb8ad; --dim2:#748177; --acc:#b7efc5; --acc-hi:#d1f8d9;
  --acc-ink:#112018; --warn:#f4a261; --code-bg:#0b100e; --code-fg:#cfe8d4; --ci-bg:#22312a; --ci-fg:#b7efc5; --ci-line:#385144;
  --shot-bg:#080b0a; --nav-bg:rgba(16,21,19,.9); --dev1:#2a3530; --dev2:#151b18; --dev-line:#0d120f;
  --shadow:0 20px 60px rgba(0,0,0,.22);
}
:root[data-theme="light"]{
  --bg:#e9eef1; --surface:#f8fafb; --surface2:#e0e8eb; --line:#ccd7dc; --line2:#aabac2;
  --text:#162127; --dim:#5c6c74; --dim2:#85949b; --acc:#226b55; --acc-hi:#2f8066; --acc-ink:#f4f8f5;
  --warn:#b75c2e; --code-bg:#172127; --code-fg:#d7ecdf; --ci-bg:#dce9e5; --ci-fg:#1f5b48; --ci-line:#c3d7d3;
  --shot-bg:#11191c; --nav-bg:rgba(233,238,241,.9); --dev1:#46545a; --dev2:#202c31; --dev-line:#11191c;
  --shadow:0 16px 40px rgba(34,52,62,.12);
}
body{background:var(--bg);background-image:linear-gradient(rgba(58,91,103,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(58,91,103,.035) 1px,transparent 1px);background-size:32px 32px}
.nav{border-bottom-color:var(--line)}
.logo{letter-spacing:.04em;text-transform:uppercase;font-size:var(--fs-xs)}
.logo i{border-radius:2px;box-shadow:0 0 0 4px rgba(183,239,197,.12)}
.nav a.lnk{letter-spacing:.03em}
.hero--lab{padding:clamp(68px,10vw,132px) 0 96px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 76% 20%,rgba(183,239,197,.11),transparent 28%),linear-gradient(135deg,rgba(183,239,197,.03),transparent 42%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);align-items:center;gap:clamp(36px,9vw,130px)}
.hero-copy h1{font-size:clamp(42px,6.5vw,78px);max-width:11em;letter-spacing:-.055em}
.hero-copy h1 em{font-style:normal;color:var(--acc)}
.hero-copy .lead{max-width:35em;color:var(--dim);font-size:clamp(16px,1.5vw,19px)}
.lab-kicker,.section-label,.hero-note,.games-meta,.device-caption{font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;text-transform:uppercase}
.lab-kicker{display:flex;align-items:center;gap:9px;color:var(--acc);margin-bottom:22px}
.signal-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 5px rgba(183,239,197,.1)}
.hero-actions{margin-top:28px}.hero-note{display:flex;gap:10px;color:var(--dim2);margin-top:26px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.hero-device{justify-self:center;max-width:390px;width:100%}.device--lab{width:100%;padding:18px 18px 20px;border-radius:28px;box-shadow:var(--shadow);transform:rotate(2deg)}
.device--lab .screen{border-radius:15px}.device--lab .device-meta{display:flex;justify-content:space-between;color:#9fb2a5;font:10px ui-monospace,monospace;letter-spacing:.12em;margin-top:12px}.status-led{color:var(--acc)}
.device-caption{display:flex;justify-content:space-between;color:var(--dim2);margin-top:19px;transform:rotate(2deg)}
.audiences{padding:28px 0 100px}.section-label{display:flex;align-items:center;gap:14px;color:var(--dim2);margin-bottom:20px}.section-label .rule{height:1px;background:var(--line);flex:1}
.audience-grid{gap:12px}.route-card{display:flex;gap:18px;padding:26px 24px;min-height:200px;border:1px solid var(--line);border-radius:4px;background:var(--surface);transition:transform var(--t),border-color var(--t),background var(--t)}
.route-card:hover{transform:translateY(-4px);border-color:var(--acc);background:var(--surface2)}.route-index{font:600 12px ui-monospace,monospace;color:var(--acc);padding-top:4px}.route-card h2{margin:0 0 10px;font-size:22px}.route-card p{margin:0 0 22px;color:var(--dim);font-size:14px}.route-link{color:var(--acc);font:600 12px ui-monospace,monospace;letter-spacing:.06em}.route-link b{font-size:17px;margin-left:6px}
.home-games{border-top:1px solid var(--line)}.section-head{align-items:end}.section-head .sub{margin-bottom:0}.home-games .h{margin-bottom:8px}
.game{border-radius:4px;border-color:var(--line);background:var(--surface)}.game:hover{border-color:var(--acc);box-shadow:var(--shadow)}.game .in{padding:18px}.game .t{letter-spacing:.01em}.game .cov{border-bottom-color:var(--line)}
.lab-strip{padding:56px 0 80px}.strip-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px;border:1px solid var(--line);background:linear-gradient(100deg,var(--surface),transparent);border-radius:4px}.strip-inner h2{margin:10px 0 0;font-size:clamp(22px,3vw,34px);letter-spacing:-.03em}
.games-head{padding:72px 0 36px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,rgba(183,239,197,.07),transparent 48%)}.games-title-row h1{font-size:clamp(42px,6vw,68px);line-height:1.05;letter-spacing:-.05em;margin:0 0 10px}.games-title-row p{margin:0;color:var(--dim);font-size:17px}.games-meta{display:flex;gap:18px;align-items:center;color:var(--dim2);margin-top:34px}.games-meta .mono{color:var(--acc)}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-device{max-width:330px;margin-top:20px}.audiences{padding-bottom:64px}.strip-inner{align-items:flex-start;flex-direction:column}.games-title-row{align-items:flex-start;flex-direction:column;gap:24px}}
@media(max-width:620px){.hero--lab{padding-top:56px}.hero-copy h1{font-size:clamp(40px,13vw,60px)}.device-caption{font-size:9px}.games-meta{align-items:flex-start;flex-direction:column;gap:7px}.route-card{min-height:0}.lab-strip{padding-top:36px}}
/* 公开创作入口统一为 Studio；旧页面已移除，接口模块仍可继续复用。 */

/* 首页第二轮校正：固定信息层级，避免首屏标题、设备和入口互相抢位。 */
.hero--lab{padding:clamp(72px,9vw,112px) 0 clamp(72px,9vw,108px)}
.hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(300px,.82fr);gap:clamp(40px,8vw,112px)}
.hero-copy h1{font-size:clamp(44px,4.8vw,62px);line-height:1.12;max-width:15em;letter-spacing:-.045em;margin-bottom:24px}
.hero-copy .lead{max-width:34em;line-height:1.85}
.hero-actions{align-items:center;row-gap:14px}.text-link{color:var(--acc);font-size:var(--fs-sm);font-weight:600;margin-left:4px}.text-link span{margin-left:4px}
.hero-note{font-family:inherit;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:none}
.audiences{padding:64px 0 88px}.audience-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.route-card{min-height:188px;padding:26px 24px}.route-card h2{font-size:21px;margin-bottom:9px}.route-card p{line-height:1.75;margin-bottom:20px}
.home-games{padding-top:72px;padding-bottom:84px}.section-head{align-items:flex-end;margin-bottom:28px}.section-head .sub{margin-bottom:0}.home-games .h{margin-bottom:5px}
.workflow{padding:0 0 96px}.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--line)}.workflow-grid>div{padding:26px 0 0;border-right:1px solid var(--line);padding-right:22px}.workflow-grid>div:last-child{border-right:0}.workflow-no{color:var(--acc);font:600 11px ui-monospace,monospace;letter-spacing:.12em}.workflow-grid h2{font-size:21px;margin:15px 0 7px}.workflow-grid p{margin:0;color:var(--dim);font-size:var(--fs-sm);max-width:26em}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:48px}.hero-device{max-width:350px}.audience-grid,.workflow-grid{grid-template-columns:1fr}.workflow-grid>div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:24px}.workflow-grid>div:last-child{border-bottom:0}.section-head{align-items:flex-start;flex-direction:column;gap:18px}}
@media(max-width:620px){.hero--lab{padding:58px 0 64px}.hero-copy h1{font-size:clamp(42px,12vw,58px);max-width:12em}.hero-copy .lead{font-size:15px}.hero-actions .text-link{flex-basis:100%;margin-left:0}.audiences{padding:48px 0 62px}.home-games{padding-top:56px;padding-bottom:64px}.workflow{padding-bottom:64px}}