/* Shared extraction of the existing branding picker. */
.br-showcase-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.br-picker-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.br-picker-title h3{font-size:21px;margin:0;letter-spacing:-.02em}
.br-colour-wheel{width:240px;height:240px;border-radius:50%;position:relative;background:conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);touch-action:none;cursor:crosshair;user-select:none}
.br-colour-wheel:before{content:'';position:absolute;inset:18px;background:var(--odx-surface);border-radius:50%;pointer-events:none}
.br-hue-marker{width:18px;height:18px;border:2px solid #fff;box-shadow:0 0 0 1.5px #151618;border-radius:50%;position:absolute;z-index:1;transform:translate(-50%,-50%);pointer-events:none}
.br-shade-square{width:144px;height:144px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--picker-hue) 100% 50%);cursor:crosshair;touch-action:none}
.br-shade-square>span{position:absolute;width:17px;height:17px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1.5px #151618;transform:translate(-50%,-50%);pointer-events:none}
.br-shade-options{display:flex;gap:6px;margin-top:18px}
.br-shade-options button{flex:1;min-width:0;height:30px;border:1px solid #0001;border-radius:6px;cursor:pointer}
.br-picker-actions{display:flex;justify-content:space-between;gap:18px;margin-top:20px}
.br-picker-actions button{min-height:36px;padding:8px 14px;font:600 12px var(--ff-body);border:1px solid var(--odx-border);border-radius:999px;background:var(--odx-bg);color:var(--odx-ink);cursor:pointer}
.br-colour-picker{width:min(500px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;margin:auto;overflow:auto;border:1px solid var(--odx-border);border-radius:16px;background:var(--odx-surface);color:var(--odx-ink);box-shadow:0 24px 80px #0004}
.br-colour-picker:not([open]){display:none}.br-colour-picker::backdrop{background:#0008}
.br-picker-title{min-height:70px;padding:20px 22px;margin:0;border-bottom:1px solid var(--odx-border)}
.br-picker-title h3{font-size:20px;font-weight:650;letter-spacing:-.025em;margin:0}
.br-picker-body{padding:40px 32px 48px}
.br-wheel-wrap{width:230px;height:230px;position:relative;margin:0 auto}
.br-colour-wheel{width:100%;height:100%;margin:0}
.br-colour-wheel:before{inset:16px}
.br-shade-square{width:140px;height:140px;z-index:2}
.br-hue-marker{width:24px;height:24px}
.br-shade-square>span{width:24px;height:24px}
.br-shade-options{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;max-width:394px;margin:8px auto 0}
.br-shade-options button{width:100%;height:auto;aspect-ratio:1;border:0;border-radius:10px;position:relative}
.br-shade-options button[aria-pressed=true]:after{content:'';position:absolute;width:12px;height:7px;border-left:2px solid #111;border-bottom:2px solid #111;transform:rotate(-45deg);left:calc(50% - 6px);top:calc(50% - 5px)}
.br-hex-pill{display:flex;align-items:center;width:148px;min-height:48px;border:1px solid #0001;border-radius:18px;margin:8px auto 0;padding:0 10px;color:var(--chosen-ink,#111)}
.br-hex-pill input{border:0;background:transparent;color:inherit;width:102px;min-width:0;padding:8px 4px;font:400 12px var(--ff-body);outline-offset:2px}
.br-hex-pill input[aria-invalid=true]{text-decoration:underline wavy #b00020;text-underline-offset:4px}
.br-hex-pill button{border:0;background:transparent;color:inherit;display:grid;place-items:center;width:26px;height:36px;padding:3px;cursor:pointer}
.br-hex-pill svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.25;opacity:.75}
.br-picker-actions{padding:23px;margin:0;border-top:1px solid var(--odx-border);justify-content:flex-end;align-items:center;gap:14px;min-height:87px}
.br-picker-actions button{font-size:13px;font-weight:650;border:0;background:transparent;color:var(--odx-accent);padding:10px 8px;min-height:40px;white-space:nowrap;border-radius:8px}
.br-picker-actions [data-picker-apply]{background:var(--chosen-colour,#20b633);color:var(--chosen-ink,#fff);min-width:107px;padding:10px 18px}
@media(max-width:480px){.br-colour-picker{padding:0;margin:auto;max-height:calc(100dvh - 24px);width:calc(100vw - 24px)}.br-picker-title{min-height:62px;padding:18px}.br-picker-title h3{font-size:18px}.br-picker-body{padding:28px 20px 32px}.br-wheel-wrap{width:220px;height:220px}.br-shade-square{width:134px;height:134px}.br-shade-options button{border-radius:8px}.br-picker-actions{padding:16px 12px;gap:6px;justify-content:space-between;min-height:74px}.br-picker-actions button{font-size:12px;padding:10px 6px}.br-picker-actions [data-picker-apply]{min-width:90px;padding:10px 12px}}
.demo-branding-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;min-height:36px;padding:7px 10px;border:1px solid var(--odx-control-border);border-radius:8px;background:transparent;color:var(--odx-ink);font:500 11px var(--ff-body);white-space:nowrap;cursor:pointer}.demo-branding-toggle[hidden]{display:none}.demo-branding-toggle:hover{background:var(--odx-soft)}.demo-branding-toggle>svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.demo-branding-toggle .demo-branding-swatch{fill:var(--demo-brand-swatch,#20B633);stroke:none}.demo-branding-label-compact{display:none}.demo-branding-toggle:focus-visible{outline:2px solid var(--odx-accent);outline-offset:3px}
@media(max-width:1350px){.demo-branding-label-full{display:none}.demo-branding-label-compact{display:inline}.demo-branding-toggle{padding:7px 8px;gap:5px}}@media(max-width:480px){.site-branded .site-header .nav-inner{gap:8px}.demo-branding-toggle{font-size:10px;padding:7px 6px}}@media(max-width:360px){.site-branded .site-header .nav-brand img{max-width:104px;height:auto}}