.use-example-modal{--ui-modal-width:1280px;padding:1.75rem 2rem 1.5rem;background:var(--color-bg)}.use-example-modal[open]{display:flex;flex-direction:column;gap:1.25rem}.use-example-head{align-items:flex-start;margin-bottom:0}.use-example-heading{display:grid;gap:0.25rem;min-width:0}.use-example-kicker{margin:0;color:var(--color-text-muted);font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:0.04em;text-transform:uppercase}.use-example-modal .ui-modal-title{font-size:var(--fs-h2);line-height:1.2}.use-example-body{display:flex;flex-direction:column;gap:1.25rem;min-height:0}.use-icon{width:1.0625rem;height:1.0625rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.use-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-width:0;height:2.75rem;box-sizing:border-box;border:1px solid var(--color-border);border-radius:var(--ui-radius);background:var(--color-surface);color:var(--color-text);cursor:pointer;font:inherit;font-size:var(--fs-caption);font-weight:var(--fw-bold);padding:0 0.75rem;text-decoration:none;white-space:nowrap}.landing .use-btn:focus-visible,.use-btn:hover{background:var(--color-info-bg)}.use-btn--download{border-color:var(--color-accent);color:var(--color-accent)}.use-btn--cta{border-color:var(--color-brand);background:var(--color-brand);color:var(--color-inverse-bg);font-weight:var(--fw-heavy)}.landing .use-btn--cta:focus-visible,.use-btn--cta:hover{border-color:var(--color-brand-hover);background:var(--color-brand-hover)}.use-btn--large{height:3rem;padding:0 1.25rem;font-size:var(--fs-body)}.use-label-short,.use-step-tabs,.use-step-count{display:none}.use-step-board{display:grid;grid-template-columns:minmax(0,1fr) 1.75rem minmax(0,1fr) 1.75rem minmax(0,1fr) 1.75rem minmax(0,1fr)}.use-step-card{position:relative;display:grid;grid-template-rows:auto 2.75rem;gap:0.875rem;min-width:0;box-sizing:border-box;padding:1.125rem;border:1px solid var(--color-border);border-radius:var(--ui-radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card);cursor:pointer}.use-step-card:hover{border-color:var(--color-accent-line)}.use-step-card[data-current]{border:2px solid var(--color-accent);padding:calc(1.125rem - 1px);box-shadow:var(--shadow-accent)}.use-step-pick{display:grid;grid-template-rows:2rem 11.25rem 2.75rem;gap:0.875rem;min-width:0;width:100%;border:0;background:none;color:inherit;cursor:pointer;font:inherit;padding:0;text-align:left}.landing .use-step-pick:focus-visible{background:none;outline:3px solid var(--color-focus);outline-offset:4px;border-radius:var(--ui-radius)}.use-step-head{display:flex;align-items:center;gap:0.625rem;min-width:0}.use-step-mark{display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:var(--ui-radius-pill);background:var(--color-accent);color:var(--color-text-on-accent);font-size:var(--fs-body);font-weight:var(--fw-heavy)}.use-step-title{color:var(--color-text);font-size:var(--fs-h3);font-weight:var(--fw-heavy);line-height:1.2}.use-step-vis{display:grid;place-items:center;min-width:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--ui-radius);background:var(--color-surface-muted)}.use-step-thumb{display:block;max-width:92%;max-height:92%;object-fit:contain;box-shadow:var(--shadow-card)}.use-step-mini-table,.use-step-zip{display:flex;flex-direction:column;align-self:stretch;justify-self:stretch;min-width:0;background:var(--color-surface)}.use-step-mini-table{gap:0.2rem;padding:0.625rem;font-size:0.625rem}.use-step-mini-row{display:grid;grid-template-columns:1.3fr 1.5fr 0.8fr;gap:0.25rem;padding:0.2rem 0.375rem;border-bottom:1px solid var(--color-border);white-space:nowrap}.use-step-mini-row span{overflow:hidden;text-overflow:ellipsis}.use-step-mini-row--head{border:1px solid var(--color-ok-line);border-radius:var(--ui-radius-xs);background:var(--color-ok-bg);font-weight:var(--fw-bold)}.use-step-mini-row--more{grid-template-columns:1fr;border-bottom:0;color:var(--color-text-muted)}.use-step-zip{font-size:var(--fs-caption)}.use-step-zip-head{display:flex;align-items:center;gap:0.5rem;min-height:1.875rem;padding:0 0.625rem;border-bottom:1px solid var(--color-border);background:var(--color-info-bg);font-weight:var(--fw-bold);overflow:hidden;white-space:nowrap}.use-step-zip-head span{margin-left:auto;color:var(--color-text-muted);font-weight:var(--fw-semibold)}.use-step-zip-row{display:flex;align-items:center;gap:0.5rem;padding:0.375rem 0.625rem;border-bottom:1px solid var(--color-info-bg);overflow:hidden;white-space:nowrap}.use-step-zip-row i{flex:none;width:0.875rem;height:1.0625rem;border:1px solid var(--color-border);border-radius:var(--ui-radius-xs);background:var(--color-brand-subtle)}.use-step-zip-row--more{border-bottom:0;color:var(--color-text-muted)}.use-step-info{display:flex;flex-direction:column;justify-content:center;min-width:0}.use-step-file,.use-step-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.use-step-file{color:var(--color-text);font-size:var(--fs-small);font-weight:var(--fw-bold)}.use-step-meta{color:var(--color-text-muted);font-size:var(--fs-caption)}.use-step-arrow{display:grid;place-items:center;color:var(--color-brand-alt)}.use-step-arrow svg{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.use-step-zoom{position:absolute;right:0.75rem;bottom:0.75rem;z-index:1;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--color-border);border-radius:var(--ui-radius-pill);background:var(--color-surface);box-shadow:var(--shadow-card);color:var(--color-text);cursor:zoom-in;padding:0}.landing .use-step-zoom:focus-visible,.use-step-zoom:hover{background:var(--color-info-bg)}.use-step-card > .use-step-zoom{display:none}.use-step-view{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.5rem;height:clamp(18rem,calc(100dvh - 40rem),32rem);box-sizing:border-box;padding:1.25rem;border:1px solid var(--color-border);border-radius:var(--ui-radius-lg);background:var(--color-surface)}.use-step-stage{position:relative;display:grid;min-height:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--ui-radius);background:var(--color-surface-muted)}.use-step-scene{position:relative;display:grid;place-items:center;min-height:0;padding:1rem}.use-step-scene[hidden]{display:none}.use-step-sheet{display:block;width:auto;height:auto;max-width:100%;max-height:100%;min-height:0;object-fit:contain;box-shadow:var(--shadow-card)}.use-step-scene--table{place-items:stretch;padding:0}.use-step-scene--table .use-example-table-scroll{border:0;border-radius:0}.use-step-results{display:flex;justify-content:center;gap:0.875rem;min-width:0;max-height:100%}.use-step-result{flex:0 1 12.5rem;min-width:0;border:0;border-radius:var(--ui-radius-sm);background:none;cursor:zoom-in;padding:0}.landing .use-step-result:focus-visible{background:none;outline:3px solid var(--color-focus);outline-offset:2px}.use-step-result img{display:block;width:100%;height:auto;border-radius:var(--ui-radius-sm);box-shadow:var(--shadow-card)}.use-step-side{display:flex;flex-direction:column;gap:0.75rem;min-height:0;padding-top:0.5rem}.use-step-notes{display:grid;min-height:0;overflow:auto}.use-step-note{grid-area:1 / 1;display:flex;flex-direction:column;gap:0.75rem}.use-step-note[data-inactive]{visibility:hidden}.use-step-badge{display:flex;align-items:center;gap:0.625rem;margin:0;color:var(--color-accent);font-size:var(--fs-caption);font-weight:var(--fw-bold)}.use-step-note-title{margin:0;color:var(--color-text);font-size:var(--fs-h3);font-weight:var(--fw-heavy)}.use-step-text{margin:0;color:var(--color-text-secondary);font-size:var(--fs-body);line-height:1.5}.use-step-hint{margin:0;color:var(--color-text-muted);font-size:var(--fs-caption)}.use-step-columns{display:grid;gap:0.4rem;margin:0;padding:0;list-style:none;font-size:var(--fs-small)}.use-step-nav{display:flex;gap:0.625rem;margin-top:auto}.use-example-footer{display:flex;justify-content:flex-end;align-items:center;gap:1rem}@media (max-width: 760px){.use-example-modal{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:0;overflow:hidden}.use-example-modal[open]{gap:0}.use-example-head{padding:1rem 1rem 0.75rem;border-bottom:1px solid var(--color-border);background:var(--color-surface)}.use-example-kicker{font-size:var(--fs-caption)}.use-example-modal .ui-modal-title{font-size:var(--fs-h3)}.use-example-body{flex:1 1 auto;gap:0.875rem;overflow:auto;padding:0.875rem 1rem}.use-step-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.375rem}.use-step-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:3.25rem;border:1px solid var(--color-border);border-radius:var(--ui-radius);background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;font:inherit;font-size:0.6875rem;font-weight:var(--fw-bold);padding:0}.use-step-tab b{display:grid;place-items:center;width:1.375rem;height:1.375rem;border-radius:var(--ui-radius-pill);background:var(--color-accent-soft);color:var(--color-accent-hover);font-size:var(--fs-caption)}.use-step-tab[aria-pressed="true"]{border:2px solid var(--color-accent);color:var(--color-accent-hover)}.use-step-tab[aria-pressed="true"] b{background:var(--color-accent);color:var(--color-text-on-accent)}.landing .use-step-tab:focus-visible{background:var(--color-info-bg)}.use-step-board{grid-template-columns:minmax(0,1fr)}.use-step-arrow,.use-step-card:not([data-current]){display:none}.use-step-card,.use-step-card[data-current]{padding:calc(1rem - 1px);gap:0.75rem;box-shadow:var(--shadow-accent)}.use-step-pick{grid-template-rows:2rem 13.75rem 2.75rem;gap:0.75rem}.use-step-count{display:inline;margin-left:auto;color:var(--color-text-muted);font-size:var(--fs-caption)}.use-step-card > .use-step-zoom{display:grid;top:calc(1rem - 1px + 2rem + 0.75rem + 13.75rem - 0.5rem - 2rem);right:calc(1rem - 1px + 0.5rem);bottom:auto;width:2rem;height:2rem}.use-step-view{display:block;height:auto;padding:0;border:0;background:none}.use-step-stage,.use-step-badge{display:none}.use-step-side{padding-top:0}.use-step-note{gap:0.375rem}.use-step-columns{display:none}.use-step-note-title{font-size:var(--fs-body)}.use-step-text{font-size:var(--fs-small)}.use-step-nav{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.use-example-footer{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;padding:0.75rem 1rem 1rem;border-top:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-bar-up)}.use-example-footer .use-btn{padding:0 0.5rem}.use-label-full{display:none}.use-label-short{display:inline}}.use-viewer{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;box-sizing:border-box;background:color-mix(in srgb,var(--color-text-strong) 94%,transparent);color:var(--color-text-on-inverse-strong);padding:0;overflow:hidden}.use-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto}.use-viewer-top{gap:1rem;margin-bottom:0;padding:1.25rem 1.75rem}.use-viewer .ui-modal-close{width:2.75rem;height:2.75rem;border:1px solid color-mix(in srgb,var(--color-surface) 28%,transparent);border-radius:var(--ui-radius-pill);background:color-mix(in srgb,var(--color-surface) 8%,transparent);color:var(--color-text-on-inverse-strong)}.use-viewer .ui-modal-close:hover,.landing .use-viewer .ui-modal-close:focus-visible{background:color-mix(in srgb,var(--color-surface) 18%,transparent);color:var(--color-text-on-inverse-strong)}.use-viewer-heading{display:grid;gap:2px;flex:1 1 auto;min-width:0}.use-viewer-kicker{margin:0;color:var(--color-text-on-inverse-muted);font-size:var(--fs-caption);font-weight:var(--fw-bold)}.use-viewer .ui-modal-title{overflow:hidden;color:var(--color-text-on-inverse-strong);font-size:var(--fs-h3);text-overflow:ellipsis;white-space:nowrap}.use-viewer .ui-modal-title span{color:var(--color-text-on-inverse-muted)}.use-zb{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;flex:none;height:2.75rem;box-sizing:border-box;border-radius:var(--ui-radius);cursor:pointer;font:inherit;font-size:var(--fs-small);font-weight:var(--fw-bold);padding:0 1rem;text-decoration:none;white-space:nowrap}.use-zb[hidden]{display:none}.use-zb--ghost{border:1px solid color-mix(in srgb,var(--color-surface) 28%,transparent);background:color-mix(in srgb,var(--color-surface) 8%,transparent);color:var(--color-text-on-inverse-strong)}.landing .use-zb--ghost:focus-visible,.use-zb--ghost:hover{background:color-mix(in srgb,var(--color-surface) 18%,transparent)}.use-zb--solid{border:1px solid var(--color-surface);background:var(--color-surface);color:var(--color-accent-hover)}.use-zb--solid:hover{background:var(--color-info-bg)}.use-viewer-stage{display:flex;align-items:center;justify-content:center;gap:1.5rem;min-height:0;padding:0 1.75rem 1.75rem}.use-viewer[data-gallery] .use-viewer-stage{justify-content:space-between;padding-bottom:0}.use-viewer-image{display:block;min-width:0;max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--ui-radius-xs);box-shadow:var(--shadow-strong)}.use-viewer-nav{display:none;place-items:center;flex:none;width:3.25rem;height:3.25rem;border:1px solid color-mix(in srgb,var(--color-surface) 28%,transparent);border-radius:var(--ui-radius-pill);background:color-mix(in srgb,var(--color-surface) 10%,transparent);color:var(--color-text-on-inverse-strong);cursor:pointer;padding:0}.landing .use-viewer-nav:focus-visible,.use-viewer-nav:hover{background:color-mix(in srgb,var(--color-surface) 20%,transparent)}.use-viewer[data-gallery] .use-viewer-nav{display:grid}.use-viewer-hint,.use-viewer-bottom{display:none}.use-viewer-thumbs{display:none;justify-content:safe center;gap:0.5rem;overflow-x:auto;padding:1rem 1.75rem 1.25rem}.use-viewer[data-gallery] .use-viewer-thumbs{display:flex}.use-viewer-thumb{flex:none;border:2px solid transparent;border-radius:var(--ui-radius-xs);background:none;cursor:pointer;line-height:0;opacity:0.55;padding:0}.use-viewer-thumb img{display:block;height:4rem;border-radius:var(--ui-radius-xs)}.use-viewer-thumb[aria-current="true"]{border-color:var(--color-brand);opacity:1}.landing .use-viewer-thumb:focus-visible{background:none;opacity:1;outline:2px solid var(--color-surface)}@media (max-width: 760px){.use-viewer{background:var(--color-text-strong)}.use-viewer-top{gap:0.75rem;padding:1rem}.use-viewer-desktop{display:none}.use-viewer-kicker{font-size:var(--fs-caption)}.use-viewer-kicker-title{display:none}.use-viewer .ui-modal-title{font-size:var(--fs-body)}.use-viewer-stage,.use-viewer[data-gallery] .use-viewer-stage{position:relative;padding:0 0.5rem}.use-viewer-image{border-radius:var(--ui-radius-xs);box-shadow:var(--shadow-strong)}.use-viewer-nav{position:absolute;top:50%;width:2.75rem;height:2.75rem;margin-top:-1.375rem;background:color-mix(in srgb,var(--color-text-strong) 60%,transparent)}.use-viewer-nav--prev{left:0.375rem}.use-viewer-nav--next{right:0.375rem}.use-viewer-hint{display:block;margin:0;padding:0.625rem 1rem 0;color:var(--color-text-on-inverse-muted);font-size:var(--fs-caption);text-align:center}.use-viewer-thumbs,.use-viewer[data-gallery] .use-viewer-thumbs{justify-content:flex-start;gap:0.375rem;padding:0.75rem 1rem 0.25rem}.use-viewer-thumb img{height:3.5rem}.use-viewer-bottom{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;padding:0.875rem 1rem 1.25rem}.use-viewer-bottom .use-zb{height:3rem;font-size:var(--fs-body)}.use-viewer[data-gallery] .use-viewer-bottom [data-use-viewer-back]{display:none}}.use-example-table-scroll{flex:1 1 auto;min-height:0;overflow:auto;border:1px solid var(--color-border);border-radius:var(--ui-radius-sm);background:var(--color-surface);scrollbar-color:var(--color-border-strong) var(--color-surface-muted);scrollbar-width:thin}.use-example-table{border-collapse:collapse;font-size:var(--fs-caption)}.use-example-table th,.use-example-table td{border:1px solid var(--color-info-bg);color:var(--color-text);padding:0.4rem 0.55rem;text-align:left;white-space:nowrap}.use-example-table th{position:sticky;top:0;background:var(--color-info-bg);font-weight:var(--fw-bold)}.use-example-table .use-example-rownum{min-width:2rem;background:var(--color-surface-muted);color:var(--color-text-muted);text-align:center}.use-example-scroll-hint{margin:0;color:var(--color-text-muted);font-size:var(--fs-small)}.use-example-col{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;border-radius:var(--ui-radius-xs);background:var(--color-accent-soft);color:var(--color-accent);font-size:var(--fs-caption);font-weight:var(--fw-heavy);padding:0 0.25rem}.use-example-results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-content:start;gap:0.9rem;min-height:0;margin:0;padding:0.25rem;overflow-y:auto;list-style:none;scrollbar-color:var(--color-border-strong) var(--color-surface-muted);scrollbar-width:thin}.use-example-result{display:grid;gap:0.25rem;min-width:0}.use-example-result img{display:block;width:100%;height:auto;border-radius:var(--ui-radius-xs);box-shadow:var(--shadow-card)}.use-example-result-name{overflow:hidden;color:var(--color-text-muted);font-size:var(--fs-caption);text-overflow:ellipsis;white-space:nowrap}.use-example-table-scroll:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}