.mi-demos{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;display:grid}.mi-demo{height:100%;color:var(--ink);background:var(--sheet);border:1px solid var(--line-soft);border-radius:var(--r-m);padding:var(--sp-12);flex-direction:column;text-decoration:none;display:flex}.mi-demo-media{border-radius:var(--r-s);display:block;position:relative}.mi-demo-img{aspect-ratio:16/10;border-radius:var(--r-s)}.mi-demo-img>picture>img{height:100%;inset:0;transform:none}.mi-demo-body{gap:var(--sp-4);padding:var(--sp-16) var(--sp-8) var(--sp-8);display:grid;position:relative}.mi-demo-body .mono{font-size:var(--fs-xs);color:var(--cyan-deep)}.mi-demo-body b{font-size:var(--fs-l);padding-right:var(--sp-48);font-weight:800;line-height:1.4}.mi-demo-body small{font-size:var(--fs-s);color:var(--ink-2);padding-right:var(--sp-48);line-height:1.7}.mi-demo-body .arw{right:var(--sp-8);bottom:var(--sp-8);position:absolute}.mi-list{margin:0;padding:0;list-style:none}.mi-item{gap:var(--sp-8) var(--sp-24);padding:var(--sp-16) 0;border-bottom:1px solid var(--line-soft);scroll-margin-top:calc(var(--header-h) + 80px);grid-template-columns:4rem minmax(0,1fr) auto;align-items:start;display:grid}.mi-item:target{background:color-mix(in srgb,var(--cyan) 6%,transparent)}.mi-code{font-size:var(--fs-s);color:var(--cyan-deep);padding-top:2px;font-weight:700}.mi-main b{font-size:var(--fs-m);font-weight:800;line-height:1.5;display:block}.mi-main p{margin:var(--sp-4) 0 0;font-size:var(--fs-s);color:var(--ink-2);line-height:1.8}.mi-meta{align-items:center;gap:var(--sp-8) var(--sp-24);font-size:var(--fs-xs);flex-wrap:wrap;display:flex}.mi-main .mi-meta,.mi-main .mi-refs{font-size:var(--fs-xs);color:var(--ink-3)}.mi-refs a{margin-right:var(--sp-12);color:var(--ink-2);overflow-wrap:anywhere}@media (pointer:coarse){.mi-refs a{margin-block:-6px;padding-block:12px;display:inline-block}}.mi-go{align-self:center;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-16);font-size:var(--fs-s);color:var(--paper);background:var(--ink);white-space:nowrap;border-radius:999px;font-weight:700;text-decoration:none;display:inline-flex}.mi-go .arw{color:var(--paper)}.mi-note{margin:var(--sp-48) 0 0;font-size:var(--fs-s);color:var(--ink-3);line-height:1.9}@media (width<=1023px){.mi-demos{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=719px){.mi-demos{grid-template-columns:minmax(0,1fr)}.mi-item{grid-template-columns:3rem minmax(0,1fr)}.mi-go{grid-column:2;justify-self:start}}.mi-pager{margin-top:var(--sp-48);grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;display:grid}.mi-pager a{gap:var(--sp-4);padding:var(--sp-16) var(--sp-24);border:1px solid var(--line);border-radius:var(--r-m);color:var(--ink);transition:border-color var(--dur-color);font-weight:800;text-decoration:none;display:grid}.mi-pager a:hover{border-color:var(--ink)}.mi-pager small{font-size:var(--fs-xs);color:var(--ink-3);font-weight:500}.mi-pager .mi-up{text-align:center}.mi-pager a:last-child{text-align:right}.mt-doors{gap:var(--sp-48) 24px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.mt-door{gap:var(--sp-16);padding:var(--sp-24);color:var(--ink);background:var(--sheet);border:1px solid var(--line-soft);border-radius:var(--r-l);text-decoration:none;display:grid;position:relative}.mt-head{align-items:baseline;gap:var(--sp-4) var(--sp-16);padding-right:var(--sp-48);grid-template-columns:auto minmax(0,1fr);display:grid}.mt-head .mono{font-size:var(--fs-4xl);color:var(--cyan-deep);grid-row:1/3;font-weight:700;line-height:1}.mt-head b{font-size:var(--fs-2xl);font-weight:800;line-height:1.3}.mt-head small{font-size:var(--fs-s);color:var(--ink-3);font-weight:700}.mt-lead{color:var(--ink-2);padding-right:var(--sp-48);line-height:1.9}.mt-thumbs{gap:var(--sp-8);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.mt-thumb{aspect-ratio:16/10;border-radius:var(--r-s)}.mt-thumb>picture>img{height:100%;inset:0;transform:none}.mt-door .arw{right:var(--sp-24);top:var(--sp-24);position:absolute}.mt-demos{margin:var(--sp-12) 0 0;padding:0;list-style:none}.mt-demos a{align-items:baseline;gap:var(--sp-12);padding:var(--sp-8) var(--sp-4);border-bottom:1px solid var(--line-soft);font-size:var(--fs-s);color:var(--ink);font-weight:700;text-decoration:none;display:flex}.mt-demos a:hover{background:var(--paper-2)}.mt-demos .mono{font-size:var(--fs-xs);color:var(--cyan-deep);min-width:2.6em}@media (width<=1023px){.mt-doors{grid-template-columns:minmax(0,1fr)}}@media (width<=719px){.mi-pager{grid-template-columns:minmax(0,1fr)}.mi-pager a,.mi-pager .mi-up,.mi-pager a:last-child{text-align:left}}.mtr{align-items:center;gap:var(--sp-8);display:inline-flex}.mtr-k{color:var(--ink-3)}.mtr-bar{gap:2px;display:inline-flex}.mtr-bar i{border:1px solid var(--line);background:0 0;width:14px;height:6px}.mtr-bar i.on{background:var(--ink);border-color:var(--ink)}.mtr-bar i.rng{border-color:var(--ink-3);background:repeating-linear-gradient(135deg,var(--ink-3) 0 1px,transparent 1px 3px)}.mtr-wow .mtr-bar i.on{background:var(--cyan-deep);border-color:var(--cyan-deep)}.mtr-note{color:var(--ink-3);font-size:inherit}.mi-live{align-items:center;gap:var(--sp-8);padding:2px var(--sp-12) 2px var(--sp-8);border:1px solid var(--line);color:var(--ink);border-radius:999px;font-weight:700;text-decoration:none;display:inline-flex}.mi-live:before{content:"";background:var(--cyan);width:6px;height:6px;box-shadow:var(--cyan-glow-soft);border-radius:50%}.mi-live small{font-size:inherit;color:var(--ink-2);font-weight:500}a.mi-live:hover{border-color:var(--ink)}@media (pointer:coarse){a.mi-live{min-height:44px}}.mi-item.is-avoid{padding-inline:var(--sp-12);background:repeating-linear-gradient(135deg,transparent 0 10px,var(--line-soft) 10px 11px);border:1px dashed var(--line);border-radius:var(--r-s)}.mi-avoid{align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4);font-size:var(--fs-xs);color:var(--ink-2);font-weight:700;display:inline-flex}.mi-item.is-avoid b{color:var(--ink-2)}.mi-filter{align-items:center;gap:var(--sp-8);margin:var(--sp-32) 0 var(--sp-16);scroll-margin-top:calc(var(--header-h) + 16px);flex-wrap:wrap;display:flex}.mi-filter-k{font-size:var(--fs-xs);color:var(--ink-3);margin-right:var(--sp-4)}.mi-filter button{align-items:center;gap:var(--sp-8);min-height:40px;padding:0 var(--sp-16);font:inherit;font-size:var(--fs-s);color:var(--ink);border:1px solid var(--line);cursor:pointer;transition:border-color var(--dur-color);background:0 0;border-radius:999px;font-weight:700;display:inline-flex}.mi-filter button:hover{border-color:var(--ink)}.mi-filter button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.mi-filter button:focus-visible{outline:2px solid var(--entrust);outline-offset:2px}.mi-filter small{font-size:var(--fs-xs);opacity:.6;font-variant-numeric:tabular-nums}.mi-filter .mi-filter-clear{border-style:dashed}.mi-filter-n{font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums;margin-left:auto}@media (pointer:coarse){.mi-filter button{min-height:44px}}.mi-empty{margin:var(--sp-24) 0 0;color:var(--ink-2)}.mi-item[hidden]{display:none}.mm{padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-m);background:var(--sheet);margin:0}.mm-cap{align-items:baseline;gap:var(--sp-12);margin-bottom:var(--sp-16);display:flex}.mm-cap b{font-size:var(--fs-l);font-weight:800}.mm-cap span{font-size:var(--fs-xs);color:var(--ink-3);padding:2px var(--sp-8);border:1px solid var(--line);border-radius:999px}.mm-grid{padding:0 0 var(--sp-24) 0;grid-template-rows:repeat(5,auto) auto;grid-template-columns:3.5rem 2fr 1fr 2fr 1fr 2fr 1fr 2fr;display:grid;position:relative}.mm-grid>[style]{grid-column:var(--dc);grid-row:var(--dr)}.mm-slot{place-content:center;gap:var(--sp-4);min-height:56px;padding:var(--sp-8) var(--sp-4);border-left:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);flex-wrap:wrap;display:flex}.mm-slot.is-hc{border-left-style:dashed}.mm-slot.is-hr{min-height:28px}.mm-tick{font-size:var(--fs-xs);color:var(--ink-2);padding:var(--sp-8) 0;justify-content:center;align-items:center;font-weight:700;display:flex}.mm-ty{color:var(--cyan-deep);letter-spacing:.05em;justify-content:flex-start}.mm-axis{font-size:var(--fs-xs);color:var(--ink-3);position:absolute}.mm-axis-x{bottom:0;right:0}.mm-axis-y{top:-1.6em;left:0}.mm-pt{min-width:2.6rem;height:28px;padding:0 var(--sp-8);font-size:var(--fs-xs);color:var(--ink);background:var(--paper);border:1px solid var(--line);transition:opacity var(--dur-color),border-color var(--dur-color);border-radius:999px;justify-content:center;align-items:center;font-weight:700;text-decoration:none;display:inline-flex}.mm-pt:hover{border-color:var(--ink)}.mm-pt.is-demo{background:var(--ink);color:var(--paper);border-color:var(--ink)}.mm-pt.is-live{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--cyan)}.mm-pt.is-range{border-style:dashed}.mm-pt.is-demo.is-range{border-style:dashed;border-color:var(--paper)}.mm-pt.is-off{opacity:.18}@media (pointer:coarse){.mm-pt{min-width:44px;height:44px}}.mm-n,.mm-m,.mm-only-m{display:none}.mm-legend{gap:var(--sp-8) var(--sp-24);margin:var(--sp-16) 0 0;font-size:var(--fs-xs);color:var(--ink-2);flex-wrap:wrap;display:flex}.mm-legend>span{align-items:center;gap:var(--sp-8);display:inline-flex}.mm-legend>.mm-only-m{display:none}.mm-legend a{color:var(--ink-2)}@media (pointer:coarse){.mm-legend a{justify-content:center;align-items:center;min-width:44px;min-height:44px;display:inline-flex}}.mm-key{border:1px solid var(--line);background:var(--paper);border-radius:999px;width:18px;height:12px;display:inline-block}.mm-key.is-demo{background:var(--ink);border-color:var(--ink)}.mm-key.is-live{box-shadow:0 0 0 1px var(--paper),0 0 0 2px var(--cyan)}.mm-key.is-range{border-style:dashed;border-color:var(--ink-2)}@media (width<=719px){.mm{padding:var(--sp-16)}.mm-grid{padding:var(--sp-24) 0 0;grid-template-rows:auto repeat(7,auto);grid-template-columns:3.6rem repeat(5,minmax(0,1fr))}.mm-grid>[style]{grid-column:var(--mc);grid-row:var(--mr)}.mm-pt,.mm-d{display:none}.mm-m{display:inline}.mm-slot{border-left:1px solid var(--line-soft);min-height:0;padding:2px}.mm-slot.is-hc{border-left-style:solid}.mm-slot.is-hr{min-height:0}.mm-slot:empty{min-height:12px}.mm-n{width:100%;min-height:44px;font:700 var(--fs-s) var(--mono);color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent);border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer;justify-content:center;align-items:center;display:flex}.mm-n[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.mm-ty{justify-content:center}.mm-tx{justify-content:flex-start}.mm-axis-x{inset:0 auto auto 0}.mm-axis-y{top:0;left:auto;right:0}.mm-legend .mm-key.is-demo,.mm-legend .mm-key.is-live,.mm-legend .mm-key.is-range,.mm-legend>span:nth-child(-n+3){display:none}.mm-legend>.mm-only-m{display:inline}}@media (width<=359px){.mm{padding:var(--sp-12)}.mm-grid{grid-template-columns:2.6rem repeat(5,minmax(0,1fr))}.mm-slot{padding:0}}@media (pointer:coarse){.mt-demos a{min-height:44px}}