.rg-preview{width:100%;height:100%;display:grid;grid-template-areas:"toolbar" "main";grid-template-rows:auto 1fr;container-type:inline-size;container-name:rg-preview-container}.rg-preview-navbar{grid-area:navbar}.rg-preview-toolbar{grid-area:toolbar;width:100%;height:var(--toolbar-height)}.rg-background-image{background-size:contain;background-position:center;background-repeat:no-repeat}.rg-preview-main{grid-area:main;position:relative;display:flex;container-type:inline-size;container-name:rg-preview-main-container}.rg-preview-live-demo{display:flex;flex-direction:column;width:100%;height:100%;margin:auto;max-width:var(--max-preview-layout-width)}.rg-preview-live-demo>.rg-preview-result,.rg-preview-live-demo>.rg-preview-input{flex:1;display:flex;min-height:0;flex-direction:column}.rg-preview-result{align-items:center;justify-content:center;gap:2rem;overflow-y:auto;overflow-x:hidden}.rg-preview-result>*{flex-shrink:0}.rg-preview-result>:first-child{margin-top:1.5rem}.rg-preview-result>:last-child{margin-bottom:1.5rem}@container rg-preview-main-container (max-width: var(--max-preview-layout-width)){.rg-preview-result{padding:0 5%}.rg-preview-input.keypad{border-top:1px solid var(--color-outline-soft)}}@container rg-preview-main-container (min-width: var(--max-preview-layout-width)){.rg-preview-result{padding:0 10%}.rg-preview-input.keypad{margin:0 10px 10px;border-radius:var(--dimen-radius-normal);overflow:hidden;border:1px solid var(--color-outline-soft)}}.share-dialog-link-section{display:flex;flex-direction:column;gap:10px}.share-dialog-link-section .share-dialog-input{margin:0}.share-dialog-options-section{display:flex;flex-direction:column;gap:16px}.share-dialog-actions{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}.rg-preview-single-result{display:grid;grid-template-areas:"input output" "image output";grid-template-columns:1fr 2fr;grid-template-rows:auto 1fr;gap:20px;margin:auto;width:100%;max-width:var(--max-preview-shared-width);padding:4rem 1rem}@container rg-preview-main-container (max-width: var(--max-preview-layout-width)){.rg-preview-single-result{grid-template-areas:"input" "image" "output";grid-template-columns:1fr;gap:2rem;padding:4rem 10%}}.rg-preview-single-result-input,.rg-preview-single-result-image,.rg-preview-single-result-output,.rg-preview-multiple-results-input{display:flex;flex-direction:column}.rg-preview-single-result-input,.rg-preview-single-result-output,.rg-preview-multiple-results-input{border:1px solid var(--color-outline-muted);border-radius:var(--dimen-radius-normal);background-color:var(--color-surface-container);>h4{margin:0;padding:10px 20px;text-align:center;font-weight:700;font-size:11pt}>*:not(:last-child){border-bottom:1px solid var(--color-outline-muted)}}.rg-preview-single-result-output-item,.rg-preview-single-result-input-item,.rg-preview-multiple-results-input-item,.rg-preview-multiple-results-output-item{display:flex;justify-content:space-between;padding:10px 20px;gap:20px;>span:first-child{font-size:11pt;color:var(--color-on-surface-soft)}}.rg-preview-single-result-output-item.breakdown,.rg-preview-multiple-results-output-item.breakdown{flex-direction:column;height:100%;>.breakdown-area{flex:1;display:flex;justify-content:center;align-items:center}}.rg-preview-single-result-input{grid-area:input}.rg-preview-single-result-image{grid-area:image;align-items:center;justify-content:center}.rg-preview-single-result-output{grid-area:output}.rg-preview-multiple-results{display:flex;flex-direction:column;align-items:center;margin:auto;gap:1rem;overflow:hidden}.rg-preview-multiple-results-input{min-width:200px}.rg-preview-multiple-results-output{display:flex;flex-direction:column;width:100%;padding:0 1rem;>h4{padding-inline-start:2rem}}.rg-preview-multiple-results-output-list{display:flex;flex-direction:row;gap:1rem;padding:1rem 2rem;width:100%;overflow:auto;position:relative}.rg-preview-multiple-results-output-list:before{content:"";position:sticky;pointer-events:none;top:0;left:-2rem;min-width:calc(100% + 4rem);min-height:calc(100% + 2rem);margin:-1rem -2rem;margin-inline-end:calc(-100% - 3rem);z-index:var(--z-index-overlay);background-image:linear-gradient(to right,var(--color-surface),transparent 2.5rem),linear-gradient(to left,var(--color-surface),transparent 2.5rem)}.rg-preview-multiple-results-output-card{flex-shrink:0;display:flex;flex-direction:column;min-width:300px;max-width:400px;max-height:100%;background-color:var(--color-surface-container);border:1px solid var(--color-outline-soft);border-radius:var(--dimen-radius-normal);>*:first-child{padding:1rem;width:100%}>*:not(:last-child){border-bottom:1px solid var(--color-outline-muted)}}.rg-preview-invalid{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--color-on-surface-soft)}.band-resistor-image{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-width:300px;width:100%}.band-resistor-image-layers{display:flex;position:relative;align-items:center;justify-content:center;width:100%;aspect-ratio:4 / 1}.band-resistor-image-layer{position:absolute;width:100%;height:100%}.band-resistor-breakdown{display:flex;flex-direction:column;width:100%}.band-resistor-breakdown-trigger{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;width:100%;transition:filter ease-in-out .1s}.band-resistor-breakdown-trigger.valid:hover{filter:brightness(105%)}.band-resistor-breakdown-trigger.valid:active{filter:brightness(95%)}.band-resistor-breakdown-dialog{max-width:500px;margin:max(20px,auto) max(20px,auto)}.resistorDetailsTable{width:100%;border-collapse:collapse;display:flex;flex-direction:column;gap:5px;font-size:10pt}.resistorDetailsRow{display:grid;grid-template-columns:1fr 2fr 2fr 1fr;column-gap:15px;align-items:center;border:1px solid var(--color-outline-muted);background-color:var(--color-surface-container-high);border-radius:var(--dimen-radius-normal);padding:5px 20px}.resistorDetailsRow>.resistorDetailsCell:nth-child(2),.resistorDetailsRow>.resistorDetailsCell:nth-child(3),.resistorDetailsRow:not(.resistorDetailsHeader)>.resistorDetailsCell:nth-child(4){justify-content:center}.resistorDetailsHeader{font-weight:700;border:1px solid var(--color-outline-muted);background-color:var(--color-surface-container-highest);border-radius:var(--dimen-radius-normal);padding:10px 20px}.resistorDetailsCell{display:flex;text-align:center}.resistorDetailsCell.band{max-width:60px}.resistorDetailsCell.color{font-weight:600}.smd-resistor-image{display:flex;flex-direction:column;min-width:240px;width:30cqw}.smd-resistor-image-layers{display:flex;position:relative;align-items:center;justify-content:center;width:100%;aspect-ratio:23 / 15}.smd-resistor-image-layer{position:absolute;width:100%;height:100%}.smd-resistor-image-code{position:absolute;width:60%;height:100%;display:flex;align-items:center;justify-content:center;container-type:inline-size;>p{font-family:var(--font-square);font-size:40cqw;width:max-content;max-width:100%;height:max-content;margin:0 0 1cqh;color:#fff}}.component-image-shadow{width:100%;aspect-ratio:289 / 43}.smd-resistor-code-breakdown{display:flex;flex-direction:row;gap:1.5rem;justify-content:center;flex-wrap:wrap;user-select:none;padding:1rem 0}.smd-code-group{display:flex;flex-direction:column;align-items:center}.smd-code-group-digits{display:flex;flex-direction:row;gap:4px}.smd-code-digit{background-color:var(--color-surface-container-high);border:1px solid var(--color-outline-muted);border-radius:var(--dimen-radius-normal);padding:8px 12px;font-family:var(--font-square);font-size:24pt;min-width:40px;text-align:center;transition:background-color ease-in-out .1s,border-color ease-in-out .1s}.smd-code-group-border{width:100%;height:1px;background-color:var(--color-outline-muted);margin:8px 0;transition:background-color ease-in-out .1s}.smd-code-group-meaning{font-size:11pt;color:var(--color-on-surface-soft);text-align:center;transition:color ease-in-out .1s}.smd-code-group-value{font-size:11pt;margin-top:5px;color:var(--color-on-surface-soft);font-family:monospace;user-select:text;font-weight:700}.smd-code-group:hover .smd-code-digit{background-color:var(--color-surface-container-highest);border-color:var(--color-on-surface-soft)}.smd-code-group:hover .smd-code-group-border{background-color:var(--color-on-surface)}.smd-code-group:hover .smd-code-group-meaning,.smd-code-group:hover .smd-code-group-value{color:var(--color-on-surface)}