*{box-sizing:border-box;margin:0;padding:0;font-family:Helvetica,sans-serif}a{text-decoration:none}ul{list-style:none}h1{font-family:Dancing Script,cursive}main{background-color:#101010;place-items:center;min-height:80vh;padding:5rem 0;display:grid}canvas{background-color:#000}button{cursor:pointer;color:inherit;background-color:#0000;border:none}*{box-sizing:border-box;margin:0;padding:0}body{color:#fff}input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=color]{appearance:none}img{width:100%}.hide{display:none!important}.copied{color:#0b0}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;scroll-behavior:smooth}body{color:#f4efff;-webkit-font-smoothing:antialiased;background:#0c0913}html .App{background:radial-gradient(at 60% 0,#20102e55,#0000 48%),#0c0913;min-height:100vh}html .App>main{background:0 0;min-height:calc(100vh - 160px);padding:45px 40px 0;display:block}html .App *{font-family:Inter,Helvetica Neue,Arial,sans-serif}html .App ::selection{color:#fff;background:#810cff}html .App :focus-visible{outline-offset:5px;outline:2px solid #d99cff!important}html .App button,html .App a,html .App input,html .App select{-webkit-tap-highlight-color:transparent}html .App button{min-height:32px}html .App>main>section,html .App .converter{width:min(1180px,100%);margin:auto}html .App .converter__main,html .App .pallete-gen,html .App .gradgen,html .App .text-content{background:#14101f;border:1px solid #362a47;border-radius:14px;padding:30px;box-shadow:0 14px 60px #0002;width:100%!important}html .App .converter__main>h2,html .App .pallete-gen>h2{letter-spacing:-1px;text-align:left;width:100%;margin-bottom:25px;font-size:28px;font-weight:550}html .App .converter__main>p{color:#91869f;text-align:left;width:100%;margin-top:12px;font-size:12px;line-height:1.7}html .App .converter__container{gap:28px!important;padding:0!important}html .App .color-block{background:#1b1428;border:1px solid #45305f;border-radius:9px;min-height:65px;padding:14px 16px}html .App .color-block__text,html .App .color-block__input{color:#debbff;font-family:monospace;font-size:15px;font-weight:400}html .App .color-block__copy,html .App .copy-btn{color:#bd87f1}html .App .color-block__input{border:1px solid #9862b9;border-radius:4px;min-height:36px}html .App .alpha-changer{border:1px solid #45305f;border-radius:9px;overflow:hidden}html .App .alpha-changer__input{color:#d4b0f3;background:#1b1428;border-top:1px solid #45305f;min-height:36px}html .App .color-picker__canvas{border-radius:9px}html .App .text-content{background:#100c18;margin:32px auto 48px;padding:28px 32px;line-height:1.85}html .App .text-content .content__section-title{color:#ded0ee;text-align:left;border-bottom:1px solid #352942;padding-bottom:20px;font-size:20px}html .App .text-content .content__block h3{color:#c6a3e4;text-align:left;margin-top:24px;font-size:16px}html .App .text-content .content__block p{color:#a295af;text-align:left;font-size:13px;line-height:1.9}html .App .text-content .content__block strong{color:#d2b4e9;font-size:inherit}html .App .text-content .content__block a{color:#cf91ff;font-weight:500}html .App .gradgen{padding:0;overflow:hidden}html .App .gradgen__tab-container{background:#1c1429;border-bottom:1px solid #45305f;gap:6px;padding:8px 12px}html .App .gradgen__main-container{background:0 0;gap:25px;min-height:0;padding:28px}html .App .gradgen__main-container h3{color:#c5b6d3;margin-bottom:14px;font-size:13px;font-weight:500;line-height:1.6}html .App .gradgen__main-container .main-container__grad-creator .canvas-container__canvas{border:1px solid #61417d}html .App .gradgen__main-container canvas{touch-action:none}html .App .option-container,html .App .change-grad-type,html .App .color-list,html .App .pallete-gen__style{border-radius:7px;border-color:#45305f!important}html .App .pallete-gen__container{grid-template-columns:1fr 70px 1fr;gap:24px;width:100%}html .App .pallete-gen__container button{min-width:32px}html .App .pallete-gen__color-bar{min-width:0}html .App input[type=range]{accent-color:#a84aff}html .App input,html .App select,html .App canvas{max-width:100%}@media (width<=991px){html .App .pallete-gen__container{grid-template-columns:1fr}html .App .converter__main,html .App .pallete-gen{padding:24px}html .App .converter__main>h2,html .App .pallete-gen>h2{font-size:24px}html .App .gradgen__main-container{padding:20px}html .App .text-content{padding:24px}html .App .alpha-changer{min-height:100px}}@media (width<=700px){html .App>main{padding:24px 20px 0}html .App .converter__main,html .App .pallete-gen{padding:20px 14px}html .App .text-content{padding:22px 18px}html .App .gradgen__main-container{padding:18px 12px}html .App .studio-hero .hero-copy h1{font-size:46px}html .App .converter__container{gap:20px!important}}@media (prefers-reduced-motion:reduce){html .App *,html .App :before,html .App :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}:root{--surface:#131019;--surface-raised:#1a1523;--line:#302839;--muted:#a99fb5;--text:#f1edf5;--accent:#b789f5;--accent-bg:#292034}html .App{background:#0e0b12}html .App .sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html .App .tool-page{width:min(1240px,100%);margin:0 auto;padding-bottom:52px}html .App .tool-heading{margin:0 0 32px}html .App .tool-back{color:var(--muted);align-items:center;gap:8px;margin-bottom:27px;font-size:12px;display:inline-flex}html .App .tool-back:hover{color:var(--text)}html .App .tool-heading__row{justify-content:space-between;align-items:center;gap:30px;display:flex}html .App .tool-heading h1{letter-spacing:-1.3px;margin:12px 0;font-family:inherit;font-size:clamp(28px,3vw,38px);font-weight:600;line-height:1.15}html .App .tool-heading p{color:var(--muted);max-width:670px;font-size:14px;line-height:1.7}html .App .tool-heading__badge{color:#9b8ca9;border:1px solid var(--line);white-space:nowrap;border-radius:30px;padding:9px 12px;font-size:10px}html .App .tool-heading .eyebrow{color:#a884cc;letter-spacing:2px;font-size:9px}html .App .ui-panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}html .App .ui-button{color:#ded4e8;cursor:pointer;white-space:nowrap;background:#211a2a;border:1px solid #403449;border-radius:7px;justify-content:center;align-items:center;gap:7px;min-height:38px;padding:9px 12px;font-size:11px;font-weight:500;line-height:1.35;transition:background .15s,border-color .15s,color .15s;display:inline-flex}html .App .ui-button svg{flex-shrink:0;width:14px;height:14px}html .App .ui-button:hover{color:#fff;background:#30233d;border-color:#79608b}html .App .ui-button.primary{color:#fff;background:#7940b9;border-color:#9b64db}html .App .ui-button.primary:hover{background:#8b4dca}html .App .ui-button.quiet{color:#afa1bc;background:0 0;border-color:#0000}html .App .ui-button.quiet:hover{color:#ece0f7;background:#241b2e}html .App .ui-button:disabled{opacity:.38;cursor:default}html .App .ui-button[aria-pressed=true]{color:#e1c0ff;background:#32213f;border-color:#80559b}html .App input:not([type=range]):not([type=radio]):not([type=checkbox]):not([type=color]){color:var(--text);background:#110d18;border:1px solid #4b3a59;border-radius:6px;outline:none;width:100%;min-height:40px;padding:10px 11px;font-size:13px}html .App input[aria-invalid=true]{border-color:#f18b9f!important}html .App input[type=color]{appearance:none;cursor:pointer;background:0 0;border:1px solid #504057;border-radius:7px;width:40px;height:38px;padding:4px}html .App input[type=color]::-webkit-color-swatch-wrapper{padding:0}html .App input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}html .App input[type=range]{accent-color:#bc8bf5;cursor:pointer;width:100%;min-height:24px;margin:0}html .App input[type=checkbox]{accent-color:#a966df;cursor:pointer;width:17px;height:17px}html .App .ui-hint{color:#9d91aa;font-size:11px;line-height:1.65}html .App .panel-label{justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}html .App .panel-label h2,html .App .control-section h2,html .App .palette-harmony-panel h2{letter-spacing:-.1px;color:#e9e0ef;margin:0;font-size:13px;font-weight:600;line-height:1.5}html .App .panel-label>span{color:#8e809a;white-space:nowrap;align-items:center;gap:5px;font-size:10px;display:flex}html .App .panel-label .live-label{color:#bba4cf;font-size:9px}html .App .range-field{flex-direction:column;gap:6px;display:flex}html .App .range-field>span{color:#b6a7c3;justify-content:space-between;align-items:center;gap:20px;font-size:11px;display:flex}html .App .range-field output{font-variant-numeric:tabular-nums;color:#ded0eb;font-size:11px}html .App .segmented{background:#0e0b14;border:0;border-radius:8px;gap:3px;min-width:0;padding:3px;display:flex}html .App .segmented legend{color:#a899b6;margin-bottom:9px;padding:0;font-size:10px}html .App .segmented label{cursor:pointer;flex:1;min-width:0;position:relative}html .App .segmented input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute}html .App .segmented span{color:#a092ac;white-space:nowrap;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;min-height:36px;padding:8px 7px;font-size:11px;display:flex}html .App .segmented input:checked+span{color:#e0bdf7;background:#302039;border-color:#65417b}html .App .segmented input:focus-visible+span{outline-offset:2px;outline:2px solid #c88ff5}html .App .code-header{justify-content:space-between;align-items:center;gap:15px;padding:16px 0 10px;display:flex}html .App .code-header>span{color:#a69ab2;letter-spacing:.8px;font-size:10px}html .App .css-output{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;color:#cda4ee;background:#0e0b14;border:1px solid #302536;border-radius:8px;min-width:0;padding:16px;font:11px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace}html .App .css-output code{font:inherit}html .App .copy-value{min-height:32px;padding:6px 9px;font-size:10px}html .App .workspace-tabs{border-bottom:1px solid var(--line);background:#18121f;align-items:center;gap:10px;padding:10px 12px 0;display:flex}html .App .workspace-tabs>[role=tablist]{scrollbar-width:thin;flex:1;gap:4px;min-width:0;display:flex;overflow:auto}html .App .workspace-tab{border:1px solid #0000;border-bottom:none;border-radius:8px 8px 0 0;flex-shrink:0;align-items:center;margin-bottom:0;display:flex}html .App .workspace-tab.is-active{background:var(--surface);border-color:#493650;box-shadow:inset 0 2px #b77be7}html .App .workspace-tab>[role=tab]{color:#a89ab4;white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:9px;max-width:230px;min-height:44px;padding:11px 8px 11px 13px;font-size:12px;display:flex;overflow:hidden}html .App .workspace-tab.is-active>[role=tab]{color:#ebdbf6}html .App .tab-color{border-radius:3px;flex-shrink:0;width:10px;height:10px}html .App .tab-close{color:#a591b1;border-radius:5px;place-items:center;width:30px;height:36px;min-height:36px;margin-right:3px;display:grid}html .App .tab-close:hover{color:#f0c6df;background:#382439}html .App .tab-add{flex-shrink:0;align-self:center;margin-bottom:10px}html .App .workspace-toolbar{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;min-height:69px;padding:15px 22px;display:flex}html .App .workspace-title{color:#d7c7e1;overflow-wrap:anywhere;align-items:center;gap:8px;margin-right:12px;font-size:12px;display:flex}html .App .workspace-title svg{color:#ab83cd;flex-shrink:0}html .App .undo-action{margin-left:auto}html .App .workspace-toolbar form{flex:1;align-items:center;gap:8px;display:flex}html .App .workspace-toolbar form input{max-width:280px}html .App .workspace-status{border-top:1px solid var(--line);color:#8e7f9d;justify-content:space-between;align-items:center;gap:12px;min-height:43px;padding:13px 23px;font-size:10px;display:flex}html .App .gradient-editor{grid-template-columns:240px minmax(250px,1fr) minmax(230px,1fr);min-width:0;display:grid}html .App .gradient-controls{border-right:1px solid var(--line);min-width:0;padding:24px}html .App .control-section+.control-section{border-top:1px solid var(--line);margin-top:22px;padding-top:24px}html .App .control-section h2{margin-bottom:10px}html .App .color-chips{flex-direction:column;gap:7px;margin:16px 0;display:flex}html .App .color-chip{background:#1a1322;border:1px solid #392b42;border-radius:7px;justify-content:space-between;display:flex}html .App .color-chip>button:first-child{color:#bfaed0;text-align:left;flex:1;align-items:center;gap:9px;padding:8px 10px;font-size:10px;display:flex}html .App .color-chip>button:first-child[aria-pressed=true]{color:#efd9ff;background:#2b1c35;border-radius:6px}html .App .color-chip i{border:1px solid #ffffff20;border-radius:4px;flex-shrink:0;width:19px;height:19px}html .App .color-chip>button:last-child{color:#96809f;padding:5px 8px}html .App .color-chip>button:last-child:hover{color:#f0bcd1}html .App .add-color-row{align-items:center;gap:8px;margin-bottom:6px;display:flex}html .App .add-color-row>.ui-button{flex:1}html .App .toggle-row{color:#c0aecb;justify-content:space-between;align-items:center;gap:12px;margin:18px 0;font-size:11px;display:flex}html .App .center-fields{gap:12px;display:flex}html .App .center-fields label{color:#ab9ab8;font-size:10px}html .App .center-fields input{margin:7px 0;width:65px!important}html .App .gradient-controls .range-field{margin-top:18px}html .App .drawing-panel,html .App .gradient-result{min-width:0;padding:24px}html .App .drawing-panel{border-right:1px solid var(--line)}html .App .gradient-drawing{aspect-ratio:1;cursor:crosshair;touch-action:none;background:#1a1422;border:1px solid #4a3558;border-radius:9px;width:100%;height:auto;display:block}html .App .drawing-panel>.ui-hint{margin:13px 0}html .App .draw-alternative{border-top:1px solid #2e2335;flex-direction:column;gap:8px;padding:13px 0 15px;display:flex}html .App .draw-alternative label{color:#a895b9;flex-wrap:wrap;align-items:center;gap:6px;font-size:10px;display:flex}html .App .draw-alternative input{flex:1;min-width:80px}html .App .draw-alternative output{font-variant-numeric:tabular-nums;text-align:right;width:33px;font-size:10px}html .App .gradient-result__preview{aspect-ratio:1;border:1px solid #392a43;border-radius:9px;place-items:center;display:grid;overflow:hidden}html .App .gradient-result__preview.is-empty{background:radial-gradient(#2c193d,#181120)}html .App .gradient-result__preview>div{text-align:center;color:#b99bcb;padding:20px}html .App .gradient-result__preview svg{color:#b583d5;width:27px;height:27px}html .App .gradient-result__preview p{margin:14px 0 8px;font-size:13px;line-height:1.6}html .App .gradient-result__preview span{color:#8f7a9d;font-size:10px}html .App .gradient-result>.ui-hint{margin-top:15px}html .App .palette-studio{grid-template-columns:1fr 1fr;display:grid}html .App .palette-wheel-panel{border-right:1px solid var(--line);padding:28px 34px}html .App .wheel-stage{place-items:center;padding:15px 0 10px;display:grid}html .App .palette-wheel{aspect-ratio:1;cursor:crosshair;touch-action:none;background:0 0;border-radius:50%;width:min(320px,100%);height:auto}html .App .wheel-hint{color:#aa99ba;text-align:center;justify-content:center;align-items:center;gap:8px;margin:12px 0 23px;font-size:11px;line-height:1.6;display:flex}html .App .wheel-hint svg{color:#c697eb;flex-shrink:0}html .App .wheel-sliders{flex-direction:column;gap:12px;margin-top:20px;display:flex}html .App .palette-wheel-panel>.ui-button{margin-top:10px}html .App .palette-harmony-panel{padding:28px 32px}html .App .palette-harmony-panel>.ui-hint{margin:10px 0 22px}html .App .harmony-options{grid-template-columns:1fr 1fr;gap:9px;display:grid}html .App .harmony-options label{cursor:pointer;color:#bba7c9;background:#19121f;border:1px solid #372a41;border-radius:8px;align-items:center;gap:10px;min-height:62px;padding:12px;font-size:11px;line-height:1.4;display:flex;position:relative}html .App .harmony-options label.is-active{color:#f1dbff;background:#30203c;border-color:#9c65b8}html .App .harmony-options label:hover{border-color:#815691}html .App .harmony-options label:focus-within{outline-offset:3px;outline:2px solid #d9a0ff}html .App .harmony-options input{opacity:0;width:1px;height:1px;position:absolute}html .App .harmony-options label>svg{color:#d7b2f1;flex-shrink:0;width:13px;height:13px;margin-left:auto}html .App .harmony-mini{flex-shrink:0;gap:2px;display:flex}html .App .harmony-mini i{border-radius:3px;width:6px;height:22px}html .App .harmony-explanation{color:#bca6cc;background:#1a1322;border-left:2px solid #8a4eaf;border-radius:0 7px 7px 0;margin-top:20px;padding:18px;font-size:12px;line-height:1.8}html .App .palette-output{margin-top:24px;padding:26px 28px}html .App .palette-output>.panel-label{margin-bottom:22px}html .App .palette-output .eyebrow{letter-spacing:1.6px;margin-bottom:9px;font-size:9px}html .App .palette-output .panel-label h2{letter-spacing:-.5px;font-size:19px;font-weight:500}html .App .palette-swatches{border:1px solid #3d2d46;border-radius:10px;grid-template-columns:repeat(5,minmax(0,1fr));display:grid;overflow:hidden}html .App .palette-swatch{background:#17111e;border-right:1px solid #38283f;min-width:0}html .App .palette-swatch:last-child{border-right:0}html .App .palette-swatch__color{height:160px;padding:13px;font-size:10px}html .App .palette-swatch__color>span{opacity:.7;font-family:monospace}html .App .palette-swatch__info{flex-direction:column;align-items:flex-start;gap:9px;padding:15px 13px;display:flex}html .App .palette-swatch__info>span{color:#ab94ba;font-size:10px}html .App .hex-edit{color:#ead9f3;white-space:nowrap;align-items:center;gap:10px;padding:0;font-family:monospace;font-size:13px;display:flex}html .App .hex-edit svg{color:#a882bd;width:12px;height:12px}html .App .palette-swatch__info .ui-button.quiet{white-space:normal;min-height:30px;padding:4px 0;font-size:10px}html .App .palette-code{margin-top:18px}html .App .palette-code .css-output{columns:2;font-size:12px}html .App .palette-output>.ui-hint{margin-top:14px}html .App .inline-color-editor{background:#251a2e;border:1px solid #654075;border-radius:8px;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:18px;padding:18px;display:flex}html .App .inline-color-editor label{color:#c4afd0;flex:1;font-size:12px}html .App .inline-color-editor input{margin-top:8px}html .App .inline-color-editor p{color:#f5a5b6;width:100%;font-size:12px}html .App .converter-studio{grid-template-columns:minmax(280px,1fr) minmax(300px,1.2fr);display:grid}html .App .converter-studio__picker{border-right:1px solid var(--line);padding:30px}html .App .converter-picker canvas{touch-action:none;cursor:crosshair;border:1px solid #53365f;border-radius:9px;width:100%;height:auto;display:block}html .App .converter-picker>.ui-hint{margin:12px 0 20px}html .App .converter-picker__sliders{flex-direction:column;gap:12px;display:flex}html .App .converter-formats{flex-direction:column;gap:12px;padding:30px;display:flex}html .App .converter-formats>.panel-label{margin-bottom:0}html .App .converter-formats>.ui-hint{margin-bottom:8px}html .App .format-card{background:#19121f;border:1px solid #3c2b46;border-radius:9px;padding:16px 18px}html .App .format-card__header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}html .App .format-label{letter-spacing:1px;color:#cfa2ec;font-size:10px;font-weight:600}html .App .format-description{color:#a18aad;font-size:10px}html .App .format-card__value{justify-content:space-between;align-items:center;gap:12px;display:flex}html .App .format-value{text-align:left;color:#ece0f5;align-items:center;gap:12px;min-width:0;display:flex}html .App .format-value code{overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Consolas,monospace}html .App .format-value svg{color:#9c78b1;flex-shrink:0;width:12px;height:12px}html .App .format-edit{flex-direction:column;gap:10px;display:flex}html .App .format-edit>div{gap:8px;display:flex}html .App .format-edit p{color:#f1a5b7;font-size:11px;line-height:1.6}html .App .format-note{color:#9d8aa9;margin-top:auto;padding-top:12px;font-size:11px;line-height:1.8}html .App .opacity-panel{border-top:1px solid var(--line);grid-template-columns:100px 1fr;gap:5px 20px;margin-top:22px;padding-top:22px;display:grid}html .App .color-preview-checker{background:repeating-conic-gradient(#33303a 0% 25%,#24212b 0% 50%) 0 0/14px 14px;border:1px solid #5d4569;border-radius:8px;grid-row:span 2;min-height:82px;position:relative;overflow:hidden}html .App .color-preview-checker>div{position:absolute;inset:0}html .App .color-preview-checker>span{color:#fff;text-align:center;background:#0c071bb3;border-radius:3px;padding:4px;font-size:8px;position:absolute;bottom:5px;left:5px;right:5px}html .App .opacity-panel>.ui-hint{font-size:10px}html .App .tool-guide{margin-top:40px}html .App .tool-guide>header{align-items:flex-start;gap:14px;margin-bottom:22px;display:flex}html .App .guide-icon{color:#b885d7;background:#201629;border:1px solid #46304f;border-radius:9px;flex-shrink:0;place-items:center;width:37px;height:37px;display:grid}html .App .tool-guide header .eyebrow{letter-spacing:1.6px;color:#a884ba;font-size:8px}html .App .tool-guide header h2{letter-spacing:-.5px;margin:8px 0 7px;font-size:21px;font-weight:500}html .App .tool-guide header p{color:#a38daf;font-size:12px;line-height:1.7}html .App .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px;display:grid}html .App .guide-topic{background:#141019;border:1px solid #34263d;border-radius:9px;min-width:0;overflow:hidden}html .App .guide-topic summary{cursor:pointer;justify-content:space-between;align-items:center;gap:20px;padding:20px;list-style:none;display:flex}html .App .guide-topic summary::-webkit-details-marker{display:none}html .App .guide-topic summary>span{flex-direction:column;gap:7px;display:flex}html .App .guide-topic summary strong{color:#d7bddf;font-size:13px;font-weight:500}html .App .guide-topic summary span span{color:#9d87a9;font-size:11px;line-height:1.6}html .App .guide-topic summary>svg{color:#9a73ae;flex-shrink:0;width:15px;height:15px;transition:transform .2s}html .App .guide-topic[open] summary>svg{transform:rotate(180deg)}html .App .guide-topic[open] summary{border-bottom:1px solid #312138}html .App .guide-topic__body{padding:20px}html .App .guide-topic__body>p{color:#b5a2c0;font-size:12px;line-height:1.9}html .App .guide-use{border-left:2px solid #7f4c9c;margin:16px 0 20px;padding-left:13px}html .App .guide-use>strong{color:#d0a9e4;letter-spacing:.5px;margin-bottom:4px;font-size:10px;display:block}html .App .guide-examples{grid-template-columns:1fr 1fr;gap:10px;display:grid}html .App .guide-example{background:#100b16;border:1px solid #3d2948;border-radius:7px;min-width:0;margin:0;overflow:hidden}html .App .guide-example__checker{background:repeating-conic-gradient(#302834 0% 25%,#1c1624 0% 50%) 0 0/18px 18px;height:85px}html .App .guide-example__checker>div{width:100%;height:100%}html .App .guide-example figcaption{flex-wrap:wrap;align-items:flex-start;gap:8px;padding:10px;display:flex}html .App .guide-example code{color:#cdb4dd;overflow-wrap:anywhere;word-break:break-word;flex:1;min-width:70px;font:10px/1.7 monospace}html .App .guide-example .copy-value{min-height:28px;padding:5px 7px;font-size:9px}html .App .guide-palette{gap:5px;display:flex}html .App .guide-palette .guide-example{flex:1}html .App .guide-palette .guide-example figcaption{padding:6px}html .App .guide-palette .guide-example code{min-width:0;font-size:9px}html .App .guide-palette .copy-value{font-size:0}html .App .guide-palette .copy-value svg{width:11px}@media (width>=1500px){html .App .gradient-editor{grid-template-columns:260px 1fr 1fr}}@media (width<=1100px){html .App .gradient-editor{grid-template-columns:220px minmax(220px,1fr)}html .App .gradient-result{border-top:1px solid var(--line);grid-column:1/-1;grid-template-columns:1fr 1fr;gap:0 24px;display:grid}html .App .gradient-result>.panel-label{grid-column:1/-1}html .App .gradient-result__preview{max-height:240px;aspect-ratio:unset;grid-row:span 3;min-height:180px}html .App .gradient-result>.code-header{padding-top:0}html .App .gradient-result>.css-output{align-self:start}html .App .gradient-result>.ui-hint{grid-column:2}html .App .drawing-panel{border-right:0}html .App .harmony-options{grid-template-columns:1fr}html .App .harmony-options label{min-height:49px}html .App .palette-wheel-panel,html .App .palette-harmony-panel{padding:25px}html .App .palette-swatch__color{height:140px}}@media (width<=800px){html .App .tool-heading__badge{display:none}html .App .converter-studio{grid-template-columns:1fr}html .App .converter-studio__picker{border-right:0;border-bottom:1px solid var(--line)}html .App .converter-picker canvas{object-fit:fill;aspect-ratio:360/260;max-height:320px}html .App .converter-studio__picker,html .App .converter-formats{padding:24px}html .App .palette-studio{grid-template-columns:1fr}html .App .palette-wheel-panel{border-right:0;border-bottom:1px solid var(--line)}html .App .harmony-options{grid-template-columns:1fr 1fr}html .App .palette-wheel{max-width:300px}html .App .palette-swatches{grid-template-columns:repeat(5,minmax(0,1fr))}html .App .palette-swatch__info{padding:10px 7px}html .App .hex-edit{gap:5px;font-size:11px}html .App .hex-edit svg{display:none}html .App .palette-swatch__info>.copy-value{padding:5px 7px;font-size:9px}html .App .palette-swatch__info>.copy-value svg{width:11px}html .App .palette-output{padding:22px}html .App .palette-swatch__color{height:110px;padding:8px}html .App .tool-guide header h2{font-size:20px}}@media (width<=600px){html .App .tool-heading{margin-bottom:23px}html .App .tool-back{margin-bottom:22px}html .App .tool-heading h1{letter-spacing:-1px;font-size:30px}html .App .tool-heading p{font-size:12px}html .App .ui-panel{border-radius:11px}html .App .workspace-tabs{gap:6px;padding:8px 8px 0}html .App .workspace-tab>[role=tab]{max-width:170px;padding-left:9px;font-size:11px}html .App .tab-add{min-height:34px;padding:7px 9px;font-size:10px}html .App .workspace-toolbar{gap:4px;padding:12px}html .App .workspace-title{width:100%;margin-bottom:5px}html .App .workspace-toolbar .ui-button{padding:8px;font-size:10px}html .App .workspace-toolbar form{flex-wrap:wrap}html .App .workspace-toolbar form input{flex-basis:100%;max-width:none}html .App .gradient-editor{grid-template-columns:1fr}html .App .gradient-controls{border-right:0;border-bottom:1px solid var(--line);padding:20px}html .App .color-chips{flex-flow:wrap}html .App .color-chip>button:first-child{font-size:10px}html .App .gradient-controls .control-section+.control-section{margin-top:18px;padding-top:18px}html .App .drawing-panel{padding:20px}html .App .gradient-drawing{max-width:360px;margin:auto}html .App .gradient-result{padding:20px;display:block}html .App .gradient-result__preview{aspect-ratio:4/3;min-height:180px;max-height:none;margin-bottom:16px}html .App .gradient-result>.code-header{padding-top:0}html .App .workspace-status{padding:12px;font-size:9px}html .App .draw-alternative{margin-top:14px}html .App .draw-alternative label{font-size:11px}html .App .draw-alternative input{flex-basis:60%}html .App .palette-output>.panel-label{flex-wrap:wrap;align-items:flex-start}html .App .palette-output .panel-label h2{font-size:18px}html .App .palette-output{padding:20px 15px}html .App .palette-swatches{border:0;border-radius:0;grid-template-columns:1fr;gap:8px}html .App .palette-swatch{border-radius:8px;grid-template-columns:76px 1fr;display:grid;overflow:hidden;border:1px solid #38283f!important}html .App .palette-swatch__color{height:100%;min-height:105px;padding:9px}html .App .palette-swatch__info{grid-template-columns:1fr auto;align-items:center;gap:4px 8px;padding:12px;display:grid}html .App .palette-swatch__info>span{grid-column:1;font-size:10px}html .App .palette-swatch__info>.hex-edit{grid-area:2/1;justify-content:flex-start;font-size:14px}html .App .palette-swatch__info>.hex-edit svg{display:block}html .App .palette-swatch__info>.copy-value{grid-area:1/2/span 2;padding:7px 9px;font-size:10px}html .App .palette-swatch__info>.ui-button.quiet{grid-column:1/-1;justify-self:start;font-size:10px}html .App .palette-code .css-output{columns:1}html .App .harmony-options label{gap:8px;min-height:58px;padding:10px 8px;font-size:10px}html .App .harmony-mini i{width:5px}html .App .harmony-options{gap:7px}html .App .palette-harmony-panel,html .App .palette-wheel-panel{padding:22px 18px}html .App .wheel-hint{font-size:10px}html .App .converter-studio__picker,html .App .converter-formats{padding:20px 16px}html .App .format-card{padding:14px 12px}html .App .format-description{font-size:9px}html .App .format-value code{font-size:11px}html .App .format-card__value{gap:8px}html .App .format-card__value>.copy-value{padding:6px 8px;font-size:9px}html .App .format-note{font-size:10px}html .App .guide-grid{grid-template-columns:1fr}html .App .guide-examples{gap:8px}html .App .tool-guide{margin-top:30px}html .App .tool-guide>header{gap:10px}html .App .tool-guide header h2{font-size:19px}html .App .tool-guide header p{font-size:11px}html .App .guide-topic summary,html .App .guide-topic__body{padding:17px}html .App .tool-page{padding-bottom:30px}html .App .opacity-panel{grid-template-columns:85px 1fr;gap:8px 15px}}@media (prefers-reduced-motion:reduce){html .App *{scroll-behavior:auto!important;transition:none!important}}html .App .inline-rgb{border-top:1px solid #4b3258;order:5;gap:20px;width:100%;margin-top:7px;padding-top:14px;display:flex}html .App .inline-rgb>label{flex:1;min-width:0}html .App .copy-error{color:#f1a5b7;font-size:10px;line-height:1.5}html .App .harmony-options input{cursor:pointer;width:100%;height:100%;inset:0}html .App .harmony-options label>span,html .App .harmony-options label>svg{pointer-events:none}@media (width<=600px){html .App .inline-rgb{flex-direction:column;gap:12px}}html .App .tool-page .ui-button{font-size:12px}html .App .panel-label h2,html .App .control-section h2,html .App .palette-harmony-panel h2{font-size:14px}html .App .tool-page .ui-hint,html .App .tool-page .wheel-hint,html .App .range-field>span,html .App .toggle-row,html .App .harmony-options label{font-size:12px}html .App .format-value code,html .App .guide-topic summary strong{font-size:14px}html .App .guide-topic summary span span,html .App .guide-topic__body>p{font-size:13px}@media (width<=600px){html .App .tool-page .ui-button{min-height:44px}html .App .tab-close{min-width:36px;height:44px}html .App .color-chip>button{min-height:44px}html .App .color-chip>button:last-child{min-width:36px}html .App .tool-page input[type=range]{min-height:36px}html .App .format-card__value{flex-wrap:wrap}html .App .format-card__value>.copy-value{margin-left:auto}html .App .format-value code{font-size:13px}html .App .harmony-options label{font-size:11px}html .App .palette-swatch__info>.copy-value{min-height:40px}}.studio-nav{z-index:20;border-bottom:1px solid #292134;justify-content:space-between;align-items:center;gap:30px;width:min(1180px,100% - 80px);height:85px;margin:auto;display:flex;position:relative}.studio-brand{color:#f6efff;letter-spacing:-1.5px;align-items:center;font-size:27px;font-weight:700;display:flex}.brand-period{color:#f0f}.brand-symbol{color:#fff;letter-spacing:-4px;background:linear-gradient(135deg,#40f,#f0f);border-radius:9px;justify-content:center;align-items:center;width:29px;height:29px;margin-right:9px;padding-right:4px;font-size:28px;line-height:1;display:flex}.brand-symbol span{align-self:flex-start;font-size:15px;line-height:1.3}.studio-navlinks{gap:7px;display:flex}.studio-navlinks a{color:#91889f;border-radius:6px;padding:10px 15px;font-size:12px;transition:color .2s,background .2s}.studio-navlinks a:hover{color:#fff}.studio-navlinks a.active{color:#d9b6ff;background:#271b39}.nav-actions{align-items:center;gap:16px;display:flex}.nav-actions select{color:#c9bfd6;cursor:pointer;background:#171020;border:1px solid #352a45;border-radius:6px;padding:8px;font-size:10px}.menu-toggle{font-size:22px;display:none}@media (width<=700px){.studio-nav{width:calc(100% - 40px);height:72px}.menu-toggle{display:flex}.studio-navlinks{background:#171020;border-bottom:1px solid #49325e;flex-direction:column;padding:16px 20px;display:none;position:absolute;top:71px;left:-20px;right:-20px;box-shadow:0 14px 20px #0005}.studio-navlinks.is-open{display:flex}.studio-navlinks a{padding:14px}.studio-brand{font-size:25px}}.studio-footer{color:#7e738e;border-top:1px solid #292134;justify-content:space-between;align-items:center;gap:20px;width:min(1180px,100% - 80px);margin:auto;padding:25px 0;font-size:10px;display:flex}.studio-footer b{color:#cfc1de;margin-right:10px;font-size:14px}.studio-footer a{color:#b9a9cc}@media (width<=700px){.studio-footer{width:calc(100% - 40px)}.studio-footer>span:nth-child(2){display:none}}@keyframes rotateUpper{0%{rotate:0deg}to{rotate:360deg}}@keyframes jump{0%{transform:translateY(0%)}50%{transform:translateY(-50%)}to{transform:translateY(0%)}}.loading{text-align:center;flex-flow:column wrap;justify-content:center;align-items:center;gap:0;width:5rem;display:flex}.loading__upper{text-align:center;background-image:conic-gradient(red 0% 16.6667%,#ff0 16.6667% 33.3333%,#0f0 33.3333% 50%,#0ff 50% 66.6667%,#00f 66.6667% 83.3333%,#f0f 83.3333% 100%);border:1px solid #ccc;border-radius:50%;flex-flow:wrap;justify-content:center;align-items:center;gap:0;width:100%;height:5rem;animation:2s linear infinite rotateUpper;display:flex}.loading__banner{background-color:#101010;background-image:url(/Colour/assets/colour_logo-DiyBEZAR.png);background-position:50%;background-repeat:no-repeat;background-size:contain;border:1px solid #ccc;border-radius:50%;width:4rem;height:4rem}.loading__bottom{text-align:center;flex-flow:wrap;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;display:flex}.loading__jumper{aspect-ratio:1;border:1px solid #ccc;border-radius:50%;width:.75rem;animation:1s infinite jump}.loading__jumper#jumper-1{background-color:red;animation-delay:.25s}.loading__jumper#jumper-2{background-color:#0f0;animation-delay:.5s}.loading__jumper#jumper-3{background-color:#00f;animation-delay:.75s}.loading__text{font-size:1.2rem;font-weight:700}