:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#1f2328;--muted:#68707d;--line:#d9e0ea;--panel:#ffffffe0;--page:#f6f8fb;--accent:#2167d5;--accent-warm:#f25f5c;--accent-gold:#f6c453;--accent-green:#3bb987;--surface-glow:#ffffffb8;--shadow:0 24px 70px #212f4926}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 12% 8%, #f25f5c38, transparent 30%), radial-gradient(circle at 84% 4%, #2167d533, transparent 34%), radial-gradient(circle at 78% 92%, #3bb9872e, transparent 34%), linear-gradient(120deg, #f6c4531f, transparent 42%), repeating-linear-gradient(90deg, #1f232809 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, #1f232808 0 1px, transparent 1px 72px), linear-gradient(180deg, #ffffffeb, #f6f8fbfa), var(--page);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow-x:hidden}button,input{font:inherit}.app{grid-template-rows:auto 1fr;gap:22px;width:min(1180px,100% - 32px);min-height:100vh;margin:0 auto;padding:28px 0;display:grid}header{background:linear-gradient(100deg,#fffffff0,#ffffffb8),linear-gradient(135deg,#f6c4533d,#2167d524 48%,#3bb98721);border:1px solid #d9e0eac7;border-radius:8px;padding:26px 28px;position:relative;overflow:hidden;box-shadow:0 22px 58px #212f4921}header:before{content:"";background:linear-gradient(90deg,#f94144,#f9c74f,#43aa8b,#277da1,#8f3ffc);height:5px;position:absolute;inset:0}header:after{content:"";border:28px solid #2167d514;border-radius:50%;width:220px;height:220px;position:absolute;top:-96px;right:-90px}.brand{z-index:1;grid-template-columns:auto 1fr;align-items:center;gap:18px;display:grid;position:relative}.logo-mark{aspect-ratio:1;background:linear-gradient(#fffffff5,#f8fbffe0);border:1px solid #d9e0eaeb;border-radius:8px;place-items:center;width:clamp(72px,10vw,104px);display:grid;box-shadow:inset 0 1px #ffffffe6,0 18px 36px #212f4924}.logo-mark svg{width:82%;height:82%}.logo-arc,.logo-base{fill:none;stroke-linecap:round}.logo-arc{stroke-width:10px}.logo-arc-red{stroke:#f25f5c}.logo-arc-gold{stroke:#f6c453}.logo-arc-blue{stroke:#2167d5}.logo-base{stroke:#212f4938;stroke-width:4px}.eyebrow{color:#45628f;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;font-size:.78rem;font-weight:800}h1{letter-spacing:0;background:linear-gradient(90deg,#f94144,#f3722c,#43aa8b,#277da1,#8f3ffc);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(2rem,4vw,4rem);line-height:.94}.subtitle{max-width:42rem;color:var(--muted);margin:10px 0 0;font-size:1rem;line-height:1.5}.button{color:#17376c;cursor:pointer;background:linear-gradient(#fffffffa,#f1f6fff5);border:1px solid #2167d53d;border-radius:8px;min-height:42px;padding:0 14px;transition:border-color .16s,transform .16s,background .16s,box-shadow .16s;box-shadow:0 8px 18px #2167d514}.button:hover{background:#fff;border-color:#2167d585;box-shadow:0 12px 24px #2167d524}.button:disabled,.button:disabled:hover{color:#9aa5b1;box-shadow:none;cursor:not-allowed;background:#f6f8fbc7;border-color:#6070852e}.button:active{transform:translateY(1px)}.button:disabled:active{transform:none}.action-grid{grid-template-columns:1fr;gap:10px;display:grid}.generate-tools,.tool-group{gap:12px;display:grid}.tool-group{border-bottom:1px solid #d9e0eab8;padding-bottom:12px}.tool-group:last-child{border-bottom:0;padding-bottom:0}.tool-note{color:var(--muted);margin:0;font-size:.82rem;line-height:1.35}.warning-message{color:#991b1b;background:#fef2f2eb;border:1px solid #dc262638;border-radius:8px;margin:0;padding:9px 10px;font-size:.88rem;line-height:1.4}.segmented-control{border:1px solid var(--line);background:#f8fafc;border-radius:8px;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;display:grid}.segmented-control button{min-width:0;min-height:36px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px}.segmented-control button:hover,.segmented-control button:focus{color:var(--ink);outline:none}.segmented-control button.is-active{color:var(--ink);background:#fff;box-shadow:0 6px 16px #212f4924}.export-background-control,.export-size-control{grid-template-columns:repeat(2,minmax(0,1fr))}.download-options{gap:12px;display:grid}.option-label,.download-size-note{color:var(--muted);margin:0 0 6px;font-size:.84rem;font-weight:800}.download-size-note{margin:6px 0 0;font-weight:700}main{grid-template-columns:minmax(0,1fr) minmax(260px,340px);align-items:start;gap:22px;display:grid}.seo-content{display:grid}.seo-card{background:linear-gradient(#ffffffeb,#f8fbffdb),linear-gradient(135deg,#f6c45329,#2167d514);border:1px solid #d9e0eac7;border-radius:8px;padding:22px;box-shadow:0 18px 46px #212f491a}.seo-card h2{margin:4px 0 16px;font-size:clamp(1.5rem,3vw,2rem);line-height:1.1}.faq-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.faq-grid article{background:#ffffffa8;border:1px solid #d9e0eac7;border-radius:8px;padding:14px}.faq-grid h3{margin:0 0 7px;font-size:1rem;line-height:1.25}.faq-grid p{color:var(--muted);margin:0;font-size:.92rem;line-height:1.5}.seo-links{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.seo-links a{color:#17376c;background:#ffffffc7;border:1px solid #2167d52e;border-radius:8px;padding:9px 12px;font-weight:800;text-decoration:none}.seo-links a:hover,.seo-links a:focus{border-color:#2167d57a;outline:none}.workspace,.about-panel{gap:16px;display:grid}.about-panel p{color:var(--muted);margin:0;line-height:1.55}.about-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.about-grid div{background:#ffffffa3;border:1px solid #d9e0eac2;border-radius:8px;padding:12px}.about-grid h2{margin:0 0 6px;font-size:.98rem;line-height:1.2}.canvas-area{width:100%;height:clamp(360px,100vh - 180px,620px);min-height:0;box-shadow:inset 0 1px 0 #ffffffe6, var(--shadow);background:linear-gradient(#ffffffe6,#f7fafed6),radial-gradient(circle at 50% 36%,#ffffffe6,#0000 42%),linear-gradient(90deg,#f25f5c0f,#0000 28%,#2167d50f 72%,#0000),repeating-linear-gradient(90deg,#212f4909 0 1px,#0000 1px 56px),repeating-linear-gradient(0deg,#212f4908 0 1px,#0000 1px 56px);border:1px solid #d9e0ead1;border-radius:8px;place-items:center;display:grid;position:relative;overflow:hidden}.rainbow-wrap{aspect-ratio:1.72;filter:drop-shadow(0 26px 32px #212f491f);place-items:end center;width:auto;max-width:86%;height:min(100% - 80px,360px);padding:20px 0 0;display:grid;position:relative}.band-hover-label{z-index:2;color:var(--ink);white-space:nowrap;pointer-events:none;background:#ffffffeb;border:1px solid #212f492e;border-radius:999px;padding:6px 10px;font-size:.84rem;font-weight:700;position:absolute;top:4px;left:50%;transform:translate(-50%);box-shadow:0 12px 26px #212f4924}.mobile-colour-popover{z-index:4;opacity:0;pointer-events:none;background:#fffffff0;border:1px solid #2167d533;border-radius:8px;grid-template-columns:1fr 84px auto;align-items:center;gap:10px;width:min(92%,360px);padding:10px;transition:opacity .16s,transform .16s;display:grid;position:absolute;bottom:18px;left:50%;transform:translate(-50%,12px);box-shadow:0 18px 42px #212f492e}.mobile-colour-popover.is-open{opacity:1;pointer-events:auto;transform:translate(-50%)}.mobile-colour-copy{gap:2px;min-width:0;display:grid}.mobile-colour-copy span{color:var(--muted);font-size:.78rem;font-weight:700}.mobile-colour-copy strong{color:var(--ink);letter-spacing:0;font-size:.94rem}.mobile-colour-input{height:48px}.mobile-colour-close{color:#17376c;cursor:pointer;background:#fff;border:1px solid #2167d53d;border-radius:8px;min-height:44px;padding:0 12px;font-weight:800}.rainbow-wrap-quarter,.rainbow-wrap-circle{aspect-ratio:1;place-items:center;width:auto;max-width:78%;height:min(78%,460px);padding:0}svg{width:100%;height:100%;display:block;overflow:visible}.rainbow-bar{fill:none;stroke-linecap:butt;cursor:pointer;transition:opacity .16s,stroke .18s,filter .18s;animation:.26s colour-pop}.rainbow-bar.is-blank{opacity:.92}.blank-band-guide{fill:none;pointer-events:none;stroke:#8d9db27a;stroke-linecap:butt}.rainbow-bar:hover,.rainbow-bar:focus{opacity:.82;filter:drop-shadow(0 4px 8px #212f4929);outline:none}.selection-border{fill:none;pointer-events:none;stroke:#171a1f;stroke-linecap:butt;stroke-width:36px}.selection-border.is-blank{stroke:#212f4970;stroke-width:34px}.live-palette-strip{z-index:3;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffe6;border:1px solid #d9e0ead1;border-radius:8px;grid-template-columns:auto 1fr;align-items:center;gap:10px;width:min(86%,520px);padding:8px 10px;display:grid;position:absolute;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 16px 36px #212f4924}.live-palette-title{color:var(--muted);white-space:nowrap;font-size:.78rem;font-weight:800}.live-palette-swatches{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;min-width:0;display:grid}.live-palette-swatch{background:var(--palette-color);cursor:pointer;border:1px solid #1f23281f;border-radius:6px;min-width:0;height:26px;transition:border-color .16s,transform .16s,box-shadow .16s;animation:.26s colour-pop;box-shadow:inset 0 0 0 1px #ffffff38}.live-palette-swatch:hover,.live-palette-swatch:focus{border-color:#2167d585;outline:none;transform:translateY(-1px)}.live-palette-swatch.is-selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px #ffffff47,0 0 0 3px #2167d529}.selector-panel{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);scrollbar-gutter:stable;border-radius:8px;flex-direction:column;align-self:start;gap:12px;max-height:calc(100vh - 40px);padding:14px;display:flex;position:sticky;top:20px;overflow:auto;box-shadow:inset 0 1px #ffffffc7,0 18px 52px #212f491f}.control-section{background:linear-gradient(#fffffff5,#f9fbfdf5);border:1px solid #d9e0eaeb;border-radius:8px;overflow:visible;box-shadow:0 8px 20px #212f490d}.section-header{width:100%;min-height:58px;color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:7px;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-size:1rem;font-weight:700;line-height:1.25;display:flex}.control-section.is-open .section-header{border-bottom:1px solid var(--line);border-radius:7px 7px 0 0}.section-header:hover,.section-header:focus{background:linear-gradient(90deg,#2167d50f,#f6c4530d);outline:none}.section-toggle{color:#45628f;background:#ffffffb8;border:1px solid #2167d52e;border-radius:999px;flex:none;place-items:center;width:26px;height:26px;font-weight:700;line-height:1;display:grid}.control-section.is-open .section-toggle{color:var(--ink);font-size:0}.control-section.is-open .section-toggle:before{content:"-";font-size:1rem}.section-content{padding:16px}.panel-title{margin:0 0 10px;font-size:1.05rem;font-weight:700;line-height:1.25;display:block}.selected-band-editor{background:linear-gradient(#fffffff0,#f6faffe6),linear-gradient(135deg,#2167d514,#f6c4531a);border:1px solid #2167d52e;border-radius:8px;gap:12px;padding:12px;display:grid;box-shadow:inset 0 1px #ffffffdb,0 10px 24px #212f4914}.selected-band-header,.selected-band-body,.selected-band-actions{align-items:center;gap:12px;display:grid}.selected-band-header{grid-template-columns:1fr auto}.selected-band-body{grid-template-columns:66px 1fr}.selected-band-actions{grid-template-columns:auto 1fr auto}.editor-kicker{color:var(--accent);letter-spacing:0;text-transform:uppercase;margin:0 0 3px;font-size:.75rem;font-weight:900}.band-counter,.selected-hex{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:800}.selected-hex{color:var(--ink);justify-self:center}.editor-button{color:#17376c;cursor:pointer;background:#ffffffd6;border:1px solid #2167d533;border-radius:8px;min-height:34px;padding:0 10px;font-size:.84rem;font-weight:800;transition:border-color .16s,transform .16s,box-shadow .16s}.editor-button:hover,.editor-button:focus{border-color:#2167d585;outline:none;transform:translateY(-1px);box-shadow:0 8px 18px #212f491a}.swatch-large{aspect-ratio:1;background-color:#fff;background-image:linear-gradient(45deg,#d4d9e0 25%,#0000 25% 75%,#d4d9e0 75%),linear-gradient(45deg,#d4d9e0 25%,#0000 25% 75%,#d4d9e0 75%),none;background-position:0 0,8px 8px;background-repeat:repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border:1px solid #2167d52e;border-radius:8px;width:66px;animation:.26s colour-pop;overflow:hidden;box-shadow:0 8px 18px #212f491a}.swatch-large:after{content:"";background:var(--selected-color);width:100%;height:100%;display:block}.active-label{color:var(--ink);margin:0;font-weight:800;line-height:1.45}.defaults-list{gap:8px;display:grid}.default-button{width:100%;min-height:46px;color:var(--ink);cursor:pointer;text-align:left;background:#ffffffd1;border:1px solid #d9e0eaeb;border-radius:8px;grid-template-columns:minmax(72px,1fr) minmax(118px,148px);align-items:center;gap:12px;padding:8px 10px;transition:border-color .16s,transform .16s,box-shadow .16s;display:grid}.default-button:hover,.default-button:focus{border-color:#2167d57a;outline:none;transform:translateY(-1px);box-shadow:0 10px 22px #212f491a}.default-name{overflow-wrap:anywhere;min-width:0}.default-preview{border:1px solid #212f4924;border-radius:6px;grid-template-columns:repeat(7,1fr);height:20px;display:grid;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff42}.default-swatch{background:var(--default-color)}.saved-designs{gap:12px;display:grid}.saved-design-list{gap:8px;display:grid}.saved-design{grid-template-columns:1fr auto;align-items:center;gap:8px;display:grid}.saved-design-load{min-width:0;min-height:48px;color:var(--ink);cursor:pointer;text-align:left;background:#ffffffd1;border:1px solid #d9e0eaeb;border-radius:8px;grid-template-columns:minmax(70px,1fr) minmax(96px,126px);align-items:center;gap:10px;padding:8px 10px;display:grid}.saved-design-load:hover,.saved-design-load:focus{border-color:#2167d56b;outline:none}.saved-design-name{overflow-wrap:anywhere;min-width:0}.delete-button{color:#991b1b;cursor:pointer;background:#fef2f2d1;border:1px solid #dc262633;border-radius:8px;min-height:38px;padding:0 10px}.delete-button:hover,.delete-button:focus{border-color:#dc26266b;outline:none}.empty-state{color:var(--muted);margin:0;font-size:.9rem;line-height:1.4}.gradient-fill{gap:10px;display:grid}.gradient-fill label{color:var(--muted);gap:6px;font-size:.9rem;display:grid}.blend-fill{gap:10px;display:grid}.blend-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.blend-inputs label{color:var(--muted);gap:6px;font-size:.9rem;display:grid}.band-editor{gap:12px;display:grid}.custom-colour{color:var(--muted);gap:6px;font-size:.9rem;display:grid}.color-input{cursor:pointer;background-color:#fff;background-image:linear-gradient(45deg,#dfe5ec 25%,#0000 25% 75%,#dfe5ec 75%),linear-gradient(45deg,#dfe5ec 25%,#0000 25% 75%,#dfe5ec 75%),none;background-position:0 0,8px 8px;background-repeat:repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border:1px solid #2167d52e;border-radius:8px;width:100%;height:52px;padding:6px;box-shadow:0 8px 18px #212f4914}.palette{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.color-choice{aspect-ratio:1;background:var(--choice);cursor:pointer;border:2px solid #ffffffc2;border-radius:8px;min-width:0;transition:transform .16s,border-color .16s,box-shadow .16s;box-shadow:inset 0 0 0 1px #1f232829,0 8px 16px #212f491a}.color-choice:hover,.color-choice:focus{border-color:#fff;outline:none;transform:translateY(-1px);box-shadow:inset 0 0 0 1px #1f232833,0 12px 24px #212f4929}.bar-list{gap:8px;display:grid}.bar-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;display:grid}.bar-button{cursor:pointer;width:100%;min-height:44px;color:var(--ink);text-align:left;background:#ffffffd1;border:1px solid #d9e0eaeb;border-radius:8px;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:7px 10px;display:grid}.bar-button:hover,.bar-button:focus{border-color:#2167d56b;outline:none}.bar-button.is-selected{border-color:var(--accent);box-shadow:0 0 0 3px #1769aa24}.lock-button{min-width:70px;min-height:44px;color:var(--muted);cursor:pointer;background:#ffffffd1;border:1px solid #d9e0eaeb;border-radius:8px;padding:0 9px;font-size:.8rem;font-weight:800;transition:border-color .16s,color .16s,background .16s,box-shadow .16s}.lock-button:hover,.lock-button:focus{color:var(--ink);border-color:#2167d56b;outline:none}.lock-button.is-locked{color:#17376c;background:#e8f0ffeb;border-color:#2167d557;box-shadow:0 0 0 3px #2167d51a}.mini-swatch{aspect-ratio:1;background:var(--bar-color);border:1px solid #1f232826;border-radius:6px;width:28px;animation:.26s colour-pop;box-shadow:inset 0 0 0 1px #ffffff3d}.bar-name{overflow-wrap:anywhere;min-width:0}.hex{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.82rem}.shortcut-hint{color:var(--muted);margin:0;font-size:.84rem;line-height:1.4}@keyframes colour-pop{0%{opacity:.72;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.rainbow-bar,.live-palette-swatch,.mini-swatch,.swatch-large{transition:none;animation:none}}@media (width<=860px){.app{width:min(100% - 24px,680px);padding:20px 0}header{padding:18px}.brand{gap:14px}.logo-mark{width:72px}header,main{grid-template-columns:1fr}.canvas-area{height:360px}.live-palette-strip{grid-template-columns:1fr;gap:6px;width:min(92%,440px);bottom:12px}.live-palette-title{text-align:center}.about-grid,.faq-grid{grid-template-columns:1fr}.selector-panel{max-height:none;position:static;overflow:visible}}@media (width<=520px){.brand{grid-template-columns:1fr}.logo-mark{width:68px}h1{font-size:2.45rem}.palette{grid-template-columns:repeat(6,1fr)}.selector-panel{padding:14px}.canvas-area{height:300px}.rainbow-wrap{max-width:100%}.live-palette-strip{width:calc(100% - 24px)}.live-palette-title{display:none}.live-palette-swatch{height:24px}.selected-band-body,.selected-band-actions{grid-template-columns:1fr}.selected-hex{justify-self:start}.bar-row{grid-template-columns:1fr}.lock-button{min-height:38px}}