:root{color-scheme:light;--max-w-layout: 68rem;--h-header: 3rem;--h-footer: 4rem;--gutter: clamp(1rem, 4vw, 2rem);--font-default: "Avenir Next", "Segoe UI Variable", "Segoe UI", Roboto, "Shanggu Sans", "Hiragino Sans", "Hiragino Sans GB", "Yu Gothic", system-ui, sans-serif ;--font-alternative: Palatino, Cambria, "Shanggu Serif", "Hiragino Mincho ProN", "Yu Mincho", serif ;--font-accent: Palatino, Cambria, "LXGW WenKai TC", "Klee One", Klee, "Klee One", BiauKai, DFKai-SB, "Kaiti TC", "Hiragino Mincho ProN", "Yu Mincho", cursive, serif ;--palette-white: #fff;--palette-snow: #f7f7f7;--palette-mist: #eeeeee;--palette-cloud: #e6e6e6;--palette-silver: #b0b1b3;--palette-ash: #9b9b9b;--palette-slate: #696c6b;--palette-graphite: #2a2a2d;--palette-onyx: #242427;--palette-charcoal: #18181b;--palette-black: #111;--palette-ink: #0a0a0a;--palette-ink: #191515;--palette-ink-grey: #4e4f51;--palette-ink-light: #4e4f519c;--palette-red: #b00404;--ui-accent: var(--palette-red);--ui-text: light-dark(var(--palette-black), var(--palette-mist));--ui-grid: light-dark(var(--palette-cloud), var(--palette-onyx));--ui-bg: light-dark(var(--palette-white), var(--palette-ink));--ui-bg-3q: light-dark( color-mix(in srgb, var(--palette-white) 75%, transparent), color-mix(in srgb, var(--palette-ink) 82%, transparent) ) ;--ui-bg-2q: color-mix(in srgb, var(--ui-bg) 50%, transparent);--ui-bg-1q: color-mix(in srgb, var(--ui-bg) 25%, transparent);--ui-bg-inverse: light-dark(var(--palette-ink), var(--palette-snow));--ui-bg-inverse-3q: color-mix(in srgb, var(--ui-bg-inverse) 75%, transparent);--ui-bg-inverse-2q: color-mix(in srgb, var(--ui-bg-inverse) 50%, transparent);--ui-bg-inverse-1q: color-mix(in srgb, var(--ui-bg-inverse) 25%, transparent);--ui-text-inverse: light-dark(var(--palette-mist), var(--palette-ink));--ui-text-inverse-3q: color-mix(in srgb, var(--ui-text-inverse) 75%, transparent);--ui-text-inverse-2q: color-mix(in srgb, var(--ui-text-inverse) 50%, transparent);--ui-text-inverse-1q: color-mix(in srgb, var(--ui-text-inverse) 25%, transparent);--ui-supplement-text: light-dark(var(--palette-slate), var(--palette-ash));--ui-supplement-text-3q: color-mix(in srgb, var(--ui-supplement-text) 75%, transparent);--ui-supplement-text-2q: color-mix(in srgb, var(--ui-supplement-text) 50%, transparent);--ui-supplement-text-1q: color-mix(in srgb, var(--ui-supplement-text) 25%, transparent);--ui-panel: light-dark(var(--palette-snow), var(--palette-charcoal));--ui-ink: var(--palette-ink);--ui-ink-grey: light-dark(var(--palette-ink-grey), var(--palette-silver));--ui-ink-light: var(--palette-ink-light);--ui-rule: light-dark(var(--palette-cloud), var(--palette-graphite))}:root:has(input[name=dark-mode]:checked){color-scheme:dark}:root{--path-caret: shape(from 68.8763% 37.3738%, curve to 68.8763% 41.7931% with 70.0969% 38.5938% / 70.0969% 40.5725%, line to 52.2094% 58.4594%, curve to 47.7906% 58.4594% with 50.9894% 59.68% / 49.0106% 59.68%, line to 31.1238% 41.7931%, curve to 31.1238% 37.3738% with 29.9031% 40.5725% / 29.9031% 38.5938%, curve to 35.5431% 37.3738% with 32.3438% 36.1531% / 34.3225% 36.1531%, line to 50% 51.8306%, line to 64.4569% 37.3738%, curve to 68.8763% 37.3738% with 65.6775% 36.1531% / 67.6556% 36.1531%, close);--path-check: shape(from 75.1263% 33.2069%, curve to 75.1263% 37.6263% with 76.3469% 34.4275% / 76.3469% 36.4063%, line to 45.9594% 66.7931%, curve to 41.54% 66.7931% with 44.7394% 68.0131% / 42.7606% 68.0131%, line to 24.8738% 50.1263%, curve to 24.8738% 45.7069% with 23.6531% 48.9056% / 23.6531% 46.9275%, curve to 29.2931% 45.7069% with 26.0938% 44.4869% / 28.0725% 44.4869%, line to 43.75% 60.1638%, line to 70.7069% 33.2069%, curve to 75.1263% 33.2069% with 71.9275% 31.9869% / 73.9056% 31.9869%, close)}:where(:root){container-name:fullscreen-pseudo-elmts;font-family:var(--font-default);font-size:16px;font-weight:400;line-height:1.25;text-autospace:normal;text-underline-offset:.125rem;color:var(--ui-text);scroll-behavior:smooth;scrollbar-gutter:stable}:where(:root) :where(body){margin:0;background:var(--ui-bg);color:var(--ui-text);overflow-x:clip}:root.fonts-pending body>*{visibility:hidden}:root.fonts-pending body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;inline-size:1.5rem;block-size:5rem;background:var(--ui-accent);animation:gate-pulse .8s ease-in-out .15s infinite alternate backwards}:root.fonts-ready body>*{animation:gate-reveal .35s ease-out}@keyframes gate-pulse{0%{opacity:0}to{opacity:1}}@keyframes gate-reveal{0%{opacity:0}}:root{box-sizing:border-box}:root :where(*,*:before,*:after){box-sizing:inherit}:where(a):where(:link,:visited){color:#0e53d4;transition:.15s all ease-out;text-decoration-color:transparent}:where(a):where(:hover){color:#0d1aac;text-decoration-color:currentColor}:where(a):where(:active){color:#0e53d4ae}:where(fieldset){margin:0;padding:0;border:0}:where(fieldset) :where(legend){padding:0}:where(:focus){outline:0}:where(button){padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;font:inherit}select,select::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select}select{display:flex;align-items:center;gap:.5rem;padding-inline:.75rem;block-size:2rem;font-size:.875rem;text-align:start;background-color:var(--ui-bg);border:1px solid var(--ui-rule);border-radius:.25rem;cursor:pointer;transition:border-color .15s ease-out}select:hover{border-color:var(--ui-ink-grey)}select:open{border-color:var(--ui-ink)}select::picker-icon{content:"";margin-inline:auto -.5em;transition:rotate .2s ease-out;inline-size:1.5rem;block-size:1.5rem;background-color:var(--ui-supplement-text);clip-path:var(--path-caret)}select:open::picker-icon{rotate:180deg}selectedcontent{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}select:open::picker(select){margin-block:.5rem;padding:0;border-radius:.25rem;opacity:1;transition:.25s all ease-out}@starting-style{select:open::picker(select){opacity:0;transform:scale(.95) translate(.5rem);transform-origin:center bottom}}optgroup{padding:.5rem 0 .25rem;font-size:.75rem;font-weight:200;color:var(--ui-supplement-text)}optgroup:not(:first-of-type){border-block-start:1px solid var(--ui-grid)}optgroup legend{padding:0 1rem;font-size:.875rem;letter-spacing:.5em}option{display:flex;align-items:center;padding-inline:1rem;line-height:2;font-size:1rem;color:var(--ui-text);cursor:pointer}option:first-child{margin-block-start:.25rem}option:hover,option:focus{background-color:var(--ui-panel)}option:checked{font-weight:700}option::checkmark{content:"️";order:1;inline-size:1.5rem;block-size:1.5rem;margin-inline:auto -.5em;clip-path:var(--path-check);background-color:var(--ui-supplement-text-3q)}@container fullscreen-pseudo-elmts{:where(body>*,#why,#playground,#usage,#faq,main>article>.family){position:relative;margin:auto;max-inline-size:var(--max-w-layout)}:where(body>*,#why,#playground,#usage,#faq,main>article>.family):before,:where(body>*,#why,#playground,#usage,#faq,main>article>.family):after{content:"";position:absolute;inset-block-start:0;inset-inline-start:50%;transform:translate(-50%);display:block;inline-size:100vw;block-size:100%;pointer-events:none}}:where(body>main,body>header,body>footer){padding-inline:var(--gutter)}html{scroll-padding-block-start:calc(var(--h-header) + .5rem)}body>header{position:fixed;z-index:10;inset-inline-start:50%;transform:translate(-50%);inset-block-start:0;display:flex;align-items:center;inline-size:min(100%,var(--max-w-layout));block-size:var(--h-header)}body>header:after{z-index:-10;background-color:var(--ui-bg-3q);border-block-end:1px solid var(--ui-grid);-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1)}body>header h1{position:relative;font-size:1.5rem;font-weight:200}body>header h1 small{font-size:.675em;opacity:.5}body>header h1:after{content:"";position:absolute;inset-inline-end:-2.5rem;inset-block-start:1.0625em;display:block;inline-size:5rem;border-block-end:2px solid var(--ui-accent)}body>header menu{display:flex;margin-inline-start:auto;padding:0;gap:1rem;list-style:none}body>header menu a,body>header menu label span{display:inline-flex;align-items:center;block-size:calc(var(--h-header) - 1px);cursor:pointer}body>header menu a{font-size:.875rem;color:var(--ui-ink-grey)}body>header li:has(input[type=checkbox]){position:relative}body>header li:has(input[type=checkbox]) input[type=checkbox]{position:absolute;opacity:0}body>header li:has(input[type=checkbox]) span{position:relative;inline-size:1em;overflow:hidden;font-size:1.5em;color:transparent}body>header li:has(input[type=checkbox]) span:before{content:"🌒";color:#000}body>header li:has(input[type=checkbox]) input[type=checkbox]:checked+span:before{content:"🌻";content:"🌞"}@media not (min-width:34rem){body>header h1 small{display:none}body>header h1:after{inline-size:2rem;inset-inline-end:-.75rem}body>header menu{gap:.75rem}body>header menu a{font-size:.8125rem}body>header menu li:has(a[href$="cdn-bench.html"]),body>header menu li:has(a[href*=github]){display:none}}body>main{margin-block-start:var(--h-header)}body>footer{display:flex;align-items:center;block-size:var(--h-footer);font-size:.75rem;font-weight:250;color:var(--ui-supplement-text)}body>footer:before{border-block-start:1px solid var(--ui-grid)}body>footer p{inline-size:100%;text-align:center}@property --hero-accent-rect-x{syntax: "<length-percentage>"; inherits: false; initial-value: 0;}@property --hero-accent-rect-y{syntax: "<length-percentage>"; inherits: false; initial-value: 0;}@property --hero-accent-rect-w{syntax: "<length-percentage>"; inherits: false; initial-value: 0;}@property --hero-accent-rect-h{syntax: "<length-percentage>"; inherits: false; initial-value: 0;}@keyframes hero-accent-transform{0%{--hero-accent-rect-w: 2em;--hero-accent-rect-h: 6.25em}4.17%{--hero-accent-rect-w: 8.75rem;--hero-accent-rect-h: 22.25rem}15%{--hero-accent-rect-w: 7rem;--hero-accent-rect-h: 16rem}30%{--hero-accent-rect-w: 14em;--hero-accent-rect-h: 30rem}35%,43.33%{--hero-accent-rect-w: 13rem}56.67%{--hero-accent-rect-w: 8.75rem;--hero-accent-rect-h: 30rem}62.5%,to{--hero-accent-rect-w: 2em;--hero-accent-rect-h: 6.25em}64.06%{--hero-accent-rect-h: 5.9em}65.26%{--hero-accent-rect-h: 7em}67.28%{--hero-accent-rect-h: 5.6em}70.09%{--hero-accent-rect-h: 6.6em}71.21%,71.67%{--hero-accent-rect-h: 6.25em}73.5%{--hero-accent-rect-h: 4.8em}74.33%{--hero-accent-rect-h: 9.5em}76.42%{--hero-accent-rect-h: 5.8em}79.31%{--hero-accent-rect-h: 7em}80.38%,80.83%{--hero-accent-rect-h: 6.25em}82.39%{--hero-accent-rect-h: 5.2em}83.48%{--hero-accent-rect-h: 8.8em}87.22%{--hero-accent-rect-h: 8.5em}89.54%{--hero-accent-rect-h: 6.25em}90%,to{--hero-accent-rect-h: 6em}}body>main>article :where(h1,h2,h3,h4,h5,h6){margin:0;font-weight:inherit}body>main>article hgroup{opacity:0;display:none}body>main>article figure{--hero-accent-rect-x: .6rem;--hero-accent-rect-y: 100%;--hero-accent-rect-w: 2em;--hero-accent-rect-h: 6.25em;--hero-accent-rect: linear-gradient(var(--ui-accent), var(--ui-accent)) var(--hero-accent-rect-x) var(--hero-accent-rect-y) / var(--hero-accent-rect-w) var(--hero-accent-rect-h) no-repeat ;--hero-accent-rect-fore: linear-gradient(var(--ui-text-inverse), var(--ui-text-inverse)) var(--hero-accent-rect-x) var(--hero-accent-rect-y) / var(--hero-accent-rect-w) var(--hero-accent-rect-h) no-repeat, linear-gradient(var(--ui-text), var(--ui-text)) 9rem var(--hero-accent-rect-y) / 10rem 30rem no-repeat, linear-gradient(var(--ui-accent), var(--ui-accent)) 0 0 / 100% 100% no-repeat ;position:relative;z-index:-10;display:grid;place-items:center;margin:0 0 -.25rem;inline-size:100%;--hero-stage-h: min(60vh, 30rem);block-size:var(--hero-stage-h);font-family:"Helvetica Neue",Arial,var(--font-default);background:var(--hero-accent-rect);animation:hero-accent-transform 60s ease-in-out infinite}body>main>article figure ul{display:grid;grid-template-areas:"stage";place-items:center;margin:0;padding:0;inline-size:100%;block-size:100%;list-style:none;-webkit-user-select:none;user-select:none}body>main>article figure li{grid-area:stage;margin:0;font-family:var(--font-alternative);font-size:min(64vh,32rem);line-height:1;color:var(--ui-text);opacity:0;will-change:transform,filter,opacity;mix-blend-mode:multiply}body>main>article figure li:first-child{opacity:1}body>main>article figure figcaption{position:absolute;inset-inline-end:0;inset-block-end:0;z-index:1;margin-inline:0 0;inline-size:100%;font-size:2rem;font-weight:800;line-height:1.5;writing-mode:vertical-rl;background:var(--hero-accent-rect-fore);-webkit-background-clip:text;background-clip:text;color:transparent}body>main>article figure p{margin:1em 0 0;text-align:justify;text-indent:1em}body>main>article figure p:first-child:first-line{color:var(--ui-text);text-shadow:0 0 1px var(--ui-bg)}body>main>article figure .google-fonts{writing-mode:horizontal-tb;display:inline-block;inline-size:3.5em;margin-inline:.25em;text-indent:0;line-height:1.05;text-shadow:none;vertical-align:text-bottom;background:var(--palette-ink) linear-gradient(var(--ui-accent),var(--ui-accent)) 0 0 / 3.5em .95em no-repeat;color:var(--palette-snow)}body>main>article figure abbr{writing-mode:horizontal-tb;display:inline-block;inline-size:1em;line-height:1;text-align:center;text-indent:0;padding-left:.125em;text-wrap:wrap;word-break:break-all}body>main>article .family{position:relative}body>main>article .family:last-child{margin-block-end:3rem}body>main>article .family:nth-child(odd){color:var(--ui-bg-3q)}body>main>article .family:after{z-index:-10;inline-size:calc(100vw - 2rem);transition:.15s all ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}body>main>article .family:nth-child(odd) dt{color:var(--ui-bg)}body>main>article .family:nth-child(odd):after{background:var(--ui-bg-inverse)}body>main>article .family:hover:nth-child(odd),body>main>article .family:hover:nth-child(odd) dt,body>main>article .family:focus-within:nth-child(odd),body>main>article .family:focus-within:nth-child(odd) dt{color:var(--ui-text)}body>main>article .family:hover:nth-child(odd):after,body>main>article .family:focus-within:nth-child(odd):after{background-color:var(--ui-bg-inverse-1q)}body>main>article .family:hover:nth-child(2n),body>main>article .family:focus-within:nth-child(2n){color:var(--ui-bg)}body>main>article .family:hover:nth-child(2n):after,body>main>article .family:focus-within:nth-child(2n):after{background-color:var(--ui-bg-inverse-3q)}body>main>article .family dl{display:none}body>main>article .family:not(:has(input)) dl{display:block}body>main>article .family:has(input[value=shanggu-serif]:checked) dl[data-font-name=shanggu-serif],body>main>article .family:has(input[value=shanggu-serif-yue]:checked) dl[data-font-name=shanggu-serif-yue],body>main>article .family:has(input[value=shanggu-sans]:checked) dl[data-font-name=shanggu-sans],body>main>article .family:has(input[value=shanggu-sans-yue]:checked) dl[data-font-name=shanggu-sans-yue],body>main>article .family:has(input[value=genki-serif]:checked) dl[data-font-name=genki-serif],body>main>article .family:has(input[value=genki-serif-yue]:checked) dl[data-font-name=genki-serif-yue],body>main>article .family:has(input[value=genki-sans]:checked) dl[data-font-name=genki-sans],body>main>article .family:has(input[value=genki-sans-yue]:checked) dl[data-font-name=genki-sans-yue],body>main>article .family:has(input[value=lxgw-wenkai-tc]:checked) dl[data-font-name=lxgw-wenkai-tc],body>main>article .family:has(input[value=lxgw-wenkai]:checked) dl[data-font-name=lxgw-wenkai]{display:block}body>main>article .variants{position:absolute;inset-block-start:1.5rem;inset-inline-start:0;z-index:1;display:flex;gap:1.25rem;margin:0;padding:0;border:0;font-size:.875rem}body>main>article .variants legend{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}body>main>article .variants label{cursor:pointer;opacity:.55;border-block-end:2px solid transparent}body>main>article .variants label:has(input:checked){opacity:1;border-block-end-color:var(--ui-accent)}body>main>article .variants input{position:absolute;opacity:0}body>main>article dl{position:relative;margin-block:0;padding:5rem 0 1rem 60%;line-height:1.5;cursor:pointer}body>main>article dl:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-.5rem}body>main>article dl dt{position:absolute;inset:auto auto 1rem 0;font-size:5rem;font-weight:600;line-height:1}body>main>article dl dd{margin:0;font-size:.875rem}body>main>article [data-font-name=shanggu-serif] dt{font-family:"Shanggu Serif",serif}body>main>article [data-font-name=shanggu-sans] dt{font-family:Shanggu Sans,sans-serif}body>main>article [data-font-name=shanggu-serif-tc] dt{font-family:"Shanggu Serif Yue",serif}body>main>article [data-font-name=shanggu-sans-tc] dt{font-family:Shanggu Sans Yue,sans-serif}body>main>article [data-font-name=genki-min] dt{font-family:"Genki Serif Yue",serif}body>main>article [data-font-name=genki-min-tc] dt{font-family:"Genki Serif",serif}body>main>article [data-font-name=genki-gothic] dt{font-family:Genki Sans Yue,sans-serif}body>main>article [data-font-name=genki-gothic-tc] dt{font-family:Genki Sans,sans-serif}body>main>article [data-font-name=lxgw-wenkai-tc] dt{font-family:LXGW WenKai TC,cursive,serif;font-weight:400}body>main>article [data-font-name=lxgw-wenkai] dt{font-family:LXGW WenKai,cursive,serif;font-weight:400}body>main>article [data-font-name=iansui] dt{font-family:Iansui,cursive,serif;font-weight:400}body>main>article [data-font-name=klee-one] dt{font-family:Klee One,cursive,serif;font-weight:400}@media not (min-width:52rem){body>main>article figure{margin-inline:calc(-1 * var(--gutter));inline-size:auto;--hero-stage-h: min(48vh, 22rem);block-size:var(--hero-stage-h)}body>main>article figure li{font-size:var(--hero-stage-h)}body>main>article figure figcaption{font-size:calc(var(--hero-stage-h) / 15)}body>main>article dl{padding:2.5rem 0 1.5rem}body>main>article .family:after{inline-size:100vw}body>main>article .variants{position:static;padding-block-start:1.5rem;margin-block-end:-1rem}body>main>article dl dt{position:static;margin-block-end:.25rem;font-size:clamp(2.5rem,9vw,4rem);line-height:1.1}body>main>article figure{overflow:clip}}#why{padding-block:3rem 4rem;line-height:1.8}#why:before{z-index:-10;background-color:var(--ui-bg);border-block-start:1px solid var(--ui-grid)}#why hgroup{margin-block:2.5rem 1rem}#why hgroup h2{margin-block:0;font-size:1.5rem;font-weight:600}#why hgroup p{margin-block:0;color:var(--ui-supplement-text)}#why>section:first-child hgroup{margin-block-start:0}#why p{text-align:justify;max-inline-size:42em}#why .compare{margin:2rem 0}#why .compare ul{display:flex;flex-wrap:wrap;gap:clamp(.5rem,3vw,1.5rem);margin:0;padding:0;list-style:none}#why .compare ul li{display:grid;gap:.125em;text-align:center}#why .compare ul span{font-size:clamp(2rem,8vw,4rem);font-weight:400;line-height:1.25}#why .compare .standard{font-family:PingFang TC,Microsoft JhengHei,Noto Sans TC,sans-serif;color:var(--ui-supplement-text)}#why .compare .heritage-hei{font-family:Shanggu Sans,Hiragino Sans,sans-serif}#why .compare .standard-ming{font-family:Songti TC,PMingLiU,"Noto Serif TC",serif;color:var(--ui-supplement-text)}#why .compare.songti-tc .omitted{opacity:.125}#why .compare .standard:lang(zh-Hans){font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif}#why .compare .standard-ming:lang(zh-Hans){font-family:Songti SC,SimSun,"Noto Serif SC",serif}#why .compare .heritage-ming{font-family:"Shanggu Serif",Hiragino Mincho ProN,Yu Mincho,serif}#why .compare .kai-glyph{font-family:Iansui,BiauKai,Kaiti TC,cursive,serif}#why .compare figcaption{margin-block-start:.5rem;font-size:.875rem;color:var(--ui-supplement-text)}#why .refs{font-size:.875rem;color:var(--ui-supplement-text)}#why .steps{display:grid;gap:1rem;margin:1.5rem 0;padding:0;counter-reset:step}#why .steps li{position:relative;list-style:none;counter-increment:step;padding-inline-start:1.5rem}#why .steps li:before{content:counter(step);position:absolute;inset-block-start:0;inset-inline-start:0;font-weight:600;color:var(--ui-accent)}#why .cta a{color:var(--ui-accent)}#why .quickstart pre{margin-block:.75rem;border-radius:.375rem;background-color:var(--ui-ink);border:1px solid color-mix(in srgb,var(--palette-mist) 16%,transparent);color:color-mix(in srgb,var(--palette-mist) 90%,transparent);overflow-x:auto}#why .quickstart pre code{display:block;padding:1rem 1.125rem;font-family:ui-monospace,SF Mono,Menlo,Courier,monospace;font-size:.8125rem;line-height:1.6;white-space:pre;text-align:start}#why .quickstart pre code::highlight(code-comment){color:#6f7b8b}#why .quickstart pre code::highlight(code-string){color:#b8d39a}#why .quickstart pre code::highlight(code-keyword){color:#8af}#why .quickstart pre code::highlight(code-attr){color:#e8c275}#why .quickstart pre code::highlight(code-number){color:#f2997a}#why .quickstart pre code::highlight(code-punct){color:#8b94a3}@media(min-width:52rem){#why{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:3rem}#why>section{min-inline-size:0}#why .heritage{grid-row:1 / -1}#why .fast hgroup{margin-block-start:0}#why .quickstart{align-self:start}#why .compare ul span{font-size:clamp(1.75rem,2.6vw,3rem)}}#playground{display:flex;flex-wrap:wrap;align-content:flex-start;gap:2rem 4rem;padding-block:0 5rem;min-block-size:calc(100vh - var(--h-header))}#playground:before{margin-block-start:-1rem;border-block-start:1rem solid var(--ui-ink-grey)}#playground aside{inline-size:20rem;font-size:.875rem}#playground aside>label,#playground aside fieldset{display:flex;justify-content:space-between;flex-wrap:wrap;margin-block-end:2rem;inline-size:100%}#playground aside>label :where(input,select){flex:1 1 100%}#playground aside label span,#playground aside fieldset legend{display:flex;font-weight:500;margin-block-end:.5em;background-color:var(--ui-bg-3q);color:var(--ui-supplement-text)}#playground aside label output{font-weight:400;color:var(--ui-supplement-text-3q)}#playground aside select{min-block-size:2rem}#playground aside input[type=radio]{opacity:0;position:absolute}#playground aside input[type=range]{accent-color:var(--ui-text)}#playground aside fieldset{flex-direction:row;flex-wrap:wrap}#playground aside fieldset label{flex:1;position:relative;block-size:2rem;display:flex;justify-content:center;align-items:center;text-align:center;background-color:var(--ui-panel);border:1px solid var(--ui-rule);border-inline-end-width:0;cursor:pointer}#playground aside fieldset label:has(:checked){background-color:var(--ui-text);color:var(--ui-bg)}#playground aside fieldset label:first-of-type{border-radius:.25rem 0 0 .25rem}#playground aside fieldset label:last-of-type{border-inline-end-width:1px;border-radius:0 .25rem .25rem 0}#playground aside .status{display:flex;align-items:center;margin-block:-.25rem .25rem}#playground aside .status output[name=hit-slices]:before{content:"命中"}#playground aside .status output:not(:empty):not(:has(+output:empty)):not(:last-child):after{content:"・";opacity:.8}#playground aside .status output[name=ttf]:not(:empty):after{content:"內到位"}#playground aside .chips{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.25rem}#playground aside .chips[hidden]{display:none}#playground aside .chips button{flex:1;display:flex;justify-content:center;align-items:center;font-size:.75rem;line-height:2;background-color:var(--ui-panel);border:1px solid var(--ui-rule);border-radius:.25rem;cursor:pointer}#playground aside .chips button[aria-pressed=true]{background-color:var(--ui-text);color:var(--ui-bg)}#playground aside .meta{display:flex;flex-wrap:wrap;margin-block-start:.5em;font-size:.625rem;line-height:1.25;color:var(--ui-supplement-text)}#playground aside .meta output:not(:empty):not(:last-child):after{content:"・";opacity:.8}#playground .panes{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:.5rem;max-block-size:clamp(20rem,40rem,calc(100vh - var(--h-header) - 6rem))}#playground .panes>article{flex:1;min-block-size:0;padding:2rem;overflow:auto;border:1px solid var(--ui-grid);border-radius:.5rem;background-color:var(--ui-bg-3q);-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1)}#playground .tabs{display:flex;flex:none;flex-wrap:wrap;gap:.25rem}#playground .tabs legend{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#playground .tabs input{opacity:0;position:absolute}#playground .tabs label{padding-block:.35rem;padding-inline:1rem;border:1px solid var(--ui-rule);border-radius:.25rem;background-color:var(--ui-panel);font-size:.8125rem;white-space:nowrap;cursor:pointer}#playground .tabs label:has(:checked){background-color:var(--ui-text);color:var(--ui-bg)}#playground article{line-height:1.5;text-align:justify}#playground article [contenteditable]{outline:0}#playground article h1{margin:0}#playground article p:first-of-type{margin-block-start:.5em}.Piano{order:-1;inline-size:100vw;flex-shrink:0;position:sticky;inset-block-start:0;z-index:-10;display:flex;align-items:flex-start;block-size:min(16rem,30vh);margin-inline:calc(50% - 50vw);overflow:hidden;pointer-events:none;--glow: #b0040455}.Piano kbd{padding:0;border:0;font:inherit;transition:background .22s ease,box-shadow .22s ease}.Piano kbd.white{flex:1;block-size:100%;background:linear-gradient(to bottom,#efefef,#fff);border-inline-end:1px solid var(--ui-rule);border-radius:0 0 5px 5px;box-shadow:-1px 0 #ffffff8c inset,0 -3px 4px #0000001f inset}.Piano kbd.black{position:absolute;inset-block-start:0;inset-inline-start:var(--pos);inline-size:calc(var(--wkstep) * .62);block-size:62%;transform:translate(-50%);z-index:2;background:linear-gradient(to bottom,#3a3a3a,#050505);border-radius:0 0 4px 4px;box-shadow:-1px -1px 2px #ffffff2e inset,0 -4px 3px 2px #0000008c inset,0 2px 4px #00000073}.Piano kbd.on{box-shadow:0 0 26px 1px var(--glow)}.Piano kbd.white.on{background:var(--ui-ink)}.Piano kbd.black.on{background:var(--ui-supplement-text)}@media not (min-width:34rem){.Piano{writing-mode:vertical-rl;inline-size:min(34rem,100vh);block-size:min(4.5rem,24vw);margin-inline:0}.Piano kbd.black{transform:translateY(-50%)}}#usage{display:flex;justify-content:space-between;align-items:flex-start;gap:4rem;padding-block:3rem 5rem;min-block-size:calc(100vh - var(--h-header));line-height:1.8}#usage:before{margin-block-start:-1rem;border-block-start:1rem solid var(--ui-ink-grey)}#usage .guide{flex:1;min-inline-size:0}#usage>aside{position:sticky;inset-block-start:var(--h-header);flex:none;inline-size:20rem;max-block-size:calc(100vh - var(--h-header));overflow-y:auto;padding-block:1rem 5rem;font-size:.875rem}#usage>aside h2{margin-block:.75rem;font-size:1rem;font-weight:600;color:var(--ui-supplement-text)}#usage>aside fieldset{display:flex;flex-wrap:wrap;margin-block-end:1rem;padding:0;border:0}#usage>aside fieldset:last-child{padding-block-end:3rem}#usage>aside legend{display:flex;align-items:baseline;gap:.5rem;margin-block-end:.125rem;padding:0;font-weight:500;color:var(--ui-supplement-text)}#usage>aside legend small{font-size:.625rem;font-weight:400;opacity:.7}#usage>aside select{inline-size:100%;min-block-size:2rem;padding-inline:.5rem;border:1px solid var(--ui-rule);border-radius:.25rem;background-color:var(--ui-panel);color:var(--ui-text);font:inherit;font-size:.8125rem}#usage>aside .weights{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin-block-start:.5rem}#usage>aside .weights[hidden]{display:none}#usage>aside .weights .weights-hint{inline-size:100%;font-size:.6875rem;color:var(--ui-supplement-text)}#usage>aside .weights button{padding-block:.15rem;padding-inline:.5rem;border:1px solid var(--ui-rule);border-radius:.25rem;background-color:var(--ui-panel);color:var(--ui-text);font:inherit;font-size:.75rem;cursor:pointer}#usage>aside .weights button[aria-pressed=true]{background-color:var(--ui-text);color:var(--ui-bg)}#usage>aside fieldset.pm,#usage>aside fieldset.cdn,#usage>aside fieldset.display{display:flex;flex-wrap:wrap}#usage>aside :where(fieldset.pm,fieldset.cdn,fieldset.display) legend{inline-size:100%}#usage>aside :where(fieldset.pm,fieldset.cdn,fieldset.display) label{flex:1;display:flex;justify-content:center;align-items:center;block-size:2rem;background-color:var(--ui-panel);border:1px solid var(--ui-rule);border-inline-end-width:0;font-size:.8125rem;cursor:pointer}#usage>aside :where(fieldset.pm,fieldset.cdn,fieldset.display) label:has(:checked){background-color:var(--ui-text);color:var(--ui-bg)}#usage>aside :where(fieldset.pm,fieldset.cdn,fieldset.display) label:first-of-type{border-radius:.25rem 0 0 .25rem}#usage>aside :where(fieldset.pm,fieldset.cdn,fieldset.display) label:last-of-type{border-inline-end-width:1px;border-radius:0 .25rem .25rem 0}#usage>aside :where(fieldset.pm,fieldset.cdn,fieldset.display) label input{position:absolute;opacity:0}@media not (min-width:52rem){#usage{flex-direction:column;align-items:stretch}#usage>aside{position:static;inline-size:100%;max-block-size:none;overflow:visible}#usage .guide{max-inline-size:none}}#usage hgroup{margin-block-end:.5rem}#usage hgroup h1{position:relative;display:inline-block;margin-block:0;font-family:var(--font-alternative);font-size:2.5rem;font-weight:500}#usage hgroup h1:after{content:"";position:absolute;inset-inline-start:0;inset-block-end:.25rem;display:block;inline-size:3rem;border-block-end:3px solid var(--ui-accent)}#usage hgroup p{margin-block:.75rem 0;text-align:justify;color:var(--ui-supplement-text);font-size:1.125rem}#usage .lead{margin-block:0 2rem}#usage>.guide>section{margin-block-start:2rem;padding-block-start:1rem;border-block-start:1px solid var(--ui-grid)}#usage p{margin-block:1em;text-align:justify}#usage h2,#usage h3{margin:0!important}#usage :where(h2,h3)+p{margin-block-start:0}#usage ul{margin-block:1em;padding-inline-start:1.25rem}#usage ul li{margin-block:.5em;text-align:justify}#usage .note{margin-inline:0;margin-block:1.5em;padding-inline-start:1rem;border-inline-start:3px solid var(--ui-grid);font-family:var(--font-accent);color:var(--ui-supplement-text)}#usage .note p{margin-block:0}#usage strong{font-weight:600}#usage :where(p,li,td,h2) code{padding-inline:.25em;border-radius:.25rem;background-color:var(--ui-panel);font-family:ui-monospace,SF Mono,Menlo,Courier,monospace;font-size:.875em}#usage table{inline-size:100%;margin-block:1.5em;border-collapse:collapse;font-size:.9375rem}#usage table th,#usage table td{padding:.625rem .75rem;text-align:start;vertical-align:top;border-block-end:1px solid var(--ui-grid)}#usage table thead th{color:var(--ui-supplement-text);font-weight:600}#usage table td:first-child{white-space:nowrap}#usage pre{margin-block:1em;border-radius:.375rem;background-color:var(--ui-ink);border:1px solid color-mix(in srgb,var(--palette-mist) 16%,transparent);color:color-mix(in srgb,var(--palette-mist) 90%,transparent);overflow-x:auto}#usage pre code{display:block;padding:1rem 1.125rem;font-family:ui-monospace,SF Mono,Menlo,Courier,monospace;font-size:.8125rem;line-height:1.6;white-space:pre;text-align:start}#usage pre code::highlight(code-comment){color:#6f7b8b}#usage pre code::highlight(code-string){color:#b8d39a}#usage pre code::highlight(code-keyword){color:#8af}#usage pre code::highlight(code-attr){color:#e8c275}#usage pre code::highlight(code-number){color:#f2997a}#usage pre code::highlight(code-punct){color:#8b94a3}#faq{padding-block:3rem 5rem;line-height:1.8}#faq:before{margin-block-start:-1rem;border-block-start:1rem solid var(--ui-ink-grey)}#faq .explainer{max-inline-size:42em;color:var(--ui-supplement-text);font-size:.875rem;line-height:1.7}#faq .explainer h2{margin-block:0 .25rem;font-size:1.125rem;font-weight:600}#faq .explainer p{margin-block:.5em;text-align:justify}#faq .credits{margin-block-start:3.5rem;padding-block-start:2rem;border-block-start:1px solid var(--ui-grid)}#faq .credits h2{display:inline;margin:0;font-size:1.5rem;font-weight:600}#faq .credits>p{display:inline;margin:0 0 0 1rem;font-size:.9375rem;color:var(--ui-supplement-text)}#faq .credits ul{display:flex;flex-wrap:wrap;gap:1.25rem 3rem;margin-block:1.5rem 0;padding:0;list-style:none}#faq .credits li{display:flex;flex-direction:column;gap:.15rem}#faq .credits a{align-self:start;color:var(--ui-text);text-decoration:none;font-weight:600;border-block-end:2px solid var(--ui-accent)}#faq .credits a:hover,#faq .credits a:focus-visible{color:var(--ui-accent)}#faq .credits span{color:var(--ui-supplement-text);font-size:.875rem}#faq strong{font-weight:600}#faq code{padding-inline:.25em;border-radius:.25rem;background-color:var(--ui-panel);font-family:ui-monospace,SF Mono,Menlo,Courier,monospace;font-size:.875rem}:is(#playground,#usage) aside .sheet-grip{display:none}@media not (min-width:52rem){#playground{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"piano" "panes" "aside"}#playground>.Piano{grid-area:piano}#playground>.panes{grid-area:panes}#playground>aside{grid-area:aside}@media not (min-width:34rem){#playground{grid-template-areas:"panes" "aside";padding-block-start:1.25rem}#playground>.Piano{grid-area:panes;justify-self:end;margin-block-start:calc(-1 * var(--gutter));align-self:stretch;inline-size:auto;margin-inline-start:-1.25rem;margin-inline-end:-2rem;block-size:40vw}}:is(#playground,#usage)>aside{order:10;position:sticky;inset-block-end:0;z-index:10;inline-size:auto;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) env(safe-area-inset-bottom);background-color:var(--ui-bg-3q);-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1);border-block-start:1px solid var(--ui-grid);max-block-size:var(--sheet-peek, 11.5rem);overflow:hidden;transition:max-block-size .35s ease}:is(#playground,#usage)>aside:has(.sheet-grip input:checked){max-block-size:70vh;overflow-y:auto}:is(#playground,#usage) aside .sheet-grip{display:grid;place-items:center;justify-content:center;margin-block-end:0;position:sticky;inset-block-start:0;z-index:1;inline-size:auto;margin-inline:calc(-1 * var(--gutter));padding-block:.75rem;background-color:inherit;cursor:pointer}:is(#playground,#usage) aside .sheet-grip:before{content:"";inline-size:2.5rem;block-size:.25rem;border-radius:.125rem;background-color:var(--ui-supplement-text-2q)}:is(#playground,#usage) aside .sheet-grip input{position:absolute;opacity:0}:is(#playground,#usage) aside .sheet-grip span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:is(#playground,#usage)>aside :is(>label,fieldset){margin-block-end:1rem}}