main:has(.landing){overflow-x:clip}main:has(.landing) .sl-container{max-width:none}main:has(.landing) .content-panel{border:0;padding-top:0}.landing{--ease:cubic-bezier(.16, 1, .3, 1);--bg:oklch(15.5% .008 295);--bg-2:oklch(18.5% .01 295);--bg-3:oklch(22% .012 295);--line:oklch(100% 0 0/.08);--line-2:oklch(100% 0 0/.14);--tx:oklch(97% .005 295);--tx-2:oklch(80% .012 295);--tx-3:oklch(66% .014 295);--tx-4:oklch(58% .014 295);--accent:oklch(72% .18 300);--accent-ink:oklch(16% .03 300);--accent-low:oklch(30% .09 300);--de:oklch(82% .13 80);--es:oklch(75% .15 32);--ja:oklch(80% .11 195);--pl:oklch(76% .13 350);--en:var(--tx);--c-kw:oklch(74% .14 300);--c-fn:oklch(84% .09 265);--c-tag:oklch(78% .1 240);--c-pun:oklch(62% .014 295);--c-id:oklch(84% .012 295);--c-com:oklch(60% .014 295);--c-num:oklch(80% .1 150);--err:oklch(68% .2 25);--ok:oklch(76% .14 160);--dots:oklch(100% 0 0/.08);--shadow:0 1px 0 oklch(100% 0 0/.04) inset, 0 24px 60px -24px oklch(0% 0 0/.6);--pop-shadow:0 16px 40px -12px oklch(0% 0 0/.55)}:root[data-theme=light] .landing{--bg:oklch(99.3% .003 295);--bg-2:oklch(97.2% .005 295);--bg-3:oklch(94% .008 295);--line:oklch(0% 0 0/.08);--line-2:oklch(0% 0 0/.14);--tx:oklch(18% .01 295);--tx-2:oklch(36% .012 295);--tx-3:oklch(46% .014 295);--tx-4:oklch(52% .012 295);--accent:oklch(52% .22 300);--accent-ink:oklch(99% .01 300);--accent-low:oklch(93% .04 300);--de:oklch(52% .13 65);--es:oklch(53% .18 32);--ja:oklch(50% .1 210);--pl:oklch(52% .18 350);--c-kw:oklch(50% .2 300);--c-fn:oklch(45% .13 265);--c-tag:oklch(48% .13 240);--c-pun:oklch(55% .014 295);--c-id:oklch(30% .012 295);--c-com:oklch(55% .014 295);--c-num:oklch(48% .12 150);--err:oklch(54% .21 25);--ok:oklch(52% .13 160);--dots:oklch(0% 0 0/.09);--shadow:0 1px 2px oklch(0% 0 0/.04), 0 24px 50px -28px oklch(30% .05 295/.3);--pop-shadow:0 16px 40px -16px oklch(30% .05 295/.35)}@keyframes landing-nudge{0%,to{opacity:.6;translate:0 -2px}50%{opacity:1;translate:0 2px}}@keyframes landing-flash{0%{background:color-mix(in oklch, var(--accent) 18%, transparent)}to{background:0 0}}@keyframes landing-blink{50%{opacity:0}}.landing{max-width:76rem;color:var(--tx);font-family:var(--sl-font);margin-inline:auto;& :is(h1,h2,h3){text-wrap:balance;letter-spacing:-.03em;color:var(--tx);margin:0;line-height:1.08}& p{text-wrap:pretty;margin:0}& code{font-family:var(--sl-font-mono);font-size:.9em}& a{color:inherit}& .sc{-webkit-text-fill-color:transparent;position:relative}& .sc:after{content:attr(data-g);-webkit-text-fill-color:currentColor;opacity:.4;letter-spacing:0;font-family:ui-monospace,SFMono-Regular,DejaVu Sans Mono,Menlo,Consolas,monospace;font-style:normal;font-weight:400;line-height:inherit;pointer-events:none;justify-content:center;display:flex;position:absolute;inset:0;overflow:hidden}& .actions{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}& .button{border:1px solid var(--line-2);background:var(--bg-2);height:2.6rem;font:500 .92rem var(--sl-font);color:var(--tx);transition:background .2s, border-color .2s, transform .2s var(--ease);border-radius:.45rem;align-items:center;gap:.5rem;padding-inline:1.05rem;text-decoration:none;display:inline-flex}& .button:hover{background:var(--bg-3);border-color:color-mix(in oklch, var(--tx) 24%, transparent)}& .button:active{transform:translateY(1px)}& .button.primary{background:var(--accent);color:var(--accent-ink);border-color:#0000}& .button.primary:hover{background:color-mix(in oklch, var(--accent) 88%, white)}& .install{border:1px dashed var(--line-2);height:2.6rem;font:.84rem var(--sl-font-mono);color:var(--tx-2);white-space:nowrap;border-radius:.45rem;align-items:center;gap:.75rem;max-width:100%;padding:0 .5rem 0 .9rem;display:inline-flex;overflow:hidden}& .install b{color:var(--tx-4);font-weight:400}& .install button{all:unset;cursor:pointer;width:1.9rem;height:1.9rem;color:var(--tx-3);border-radius:.3rem;flex:none;place-items:center;display:grid}& .install button:hover{background:var(--bg-3);color:var(--tx)}& .install svg{width:15px;height:15px}& .seg{border:1px solid var(--line);background:var(--bg-2);border-radius:.5rem;gap:2px;padding:3px;display:inline-flex}& .seg button{all:unset;cursor:pointer;color:var(--tx-3);border-radius:.35rem;padding:.3rem .75rem;font-size:.84rem}& .seg button:hover{color:var(--tx)}& .seg button[aria-pressed=true]{background:var(--bg-3);color:var(--tx);box-shadow:0 0 0 1px var(--line-2) inset}& :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}& .text-link{color:var(--accent);margin-top:1.25rem;font-size:.95rem;text-decoration:none;display:inline-block}& .text-link:hover{text-underline-offset:.2em;text-decoration:underline}& .ed{border:1px solid var(--line);background:var(--bg-2);min-width:0;box-shadow:var(--shadow);border-radius:.6rem;grid-template-rows:auto 1fr auto;display:grid;position:relative}& .ed-bar{border-bottom:1px solid var(--line);height:2.15rem;font:.76rem var(--sl-font-mono);color:var(--tx-3);align-items:center;gap:.5rem;padding-inline:.85rem;display:flex}& .ed-bar .file{color:var(--tx-2)}& .ed-bar .fw{color:var(--tx-4);margin-left:auto}& .ed-bar svg{flex:none;width:13px;height:13px}& .ed-body{font:400 13px/1.7 var(--sl-font-mono);counter-reset:ln;padding:.7rem 0;position:relative}& .ln{transition:grid-template-rows .45s var(--ease), opacity .35s;grid-template-rows:1fr;display:grid}& .ln>div{white-space:pre-wrap;overflow-wrap:break-word;text-indent:-2ch;min-height:0;padding:0 1rem 0 calc(2.75rem + 2ch);position:relative;overflow:hidden}& .ln>div:before{counter-increment:ln;content:counter(ln);text-align:right;text-indent:0;width:1.7rem;color:var(--tx-4);opacity:.7;position:absolute;left:0}& .ln.out{opacity:0;grid-template-rows:0fr}& .ln.out>div:before{counter-increment:none}& .ln.flash>div{animation:landing-flash 1.1s var(--ease)}& .ln.hl>div{background:color-mix(in oklch, var(--err) 12%, transparent)}& .ed.edit .ln>div{text-indent:0;padding-left:2.75rem}& .ed-ta{z-index:1;resize:none;width:100%;height:100%;font:inherit;line-height:inherit;color:#0000;caret-color:var(--accent);white-space:pre-wrap;overflow-wrap:break-word;tab-size:2;background:0 0;border:0;outline:none;margin:0;padding:.7rem 1rem .7rem 2.75rem;position:absolute;inset:0;overflow:hidden}& .ed-ta::selection{background:color-mix(in oklch, var(--accent) 30%, transparent);color:#0000}& .ed:has(.ed-ta:focus){border-color:color-mix(in oklch, var(--accent) 45%, var(--line))}& .ed-status{border-top:1px solid var(--line);min-height:1.9rem;font:.74rem/1.45 var(--sl-font-mono);color:var(--tx-4);align-items:center;gap:.45rem;padding:.35rem .85rem;display:flex}& .ed-status svg{flex:none;width:13px;height:13px}& .ed-status.bad{color:var(--err);background:color-mix(in oklch, var(--err) 6%, transparent)}& .ed-status.good{color:var(--ok)}& .caret{vertical-align:-.2em;background:var(--accent);width:2px;height:1.15em;margin-right:-2px;animation:1s step-end infinite landing-blink;display:inline-block}& .t-kw{color:var(--c-kw)}& .t-fn{color:var(--c-fn)}& .t-tag{color:var(--c-tag)}& .t-pun{color:var(--c-pun)}& .t-id{color:var(--c-id)}& .t-com{color:var(--c-com)}& .t-num{color:var(--c-num)}& .t-type{color:var(--c-kw);opacity:.85}& .t-str{color:var(--en);font-weight:500}& :is(.t-str,.t-lng).de{color:var(--de)}& :is(.t-str,.t-lng).es{color:var(--es)}& :is(.t-str,.t-lng).ja{color:var(--ja)}& :is(.t-str,.t-lng).pl{color:var(--pl)}& .t-str.attr{color:var(--c-num);font-weight:400}& .t-lng{opacity:.8}& .t-interp{color:var(--c-pun);font-weight:400}& .sq{text-decoration:wavy underline var(--err);text-decoration-skip-ink:none;text-underline-offset:4px}& .ed:has(.tip.show){z-index:4}& .tip{z-index:5;background:var(--bg-3);border:1px solid var(--line-2);max-width:calc(100% - 3rem);box-shadow:var(--pop-shadow);font:12px/1.65 var(--sl-font-mono);white-space:pre-wrap;color:var(--tx-2);opacity:0;transition:opacity .25s, transform .4s var(--ease);pointer-events:none;border-radius:.45rem;padding:.55rem .75rem;position:absolute;left:2.4rem;transform:translateY(-4px)}& .tip.show{opacity:1;transform:none}& .tip .e{color:var(--err)}& .ed:has(.ac.show){z-index:6}& .ac{z-index:7;background:var(--bg-3);border:1px solid var(--line-2);width:min(25rem,100% - 1rem);box-shadow:var(--pop-shadow);font:12px/1.5 var(--sl-font-mono);opacity:0;transition:opacity .15s, transform .25s var(--ease);pointer-events:none;border-radius:.5rem;position:absolute;overflow:hidden;transform:translateY(-4px)}& .ac.show{opacity:1;pointer-events:auto;transform:none}& .ac-list{padding:.25rem}& .ac-i{color:var(--tx-2);cursor:pointer;border-radius:.3rem;align-items:center;gap:.5rem;padding:.25rem .5rem;display:flex}& .ac-i.on{background:color-mix(in oklch, var(--accent) 22%, transparent);color:var(--tx)}& .ac-i i{background:var(--bg-2);width:1.1rem;height:1.1rem;color:var(--accent);border:1px solid var(--line);border-radius:.25rem;flex:none;place-items:center;font-size:9px;font-style:normal;display:grid}& .ac-i small{color:var(--tx-4);white-space:nowrap;text-overflow:ellipsis;max-width:50%;margin-left:auto;overflow:hidden}& .ac-doc{border-top:1px solid var(--line);color:var(--tx-3);white-space:pre-wrap;padding:.45rem .75rem}& .ac-doc b{color:var(--tx);font-weight:500}& .ui{font-family:var(--sl-font)}& .ui svg{flex:none;width:16px;height:16px}& .ui-btn{white-space:nowrap;background:var(--tx);height:2.2rem;color:var(--bg);border-radius:.5rem;align-items:center;gap:.5rem;padding-inline:1rem;font-size:.88rem;font-weight:550;display:inline-flex}& .ui-btn.ghost{color:var(--tx);border:1px solid var(--line-2);background:0 0}& .ui-h{letter-spacing:-.02em;font-size:1.25rem;font-weight:600}& .ui-toast{background:var(--bg-2);border:1px solid var(--line-2);border-radius:.55rem;align-items:center;gap:.6rem;padding:.5rem .8rem;font-size:.86rem;display:inline-flex}& .ui-toast svg,& .ui-dialog svg{color:var(--err)}& .ui-badge{background:var(--accent-low);color:color-mix(in oklch, var(--accent) 70%, var(--tx));white-space:nowrap;font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;gap:.45rem;padding:.3rem .75rem;font-size:.86rem;font-weight:500;display:inline-flex}& .ui-meta{color:var(--tx-3);font-variant-numeric:tabular-nums;font-size:.92rem}& .ui-total{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:1.1rem;font-weight:600}& .ui-dialog{align-items:center;gap:.6rem;font-weight:600;display:inline-flex}& .ui-link{color:var(--accent);text-underline-offset:.2em;text-decoration:underline}& .ui-in{border:1px solid var(--err);background:var(--bg-2);height:2.2rem;color:var(--tx-2);white-space:nowrap;border-radius:.45rem;align-items:center;padding:0 .75rem;font-size:.88rem;display:flex;overflow:hidden}& .ui-msg{color:var(--err);align-items:center;gap:.4rem;font-size:.85rem;display:flex}& .ui-msg svg{width:15px;height:15px}& .ui-field{gap:.35rem;width:min(16rem,100%);display:grid}& .quad-row:has(.ui-field){padding-block:.4rem;& .ui-field{gap:.2rem}& .ui-in{height:1.75rem;font-size:.8rem}& .ui-msg{font-size:.8rem}}& .ui-bad{border:1px dashed color-mix(in oklch, var(--err) 60%, transparent);color:var(--err);font:.76rem var(--sl-font-mono);border-radius:.35rem;align-items:center;gap:.4rem;padding:.25rem .6rem;display:inline-flex}& .ui-bad svg{width:13px;height:13px}& .ui-none{color:var(--tx-4);font:.76rem var(--sl-font-mono)}&.js [data-reveal]{opacity:0;transition:opacity .9s var(--ease), translate .9s var(--ease);translate:0 1.5rem}&.js [data-reveal].in{opacity:1;translate:0}& .sec{padding-block:clamp(4.5rem,10vw,8rem)}& .sec h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}& .lede2{color:var(--tx-2);max-width:36rem;margin-top:1rem;font-size:1.05rem}& .lede2.dim{color:var(--tx-3)}& .hero{padding-block:clamp(2.5rem,7vh,5rem) clamp(3rem,7vw,5rem)}& .hero-top{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:1.5rem 4rem;display:grid}& .hero h1{letter-spacing:-.038em;min-height:3.24em;font-size:clamp(2.3rem,4.6vw,4.1rem);font-weight:650}& .hero .lede{color:var(--tx-2);font-size:1.06rem}& .hero .actions{margin-top:1.4rem}& .book{grid-template-columns:minmax(0,17rem) minmax(0,1fr);align-items:start;gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(2.5rem,6vh,4rem);display:grid}& .book-list{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}& .book-list li{margin:0}& .book-list button{all:unset;box-sizing:border-box;cursor:pointer;border-bottom:1px solid var(--line);width:100%;color:var(--tx-3);gap:.05rem;padding:.55rem .25rem;transition:color .2s;display:grid;position:relative}& .book-list button b{font-size:.93rem;font-weight:500}& .book-list button small{font:.72rem var(--sl-font-mono);color:var(--tx-4);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}& .book-list button:hover,& .book-list button[aria-current=true]{color:var(--tx)}& .book-list button[aria-current=true] small{color:var(--accent)}& .book-list button:after{content:"";background:var(--accent);transform-origin:0;width:100%;height:1px;position:absolute;bottom:-1px;left:0;transform:scaleX(0)}& .book-list button[aria-current=true]:after{opacity:.5;transform:scaleX(1)}& .dither{z-index:0;pointer-events:none;width:100vw;height:100vh;image-rendering:pixelated;color:var(--accent);opacity:.17;position:fixed;inset:0}& .bg-words{z-index:0;pointer-events:none;display:none;position:fixed;inset:0;&.on{display:block}}& .bg-words .w{white-space:nowrap;border:1px solid var(--line);background:color-mix(in oklch, var(--bg) 80%, transparent);backdrop-filter:blur(3px);font:.82rem/1.2 var(--sl-font-mono);color:var(--tx-2);opacity:0;transition:opacity 1.4s var(--ease), translate 1.4s var(--ease);border-radius:.4rem;align-items:center;gap:.55rem;padding:.35rem .6rem;display:inline-flex;position:absolute;overflow:hidden;translate:0 6px;&>span{text-overflow:ellipsis;min-width:0;overflow:hidden}& :is(b,i){flex:none}& b{width:1ch;color:var(--accent);font-weight:400}& i{text-transform:uppercase;color:var(--tx-3);font-size:.66rem;font-style:normal}& i.de{color:var(--de)}& i.es{color:var(--es)}& i.ja{color:var(--ja)}& i.pl{color:var(--pl)}&.l{left:var(--x)}&.r{right:var(--x)}&.in{opacity:.75;translate:0}& span:lang(ja){font-family:"Noto Sans JP Variable", var(--sl-font-mono)}}&>:not(.dither,.bg-words){z-index:1;position:relative}& .book-side{min-width:0}& .scroll-hint{display:none}& .book-scroll.scroll{& .book{top:var(--top);position:sticky}&:after{content:"";height:var(--steps-h);display:block}& .book-list button[aria-current=true]:after{opacity:1;transform:scaleX(var(--p,0))}& .book-list{border-top:0;padding-left:1.1rem;position:relative}& .book-list:before,& .book-list:after{content:"";background:var(--line-2);width:1px;position:absolute;top:0;bottom:0;left:0}& .book-list:after{background:var(--accent);transform-origin:top;transform:scaleY(var(--progress,0))}& .book-list button:before{content:"";box-sizing:border-box;border:1px solid var(--line-2);background:var(--bg);z-index:1;border-radius:50%;width:7px;height:7px;transition:background-color .2s,border-color .2s,scale .2s;position:absolute;top:1.05rem;left:calc(-1.1rem - 3px)}& .book-list button.done:before{border-color:var(--accent)}& .book-list button[aria-current=true]:before{border-color:var(--accent);background:var(--accent);scale:1.3}& .book-list button.done{color:var(--tx-2)}& .scroll-hint{font:.74rem var(--sl-font-mono);color:var(--tx-3);align-items:center;gap:.55rem;margin:1.1rem 0 0;padding-left:1.1rem;transition:opacity .3s;display:flex}& .chev{border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);width:.45rem;height:.45rem;animation:landing-nudge 1.8s var(--ease) infinite;rotate:45deg}&.at-end .scroll-hint{opacity:0}& .ed .ed-body{min-height:calc(11lh + 1.4rem)}}& .book-list .tag{background:var(--accent-low);color:color-mix(in oklch, var(--accent) 70%, var(--tx));font:.66rem var(--sl-font-mono);border-radius:.25rem;justify-self:start;margin-top:.15rem;padding:0 .35rem}& .book-stage{gap:.75rem;min-width:0;display:grid}& .book-head{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}& .book-head .step{font:.76rem var(--sl-font-mono);color:var(--tx-4);font-variant-numeric:tabular-nums}& .book-head .hint{color:var(--tx-4);margin-left:auto;font-size:.82rem}& .book-head .hint code{color:var(--tx-2)}& .book-two{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start;gap:.75rem;display:grid}& .quad{border:1px solid var(--line);background:radial-gradient(circle at 1px 1px, var(--dots) 1px, transparent 0) 0 0 / 14px 14px, var(--bg);border-radius:.6rem;overflow:hidden}& .quad-bar{border-bottom:1px solid var(--line);background:var(--bg-2);font:.72rem var(--sl-font-mono);color:var(--tx-4);justify-content:space-between;gap:1rem;padding:.45rem .75rem;display:flex}& .quad-row{border-bottom:1px solid var(--line);grid-template-columns:2.2rem minmax(0,1fr);align-items:center;gap:.5rem;min-height:3.4rem;padding:.7rem .85rem;display:grid}& .quad-row:last-child{border-bottom:0}& .quad-row>span{font:.7rem var(--sl-font-mono);text-transform:uppercase}& .quad-row>span.en{color:var(--tx-3)}& .quad-row>span.de{color:var(--de)}& .quad-row>span.es{color:var(--es)}& .quad-row>span.ja{color:var(--ja)}& .quad-row>span.pl{color:var(--pl)}& .q{flex-wrap:wrap;align-items:center;gap:.5rem .6rem;min-width:0;display:flex}& .zod{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:clamp(2rem,5vw,4.5rem);display:grid}& .zplay{gap:.85rem;display:grid}& .zform{border:1px solid var(--line);background:var(--bg-2);border-radius:.6rem;gap:1rem;padding:1.4rem;display:grid}& .zform label{color:var(--tx-2);gap:.35rem;font-size:.86rem;display:grid}& .zform label>span{justify-content:space-between;display:flex}& .zform label>span code{color:var(--tx-4);font-size:.78rem}& .zform input{font:.95rem var(--sl-font);color:var(--tx);border:1px solid var(--line-2);background:var(--bg);height:2.5rem;caret-color:var(--accent);border-radius:.45rem;padding:0 .8rem;transition:border-color .2s}& .zform input:focus{border-color:var(--accent);outline:none}& .zform input[aria-invalid=true]{border-color:var(--err)}& .zform .ui-msg{min-height:1.3rem}& .zrow{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}& .zrow small{color:var(--tx-4);font-size:.8rem}& .safety{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(2rem,5vw,4.5rem);display:grid}& .closing{text-align:center;border-top:1px solid var(--line);justify-items:center;display:grid}& .closing h2{margin-bottom:1.75rem;font-size:clamp(2.2rem,5vw,3.6rem)}& .foot{color:var(--tx-4);margin-top:3rem;font-size:.85rem}& .foot a{text-underline-offset:.2em}@media (width<=1000px){& .book,& .book-two{grid-template-columns:minmax(0,1fr)}& .book-list{border:0;gap:.35rem;padding-bottom:.25rem;display:flex;overflow-x:auto}& .book-list button{white-space:nowrap;border:1px solid var(--line);border-radius:.45rem;padding-inline:.7rem}& .book-list :is(small,.tag){display:none}& .book-head .hint{margin-left:0}}@media (width<=900px){& .hero-top,& .zod,& .safety{grid-template-columns:minmax(0,1fr)}& .hero h1{min-height:0}}@media (prefers-reduced-motion:reduce){& *,& :before,& :after{transition-duration:.01ms!important;animation-duration:.01ms!important}}}:root[data-theme=light] .landing .dither{opacity:.13}
