.code-page{--code-cyan:#68d3d5;--code-violet:#927be8;--code-coral:#ff786d}.code-shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}.code-hero{display:grid;grid-template-columns:1fr .92fr;gap:clamp(42px,8vw,110px);align-items:center;padding:clamp(70px,9vw,125px) 0}.code-hero>div:first-child>span,.code-section-head+span{display:block;color:#627680;font-size:11px;font-weight:750;letter-spacing:.19em}.code-hero h1{margin:22px 0 26px;color:var(--ink);font:700 clamp(50px,7vw,92px)/.92 var(--display);letter-spacing:-.06em}.code-hero h1 em{color:var(--code-cyan);font-style:normal}.code-hero p{max-width:650px;margin:0;color:var(--muted);font-size:clamp(17px,2vw,20px);line-height:1.7}.code-hero-window{overflow:hidden;border:1px solid var(--line);border-radius:24px 48px 28px 38px;background:#071522;box-shadow:0 35px 85px rgba(4,20,34,.2)}.code-hero-window>div{display:flex;align-items:center;gap:7px;height:46px;padding:0 18px;border-bottom:1px solid #263f52;background:#0c1e2d}.code-hero-window>div i{width:8px;height:8px;border-radius:50%;background:#ff776d}.code-hero-window>div i:nth-child(2){background:#f4c56d}.code-hero-window>div i:nth-child(3){background:#6ed5aa}.code-hero-window>div span{margin-left:8px;color:#849aa6;font:600 10px monospace}.code-hero-window pre{min-height:330px;margin:0;padding:40px;color:#afc0c8;font:600 13px/2 monospace;white-space:pre-wrap}.code-hero-window b{color:#82dce0}.code-hero-window em{color:#c0aef5;font-style:normal}.code-hero-window strong{color:#ffd080}.code-hero-window mark{color:#ff9a91;background:transparent}.code-hero-window small{color:#83d7ad;font:inherit}
.code-section{padding:clamp(75px,9vw,120px) 0;border-top:1px solid var(--line)}.code-section.alt{background:var(--paper-2)}.code-section-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,7vw,90px);align-items:end;margin-bottom:42px}.code-section-head h2{margin:0;color:var(--ink);font:700 clamp(38px,5vw,66px)/.98 var(--display);letter-spacing:-.045em}.code-section-head h2 em{color:var(--code-violet);font-style:normal}.code-section-head p{margin:0;color:var(--muted);font-size:18px;line-height:1.7}
.stack-lab{overflow:hidden;border:1px solid #2b485d;border-radius:30px 48px 34px 54px;background:linear-gradient(145deg,#091b2a,#06111e 70%);color:#edf7f7;box-shadow:0 30px 85px rgba(4,20,34,.2)}.stack-lab-head{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:33px 38px;border-bottom:1px solid #284559}.stack-lab-head span{display:block;margin-bottom:8px;color:#70d7da;font:700 10px monospace;letter-spacing:.17em}.stack-lab-head h3{margin:0;font-size:clamp(21px,3vw,31px)}.stack-lab-head button{padding:13px 16px;border:1px solid var(--code-cyan);border-radius:11px;background:var(--code-cyan);color:#071922;font-weight:800;cursor:pointer}.stack-flow{display:grid;grid-template-columns:repeat(9,max-content);align-items:center;justify-content:center;gap:10px;padding:36px 24px;border-bottom:1px solid #274559}.stack-flow>span{color:#466678}.stack-flow button{display:grid;grid-template-columns:29px 1fr;grid-template-rows:auto auto;gap:2px 9px;min-width:135px;padding:13px;border:1px solid #2d4b60;border-radius:13px;background:#0d2233;color:#c5d4da;text-align:left;cursor:pointer;transition:.2s}.stack-flow button i{grid-row:1/3;display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:#152e40;color:#6fd6d9;font:700 9px monospace;font-style:normal}.stack-flow button b{font-size:12px}.stack-flow button small{color:#77909e;font-size:9px}.stack-flow button.active{border-color:#6fd6d9;background:#123444;box-shadow:0 0 22px rgba(104,211,213,.12)}.stack-flow button.active i{background:#6fd6d9;color:#08202a}.stack-detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;padding:36px 38px}.stack-detail>div>span{color:#74dadd;font:700 9px monospace;letter-spacing:.15em}.stack-detail h3{margin:9px 0 12px;font-size:29px}.stack-detail p{color:#9eb2bc;font-size:13px;line-height:1.65}.stack-detail dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.stack-detail dl div{padding-top:12px;border-top:1px solid #2a4659}.stack-detail dt{color:#6e8998;font-size:9px;text-transform:uppercase;letter-spacing:.09em}.stack-detail dd{margin:6px 0 0;color:#d9e5e8;font-size:12px}.stack-detail pre{min-width:0;margin:0;padding:25px;border:1px solid #2b485c;border-radius:16px;background:#05101b;color:#b7dfe0;font:600 12px/1.8 monospace;white-space:pre-wrap;overflow-wrap:anywhere}.stack-status{margin:0;padding:15px 38px;border-top:1px solid #274559;background:#0a1b29;color:#9fb4bd;font-size:12px}
.language-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.language-kinds article{padding:30px;border:1px solid var(--line);border-radius:24px 42px 26px 35px;background:var(--paper-2)}.language-kinds article:nth-child(2){border-radius:40px 22px 38px 26px}.language-kinds span,.tool-grid span{color:#557b85;font:700 10px monospace;letter-spacing:.15em}.language-kinds h3{margin:18px 0 11px;color:var(--ink);font-size:23px}.language-kinds p{color:var(--muted);line-height:1.65}.language-kinds article>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.language-kinds article>div b{padding:7px 9px;border-radius:8px;background:color-mix(in srgb,var(--paper) 82%,var(--code-cyan));color:#367f86;font:700 10px monospace}
.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.tool-grid article{display:flex;min-height:270px;flex-direction:column;padding:25px;border:1px solid var(--line);border-radius:22px 38px 24px 31px;background:var(--paper)}.tool-grid article:nth-child(2n){border-radius:38px 22px 34px 25px}.tool-grid h3{margin:18px 0 10px;color:var(--ink);font-size:25px}.tool-grid p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.tool-grid code{align-self:flex-start;margin-top:auto;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--paper-2) 78%,var(--code-violet));color:#6d59bc;font-size:10px;white-space:normal}
.collaboration-section{background:linear-gradient(140deg,color-mix(in srgb,var(--paper) 94%,var(--code-cyan)),var(--paper))}.collaboration-flow{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr 30px 1fr;align-items:stretch;gap:8px}.collaboration-flow article{padding:25px;border-top:3px solid var(--code-cyan);background:var(--paper-2)}.collaboration-flow article:nth-of-type(2){border-color:var(--code-violet)}.collaboration-flow article:nth-of-type(3){border-color:var(--code-coral)}.collaboration-flow span{color:#478a91;font:700 11px monospace}.collaboration-flow h3{margin:17px 0 10px;color:var(--ink);font-size:19px}.collaboration-flow p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.collaboration-flow>i{align-self:center;color:#79909a;font-style:normal;text-align:center}
html[data-theme=dark] .code-hero h1,html[data-theme=dark] .code-section-head h2,html[data-theme=dark] .language-kinds h3,html[data-theme=dark] .tool-grid h3,html[data-theme=dark] .collaboration-flow h3{color:#f1f7f8}html[data-theme=dark] .language-kinds article,html[data-theme=dark] .tool-grid article,html[data-theme=dark] .collaboration-flow article{background:#0d2031}html[data-theme=dark] .language-kinds article>div b{background:#14323d;color:#85d9dc}html[data-theme=dark] .tool-grid code{background:#202b45;color:#c6b8f5}
@media(max-width:1100px){.stack-flow{grid-template-columns:repeat(5,1fr);gap:8px}.stack-flow>span{display:none}.stack-flow button{min-width:0}.tool-grid{grid-template-columns:repeat(2,1fr)}.collaboration-flow{grid-template-columns:repeat(2,1fr)}.collaboration-flow>i{display:none}}
@media(max-width:820px){.code-hero,.code-section-head,.stack-detail{grid-template-columns:1fr}.code-hero-window{max-width:650px;width:100%;margin:auto}.language-kinds{grid-template-columns:1fr}.stack-lab-head{display:grid}.stack-flow{grid-template-columns:repeat(2,1fr)}.stack-flow button:last-child{grid-column:1/-1}.collaboration-flow{grid-template-columns:1fr}}
@media(max-width:600px){.code-shell{width:min(100% - 28px,1180px)}.code-hero{padding-top:50px}.code-hero-window pre{min-height:280px;padding:28px 20px;font-size:11px}.stack-lab-head,.stack-detail{padding:26px 20px}.stack-flow{padding:24px 16px}.stack-detail dl{grid-template-columns:1fr}.stack-status{padding-inline:20px}.tool-grid{grid-template-columns:1fr}.tool-grid article{min-height:220px}}
@media(prefers-reduced-motion:reduce){.stack-flow button{transition:none}}