.studio-color-font-feedback{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-bottom:16px;border:1px solid var(--studio-rule,#393a3b);border-radius:8px;background:var(--studio-panel,#202122);color:var(--studio-text,#f2f2f2);font:var(--studio-text-label,12px)/var(--studio-line-ui,1.45) var(--studio-font-ui,system-ui),sans-serif}.studio-color-font-feedback>span{min-width:0;overflow-wrap:anywhere}.studio-color-font-feedback .ui-button{flex:0 0 auto}.studio-color-artwork{--color-artwork-rule:color-mix(in srgb,var(--color-artwork-foreground) 28%,transparent);box-sizing:border-box;display:flex;flex:1 1;flex-direction:column;min-width:0;min-height:780px;padding:var(--color-artwork-inset);font-family:var(--color-artwork-body);font-weight:var(--color-artwork-body-weight);font-synthesis:none;overflow-wrap:anywhere}.studio-color-artwork-footer,.studio-color-artwork-header{display:flex;align-items:baseline;justify-content:space-between;gap:20px;font:var(--studio-text-meta,11px)/var(--studio-line-ui,1.45) var(--studio-font-ui,system-ui),sans-serif}.studio-color-artwork-header{padding-bottom:18px;border-bottom:1px solid var(--color-artwork-rule)}.studio-color-artwork-header>span:first-child{font-weight:600}.studio-color-artwork-footer>code,.studio-color-artwork-header>span:last-child{text-align:right}.studio-color-artwork-footer{margin-top:auto;padding-top:28px}.studio-color-artwork-footer>code{font:inherit;font-family:var(--font-mono,monospace)}.studio-color-artwork-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:42px;padding:50px 0 40px}.studio-color-artwork-hero{min-width:0}.studio-color-artwork-hero>h2,.studio-color-artwork-reading>h3{margin:0;font-family:var(--color-artwork-display);font-weight:var(--color-artwork-display-weight);white-space:pre-wrap;text-wrap:pretty;word-break:normal;overflow-wrap:normal}.studio-color-artwork-hero>h2{font-size:var(--color-artwork-headline-size);line-height:var(--color-artwork-headline-leading);letter-spacing:var(--color-artwork-headline-tracking);max-width:100%}.studio-color-artwork-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}.studio-color-artwork-tile{display:grid;place-items:center;aspect-ratio:1.6;position:relative;overflow:hidden;border:1px solid var(--color-artwork-rule);color:color-mix(in srgb,var(--color-artwork-foreground) 65%,transparent)}.studio-color-artwork-tile>i{position:absolute;display:block;width:100%;height:100%;box-sizing:border-box;background:transparent}.studio-color-artwork-tile[data-shape=circle]>i{width:auto;height:72%;aspect-ratio:1;border:1px solid;border-radius:50%}.studio-color-artwork-tile[data-shape=diagonal]>i{background:linear-gradient(135deg,transparent calc(50% - .7px),currentColor 50%,transparent calc(50% + .7px))}.studio-color-artwork-tile[data-shape=cutout]>i{width:125%;height:auto;aspect-ratio:1;top:25%;left:-12.5%;border:1px solid;border-radius:50%}.studio-color-artwork-reading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}.studio-color-artwork-reading>h3{font-size:var(--color-artwork-reading-size);font-weight:var(--color-artwork-reading-weight);line-height:var(--color-artwork-reading-leading);letter-spacing:var(--color-artwork-reading-tracking)}.studio-color-artwork-pair-body,.studio-color-artwork-reading>p{margin:0;font-family:var(--color-artwork-body);font-weight:var(--color-artwork-body-weight);font-size:var(--color-artwork-body-size);line-height:var(--color-artwork-body-leading);letter-spacing:var(--color-artwork-body-tracking);white-space:pre-wrap;max-width:58ch}.studio-color-artwork[data-composition=poster] .studio-color-artwork-hero{text-align:center}.studio-color-artwork[data-composition=poster] .studio-color-artwork-reading{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px;text-align:center}.studio-color-artwork[data-composition=split] .studio-color-artwork-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}.studio-color-artwork[data-composition=split] .studio-color-artwork-tiles{grid-template-columns:minmax(0,1fr)}.studio-color-artwork[data-composition=split] .studio-color-artwork-tile{aspect-ratio:2}.studio-color-artwork[data-composition=split] .studio-color-artwork-reading{grid-column:1/-1}.studio-color-artwork[data-view=pairings]{min-height:600px}.studio-color-artwork[data-view=pairings] .studio-color-artwork-layout{grid-template-columns:minmax(0,1fr);flex:1 1;align-content:center}.studio-color-artwork-pair-body{margin-top:32px}.studio-color-artwork[data-composition=poster] .studio-color-artwork-pair-body{margin-inline:auto}.studio-color-artwork[data-narrow=true]{min-height:700px}.studio-color-artwork[data-narrow=true] .studio-color-artwork-layout{grid-template-columns:minmax(0,1fr);gap:30px;padding-block:34px}.studio-color-artwork[data-narrow=true] .studio-color-artwork-reading{grid-template-columns:minmax(0,1fr);gap:22px}.studio-color-artwork[data-narrow=true] .studio-color-artwork-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-color-artwork[data-narrow=true] .studio-color-artwork-tile{aspect-ratio:1.2}.studio-color-artwork[data-narrow=true] .studio-color-artwork-footer{flex-wrap:wrap;gap:8px 16px}.studio-color-stage{padding-bottom:48px}.studio-color-stage[data-color-view=palette]{background-image:none}.studio-color-artboard{padding:0;background:transparent;display:flex;flex-direction:column}.studio-color-active-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.studio-color-active-heading>span{font-size:var(--studio-text-panel)}.studio-color-active-heading small{display:block;color:var(--studio-muted);font:var(--studio-text-meta)/1.5 var(--font-mono),monospace;margin-top:5px}.studio-color-pairing-library{margin-top:32px}.studio-color-section-heading{display:flex;align-items:start;justify-content:space-between;gap:20px;margin:32px 0 18px}.studio-color-section-heading h2{font:500 var(--studio-text-panel)/var(--studio-line-ui) var(--studio-font-ui);margin:0 0 5px}.studio-color-guidance,.studio-color-section-heading p{font:var(--studio-text-label)/var(--studio-line-ui) var(--studio-font-ui);color:var(--studio-muted);margin:0;max-width:68ch}.studio-color-guidance{margin:12px 0 20px}.studio-color-candidates{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(205px,100%),1fr));gap:16px}.studio-color-pair-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--studio-rule);padding:0;background:var(--studio-panel);color:var(--studio-text);border-radius:10px;overflow:hidden;cursor:pointer;text-align:left;min-width:0}.studio-color-pair-card:hover{border-color:var(--studio-muted)}.studio-color-pair-card[aria-pressed=true]{border-color:var(--studio-accent);outline:1px solid var(--studio-accent)}.studio-color-pair-card:focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}.studio-color-pair-proof{padding:28px 22px;min-height:130px;display:flex;flex-direction:column;gap:7px;font:46px/1 var(--font-heading),sans-serif}.studio-color-pair-proof>span{font:14px/1.5 var(--studio-font-ui)}.studio-color-pair-card-caption{padding:16px;display:flex;flex-direction:column;gap:6px}.studio-color-pair-card-caption strong{font:500 var(--studio-text-control)/var(--studio-line-ui) var(--studio-font-ui);overflow-wrap:anywhere}.studio-color-pair-card-caption code,.studio-color-pair-card-caption small{font:var(--studio-text-meta)/1.5 var(--font-mono),monospace;color:var(--studio-muted)}.studio-color-pair-card-caption svg{position:absolute;bottom:15px;right:12px;color:var(--studio-accent)}.studio-color-empty{padding:24px;border:1px dashed var(--studio-rule);border-radius:8px;color:var(--studio-muted);font-size:var(--studio-text-control)}.studio-color-statusbar>.ui-button{font-size:var(--studio-text-control);min-height:32px}.studio-color-statusbar>div{min-width:0}.studio-color-statusbar>div>span{font-size:var(--studio-text-meta);white-space:nowrap}.studio-color-workspace[data-preview=true]{grid-template-rows:minmax(0,1fr)}.studio-color-workspace[data-preview=true] .studio-statusbar,.studio-color-workspace[data-preview=true] .studio-topbar{display:none}.studio-color-stage[data-preview=true]{display:flex;align-items:safe center;justify-content:center;padding:32px}@media (max-width:700px){.studio-color-stage{padding:16px 16px 32px}.studio-color-section-heading{flex-direction:column;gap:12px}.studio-color-active-heading{align-items:start}.studio-color-active-heading small{max-width:24ch}.studio-color-statusbar{gap:4px}.studio-color-statusbar>div>span{display:none}.studio-color-stage[data-preview=true]{padding:12px}}