*{box-sizing:border-box}html,body{margin:0}
:root{--ink:#12233E;--cream:#FBF6EC;--hair:rgba(18,35,62,.22);--hair2:rgba(18,35,62,.5);--mut:#44536E;--mut2:#67789A}
body{background:var(--cream);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono)}
a{color:var(--ink)}a:hover{color:var(--ocean-700)}
.wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.mast{border-bottom:1.5px solid var(--ink);position:sticky;top:0;background:var(--cream);z-index:50}
.mastin{max-width:1240px;margin:0 auto;padding:15px 48px;display:flex;align-items:center;gap:34px}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none}
.wm{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.03em}
.mnav{display:flex;gap:26px;margin-left:auto}
.mnav a{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;opacity:.85}
.ver{font-family:var(--font-mono);font-size:11.5px;color:var(--mut2)}
.btn{display:inline-block;background:var(--ink);color:var(--cream);font-weight:600;font-size:14.5px;padding:11px 22px;border-radius:4px;text-decoration:none;border:1.5px solid var(--ink)}
.btn:hover{background:transparent;color:var(--ink)}
button.instmain.copy{font-family:var(--font-mono);font-size:14px;font-weight:500;background:var(--ink);color:var(--cream);border:1.5px solid var(--ink);border-radius:4px;padding:14px 22px;cursor:pointer;transition:box-shadow .18s ease}
button.instmain.copy b{color:var(--sun-500,#F6A81C);font-weight:700}
button.instmain.copy:hover{box-shadow:0 0 0 3px var(--cream),0 0 0 4.5px var(--ink)}
button.instmain.copy:active{box-shadow:0 0 0 2px var(--cream),0 0 0 3px var(--ink)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:var(--ink);color:var(--cream);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;padding:12px 20px;border-radius:4px;opacity:0;pointer-events:none;z-index:60;transition:opacity .25s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .ok{color:var(--palm-400,#7FC98F);font-weight:700}
@media (prefers-reduced-motion: reduce){.toast{transition:opacity .2s ease}button.instmain.copy{transition:none}}
h1{font-family:var(--font-display);font-weight:700;font-size:clamp(62px,8.6vw,120px);line-height:.98;letter-spacing:-.045em;margin:30px 0 0;padding-bottom:34px;border-bottom:1.5px solid var(--ink)}
.sky{position:relative;margin:40px 0 8px}
.lede{font-size:19px;line-height:1.6;color:var(--mut);max-width:52ch;margin:30px 0 0}
figure{margin:0}
.figsun{width:130px}
figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--mut2);border-top:1px solid var(--hair);padding-top:9px;margin-top:10px}
.ctarow{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:38px 0 46px}
.ulink{font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:5px}
.inst{font-family:var(--font-mono);font-size:13px;color:var(--mut)}.inst b{color:var(--ocean-700);font-weight:700}
.copy{background:none;cursor:pointer;text-align:left}
button.inst.copy{border:1px solid var(--hair2);padding:12px 18px;color:var(--ink)}
.copy:hover{border-color:var(--ink)}
.cphint{opacity:.45;margin-left:8px}
.copy.did .cphint{opacity:1;color:var(--ocean-700)}
.spec{border:1.5px solid var(--ink);margin-bottom:86px}
.spechead{display:flex;justify-content:space-between;gap:16px;padding:10px 18px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid var(--hair);background:#F5EEDD}
.spechead .ok{color:var(--palm-600)}
.spechead .err{color:var(--coral-600)}
/* --- the hero playground, animated --- */
.pged pre{padding:18px 24px 22px 0;line-height:1.7;font-size:13px}
.pgl{display:grid;grid-template-columns:54px 1fr;min-height:1.7em}
.pgn{text-align:right;padding-right:16px;color:var(--mut2);opacity:.55;font-size:11px;user-select:none;transform:translateY(.14em)}
.pgn.gerr{color:var(--coral-600);opacity:1;font-weight:700}
.pgt{white-space:pre;min-width:0}
.sqg{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'%3E%3Cpath d='M0 3.2 Q3.5 0.6 7 3.2 T14 3.2' fill='none' stroke='%23F04E2C' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 100%/14px 6px;padding-bottom:3px}
.sel{background:var(--sky-200)}
.pgcar{display:inline-block;width:2px;height:1.15em;background:var(--ink);vertical-align:text-bottom;margin-left:1px;animation:pgblink 1.06s steps(1) infinite}
@keyframes pgblink{50%{opacity:0}}
.pgstage{position:relative}
.pgcur{position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .3s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.pgcur.on{opacity:1}
.pgring{position:absolute;z-index:5;width:26px;height:26px;border:2px solid var(--ink);border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none}
.pgring.go{animation:pgring .5s ease-out}
@keyframes pgring{0%{opacity:.75;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
.pgpop{position:absolute;z-index:7;max-width:400px;background:var(--code-bg);border:1.5px dotted var(--coral-600);padding:11px 14px;font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--mut);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.pgpop.on{opacity:1;transform:none}
.pgpop b{color:var(--coral-600)}
.pgpop.adv{border-color:var(--gold-600,#D9860A)}
.pgpop.adv b{color:var(--gold-700,#AE6A05)}
.adv-ul{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'%3E%3Cpath d='M0 3.2 Q3.5 0.6 7 3.2 T14 3.2' fill='none' stroke='%23D9860A' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 100%/14px 6px;padding-bottom:3px}
.pgstat .advt{color:var(--gold-700,#AE6A05)}
.pgscore{position:absolute;top:16px;right:22px;z-index:4;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:29px;color:var(--ink);border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;background:var(--cream);transform:rotate(-6deg) scale(.6);opacity:0;transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1)}
.pgscore.on{opacity:1;transform:rotate(-6deg) scale(1)}
.pgstat{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--hair);padding:9px 16px;font-family:var(--font-mono);font-size:11.5px;color:var(--mut2);background:var(--cream-2)}
.pgstat .ok{color:var(--palm-600)}.pgstat .err{color:var(--coral-600)}
@media (prefers-reduced-motion: reduce){.pgcur,.pgring,.pgpop{display:none!important}.pgcar{display:none}}
pre{margin:0;font-family:var(--font-mono);font-size:13.5px;line-height:1.78;white-space:pre;color:var(--code-text);padding:24px 28px;background:var(--code-bg);overflow-x:auto}
.t-sec{color:var(--code-section);font-weight:700}.t-imp{color:var(--code-import);font-weight:700}.t-op{color:var(--code-operator)}.t-str{color:var(--code-string)}.t-dec{color:var(--code-declaration);font-weight:700}.t-mod{color:var(--code-modal);font-weight:700}.t-neg{color:var(--code-negate);font-weight:700}.t-ctl{color:var(--code-control);font-weight:700}.t-ref{color:var(--code-ref)}
.shorebrk{overflow:hidden}
.shorebrk svg{width:100%;height:auto;display:block}
.sec{padding:88px 0 0}
.shead{display:flex;align-items:baseline;gap:20px;border-bottom:1px solid var(--hair);padding-bottom:16px;margin-bottom:40px}
.snum{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ocean-700)}
h2{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;line-height:1.05;margin:0}
.figs2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.figbox{border:1px solid var(--hair2)}
.figs2 .figbox{min-width:0}
.figbox .cap{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--hair)}
.cap .no{color:var(--coral-600);font-weight:700}.cap .yes{color:var(--palm-600);font-weight:700}
.figbox.dim pre{opacity:.58}
.note{padding:12px 14px;border-top:1px dotted var(--hair2);font-size:13.5px;line-height:1.55;color:var(--mut)}
.trow{display:grid;grid-template-columns:64px 280px 1fr 120px;gap:18px;align-items:baseline;padding:22px 6px;border-bottom:1px solid var(--hair)}
.trow:first-of-type{border-top:1.5px solid var(--ink)}
.tnum{font-family:var(--font-mono);font-size:13px;color:var(--ocean-700);font-weight:700}
.tname{font-family:var(--font-display);font-weight:600;font-size:17.5px;letter-spacing:-.01em}
.tdesc{font-size:15px;color:var(--mut);line-height:1.5}
.tstat{font-family:var(--font-mono);font-size:12px;text-align:right}
.tstat.ok{color:var(--palm-600)}.tstat.beta{color:var(--twilight-600,#6F4FCB)}
.proc{display:grid;grid-template-columns:1fr 430px;gap:56px;align-items:start}
.procfigs{display:grid;gap:24px}
.step{border-left:1.5px solid var(--ink);padding:0 0 36px 28px;position:relative}
.step:last-child{padding-bottom:6px}
.step .pn{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ocean-700);letter-spacing:.08em}
.step h3{font-family:var(--font-display);font-weight:600;font-size:21px;margin:6px 0 8px;letter-spacing:-.015em}
.step p{font-size:15px;line-height:1.55;color:var(--mut);margin:0;max-width:52ch}
.proc .figbox pre{font-size:12.5px;line-height:1.9;padding:18px 20px}
.wave{display:block;width:100%;height:24px;margin-top:88px}
.colo{border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:6px;text-align:center;padding:70px 40px;margin:96px 0}
.colo h2{font-size:clamp(34px,4.4vw,52px)}
.colo p{color:var(--mut);font-size:16px;margin:14px 0 0}
.colo .instmain,.colo tg-install-cta{margin:26px 0 0}.colo tg-install-cta tg-install{margin:0}
.colo .btn{margin:26px 10px 0}
/* --- FAQ --- */
.faqsec{padding:92px 0 0}
.faqlist{border-top:1.5px solid var(--ink);margin-top:2px}
details.faq{border-bottom:1px solid var(--hair)}
details.faq>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:24px;padding:22px 4px;font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.35;letter-spacing:-.012em;color:var(--ink);transition:color .18s ease}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary::after{content:"+";margin-left:auto;flex:none;align-self:center;font-family:var(--font-mono);font-weight:400;font-size:26px;line-height:1;color:var(--ocean-700);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
details.faq[open]>summary::after{transform:rotate(45deg)}
details.faq>summary:hover{color:var(--ocean-700)}
details.faq .ans{padding:2px 48px 26px 4px;max-width:76ch}
details.faq .ans p{margin:0 0 12px;font-size:15.5px;line-height:1.62;color:var(--mut)}
details.faq .ans p:last-child{margin:0}
details.faq .ans code{font-family:var(--font-mono);font-size:.88em;background:var(--code-bg);color:var(--code-text);padding:2px 6px;border-radius:3px}
details.faq .ans a{color:var(--ocean-700);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){details.faq>summary{font-size:16.5px;gap:16px;padding:18px 2px}details.faq .ans{padding:2px 6px 22px 2px}}

.tdone .ok{color:var(--palm-600);font-weight:700}

footer{border-top:1.5px solid var(--ink);padding:42px 0 34px}
.fgrid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.fcol h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin:0 0 12px}
.fcol a{display:block;font-size:14px;text-decoration:none;margin-bottom:8px;opacity:.85}
.ftiny{display:flex;justify-content:space-between;gap:20px;font-family:var(--font-mono);font-size:11px;color:var(--mut2);border-top:1px solid var(--hair);margin-top:36px;padding-top:16px}
@media(max-width:920px){.figs2,.proc{grid-template-columns:1fr}.trow{grid-template-columns:44px 1fr;grid-auto-rows:auto}}

.fn{font-family:var(--font-mono);font-size:.55em;color:var(--ocean-700);vertical-align:super;margin-left:2px;font-weight:700}
.fnotes{border-top:1px solid var(--hair);margin-top:84px;padding-top:20px;display:grid;gap:9px;max-width:56ch}
.fnrow{display:flex;gap:12px;align-items:baseline}
.fnrow span{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--ocean-700)}
.fnrow p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mut2)}
.trow{transition:background .2s ease}
.trow:hover{background:#F5EEDD}
.trow:hover .tnum{color:var(--ink)}
.term .tl{display:inline}
.caret{display:inline-block;width:9px;height:15px;background:var(--ink);margin-left:3px;vertical-align:middle;opacity:0}
@media (prefers-reduced-motion: no-preference){
  html.jsrv .sunfig circle,html.jsrv .sunfig line{stroke-dasharray:1;stroke-dashoffset:1;fill:none}
  .figsun.in .sunfig circle{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s ease .15s}
  .figsun.in .sunfig line{stroke-dashoffset:0;transition:stroke-dashoffset .45s ease}
  .figsun.in .sunfig line:nth-of-type(1){transition-delay:1.15s}.figsun.in .sunfig line:nth-of-type(2){transition-delay:1.27s}.figsun.in .sunfig line:nth-of-type(3){transition-delay:1.39s}.figsun.in .sunfig line:nth-of-type(4){transition-delay:1.51s}.figsun.in .sunfig line:nth-of-type(5){transition-delay:1.63s}.figsun.in .sunfig line:nth-of-type(6){transition-delay:1.75s}.figsun.in .sunfig line:nth-of-type(7){transition-delay:1.87s}.figsun.in .sunfig line:nth-of-type(8){transition-delay:1.99s}
  html.jsrv .wave path{stroke-dasharray:1;stroke-dashoffset:1}
  .sec.in .wave path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease .3s}
  html.jsrv .figs2 .figbox{opacity:0;translate:0 18px}
  .sec.in .figs2 .figbox{opacity:1;translate:0 0;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.2,1)}
  .sec.in .figs2 .figbox:nth-child(2){transition-delay:.15s}
  html.jsrv .trow{opacity:0;translate:0 14px}
  .sec.in .trow{opacity:1;translate:0 0;transition:opacity .5s ease,translate .5s ease,background .2s ease}
  .sec.in .trow:nth-of-type(2){transition-delay:.08s}.sec.in .trow:nth-of-type(3){transition-delay:.16s}.sec.in .trow:nth-of-type(4){transition-delay:.24s}
  html.jsrv .step{opacity:0;translate:0 14px}
  .sec.in .step{opacity:1;translate:0 0;transition:.55s ease}
  .sec.in .step:nth-of-type(2){transition-delay:.14s}.sec.in .step:nth-of-type(3){transition-delay:.28s}
  html.jsrv .term .tl{opacity:0}
  .sec.in .term .tl{opacity:1;transition:opacity .25s ease}
  .sec.in .term .tl:nth-of-type(1){transition-delay:.5s}.sec.in .term .tl:nth-of-type(2){transition-delay:1.15s}.sec.in .term .tl:nth-of-type(3){transition-delay:1.8s}.sec.in .term .tl:nth-of-type(4){transition-delay:2.45s}
  .sec.in .caret{animation:tgblink 1.05s steps(2,start) infinite;transition:opacity .2s ease 2.8s;opacity:1}
  html.jsrv .colo{opacity:0;translate:0 18px}
  html.jsrv .colo.in{opacity:1;translate:0 0;transition:.65s ease}
  .ulink,.mnav a{transition:color .18s ease}
  @keyframes tgblink{50%{opacity:0}}
}

.t-com{color:var(--code-comment);font-style:italic}
html.jsrv .sk [pathlength]{stroke-dasharray:1;stroke-dashoffset:1}
html.jsrv .sec.in .sk [pathlength]{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease}
html.jsrv .sec.in .sk [pathlength]:nth-child(2){transition-delay:.25s}
html.jsrv .sec.in .sk [pathlength]:nth-child(3){transition-delay:.5s}
html.jsrv .sec.in .sk [pathlength]:nth-child(4){transition-delay:.7s}
html.jsrv .sec.in .sk [pathlength]:nth-child(5){transition-delay:.9s}
.seclede{font-size:16px;color:var(--mut);margin:-18px 0 30px;max-width:60ch;line-height:1.55}
.pglink{font-family:var(--font-mono);color:var(--ocean-700);font-weight:700;text-decoration:none;white-space:nowrap}
.pglink:hover{text-decoration:underline;text-underline-offset:3px}
.shead .sk{margin-left:auto;flex:none}

.wrap{position:relative}
.gulls{position:absolute;inset:0;pointer-events:none;z-index:3}
.gull{position:absolute;will-change:transform}
.gsvg{display:block;stroke:#12233E;stroke-width:2;fill:none;stroke-linecap:round}
.ghostwm{font-family:var(--font-display);font-weight:800;font-size:clamp(72px,13vw,170px);line-height:.92;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(18,35,62,.32);text-align:center;margin:10px 0 26px;user-select:none}
.shore{margin:0 0 44px;border-bottom:1px solid var(--hair);padding-bottom:8px}
.shore svg{width:100%;display:block}
@media (prefers-reduced-motion: no-preference){
  .gull{animation:tgg var(--gt,14s) ease-in-out infinite alternate}
  .sk.ball{transform-origin:50% 88%;animation:tgrock 7s ease-in-out infinite alternate}
  html.jsrv .gulls [pathlength]{stroke-dasharray:1;stroke-dashoffset:1}
  html.jsrv .gulls.in [pathlength]{stroke-dashoffset:0;transition:stroke-dashoffset .8s ease .2s}
  html.jsrv .shore [pathlength]{stroke-dasharray:1;stroke-dashoffset:1}
  html.jsrv footer.in .shore [pathlength]{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease}
  html.jsrv footer.in .shore [pathlength]:nth-child(2n){transition-delay:.3s}
  html.jsrv footer.in .shore [pathlength]:nth-child(3n){transition-delay:.55s}
  html.jsrv footer.in .shore [pathlength]:nth-child(5n){transition-delay:.8s}
  html.jsrv .shorebrk [pathlength]{stroke-dasharray:1;stroke-dashoffset:1}
  html.jsrv .shorebrk.in [pathlength]{stroke-dashoffset:0;transition:stroke-dashoffset 1s ease}
  html.jsrv .shorebrk.in [pathlength]:nth-child(2n){transition-delay:.3s}
  html.jsrv .shorebrk.in [pathlength]:nth-child(3n){transition-delay:.55s}
  html.jsrv .ghostwm{opacity:0;translate:0 24px}
  html.jsrv footer.in .ghostwm{opacity:1;translate:0 0;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1)}
  @keyframes tgg{from{translate:0 0}to{translate:22px -10px}}
  @keyframes tgrock{from{rotate:-6deg}to{rotate:6deg}}
}

.crsl{display:grid;grid-template-columns:300px 1fr;gap:16px 40px;align-items:start}
.crtabs{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.crtab{position:relative;display:flex;align-items:baseline;gap:10px;background:none;border:0;border-bottom:1px solid var(--hair);padding:13px 12px 14px;font-family:inherit;color:var(--ink);cursor:pointer;text-align:left}
.crn{font-family:var(--font-mono);font-size:10.5px;opacity:.5}
.crt{font-size:14px;font-weight:600;letter-spacing:-.01em}
.crtab:hover{background:rgba(18,35,62,.045)}
.crtab.on{background:var(--ink);color:var(--paper,#FDFBF6)}
.crtab.on .crn{opacity:.65}
.crp{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ocean-600,#1285E9)}
.crtab.on .crp{animation:crprog 5.6s linear forwards}
#crsl.manual .crp,#crsl.idle .crp{animation:none}
@keyframes crprog{to{width:100%}}
.crview{display:grid;overflow:hidden;transition:height .45s cubic-bezier(.2,.7,.2,1)}
.crhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px 18px;margin:2px 0 20px;flex-wrap:wrap}
.crhead h3{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;line-height:1.2;margin:0}
.crfeat{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut2);white-space:nowrap}
.lchips{display:flex;flex-direction:column;gap:9px;margin:0 0 24px}
.lrow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 12px;align-items:baseline}
.lrow:not(:has(.lgrp)){grid-template-columns:minmax(0,1fr)}
.lchipset{display:flex;flex-wrap:wrap;gap:8px 10px}
.lgrp{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);min-width:150px;flex:none}
.lchip{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--hair2);background:none;padding:9px 14px;cursor:pointer;color:var(--mut)}
.lchip:hover{border-color:var(--ink);color:var(--ink)}
.lchip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.lz{display:none;position:relative}
.lz.on{display:block;animation:lzin .45s cubic-bezier(.2,.7,.2,1)}
@keyframes lzin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.lz.on{animation:none}}
.lens{position:relative}
.bkfig{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--mut);border:1px solid var(--hair2);background:var(--cream-2,#F5EEDD);padding:8px 13px;margin:0 0 26px}
.bkline{font-family:var(--font-mono);font-size:clamp(14.5px,1.96vw,23px);line-height:1.6;color:var(--ink);margin:0}
.seg{display:inline-block;vertical-align:baseline;position:relative;padding-bottom:10px}
.segt{display:block;white-space:pre;line-height:1.35}
.seg[data-lab]::after{content:"";position:absolute;left:1px;bottom:2px;width:calc(100% - 3px);height:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M-18 4.5 Q-13.5 1.2 -9 4.5 T0 4.5 T9 4.5 T18 4.5 T27 4.5 T36 4.5' fill='none' stroke='%2312233E' stroke-width='2' opacity='.8'/%3E%3C/svg%3E") repeat-x 0 50%;background-size:18px 9px}
.seg.e[data-lab]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M-18 4.5 Q-13.5 1.2 -9 4.5 T0 4.5 T9 4.5 T18 4.5 T27 4.5 T36 4.5' fill='none' stroke='%23F04E2C' stroke-width='2' opacity='.9'/%3E%3C/svg%3E")}
.seg.w[data-lab]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M-18 4.5 Q-13.5 1.2 -9 4.5 T0 4.5 T9 4.5 T18 4.5 T27 4.5 T36 4.5' fill='none' stroke='%23D9860A' stroke-width='2' opacity='.9'/%3E%3C/svg%3E")}
.bklead{position:absolute;inset:0;pointer-events:none;overflow:visible}
.bklead path{stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.bklad{list-style:none;margin:2px 0 14px;padding:0;position:relative}
.bklad li{font-family:var(--font-mono);font-size:11.5px;line-height:1.5;color:var(--mut)}
.bklad.laddered li{position:absolute;white-space:nowrap;margin:0}
.bklad.laddered .bw,.bklad.laddered .bws{display:none}
.bklad:not(.laddered) li{padding:3px 0}
.bklad:not(.laddered) .bw{color:var(--ink);font-weight:700}
.bkverdict{font-family:var(--font-mono);font-size:13px;margin:6px 0 0;color:var(--mut)}
.bkverdict .no{color:var(--coral-600);font-weight:700}.bkverdict .yes{color:var(--palm-600);font-weight:700}
.bknote{font-size:15px;line-height:1.6;color:var(--mut);max-width:64ch;margin:22px 0 0}
.lzgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 46px;align-items:start}
.wfh{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.5vw,30px);letter-spacing:-.02em;margin:0}
.pgcta{margin-top:70px;border:1.5px solid var(--ink);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.pgcta p{margin:8px 0 0;color:var(--mut);font-size:15px;line-height:1.55;max-width:58ch}
.pgcta .btn{flex:none}
.crs{grid-area:1/1;align-self:start;visibility:hidden;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s .5s}
.crs.on{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.crs .figbox.dim{border:1.5px dotted var(--hair2)}
.crs .figbox:not(.dim){border:1.5px solid var(--ink)}
@media (prefers-reduced-motion: reduce){.crtab.on .crp{animation:none}.crs,.crs.on{transition:none}.crview{transition:none}}
@media (max-width:1220px){.crsl{grid-template-columns:1fr}.crtabs{flex-direction:row;flex-wrap:wrap;margin-bottom:16px}.crtab{flex:1 1 32%}}
@media (max-width:640px){.crtab{flex:1 1 46%}}

.ghstar{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;text-decoration:none;border:1px solid var(--hair2);padding:6px 11px;color:var(--ink)}
.ghstar:hover{border-color:var(--ink);color:var(--ink)}
.ghstar b{font-weight:700}
.ghstar .st{opacity:.5}
@media (max-width:760px){.ghstar{display:none}}

/* ---- responsive rails: 920 (tablet) · 640 (phone) ---- */
@media (max-width:920px){
  .wrap{padding:0 28px}
  .mastin{padding:13px 28px;gap:20px}
  .sec{padding:64px 0 0}
  h1{font-size:clamp(46px,10.5vw,120px)}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .mastin{padding:11px 20px;gap:14px}
  .mnav{display:none}
  .btn{padding:9px 14px;font-size:13px}
  h1{font-size:clamp(38px,11.5vw,120px);padding-bottom:24px;margin-top:18px}
  .lede{font-size:16.5px}
  .ctarow{gap:16px;margin:28px 0 36px}
  button.instmain.copy{font-size:11.5px;padding:12px 13px;white-space:nowrap}
  .figsun{width:96px}
  .figsun svg{width:96px !important}
  .sky{margin:24px 0 8px}
  .spec{margin-bottom:60px}
  .spechead{font-size:10px;padding:9px 12px}
  .pged pre{font-size:11px;line-height:1.65;padding:12px 14px 14px 0}
  .pgl{grid-template-columns:34px 1fr}
  .pgn{padding-right:8px}
  .pgpop{max-width:calc(100vw - 64px);font-size:11px}
  .pgscore{width:40px;height:40px;font-size:22px;top:10px;right:12px}
  .pgstat{font-size:10px;gap:6px;padding:8px 12px}
  .seclede{font-size:15px}
  .crtab{flex:1 1 100%}
  .lrow{grid-template-columns:1fr;gap:4px 10px}
  .lchip{padding:8px 11px;font-size:10px}
  .bkline{line-height:1.5}
  .colo{padding:44px 20px;margin:64px 0}
  .rtchat{height:380px;padding:14px 12px}
  .msg{max-width:86%;font-size:13px;padding:9px 12px}
  .rtpre{font-size:10.5px;overflow-x:auto}
  .rtpre .pgl{grid-template-columns:28px 1fr}
  .rttabnote{display:none}
  .ghostwm{-webkit-text-stroke-width:1px}
  .fnotes{margin-top:56px}
  .fgrid{gap:26px}
  .ftiny{flex-direction:column;gap:8px}
}
.rtfig{border:1.5px solid var(--ink)}
.rtfig .cap{background:#F5EEDD}
.rtgrid{display:grid;grid-template-columns:430px 1fr;align-items:stretch}
.rtp{border-right:1px solid var(--hair);font-family:var(--font-mono);font-size:12px;line-height:1.5;background:var(--code-bg);display:flex;flex-direction:column}
.rttabs{display:flex;align-items:stretch;border-bottom:1px solid var(--hair);background:#EFE7D2;font-family:var(--font-mono);font-size:11px}
.rttab{padding:8px 14px;background:var(--code-bg);border-right:1px solid var(--hair);color:var(--ink);font-weight:700}
.rttabnote{margin-left:auto;align-self:center;padding:0 10px;color:var(--mut2);font-size:10px}
.rtpre{margin:0;padding:10px 10px 12px 0;background:var(--code-bg);font-family:var(--font-mono);font-size:11.5px;line-height:1.85;overflow:hidden;white-space:pre;color:var(--code-text)}
.rtpre .pgl{grid-template-columns:36px 1fr;min-height:1.85em}
.rtpre .pgn{font-size:10px;padding-right:9px;border-right:1px solid var(--hair);margin-right:9px}
.rtpre .pgl.ladd{background:#E7F0DC}
.rtpre .pgl.ladd .pgn{color:var(--palm-600);opacity:1;font-weight:700}
.rtpre .pgl.lrem{background:#F9E6DE}
.rtpre .pgl.lrem .pgn{color:var(--coral-600);opacity:1;font-weight:700}
.rtpre .pgl.lrem .pgt{text-decoration:line-through;text-decoration-thickness:1px;opacity:.8}
.rtpre .pgl.lout{display:none}
.rtphead{color:var(--code-comment);font-style:italic;padding:2px 8px 10px}
.rtprow{display:flex;justify-content:space-between;gap:12px;padding:7px 8px;border-top:1px dotted var(--hair)}
.rtprow .v{color:var(--mut2);text-align:right;flex:none}
.rtprow.on .v{color:var(--palm-600);font-weight:700}
.rtprow.off{opacity:.55}
.rtprow.flash{animation:rtflash .9s ease}
@keyframes rtflash{0%{background:var(--sky-200)}100%{background:transparent}}
.rtptot{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--hair);color:var(--ink);font-weight:700}
.rtpfoot{padding:6px 8px 0;color:var(--mut2);font-size:11px;line-height:1.5}
.rts{position:relative;background:#FFFDF9;border:1px solid var(--hair);padding:6px 78px 6px 8px;margin:0 0 6px;transition:background .45s ease,border-color .45s ease,opacity .45s ease}
.rts .rtag{display:block;color:var(--code-section);font-weight:700}
.rts .rbody{padding:2px 0 2px 14px;color:var(--code-text)}
.rts.add{background:#E7F0DC;border-color:var(--palm-600)}
.rts.rem{background:#F9E6DE;border-color:var(--coral-600)}
.rts.rem .rbody,.rts.rem .rtag{text-decoration:line-through;text-decoration-thickness:1px;opacity:.75}
.rts.out{display:none}
.rbadge{position:absolute;top:7px;right:8px;font-size:10px;letter-spacing:.08em;font-weight:700;text-transform:uppercase}
.rts.add .rbadge{color:var(--palm-600)}
.rts.rem .rbadge{color:var(--coral-600)}
.rtchat{height:470px;display:flex;flex-direction:column;gap:10px;padding:18px 20px;overflow-y:auto}
.msg{max-width:74%;padding:10px 14px;font-size:14px;line-height:1.5;border:1px solid var(--hair2);border-radius:2px}
.msg.u{align-self:flex-end;background:var(--ink);color:var(--cream);border-color:var(--ink)}
.msg.a{align-self:flex-start;background:var(--cream)}
.mchip{align-self:center;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--mut);border:1px dotted var(--hair2);padding:6px 12px;background:var(--cream-2)}
.mchip .no{color:var(--coral-600);font-weight:700}
.mchip .ok{color:var(--palm-600);font-weight:700}
.rtm{transition:opacity .45s ease,translate .45s cubic-bezier(.2,.7,.2,1)}
.rtm.hid{display:none}
.rtm.pre{opacity:0;translate:0 12px}
.rtvals{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;margin-top:30px}
.rtv{margin:0;font-size:14.5px;line-height:1.55;color:var(--mut)}
.rtv b{color:var(--ink)}
@media(max-width:920px){.rtgrid{grid-template-columns:minmax(0,46%) minmax(0,1fr)}.rtpre{font-size:11px;overflow-x:auto}.rtpre .pgl{grid-template-columns:26px 1fr}.rttabnote{display:none}.rtvals{grid-template-columns:1fr}}

.hiw{height:340vh}
.hiwstick{position:sticky;top:84px;padding-top:6px}
.hiweye{display:flex;align-items:center;gap:22px;margin:0 0 20px}
.hkick{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut2);white-space:nowrap}
.hbar{display:flex;gap:6px;flex:1;max-width:340px}
.hseg{flex:1;height:3px;background:var(--hair);position:relative;overflow:hidden}
.hseg b{position:absolute;inset:0;width:0;background:var(--ink)}
.hiwrail{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px}
.hrph{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--hair2);background:none;padding:10px 16px;cursor:pointer;color:var(--mut);display:inline-flex;gap:8px;align-items:baseline}
.hrph span{opacity:.5;font-size:10px}
.hrph:hover{border-color:var(--ink);color:var(--ink)}
.hrph.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
#hiwh2{transition:opacity .28s ease,translate .28s ease}
.hiwswap #hiwh2{opacity:0;translate:0 8px}
#lens .lchips{margin:0}
#lensopt .lchips{margin:0}
@media(max-width:920px){.hiwstick{top:72px}}
@media (prefers-reduced-motion: reduce){#hiwh2{transition:none}}

/* --- IDE framing for the lens examples --- */
.lens{border:1.5px solid var(--ink);background:var(--code-bg)}
.lens .lchips{display:block;background:#EFE7D2;border-bottom:1px solid var(--hair);overflow-x:auto}
.lens .lrow{gap:0}
.lens .lchipset{gap:0;flex-wrap:wrap}
.lens .lchip{border:0;border-right:1px solid var(--hair);padding:10px 15px;font-size:10.5px;letter-spacing:.04em;text-transform:none;color:var(--mut);white-space:nowrap}
.lens .lchip:hover{color:var(--ink);background:rgba(18,35,62,.05)}
.lens .lchip.on{background:var(--code-bg);color:var(--ink);font-weight:700;box-shadow:inset 0 2px 0 var(--ink)}
.lens .bkfig{display:inline-block;border:0;background:none;margin:0;padding:14px 18px 0 60px;color:var(--mut2)}
.lens .lzmain{position:relative;padding:8px 18px 2px 0;counter-reset:tgline}
.lens .lzmain::before{content:"";position:absolute;left:40px;top:10px;bottom:6px;width:1px;background:var(--hair)}
.lens .bkline{position:relative;padding:7px 0 7px 60px;counter-increment:tgline}
.lens .bkline::before{content:counter(tgline);position:absolute;left:0;top:7px;width:32px;text-align:right;font-family:var(--font-mono);font-size:11px;line-height:calc(clamp(14.5px,1.96vw,23px)*1.6);color:var(--mut2);font-weight:400}
.lens .bklad{padding-left:60px}
.lens .bklad.laddered{padding-left:0}
.lens .bknote{font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:var(--code-comment);font-style:italic;padding:12px 18px 6px 60px;margin:0;max-width:none}
.lens .bknote::before{content:"// "}
.lens .bknote .mono{font-style:normal}
@media(max-width:640px){.lens .bkline{padding-left:42px}.lens .bkline::before{width:26px;line-height:1.6}.lens .lzmain::before{left:32px}.lens .bklad{padding-left:42px}.lens .bkfig{padding-left:42px}.lens .bknote{padding-left:42px}}