.pin{grid-template-columns:.85fr 1fr;grid-template-areas:"hp mpu""hp strip";align-items:start;gap:22px 26px;width:100%;max-width:560px;margin-left:auto;display:grid;position:relative}.pin figure{margin:0}.pin .p-hp{grid-area:hp}.pin .p-mpu{grid-area:mpu;margin-top:12%}.pin .p-strip{grid-area:strip}.pin .ui-face{border-radius:6px;box-shadow:0 24px 60px -30px #000000d9}.gallery{z-index:2}.ex{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:clamp(32px,5vw,72px);margin-top:clamp(56px,7vw,96px);display:grid}.ex.flip .ex-stage{order:2}.ex-stage{background:radial-gradient(80% 60% at 20% 0%, #ffb54742, transparent 70%), radial-gradient(70% 60% at 100% 100%, #8936ff2e, transparent 70%), var(--paper-2);border-radius:28px;justify-content:center;align-items:center;min-height:340px;padding:clamp(24px,4vw,48px);display:flex}.ex-stage .ui-face{border-radius:6px;max-width:100%;box-shadow:0 24px 50px -30px #1112178c}.ex-stage.stack{flex-direction:column;align-items:stretch;gap:22px}.ex-stage.phone-pair{align-items:center;gap:22px}.ex-stage.phone-pair .ui-face:first-child,.ex-stage.phone-pair .ui-face:last-child{width:46%}.ex-stage .phone{background:#111217;border-radius:30px;width:220px;max-width:70%;padding:10px;box-shadow:0 30px 60px -30px #111217b3}.ex-stage .phone .ui-face{box-shadow:none;border-radius:22px}.ex-stage.screens{align-items:flex-end;gap:22px}.ex-stage .bezel{background:linear-gradient(160deg,#2a2e3a,#12141b);border-radius:10px;padding:6px;box-shadow:0 30px 60px -30px #111217b3}.ex-stage .bezel .ui-face{box-shadow:none;border-radius:3px}.ex-stage .bezel.land{width:66%}.ex-stage .bezel.port{width:24%}.ex-k{color:var(--p-ink-2);font-size:12px;display:inline-block}.ex h3{letter-spacing:-.03em;margin-top:12px;font-size:clamp(24px,2.4vw,32px)}.ex-note>p{color:var(--p-ink-2);max-width:480px;margin-top:12px;font-size:16px;line-height:1.55}.ex-note .ticks,.ex-note .more{margin-top:22px}.craft{z-index:3;background:var(--paper-2)}.cr-grid{counter-reset:cr;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 48px;margin-top:56px;list-style:none;display:grid}.cr-grid li{counter-increment:cr;border-top:1px solid var(--paper-line);padding-top:22px}.cr-grid li:before{content:"0" counter(cr);color:#fff;background:linear-gradient(135deg, var(--g-violet), var(--g-coral));border-radius:6px;margin-bottom:16px;padding:4px 8px;font:500 12px/1.2 Geist Mono,monospace;display:inline-block}.cr-grid li:nth-child(3n+2):before{background:linear-gradient(135deg, var(--g-coral), var(--g-sun))}.cr-grid li:nth-child(3n+3):before{background:linear-gradient(135deg, var(--g-mint), var(--g-sky))}.cr-grid p{color:var(--p-ink-2);margin-top:10px;font-size:15.5px;line-height:1.6}.maike{z-index:4}.maike .k{color:var(--text-2);margin-bottom:16px;font-size:14px;font-weight:500}.mk-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(48px,6vw,96px);display:grid}.steps{counter-reset:step;gap:18px;max-width:520px;margin-top:30px;list-style:none;display:grid}.steps li{counter-increment:step;color:var(--text-2);padding-left:44px;font-size:15.5px;line-height:1.55;position:relative}.steps li:before{content:counter(step);color:#fff;background:linear-gradient(135deg, var(--g-violet), var(--g-coral));border-radius:50%;place-items:center;width:28px;height:28px;font:600 13px/1 Geist Mono,monospace;display:grid;position:absolute;top:-1px;left:0}.steps b{color:var(--text);font-weight:600}.mk-links{flex-wrap:wrap;gap:0 28px;display:flex}.mk-stage .ui-face{border-radius:6px;box-shadow:0 24px 60px -30px #000000d9}.mk-stage figcaption{color:var(--text-2);margin-top:16px;font-size:13px;line-height:1.5}@media (width<=980px){.pin{margin:0 auto}.ex,.mk-grid{grid-template-columns:minmax(0,1fr)}.ex.flip .ex-stage{order:0}.cr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.cr-grid{grid-template-columns:minmax(0,1fr)}.ex-stage{border-radius:22px;min-height:0;padding:22px 16px}.ex-stage.phone-pair{flex-direction:column}.ex-stage.phone-pair .ui-face:first-child{width:70%}.ex-stage.phone-pair .ui-face:last-child{width:100%}.pin{gap:14px 16px}}
