@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.p-composition *,.p-composition :before,.p-composition :after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.p-composition h1,.p-composition h2{font-family:var(--font-display);text-wrap:balance;letter-spacing:-.012em;margin:0;font-weight:400;line-height:1.06}.p-composition h1{font-size:clamp(40px,7.6vw,84px)}.p-composition h2{padding-bottom:.06em;font-size:clamp(29px,4.4vw,48px)}.p-composition section h2+.col,.p-composition section h2+.body{margin-top:clamp(26px,3.4vh,38px)}.p-composition .hero{padding:clamp(60px,11vh,120px) 0 clamp(50px,8vh,92px)}.p-composition .hero .lede{max-width:54ch;margin-top:clamp(22px,2.8vh,32px)}.p-composition .hero-word{font-family:var(--font-display);letter-spacing:-.012em;color:var(--ink);margin:clamp(24px,3.8vh,42px) 0 0;font-size:clamp(40px,7.6vw,84px);font-weight:400;line-height:1.06}.p-composition .hero-op{--ease:var(--fc-ease-out);isolation:isolate;align-items:flex-end;height:clamp(112px,17vh,190px);margin:clamp(26px,4vh,46px) 0 0;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 76%,#0000 100%);mask-image:linear-gradient(90deg,#000 76%,#0000 100%)}.p-composition .hero-op i{width:var(--w);background:var(--c);height:calc(var(--h) * 100%);opacity:var(--o);mix-blend-mode:multiply;transition:width var(--fc-duration-slower) var(--ease), margin-left var(--fc-duration-slower) var(--ease);flex:none;display:block}.p-composition .hero-op:hover i{width:var(--space-6);margin-left:var(--space-3)}.p-composition .hero-op:hover u{width:var(--space-3);margin-left:0}.p-composition .hero-op:hover i:first-child{margin-left:0}.p-composition .hero-op b{width:calc(var(--w) * 2);flex:none;height:100%;margin-left:0;display:block}.p-composition .hero-op u{width:var(--w);background:repeating-linear-gradient(45deg, var(--stone-700) 0 1px, transparent 1px 6px);height:100%;transition:width var(--fc-duration-slower) var(--ease), margin-left var(--fc-duration-slower) var(--ease);flex:none;display:block}html[data-theme=dark] .p-composition .hero-op i{mix-blend-mode:screen}@media (prefers-color-scheme:dark){html:not([data-theme=light]) .p-composition .hero-op i{mix-blend-mode:screen}}.p-composition .hero-op>*+*{margin-left:var(--m)}.p-composition .sp-word{font-family:var(--font-display);letter-spacing:-.03em;margin:clamp(26px,4vh,44px) 0 0;font-size:clamp(34px,6.4vw,76px);font-weight:400;line-height:1.04}.p-composition .sp-word em{color:var(--color-primary-solid);font-style:normal}@media (width<=700px){.p-composition .hero-rule{height:64px}}.p-composition .hint{color:var(--faint)}.p-composition .hero-cite{color:var(--faint);margin-top:22px;font-size:13px;font-style:normal;display:block}.p-composition .hero-cite i{font-style:italic}.p-composition .spacescale{border-top:1px solid var(--hair);margin-top:34px}.p-composition .sp-row{gap:var(--space-9);border-bottom:1px solid var(--hair);transition:background var(--fc-duration-base) var(--fc-ease-standard);grid-template-columns:300px 1fr;align-items:center;padding:18px 0;display:grid}.p-composition .sp-row:hover{background:var(--color-surface)}.p-composition .sp-tok{font-family:var(--font-mono);color:var(--accent);font-size:12px}.p-composition .sp-val{font-family:var(--font-mono);color:var(--faint);margin-top:3px;font-size:11px}.p-composition .sp-use{color:var(--mid);margin-top:7px;font-size:12.5px;line-height:1.5}.p-composition .sp-bar{align-items:center;gap:0;display:flex}.p-composition .sp-bar i{background:var(--color-primary-solid);border-radius:2px;height:26px;display:block}.p-composition .sp-bar u{background:repeating-linear-gradient(45deg, var(--color-neutral-border) 0 1px, transparent 1px 5px);border-radius:2px;height:26px;display:block}.p-composition .sp-bar{gap:6px}@media (width<=760px){.p-composition .sp-row{grid-template-columns:1fr;gap:12px}}.p-composition .radii{background:var(--hair);border:1px solid var(--hair);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;margin-top:34px;display:grid}.p-composition .rc{background:var(--ground);padding:22px 20px}.p-composition .rc-box{background:var(--color-primary-bg);border:1px solid var(--color-primary-border);width:100%;height:62px;margin-bottom:16px}.p-composition .rc b{font-family:var(--font-mono);color:var(--accent);font-size:12px;font-weight:400}.p-composition .rc span{font-family:var(--font-mono);color:var(--faint);margin-left:8px;font-size:11px}.p-composition .rc p{color:var(--mid);margin-top:8px;font-size:12.5px;line-height:1.5}.p-composition table{border-collapse:collapse;width:100%;margin-top:30px;font-size:14px}.p-composition th{text-align:left;font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);padding:0 14px 10px 0;font-size:10px;font-weight:500}.p-composition td{border-bottom:1px solid var(--hair);vertical-align:baseline;padding:11px 14px 11px 0}.p-composition td.mono{font-family:var(--font-mono);white-space:nowrap;width:1%;font-size:12px}.p-composition td.old{color:var(--faint)}.p-composition td.new{color:var(--accent)}.p-composition td.num{font-family:var(--font-mono);color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums;width:1%;font-size:12px}.p-composition td.why{color:var(--mid);font-size:13px}@media (width<=820px){.p-composition td.why,.p-composition th.whycol{display:none}}.p-composition .density{border:1px solid var(--line);border-radius:5px;margin-top:34px;overflow:hidden}.p-composition .den-bar{background:var(--raised);border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:12px 18px;display:flex}.p-composition .den-bar span{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-right:auto;font-size:10.5px}.p-composition .den-btn{font-family:var(--font-mono);border:1px solid var(--line);color:var(--mid);cursor:pointer;background:0 0;border-radius:999px;padding:5px 12px;font-size:12px}.p-composition .den-btn[aria-pressed=true]{background:var(--ground);color:var(--ink);border-color:var(--ink)}.p-composition .den-body{padding:clamp(20px,3vw,32px)}.p-composition .den-card{--k:1;border:1px solid var(--color-neutral-border);border-radius:calc(12px * var(--k));max-width:420px;padding:calc(16px * var(--k));background:var(--color-canvas);transition:padding var(--fc-duration-base) var(--fc-ease-standard), border-radius var(--fc-duration-base) var(--fc-ease-standard)}.p-composition .den-card h4{font-size:calc(16px * var(--k));margin:0;font-weight:600;line-height:1.45}.p-composition .den-card p{margin:calc(4px * var(--k)) 0 0;font-size:calc(13px * var(--k));color:var(--mid);line-height:1.5}.p-composition .den-rows{margin-top:calc(16px * var(--k));gap:calc(8px * var(--k));display:grid}.p-composition .den-rows div{justify-content:space-between;gap:calc(12px * var(--k));font-size:calc(13px * var(--k));padding:calc(6px * var(--k)) 0;border-top:1px solid var(--color-neutral-bg-hover);display:flex}.p-composition .den-rows span{color:var(--mid)}.p-composition .codeblock{border:1px solid var(--line);background:var(--raised);border-radius:4px;margin-top:30px;overflow-x:auto}.p-composition .codeblock pre{margin:0;padding:20px 22px}.p-composition .codeblock code{font-family:var(--font-mono);color:var(--ink);white-space:pre;background:0 0;padding:0;font-size:12.5px;line-height:1.7}.p-composition .pull p{font-family:var(--font-display);font-size:clamp(23px,3.2vw,34px);font-style:italic;line-height:1.2}.p-composition .parts{border-top:1px solid var(--hair);margin-top:clamp(26px,4vh,40px)}.p-composition .phead,.p-composition .prow{grid-template-columns:34px minmax(0,180px) minmax(0,1.4fr) minmax(0,1fr);align-items:baseline;gap:clamp(12px,2.2vw,26px);display:grid}.p-composition .phead{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-bottom:10px;font-size:9.5px}.p-composition .prow{border-bottom:1px solid var(--hair);padding:13px 0;scroll-margin-top:90px}.p-composition .prow>b{font-family:var(--font-mono);color:var(--ink);overflow-wrap:anywhere;font-size:12px;font-weight:400}.p-composition .prow>p{color:var(--mid);margin:0;font-size:13px;line-height:1.6}.p-composition .pclick{color:var(--ink)!important}.p-composition .pgrouphead{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;padding:22px 0 9px;font-size:9.5px}.p-composition .pg-rail{color:var(--faint)}.p-composition .pg-main{color:var(--color-primary-solid-hover)}.p-composition .pg-ctx{color:var(--color-accent-1-solid-hover)}.p-composition .pg-work{color:var(--color-accent-2-solid-hover)}.p-composition .pn-rail{color:var(--mid)}.p-composition .pn-main{color:var(--color-primary-solid-hover)}.p-composition .pn-ctx{color:var(--color-accent-1-solid-hover)}.p-composition .pn-work{color:var(--color-accent-2-solid-hover)}.p-composition .prow .cx-num{font-size:11px}.p-composition .prow:target{background:var(--sienna-a300)}.p-composition .cx-sec,.p-composition .cx-foot-band,.p-composition .cx-toggle,.p-composition .cx-headlink{color:inherit;text-decoration:none}.p-composition .cx-headlink{grid-template-columns:auto 1fr;grid-auto-flow:column;align-items:baseline;gap:12px;display:grid}.p-composition a.cx-sec:hover,.p-composition a.cx-foot-band:hover,.p-composition a.cx-toggle:hover,.p-composition .cx-headlink:hover{text-underline-offset:3px;text-decoration:underline}@media (width<=860px){.p-composition .phead{display:none}.p-composition .prow{grid-template-columns:34px 1fr}.p-composition .prow>p{grid-column:2}}.p-composition .cx-toggle{font-family:var(--font-mono);color:var(--ink);justify-self:end;align-items:baseline;gap:12px;font-size:10px;display:flex}.p-composition .cx-sec,.p-composition .cx-head-band,.p-composition .cx-foot-band{grid-template-columns:auto 1fr;grid-auto-flow:column;align-items:baseline;gap:12px}.p-composition .cx-num{font-family:var(--font-mono);letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums;font-size:9.5px}.p-composition .comps{gap:clamp(30px,5vh,54px);margin-top:clamp(30px,4.5vh,46px);display:grid}.p-composition .cx-pair{gap:12px;display:grid}.p-composition .cx-head{flex-wrap:wrap;align-items:baseline;gap:12px;display:flex}.p-composition .cx-n{font-family:var(--font-mono);letter-spacing:.1em;color:var(--faint);font-size:10px}.p-composition .cx-head h4{font-family:var(--font-body);color:var(--ink);margin:0;font-size:16px;font-weight:400}.p-composition .cx-pages{color:var(--mid);flex-basis:100%;margin:-6px 0 0;font-size:11px;line-height:1.5}.p-composition .cx-lede{color:var(--mid);max-width:66ch;margin:0;font-size:13.5px;line-height:1.6}.p-composition .cx-row{background:var(--color-neutral-bg);border-radius:8px;grid-template-columns:200px minmax(0,1.5fr) 200px minmax(0,1fr);align-items:stretch;gap:8px;padding:8px;display:grid}.p-composition .cx-rail,.p-composition .cx-main,.p-composition .cx-ctx,.p-composition .cx-work{flex-direction:column;min-width:0;display:flex}.p-composition .cx-panelab{font-family:var(--font-mono);letter-spacing:.1em;color:var(--faint);margin-bottom:5px;padding-left:2px;font-size:9px}.p-composition .cx-card{border-radius:6px;flex-direction:column;flex:auto;display:flex;overflow:hidden}.p-composition .cx-rail .cx-card{background:var(--color-neutral-bg-hover)}.p-composition .cx-main .cx-card{background:var(--sienna-a500)}.p-composition .cx-ctx .cx-card{background:var(--midnight-a500)}.p-composition .cx-work .cx-card{background:var(--rose-a500)}.p-composition .cx-head-band,.p-composition .cx-foot-band{align-content:center;min-height:32px;display:grid}.p-composition .cx-head-band{padding:6px 12px}.p-composition .cx-foot-band{border-top:1px solid var(--hair);margin-top:auto;padding:12px}.p-composition .cx-head-band b,.p-composition .cx-foot-band b{font-family:var(--font-mono);color:var(--ink);font-size:10px;font-weight:400}.p-composition .cx-body{flex:auto;align-content:start;gap:6px;padding:12px;display:grid}.p-composition .cx-sec{border-radius:4px;padding:8px 10px;display:grid}.p-composition .cx-rail .cx-sec{background:var(--color-neutral-border-strong)}.p-composition .cx-main .cx-sec{background:var(--sienna-a700)}.p-composition .cx-ctx .cx-sec{background:var(--midnight-a700)}.p-composition .cx-work .cx-sec{background:var(--rose-a700)}.p-composition .cx-sec b{font-family:var(--font-mono);color:var(--ink);overflow-wrap:anywhere;font-size:10px;font-weight:400}.p-composition .cx-empty{flex:auto;padding:12px 0 0}.p-composition .cx-empty span{color:var(--faint);font-size:10.5px}.p-composition .cx-note{color:var(--mid);max-width:74ch;margin:0;font-size:13px;line-height:1.6}@media (width<=900px){.p-composition .cx-row{grid-template-columns:1fr 1fr}.p-composition .cx-rail{grid-column:1/-1}}.p-composition .chero{aspect-ratio:1.7;perspective:760px;perspective-origin:50% 42%;width:clamp(325px,46vw,510px);margin:clamp(40px,6vh,60px) 0 clamp(42px,6vh,62px);position:relative}.p-composition .cl{width:var(--sz);aspect-ratio:1;background:var(--c);clip-path:url(#odin-shape);transform:translate(-50%, -50%) translate(var(--tx), var(--ty)) translateZ(var(--h)) rotateX(66deg) rotateZ(45deg) scale(var(--s,1));--dur:calc(var(--fc-duration-slower) * 1.6);transition:transform var(--dur) var(--fc-ease-standard), background-color var(--dur) var(--fc-ease-standard), z-index 0s linear calc(var(--dur) / 2);will-change:transform;position:absolute;top:32%;left:50%}.p-composition .base{--c:var(--sienna-a900);--sz:76%;--tx:0%;--ty:11.5%;--h:-32px}.p-composition .l2{--c:var(--stone-a900);--sz:38%;--tx:-68%;--ty:59%;--h:-10px}.p-composition .l0{--c:var(--rose-a900);--sz:52%;--tx:10%;--ty:-1.4%;--h:32px;z-index:2}.p-composition .l1{--c:var(--midnight-a900);--sz:52%;--tx:54%;--ty:-9.4%;--h:32px;z-index:3}.p-composition .cgrid{background:var(--hair);border:1px solid var(--hair);border-radius:8px;gap:1px;margin-top:clamp(30px,4.5vh,46px);display:grid;overflow:hidden}.p-composition .cblock{background:var(--ground);grid-template-columns:210px 1fr 1fr;align-items:start;gap:clamp(16px,2.6vw,34px);padding:22px clamp(16px,2.6vw,26px);display:grid}.p-composition .chead b{font-family:var(--font-mono);color:var(--ink);font-size:12px;font-weight:400;display:block}.p-composition .chead span{color:var(--faint);margin-top:4px;font-size:11.5px;display:block}.p-composition .clab{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:9px;font-size:9.5px}.p-composition .ctake .clab{color:var(--color-success-solid-hover)}.p-composition .crefuse .clab{color:var(--color-danger-solid-hover)}.p-composition .cblock ul{gap:7px;margin:0;padding:0;list-style:none;display:grid}.p-composition .cblock li{color:var(--mid);font-size:13px;line-height:1.55}.p-composition .bads{background:var(--hair);border:1px solid var(--hair);border-radius:8px;gap:1px;margin-top:clamp(30px,4.5vh,46px);display:grid;overflow:hidden}.p-composition .bad{background:var(--ground);grid-template-columns:minmax(0,290px) minmax(0,1fr);align-items:baseline;gap:clamp(16px,2.6vw,34px);padding:20px clamp(16px,2.6vw,26px);display:grid}.p-composition .bad b{color:var(--ink);font-size:14px;font-weight:400}.p-composition .bad p{color:var(--mid);margin:0;font-size:13.5px;line-height:1.6}.p-composition .tests{border-top:1px solid var(--hair);margin-top:clamp(26px,4vh,40px)}.p-composition .trow{border-bottom:1px solid var(--hair);grid-template-columns:minmax(0,330px) minmax(0,1fr);align-items:baseline;gap:clamp(16px,2.6vw,34px);padding:17px 0;display:grid}.p-composition .trow b{color:var(--ink);font-size:14px;font-weight:400}.p-composition .trow p{color:var(--mid);margin:0;font-size:13.5px;line-height:1.6}.p-composition .note{border-left:2px solid var(--line);margin-top:30px;padding:2px 0 2px 18px}.p-composition .note b{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;font-size:10px;font-weight:400;display:block}.p-composition .note p{color:var(--mid);max-width:62ch;margin:0;font-size:13.5px;line-height:1.65}.p-composition .note.danger{border-left-color:var(--color-danger-solid)}.p-composition .note.danger b{color:var(--color-danger-solid-hover)}@media (width<=860px){.p-composition .cblock,.p-composition .bad,.p-composition .trow{grid-template-columns:1fr;gap:10px}}.p-composition .chero:hover .l2,.p-composition .chero:focus-visible .l2{--tx:-82%;--ty:49%}.p-composition .chero:hover .l1,.p-composition .chero:focus-visible .l1{--tx:76%;--ty:-18%;z-index:2;--c:var(--midnight-a1100)}.p-composition .chero:hover .l0,.p-composition .chero:focus-visible .l0{--tx:22%;--ty:-11.5%;z-index:3;--c:color-mix(in srgb, var(--rose-a1100) 72%, var(--rose-1200));--s:1.24}