.lab-page{padding-bottom:72px}body.has-open-console .lab-page{padding-bottom:calc(72px + min(38vh,300px))}body.demo-site .footer{padding-bottom:88px}.lab-section{margin-bottom:56px;scroll-margin-top:calc(var(--nav-h) + 58px + 16px)}.section-head{margin-bottom:18px}.section-title{margin:6px 0 0}.section-sub{margin:8px 0 0;max-width:62ch;color:var(--muted)}.section-sub code{padding:1px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--text);font-size:.86em}.lab-module{--mod-color: var(--led);position:relative;display:flex;flex-direction:column;gap:16px;min-width:0;padding:18px;border:1px solid var(--hw-line-2);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--mod-color) 7%,transparent),transparent 90px),var(--hw-panel);box-shadow:var(--shadow),inset 0 1px #ffffff0a;color:var(--hw-text);overflow:hidden}.lab-module:before{content:"";position:absolute;inset:0 18px auto;height:2px;border-radius:0 0 2px 2px;background:var(--mod-color);box-shadow:0 0 12px var(--mod-color);opacity:.85}.lab-module__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.lab-module__id{display:flex;align-items:center;gap:9px;min-width:0}.lab-module__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--mod-color);box-shadow:0 0 8px var(--mod-color)}.lab-module__name{color:var(--mod-color);font:600 14px/1 var(--font-mono)}.lab-module__title{color:var(--hw-muted);font-size:14px}.lab-module__note{margin:-6px 0 0;color:var(--hw-muted);font-size:14px;line-height:1.5}.lab-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--hw-line-2);border-radius:999px;background:var(--hw-ink);color:var(--hw-muted);font:500 12px/1 var(--font-mono);white-space:nowrap}.lab-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--led-off);transition:background-color .15s ease,box-shadow .15s ease}.lab-pill.is-on{border-color:color-mix(in srgb,var(--mod-color) 55%,var(--hw-line-2));color:var(--hw-text)}.lab-pill.is-on:before{background:var(--mod-color);box-shadow:0 0 8px var(--mod-color)}.lab-label{color:var(--hw-muted);font:500 11px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.lab-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 24px}.lab-field{display:grid;gap:8px;min-width:0}.lab-field__label{display:flex;justify-content:space-between;gap:8px;color:var(--hw-muted);font:500 11px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.lab-field__label output{color:var(--mod-color);font-weight:600;letter-spacing:0;text-transform:none}.lab-field input[type=range]{--line: var(--hw-line-2);--accent: var(--mod-color);--panel: var(--hw-panel);width:100%;min-width:0}.lab-field input[type=range]:disabled{opacity:.45;cursor:not-allowed}.lab-chips{display:flex;flex-wrap:wrap;gap:6px}.lab-chips button{padding:8px 12px;border:1px solid var(--hw-line-2);border-radius:9px;background:var(--hw-panel-2);box-shadow:0 2px #00000059;color:var(--hw-muted);font:600 13.5px/1 var(--font-body)}.lab-chips button:hover:not(:disabled):not(.is-on){border-color:color-mix(in srgb,var(--mod-color) 50%,var(--hw-line-2));background:var(--hw-panel-2);color:var(--hw-text)}.lab-chips button.is-on,.lab-chips button.is-on:hover:not(:disabled){border-color:var(--mod-color);background:color-mix(in srgb,var(--mod-color) 15%,var(--hw-panel-2));color:var(--hw-text)}.lab-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.lab-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--hw-line-2);border-radius:10px;background:var(--hw-panel-2);box-shadow:0 2px #00000059,inset 0 1px #ffffff0d;color:var(--hw-text);font:600 14px/1 var(--font-body)}.lab-btn:hover:not(:disabled){border-color:color-mix(in srgb,var(--mod-color) 55%,var(--hw-line-2));background:color-mix(in srgb,var(--mod-color) 10%,var(--hw-panel-2))}.lab-btn svg{width:16px;height:16px;fill:currentColor}.lab-btn__emoji{font-size:15px;line-height:1}.lab-btn--main,.lab-btn--main:hover:not(:disabled){border-color:transparent;background:var(--mod-color);color:#0b1a12;box-shadow:0 0 0 5px color-mix(in srgb,var(--mod-color) 16%,transparent),0 8px 20px -10px #000000e6}.lab-btn--main:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.lab-btn.is-on{border-color:var(--mod-color);background:color-mix(in srgb,var(--mod-color) 18%,var(--hw-panel-2));box-shadow:inset 0 0 14px -6px var(--mod-color)}.lab-btn.is-flash{animation:labFlash .35s ease-out}@keyframes labFlash{0%{border-color:var(--mod-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--mod-color) 30%,transparent)}to{box-shadow:0 2px #00000059}}.lab-btn--quiet{border-color:color-mix(in srgb,var(--clip) 45%,transparent);background:transparent;box-shadow:none;color:#ff9d92;font-size:13px}.lab-btn--quiet:hover:not(:disabled){border-color:var(--clip);background:color-mix(in srgb,var(--clip) 14%,transparent)}.lab-module button:disabled{border-color:var(--hw-line);background:var(--hw-panel-2);box-shadow:none;color:var(--hw-faint);cursor:progress;filter:none;transform:none}.lab-switch{display:inline-flex;align-items:center;gap:9px;color:var(--hw-muted);font-size:13.5px;cursor:pointer;-webkit-user-select:none;user-select:none}.lab-switch input{position:absolute;opacity:0;pointer-events:none}.lab-switch__track{position:relative;flex-shrink:0;width:34px;height:20px;border:1px solid var(--hw-line-2);border-radius:999px;background:var(--hw-ink);transition:background-color .15s ease,border-color .15s ease}.lab-switch__track:after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--hw-faint);transition:transform .15s ease,background-color .15s ease}.lab-switch input:checked+.lab-switch__track{border-color:var(--mod-color);background:color-mix(in srgb,var(--mod-color) 22%,var(--hw-ink))}.lab-switch input:checked+.lab-switch__track:after{background:var(--mod-color);transform:translate(14px)}.lab-switch input:focus-visible+.lab-switch__track{outline:2px solid var(--mod-color);outline-offset:2px}.lab-switch input:disabled~*{opacity:.5}.lab-code{margin:0;padding:10px 12px;border:1px solid var(--hw-line);border-radius:10px;background:var(--hw-ink);color:var(--hw-text);font:500 12.5px/1.6 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}.lab-code .tok-fn{color:#6fd6ff}.lab-code .tok-str{color:var(--vu)}.lab-code .tok-num{color:var(--led)}.lab-code .tok-key{color:var(--hw-muted)}.lab-code .tok-comment{color:var(--hw-faint);font-style:italic}.lab-info{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:start;margin-top:56px}.lab-info:empty{display:none}.lab-info__text h2{margin:8px 0 16px}.lab-info__text p:not(.label){margin:0 0 14px;color:var(--muted);line-height:1.7}.lab-info__text code{padding:1px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--text);font-size:.86em}.info-code-block{margin:0;padding:18px 20px;border:1px solid var(--hw-line);border-radius:14px;background:var(--hw-ink);box-shadow:var(--shadow);overflow-x:auto;font-size:13px;line-height:1.6}.info-code-block pre{margin:0}.info-code-block code,.info-code-block code.hljs{padding:0;background:transparent;color:var(--hw-text);font-family:var(--font-mono)}@media (max-width: 980px){.lab-info{grid-template-columns:minmax(0,1fr)}}@media (max-width: 480px){.lab-module{padding:16px 14px}}@media (prefers-reduced-motion: reduce){.lab-btn.is-flash{animation:none}}