.approach-page{--approach-ink:#17191f;--approach-secondary:#656565}.approach-top{display:flex;align-items:center;justify-content:space-between;min-height:88px;color:var(--approach-secondary)}.approach-top,.approach-top .text-link{font-size:14px}.approach-actions{display:flex;align-items:center;gap:32px}.approach-read-mode{display:none;align-items:center;gap:10px;min-height:44px;cursor:pointer}.approach-read-mode input{accent-color:#111;width:16px;height:16px}.approach-scene{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);align-items:center;gap:80px;padding-block:100px}.approach-step{margin:0 0 32px;color:var(--approach-secondary);font-size:14px}.approach-copy :is(h1,h2){margin:0 0 28px;font-size:clamp(42px,4.6vw,66px);line-height:1.07;letter-spacing:-.055em;text-align:left;text-wrap:wrap}.approach-copy h1{font-size:clamp(48px,5.3vw,76px)}.approach-copy>p:not(.approach-step){max-width:440px;font-size:20px;line-height:1.65;margin:0 0 20px}.approach-copy>p.approach-detail{font-size:16px;color:var(--approach-secondary)}.approach-source{font-size:14px;margin-top:8px}.approach-visual{min-width:0}.approach-code{overflow:hidden;background:var(--approach-ink);color:#e6e8ef;border:1px solid #33363d;border-radius:20px;box-shadow:0 24px 64px -32px #17191f40,0 4px 8px #17191f08}.approach-code-head{min-height:62px;padding:10px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #ffffff12;font-size:13px;color:#c3c6cf}.approach-code .copy-button{color:#c3c6cf;flex-shrink:0}.approach-code .copy-button:hover{color:white;background:#ffffff0f}.approach-code-body{overflow-x:auto}.approach-code pre{width:max-content;min-width:100%;padding:32px 28px;font:16px/1.9 var(--font-mono)}.request-caption{display:flex;align-items:center;gap:10px;color:#c3c6cf;font-size:12px;padding:0 28px 24px}.operation-contract{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 12px 0;font-size:13px}.request-caption img{filter:invert(1)}.operation-contract>span{display:inline-flex;align-items:center;gap:12px}.operation-contract>span:last-child{font-family:var(--font-jetbrains-mono),monospace;font-size:12px}.contract-dot{width:7px;height:7px;background:#3f7665;border-radius:50%}.approach-visual-note{margin:24px 0 0;font-size:12px;text-align:center;color:var(--approach-secondary)}.parameter-origin{text-align:center;padding:32px 24px;background:var(--approach-ink);border-radius:18px;color:#f5f5f5;width:78%;margin-inline:auto}.parameter-origin>span{display:block;font-size:13px;color:#c3c6cf;margin-bottom:12px}.parameter-origin code{font:26px/1.6 var(--font-mono)}.parameter-origin code>span{color:#a2a9b7}.parameter-origin b{color:#a7d9cc;font-weight:400}.parameter-branches{height:64px;position:relative;display:flex;margin-inline:25%}.parameter-branches i{position:relative;flex:1;border-top:1px solid #ccc;margin-top:32px}.parameter-branches:before{content:"";position:absolute;left:50%;height:32px;border-left:1px solid #ccc}.parameter-branches i:first-child{border-left:1px solid #ccc;border-top-left-radius:12px}.parameter-branches i:last-child{border-right:1px solid #ccc;border-top-right-radius:12px}.parameter-targets{display:grid;grid-template-columns:1fr 1fr;gap:16px}.parameter-target{border:1px solid #dedee1;border-radius:18px;background:#fff;padding:24px}.parameter-target>div{display:flex;align-items:center;gap:12px;font-size:16px}.parameter-target small{display:block;font-size:12px;color:var(--approach-secondary)}.parameter-target>code{display:block;font:13px/1.6 var(--font-mono);margin-block:30px 18px;white-space:nowrap}.parameter-target>code>span{color:#775241}.parameter-target .approach-source{font-size:12px;margin:0}.protocol-endpoints{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-inline:32px}.protocol-endpoints>div{min-height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:1px solid #e2e2e2;border-radius:18px;background:#fff;font-size:14px}.protocol-branches{display:grid;grid-template-columns:repeat(3,1fr);padding-inline:32px;height:58px}.protocol-branches i{position:relative}.protocol-branches i:before{content:"";position:absolute;height:29px;left:50%;width:50%;border-left:1px solid #ccc;border-bottom:1px solid #ccc;border-bottom-left-radius:12px}.protocol-branches i:last-child:before{left:0;border-left:0;border-right:1px solid #ccc;border-bottom-left-radius:0;border-bottom-right-radius:12px}.protocol-branches i:nth-child(2){border-top:1px solid #ccc;margin-top:28px}.protocol-branches i:nth-child(2):before{top:-29px;height:58px;border-bottom:0;border-radius:0}.code-kind{font-size:11px;color:#a2a9b7}.protocol-code pre{font-size:16px}.transport-route{display:flex;align-items:center;gap:20px;margin:0 18px 32px;font-size:13px}.transport-wire{flex:1;height:1px;background:#dedee1;position:relative}.transport-wire i{position:absolute;top:-3px;left:50%}.transport-response{margin:24px 16px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:13px}.transport-response small{display:block;color:var(--approach-secondary);font:12px/1.9 var(--font-mono);margin-top:6px}.transport-response code{font:15px/1.9 var(--font-mono)}.transport-response code span{color:var(--approach-secondary)}.approach-progress{display:none}.approach-extend{padding-block:140px 120px}.approach-section-heading{text-align:center;max-width:780px;margin:0 auto 70px}.approach-section-heading h2{font-size:clamp(40px,4.8vw,64px);margin:0 0 28px}.approach-section-heading>p:last-child{color:var(--approach-secondary);max-width:640px;margin:auto;font-size:19px;line-height:1.7}.composition{max-width:830px;margin-inline:auto}.composition-parts{display:grid;grid-template-columns:1fr 44px 1fr;gap:24px;align-items:center}.composition-parts>div{border:1px solid #dedee1;border-radius:18px;padding:28px}.part-key{font:12px var(--font-mono);color:var(--approach-secondary)}.composition-parts h3{font-size:25px;margin:18px 0 12px}.composition-parts p{font-size:15px;color:var(--approach-secondary);line-height:1.7}.composition-plus{font-size:32px;text-align:center;color:#999}.composition-join{width:calc(50% + 34px);height:40px;margin:0 auto 40px;border:1px solid #ccc;border-top:0;border-radius:0 0 14px 14px;position:relative}.composition-join:after{content:"";position:absolute;height:40px;width:1px;background:#ccc;left:50%;top:100%}.composition-code pre{padding:32px 44px;font-size:20px}.composition-code .approach-source{margin:0 44px 22px;color:#c3c6cf}.approach-templates{display:grid;grid-template-columns:.9fr 1.25fr;gap:100px;padding-block:80px 160px}.template-intro h2{margin:0 0 28px}.template-intro>p:not(.eyebrow){font-size:17px;line-height:1.75;color:var(--approach-secondary);margin:0 0 18px}.template-list{display:flex;flex-direction:column}.template-list>div{padding:30px 0;border-top:1px solid #e2e2e2}.template-list>div:last-child{border-bottom:1px solid #e2e2e2}.template-list h3{font-size:26px;letter-spacing:-.035em;margin:0 0 12px}.template-list p{font-size:15px;color:var(--approach-secondary);max-width:54ch;margin:0 0 20px}.template-links{display:flex;flex-wrap:wrap;gap:12px 28px}.template-list .text-link{font-size:14px}.approach-closing{background:#111;color:#fff;padding-block:112px}.approach-closing .eyebrow{color:#aaa}.approach-closing h2{margin:0 0 24px;font-size:clamp(44px,5vw,72px)}.approach-closing p:not(.eyebrow){color:#bbb;max-width:610px;margin:0 0 40px;font-size:20px}.approach-closing .site-wrap>div{display:flex;align-items:center;gap:32px;flex-wrap:wrap}@supports (animation-timeline:view()){@media screen and (scripting:enabled) and (min-width:1100px) and (min-height:860px) and (prefers-reduced-motion:no-preference){.approach-read-mode{display:inline-flex}.approach-top{position:sticky;top:89px;z-index:2;min-height:64px;background:#fff}.approach-page:not(:has(#approach-reading[data-reading=true])){.approach-journey{height:480svh;view-timeline:--approach block;view-timeline-inset:89px 0}.approach-stage{--approach-frame:calc(100svh - 153px);position:sticky;top:153px;height:var(--approach-frame);clip-path:inset(0 -48px)}.approach-scene{--caption-start:0%;--caption-end:21%;--panel-motion:approach-first;position:absolute;inset:0;padding-block:28px 76px;visibility:hidden}.approach-visual{animation:var(--panel-motion) linear both;animation-timeline:--approach;animation-range:contain}.approach-copy{animation:approach-caption linear;animation-timeline:--approach;animation-range:contain var(--caption-start) contain var(--caption-end)}.approach-operation .approach-copy{animation-fill-mode:backwards}.approach-parameters{--caption-start:21%;--caption-end:50%;--panel-motion:approach-second}.approach-protocols{--caption-start:50%;--caption-end:79%;--panel-motion:approach-third}.approach-transport{--caption-start:79%;--caption-end:100%;--panel-motion:approach-last}.approach-transport .approach-copy{animation-fill-mode:forwards}.approach-progress{display:flex;position:absolute;bottom:0;left:0;right:0;align-items:center;gap:24px;min-height:72px;background:#fff;z-index:1;font-size:12px;color:var(--approach-secondary)}.approach-progress>div{height:2px;flex:1;background:#eee;overflow:hidden}.approach-progress i{display:block;height:100%;background:#111;transform-origin:left;animation:approach-progress linear both;animation-timeline:--approach;animation-range:contain}.request-code{animation:approach-lift linear both;animation-timeline:--approach;animation-range:contain 0 contain 22%}.protocol-endpoints>div{animation:approach-assemble linear both;animation-timeline:--approach;animation-range:contain 54% contain 66%}.protocol-endpoints>div:first-child{--approach-x:-40px;--approach-turn:-5deg}.protocol-endpoints>div:last-child{--approach-x:40px;--approach-turn:5deg}.transport-wire i{animation:approach-transmit linear both;animation-timeline:--approach;animation-range:contain 82% contain 98%}.parameter-target{animation:approach-map linear both;animation-timeline:--approach;animation-range:contain 28% contain 38%}}}}@keyframes approach-caption{0%,to{visibility:visible}}@keyframes approach-first{0%,13%{visibility:visible;transform:translateY(0)}29%,to{visibility:hidden;transform:translateY(calc((var(--approach-frame) + 100%) / -2))}}@keyframes approach-second{0%,13%{visibility:hidden;transform:translateY(calc((var(--approach-frame) + 100%) / 2))}29%,42%{visibility:visible;transform:translateY(0)}58%,to{visibility:hidden;transform:translateY(calc((var(--approach-frame) + 100%) / -2))}}@keyframes approach-third{0%,42%{visibility:hidden;transform:translateY(calc((var(--approach-frame) + 100%) / 2))}58%,71%{visibility:visible;transform:translateY(0)}87%,to{visibility:hidden;transform:translateY(calc((var(--approach-frame) + 100%) / -2))}}@keyframes approach-last{0%,71%{visibility:hidden;transform:translateY(calc((var(--approach-frame) + 100%) / 2))}87%,to{visibility:visible;transform:translateY(0)}}@keyframes approach-progress{0%{transform:scaleX(0)}}@keyframes approach-lift{to{transform:translateY(-12px)}}@keyframes approach-map{0%{transform:translateY(-20px) scale(.96)}}@keyframes approach-assemble{0%{transform:translate(var(--approach-x,0),-32px) rotate(var(--approach-turn,0deg))}}@keyframes approach-transmit{0%{left:0}to{left:calc(100% - 7px)}}@media (max-width:1250px){.approach-scene{gap:40px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.approach-code pre{font-size:15px;padding-inline:22px}.protocol-code pre{font-size:14px}.parameter-target{padding:20px 16px}.parameter-target>code{font-size:11px}.approach-templates{gap:64px}}@media (max-width:900px){.approach-top{min-height:72px}.approach-scene{grid-template-columns:1fr;max-width:660px;margin-inline:auto;gap:44px;padding-block:64px}.approach-copy{max-width:550px}.approach-copy>p:not(.approach-step){max-width:none}.approach-copy :is(h1,h2){font-size:clamp(40px,7vw,64px)}.approach-code pre{font-size:14px}.parameter-target>code{font-size:12px}.approach-extend{padding-block:96px 64px}.approach-templates{grid-template-columns:1fr;padding-block:64px 96px;gap:40px}.template-intro{max-width:550px}.composition-code pre{font-size:18px}.composition-parts{gap:16px;grid-template-columns:1fr 24px 1fr}.composition-parts>div{padding:22px}.composition-join{width:calc(50% + 20px)}}@media (max-width:540px){.approach-top .text-link{font-size:12px;gap:8px}.approach-top>span{font-size:12px}.approach-step{margin-bottom:22px;font-size:12px}.approach-copy h1{font-size:51px}.approach-copy>p:not(.approach-step){font-size:18px}.approach-copy>p.approach-detail{font-size:15px}.approach-code{border-radius:14px}.approach-code-head{padding-inline:18px;font-size:11px;min-height:54px}.approach-code pre{font-size:13px;padding:24px 16px}.request-caption{padding-inline:16px;font-size:11px}.operation-contract{margin-inline:0;font-size:12px;gap:8px}.operation-contract>span:last-child{font-size:11px}.parameter-origin{width:100%;padding:28px 16px}.parameter-origin code{font-size:22px}.parameter-targets{grid-template-columns:1fr;gap:16px}.parameter-branches{height:32px;margin:0}.parameter-branches i{display:none}.parameter-target{padding:22px}.parameter-target>code{font-size:14px;margin-block:22px 12px}.protocol-endpoints{gap:10px;padding:0}.protocol-endpoints>div{font-size:12px;border-radius:14px;min-height:105px}.protocol-branches{padding-inline:0}.protocol-code pre{font-size:12px}.transport-route{margin-inline:0;font-size:12px}.transport-response{margin-inline:0;font-size:11px;gap:16px}.transport-response code{font-size:12px}.approach-visual-note{font-size:11px}.approach-section-heading{text-align:left;margin-bottom:40px}.approach-section-heading h2{font-size:40px}.approach-section-heading>p:last-child{font-size:17px}.composition-parts{grid-template-columns:1fr;gap:12px}.composition-parts>div{padding:24px}.composition-parts h3{margin-top:12px}.composition-plus{font-size:26px;line-height:1}.composition-join{width:1px;height:32px;border:0;background:#ccc;margin-bottom:0}.composition-join:after{display:none}.composition-code pre{font-size:13px;padding-inline:20px}.composition-code .approach-source{font-size:12px;margin-inline:20px}.template-list>div{padding-block:26px}.template-list h3{font-size:23px}.template-list p{font-size:14px}.approach-closing{padding-block:72px}.approach-closing p:not(.eyebrow){font-size:18px}}@media print{.approach-scene{break-inside:avoid}}