.lp-sys-atelier .router-demo{--rd-line:var(--sys-border-subtle);--rd-line-strong:var(--sys-border-default);--rd-muted:var(--sys-text-muted);--rd-body:var(--sys-text-body);--rd-ink:var(--sys-text-strong);--rd-accent:var(--sys-surface-brand);--rd-success:var(--clr-green-grass-dark-emerald-green);--rd-success-bg:color-mix(in srgb,var(--sys-action-primary) 20%,var(--sys-surface-page));--rd-warning:var(--sys-status-error);--rd-warning-bg:color-mix(in srgb,var(--sys-status-error) 12%,var(--sys-surface-page))}.lp-sys-atelier .router-demo :where(button,input,summary,a):focus-visible{outline:2px solid var(--sys-border-brand);outline-offset:3px}.lp-sys-atelier .router-demo-samplenote{max-width:55ch;color:var(--rd-muted);margin:0 0 clamp(24px,3cqi,32px);font-size:13px;line-height:1.5}.lp-sys-atelier .router-demo-grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(24px,3vw,40px);display:grid}@media (width>=1024px){.lp-sys-atelier .router-demo-grid{grid-template-columns:340px minmax(0,1fr)}}.lp-sys-atelier .router-demo-panel{border:1px solid var(--rd-line);border-radius:var(--radius-16);background:var(--sys-surface-page);align-content:start;gap:20px;min-width:0;padding:clamp(20px,2.4vw,28px);display:grid}@media (width>=1024px){.lp-sys-atelier .router-demo-panel{top:calc(var(--ws-navh) + var(--space-32));max-height:calc(100vh - var(--ws-navh) - var(--space-48));position:sticky;overflow-y:auto}}.lp-sys-atelier .router-demo-panel-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.lp-sys-atelier .router-demo-badge{border:1px solid var(--rd-line);border-radius:var(--radius-pill);background:var(--sys-surface-brand-subtle);color:var(--sys-text-brand);align-items:center;gap:6px;padding:5px 12px;font-size:12px;font-weight:600;line-height:1.3;display:inline-flex}.lp-sys-atelier .router-demo-reset{border:1.5px solid var(--rd-line-strong);border-radius:var(--radius-12);min-height:44px;color:var(--rd-ink);font:inherit;cursor:pointer;background:0 0;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:600;display:inline-flex}.lp-sys-atelier .router-demo-reset:hover{background:var(--sys-surface-subtle)}.lp-sys-atelier .router-demo-reset-ic{width:16px;height:16px}.lp-sys-atelier .router-demo-panel-h{font-size:var(--t-h3);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls);color:var(--rd-ink);margin:0}.lp-sys-atelier .router-demo-field{border:0;gap:10px;min-width:0;margin:0;padding:0;display:grid}.lp-sys-atelier .router-demo-label{color:var(--rd-muted);margin:0 0 6px;font-size:13px;font-weight:600;display:block}.lp-sys-atelier .router-demo-segmented{flex-wrap:wrap;gap:8px;display:flex}.lp-sys-atelier .router-demo-seg{border:1.5px solid var(--rd-line-strong);border-radius:var(--radius-pill);background:var(--sys-surface-page);min-height:44px;color:var(--rd-body);font:inherit;cursor:pointer;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:600;display:inline-flex}.lp-sys-atelier .router-demo-seg[aria-pressed=true]{border-color:var(--rd-accent);background:var(--sys-surface-brand-subtle);color:var(--rd-accent)}.lp-sys-atelier .router-demo-seg:hover{border-color:var(--rd-accent)}.lp-sys-atelier .router-demo-seg :where(.ws-model-mark){width:16px;height:16px}.lp-sys-atelier .router-demo-field-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.lp-sys-atelier .router-demo-field-head label{color:var(--rd-ink);font-size:14px;font-weight:600}.lp-sys-atelier .router-demo-field-value{font-variant-numeric:tabular-nums;color:var(--rd-ink);flex:none;font-size:14px;font-weight:600}.lp-sys-atelier .router-demo-range{appearance:none;border-radius:var(--radius-pill);background:var(--rd-line-strong);cursor:pointer;width:100%;height:4px;margin:0;padding:0;display:block}.lp-sys-atelier .router-demo-range::-webkit-slider-thumb{appearance:none;border-radius:var(--radius-round);background:var(--rd-accent);border:2px solid var(--sys-border-on-inverse);width:20px;height:20px;box-shadow:0 0 0 1px var(--rd-line-strong)}.lp-sys-atelier .router-demo-range::-moz-range-track{border-radius:var(--radius-pill);background:var(--rd-line-strong);border:0;height:4px}.lp-sys-atelier .router-demo-range::-moz-range-thumb{border:2px solid var(--sys-border-on-inverse);border-radius:var(--radius-round);background:var(--rd-accent);width:20px;height:20px}.lp-sys-atelier .router-demo-hint{color:var(--rd-muted);margin:0;font-size:12px;line-height:1.5}.lp-sys-atelier .router-demo-optimizations{border:0;border-top:1px solid var(--rd-line);gap:16px;margin:0;padding:20px 0 0;display:grid}.lp-sys-atelier .router-demo-toggle{gap:6px;display:grid}.lp-sys-atelier .router-demo-toggle-head{justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.lp-sys-atelier .router-demo-toggle-head label{color:var(--rd-ink);font-size:14px;font-weight:600}.lp-sys-atelier .router-demo-switch{appearance:none;cursor:pointer;background:0 0;flex:none;width:44px;height:44px;margin:0;position:relative}.lp-sys-atelier .router-demo-switch:before{content:"";border-radius:var(--radius-pill);background:var(--rd-line-strong);width:40px;height:24px;position:absolute;top:50%;left:2px;transform:translateY(-50%)}.lp-sys-atelier .router-demo-switch:after{content:"";border-radius:var(--radius-round);background:var(--sys-surface-page);width:20px;height:20px;box-shadow:0 1px 2px color-mix(in srgb,var(--sys-border-strong) 25%,transparent);transition:transform var(--lp-dur-200) var(--lp-out);position:absolute;top:50%;left:4px;transform:translateY(-50%)}.lp-sys-atelier .router-demo-switch:checked:before{background:var(--rd-accent)}.lp-sys-atelier .router-demo-switch:checked:after{transform:translateY(-50%)translate(18px)}.lp-sys-atelier .router-demo-results{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,32px);min-width:0;display:grid}.lp-sys-atelier .router-demo-kpis{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}@media (width>=640px){.lp-sys-atelier .router-demo-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}.lp-sys-atelier .router-demo-kpi{border:1px solid var(--rd-line);border-radius:var(--radius-16);background:var(--sys-surface-page);min-width:0;padding:20px}.lp-sys-atelier .router-demo-kpi dl{gap:6px;margin:0;display:grid}.lp-sys-atelier .router-demo-kpi dt{color:var(--rd-muted);margin:0;font-size:13px}.lp-sys-atelier .router-demo-kpi dd{color:var(--rd-ink);font-variant-numeric:tabular-nums;margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:600;line-height:1.1}.lp-sys-atelier .router-demo-kpi-suffix{color:var(--rd-muted);margin-left:4px;font-size:14px;font-weight:500}.lp-sys-atelier .router-demo-kpi-caption{color:var(--rd-muted);margin:8px 0 0;font-size:13px}.lp-sys-atelier .router-demo-is-primary dd{color:var(--rd-accent)}.lp-sys-atelier .router-demo-is-success{background:var(--rd-success-bg)}.lp-sys-atelier .router-demo-is-success dd{color:var(--rd-success)}.lp-sys-atelier .router-demo-kpi.router-demo-is-success dt,.lp-sys-atelier .router-demo-kpi.router-demo-is-success .router-demo-kpi-caption{color:var(--rd-body)}.lp-sys-atelier .router-demo-is-warning{background:var(--rd-warning-bg)}.lp-sys-atelier .router-demo-is-warning dd{color:var(--rd-warning)}.lp-sys-atelier .router-demo-card{border:1px solid var(--rd-line);border-radius:var(--radius-16);background:var(--sys-surface-page);min-width:0;padding:clamp(20px,2.4vw,28px)}.lp-sys-atelier .router-demo-card h2{font-size:var(--t-h3);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls);color:var(--rd-ink);margin:0 0 8px}.lp-sys-atelier .router-demo-cardhint{color:var(--rd-body);margin:0 0 16px;font-size:14px;line-height:1.5}.lp-sys-atelier .router-demo-tablewrap{min-width:0;max-width:100%;overflow-x:auto}.lp-sys-atelier .router-demo-table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}.lp-sys-atelier .router-demo-table th,.lp-sys-atelier .router-demo-table td{text-align:left;border-bottom:1px solid var(--rd-line);white-space:nowrap;padding:10px 12px}.lp-sys-atelier .router-demo-table thead th{color:var(--rd-muted);border-bottom:1px solid var(--rd-line-strong);font-size:12px;font-weight:600}.lp-sys-atelier .router-demo-table tbody th{color:var(--rd-ink);white-space:normal;font-weight:600}.lp-sys-atelier .router-demo-table tbody th :where(.ws-model-mark),.lp-sys-atelier .router-demo-table tbody td :where(.ws-model-mark){vertical-align:-3px;width:16px;height:16px;margin-right:8px;display:inline-block}.lp-sys-atelier .router-demo-table tr.router-demo-is-selected{background:color-mix(in srgb,var(--sys-surface-brand) 6%,var(--sys-surface-page))}.lp-sys-atelier .router-demo-table tr.router-demo-is-below-bar th,.lp-sys-atelier .router-demo-table tr.router-demo-is-below-bar td{color:var(--rd-body)}.lp-sys-atelier .router-demo-table tr.router-demo-row-clickable{cursor:pointer}.lp-sys-atelier .router-demo-rowbtn{min-height:44px;color:inherit;font:inherit;font-weight:inherit;cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:6px;padding:0;display:inline-flex}.lp-sys-atelier .router-demo-rowbtn-ic{width:14px;height:14px;color:var(--rd-success)}.lp-sys-atelier .router-demo-badge-today{border-radius:var(--radius-pill);background:var(--sys-surface-subtle);color:var(--rd-muted);align-items:center;margin-left:8px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.lp-sys-atelier .router-demo-quality-score{font-variant-numeric:tabular-nums;font-weight:600}.lp-sys-atelier .router-demo-quality-bar{border-radius:var(--radius-pill);background:var(--rd-line-strong);width:64px;height:4px;margin-top:4px;display:block;position:relative}.lp-sys-atelier .router-demo-quality-fill{border-radius:inherit;background:var(--rd-accent);height:100%;display:block}.lp-sys-atelier .router-demo-quality-fill.router-demo-is-below-bar{background:var(--rd-line-strong)}.lp-sys-atelier .router-demo-quality-marker{background:var(--rd-ink);width:2px;margin-left:-1px;position:absolute;top:-2px;bottom:-2px}.lp-sys-atelier .router-demo-tag{border-radius:var(--radius-pill);white-space:nowrap;align-items:center;gap:4px;padding:3px 10px;font-size:12px;font-weight:600;line-height:1.3;display:inline-flex}.lp-sys-atelier .router-demo-tag-success{background:var(--rd-success-bg);color:var(--rd-success)}.lp-sys-atelier .router-demo-tag-neutral{background:var(--sys-surface-subtle);color:var(--rd-body)}.lp-sys-atelier .router-demo-tag-warning{background:var(--rd-warning-bg);color:var(--rd-warning)}.lp-sys-atelier .router-demo-tag-ic{width:12px;height:12px}.lp-sys-atelier .router-demo-ghost{border:1.5px solid var(--rd-line-strong);border-radius:var(--radius-12);min-height:44px;color:var(--rd-ink);font:inherit;cursor:pointer;background:0 0;justify-content:center;align-items:center;margin-top:16px;padding:0 16px;font-size:14px;font-weight:600;display:inline-flex}.lp-sys-atelier .router-demo-ghost:hover{background:var(--sys-surface-subtle)}.lp-sys-atelier .router-demo-prompt{border:1px solid var(--rd-line);background:var(--sys-surface-subtle);border-radius:var(--radius-8);margin:0 0 12px;padding:12px 16px}.lp-sys-atelier .router-demo-prompt p{color:var(--rd-body);margin:0;font-size:14px;font-style:italic;line-height:1.5}.lp-sys-atelier .router-demo-spend-value{color:var(--rd-ink);font-variant-numeric:tabular-nums;margin:0;font-size:clamp(28px,3vw,36px);font-weight:600;line-height:1.1}.lp-sys-atelier .router-demo-spend-label{color:var(--rd-body);margin:4px 0 16px;font-size:14px}.lp-sys-atelier .router-demo-chartbar{border-radius:var(--radius-pill);background:var(--rd-line);height:16px;display:flex;overflow:hidden}.lp-sys-atelier .router-demo-chartseg{height:100%;display:block}.lp-sys-atelier .router-demo-chartlegend{gap:10px;margin:16px 0 0;padding:0;list-style:none;display:grid}.lp-sys-atelier .router-demo-chartlegend li{align-items:center;gap:10px;min-width:0;display:flex}.lp-sys-atelier .router-demo-chartdot{border-radius:var(--radius-round);flex:none;width:10px;height:10px}.lp-sys-atelier .router-demo-chartlabel{min-width:0;color:var(--rd-body);flex:1;font-size:14px}.lp-sys-atelier .router-demo-chartvalue{font-variant-numeric:tabular-nums;color:var(--rd-ink);flex:none;font-size:14px;font-weight:600}.lp-sys-atelier .router-demo-is-paid{background:var(--rd-ink)}.lp-sys-atelier .router-demo-is-route{background:var(--sys-surface-brand)}.lp-sys-atelier .router-demo-is-context{background:var(--clr-teal-light-lagoon-teal)}.lp-sys-atelier .router-demo-is-ramp{background:var(--sys-text-brand-subtle-inverse)}.lp-sys-atelier .router-demo-is-discount{background:var(--sys-action-primary)}.lp-sys-atelier .router-demo-is-today{background:var(--rd-muted)}.lp-sys-atelier .router-demo-is-upgrade{background:var(--rd-warning)}.lp-sys-atelier .router-demo-twocol{grid-template-columns:minmax(0,1fr);gap:24px;display:grid}@media (width>=1280px){.lp-sys-atelier .router-demo-twocol{grid-template-columns:repeat(2,minmax(0,1fr))}}.lp-sys-atelier .router-demo-trace{color:var(--rd-body);gap:12px;margin:0;padding:0;font-size:14px;line-height:1.5;list-style:none;display:grid}.lp-sys-atelier .router-demo-trace li{min-height:24px;padding-left:36px;position:relative}.lp-sys-atelier .router-demo-trace li:not(:last-child):after{content:"";background:var(--rd-line);width:1px;position:absolute;top:28px;bottom:-12px;left:11px}.lp-sys-atelier .router-demo-trace-n{border-radius:var(--radius-round);background:var(--sys-surface-brand-subtle);width:24px;height:24px;color:var(--sys-text-brand);place-items:center;font-size:12px;font-weight:600;line-height:1;display:grid;position:absolute;top:0;left:0}.lp-sys-atelier .router-demo-breakdown{gap:10px;margin:0;display:grid}.lp-sys-atelier .router-demo-breakdown-row{border-bottom:1px solid var(--rd-line);justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:10px;display:flex}.lp-sys-atelier .router-demo-breakdown-row dt{min-width:0;color:var(--rd-body);margin:0;font-size:14px}.lp-sys-atelier .router-demo-breakdown-row dd{font-variant-numeric:tabular-nums;color:var(--rd-ink);flex:none;margin:0;font-size:15px;font-weight:600}.lp-sys-atelier .router-demo-breakdown-row dd.router-demo-is-warning{color:var(--rd-warning)}.lp-sys-atelier .router-demo-breakdown-row.router-demo-is-total{border-bottom:0;padding-top:4px}.lp-sys-atelier .router-demo-breakdown-row.router-demo-is-total dt,.lp-sys-atelier .router-demo-breakdown-row.router-demo-is-total dd{font-size:var(--t-h3);color:var(--rd-ink);font-weight:600}.lp-sys-atelier .router-demo-footnote{color:var(--rd-muted);margin-top:8px;font-size:13px;line-height:1.5}.lp-sys-atelier .router-demo-footnote>p{max-width:55ch;margin:0 0 8px}.lp-sys-atelier .router-demo-sources summary{cursor:pointer;color:var(--rd-ink);font-weight:600}.lp-sys-atelier .router-demo-sources ul{flex-wrap:wrap;gap:12px 20px;margin:12px 0 0;padding:0;list-style:none;display:flex}.lp-sys-atelier .router-demo-sources .router-demo-source{color:var(--rd-body);align-items:center;gap:6px;text-decoration:none;display:inline-flex}.lp-sys-atelier .router-demo-sources .router-demo-source:hover{color:var(--rd-ink)}.lp-sys-atelier .router-demo-sources .router-demo-source :where(.ws-model-mark){width:14px;height:14px}@media (prefers-reduced-motion:reduce){.lp-sys-atelier .router-demo-switch:after,.lp-sys-atelier .router-demo-table tr,.lp-sys-atelier .router-demo-chartseg{transition:none!important}}