.vgdc-page .vgd-page-entry>.vgd-entry-title{display:none}
.vgdc{--ink:var(--vgd-editorial-ink,#293438);--muted:#526164;--teal:#226f70;--paper:#f6f3ec;--line:#d3ddd6;color:var(--ink);font-family:var(--vgd-font-body,-apple-system),BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:var(--vgd-editorial-body,17px);line-height:var(--vgd-editorial-leading,1.75);margin:24px auto 64px;max-width:1200px}
.vgdc *{box-sizing:border-box}.vgdc [hidden]{display:none!important}.vgdc input,.vgdc select,.vgdc textarea,.vgdc button{font:inherit}.vgdc :focus-visible{outline:3px solid #aa503b;outline-offset:4px}.vgdc p{margin:0 0 16px}.vgdc h1,.vgdc h2,.vgdc h3{font-family:var(--vgd-font-heading,Georgia),serif;font-weight:var(--vgd-editorial-weight,400);color:inherit;letter-spacing:-.025em;line-height:1.18}
.vgdc .vgdc-hero h1{font-size:clamp(36px,4.8vw,var(--vgd-editorial-title,60px));line-height:1.08;letter-spacing:-.03em;margin:0 0 22px;max-width:880px;color:var(--vgd-editorial-h1,var(--ink))}.vgdc-hero h1 em{color:var(--teal);font-weight:inherit}.vgdc-hero>p{max-width:680px;color:var(--muted);font-size:17px}.vgdc-hero{margin-bottom:28px}
.vgdc .vgdc-start{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* Scope control chrome to this app, overriding the theme's generic button skin. */
.vgdc button{border:1px solid transparent!important;border-radius:6px!important;padding:8px 12px!important;min-height:38px;background:transparent!important;color:var(--ink)!important;box-shadow:none!important;font-weight:600;cursor:pointer;line-height:1.4;white-space:normal;display:inline-flex;align-items:center;justify-content:center}
.vgdc button:disabled{opacity:.5;cursor:default}.vgdc .vgdc-button{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:12px 18px!important;min-height:46px;border-radius:6px!important;font-size:14px;font-weight:650;line-height:1.5;text-decoration:none;cursor:pointer;transition:background .15s}
.vgdc .vgdc-primary{background:var(--teal)!important;border:1px solid var(--teal)!important;color:#fff!important}.vgdc .vgdc-primary:hover:not(:disabled){background:#155354!important}.vgdc .vgdc-secondary{background:#fff!important;border:1px solid #b8cbc2!important;color:var(--teal)!important}.vgdc .vgdc-secondary:hover:not(:disabled){background:#edf4ef!important}.vgdc label.vgdc-button{margin:0}
.vgdc .vgdc-link{color:var(--teal)!important;text-decoration:underline;text-underline-offset:4px;font-size:13px;padding:8px 0!important;min-height:36px}.vgdc-file{position:absolute!important;width:1px!important;height:1px!important;opacity:0;overflow:hidden}.vgdc-start:has(.vgdc-file:focus-visible) label[for]{outline:3px solid #aa503b;outline-offset:4px}
.vgdc .vgdc-hint{font-size:12px;line-height:1.7;color:var(--muted);margin:10px 0 16px}.vgdc .vgdc-status{font-size:13px;color:var(--teal);line-height:1.6;margin:12px 0 24px;min-height:21px}.vgdc-status.is-error{color:#9b342c!important}
.vgdc-workbench{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.vgdc-image-panel{padding:24px;min-width:0}.vgdc-color-panel{padding:24px;background:var(--paper);border-left:1px solid var(--line);min-width:0}.vgdc h2{font-size:30px;margin:0 0 18px}.vgdc .vgdc-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.vgdc-panel-heading h2{font-size:25px;margin:0}.vgdc label{font-size:13px;font-weight:600;line-height:1.5}.vgdc .vgdc-zoom-label{display:flex;align-items:center;gap:8px;font-size:12px}.vgdc select,.vgdc input[type=text],.vgdc input:not([type]),.vgdc textarea{border:1px solid #bbc9c0;background:#fff;color:var(--ink);border-radius:5px;padding:9px 10px;max-width:100%;box-shadow:none;font-size:13px;line-height:1.5}.vgdc select{min-height:38px}.vgdc input[aria-invalid=true]{border-color:#9b342c}
.vgdc-image-stage{height:365px;display:flex;align-items:center;justify-content:center;overflow:auto;border:1px solid var(--line);border-radius:8px;background:repeating-conic-gradient(#fff 0% 25%,#f1f3ee 0% 50%) 0/18px 18px;position:relative}.vgdc-image-stage.is-dragging{outline:3px dashed var(--teal);outline-offset:-5px}.vgdc-image-stage>canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;flex-shrink:0}.vgdc-image-stage.is-zoomed{display:block}.vgdc-image-stage.is-zoomed>canvas{max-width:none;max-height:none;margin:0}.vgdc-empty{text-align:center;padding:24px;color:var(--muted)}.vgdc-empty svg{width:60px;height:60px;fill:none;stroke:#83a69b;stroke-width:1.5;margin:0 auto 12px}.vgdc-empty p{font-size:15px;line-height:1.7}.vgdc-empty small{font-size:11px}.vgdc-image-footer{display:flex;align-items:center;gap:14px;justify-content:space-between;min-height:105px}.vgdc-image-footer>div:first-child{min-width:0}.vgdc [data-image-info]{font-size:12px;line-height:1.6;overflow-wrap:anywhere;margin:14px 0 0}.vgdc-image-footer .vgdc-hint{font-size:11px;margin:5px 0 10px}.vgdc-inspector{flex:0 0 100px;text-align:center;padding:12px 0}.vgdc-inspector canvas{width:65px;height:65px;margin:0 auto;border:1px solid var(--line);background:repeating-conic-gradient(#fff 0% 25%,#e5e9e0 0% 50%) 0/10px 10px}.vgdc-inspector span{display:block;font-size:9px;color:var(--muted);line-height:1.5;margin-top:5px}.vgdc-extract{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:16px}.vgdc-extract label{display:flex;gap:8px;align-items:center;font-size:12px}
.vgdc-color-panel h2{font-size:25px}.vgdc-selected{padding:24px;min-height:150px;border-radius:8px;display:flex;align-items:flex-start;flex-direction:column;justify-content:space-between;gap:22px;margin-bottom:22px;background:#226f70;color:white}.vgdc-selected>span{font-size:30px;font-weight:500;letter-spacing:.5px;line-height:1.2}.vgdc .vgdc-native-label{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:500}.vgdc input[type=color]{width:34px;height:30px;min-height:0;padding:2px;border:1px solid #91a69c;border-radius:5px;background:#fff;cursor:pointer;flex-shrink:0}
.vgdc-code-row{display:grid;grid-template-columns:32px minmax(0,1fr) 45px;align-items:center;gap:6px;margin-bottom:10px}.vgdc-code-row label{font-size:11px;letter-spacing:.5px}.vgdc-code-row input{width:100%;min-width:0;font-size:12px!important;padding:9px 7px!important}.vgdc .vgdc-code-row button{font-size:11px;padding:8px 0!important;color:var(--teal)!important;text-decoration:underline;text-underline-offset:3px}.vgdc .vgdc-wide{width:100%}.vgdc-recent{margin-top:22px}.vgdc h3{font-size:20px;margin:0 0 12px}.vgdc-color-buttons{display:flex;flex-wrap:wrap;gap:8px}.vgdc .vgdc-color-chip{display:flex;flex:1 1 70px;align-items:flex-end;justify-content:flex-start;min-height:90px;padding:10px!important;border:1px solid #29343820!important;font-size:11px;border-radius:6px!important;line-height:1.4}.vgdc .vgdc-recent .vgdc-color-chip{width:32px;min-height:32px;flex:0 0 32px;font-size:0;border-radius:50%!important;padding:0!important}.vgdc .vgdc-recent h3{font-family:var(--vgd-font-body,system-ui);font-size:12px;font-weight:600;letter-spacing:0}
.vgdc-section{padding:32px 0;border-bottom:1px solid var(--line)}.vgdc-section>p,.vgdc-section-heading p{font-size:14px;color:var(--muted);max-width:650px;margin:0 0 20px}.vgdc-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:8px}.vgdc-section-heading h2{margin-bottom:12px}.vgdc-section-heading>.vgdc-link{flex-shrink:0}.vgdc-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin-top:14px}.vgdc-palette-tile{position:relative;min-width:0}.vgdc .vgdc-palette-tile>.vgdc-color-chip{width:100%;min-height:132px;padding:12px!important;font-size:12px}.vgdc .vgdc-remove{position:absolute;right:6px;top:6px;width:27px;min-height:27px;padding:0!important;border-radius:50%!important;background:#fff!important;color:#293438!important;font-size:20px;opacity:.95}.vgdc .vgdc-color-chip[aria-pressed=true]{outline:2px solid var(--teal);outline-offset:3px}.vgdc-export{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.vgdc-save{display:flex;gap:12px;align-items:flex-end;margin-top:24px}.vgdc-save label{display:grid;gap:7px;max-width:340px;flex:1}.vgdc-save input{width:100%}.vgdc-saved{display:grid;gap:8px;max-width:650px}.vgdc-saved-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:6px;padding:7px 12px}.vgdc .vgdc-saved-row>button:not(.vgdc-saved-delete){flex:1;justify-content:flex-start;padding:6px 0!important;font-size:13px;overflow-wrap:anywhere;text-align:left;min-width:0}.vgdc .vgdc-saved-delete{font-size:23px;padding:0!important;width:30px;flex-shrink:0}.vgdc-mini-swatches{display:flex;flex-shrink:0}.vgdc-mini-swatches i{width:13px;height:25px;display:block}
.vgdc-two-column{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}.vgdc-two-column h2{font-size:28px}.vgdc-stacked{display:grid;gap:8px;max-width:300px;margin:20px 0}.vgdc-harmony{margin:22px 0}.vgdc-shades{display:flex;margin:28px 0 12px;gap:2px;min-width:0}.vgdc .vgdc-shades .vgdc-color-chip{min-width:0;min-height:125px;padding:0!important;border-radius:3px!important;flex:1;font-size:0}.vgdc-shades+.vgdc-hint{display:flex;justify-content:space-between;font-size:11px}.vgdc-two-column .vgdc-button{font-size:13px}
.vgdc-contrast-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}.vgdc-contrast-field{display:flex;align-items:flex-end;gap:10px;margin-bottom:18px}.vgdc-contrast-field>label{display:grid;gap:7px;flex:1;min-width:0}.vgdc-contrast-field input:not([type=color]){width:100%;min-width:0}.vgdc .vgdc-contrast-field>.vgdc-link{font-size:11px;min-height:38px;flex-shrink:0}.vgdc-contrast-field>input[type=color]{height:38px}.vgdc-ratio{display:flex;gap:12px;align-items:baseline;margin:20px 0 16px}.vgdc-ratio strong{font-family:var(--vgd-font-heading,Georgia);font-size:36px;font-weight:400;line-height:1.2}.vgdc-ratio>span{font-size:12px;color:var(--muted)}.vgdc-badges{display:grid;grid-template-columns:1fr 1fr;gap:7px}.vgdc-badges span{font-size:11px;padding:6px 9px;border:1px solid;border-radius:5px}.vgdc-badges .is-pass{background:#edf5ee;color:#245d38;border-color:#aacbb4}.vgdc-badges .is-fail{background:#fcf0ed;color:#963b2e;border-color:#e2b6a8}.vgdc .vgdc-text-preview{border:1px solid var(--line);padding:30px;border-radius:10px;display:flex;flex-direction:column;justify-content:center;background:#fff;color:#293438}.vgdc .vgdc-text-preview h3{font-size:32px;color:inherit;margin-bottom:20px}.vgdc .vgdc-text-preview p{font-size:17px;line-height:1.75;color:inherit;margin-bottom:24px}.vgdc-text-preview>span{font-size:11px;color:inherit}
.vgdc-guide{margin-top:10px;max-width:820px}.vgdc-guide ol{padding-left:22px;font-size:15px;line-height:1.8;margin:0 0 36px}.vgdc-guide li{padding-left:6px;margin-bottom:13px}.vgdc-guide details{border-top:1px solid var(--line);padding:17px 0}.vgdc-guide summary{font-size:15px;font-weight:600;line-height:1.7;cursor:pointer}.vgdc-guide details p{font-size:14px;color:var(--muted);margin:14px 0 0}.vgdc-manual-copy{display:block;padding:24px 0}.vgdc-manual-copy textarea{display:block;width:100%;margin-top:12px;font-family:monospace}
.vgdv-tools article.vgdc-directory-card{margin-top:26px}.vgdc-card-colors{display:flex;min-height:160px;border-radius:6px;overflow:hidden}.vgdc-card-colors span{flex:1}.vgdv-tools .vgdc-card-code{font:28px/1.4 var(--vgd-font-heading,Georgia),serif;margin:20px 0 0;color:var(--ink)}.vgdc-card-code>span{display:block;font:12px/1.7 var(--vgd-font-body,system-ui);color:var(--muted);margin-top:6px}.vgdv-tools .vgdc-card-demo figcaption{margin-top:16px}
@media(max-width:900px){.vgdc-workbench{grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr)}.vgdc-image-panel,.vgdc-color-panel{padding:20px}.vgdc-panel-heading h2{font-size:23px}.vgdc-two-column,.vgdc-contrast-grid{gap:24px}.vgdc-contrast-field{flex-wrap:wrap}.vgdc-contrast-field>.vgdc-link{flex-basis:100%;justify-content:flex-start}.vgdc-image-stage{height:330px}}
@media(max-width:720px){.vgdc{margin-top:16px}.vgdc-hero>p{font-size:16px}.vgdc .vgdc-start{gap:9px}.vgdc .vgdc-start>.vgdc-button{flex:1 1 40%;padding:11px 12px!important;font-size:13px}.vgdc .vgdc-start>.vgdc-link{flex:1 1 40%}.vgdc-workbench{display:block}.vgdc-color-panel{border-left:0;border-top:1px solid var(--line)}.vgdc-image-stage{height:300px}.vgdc h2{font-size:28px}.vgdc-selected{min-height:135px}.vgdc-code-row{grid-template-columns:34px minmax(0,1fr) 50px;gap:10px}.vgdc-code-row input{font-size:14px!important;padding:10px!important}.vgdc .vgdc-code-row button{font-size:12px}.vgdc-two-column,.vgdc-contrast-grid{grid-template-columns:1fr;gap:0}.vgdc-contrast-grid{gap:24px}.vgdc-palette{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}.vgdc .vgdc-palette-tile>.vgdc-color-chip{min-height:105px;font-size:11px}.vgdc-section-heading{gap:12px}.vgdc-section-heading>.vgdc-link{font-size:11px}.vgdc-save{flex-wrap:wrap}.vgdc-save label{flex-basis:100%;max-width:none}.vgdc .vgdc-save>.vgdc-button{width:100%}.vgdc .vgdc-export>.vgdc-button{flex:1 1 100%}.vgdc-two-column .vgdc-section{padding-bottom:30px}.vgdc-text-preview{min-height:300px}.vgdc .vgdc-contrast-field>.vgdc-link{flex-basis:auto}.vgdc-contrast-field input:not([type=color]){font-size:14px}.vgdc .vgdc-contrast-field>.vgdc-link{font-size:11px}.vgdc-mini-swatches i{width:9px}.vgdc-shades+.vgdc-hint{font-size:10px}.vgdc-guide summary{font-size:14px}}
@media(prefers-reduced-motion:reduce){.vgdc *{transition:none!important}}
.vgdc .vgdc-harmony-section .vgdc-stacked{max-width:none}
.vgdc-harmony-controls{display:grid;gap:15px;margin:18px 0}
.vgdc .vgdc-harmony-controls label{display:block;font-size:12px;font-weight:600}
.vgdc-harmony-controls output{float:right;font-weight:400;color:var(--muted)}
.vgdc .vgdc-harmony-controls input[type=range]{display:block;width:100%;height:20px;padding:0;margin:10px 0 0;accent-color:var(--teal)}
.vgdc-harmony-item{flex:1 1 78px;min-width:0}
.vgdc .vgdc-harmony-item>.vgdc-color-chip{width:100%;min-height:110px}
.vgdc .vgdc-companion-label{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px;min-height:30px;font-family:var(--vgd-font-body,system-ui);font-size:11px;font-weight:400;line-height:1.5;color:var(--muted)}
.vgdc-companion-label input[type=color]{width:28px;height:25px}
.vgdc .vgdc-artist-note{font-size:12px;line-height:1.75;color:var(--ink);background:var(--paper);border-left:3px solid var(--teal);border-radius:0 5px 5px 0;padding:13px 15px;margin:18px 0 22px}
.vgdc .vgdc-contrast-source{display:grid;gap:7px;font-size:12px;font-weight:500;margin:-6px 0 22px;min-width:0}
.vgdc-contrast-source select{width:100%;min-width:0;font-size:12px}
.vgdc-color-select{position:relative;font-weight:400}
.vgdc-color-select>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;border:1px solid #bbc9c0;border-radius:5px;background:#fff;padding:10px 12px;font-size:13px;min-height:48px}
.vgdc-color-select>summary::-webkit-details-marker{display:none}
.vgdc-color-dot{display:inline-block;flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:1px solid #718479;box-shadow:inset 0 0 0 2px #ffffff40}
.vgdc-select-arrow{margin-left:auto;font-size:19px;line-height:1}
.vgdc-color-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:20;max-height:280px;overflow:auto;border:1px solid #b8cbc2;border-radius:7px;padding:8px;background:#fff;box-shadow:0 9px 25px #29343820}
.vgdc .vgdc-color-menu-heading{font-size:11px;font-weight:650;color:var(--muted);margin:8px 7px 5px}
.vgdc .vgdc-color-option{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;padding:8px!important;font-size:13px;text-align:left;font-weight:500}
.vgdc .vgdc-color-option:hover,.vgdc .vgdc-color-option[aria-pressed=true]{background:#edf4ef!important}
.vgdc-color-check{margin-left:auto;color:var(--teal)}
.vgdc .vgdc-contrast-field input[type=color]{width:38px;height:38px;border-radius:50%;padding:3px}
.vgdc-contrast-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.vgdc-contrast-field input[type=color]::-webkit-color-swatch{border-radius:50%;border:0}
.vgdc-contrast-field input[type=color]::-moz-color-swatch{border-radius:50%;border:0}