body{margin:0;padding:0;max-width:none}.page-headline,.page-subheadline,.section-headline,.section-subheadline,.box-headline,.box-subheadline,.brand-page p,.brand-page span{overflow-wrap:anywhere;word-break:normal}section{margin-top:clamp(54px,8vw,100px)}.colors-section,.core-elements{margin-top:clamp(28px,4vw,48px)}.section-label{grid-column:1/-1}.toolbar{display:flex;flex-wrap:wrap;gap:10px;padding:0;background:transparent}.toolbar input{flex:1;min-width:240px;padding:12px;border:1px solid #bbb;border-radius:8px}.toolbar button{cursor:pointer}.toolbar #reset{background:var(--button2-bg);color:var(--button2-color);border:var(--button2-border);box-shadow:var(--button2-shadow)}.toolbar #reset:hover{background:var(--button2-hover-bg);color:var(--button2-hover-color);border:var(--button2-hover-border);box-shadow:var(--button2-hover-shadow)}.toolbar #sync{background:var(--gradient-cta);box-shadow:var(--boxshadow-drop-sm)}.toolbar #sync:disabled{opacity:.65;cursor:progress}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.grid-five{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.grid-shadow{gap:30px}.demo-card{padding:var(--padding-md);border:var(--border-xs) solid #ddd;border-radius:var(--borderradius-md);background:var(--color-white);box-shadow:var(--boxshadow-diffuse-sm)}.demo-card.dark{background:var(--color-dark-surface)}.demo-card.padding-xs{padding:var(--padding-xs)}.demo-card.padding-sm{padding:var(--padding-sm)}.demo-card.padding-md{padding:var(--padding-md)}.demo-card.padding-lg{padding:var(--padding-lg)}.demo-card.padding-xl{padding:var(--padding-xl)}.demo-card.radius-xs{border-radius:var(--borderradius-xs)}.demo-card.radius-sm{border-radius:var(--borderradius-sm)}.demo-card.radius-md{border-radius:var(--borderradius-md)}.demo-card.radius-lg{border-radius:var(--borderradius-lg)}.demo-card.radius-xl{border-radius:var(--borderradius-xl)}.demo-card.border-xs{border-width:var(--border-xs)}.demo-card.border-sm{border-width:var(--border-sm)}.demo-card.border-md{border-width:var(--border-md)}.demo-card.border-lg{border-width:var(--border-lg)}.demo-card.border-xl{border-width:var(--border-xl)}.demo-card.shadow-diffuse-sm{box-shadow:var(--boxshadow-diffuse-sm)}.demo-card.shadow-diffuse-md{box-shadow:var(--boxshadow-diffuse-md)}.demo-card.shadow-diffuse-lg{box-shadow:var(--boxshadow-diffuse-lg)}.demo-card.shadow-drop-sm{box-shadow:var(--boxshadow-drop-sm)}.demo-card.shadow-drop-md{box-shadow:var(--boxshadow-drop-md)}.demo-card.shadow-drop-lg{box-shadow:var(--boxshadow-drop-lg)}.demo-card.glow-turkiz-sm{box-shadow:var(--glow-turkiz-sm)}.demo-card.glow-turkiz-md{box-shadow:var(--glow-turkiz-md)}.demo-card.glow-turkiz-lg{box-shadow:var(--glow-turkiz-lg)}.demo-card.glow-lila-sm{box-shadow:var(--glow-lila-sm)}.demo-card.glow-lila-md{box-shadow:var(--glow-lila-md)}.demo-card.glow-lila-lg{box-shadow:var(--glow-lila-lg)}.meta{margin:0 0 14px;font:700 12px/1.5 Montserrat,Arial,sans-serif;color:#625d6d}.dark .meta{color:#eee9f5}.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.swatch{min-height:110px;padding:var(--padding-sm);border:var(--border-none) solid transparent;border-radius:var(--borderradius-md);display:flex;align-items:end;font:700 13px Montserrat,Arial,sans-serif;box-shadow:var(--boxshadow-none)}.scale-box{border-style:solid;border-color:#892ae1;background:#fff}.textshadow-samples,.icon-samples{max-width:900px;margin-inline:auto}.textshadow-samples{display:grid;gap:10px;text-align:center}.icon-samples{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0;list-style:none}.icon-samples ul{margin:0;padding:0;list-style:none}.icon-samples li{display:flex;align-items:center;gap:10px;margin:10px 0}.typography-stack{text-align:center}.typography-prose{margin-top:34px}.button-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}.variant-full{grid-column:1/-1;padding:var(--padding-sm) var(--padding-none);border:var(--border-none) solid transparent;border-radius:var(--borderradius-none);box-shadow:var(--boxshadow-none);background:transparent}.settings-group{margin:22px 0 0;padding:var(--padding-sm);border:var(--border-xs) solid #ded9e6;border-radius:var(--borderradius-md);background:#fcfbff;box-shadow:var(--boxshadow-none)}.editor{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}.settings-group.token-five .editor{grid-template-columns:repeat(5,minmax(0,1fr))}.settings-group.token-three .editor{grid-template-columns:repeat(3,minmax(0,1fr))}.settings-group.token-five .token-row{grid-template-columns:1fr}.token-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,1fr);gap:8px;padding:var(--padding-xs);border:var(--border-xs) solid #ded9e6;border-radius:var(--borderradius-sm);background:var(--color-white);box-shadow:var(--boxshadow-none)}.token-row label{font:700 12px/1.35 ui-monospace,Consolas,monospace;overflow-wrap:anywhere}.token-row input{width:100%;min-width:0;padding:7px;border:1px solid #bbb;border-radius:5px}.sample-video{position:relative;display:grid;aspect-ratio:16/9;place-items:center;background:var(--gradient-turkiz-lila);color:var(--color-white);border-radius:var(--borderradius-md);font:800 22px Montserrat,Arial,sans-serif}.sample-video .play{position:absolute;inset:0;display:grid;place-items:center}.sample-video .play span{display:grid;place-items:center;width:56px;height:42px;background:var(--color-accent-pink);border-radius:var(--borderradius-sm)}.status{min-height:1.4em;color:#067296;font-weight:700}.hidden{display:none}@media(max-width:1024px){.grid-five{grid-template-columns:repeat(3,minmax(0,1fr))}.settings-group.token-five .editor{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:580px){.demo-card{padding:var(--padding-sm)}.demo-card.padding-xs{padding:var(--padding-xs)}.demo-card.padding-sm{padding:var(--padding-sm)}.demo-card.padding-md{padding:var(--padding-md)}.demo-card.padding-lg{padding:var(--padding-lg)}.demo-card.padding-xl{padding:var(--padding-xl)}.grid-five,.settings-group.token-five .editor,.settings-group.token-three .editor,.icon-samples{grid-template-columns:1fr}}
    /* Finomhangolt minták és tokenmezők */
    body.brand-page .colors-section,body.brand-page .core-elements,body.brand-page .variants-section{margin-top:0}
    body.ai-page.brand-page h2.section-headline:is(#colors,#system,#tipografia,#variants){margin-top:clamp(28px,4vw,48px)!important}
    body.brand-page .demo-card.radius-xs{border-radius:var(--borderradius-xs)!important}
    body.brand-page .demo-card.radius-sm{border-radius:var(--borderradius-sm)!important}
    body.brand-page .demo-card.radius-md{border-radius:var(--borderradius-md)!important}
    body.brand-page .demo-card.radius-lg{border-radius:var(--borderradius-lg)!important}
    body.brand-page .demo-card.radius-xl{border-radius:var(--borderradius-xl)!important}
    body.brand-page .demo-card.radius-pill{border-radius:var(--borderradius-pill)!important}
    body.brand-page .demo-card.border-xs{border-width:var(--border-xs)!important}
    body.brand-page .demo-card.border-sm{border-width:var(--border-sm)!important}
    body.brand-page .demo-card.border-md{border-width:var(--border-md)!important}
    body.brand-page .demo-card.border-lg{border-width:var(--border-lg)!important}
    body.brand-page .demo-card.border-xl{border-width:var(--border-xl)!important}
    body.brand-page .radius-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
    body.brand-page .radius-grid>.demo-card{box-sizing:border-box;flex:0 0 calc((100% - 64px)/5);min-width:0}
    @media(max-width:1024px){body.brand-page .radius-grid>.demo-card{flex-basis:calc((100% - 32px)/3)}}
    @media(max-width:580px){body.brand-page .radius-grid>.demo-card{flex-basis:100%}}
    .toolbar #copy{background:var(--color-accent-pink);color:var(--color-white);border-color:var(--color-accent-pink)!important;box-shadow:var(--boxshadow-drop-sm)}
    .toolbar #copy:hover{background:var(--color-accent-pink-dark);border-color:var(--color-accent-pink)!important;box-shadow:var(--boxshadow-drop-md)}
    /* A sötét felületre engedélyezett variánsokat a valódi célfelületükön mutatjuk. */
    .scale-value{display:block;margin-top:4px;font-size:.78em;font-weight:700;color:var(--grey)}
    .dark .scale-value{color:var(--color-white)}
    .responsive-padding-rows{display:grid;gap:10px;margin-top:10px}
    .responsive-padding-note{display:flex;align-items:flex-start;gap:7px;margin:0;font-size:.82rem;color:var(--grey)}
    .responsive-padding-row{display:grid;grid-template-columns:80px repeat(5,minmax(0,1fr));gap:8px;align-items:stretch}
    .responsive-padding-row strong,.responsive-padding-field{padding:var(--padding-xs);border:var(--border-xs) solid #ded9e6;border-radius:var(--borderradius-sm);background:#fff;font:700 12px/1.35 Montserrat,Arial,sans-serif}
    .responsive-padding-field{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:6px;align-items:center;color:#45007a}
    .responsive-padding-field code{font:700 11px/1.35 ui-monospace,Consolas,monospace}
    .responsive-padding-field input,.responsive-token-row input{width:100%;min-width:0;padding:7px;border:1px solid #bbb;border-radius:5px;background:#fff;color:#16131d;font:600 12px/1.35 ui-monospace,Consolas,monospace}
    .responsive-padding-field input{width:58px}
    .responsive-settings{margin:18px 0 0;padding:var(--padding-sm);border:var(--border-xs) solid #ded9e6;border-radius:var(--borderradius-md);background:#fcfbff}
    
    .responsive-token-block+.responsive-token-block{margin-top:18px;padding-top:18px;border-top:1px solid #ded9e6}
    
    .responsive-token-grid{display:grid;gap:8px}
    .responsive-token-row{display:grid;grid-template-columns:80px minmax(190px,1fr) minmax(0,1fr);gap:8px;align-items:center;padding:var(--padding-xs);border:var(--border-xs) solid #ded9e6;border-radius:var(--borderradius-sm);background:#fff}
    .responsive-token-row strong{font:800 12px/1.35 Montserrat,Arial,sans-serif}
    .responsive-token-row code{font:700 12px/1.35 ui-monospace,Consolas,monospace;color:#45007a;overflow-wrap:anywhere}
    .mobile-token-icon{display:inline-grid;flex:0 0 18px;place-items:center;width:18px;height:18px;color:var(--color-secondary-lila)}
    .mobile-token-icon svg{display:block;width:100%;height:100%;fill:currentColor}
    .section-responsive-margin-row{display:grid;grid-template-columns:24px minmax(176px,1.2fr) repeat(4,minmax(0,1fr));gap:8px;align-items:center;margin-top:10px;padding:var(--padding-xs);border:var(--border-xs) solid #ded9e6;border-radius:var(--borderradius-sm);background:#fff}
    .section-responsive-margin-row>code{font:700 11px/1.35 ui-monospace,Consolas,monospace;color:#45007a;overflow-wrap:anywhere}
    .section-responsive-margin-field{display:grid;grid-template-columns:58px minmax(0,1fr);gap:6px;align-items:center}
    .section-responsive-margin-field strong{font:800 12px/1.35 Montserrat,Arial,sans-serif;white-space:nowrap}
    .section-responsive-margin-field input{width:100%;min-width:0;padding:7px;border:1px solid #bbb;border-radius:5px;background:#fff;color:#16131d;font:600 12px/1.35 ui-monospace,Consolas,monospace}
    @media(max-width:1024px){.responsive-padding-row{grid-template-columns:repeat(3,minmax(0,1fr))}.responsive-padding-row strong{grid-column:1/-1}}
    @media(max-width:680px){.section-responsive-margin-row{grid-template-columns:1fr}.section-responsive-margin-field{grid-template-columns:70px minmax(0,1fr)}}
    @media(max-width:580px){.responsive-padding-row{grid-template-columns:1fr}.responsive-token-row{grid-template-columns:1fr;gap:6px}}
    .brand-rules{margin:16px 0;padding:var(--padding-sm);border:var(--border-xs) solid #ded9e6;border-radius:var(--borderradius-md);background:#fcfbff}.brand-rules summary{cursor:pointer;font-weight:800;color:#45007a}.brand-rules textarea{box-sizing:border-box;width:100%;min-height:220px;margin-top:12px;padding:10px;border:1px solid #bbb;border-radius:6px;font:13px/1.45 ui-monospace,Consolas,monospace}
    .foundation-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
    .foundation-settings .settings-group{height:calc(100% - 22px)}
    .foundation-settings .token-row{grid-template-columns:1fr}
    .color-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}.color-toolbar button{cursor:pointer}
    .swatch{position:relative;align-items:flex-start;justify-content:flex-start;flex-direction:column;cursor:grab}.swatch.is-dragging{opacity:.45}.swatch.is-dragover{outline:3px solid var(--color-focus);outline-offset:2px}
    .swatch[data-color-width="wide"]{grid-column:span 2}
    .swatch-name,.swatch-token{display:block;max-width:100%;cursor:text;border-radius:4px;color:inherit}.swatch-name{padding:0;font-weight:800;line-height:1.3em}.swatch-name:hover,.swatch-token:hover,.swatch-name:focus-visible,.swatch-token:focus-visible{outline:2px solid currentColor;outline-offset:2px}
    .swatch-token{margin-top:8px;font:700 11px/1.35 ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
    .swatch-edit{box-sizing:border-box;width:100%;min-width:0;padding:6px;border:1px solid rgba(22,19,29,.35);border-radius:5px;background:rgba(255,255,255,.96);color:#16131d;font:600 12px/1.35 ui-monospace,Consolas,monospace}
    .swatch-actions{position:absolute;z-index:2;top:8px;right:8px;display:flex;gap:5px;opacity:0;pointer-events:none;transition:opacity .16s ease}.swatch:hover .swatch-actions,.swatch:focus-within .swatch-actions{opacity:1;pointer-events:auto}.swatch-actions button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid rgba(22,19,29,.25);border-radius:6px;background:rgba(255,255,255,.94);color:#16131d;box-shadow:0 2px 8px rgba(22,19,29,.18);cursor:pointer}.swatch-actions button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.swatch-actions .swatch-delete{color:#b42318}.swatch-actions button:hover,.swatch-actions button:focus-visible{background:#fff;outline:2px solid currentColor;outline-offset:1px}@media(hover:none){.swatch-actions{opacity:1;pointer-events:auto}}
    .color-row-break{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:34px;color:var(--grey);cursor:grab}.color-row-break::before{content:"";height:1px;flex:1;background:currentColor}.color-row-break button{padding:4px 8px;border:1px solid currentColor;border-radius:5px;background:#fff;color:inherit;cursor:pointer}
    .swatch-input{width:100%;margin-top:8px;padding:8px;border:1px solid rgba(22,19,29,.24);border-radius:6px;background:rgba(255,255,255,.94);color:#16131d;font:600 12px/1.35 ui-monospace,Consolas,monospace}
    .swatches{grid-template-columns:repeat(8,minmax(0,1fr))}
    .grid-shadow{gap:42px}
    .grid-glow{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:42px;row-gap:34px}
    .demo-card .scale-value{display:none}
    .inline-token-control{display:grid;gap:7px;margin-top:14px}
    .inline-token-control code{font:700 11px/1.35 ui-monospace,Consolas,monospace;color:#45007a;overflow-wrap:anywhere}
    .inline-token-control input{width:100%;min-width:0;padding:8px;border:1px solid #bbb;border-radius:6px;background:#fff;color:#16131d;font:600 12px/1.35 ui-monospace,Consolas,monospace}
    .textshadow-samples{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:left}
    
    .textshadow-token-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:7px;max-width:900px;margin:14px auto 0}
    .textshadow-token-controls code{font:700 11px/1.35 ui-monospace,Consolas,monospace;color:#45007a;overflow-wrap:anywhere}
    .textshadow-token-controls input{width:100%;min-width:0;padding:8px;border:1px solid #bbb;border-radius:6px;background:#fff;color:#16131d;font:600 12px/1.35 ui-monospace,Consolas,monospace}
    .icon-samples ul{display:flex;flex-direction:column}
    .icon-samples .inline-token-control{grid-template-columns:minmax(0,1fr) minmax(88px,1fr);align-items:center;margin-top:auto}
    @media(max-width:1100px){.swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}
    @media(max-width:680px){.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.swatch[data-color-width="wide"]{grid-column:span 2}.grid-glow,.textshadow-samples,.textshadow-token-controls{grid-template-columns:1fr}}
    #variants{margin-bottom:32px}
    .variant-full.surface-dark{padding:var(--padding-md);border-radius:var(--borderradius-md)}
    body.brand-page .variants-section .surface-dark{background:var(--color-dark-surface,var(--color-text,#333333));color:var(--color-white,#ffffff)}
    body.brand-page .variants-section .surface-dark .meta{color:var(--color-white,#ffffff)}
    .textshadow-samples p{margin:0}
    .settings-diffuse .token-row,.settings-drop .token-row,.settings-glow .token-row,.settings-textshadow .token-row{grid-template-columns:1fr}
    .settings-glow .editor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;gap:10px}
    .settings-group.typography-token .editor{display:flex;flex-wrap:wrap;gap:10px}
    .settings-group.typography-token .token-row{flex:1 1 110px;min-width:0}
    .settings-group.typography-token .token-row:nth-child(1),.settings-group.typography-token .token-row:nth-child(2){flex:2 1 220px}
    .settings-group.typography-token .token-row{grid-template-columns:1fr}
    .settings-group.settings-box-typography .typography-subgroup .token-row{flex:1 1 0}
    .settings-glow .token-row{min-width:0}
    
    .typography-subgroup+.typography-subgroup{margin-top:24px;padding-top:20px;border-top:1px solid #ded9e6}
    .role-class-label{margin-left:.45em;color:#716b79;font-size:.62em;font-weight:400;line-height:inherit;letter-spacing:0;vertical-align:baseline}
    .settings-text-typography,.settings-buttons{max-width:none;margin-inline:0}
    .typography-prose>[data-settings="buttons"]{width:min(1376px,calc(100vw - 64px));margin-left:50%;transform:translateX(-50%)}
    .settings-text-typography .token-row:nth-child(1){flex:2 1 180px}
    .settings-text-typography .token-row:nth-child(n+2){flex:1 1 105px}
    .settings-text-typography .typography-subgroup:nth-child(2) .token-row:nth-child(1){flex:1.7 1 170px}
    .settings-text-typography .typography-subgroup:nth-child(2) .token-row:nth-child(2){flex:.8 1 90px}
    .settings-text-typography .typography-subgroup:nth-child(2) .token-row:nth-child(6){flex:2.1 1 200px}
    .settings-group.settings-text-typography .typography-subgroup:nth-child(n) .token-row:nth-child(n){flex:1 1 0}
    /* A kiemelt szövegdoboz tíz tokenje asztali nézetben 5+5 rácsban jelenik meg. */
    .settings-group.settings-text-typography .typography-subgroup:nth-child(3)>.editor{display:grid;grid-template-columns:minmax(0,1.65fr) repeat(4,minmax(0,1fr));gap:10px}
    .settings-group.settings-text-typography .typography-subgroup:nth-child(3)>.editor>.token-row{min-width:0}
    @media(max-width:900px){.settings-group.settings-text-typography .typography-subgroup:nth-child(3)>.editor{grid-template-columns:repeat(2,minmax(0,1fr))}}
    .settings-group.settings-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
    .settings-group.settings-buttons>.typography-subgroup{grid-column:1/-1}
    body.brand-page .before-button-text,body.brand-page .after-button-text{box-sizing:border-box;width:100%;max-width:none;text-align:center}
    .text-scale-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--padding-sm);margin:var(--padding-md) 0 var(--padding-xl)}
    /* A szerkesztő címkéje nem folyószöveg; a globális span-szabály nem írhatja felül. */
    body.brand-page .swatch-name{padding:0!important;line-height:1.3em!important}
    body.brand-page .icon-samples,body.brand-page .text-scale-grid,body.brand-page [data-settings="section-typography"],body.brand-page [data-settings="box-typography"],body.brand-page [data-settings="text-typography"]{margin-bottom:clamp(60px,6vw,96px)}
    .text-scale-grid .demo-card{display:flex;min-width:0;flex-direction:column;justify-content:center}
    .text-scale-grid code{display:block;margin-bottom:var(--padding-xs);color:var(--grey);font:700 12px/1.35 ui-monospace,Consolas,monospace}
    .settings-group.settings-buttons .button-token-editor{display:grid;gap:10px}
    .settings-group.settings-buttons .button-token-line{display:grid;gap:10px;min-width:0}
    .settings-group.settings-buttons .button-token-editor-primary .button-token-line:nth-child(1){grid-template-columns:minmax(190px,1.55fr) minmax(140px,1fr) minmax(150px,1.05fr) minmax(180px,1.25fr) minmax(140px,1fr)}
    .settings-group.settings-buttons .button-token-editor-primary .button-token-line:nth-child(2){grid-template-columns:minmax(210px,1.65fr) repeat(6,minmax(120px,1fr))}
    .settings-group.settings-buttons .button-token-editor-primary .button-token-line:nth-child(3),.settings-group.settings-buttons .button-token-editor-secondary .button-token-line{grid-template-columns:repeat(4,minmax(0,1fr))}
    .settings-group.settings-buttons .button-token-editor-microtext .button-token-line{grid-template-columns:repeat(7,minmax(0,1fr))}
    .page-title-demo{margin-top:0}
    .brand-page .box-headline.showcase-subheading{grid-column:1/-1;margin:var(--padding-lg) 0 var(--padding-xs)}
    #summary{margin:var(--padding-xl) 0 var(--padding-sm)}
    
    
    .toolbar #sync{background:var(--button-bg);color:var(--button-color);border:var(--button-border);box-shadow:var(--button-shadow)}
    .toolbar #sync:hover:not(:disabled),.toolbar #sync:focus-visible:not(:disabled){background:var(--button-hover-bg);color:var(--button-hover-color);border:var(--button-hover-border);box-shadow:var(--button-hover-shadow)}
    .settings-group{margin:30px 0}
    .foundation-settings .settings-group{height:calc(100% - 60px)}
    html{scroll-behavior:smooth}
    .brand-page{box-sizing:border-box;width:100%;margin:0;padding:32px 0 64px}
    .page-headline.brand-page-headline{font-size:clamp(1.75rem,3vw,3rem)}
    .intro-copy{width:100%;margin:1rem 0 0;text-align:left}
    .brand-settings{margin-top:0}
    .sticky-panel{position:sticky;top:0;z-index:100;box-sizing:border-box;width:min(calc(100% - 40px),var(--wide-content-max-width));margin:28px auto 12px;padding:var(--padding-sm);background:rgba(255,255,255,.96);border:var(--border-xs) solid rgba(69,0,122,.16);border-radius:var(--borderradius-lg);box-shadow:var(--boxshadow-diffuse-sm);backdrop-filter:blur(10px);transition:padding .18s ease}
    .sticky-panel.is-stuck{padding:var(--padding-xs)}
    .sticky-panel.is-stuck .toolbar{gap:6px}
    .sticky-panel.is-stuck .toolbar input{min-height:36px;padding:7px 10px;font-size:.82rem;line-height:1.15}
    .sticky-panel.is-stuck .toolbar button{min-width:0;min-height:36px;padding:7px 11px;font-size:.72rem;line-height:1.15}
    .section-nav{display:flex;gap:8px;overflow-x:auto;padding:4px 4px 10px;scroll-padding-inline:4px;scrollbar-width:thin}
    .section-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border:1px solid rgba(69,0,122,.18);border-radius:999px;background:#fff;color:#45007a;font:800 12px/1 Montserrat,Arial,sans-serif;text-decoration:none;white-space:nowrap}
    /* Hover is a filled state, not a double outline. Keyboard focus stays visible. */
    body.brand-page .section-nav a:is(:hover,:focus-visible){background:var(--brand-nav-hover-bg,var(--color-text,#333333))!important;color:var(--brand-nav-hover-color,#ffffff)!important;border-color:transparent!important;box-shadow:none!important;transform:none!important}
    body.brand-page .section-nav a:hover:not(:focus-visible){outline:none!important}
    body.brand-page .section-nav a:focus-visible{outline:2px solid var(--color-text,#333333)!important;outline-offset:2px}
    h2[id],h3[id],h4[id],[data-settings][id]{scroll-margin-top:190px}
    @media(max-width:580px){.brand-page{width:100%;padding-top:16px}.sticky-panel{top:0;width:calc(100% - 40px);margin-top:18px;border-radius:12px}.toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.toolbar input{grid-column:1/-1;width:100%;min-width:0}.toolbar #sync{grid-column:1/-1}.toolbar button{min-width:0;min-height:44px;padding:8px 10px;font-size:.78rem;line-height:1.2;text-align:center}.section-nav{margin-inline:0}h2[id],h3[id],h4[id],[data-settings][id]{scroll-margin-top:300px}}
    @media(max-width:1024px){.settings-glow .editor{grid-template-columns:repeat(3,minmax(0,1fr))}}
    @media(max-width:900px){.settings-group.settings-buttons,.text-scale-grid{grid-template-columns:1fr}.settings-group.settings-buttons>.typography-subgroup{grid-column:1/-1}.settings-group.settings-buttons .button-token-editor-primary .button-token-line:nth-child(n),.settings-group.settings-buttons .button-token-editor-secondary .button-token-line,.settings-group.settings-buttons .button-token-editor-microtext .button-token-line{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:760px){.foundation-settings{grid-template-columns:1fr}}
    @media(max-width:580px){.typography-prose>[data-settings="buttons"]{width:calc(100vw - 32px)}.settings-glow .editor,.settings-group.settings-buttons .button-token-line,.settings-group.settings-buttons .button-token-editor-primary .button-token-line:nth-child(n){grid-template-columns:1fr}.settings-group.typography-token .token-row,.settings-group.typography-token .token-row:nth-child(1),.settings-group.typography-token .token-row:nth-child(2),.settings-box-typography .typography-subgroup:nth-child(2) .token-row:nth-child(1),.settings-box-typography .typography-subgroup:nth-child(2) .token-row:nth-child(n+2),.settings-text-typography .token-row:nth-child(1),.settings-text-typography .token-row:nth-child(n+2){flex:1 1 100%}}
    /* Editor actions are controls, not project CTA samples. Hard limits apply
       in every project even when its button tokens are oversized/uppercase. */
    body.brand-page :is(.toolbar,.color-toolbar) > button {
      box-sizing:border-box;min-width:0!important;min-height:40px!important;
      max-width:100%;height:auto!important;margin:0!important;
      font-family:var(--text-fontfamily,Arial,sans-serif)!important;
      font-size:18px!important;line-height:1.25!important;font-weight:700!important;
      letter-spacing:normal!important;text-transform:none!important;
      padding:10px 25px!important;white-space:normal;transform:none!important;
    }
    body.brand-page .sticky-panel.is-stuck .toolbar > button {
      font-size:14px!important;padding:7px 14px!important;min-height:36px!important;
    }
    body.brand-page .sticky-panel {width:min(calc(100% - 32px),var(--wide-content-max-width,1600px));max-width:none;margin-inline:auto}
    body.brand-page .toolbar input {box-sizing:border-box;min-width:min(240px,100%);max-width:100%}
    body.brand-page .token-row input {box-sizing:border-box}
    @media(max-width:1100px){.settings-group.settings-buttons .button-token-line{display:flex;flex-wrap:wrap}.settings-group.settings-buttons .button-token-line>.token-row{flex:1 1 140px;min-width:0;max-width:100%}}
    @media(max-width:580px){body.brand-page :is(.toolbar,.color-toolbar)>button{font-size:16px!important;padding:8px 12px!important}.settings-group.settings-buttons .button-token-line>.token-row{flex-basis:100%}}
    .token-row--color input{cursor:pointer}
    .token-color-picker{position:fixed;z-index:1000;width:min(340px,calc(100vw - 24px));padding:12px;border:1px solid rgba(69,0,122,.22);border-radius:12px;background:#fff;color:#16131d;box-shadow:0 14px 38px rgba(39,15,59,.24)}
    .token-color-picker[hidden]{display:none}
    .token-color-picker__header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font:800 12px/1.3 Montserrat,Arial,sans-serif}
    .token-color-picker__close{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid #d8d0df;border-radius:7px;background:#fff;color:#45007a;cursor:pointer;font:800 18px/1 Arial,sans-serif}
    .token-color-picker__palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:7px}
    .token-color-picker__choice{position:relative;display:block;aspect-ratio:1;padding:0;border:2px solid #fff;border-radius:9px;box-shadow:0 0 0 1px #cfc5d7;cursor:pointer;overflow:hidden}
    .token-color-picker__choice:hover,.token-color-picker__choice:focus-visible{outline:2px solid #45007a;outline-offset:2px}
    .token-color-picker__choice span{position:absolute;inset:auto 3px 3px;overflow:hidden;padding:2px 3px;border-radius:4px;background:rgba(255,255,255,.88);color:#16131d;font:700 8px/1.15 Montserrat,Arial,sans-serif;text-overflow:ellipsis;white-space:nowrap}
    .token-color-picker__custom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;padding-top:10px;border-top:1px solid #e3dce9;font:700 12px/1.35 Montserrat,Arial,sans-serif}
    .token-color-picker__custom input[type="color"]{width:54px;height:34px;padding:2px;border:1px solid #bdb2c6;border-radius:7px;background:#fff;cursor:pointer}