:root{--bg:#f4f1eb;--surface:#e8e3d9;--ink:#16140f;--muted:#69635a;--rule:#d3ccbf;--dot:#c8c0b2;--accent:#e0442b;--accent-ink:#fff;--src-datasheet:#2f5ea8;--src-reference:#2b7a52;--src-design:#b8741a;--on-ink:#fbfaf7;--on-ink-muted:#a9a398;--on-ink-surface:#2a2722;--src-datasheet-on-ink:#93b4ee;--src-reference-on-ink:#7fc9a1;--src-design-on-ink:#e9b868;--font:"Switzer", "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;--step-small:13px;--step-body:clamp(16px, .95rem + .15vw, 17px);--step-lead:clamp(18px, 1rem + .35vw, 20px);--step-head:clamp(26px, 1rem + 1vw, 34px);--column:clamp(400px, 36vw, 720px);--pad:clamp(32px, 3.4vw, 64px);--fade:120px;--gutter:clamp(16px, 2.2vw, 32px);--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--bg)}html.is-translating body{visibility:hidden}body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--step-body);font-kerning:normal;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;line-height:1.5}::selection{background:var(--accent);color:var(--accent-ink)}body:has(#scene:active){-webkit-user-select:none;user-select:none}a{color:inherit;text-underline-offset:.18em;text-decoration:underline;text-decoration-thickness:.07em}a:hover{color:var(--accent)}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#scene{z-index:0;touch-action:pan-y;cursor:grab;width:100%;height:100%;display:block;position:fixed;inset:0}.column{width:calc(var(--column) + var(--fade));z-index:1;pointer-events:none;background:linear-gradient(to right, transparent, var(--bg) var(--fade));transition:opacity .5s;position:fixed;top:0;bottom:0;right:0}body.is-focused .column{opacity:0}#leaders,#labels{pointer-events:none;z-index:1;position:fixed;inset:0}.basis--datasheet{--src:var(--src-datasheet)}.basis--reference{--src:var(--src-reference)}.basis--design{--src:var(--src-design)}.label--datasheet,.part-card__meta[data-basis=datasheet]{--src:var(--src-datasheet-on-ink)}.label--reference,.part-card__meta[data-basis=reference]{--src:var(--src-reference-on-ink)}.label--design,.part-card__meta[data-basis=design]{--src:var(--src-design-on-ink)}.label:before,.basis:before,.part-card__meta:before{content:"";background:var(--src);border-radius:50%;flex:none;width:7px;height:7px}.basis{font-size:var(--step-small);background:var(--surface);color:var(--ink);white-space:nowrap;border-radius:999px;align-items:center;gap:7px;padding:5px 11px 5px 9px;font-weight:500;line-height:1.2;display:inline-flex}.legend{flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none;display:flex}.label{appearance:none;font:500 var(--step-small) / 1 var(--font);color:var(--on-ink);background:var(--ink);white-space:nowrap;will-change:transform, opacity;border:0;border-radius:999px;align-items:center;gap:7px;margin:0;padding:8px 12px 8px 10px;transition:opacity .25s,background-color .15s;display:inline-flex;position:absolute;top:0;left:0}.label.is-live{pointer-events:auto;cursor:pointer}.label.is-live:hover,.label.is-live:focus-visible{background:var(--accent);outline:none}.label.is-live:hover:before,.label.is-live:focus-visible:before{background:var(--accent-ink)}.topbar{z-index:3;padding:calc(18px + var(--safe-top)) calc(var(--gutter) + var(--safe-right)) 18px calc(var(--gutter) + var(--safe-left));pointer-events:none;justify-content:space-between;align-items:center;gap:12px;display:flex;position:fixed;top:0;left:0;right:0}.topbar__name{font-weight:600;font-size:var(--step-body);letter-spacing:-.01em;white-space:nowrap;pointer-events:auto;text-decoration:none}.topbar__end{pointer-events:auto;flex:none;align-items:center;gap:12px;display:flex}.cta-short{display:none}@media (width<=380px){.topbar .cta-long{display:none}.topbar .cta-short{display:inline}}.lang button,.zoom__step{position:relative}.lang button:after,.zoom__step:after{content:"";position:absolute;inset:-6px -4px}.lang{background:var(--surface);border-radius:999px;padding:3px;display:flex}.lang button{appearance:none;min-width:44px;min-height:34px;color:var(--muted);font:500 var(--step-small) / 1 var(--font);white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:0 12px;transition:background-color .15s,color .15s}.lang button:hover{color:var(--ink)}.lang button[aria-pressed=true]{background:var(--bg);color:var(--ink);cursor:default}.button{background:var(--ink);min-height:44px;color:var(--bg);font-weight:500;font-size:var(--step-body);white-space:nowrap;pointer-events:auto;border-radius:999px;align-items:center;padding:0 20px;text-decoration:none;transition:background-color .15s,color .15s,box-shadow .15s,transform .15s;display:inline-flex}.button:hover{background:var(--accent);color:var(--accent-ink)}.button:active{transform:scale(.97)}.button--quiet{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}.button--quiet:hover{background:var(--ink);color:var(--bg)}.progress{left:var(--gutter);z-index:3;flex-direction:column;gap:2px;display:flex;position:fixed;top:50%;transform:translateY(-50%)}.progress button{cursor:pointer;background:0 0;border:0;place-items:center;width:26px;height:26px;margin-left:-9px;padding:0;display:grid;position:relative}.progress button:before{content:"";background:var(--dot);border-radius:50%;width:8px;height:8px;transition:background-color .2s,transform .2s}.progress button:hover:before,.progress button:focus-visible:before{background:var(--ink);transform:scale(1.25)}.progress button[aria-current=true]:before{background:var(--accent);transform:scale(1.4)}.progress__tip{background:var(--ink);width:max-content;max-width:280px;color:var(--on-ink);text-align:left;font-size:var(--step-small);opacity:0;pointer-events:none;border-radius:14px;gap:2px;padding:10px 14px 11px;line-height:1.35;transition:opacity .15s,transform .15s;display:grid;position:absolute;top:50%;left:30px;transform:translate(-6px,-50%)}.progress__tip strong{font-size:14px;font-weight:600}.progress__tip span{color:var(--on-ink-muted)}.progress button:hover .progress__tip,.progress button:focus-visible .progress__tip{opacity:1;transform:translateY(-50%)}.viewer-bar{bottom:calc(22px + var(--safe-bottom));left:calc((100vw - var(--column)) / 2);z-index:3;background:var(--surface);white-space:nowrap;border-radius:999px;align-items:center;gap:18px;padding:6px 8px 6px 20px;transition:left .5s;display:flex;position:fixed;transform:translate(-50%)}body.is-focused .viewer-bar{left:50vw}.viewer-bar__hint{font-size:var(--step-small);color:var(--muted)}.hint-mouse--short,.hint-touch{display:none}@media (width<=1280px){.hint-mouse{display:none}.hint-mouse--short{display:inline}}@media (hover:none){.hint-mouse,.hint-mouse--short{display:none}.hint-touch{display:inline}}.for-touch{display:none}@media (hover:none){.for-mouse{display:none}.for-touch{display:block}}.zoom{align-items:center;gap:8px;display:flex}.zoom__step{background:var(--bg);width:32px;height:32px;color:var(--ink);font:500 18px/1 var(--font);cursor:pointer;border:0;border-radius:50%;transition:background-color .15s,color .15s}.zoom__reset{place-items:center;padding:0;display:grid}.zoom__step:hover{background:var(--ink);color:var(--on-ink)}.zoom .range{width:132px}.zoom output{min-width:44px;font-size:var(--step-small);font-variant-numeric:tabular-nums;text-align:right;padding-right:8px;font-weight:500}.range{--fill:50%;appearance:none;cursor:pointer;background:0 0;height:24px}.range::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--ink) var(--fill), var(--rule) var(--fill));border-radius:2px;height:4px}.range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bg);border:2px solid var(--ink);border-radius:50%;width:18px;height:18px;margin-top:-7px;transition:transform .15s,border-color .15s}.range:hover::-webkit-slider-thumb{border-color:var(--accent);transform:scale(1.12)}.range:focus-visible::-webkit-slider-thumb{border-color:var(--accent);transform:scale(1.12)}.range::-moz-range-track{background:var(--rule);border-radius:2px;height:4px}.range::-moz-range-progress{background:var(--ink);border-radius:2px;height:4px}.range::-moz-range-thumb{background:var(--bg);border:2px solid var(--ink);border-radius:50%;width:14px;height:14px}kbd{background:var(--on-ink-surface);font:inherit;border-radius:4px;padding:3px 6px 2px;line-height:1;display:inline-block}#story{z-index:2;pointer-events:none;position:relative}.step{min-height:100svh;padding:104px var(--pad);justify-content:flex-end;align-items:center;display:flex}.copy{pointer-events:auto;width:calc(var(--column) - 2 * var(--pad));opacity:.2;transition:opacity .5s,transform .5s;transform:translateY(16px)}.step.is-active .copy{opacity:1;transform:none}body.is-focused #story .copy{pointer-events:none;opacity:0!important}h1{font-weight:600;font-size:clamp(40px, calc((var(--column) - 2 * var(--pad)) / 7.9), 88px);letter-spacing:-.045em;margin-bottom:28px;margin-left:-.04em;line-height:.95}.h1-line{white-space:nowrap;display:block}h2{font-weight:600;font-size:var(--step-head);letter-spacing:-.03em;text-wrap:balance;max-width:18ch;margin-bottom:16px;line-height:1.04}.copy p{text-wrap:pretty;max-width:58ch}.copy p+p{margin-top:.9em}html:lang(zh){--step-small:14px;--step-body:clamp(16px, .98rem + .15vw, 17.5px)}html:lang(zh) body{line-height:1.75}html.has-phrases:lang(zh) :is(.copy,.part-card,.progress__tip,.viewer-bar){word-break:keep-all;overflow-wrap:break-word}html:lang(zh) h1{font-size:clamp(34px, calc((var(--column) - 2 * var(--pad)) / 9.6), 80px);letter-spacing:0;margin-bottom:26px;margin-left:-.02em;line-height:1.18}html:lang(zh) h2{letter-spacing:.01em;max-width:13em;margin-bottom:18px;line-height:1.3}html:lang(zh) .lead{letter-spacing:.02em;line-height:1.8;max-width:21em!important}html:lang(zh) .copy p{letter-spacing:.02em;max-width:25em;line-height:1.85}html:lang(zh) .copy p.note{letter-spacing:.01em;line-height:1.7}html:lang(zh) .bom button{font-weight:400}html:lang(zh) .slider{font-size:var(--step-small)}html:lang(zh) .part-card h3{letter-spacing:0;line-height:1.25}html:lang(zh) .part-card dd{letter-spacing:.01em;line-height:1.7}html:lang(zh) .part-card__spec strong{line-height:1.6}html:lang(zh) .progress__tip{line-height:1.5}.lead{font-size:var(--step-lead);line-height:1.45;max-width:36ch!important}.note{font-size:var(--step-small);color:var(--muted)}.copy--outro .note{margin-top:22px}.credit{margin-top:28px!important}.copy .button{margin-top:18px}.kicker{font-size:var(--step-small);color:var(--muted);letter-spacing:.01em;margin-bottom:16px;font-weight:500}.cue{font-size:var(--step-small);color:var(--muted);margin-top:22px}.cue__scroll:before{content:"↓";color:var(--ink);margin-right:8px;display:inline-block}.cue__gesture.for-mouse,.cue__gesture.for-touch{display:none}.chapter-tag{font-size:var(--step-small);color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:10px;font-weight:500;display:none}.bom{gap:2px;margin:18px 0 16px;list-style:none;display:grid}.bom button{width:100%;font:500 var(--step-body) / 1.2 var(--font);color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:8px 0;display:grid}.bom button:hover>span:first-child,.bom button:focus-visible>span:first-child{color:var(--accent)}.bom .basis{justify-self:end}.slider{font-size:var(--step-small);color:var(--muted);align-items:center;gap:14px;margin:22px 0 6px;display:flex}.slider .range{flex:1}.part-card{z-index:4;width:min(380px,100vw - 32px);max-height:calc(100vh - 92px);max-height:calc(100dvh - 92px - var(--safe-bottom));background:var(--ink);color:var(--on-ink);border-radius:20px;flex-direction:column;animation:.3s cubic-bezier(.2,.8,.2,1) card-in;display:flex;position:fixed;bottom:28px;left:72px;box-shadow:0 30px 60px -30px #00000080}.part-card[hidden]{display:none}.part-card__body{overscroll-behavior:contain;border-radius:inherit;scrollbar-width:thin;scrollbar-color:var(--on-ink-muted) transparent;min-height:0;padding:28px 28px 26px;overflow-y:auto}.part-card.has-more .part-card__body{-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),#0000);mask-image:linear-gradient(#000 calc(100% - 40px),#0000)}.part-card.is-scrolled .part-card__body{-webkit-mask-image:linear-gradient(#0000 0,#000 76px);mask-image:linear-gradient(#0000 0,#000 76px)}.part-card.is-scrolled.has-more .part-card__body{-webkit-mask-image:linear-gradient(#0000 0,#000 76px calc(100% - 40px),#0000);mask-image:linear-gradient(#0000 0,#000 76px calc(100% - 40px),#0000)}.part-card h3:focus{outline:none}html.kbd .part-card h3:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}.part-card.part-card--beside{animation:none;bottom:auto}@keyframes card-in{0%{opacity:0;transform:translateY(12px)}}.part-card h3{font-weight:600;font-size:var(--step-head);letter-spacing:-.03em;text-wrap:balance;-webkit-hyphens:none;hyphens:none;padding-right:40px;line-height:1.02}.part-card__meta{font-size:var(--step-small);color:var(--src);align-items:center;gap:8px;margin-top:10px;display:flex}.part-card dl{margin-top:20px}.part-card dt{font-size:var(--step-small);color:var(--on-ink-muted);margin-top:16px}.part-card dt:first-child{margin-top:0}.part-card dd{margin-top:4px;font-size:15px;line-height:1.5}.part-card__spec{background:var(--on-ink-surface);font-size:var(--step-small);color:var(--on-ink-muted);border-radius:12px;margin-top:22px;padding:14px 16px}.part-card__spec strong{color:var(--on-ink);font-variant-numeric:tabular-nums;margin-top:4px;font-size:15px;font-weight:500;line-height:1.45;display:block}.part-card__close{background:var(--on-ink-surface);width:36px;height:36px;color:var(--on-ink);cursor:pointer;z-index:1;border:0;border-radius:50%;font-size:20px;line-height:1;transition:background-color .15s;position:absolute;top:18px;right:18px}.part-card__close:hover{background:var(--accent)}.part-card__hint{font-size:var(--step-small);color:var(--on-ink-muted);margin-top:16px;display:none}.part-card--beside .part-card__hint{display:block}@media (hover:none){.part-card--beside .part-card__hint{display:none}}@media (width<=760px),(width<=1024px) and (orientation:portrait){:root{--column:100vw;--pad:16px}.column{display:none}.topbar{padding:calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) 12px calc(16px + var(--safe-left));gap:8px}.topbar__name{font-size:15px}.button{min-height:40px;padding:0 16px;font-size:15px}.progress{gap:0;top:36%;left:auto;right:2px}.progress__tip{display:none}.viewer-bar{top:calc(62px + var(--safe-top));bottom:auto;left:auto;right:calc(16px + var(--safe-right));gap:10px;padding:4px;transform:none}body.is-focused .viewer-bar{left:auto}.viewer-bar__hint{display:none}.cue__gesture.for-mouse,.cue__gesture.for-touch{margin-top:4px;padding-left:18px;display:block}@media (hover:none){.cue__gesture.for-mouse{display:none}}@media (hover:hover){.cue__gesture.for-touch{display:none}}.chapter-tag{display:block}.kicker{margin-bottom:12px}.cue{margin-top:16px}.zoom{gap:4px}.zoom .range{width:84px}.zoom__step{width:30px;height:30px}.zoom output{min-width:40px;padding-right:6px}.step{--model-min:clamp(200px, 44svh, 460px);padding:var(--model-min) 0 0;justify-content:center;align-items:flex-end}.copy{width:100%;padding:28px calc(16px + var(--safe-right)) calc(32px + var(--safe-bottom)) calc(16px + var(--safe-left));background:var(--bg);position:relative}.copy:before{content:"";background:linear-gradient(to bottom, transparent, var(--bg));pointer-events:none;height:56px;position:absolute;bottom:100%;left:0;right:0}.step[data-step="7"]{min-height:140svh}h1{margin-bottom:16px;font-size:calc(12.6582vw - 4.05063px)}html:lang(zh) h1{font-size:calc(10.4167vw - 3.33333px)}.topbar__end{gap:8px}.lang button{min-width:40px;min-height:32px;padding:0 10px}.part-card,.part-card.part-card--beside{left:calc(16px + var(--safe-left));right:calc(16px + var(--safe-right));bottom:calc(16px + var(--safe-bottom));width:auto;max-height:min(54vh,100vh - 190px);max-height:min(54dvh, calc(100dvh - 190px - var(--safe-top) - var(--safe-bottom)))}.part-card__body{padding:22px 20px 20px}.part-card dl{margin-top:16px}.part-card__spec{margin-top:18px}}@media (width<=600px){.zoom .range{display:none}}@media (prefers-reduced-motion:reduce){.copy,.label,.button,.column,.viewer-bar,.progress__tip{transition:none}.part-card{animation:none}}
