/* Only artwork uses project colors. Studio chrome retains its existing tokens. */
.board:has(>.concept-board){padding:0;background:transparent}
.concept-board{container-type:inline-size;background:var(--c-paper);color:var(--c-ink);font-family:var(--c-body),sans-serif;text-align:left;overflow:hidden;isolation:isolate;max-width:100%;min-width:0;line-height:1.4}
.composition-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'hero hero' 'type palette' 'quote voice';gap:1px;background:color-mix(in srgb,var(--c-ink) 17%,var(--c-paper));padding:5cqi}
.composition-grid>div{min-width:0;padding:5cqi;background:var(--c-paper);overflow-wrap:anywhere}
.concept-board small{display:block;font:500 clamp(8px,1.45cqi,12px)/1.5 var(--c-body),sans-serif;letter-spacing:.1em}
.composition-hero{grid-area:hero;display:flex;flex-direction:column;justify-content:center;gap:3cqi}
.composition-name{font:400 clamp(20px,8cqi,76px)/1.03 var(--c-title),serif;letter-spacing:-.045em;overflow-wrap:anywhere}
.concept-board p{font:400 clamp(10px,2cqi,17px)/1.6 var(--c-body),sans-serif;margin:0}
.composition-hero p{max-width:38ch}
.composition-type{grid-area:type;display:flex;flex-direction:column;justify-content:center;gap:2cqi}
.composition-type strong{font:400 clamp(22px,8cqi,70px)/1 var(--c-title),serif}
.composition-type span,.composition-voice>span{font-size:clamp(9px,1.8cqi,14px)}
.composition-palette{grid-area:palette;display:flex!important;padding:0!important;min-height:20cqi}
.composition-palette>div{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:space-between;gap:4cqi;padding:2cqi 1.3cqi;font:clamp(8px,1.35cqi,11px) monospace}
.composition-palette small{font-size:clamp(7px,1.1cqi,10px);letter-spacing:.02em}
.composition-quote{grid-area:quote;display:flex;flex-direction:column;gap:3cqi;justify-content:space-between;background:var(--c-ink)!important;color:var(--c-paper)}
.composition-quote strong{font:400 clamp(18px,5cqi,46px)/1.14 var(--c-title),serif;overflow-wrap:anywhere}
.composition-voice{grid-area:voice;display:flex;flex-direction:column;justify-content:center;gap:2cqi}
.composition-mark{grid-area:mark;position:relative;min-height:28cqi;overflow:hidden;background:var(--c-accent)!important}
.composition-mark i{position:absolute;background:var(--c-ink);display:block}
.composition-footer{display:flex;justify-content:space-between;gap:12px;font-size:clamp(8px,1.4cqi,11px);padding:2cqi 5cqi 4cqi;overflow-wrap:anywhere}
.composition-logo{display:block;object-fit:contain;object-position:left center;width:clamp(60px,25cqi,220px);height:clamp(40px,12cqi,100px);max-width:100%;flex-shrink:0}
.composition-logo>svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}
.layout-editoriale .composition-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:'hero quote' 'type quote' 'palette palette' 'voice voice';gap:3cqi;background:var(--c-paper)}
.layout-editoriale .composition-hero{border-top:2px solid var(--c-ink);padding-left:0;padding-right:0;min-height:37cqi}
.layout-editoriale .composition-type{padding-left:0;border-top:1px solid var(--c-ink)}
.layout-editoriale .composition-name{font-size:clamp(22px,9cqi,82px)}
.layout-editoriale .composition-palette{min-height:14cqi}
.layout-editoriale .composition-voice{padding:2cqi 0}
.layout-organica .composition-grid{grid-template-areas:'hero hero' 'mark quote' 'palette palette' 'type voice';gap:3cqi;background:var(--c-paper)}
.layout-organica .composition-hero{align-items:center;text-align:center;padding:9cqi 5cqi}
.layout-organica .composition-logo{object-position:center}
.layout-organica .composition-mark{border-radius:50% 40% 45% 38%}
.layout-organica .composition-mark i:first-child{width:56%;height:76%;left:28%;top:12%;border-radius:50% 0 50% 50%;transform:rotate(-30deg)}
.layout-organica .composition-mark i:nth-child(2){width:2%;height:65%;left:52%;top:25%;background:var(--c-paper);transform:rotate(25deg)}
.layout-organica .composition-quote{border-radius:40% 40% 4cqi 4cqi;justify-content:center;text-align:center;padding:9cqi 5cqi}
.layout-organica .composition-palette{border-radius:8cqi;overflow:hidden;min-height:14cqi}
.layout-organica .composition-type{border-top:1px solid var(--c-ink)}
.layout-geometrica .composition-grid{grid-template-areas:'hero mark' 'palette palette' 'quote type' 'voice voice';padding:0;gap:2px;background:var(--c-ink)}
.layout-geometrica .composition-name{font-size:clamp(20px,7cqi,66px);font-weight:700;letter-spacing:-.055em}
.layout-geometrica .composition-hero{min-height:42cqi}
.layout-geometrica .composition-mark i{width:50%;height:50%}
.layout-geometrica .composition-mark i:nth-child(1){top:0;left:0;border-radius:0 100% 0 0}
.layout-geometrica .composition-mark i:nth-child(2){top:0;left:50%;border-radius:50%}
.layout-geometrica .composition-mark i:nth-child(3){top:50%;left:0;clip-path:polygon(0 0,100% 100%,0 100%)}
.layout-geometrica .composition-mark i:nth-child(4){top:50%;left:50%;border-radius:0 0 0 100%}
.layout-geometrica .composition-quote{min-height:34cqi}
.layout-geometrica .composition-voice{flex-direction:row;align-items:center;justify-content:space-between;border-bottom:2px solid var(--c-ink)}
.layout-essenziale .composition-grid{grid-template-areas:'hero hero' 'type voice' 'palette palette' 'quote quote';padding:8cqi;gap:4cqi;background:var(--c-paper)}
.layout-essenziale .composition-hero{text-align:center;align-items:center;min-height:44cqi;padding:10cqi 3cqi}
.layout-essenziale .composition-logo{object-position:center}
.layout-essenziale .composition-name{font-size:clamp(21px,6cqi,58px);letter-spacing:-.045em}
.layout-essenziale .composition-type,.layout-essenziale .composition-voice{border-top:1px solid var(--c-ink);padding:4cqi 0}
.layout-essenziale .composition-palette{min-height:9cqi}
.layout-essenziale .composition-palette small{display:none}
.layout-essenziale .composition-quote{background:var(--c-paper)!important;color:var(--c-ink);padding:4cqi 0;border-top:1px solid var(--c-ink)}
.layout-essenziale .composition-quote strong{font:400 clamp(14px,3cqi,28px)/1.5 var(--c-body),sans-serif}
.layout-elegante .composition-grid{grid-template-areas:'hero hero' 'quote quote' 'type palette' 'voice voice';margin:4cqi;padding:3cqi;border:1px solid var(--c-ink);outline:1px solid color-mix(in srgb,var(--c-ink) 30%,transparent);outline-offset:1cqi;background:var(--c-paper);gap:2cqi}
.layout-elegante .composition-hero{align-items:center;text-align:center;min-height:42cqi}
.layout-elegante .composition-logo{object-position:center;max-width:25cqi}
.layout-elegante .composition-kicker{letter-spacing:.25em}
.layout-elegante .composition-name{letter-spacing:.025em;font-size:clamp(23px,7cqi,66px)}
.layout-elegante .composition-quote{text-align:center;align-items:center;border-top:1px solid var(--c-ink);border-bottom:1px solid var(--c-ink);background:var(--c-paper)!important;color:var(--c-ink);padding:6cqi 4cqi}
.layout-elegante .composition-quote strong{font-style:italic}
.layout-elegante .composition-palette{flex-direction:column;min-height:24cqi}
.layout-elegante .composition-palette>div{flex-direction:row;align-items:center;padding:1cqi 2cqi}
.layout-elegante .composition-type{text-align:center}
.layout-elegante .composition-voice{text-align:center;align-items:center;font-style:italic;padding:3cqi}
.layout-vivace .composition-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:'hero mark' 'quote quote' 'palette type' 'voice voice';padding:0;gap:0;background:var(--c-paper)}
.layout-vivace .composition-hero{padding:8cqi 5cqi;min-height:39cqi}
.layout-vivace .composition-name{font-weight:800;letter-spacing:-.06em;font-size:clamp(23px,9cqi,84px)}
.layout-vivace .composition-mark{margin:5cqi 4cqi;transform:rotate(6deg);border-radius:50%;background:var(--c-ink)!important}
.layout-vivace .composition-mark i:first-child{inset:12%;background:var(--c-accent);clip-path:polygon(50% 0,62% 30%,87% 13%,70% 40%,100% 50%,70% 62%,87% 87%,60% 71%,50% 100%,38% 70%,13% 87%,30% 60%,0 50%,30% 38%,13% 13%,40% 30%)}
.layout-vivace .composition-quote{background:var(--c-accent)!important;color:var(--c-on-accent);padding:6cqi 5cqi}
.layout-vivace .composition-quote strong{font-weight:700;font-size:clamp(24px,7cqi,64px)}
.layout-vivace .composition-palette{min-height:26cqi}
.layout-vivace .composition-type{background:var(--c-ink);color:var(--c-paper)}
.layout-vivace .composition-voice{border-bottom:2px solid var(--c-ink);padding:4cqi 5cqi}
.direction-preview{display:block;pointer-events:none}
.composition-mini .composition-grid{min-height:235px}
.composition-mini small,.composition-mini .composition-type span,.composition-mini .composition-voice>span,.composition-mini .composition-footer{font-size:7px}
.composition-mini .composition-palette small,.composition-mini .composition-voice{display:none}
.composition-mini .composition-grid{grid-template-rows:auto}
.composition-mini .composition-name{font-size:clamp(18px,8cqi,32px)}
.composition-mini p{font-size:9px}
.composition-mini .composition-quote strong{font-size:clamp(14px,5cqi,23px)}
.concept-logo-picker label,.concept-settings>label{display:block;margin:16px 0 8px}
.concept-logo-picker select,.concept-settings>select{width:100%;min-width:0;text-overflow:ellipsis}
#conceptLogoPreview:not(:empty){padding:15px;margin-top:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
#conceptLogoPreview .composition-logo{width:100%;height:85px;object-fit:contain;object-position:center}
.concept-settings{padding:15px;margin:18px 0;border:1px solid var(--line);border-radius:10px;background:var(--bg);min-width:0}
.concept-settings h2{margin:0 0 12px}
.concept-status{display:inline-block;max-width:100%;border:1px solid var(--line);border-radius:5px;padding:4px 7px;font-size:10px;line-height:1.5;font-weight:500;color:var(--muted);background:var(--bg);overflow-wrap:anywhere}
.concept-status.status-current,.concept-status.status-adopted{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 9%,var(--panel))}
.concept-status.status-changed{border-style:dashed;color:var(--ink)}
.concept-status-line{flex-basis:100%}
.studio-redesign #adoptBoard:disabled{cursor:default}
.lab-item>div:first-child:has(.concept-status){margin-bottom:7px}
.concept-explore-link{margin:18px 0}
.concept-explore-link .help{margin:9px 0}
.compare-head h2{min-width:0;overflow-wrap:anywhere}
.concept-showcase{margin:0 30px 25px;min-width:0}
.concept-applications-heading{margin:28px 0 18px}
.concept-applications-heading h3,.concept-kit-application h3{margin:0 0 8px;font-size:17px}
.concept-applications-heading p{font-size:12px;color:var(--muted)}
.concept-applications{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.concept-applications>section{min-width:0}
.concept-applications>section>h3{font-weight:500;font-size:12px;margin:0 0 10px}
.application-nav{display:flex;gap:3cqi;align-items:center;padding:4cqi;border-bottom:1px solid var(--c-ink);font-size:clamp(8px,2.4cqi,13px);overflow-wrap:anywhere}
.application-nav strong{font:500 clamp(11px,3cqi,18px)/1.3 var(--c-title),serif;min-width:0}
.application-nav>span{margin-left:auto;max-width:40%}
.application-nav .composition-logo{width:14cqi;height:9cqi;object-position:center}
.application-hero{padding:10cqi 6cqi;display:flex;flex-direction:column;gap:5cqi;min-height:55cqi;overflow-wrap:anywhere}
.application-hero>strong{font:400 clamp(19px,7cqi,40px)/1.1 var(--c-title),serif}
.application-cta{align-self:flex-start;padding:3cqi 4cqi;background:var(--c-ink);color:var(--c-paper);font-size:clamp(9px,2.4cqi,14px)}
.application-bottom{padding:4cqi;font-size:clamp(9px,2.4cqi,14px);border-top:1px solid var(--c-ink);overflow-wrap:anywhere}
.application-poster{padding:8cqi 6cqi;min-height:70cqi;background:var(--c-ink);color:var(--c-paper);display:flex;flex-direction:column;justify-content:space-between;gap:6cqi;position:relative;overflow:hidden;overflow-wrap:anywhere}
.application-poster strong{font:400 clamp(23px,10cqi,55px)/1.1 var(--c-title),serif;z-index:1}
.application-poster span{font-size:clamp(10px,3cqi,17px);z-index:1}
.application-poster i{position:absolute;width:30cqi;height:30cqi;background:var(--c-accent);opacity:.2;right:-5cqi;bottom:-5cqi}
.layout-organica .application-poster i,.layout-organica .application-cta{border-radius:50%}
.layout-organica .application-hero,.layout-elegante .application-hero,.layout-essenziale .application-hero{text-align:center;align-items:center}
.layout-elegante .application-poster{margin:3cqi;border:1px solid var(--c-ink);background:var(--c-paper);color:var(--c-ink);text-align:center;font-style:italic}
.layout-vivace .application-poster,.layout-geometrica .application-hero{background:var(--c-accent);color:var(--c-on-accent)}
.layout-vivace .application-poster strong,.layout-geometrica .application-poster strong{font-weight:700}
.concept-kit-application{margin-top:25px;padding:20px 0;border-top:1px solid var(--line)}
.concept-kit-application select{display:block;width:100%;margin:8px 0 18px}
#conceptKitPreview .composition-logo{display:block;width:100%;height:340px;max-height:460px;object-fit:contain;background:var(--bg)}
#conceptKitPreview p{font-size:12px;overflow-wrap:anywhere}
@media(max-width:760px){.concept-showcase{margin:0 14px 20px}.concept-applications{grid-template-columns:minmax(0,1fr)}.studio-redesign .concept-presentation{padding:0}.concept-presentation>header{gap:12px}.concept-presentation>header>div{min-width:0}.concept-presentation>header h2{overflow-wrap:anywhere}}