:root{scroll-padding-top:5rem}body{background-color:var(--hn-color-bg)}.doc-brand-ui{color:var(--hn-color-primary-text)}.doc-search{position:relative;margin:0 0 var(--hn-space-4)}.doc-search .hn-input{padding-inline-end:2.25rem}.doc-search__kbd{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);pointer-events:none}.doc-search:focus-within .doc-search__kbd{opacity:0}.doc-search__empty{padding:0 .875rem;color:var(--hn-color-text-subtle);font-size:var(--hn-text-sm)}.doc-nav-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--hn-space-2);font-size:var(--hn-text-xs)}.doc-header__title{display:none;align-items:center;gap:var(--hn-space-2);margin:0;font-family:var(--hn-font-display);font-weight:var(--hn-weight-black)}.doc-header__title .hn-logo{width:1.5rem;height:1.5rem}@media(min-width:1024px){.doc-burger{display:none}}@media(max-width:1023.98px){.doc-header__title{display:inline-flex}}.doc-main{width:100%;max-width:68rem;margin:0 auto;padding:0 clamp(1rem,4vw,3rem) var(--hn-space-16);outline:none}.doc-section{padding-top:var(--hn-space-20)}.doc-section.doc-section--hero{padding-top:var(--hn-space-6)}.doc-section__header{display:grid;gap:var(--hn-space-3);max-width:46rem;margin-bottom:var(--hn-space-8)}.doc-section__header .hn-h2{position:relative}.doc-anchor{margin-inline-start:.4em;color:var(--hn-color-primary-border);font-size:.6em;text-decoration:none;opacity:0;transition:opacity var(--hn-duration-fast)}.doc-section__header:hover .doc-anchor,.doc-anchor:focus-visible{opacity:1}.doc-h3{margin:var(--hn-space-12) 0 var(--hn-space-4);font-family:var(--hn-font-display);font-size:var(--hn-text-2xl);font-weight:var(--hn-weight-bold);line-height:var(--hn-leading-snug)}.doc-h4{margin:var(--hn-space-8) 0 var(--hn-space-3);font-size:var(--hn-text-md);font-weight:var(--hn-weight-bold)}.doc-text{max-width:46rem;margin:0 0 var(--hn-space-4);color:var(--hn-color-text-muted);line-height:var(--hn-leading-relaxed)}.doc-text code,.doc-list code,.doc-api code:not(.hn-code){padding:.1em .35em;border-radius:var(--hn-radius-xs);background:var(--hn-color-bg-muted);color:var(--hn-color-text);font-family:var(--hn-font-mono);font-size:.875em}.doc-list{display:grid;gap:var(--hn-space-2);max-width:46rem;margin:0 0 var(--hn-space-6);padding-inline-start:1.25rem;color:var(--hn-color-text-muted);line-height:var(--hn-leading-normal)}.doc-list li::marker{color:var(--hn-color-primary)}.doc-columns{display:grid;gap:var(--hn-space-6)}@media(min-width:900px){.doc-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}.doc-hero{position:relative;isolation:isolate;margin:0;padding:clamp(2.5rem,7vw,5.5rem) clamp(1.5rem,5vw,4rem);overflow:hidden;border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-2xl)}.doc-hero>hn-petals{z-index:-1}.doc-hero__kanji{position:absolute;top:50%;right:clamp(.5rem,4vw,3.5rem);z-index:-1;margin:0;color:var(--hn-color-primary-soft-hover);font-family:var(--hn-font-display);font-size:clamp(6rem,16vw,13rem);font-weight:var(--hn-weight-black);line-height:1.05;text-align:center;transform:translateY(-50%);user-select:none}.doc-hero__content{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--hn-space-5);max-width:40rem}@media(max-width:720px){.doc-hero__kanji{display:none}.doc-section{padding-top:var(--hn-space-12)}}.doc-hero__title{margin:0}.doc-hero__title span{color:var(--hn-color-primary-text)}.doc-hero__actions{display:flex;flex-wrap:wrap;gap:var(--hn-space-3);margin-top:var(--hn-space-2)}.doc-hero__install{display:flex;align-items:center;gap:var(--hn-space-2);width:fit-content;max-width:100%;padding:.375rem .375rem .375rem 1rem;border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-full);background:color-mix(in srgb,var(--hn-color-surface) 85%,transparent);font-family:var(--hn-font-mono);font-size:var(--hn-text-sm);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.doc-hero__install code{min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.doc-pillars{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--hn-space-4);margin-top:var(--hn-space-8)}@media(min-width:600px){.doc-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1240px){.doc-pillars{grid-template-columns:repeat(4,minmax(0,1fr))}}.doc-pillar{display:grid;align-content:start;gap:var(--hn-space-2);padding:var(--hn-space-5);border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-xl);background:var(--hn-color-surface)}.doc-pillar hn-icon{width:1.5rem;height:1.5rem;color:var(--hn-color-primary)}.doc-pillar h3{margin:0;font-size:var(--hn-text-md);font-weight:var(--hn-weight-bold)}.doc-pillar p{margin:0;color:var(--hn-color-text-muted);font-size:var(--hn-text-sm);line-height:var(--hn-leading-normal)}.doc-demo{margin:0 0 var(--hn-space-6);overflow:hidden;border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-xl);background:var(--hn-color-surface)}.doc-demo__preview{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--hn-space-3);min-width:0;padding:clamp(1.25rem,3vw,2.25rem);background-color:var(--hn-color-bg);background-image:radial-gradient(color-mix(in srgb,var(--hn-color-border-strong) 55%,transparent) 1px,transparent 1px);background-size:18px 18px}.doc-demo__preview>*{min-width:0}.doc-demo__preview.is-block{display:block}.doc-demo__preview.is-stack{flex-direction:column;align-items:stretch}.doc-demo__preview.is-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));align-items:start;gap:var(--hn-space-5)}.doc-demo__preview.is-center{justify-content:center}.doc-demo__preview.is-flush{padding:0}.doc-demo__source{border-top:1px solid var(--hn-color-border)}.doc-demo__source>summary{display:flex;align-items:center;gap:var(--hn-space-2);padding:.625rem 1rem;color:var(--hn-color-text-muted);font-size:var(--hn-text-sm);font-weight:var(--hn-weight-bold);list-style:none;cursor:pointer;transition:color var(--hn-duration-fast),background-color var(--hn-duration-fast)}.doc-demo__source>summary::-webkit-details-marker{display:none}.doc-demo__source>summary:before{content:"";width:1rem;height:1rem;background-color:currentColor;-webkit-mask:var(--hn-shape-chevron-right) center / contain no-repeat;mask:var(--hn-shape-chevron-right) center / contain no-repeat;transition:transform var(--hn-duration-normal) var(--hn-ease-bloom)}.doc-demo__source[open]>summary:before{transform:rotate(90deg)}.doc-demo__source>summary:hover{background:var(--hn-color-hover);color:var(--hn-color-text)}.doc-demo__source>summary:focus-visible{outline:none;box-shadow:var(--hn-focus-ring-inset)}.doc-demo__source .doc-code{margin:0;border:0;border-radius:0}.doc-code{margin:0 0 var(--hn-space-6);overflow:hidden;border:1px solid var(--hn-yoru-700);border-radius:var(--hn-radius-lg);background:var(--hn-yoru-900);color:var(--hn-yoru-100)}.doc-code__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--hn-space-2);padding:.25rem .375rem .25rem 1rem;border-bottom:1px solid var(--hn-yoru-700);background:var(--hn-yoru-800)}.doc-code__lang{color:var(--hn-yoru-300);font-family:var(--hn-font-mono);font-size:var(--hn-text-xs);letter-spacing:var(--hn-tracking-wide)}.doc-code__bar hn-copy-button{--hn-color-text-muted: var(--hn-yoru-300);--hn-color-text: var(--hn-yoru-50);--hn-color-hover: rgb(255 255 255 / .08)}.doc-code pre{margin:0;padding:var(--hn-space-4) var(--hn-space-5);overflow-x:auto;font-family:var(--hn-font-mono);font-size:.8125rem;line-height:1.7;tab-size:2;scrollbar-width:thin;scrollbar-color:var(--hn-yoru-600) transparent;outline:none}.doc-code pre:focus-visible{box-shadow:inset 0 0 0 2px var(--hn-sakura-400)}.hljs-tag,.hljs-name,.hljs-selector-tag{color:var(--hn-sakura-300)}.hljs-attr,.hljs-attribute,.hljs-property,.hljs-selector-class,.hljs-selector-pseudo{color:var(--hn-fuji-300)}.hljs-string,.hljs-template-tag,.hljs-regexp{color:var(--hn-matcha-300)}.hljs-keyword,.hljs-built_in,.hljs-type,.hljs-literal{color:var(--hn-ai-300)}.hljs-number,.hljs-variable,.hljs-template-variable,.hljs-meta{color:var(--hn-kin-300)}.hljs-title,.hljs-title.function_,.hljs-function{color:var(--hn-sakura-200)}.hljs-comment,.hljs-quote{color:var(--hn-yoru-400);font-style:italic}.hljs-punctuation,.hljs-operator{color:var(--hn-yoru-300)}.doc-palette{display:grid;gap:var(--hn-space-3);margin-bottom:var(--hn-space-6)}.doc-palette__name{display:flex;align-items:center;gap:var(--hn-space-3)}.doc-palette__name small{display:block;color:var(--hn-color-text-muted);font-size:var(--hn-text-sm)}.doc-palette__kanji{display:grid;place-items:center;min-width:2.75rem;padding:0 .375rem;height:2.75rem;border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-md);background:var(--hn-color-surface);font-family:var(--hn-font-display);font-size:var(--hn-text-lg);font-weight:var(--hn-weight-bold)}.doc-palette__swatches{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:.375rem}@media(max-width:720px){.doc-palette__swatches{grid-template-columns:repeat(6,minmax(0,1fr))}}.doc-swatch{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;height:4.5rem;padding:.375rem .5rem;border:1px solid color-mix(in srgb,var(--hn-color-text) 8%,transparent);border-radius:var(--hn-radius-md);background:var(--swatch);color:var(--ink);font:inherit;text-align:start;cursor:copy;transition:transform var(--hn-duration-normal) var(--hn-ease-bloom),box-shadow var(--hn-duration-normal)}.doc-swatch:hover{box-shadow:var(--hn-shadow-md);transform:translateY(-3px)}.doc-swatch:focus-visible{outline:none;box-shadow:var(--hn-focus-ring)}.doc-swatch__step{font-size:var(--hn-text-xs);font-weight:var(--hn-weight-bold)}.doc-swatch__hex{font-family:var(--hn-font-mono);font-size:.625rem;opacity:.8}.doc-chip{display:inline-block;width:3.5rem;height:1.75rem;border:1px solid rgb(128 128 128 / .35);border-radius:var(--hn-radius-sm);background-color:var(--chip);background-image:linear-gradient(45deg,rgb(128 128 128 / .15) 25%,transparent 25%,transparent 75%,rgb(128 128 128 / .15) 75%),linear-gradient(45deg,rgb(128 128 128 / .15) 25%,transparent 25%,transparent 75%,rgb(128 128 128 / .15) 75%);background-position:0 0,4px 4px;background-size:8px 8px;background-blend-mode:normal;box-shadow:inset 0 0 0 100px var(--chip);vertical-align:middle}.doc-scale,.doc-typescale{display:grid;gap:var(--hn-space-2)}.doc-scale__row,.doc-typescale__row{display:grid;grid-template-columns:9rem minmax(0,1fr) 5rem;align-items:center;gap:var(--hn-space-4);font-size:var(--hn-text-sm)}.doc-scale__row code,.doc-typescale__row code{color:var(--hn-color-text-muted);font-family:var(--hn-font-mono);font-size:var(--hn-text-xs)}.doc-scale__bar{height:.75rem;border-radius:var(--hn-radius-full);background:linear-gradient(90deg,var(--hn-color-primary-border),var(--hn-color-primary))}.doc-scale__value{color:var(--hn-color-text-subtle);font-family:var(--hn-font-mono);font-size:var(--hn-text-xs);text-align:end}.doc-typescale__sample{overflow:hidden;font-family:var(--hn-font-display);line-height:1.2;white-space:nowrap;text-overflow:ellipsis}.doc-radius,.doc-shadows{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:var(--hn-space-4)}.doc-radius__item{display:grid;justify-items:center;gap:var(--hn-space-2);font-size:var(--hn-text-xs)}.doc-radius__item span{width:100%;height:4.5rem;border:2px solid var(--hn-color-primary-border);background:var(--hn-color-primary-soft)}.doc-radius__item code,.doc-shadows__item code{color:var(--hn-color-text-muted);font-family:var(--hn-font-mono)}.doc-shadows{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--hn-space-6)}.doc-shadows__item{display:grid;place-items:center;height:6rem;border-radius:var(--hn-radius-lg);background:var(--hn-color-surface-raised);font-size:var(--hn-text-xs)}.doc-easings{display:grid;gap:var(--hn-space-4);width:100%}.doc-easing{display:grid;grid-template-columns:minmax(0,1fr) 10rem;align-items:center;column-gap:var(--hn-space-4);font-size:var(--hn-text-sm)}.doc-easing code{font-family:var(--hn-font-mono);font-size:var(--hn-text-xs)}.doc-easing small{grid-column:2;color:var(--hn-color-text-subtle);font-size:var(--hn-text-xs)}.doc-easing__track{position:relative;grid-row:span 2;height:2rem;border-radius:var(--hn-radius-full);background:var(--hn-color-bg-muted)}.doc-easing__dot{position:absolute;top:.25rem;left:.25rem;width:1.5rem;height:1.5rem;background:var(--hn-color-primary);-webkit-mask:var(--hn-shape-sakura) center / contain no-repeat;mask:var(--hn-shape-sakura) center / contain no-repeat;transition-property:left,transform;transition-duration:1.1s}.doc-easings.is-playing .doc-easing__dot{left:calc(100% - 1.75rem);transform:rotate(144deg)}.doc-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:var(--hn-space-2);width:100%}.doc-icon{display:grid;justify-items:center;gap:var(--hn-space-2);padding:var(--hn-space-4) var(--hn-space-2) var(--hn-space-3);border:1px solid transparent;border-radius:var(--hn-radius-md);background:transparent;color:var(--hn-color-text);font:inherit;cursor:copy;transition:background-color var(--hn-duration-fast),border-color var(--hn-duration-fast),color var(--hn-duration-fast)}.doc-icon hn-icon{width:1.5rem;height:1.5rem}.doc-icon span{max-width:100%;overflow:hidden;color:var(--hn-color-text-muted);font-size:.6875rem;text-overflow:ellipsis;white-space:nowrap}.doc-icon:hover{border-color:var(--hn-color-primary-border);background:var(--hn-color-primary-soft);color:var(--hn-color-primary-text)}.doc-icon:focus-visible{outline:none;box-shadow:var(--hn-focus-ring)}.doc-api{margin:0 0 var(--hn-space-6);border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-lg);background:var(--hn-color-surface)}.doc-api>summary{padding:.75rem 1rem;font-weight:var(--hn-weight-bold);cursor:pointer}.doc-api>summary code{color:var(--hn-color-primary-text);font-family:var(--hn-font-mono)}.doc-api .hn-table-wrap{margin:0 1rem}.doc-api__meta{display:grid;gap:var(--hn-space-2);padding:var(--hn-space-4);font-size:var(--hn-text-sm)}.doc-api__meta p{margin:0}.doc-api td:last-child{color:var(--hn-color-text-muted)}.doc-frame{width:100%;overflow-x:auto;border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-xl);background:var(--hn-color-bg)}.doc-frame hn-sidebar{--hn-sidebar-height: 26rem;position:relative}.doc-frame .hn-app{min-width:34rem;min-height:26rem}.doc-hover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(11rem,100%),1fr));gap:var(--hn-space-4);width:100%}.doc-hover-tile{display:grid;place-items:center;align-content:center;gap:var(--hn-space-1);min-height:7rem;padding:var(--hn-space-4);border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-lg);background:var(--hn-color-surface);color:var(--hn-color-text);text-align:center;cursor:default}.doc-hover-tile code{color:var(--hn-color-primary-text);font-family:var(--hn-font-mono);font-size:var(--hn-text-xs)}.doc-hover-tile small{color:var(--hn-color-text-muted);font-size:var(--hn-text-xs)}.doc-photo{display:grid;place-items:center;height:100%;min-height:9rem;color:var(--hn-color-on-primary);font-family:var(--hn-font-display);font-size:var(--hn-text-2xl);font-weight:var(--hn-weight-bold)}.doc-photo--1{background:linear-gradient(135deg,var(--hn-sakura-300),var(--hn-sakura-600))}.doc-photo--2{background:linear-gradient(135deg,var(--hn-fuji-300),var(--hn-fuji-600))}.doc-photo--3{background:linear-gradient(135deg,var(--hn-matcha-300),var(--hn-matcha-600))}.doc-photo--4{background:linear-gradient(135deg,var(--hn-ai-300),var(--hn-ai-600))}.doc-photo--5{background:linear-gradient(135deg,var(--hn-kin-300),var(--hn-beni-500))}.doc-petals-stage{position:relative;display:grid;place-items:center;width:100%;min-height:16rem;overflow:hidden;border-radius:var(--hn-radius-lg)}.doc-theme-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:var(--hn-space-4);width:100%}.doc-theme-pair>div{display:grid;gap:var(--hn-space-3);padding:var(--hn-space-5);border:1px solid var(--hn-color-border);border-radius:var(--hn-radius-xl);background:var(--hn-color-bg);color:var(--hn-color-text)}.doc-steps-host{width:100%}.doc-footer{display:flex;align-items:center;gap:var(--hn-space-3);margin-top:var(--hn-space-20);padding-top:var(--hn-space-6);border-top:1px solid var(--hn-color-border);color:var(--hn-color-text-subtle);font-size:var(--hn-text-sm)}.doc-footer p{margin:0}