@font-face{font-family:'Mynerve';src:url('fonts/mynerve-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ============ tokens ============ */
:root{
--paper:#F8FAFC;--white:#FFF;--ink:#0C131B;--ink-2:#5C6167;--ink-3:#8E959C;--body:#4E545B;
--rule:rgba(12,19,27,.13);--line:rgba(12,19,27,.10);
--cy:#00CBCC;--cy-ink:#0C8788;--vio:#7F6CF6;--hl:#FFF08A;
--col:868px;--r:26px;--r-s:16px;
--sh-1:0 1px 2px rgba(12,19,27,.05);
--sh-2:0 1px 2px rgba(12,19,27,.04),0 14px 34px -14px rgba(12,19,27,.10);
--sh-3:0 2px 4px rgba(12,19,27,.05),0 22px 48px -18px rgba(12,19,27,.14);
--sans:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
--hand:'Mynerve','Bradley Hand','Segoe Print',cursive;
--s:.686;color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto 是必须的：只要给 <img> 写了 width/height 属性，max-width:100% 一压宽度，
   height 属性还钉在原值上，图就被纵向拉长（首屏那张流程总览踩过一次） */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 18px;color:var(--body)}
p:last-child{margin-bottom:0}
b,strong{font-weight:600;color:var(--ink)}
.hand{font-family:var(--hand);font-weight:400}
.hl{background:var(--hl);padding:.06em .28em;border-radius:2px;color:var(--ink);box-decoration-break:clone}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;
background:rgba(12,19,27,.06);padding:.1em .38em;border-radius:4px}

/* ============ shell ============ */
.wrap{width:var(--col);max-width:calc(100vw - 44px);margin:0 auto;padding:30px 0 0}
section{margin:70px 0 0;scroll-margin-top:26px}
h2{font-size:25px;font-weight:600;letter-spacing:-.015em;margin:0 0 18px;line-height:1.3}
h2 em{font-family:var(--hand);font-style:normal;color:var(--ink-3);font-size:18px;
margin-left:11px;font-weight:400;white-space:nowrap;letter-spacing:0}
.lede{color:var(--ink-2);margin:0 0 20px;max-width:46em;font-size:16px}

/* ============ dock ============ */
.dock{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:60;
display:flex;flex-direction:column;gap:2px;padding:12px 8px;background:var(--white);
border-radius:30px;box-shadow:var(--sh-2)}
.dock a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
color:var(--ink-3);transition:background .18s,color .18s,transform .18s}
.dock a:hover{background:var(--paper);color:var(--ink);transform:translateY(-1px)}
.dock a.on{color:var(--cy-ink)}
.dock .sp{height:1px;background:var(--line);margin:6px 9px}

/* ============ card system ============ */
.card{position:relative;background:var(--white);border-radius:var(--r);
padding:40px 38px;box-shadow:var(--sh-2);overflow:hidden}
.card+.card{margin-top:22px}
/* photographic light/leaf shadow wash, borrowed as a texture layer */
.card.tex{background:#FAFBFC}
.card.tex::before{content:'';position:absolute;inset:0;background:var(--tex) center/cover no-repeat;
opacity:.55;mix-blend-mode:multiply;pointer-events:none}
.card>*{position:relative}
.card.pad-lg{padding:52px 46px}
.card.flat{box-shadow:var(--sh-1)}

/* stickers & desk objects: absolutely placed, never intercept clicks */
.stk{position:absolute;pointer-events:none;user-select:none;-webkit-user-drag:none;
filter:drop-shadow(0 10px 18px rgba(12,19,27,.16))}

/* pill tag row (thin outline, like the reference) */
.tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 0;padding:0;list-style:none}
.tags li{border:1px solid var(--rule);border-radius:999px;padding:4px 13px;
font-size:13px;color:var(--ink-2);background:rgba(255,255,255,.6);white-space:nowrap}
.tags.l{justify-content:flex-start}
.tags li.on{border-color:transparent;background:var(--cy);color:#04302F;font-weight:500}

/* small caps section kicker */
.kick{font-family:var(--hand);color:var(--ink-3);font-size:17px;margin:0 0 6px;line-height:1}

/* ============ hero ============
   左边只留姓名和一句话，右边整格给星环；窄屏再叠回一列。 */
.hero{position:relative;padding:0;
display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 30px}
.hero__tx{min-width:0}
.ruled{min-width:0}
.ruled p{margin:0;padding:11px 2px 10px;border-bottom:1px solid var(--rule);
color:var(--ink);font-size:17.5px;line-height:1.5;display:flex;flex-wrap:wrap;
align-items:center;gap:7px 9px}
.ruled p:first-child{padding-top:2px}
.ruled .nm{font-size:34px;font-weight:600;letter-spacing:-.02em;gap:7px 12px}
.ruled .nm .hand{font-size:22px;color:var(--ink-3)}
.ruled .fade{color:var(--ink-3)}
/* inline logo chip — real logo goes in the <img>; dashed box = still to supply */
.lg{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;
border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(12,19,27,.10),0 4px 10px -4px rgba(12,19,27,.18);
font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.lg img{height:17px;width:auto}
.lg.tbd{background:repeating-linear-gradient(135deg,#fff,#fff 5px,#F1F4F7 5px,#F1F4F7 10px);
border:1px dashed rgba(12,19,27,.28);box-shadow:none;color:var(--ink-3);font-weight:500}
.lg.cy{background:var(--cy);color:#04302F}
/* 现在这是首屏唯一的一句话，字号给足。中文没有词边界，text-wrap:balance
   会从半句中间折；两个分句各包一层 inline-block，就只能在逗号后面断。 */
.pitch{margin:24px 0 0;padding:0 2px;font-size:30px;line-height:1.5;
letter-spacing:-.02em;color:var(--ink);font-weight:500}
.pitch span{display:inline-block}

/* ============ 首屏星环 ============
   照 fourmula.ai 的机制：整圈 32s 匀速正转，每张图自己反向转同样的 32s，
   两段动画同参数、同时声明所以天然同步 —— 外框一直在翻滚，画面始终正着。
   反向自转只抵掉整圈的 θ，抵不掉卡位自己的 --a，所以图上再单独写一个
   rotate:-a（独立变换属性，先于 transform 合成，不会被 animation 覆盖）。
   要让白框在任意角度都完整包住贴纸：矩形绕自己中心转一圈，恒定被覆盖的区域
   只有内切圆（半径 min(w,h)/2），所以框必须是正方形，且贴纸的外接圆 ≤ 框的
   内切圆 —— 贴纸对角线 ≤ 框边长。代价是 √2 的缩水，贴纸只能占框宽的 .66~.72
   （按各自长宽比逐张算好，烤进画布里，外接圆统一压到 .49*边长，留 1% 余量）。
   画布是正方形且内容居中 —— 正方形绕自己中心转，画面才不会甩。
   一个 --d 推出所有尺寸：半径 .32d、正方形卡片 .245d、圆角 .0784d、画布=卡片。
   包络：.32d + .7071*.245d = .4932d，在 .5d 的舞台里；相邻两张圆心距
   2*.32*sin36=.3762d > 1.4142*.245d=.3465d（同朝向正方形的分离轴下限），不会打架。 */
.orbit{--d:min(500px,52vw);
--rad:calc(var(--d)*.32);
--cw:calc(var(--d)*.245);--ch:var(--cw);--cr:calc(var(--d)*.0784);
--iw:var(--cw);--hubh:calc(var(--d)*.40);
display:grid;justify-items:center;margin:0}
.orbit__stage{position:relative;width:var(--d);height:var(--d)}

/* 轨道：.orbit__slot 先 translate 回正中心再自转，转轴就是圆心；
   卡片用 position:relative 的 top 在「已经转过的」局部坐标里往外推 --rad。 */
.orbit__ring{position:absolute;inset:0;z-index:1;pointer-events:none;
animation:orbit-spin 32s linear infinite}
.orbit__slot{position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%) rotate(var(--a))}
.orbit__card{position:relative;top:calc(-1*var(--rad));
width:var(--cw);height:var(--ch);border-radius:var(--cr);background:#fff;
box-shadow:0 0 0 1px rgba(12,19,27,.05),0 2px 4px rgba(12,19,27,.06),0 20px 40px -18px rgba(12,19,27,.30);
opacity:0;animation:orbit-pop .55s cubic-bezier(.2,1.2,.4,1) calc(.25s + var(--i)*.12s) both}
/* 贴纸整张都在框里，居中放就行 */
.orbit__win{position:absolute;inset:0;display:grid;place-items:center}
.orbit__img{width:var(--iw);height:var(--iw);max-width:none;
rotate:calc(-1*var(--a));animation:orbit-spin 32s linear infinite reverse}
@keyframes orbit-spin{to{transform:rotate(1turn)}}
@keyframes orbit-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}

/* 圆心的立绘不进框，就一张图，整张垫在轨道下面 —— 经过的卡片直接压在西装上。
   脸不会被压到不靠图层，靠几何：卡片最里侧只到中心 .32-.7071*.245=.1468d，
   立绘往下挪 .12d（=.30 图高）之后，实测顶部 55%（整个头 + 到下颌的头发）
   的最小外接圆是 .36 图高 = .144d，整个缩在 .1468d 里面。
   标签也永远压在立绘上面，所以字一定读得到。 */
.orbit__me{position:absolute;left:50%;top:calc(50% + var(--d)*.12);
transform:translate(-50%,-50%);z-index:0;line-height:0;pointer-events:none;
filter:drop-shadow(0 16px 22px rgba(12,19,27,.16))}
/* 素材底边是硬切的，淡出去才不像被裁了一刀 */
.orbit__me img{display:block;height:var(--hubh);width:auto;
-webkit-mask-image:linear-gradient(#000 88%,rgba(0,0,0,0));
mask-image:linear-gradient(#000 88%,rgba(0,0,0,0))}
/* WCAG 2.2.2：超过 5s 的动效必须能真的停下来（hover 不算），所以键留着，
   缩成舞台右下角的一个小圆点 —— 那个角在卡片包络 .4932d 之外，不会被压到。
   font-size:0 只是把文字藏起来，读屏器照样念得到「暂停旋转 / 继续旋转」。 */
.orbit__pause{position:absolute;right:0;bottom:0;z-index:3;
width:26px;height:26px;padding:0;border:1px solid var(--rule);border-radius:50%;
background:#fff;color:var(--ink-3);font:inherit;font-size:0;cursor:pointer;
display:grid;place-items:center;opacity:.4;
box-shadow:0 1px 2px rgba(12,19,27,.06);transition:opacity .18s,color .18s}
.orbit__pause::before{content:'‖';font-size:11px;line-height:1}
.orbit__pause[aria-pressed="true"]::before{content:'▶';font-size:10px}
.orbit__pause:hover,.orbit__pause:focus-visible{opacity:1;color:var(--ink)}
.orbit.hold .orbit__ring,.orbit.hold .orbit__img{animation-play-state:paused}

/* sticky notes — the self-intro as tags instead of a paragraph */
.nt{display:inline-block;padding:11px 17px 13px;border-radius:2px;color:#1B2430;
font-size:16px;line-height:1.5;letter-spacing:-.01em;
box-shadow:0 8px 18px -8px rgba(12,19,27,.26),0 1px 2px rgba(12,19,27,.13);
transition:box-shadow .2s}
.nt.y{background:linear-gradient(#FFF9A8,#FBF287)}
.nt.b{background:linear-gradient(#BEEAFE,#A6DFFA)}
.nt.p{background:linear-gradient(#FFD9E7,#FFC5D8)}
.nt.m{background:linear-gradient(#C6F5ED,#ADEDE1)}
.nt.w{background:linear-gradient(#FFF,#EFF3F7)}
.nt.big{font-size:18.5px;font-weight:500;padding:13px 19px 15px}
.nt.add{background:none;box-shadow:none;color:var(--ink-3);font-size:14px;
border:1.5px dashed rgba(12,19,27,.26);border-radius:3px}
.nt:not(.add):hover{box-shadow:0 16px 30px -10px rgba(12,19,27,.32),0 1px 2px rgba(12,19,27,.15)}

/* ============ featured project cards ============ */
.pc{display:block;text-align:center;padding:38px 38px 0;transition:box-shadow .22s,transform .22s}
.pc:hover{box-shadow:var(--sh-3);transform:translateY(-2px)}
.pc h3{font-size:22px;font-weight:600;letter-spacing:-.015em;margin:0 0 8px;line-height:1.35}
.pc .sub{color:var(--ink-2);margin:0;font-size:15.5px;max-width:40em;margin-inline:auto}
.pc .shot{position:relative;display:block;margin:30px -10px 0;min-height:190px}
/* 四张卡一个尺寸。参考站（xiaoyanghu.com）实测 866×396，做法不是把图缩到一样高，
   而是文字区高度写死 + 器材图从卡片底边裁出去 —— 裁边由 .card 的 overflow:hidden 干。
   只在 .wrap 已经撑满 868px 的宽度上生效（100vw-44 ≥ 868 → 912px），
   窄屏下文案换行行数不定，让它回到自然高度，所以 660 那档不用再重置一遍。 */
@media (min-width:912px){
.pc .sub{min-height:3.2em}          /* 预留两行，一行的和两行的图都从同一条线开始 */
.pc .shot{height:206px;min-height:0;margin-top:26px}
.pc .shot .stack{height:100%}       /* align-items:end 把三台机身压到底边，跟单张图一样贴住 */
/* 三张宽截图按原比例只有 121px 高，贴底以后上面会空掉一大块，
   所以在这一档里把它们裁高一点（cover，从顶部裁），把 206px 填满 */
.pc .shot .stack .lap img{height:168px;max-height:none}
}
.pc .go{position:absolute;right:22px;top:20px;width:30px;height:30px;border-radius:50%;
display:grid;place-items:center;color:var(--ink-3);background:var(--paper);
font-size:15px;transition:background .2s,color .2s}
.pc:hover .go{background:var(--ink);color:#fff}
.live{display:inline-block;vertical-align:middle;margin-left:8px;background:var(--cy);
color:#04302F;font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;letter-spacing:.02em}

/* device frames used inside .shot */
.lap{display:block;border-radius:10px 10px 3px 3px;background:#1B2027;padding:8px 8px 0;
box-shadow:0 18px 34px -16px rgba(12,19,27,.35)}
.lap img{border-radius:5px 5px 0 0;max-height:340px;object-fit:cover;object-position:top}
.lap.tilt{transform:rotate(-1.2deg)}
.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}
.stack .lap:nth-child(1){transform:rotate(-2.4deg) translateY(8px)}
.stack .lap:nth-child(3){transform:rotate(2.4deg) translateY(8px)}
/* image placeholder tile: dashed, labelled, keeps layout honest */
.ph{display:grid;place-items:center;gap:6px;background:repeating-linear-gradient(135deg,#FBFCFD,#FBFCFD 7px,#F1F4F7 7px,#F1F4F7 14px);
border:1.5px dashed rgba(12,19,27,.24);border-radius:12px;min-height:180px;
color:var(--ink-3);font-size:13.5px;text-align:center;padding:20px}
.ph b{display:block;color:var(--ink-2);font-size:14px;margin-bottom:2px}
.ph .k{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#A6ADB4}

/* ============ the TV (live demos) ============ */
.tv{border-radius:22px;background:linear-gradient(#EDF1F4,#E3E9ED);padding:16px;box-shadow:var(--sh-1)}
.bezel{background:#171C22;border-radius:14px;padding:10px}
.scr{position:relative;width:100%;aspect-ratio:1160/740;border-radius:7px;overflow:hidden;background:#0B0F14}
.scr iframe{position:absolute;left:0;top:0;width:1160px;height:740px;border:0;
transform:scale(var(--s));transform-origin:0 0}
.scr .boot{position:absolute;inset:0;display:grid;place-items:center;color:#7C868F;
font-family:var(--hand);font-size:19px}
.chan{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 4px 2px}
.chan .knob{width:11px;height:11px;border-radius:50%;background:var(--cy);
box-shadow:0 0 0 4px rgba(0,203,204,.18);margin-right:2px}
.chan .hand{color:var(--ink-3);font-size:16px;margin-right:4px}
.ch{border:1px solid var(--rule);background:#fff;border-radius:999px;padding:6px 15px;
font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer;transition:all .18s}
.ch:hover{border-color:rgba(12,19,27,.3);color:var(--ink)}
.ch[aria-pressed=true]{background:var(--cy);border-color:transparent;color:#04302F;font-weight:600}
.ch.out{margin-left:auto;border-color:transparent;color:var(--ink-3)}
.ch.out:hover{color:var(--ink)}

/* ============ sticker board (toolkit) ============ */
.board{position:relative;display:grid;
grid-template-columns:repeat(2,1fr);gap:26px 30px;align-content:start}
.tk{display:flex;align-items:flex-start;gap:16px}
.tk img{width:78px;flex:0 0 78px;filter:drop-shadow(0 8px 14px rgba(12,19,27,.18))}
.tk h4{margin:6px 0 4px;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.tk p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}

/* ============ method list / notes ============ */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;display:flex;gap:15px;align-items:flex-start;
background:var(--paper);border-radius:14px;padding:16px 20px}
.steps li::before{content:counter(s);flex:0 0 24px;height:24px;border-radius:50%;
background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;display:grid;
place-items:center;margin-top:1px}
.steps li p{margin:0;font-size:15.5px;line-height:1.6}
/* checklist variant — no numbers, small dots instead */
.steps.chk li::before{content:'';background:var(--ink);border:0;border-radius:50%;
width:5px;height:5px;flex-basis:5px;margin:10px 8px 0 3px}
/* torn-paper note strip */
.torn{position:relative;margin:22px 0 0;padding:20px 24px 22px;
background:var(--paper);border-radius:4px;box-shadow:var(--sh-1)}
.torn::before{content:'';position:absolute;left:0;right:0;top:-9px;height:12px;
background:var(--tear) center/100% 100% no-repeat;opacity:.9}
.torn p{margin:0;font-size:14.5px;color:var(--ink-2)}

/* ============ KPI row ============ */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kpi{background:#fff;border-radius:20px;padding:26px 22px 24px;box-shadow:var(--sh-2);text-align:center}
.kpi img{width:62px;margin:0 auto 12px;filter:drop-shadow(0 7px 12px rgba(12,19,27,.15))}
.kpi .big{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px;color:var(--ink)}
.kpi .cap{font-size:13.5px;color:var(--ink-3);margin:0;line-height:1.5}

/* ============ journey timeline ============ */
.jr{display:grid;gap:12px}
.row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:18px;align-items:center;
background:#fff;border-radius:20px;padding:18px 24px;box-shadow:var(--sh-2)}
.row .lo{width:56px;height:56px;border-radius:50%;background:var(--paper);
display:grid;place-items:center;overflow:hidden;font-size:11px;color:var(--ink-3);text-align:center}
.row .lo.ph{border:1.5px dashed rgba(12,19,27,.22);border-radius:50%;min-height:0;padding:4px}
.row .lo img{width:74%;height:74%;object-fit:contain}
.row h4{margin:0 0 3px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.row .rl{margin:0;font-size:14.5px;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.row .rl svg{flex:0 0 15px;color:var(--ink-3)}
.row .rt{text-align:right}
.row .dt{font-size:14px;color:var(--ink-3);margin:0 0 5px;white-space:nowrap}

/* ============ about / philosophy / beyond ============ */
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;align-items:center}
.split.r{grid-template-columns:minmax(0,1fr) 300px}
.cam{position:relative;width:300px}
.cam>img{width:100%}
.cam .face{position:absolute;left:13.5%;top:36%;width:54%;height:38.4%;
overflow:hidden;background:#D8DEE3;border-radius:1px}
.cam .face img{width:100%;height:100%;object-fit:cover}
.cam .tag{position:absolute;right:-16px;bottom:-20px;width:96px;
transform:rotate(-26deg);filter:drop-shadow(0 10px 18px rgba(12,19,27,.2))}
h3.blk{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0 0 12px}

/* sticky note */
.note{position:relative;padding:26px 26px 30px;border-radius:2px;
font-family:var(--hand);font-size:19px;line-height:1.62;color:#1B2430;
box-shadow:0 8px 20px -8px rgba(12,19,27,.28),0 1px 2px rgba(12,19,27,.14)}
.note.y{background:linear-gradient(#FFF9A8,#FBF287)}
.note.b{background:linear-gradient(#B9E9FE,#A5DFFA)}
.note p{color:inherit;margin:0 0 10px}
.note .by{display:block;text-align:right;font-size:16px;color:#3D4854;margin-top:12px}
.note.tilt-a{transform:rotate(1.6deg)}
.note.tilt-b{transform:rotate(-1.8deg)}

/* photo strip / polaroids */
.strip{display:flex;justify-content:center;padding:4px 0 8px}
.pl{background:#fff;padding:9px 9px 34px;border-radius:3px;
box-shadow:0 10px 22px -10px rgba(12,19,27,.34),0 1px 2px rgba(12,19,27,.12)}
.pl img,.pl .ph{width:150px;height:150px;object-fit:cover;border-radius:1px;min-height:0}
.pl figcaption{font-family:var(--hand);font-size:14px;color:#5A6270;text-align:center;
margin-top:9px;line-height:1.3}
.strip .pl{margin:0 -14px}
.strip .pl:nth-child(1){transform:rotate(-7deg)}
.strip .pl:nth-child(2){transform:rotate(-2.5deg) translateY(-6px)}
.strip .pl:nth-child(3){transform:rotate(3deg)}
.strip .pl:nth-child(4){transform:rotate(7.5deg) translateY(-3px)}

/* ============ easter egg ============ */
.egg{position:relative;min-height:296px}
.egg .shutter{position:absolute;right:14px;top:0;width:210px;background:none;border:0;
padding:0;cursor:pointer;transition:transform .16s}
.egg .shutter:hover{transform:translateY(-3px) rotate(-1.5deg)}
.egg .shutter:active{transform:translateY(1px) scale(.985)}
.egg .shutter img{width:100%;filter:drop-shadow(0 14px 24px rgba(12,19,27,.2))}
.egg .note{width:262px;margin-top:22px}
.egg .cnt{font-family:var(--hand);font-size:15px;color:var(--ink-3);margin:12px 0 0}
.drop{position:absolute;right:0;top:190px;width:400px;height:170px}
.dp{position:absolute;background:#fff;padding:8px 8px 28px;border-radius:3px;cursor:grab;
box-shadow:0 12px 24px -10px rgba(12,19,27,.36),0 1px 2px rgba(12,19,27,.14);
opacity:0;transform:scale(.84) rotate(0deg);transition:opacity .45s,transform .45s cubic-bezier(.2,1.3,.4,1);touch-action:none}
.dp.in{opacity:1;transform:scale(1) rotate(var(--rot,0deg))}
.dp.drag{transition:none}
.dp:active{cursor:grabbing;z-index:9}
.dp img,.dp .ph{width:124px;height:124px;object-fit:cover;min-height:0;border-radius:1px}
.dp figcaption{font-family:var(--hand);font-size:13px;color:#5A6270;text-align:center;margin-top:7px}

/* ============ footer ============ */
footer{margin:82px 0 0;padding:0 0 90px;text-align:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:0 0 26px}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--rule);
border-radius:999px;padding:8px 17px;font:inherit;font-size:14.5px;color:var(--ink-2);
cursor:pointer;transition:all .18s}
.chip:hover{color:var(--ink);border-color:rgba(12,19,27,.3);transform:translateY(-1px)}
.chip svg{stroke:currentColor;fill:none;flex:0 0 17px}
.sig{font-family:var(--hand);font-size:30px;color:var(--ink);margin:0 0 6px}
.cr{font-size:13.5px;color:var(--ink-3);margin:0}
.cr a{border-bottom:1px solid var(--rule)}

/* ============ lightbox + toast ============ */
.lb{position:fixed;inset:0;background:rgba(8,12,17,.82);z-index:200;display:none;
place-items:center;padding:36px;backdrop-filter:blur(3px)}
.lb.on{display:grid}
.lb img{max-width:min(1180px,94vw);max-height:88vh;border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.lb u{position:absolute;right:26px;top:20px;color:#fff;font-size:30px;line-height:1;
text-decoration:none;cursor:pointer;opacity:.75}
.lb u:hover{opacity:1}
.zoom{cursor:zoom-in}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,18px);background:var(--ink);
color:#fff;font-size:14.5px;padding:11px 20px;border-radius:999px;opacity:0;
pointer-events:none;transition:.25s;z-index:210}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ============ reveal ============ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;transition:none}
html{scroll-behavior:auto}
.dp{transition:opacity .2s}
/* 不放动画就直接给结果：五张卡停在各自的静态角度，画面本来就是正的 */
.orbit__ring,.orbit__img{animation:none}
.orbit__card{opacity:1;animation:none}
.orbit__pause{display:none}}

/* ============ responsive ============ */
@media (max-width:1180px){.dock{left:10px}}
@media (max-width:1040px){
.dock{left:50%;top:auto;bottom:14px;transform:translateX(-50%);flex-direction:row;
gap:2px;padding:8px 12px;border-radius:26px}
.dock .sp{width:1px;height:auto;margin:8px 6px}
.wrap{padding-top:20px}
footer{padding-bottom:100px}}
@media (max-width:980px){
/* 两列撑不住了就叠回一列：文字在上，星环在下居中 */
.hero{grid-template-columns:minmax(0,1fr);gap:28px}
.orbit{--d:min(560px,84vw);justify-self:center}
.pitch{font-size:26px}}
@media (max-width:880px){
.split,.split.r{grid-template-columns:1fr;gap:30px;justify-items:center}
.split .tx,.split.r .tx{justify-self:stretch}
.board{grid-template-columns:1fr;min-height:0}
.drop{position:relative;right:auto;top:auto;width:100%;height:180px;margin-top:24px}}
@media (max-width:660px){
body{font-size:16px}
.card{padding:28px 22px;border-radius:20px}
.card.pad-lg,.pc{padding:28px 22px 0}
.ruled .nm{font-size:27px}
.pitch{font-size:22px}
h2{font-size:22px}
h2 em{display:block;margin:6px 0 0}
.kpis{grid-template-columns:1fr}
.row{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 18px}
.row .lo{width:44px;height:44px}
.row .rt{grid-column:1/-1;text-align:left;display:flex;align-items:center;gap:10px}
.row .dt{margin:0}
.stack{grid-template-columns:1fr;gap:16px}
.stack .lap:nth-child(n){transform:none}
.strip{flex-wrap:wrap;gap:14px}
.strip .pl{margin:0}
.egg .shutter{position:relative;right:auto;width:160px;margin:0 auto 8px}
.egg{min-height:0}
.nt{font-size:15px;padding:10px 15px 12px}
.nt.big{font-size:16.5px;padding:11px 16px 13px}
.cam{width:min(280px,86%)}}