.mizu-workshop-navigation{justify-content:space-between;align-items:center;gap:12px;margin-block:-14px;display:flex}.mizu-workshop-navigation nav{flex-wrap:wrap;column-gap:24px;display:flex}.mizu-workshop-navigation nav a{align-items:center;min-height:44px;display:inline-flex}.mizu-workshop-navigation nav a[aria-current]{color:var(--mizu-accent)}.mizu-workshop .mizu-example-head h1{text-wrap:balance}.mizu-workshop a:focus-visible,.mizu-workshop button:focus-visible,.mizu-workshop input:focus-visible,.mizu-workshop select:focus-visible{outline:2px solid var(--mizu-accent);outline-offset:3px}.mizu-workshop-index{border-top:1px solid var(--mizu-line)}.mizu-workshop-index>a{border-bottom:1px solid var(--mizu-line);grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 14rem;align-items:baseline;gap:10px clamp(24px,3vw,48px);padding:30px 0 30px 20px;text-decoration:none;display:grid;position:relative}.mizu-workshop-index>a:before{content:"";background:var(--mizu-accent);transform-origin:top;width:2px;transition:transform .5s var(--mizu-ease-expo);position:absolute;inset:-1px auto 0 0;transform:scaleY(0)}.mizu-workshop-index>a:is(:hover,:focus-visible):before{transform:scaleY(1)}.mizu-workshop-index h2{letter-spacing:-.025em;margin:0;font-size:24px;font-weight:700}.mizu-workshop-index p{max-width:54ch;color:var(--mizu-muted);margin:0;font-size:14px;line-height:1.7}.mizu-workshop-index span{font:11px var(--mizu-font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mizu-muted);justify-self:end;align-items:center;gap:10px;transition:color .3s;display:inline-flex}.mizu-workshop-index svg{transition:transform .4s var(--mizu-ease-expo)}.mizu-workshop-index>a:is(:hover,:focus-visible) span{color:var(--mizu-paper)}.mizu-workshop-index>a:hover svg{transform:translate(5px)}.mizu-workshop-note{color:var(--mizu-muted);max-width:70ch;margin:32px 0 0;font-size:13px;line-height:1.7}.mizu-workshop-note a{text-underline-offset:4px;text-decoration:underline}.mizu-workbench{border:1px solid var(--mizu-line-bright);grid-template-columns:280px minmax(0,1fr);min-width:0;display:grid}.mizu-workbench-controls{border-right:1px solid var(--mizu-line);flex-direction:column;gap:28px;min-width:0;padding:24px;display:flex}.mizu-workbench-controls h2{margin:0;font-size:16px;font-weight:650}.mizu-workbench-controls fieldset{min-width:0}.mizu-workbench-controls .mizu-color-picker{gap:8px}.mizu-workbench-controls .mizu-color-native{justify-content:space-between}.mizu-workbench-controls>.mizu-workshop-reset{align-self:flex-start}.mizu-workbench-controls .mizu-slider{grid-template-columns:minmax(0,1fr) auto!important;row-gap:0!important}.mizu-workbench-controls .mizu-slider>input{grid-area:2/1/auto/-1}.mizu-workbench-result{min-width:0}.mizu-workbench-toolbar{border-bottom:1px solid var(--mizu-line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;min-height:76px;padding:16px 24px;display:flex}.mizu-workbench-toolbar:has(>.mizu-field){align-items:end}.mizu-workbench-toolbar>p{color:var(--mizu-muted);margin:0;font-size:12px}.mizu-workbench-toolbar .mizu-segmented{max-width:100%}.mizu-workbench-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.mizu-theme-preview{min-height:520px;padding:clamp(20px,4vw,48px)}.mizu-theme-preview h2{letter-spacing:-.03em;max-width:18ch;margin:24px 0 12px;font-size:clamp(28px,3vw,42px);font-weight:750;line-height:1.15}.mizu-theme-preview p{max-width:55ch}.mizu-theme-preview .mizu-theme-description{color:var(--mizu-muted);margin-bottom:28px;font-size:14px;line-height:1.7}.mizu-theme-preview .mizu-theme-title-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;display:flex}.mizu-theme-preview .mizu-theme-title-row>span{font-family:var(--mizu-font-mono);color:var(--mizu-muted);font-size:11px}.mizu-theme-preview .mizu-theme-tasks{border-bottom:1px solid var(--mizu-line);gap:16px;margin:0 0 24px;padding:0 0 24px;display:grid}.mizu-theme-preview .mizu-btn{justify-self:start}.mizu-theme-preview .mizu-theme-samples{grid-template-columns:1fr 1fr;gap:28px;display:grid}.mizu-theme-preview .mizu-theme-samples>div{align-content:start;gap:20px;min-width:0;display:grid}.mizu-theme-preview .mizu-tabs{margin:24px 0}.mizu-theme-checks{border-top:1px solid var(--mizu-line);padding:24px}.mizu-theme-checks h2,.mizu-workshop-export h2,.mizu-playground-source h2{margin:0 0 16px;font-size:17px;font-weight:650}.mizu-theme-checks dl{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px;margin:0;display:grid}.mizu-theme-checks dt{color:var(--mizu-muted);font-size:12px}.mizu-theme-checks dd{font:14px var(--mizu-font-mono);align-items:baseline;gap:10px;margin:6px 0 0;display:flex}.mizu-theme-checks dd span{font:11px var(--mizu-font-display);color:var(--mizu-success)}.mizu-theme-checks dd[data-pass=false] span{color:var(--mizu-danger)}.mizu-theme-checks>p{color:var(--mizu-muted);margin:20px 0 0;font-size:12px;line-height:1.6}.mizu-workshop-export{margin-top:40px}.mizu-workshop-export-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px;display:flex}.mizu-workshop-export-heading h2{margin:0}.mizu-playground-stage{background-image:radial-gradient(var(--mizu-line) 1px, transparent 1px);background-size:20px 20px;place-items:center;min-height:330px;padding:40px;display:grid}.mizu-playground-picker{max-width:100%;margin-bottom:24px;overflow-x:auto}.mizu-playground-picker .mizu-segmented{width:max-content}.mizu-inline-playground{border-top:1px solid var(--mizu-line);padding:20px}.mizu-playground-stage>div{width:100%;max-width:460px}.mizu-playground-stage>div[data-piece=button],.mizu-playground-stage>div[data-piece=badge]{justify-content:center;display:flex}.mizu-playground-readout{border-block:1px solid var(--mizu-line);font:11px var(--mizu-font-mono);color:var(--mizu-muted);align-items:center;min-height:44px;padding:12px 24px;display:flex}.mizu-playground-source{padding:24px}.mizu-playground-source .mizu-code-block{margin:0}.mizu-workshop-reset{color:var(--mizu-muted);cursor:pointer;text-underline-offset:4px;background:0 0;border:0;min-height:44px;padding:0;font-size:12px;text-decoration:underline}.mizu-block-showcase{border-top:1px solid var(--mizu-line);padding-top:32px;scroll-margin-top:96px}.mizu-block-showcase+.mizu-block-showcase{margin-top:72px}.mizu-block-showcase>header{flex-wrap:wrap;justify-content:space-between;align-items:start;gap:8px 24px;margin-bottom:28px;display:flex}.mizu-block-showcase h2{font:650 clamp(26px, 3vw, 40px) / 1.1 var(--mizu-font-display);letter-spacing:-.03em;margin:0 0 12px}.mizu-block-showcase header p{max-width:60ch;color:var(--mizu-muted);margin:0;line-height:1.6}.mizu-block-showcase-source{min-height:44px;color:var(--mizu-muted);font:11px var(--mizu-font-mono);letter-spacing:.18em;text-transform:uppercase;align-items:center;gap:10px;text-decoration:none;transition:color .3s;display:inline-flex}.mizu-block-showcase-source:hover{color:var(--mizu-paper)}.mizu-block-showcase-source svg{color:var(--mizu-accent)}.mizu-block-showcase-frame{border:1px solid var(--mizu-line-bright)}.mizu-block-showcase-install{border-bottom:1px solid var(--mizu-line);background:var(--mizu-ink-2);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;padding:8px 12px 8px 20px;display:flex}.mizu-block-showcase-install code{min-width:0;color:var(--mizu-paper);font:12px / 1.6 var(--mizu-font-mono);overflow-wrap:anywhere}.mizu-block-showcase-stage{padding:32px}@media (max-width:960px){.mizu-workbench{grid-template-columns:230px minmax(0,1fr)}.mizu-workbench-controls{padding:20px}.mizu-theme-preview .mizu-theme-samples{grid-template-columns:1fr}}@media (max-width:700px){.mizu-workbench{grid-template-columns:minmax(0,1fr)}.mizu-workbench-controls{border-right:0;border-bottom:1px solid var(--mizu-line);grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;display:grid}.mizu-workbench-controls>h2,.mizu-workbench-controls>.mizu-field,.mizu-workbench-controls>.mizu-slider,.mizu-workbench-controls>.mizu-workshop-reset{grid-column:1/-1}.mizu-workbench-controls>.mizu-workshop-reset{justify-self:start}.mizu-workbench-controls .mizu-color-native{flex-wrap:wrap}.mizu-workbench-toolbar{padding:16px 20px}.mizu-theme-checks{padding:20px}.mizu-playground-stage{padding:28px 20px}.mizu-playground-source{padding:20px}.mizu-workshop-index>a{grid-template-columns:minmax(0,1fr);padding:24px 0 24px 16px}.mizu-workshop-index h2{font-size:22px}.mizu-workshop-index span{justify-self:start}}@media (max-width:640px){.mizu-block-showcase+.mizu-block-showcase{margin-top:48px}.mizu-block-showcase-install{padding-left:16px}.mizu-block-showcase-stage{padding:20px 16px}.mizu-workshop-navigation nav{column-gap:16px}}@media (prefers-reduced-motion:reduce){.mizu-workshop-index>a:before,.mizu-workshop-index svg{transition:none}}