.icon-wrapper{border-radius:var(--dds-radius-small);vertical-align:middle;justify-content:center;min-width:7em;min-height:7em;display:inline-flex;position:relative}.overlay{border-radius:var(--dds-radius-small);position:absolute}.copy-container{grid-template-columns:1fr 1fr;width:100%;height:30px;display:grid;position:absolute;bottom:0}.icon-copy-item{border-radius:var(--dds-radius-small);cursor:pointer;justify-content:center;align-items:center;display:flex}
.live-css-editor-container{border:1px solid var(--ifm-color-emphasis-300,#d1d5db);background:var(--ifm-background-surface-color,#fff);border-radius:8px;margin:1.5rem 0;overflow:hidden}.live-css-editor-toolbar{border-bottom:1px solid var(--ifm-color-emphasis-300,#d1d5db);background:var(--ifm-color-emphasis-100,#f3f4f6);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.live-css-editor-preset-selector{align-items:center;gap:.5rem;font-size:.875rem;display:flex}.live-css-editor-preset-selector label{margin:0;font-weight:500}.live-css-editor-select{border:1px solid var(--ifm-color-emphasis-300,#d1d5db);background:var(--ifm-background-color,#fff);color:var(--ifm-font-color-base,#1f2937);cursor:pointer;border-radius:4px;padding:.375rem .75rem;font-size:.875rem}.live-css-editor-select:focus{outline:2px solid var(--ifm-color-primary,#2563eb);outline-offset:2px}.live-css-editor-buttons{gap:.5rem;margin-left:auto;display:flex}.live-css-editor-button,.live-css-editor-reset-button,.live-css-editor-format-button{cursor:pointer;border:none;border-radius:4px;align-items:center;gap:.375rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.live-css-editor-button{background:var(--ifm-color-primary,#2563eb);color:#fff}.live-css-editor-button:hover{background:var(--ifm-color-primary-dark,#1d4ed8)}.live-css-editor-reset-button{background:var(--ifm-color-danger,#dc2626);color:#fff}.live-css-editor-reset-button:hover{background:var(--ifm-color-danger-dark,#b91c1c)}.live-css-editor-format-button{background:var(--ifm-color-secondary,#4b5563);color:#fff}.live-css-editor-format-button:hover:not(:disabled){background:var(--ifm-color-secondary-dark,#374151)}.live-css-editor-format-button:disabled{opacity:.6;cursor:not-allowed}.live-css-editor-split-pane{grid-template-columns:1fr 1fr;gap:0;min-height:400px;display:grid}@media (max-width:996px){.live-css-editor-split-pane{grid-template-columns:1fr}}.live-css-editor-editor-pane,.live-css-editor-preview-pane{flex-direction:column;display:flex;overflow:hidden}.live-css-editor-editor-pane{border-right:1px solid var(--ifm-color-emphasis-300,#d1d5db)}@media (max-width:996px){.live-css-editor-editor-pane{border-right:none;border-bottom:1px solid var(--ifm-color-emphasis-300,#d1d5db)}}.live-css-editor-pane-header{border-bottom:1px solid var(--ifm-color-emphasis-300,#d1d5db);background:var(--ifm-color-emphasis-200,#e5e7eb);color:var(--ifm-color-emphasis-800,#1f2937);padding:.75rem 1rem;font-size:.875rem;font-weight:600}.live-css-editor-codemirror{height:450px;overflow:auto}.live-css-editor-codemirror .cm-editor{border:none;height:100%;overflow:hidden}.live-css-editor-codemirror .cm-scroller{padding:1rem;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:.875rem;line-height:1.6;overflow:auto}.live-css-editor-preview{background:var(--ifm-background-color,#fff);flex:1;justify-content:center;align-items:center;padding:2rem;display:flex;overflow:auto}.live-css-editor-preview>*{max-width:100%}.live-css-editor-preview--light{background:var(--ifm-background-color,#fff)}.live-css-editor-preview--dark{background:var(--ifm-color-emphasis-900,#111827)}.live-css-editor-container--minimal{border:1px solid var(--ifm-color-emphasis-300,#d1d5db);border-radius:4px;margin:0}.live-css-editor-toolbar--compact{padding:.5rem .75rem}.live-css-editor-toolbar--compact .live-css-editor-button,.live-css-editor-toolbar--compact .live-css-editor-reset-button,.live-css-editor-toolbar--compact .live-css-editor-format-button{padding:.375rem .75rem;font-size:.8125rem}.live-css-editor-editor-only{grid-template-columns:1fr;min-height:auto}.live-css-editor-editor-only .live-css-editor-editor-pane{border-right:none}.live-css-editor-container--minimal .live-css-editor-pane-header{display:none}.live-css-editor-container--minimal .live-css-editor-codemirror,.live-css-editor-container--minimal .live-css-editor-codemirror .cm-editor{height:auto}.live-css-editor-container--minimal .live-css-editor-codemirror .cm-scroller{padding:.75rem}
.token-inheritance-visualizer{max-width:100%;margin:2rem 0;overflow-x:hidden}.token-inheritance-visualizer__container{flex-direction:column;gap:0;max-width:100%;display:flex;overflow-x:hidden}.tier-accordion{margin-bottom:0}.tier-accordion--tier1{--dds-accordion-border-color:var(--dds-brand-600);--dds-accordion-background-color:var(--dds-brand-50);--dds-accordion-hover-background:var(--dds-brand-100)}.tier-accordion--tier1::part(base){border-left:4px solid var(--dds-brand-1000)}.tier-accordion--tier2{--dds-accordion-border-color:var(--dds-positive-600);--dds-accordion-background-color:var(--dds-positive-50);--dds-accordion-hover-background:var(--dds-positive-100)}.tier-accordion--tier2::part(base){border-left:4px solid var(--dds-positive-1000)}.tier-accordion--tier3{--dds-accordion-border-color:var(--dds-informative-600);--dds-accordion-background-color:var(--dds-informative-50);--dds-accordion-hover-background:var(--dds-informative-100)}.tier-accordion--tier3::part(base){border-left:4px solid var(--dds-informative-1000)}.tier-heading{align-items:center;display:flex}.tier-heading__icon{font-size:1.5rem;line-height:1}.tier-heading__label{color:var(--dds-text-neutral-subtle,#666)}.tier-heading__title{font-size:1rem}.tier-description{color:var(--dds-text-neutral-subtle,#666);margin-bottom:1rem}.tier-reference-pattern{border-left:3px solid var(--dds-informative-1000,#0063db);background:var(--dds-background-informative-subtle,#e6f0ff);color:var(--dds-text-neutral-base,#1a1a1a);border-radius:4px;margin-bottom:1rem;padding:.75rem 1rem}.tier-reference-pattern strong{color:var(--dds-text-neutral-strong,#000);font-weight:600}.token-name,.token-value,.resolution-chain{background:var(--dds-background-neutral-base,#f5f5f5);color:var(--dds-text-neutral-base,#1a1a1a);border-radius:3px;padding:.125rem .375rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.8125rem}.token-name{color:var(--dds-brand-1000,#4258ed);font-weight:600}.resolution-chain{color:var(--dds-text-neutral-subtle,#666);text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;display:inline-block;overflow:hidden}.color-swatch{border:1px solid var(--dds-border-neutral-base,#e0e0e0);border-radius:4px;width:40px;height:40px;box-shadow:inset 0 0 0 1px #0000000d}.copied-indicator{z-index:10;background-color:var(--dds-background-neutral-strong-inverted,#1a1a1a);color:var(--dds-text-neutral-inverted,#fff);white-space:nowrap;pointer-events:none;border-radius:4px;padding:.25rem .75rem;font-size:.75rem;font-weight:500;animation:1.5s fade-in-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes fade-in-out{0%{opacity:0}20%{opacity:1}80%{opacity:1}to{opacity:0}}.inheritance-arrow{flex-direction:column;align-items:center;padding:1rem 0;display:flex;position:relative}.inheritance-arrow__line{background:var(--dds-border-neutral-medium,#ccc);width:2px;height:20px}.inheritance-arrow__head{color:var(--dds-text-neutral-subtle,#666);margin-top:-4px;font-size:1rem;line-height:1}.inheritance-arrow__label{background:var(--dds-background-neutral-subtle,#fff);color:var(--dds-text-neutral-subtle,#666);letter-spacing:.05em;text-transform:uppercase;border-radius:3px;margin-top:.25rem;padding:.25rem .5rem;font-size:.75rem;font-weight:600}.token-inheritance-visualizer__callout{margin-top:2rem}.token-inheritance-visualizer__callout p{margin:.5rem 0;line-height:1.6}.token-inheritance-visualizer__callout code{background:var(--dds-background-neutral-subtle,#fff);color:var(--dds-brand-1000,#4258ed);border-radius:3px;padding:.125rem .375rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.8125rem}@media (max-width:768px){.tier-heading{gap:.5rem;font-size:.9375rem}.tier-heading__icon{font-size:1.25rem}.tier-heading__label{font-size:.6875rem}.tier-description{font-size:.8125rem}.resolution-chain{max-width:180px;font-size:.6875rem}.color-swatch{width:32px;height:32px}}@media (max-width:480px){.tier-heading{flex-wrap:wrap}.tier-heading__title{font-size:.875rem}.resolution-chain{max-width:120px}.token-name,.token-value{font-size:.75rem}}