.design-shell{--navigation-rail-width:18rem;min-height:100svh;background:var(--background)}.design-top-bar{background:color-mix(in oklch,var(--background) 92%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}.design-rail-brand>span:first-child,.design-top-mark{display:grid;width:2rem;height:2rem;place-items:center;border:1px solid var(--foreground);border-radius:var(--radius-round);background:var(--foreground);color:var(--background);font-family:var(--font-mono);font-size:var(--text-caption);font-weight:var(--font-weight-bold)}.design-top-description{display:block;overflow:hidden;color:var(--faint);font-size:var(--text-label);text-overflow:ellipsis;white-space:nowrap}.design-rail-brand{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-3);color:var(--foreground);text-decoration:none}.design-rail-brand>span:last-child{display:grid;min-width:0;gap:2px}.design-rail-brand strong{font-size:var(--text-label);line-height:1.2}.design-rail-brand small{color:var(--faint);font-size:var(--text-caption);line-height:1.2}.design-back-link{color:var(--muted);font-size:var(--text-label);text-decoration:none}.design-back-link:hover,.design-rail-brand:hover{color:var(--foreground);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.25em}.design-page-canvas{min-height:calc(100svh - var(--top-bar-height));padding:0 clamp(var(--space-4),4vw,var(--space-12)) var(--space-16);outline:none}.design-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 12rem;align-items:start;gap:clamp(var(--space-8),4vw,var(--space-16))}.design-article,.design-route-stage{min-width:0}.design-article{max-width:74rem}.design-page-outline{position:sticky;top:calc(var(--top-bar-height) + var(--space-6));display:grid;gap:var(--space-3);padding-block:var(--space-8);font-size:var(--text-caption)}.design-page-outline>strong{color:var(--foreground);font-family:var(--font-mono);font-weight:var(--font-weight-medium);letter-spacing:.04em;text-transform:uppercase}.design-page-outline ol{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}.design-page-outline a{display:block;padding-left:var(--space-3);border-left:1px solid var(--grid);color:var(--faint);line-height:1.4;text-decoration:none}.design-page-outline a:hover{border-color:var(--foreground);color:var(--foreground)}.design-overview-intro .jungle-page-intro__title{max-width:18ch;font-size:clamp(var(--text-title),5vw,var(--text-display));letter-spacing:-.055em}.design-overview-intro .jungle-page-intro__description{max-width:70ch}.design-intro-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}.design-intro-links a,.design-primary-link{color:var(--foreground);font-size:var(--text-label);font-weight:var(--font-weight-medium);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.25em}.design-primary-link{display:inline-flex;min-height:var(--interactive-target-min);align-items:center;padding-inline:var(--space-4);border-radius:var(--control-radius);background:var(--primary);color:var(--primary-foreground)!important;text-decoration:none!important}.design-doc-header{display:grid;gap:var(--space-3);padding-block:clamp(var(--space-8),7vw,var(--space-16));border-bottom:1px solid var(--line)}.design-doc-header h1{max-width:20ch;margin:0;font-size:clamp(var(--text-title),5vw,var(--text-display));letter-spacing:-.055em;line-height:1.02;text-wrap:balance}.design-eyebrow{margin:0;color:var(--muted);font:var(--font-weight-medium) var(--text-caption) /1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.design-lede{max-width:66ch;margin:0;color:var(--muted);font-size:clamp(var(--text-body),2vw,1.125rem);line-height:1.6;text-wrap:pretty}.design-doc-section{display:grid;gap:var(--space-6);padding-block:clamp(var(--space-8),6vw,var(--space-12));border-top:1px solid var(--grid);scroll-margin-top:calc(var(--top-bar-height) + var(--space-4))}.design-doc-header+.design-doc-section,.jungle-inline-alert+.design-doc-section,.jungle-page-intro+.design-doc-section{border-top:0}.design-article>.jungle-inline-alert{margin-top:var(--space-6)}.design-section-heading{display:grid;max-width:66ch;gap:var(--space-2)}.design-doc-section>h2,.design-section-heading h2{margin:0;font-size:clamp(var(--text-heading),3vw,var(--text-title));letter-spacing:-.04em;line-height:1.1}.design-section-heading p{margin:0;color:var(--muted);line-height:1.55}.design-callout>div,.design-doc-section>:is(p,ul,ol,table,blockquote):not([class]),.design-quote{max-width:72ch;line-height:1.7}.design-doc-section>ol:not([class]),.design-doc-section>p:not([class]),.design-doc-section>ul:not([class]){margin-block:0}.design-doc-section>:is(ul,ol):not([class]){display:grid;gap:var(--space-2);padding-left:var(--space-6)}.design-doc-section a{color:var(--foreground);text-decoration-color:var(--line);text-underline-offset:.2em}.design-component-index code,.design-doc-section code,.design-token-card code{font-family:var(--font-mono);font-size:.88em}.design-component-index code,.design-doc-section :not(pre)>code,.design-token-card code{padding:.12rem .35rem;border:1px solid var(--grid);border-radius:var(--radius-sm);background:var(--surface-raised)}.design-doc-section>table:not([class]){width:100%;border-collapse:collapse;font-size:var(--text-label)}.design-doc-section>table:not([class]) :is(th,td){padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--grid);text-align:left;vertical-align:top}.design-doc-section>table:not([class]) th{color:var(--muted);font-size:var(--text-caption);letter-spacing:.035em;text-transform:uppercase}.design-code{max-width:100%;margin:0;overflow:auto;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised);color:var(--foreground);font:var(--text-label) /1.65 var(--font-mono);tab-size:2}.design-code code{padding:0!important;border:0!important;background:transparent!important;color:inherit;font:inherit}.design-callout{display:grid;max-width:72ch;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--line);border-left:3px solid var(--info);border-radius:var(--radius-md);background:var(--info-soft)}.design-callout[data-tone=important]{border-left-color:var(--foreground);background:var(--secondary)}.design-callout[data-tone=caution]{border-left-color:var(--warning);background:var(--warning-soft)}.design-callout p{margin:0}.design-quote{margin:0;padding-left:var(--space-4);border-left:2px solid var(--line);color:var(--muted)}.design-component-index,.design-preview-grid,.design-principle-grid,.design-scope-grid,.design-token-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.design-component-index article,.design-principle,.design-scope-grid article,.design-token-card{display:grid;align-content:start;gap:var(--space-3);padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}.design-principle>span{color:var(--faint);font-family:var(--font-mono);font-size:var(--text-caption)}.design-component-index h3,.design-principle h3{margin:0;font-size:var(--text-body);letter-spacing:-.02em}.design-principle p,.design-scope-grid span,.design-token-card p{margin:0;color:var(--muted);font-size:var(--text-label);line-height:1.55}.design-scope-grid article{gap:var(--space-2)}.design-token-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.design-token-card{padding:var(--space-4)}.design-token-swatch{display:block;width:100%;height:5rem;border:1px solid var(--line);border-radius:var(--radius-md)}.design-type-specimens{display:grid;border-top:1px solid var(--line)}.design-type-specimens p{display:grid;gap:var(--space-2);margin:0;padding-block:var(--space-4);border-bottom:1px solid var(--grid);letter-spacing:-.035em;line-height:1.15}.design-type-specimens p>span{color:var(--faint);font:var(--text-caption) /1.3 var(--font-mono);letter-spacing:0}.design-type-specimens [data-size=display]{font-size:clamp(var(--text-title),6vw,var(--text-display))}.design-type-specimens [data-size=title]{font-size:var(--text-title)}.design-type-specimens [data-size=heading]{font-size:var(--text-heading)}.design-type-specimens [data-size=body]{font-size:var(--text-body);letter-spacing:0}.design-type-specimens [data-size=label]{font-size:var(--text-label);letter-spacing:0}.design-type-specimens [data-size=caption]{font:var(--text-caption) /1.4 var(--font-mono);letter-spacing:0}.design-space-scale{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-4)}.design-space-scale>span{display:grid;justify-items:center;gap:var(--space-2);color:var(--faint);font:var(--text-caption) /1 var(--font-mono)}.design-space-scale i{display:block;width:var(--sample-space);height:var(--sample-space);min-width:4px;min-height:4px;border:1px solid var(--foreground);background:var(--secondary)}.design-motion-specimen{display:grid;grid-template-columns:minmax(8rem,.45fr) auto minmax(12rem,1fr);align-items:center;gap:var(--space-3);overflow:hidden;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--muted);font-size:var(--text-label)}.design-motion-specimen>span:first-child,.design-motion-specimen>strong{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--foreground)}.design-motion-specimen>strong{animation:design-motion-stage var(--motion-duration-slow) var(--motion-easing-standard) both}@keyframes design-motion-stage{0%{opacity:0;transform:translateX(var(--motion-distance-rail-enter))}to{opacity:1;transform:translateX(0)}}.design-preview{min-width:0;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}.design-preview>figcaption{display:grid;gap:2px;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--grid);font-size:var(--text-label)}.design-preview>figcaption span{color:var(--faint);font-size:var(--text-caption)}.design-preview-canvas{min-width:0;padding:clamp(var(--space-4),4vw,var(--space-8));background:var(--background)}.design-preview-canvas[data-tone=muted]{background:var(--secondary)}.design-preview-canvas[data-tone=inverse]{background:var(--inverse);color:var(--inverse-foreground)}.design-preview-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}.design-chat-preview,.design-form-stack{display:grid;gap:var(--space-4)}.design-card-demo,.design-link-card{min-height:7rem}.design-card-demo,.design-card-demo>button,.design-link-card>a{display:grid;align-content:center;gap:var(--space-2);padding:var(--space-4)}.design-card-demo span,.design-link-card span{color:var(--muted);line-height:1.45}.design-pressable-demo{min-height:var(--interactive-target-min);padding-inline:var(--space-4);border:1px solid var(--control-border);border-radius:var(--control-radius);background:var(--background);color:var(--foreground);font:inherit}.design-pressable-demo[data-hovered]{background:var(--surface-hover)}.design-pressable-demo[data-focus-visible]{outline:2px solid var(--focus);outline-offset:2px}.design-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.design-fader-demo{display:flex;min-height:12rem;align-items:stretch}.design-inline-note{color:var(--muted);font-size:var(--text-label)}.design-badge{display:inline-grid;min-width:1.35rem;height:1.35rem;place-items:center;border-radius:var(--radius-round);background:var(--accent);color:var(--accent-foreground);font-size:var(--text-caption)}.design-person{display:inline-flex;align-items:center;gap:var(--space-2)}.design-surface-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.design-surface-grid>*{min-height:6rem;padding:var(--space-4)}.design-dither-demo{display:grid;min-height:13rem;place-items:center;padding:var(--space-6);text-align:center}.design-shell-specimen{position:relative;height:32rem;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--background)}.design-shell-demo{--navigation-rail-width:13rem;position:relative;height:100%;min-height:32rem}.design-shell-demo .jungle-app-shell__mobile-trigger,.design-shell-demo .jungle-app-shell__rail{position:absolute}.design-shell-demo-card{display:grid;gap:var(--space-2);padding:var(--space-4)}.design-shell-demo-card span{color:var(--muted);font-size:var(--text-label);line-height:1.5}.design-component-index{grid-template-columns:repeat(4,minmax(0,1fr))}.design-component-index article{padding:var(--space-4)}.design-component-index ul{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}.design-icon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.design-icon-grid article{display:grid;min-width:0;min-height:7rem;place-content:center;justify-items:center;gap:var(--space-3);padding:var(--space-4);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}.design-icon-grid code{max-width:100%;overflow:hidden;color:var(--muted);font:var(--text-caption) /1.3 var(--font-mono);text-overflow:ellipsis}.design-rule-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin:0;padding:0;list-style:none}.design-rule-list li{display:grid;gap:var(--space-2);padding:var(--space-4);border-top:1px solid var(--line)}.design-rule-list span{color:var(--muted);font-size:var(--text-label);line-height:1.55}.design-icon-sizes{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-6)}.design-icon-sizes>span{display:grid;justify-items:center;gap:var(--space-3)}.design-icon-sizes code{color:var(--muted);font:var(--text-caption) /1.3 var(--font-mono)}.design-icon-label,.design-icon-tone{display:flex;align-items:center;gap:var(--space-3)}.design-icon-tone{min-height:6rem;padding:var(--space-4)}.design-icon-label{margin:0}.design-effect-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.design-effect-stage{position:relative;display:grid;min-height:20rem;align-items:end;overflow:hidden;padding:clamp(var(--space-5),4vw,var(--space-8));border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--background);isolation:isolate}.design-effect-copy{position:relative;z-index:1;display:grid;max-width:26rem;gap:var(--space-2)}.design-effect-copy>span{color:var(--muted);font:var(--font-weight-medium) var(--text-caption) /1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.design-effect-copy>h3{max-width:12ch;margin:0;font-size:clamp(var(--text-heading),4vw,var(--text-title));letter-spacing:-.045em;line-height:1}.design-effect-contract p,.design-effect-copy>p,.design-effect-halo-content>p{margin:0;color:var(--muted);font-size:var(--text-label);line-height:1.55}.design-effect-halo-stage{display:grid;min-height:28rem;overflow:hidden;place-items:center;padding:clamp(var(--space-8),8vw,var(--space-16));border:1px solid var(--grid);background:var(--secondary)}.design-effect-halo{width:min(100%,28rem)}.design-effect-halo-content{display:grid;min-height:15rem;align-content:center;justify-items:center;gap:var(--space-3);padding:var(--space-8);border:1px solid var(--line);border-radius:var(--radius-round);background:var(--background);text-align:center}.design-effect-halo-content>span{display:grid;width:3rem;height:3rem;place-items:center;border-radius:var(--radius-round);background:var(--foreground);color:var(--background);font:var(--font-weight-bold) var(--text-label) /1 var(--font-mono)}.design-effect-halo-content>h3{max-width:12ch;margin:0;font-size:clamp(var(--text-heading),4vw,var(--text-title));letter-spacing:-.045em;line-height:1.05}.design-effect-liquid{min-height:30rem;overflow:hidden;border:1px solid var(--grid);background:var(--background);isolation:isolate}.design-effect-liquid>canvas[aria-hidden]{mix-blend-mode:screen;opacity:.76}.design-effect-liquid-scene{position:relative;display:grid;min-height:30rem;align-items:end;overflow:hidden;padding:clamp(var(--space-6),7vw,var(--space-12));isolation:isolate}.design-effect-liquid-scene>span{position:absolute;top:50%;right:-8%;z-index:0;filter:grayscale(.7) saturate(.5);font-size:min(38vw,24rem);line-height:1;mix-blend-mode:luminosity;opacity:.22;transform:translateY(-50%) rotate(-8deg);-webkit-user-select:none;user-select:none}.design-effect-liquid-scene>div{position:relative;z-index:1;display:grid;max-width:34rem;gap:var(--space-2)}.design-effect-liquid-scene h3,.design-effect-liquid-scene p{margin:0}.design-effect-liquid-scene p{color:var(--muted);font:var(--font-weight-medium) var(--text-caption) /1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.design-effect-liquid-scene h3{font-size:clamp(var(--text-title),7vw,5rem);letter-spacing:-.065em;line-height:.9}@media (prefers-reduced-motion:reduce){.design-effect-liquid-scene>span{transition:none}}@media (forced-colors:active){.design-effect-liquid-scene>.jungle-procedural-backdrop,.design-effect-liquid-scene>span,.design-effect-liquid>canvas[aria-hidden]{display:none}}.design-effect-contract{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.design-effect-contract>article{display:grid;align-content:start;gap:var(--space-3);padding:var(--space-5);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}.design-effect-contract h3{margin:0;font-size:var(--text-body)}.design-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);padding-block:var(--space-8);border-top:1px solid var(--line)}.design-pager a{display:grid;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--foreground);text-decoration:none;transition:background-color var(--motion-duration-fast) var(--motion-easing-standard)}.design-pager a:last-child{text-align:right}.design-pager a:hover{background:var(--surface-hover)}.design-pager a span{color:var(--faint);font-size:var(--text-caption);text-transform:uppercase}@media (max-width:1199px){.design-content-grid{grid-template-columns:minmax(0,1fr)}.design-page-outline{display:none}.design-component-index{grid-template-columns:repeat(2,minmax(0,1fr))}.design-effect-contract{grid-template-columns:minmax(0,1fr)}}@media (max-width:767px){.design-page-canvas{padding-inline:var(--space-6)}.design-top-description,.design-top-mark{display:none}.design-top-bar{gap:var(--space-2)}.design-card-grid,.design-component-index,.design-effect-grid,.design-preview-grid,.design-principle-grid,.design-scope-grid,.design-token-grid{grid-template-columns:minmax(0,1fr)}.design-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.design-rule-list{grid-template-columns:minmax(0,1fr)}.design-doc-section>table:not([class]){display:block;overflow-x:auto}.design-preview-canvas{padding:var(--space-4)}.design-effect-halo-stage{min-height:23rem;padding:var(--space-8) var(--space-4)}}@media (max-width:520px){.design-top-bar .jungle-top-bar__title{display:none}.design-top-bar .jungle-top-bar__actions{grid-column:2/-1;justify-content:flex-end}.design-top-bar .jungle-theme-toggle .jungle-segmented-control__item{padding-inline:var(--space-2)}.design-pager{grid-template-columns:minmax(0,1fr)}.design-pager a:last-child{text-align:left}.design-motion-specimen{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.design-pager a{transition:none}.design-motion-specimen>strong{animation:none}}