:root{color-scheme:dark;--studio-ink:#f4f0ff;--studio-muted:#a19bb2;--studio-violet:#a17cff;--studio-pink:#ff55b8;--studio-lime:#d3ff4e;--studio-cyan:#52e1d2;--studio-line:#303140;--studio-surface:#171923}
html{background:#0b0c12}
body{background:radial-gradient(ellipse at 4% 7%,#38205a55 0,transparent 29%),radial-gradient(ellipse at 99% 17%,#074c4a35 0,transparent 27%),radial-gradient(ellipse at 73% 100%,#54321f33 0,transparent 35%),linear-gradient(140deg,#0b0c12,#10111a 54%,#0b0c12);color:var(--studio-ink);font-family:Inter,'Segoe UI',Arial,sans-serif}
.topbar{width:min(1080px,calc(100% - 48px));height:68px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff17}
.brand{display:flex;align-items:center;gap:9px;color:#f8f4ff;text-decoration:none;font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:16px;font-weight:800;letter-spacing:-.45px}
.brand-mark{width:29px;height:29px;border:1px solid #d3ff4e55;border-radius:9px;background:linear-gradient(145deg,#b05cff,#7042ec);color:white;box-shadow:0 0 20px #a35aff44}
.brand img.brand-mark{width:48px;height:36px;display:block;flex:none;border:0;border-radius:0;background:transparent;object-fit:contain;box-shadow:none}
.brand-dot,.brand-period{color:var(--studio-lime)}
.privacy-pill{border-color:#d3ff4e35;background:#d3ff4e12;color:#d8ff78;font-size:8px;font-weight:800;letter-spacing:.6px}
.privacy-pill span{background:var(--studio-lime);box-shadow:0 0 0 4px #d3ff4e17,0 0 12px #d3ff4e90}
.header-tools{display:flex;align-items:center;gap:9px}
.random-button{border-color:#ffffff20;border-radius:9px;background:#ffffff08;color:#d7d1e5;font-size:9px}.random-button:hover{border-color:#a17cff88;background:#a17cff16}
.page-shell,.workspace{width:min(1000px,calc(100% - 48px));margin:auto;padding-top:39px}
.intro{max-width:720px;margin:0 auto 24px;text-align:center}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:7px;color:#d3ff4e;font-size:8px;font-weight:850;letter-spacing:1.45px}
.sparkle{color:#ff55b8}.intro-tag span{color:#ff55b8}
.intro h1{margin:10px 0 7px;color:#f5f1ff;font-size:clamp(34px,5vw,46px);font-weight:850;line-height:1.08;letter-spacing:-2px}
.intro h1 span{background:linear-gradient(95deg,#d3ff4e,#52e1d2 52%,#ff55b8);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro p,.hero-subtitle{max-width:560px;margin:0 auto;color:#aaa4b8;font-size:11px;line-height:1.7}
.editor-panel,.preview-panel,.studio-card,.picker-card,.preview-card,.palette-card,.panel{border-color:#ffffff17;border-radius:17px;background:linear-gradient(145deg,#191a25f2,#14151df5);box-shadow:0 20px 58px #0005,0 1px 0 #ffffff08 inset;backdrop-filter:blur(16px)}
.editor-panel,.picker-card,.controls,.contrast-card,.saved-card{color:#f3efff}
.card-heading h2,.options-heading h2,.preview-top h2,.section-heading h2,.palette-title-row h2,.control-heading h2,.palette-heading h2{color:#f1edfa}
.step-label,.section-kicker,.eyebrow{color:var(--studio-lime)}
.field-label,.field-group>label,.two-fields label{color:#eee9f7}
.input-shell,.plain-input,textarea,.hex-field,.color-control,.color-picker-wrap,.color-values,.contrast-strip,.contrast-preview,.harmony-tabs,.harmony-row,.saved-empty,.favorite-item{border-color:#ffffff1b;background:#101119;color:#f1edf8}
.input-shell input,.plain-input,textarea,.hex-field>input{color:#f5f1ff}.input-shell input::placeholder,.plain-input::placeholder,textarea::placeholder{color:#787588}
.field-hint,.intro-copy,.intro p,.hero-subtitle,.contrast-intro,.saved-intro,.palette-title-row p,.page-footer,.footer{color:#a29caf}
.type-tabs{border-color:#ffffff0e;background:#101119}.type-tab{color:#a5a0b4}.type-tab.is-active{border-color:#a17cff55;background:linear-gradient(120deg,#a17cff28,#52e1d21b);color:#d3c2ff;box-shadow:0 0 15px #8d5be314}
.reset-button,.customize-heading button{color:#d3ff4e}.reset-button:hover,.customize-heading button:hover{color:#fff}
.color-picker-wrap,.color-control{color:#d7d1e2}.color-value,.color-values,.color-readout{color:#bcb5cc}
.generate-button,.actions a,.export-button,.download-button{background:linear-gradient(105deg,#bc62ff 0%,#8057ff 48%,#31cabd 100%);color:#fff;border-color:transparent;box-shadow:0 8px 24px #874cff42}
.generate-button:hover,.actions a:hover,.download-button:hover,.export-button:hover{filter:saturate(1.18) brightness(1.08)}
.copy-button,.actions button,.color-readout button,.harmony,.harmony-tab,.save-button,.save-color{border-color:#ffffff20;background:#ffffff0a;color:#d5cde5}
.copy-button:hover,.actions button:hover:not(:disabled),.color-readout button:hover,.save-button:hover,.save-color:hover{border-color:#a17cff8c;background:#a17cff1b;color:#eee8ff}
.status-message,.contrast-note,.saved-empty p,.palette-foot,.swatch-note,.swatch-caption,.preview-caption,.preview-foot,.size-label,.footer{color:#a59eb4}
.status-message[data-kind=success]{color:#bfff69}.status-message[data-kind=error]{color:#ff7597}
.preview-stage{border-color:#ffffff18;background:radial-gradient(circle at 12% 14%,#c64eff20,transparent 32%),radial-gradient(circle at 88% 83%,#32d8c61a,transparent 35%),linear-gradient(145deg,#11121a,#171822)}
.preview-stage .stage-orbit,.decor{border-color:#ffffff15}.empty-icon,.qr-icon{border-color:#c18bff35;background:linear-gradient(145deg,#9b56eb30,#4ccfc526);color:#d3ff4e;box-shadow:0 0 25px #9d59e31c}.empty-state strong{color:#f0ebf8}.empty-state>span{color:#aaa3b8}
.preview-indicator,.preview-kicker{color:#d3ff4e}.preview-indicator span{background:#d3ff4e;box-shadow:0 0 0 4px #d3ff4e20,0 0 12px #d3ff4e}
.download-button,.actions a{color:#fff}.copy-button:disabled,.actions button:disabled{opacity:.4}
.tip-card,.tip{border-color:#d3ff4e24;background:linear-gradient(105deg,#d3ff4e12,#ff55b80d)}.tip p,.tip strong{color:#d1c9df}.tip-icon,.tip>span{color:#d3ff4e}
.color-preview{border-color:#ffffff17}.hex-input-wrap,.hex-field{border-color:#ffffff21;background:#0f1017}.hex-input-wrap label{color:#a9a0bc}.hex-input-wrap input{color:#f3efff}.picker-button{border-color:#ffffff20;background:#20212c}.copy-button{border-color:#ffffff20;background:#ffffff0a;color:#d5c9eb}
.color-values button{border:1px solid #ffffff20;border-radius:6px;background:#a17cff19;color:#d8c6ff}
.slider-row label,.slider-group label{color:#c1bbce}.slider-row output,.slider-group output{color:#f0ebf7}
.contrast-strip{border-color:#ffffff18;background:#101119}.contrast-sample span{color:#aaa3b5}.contrast-info span{color:#aaa2b8}.contrast-info strong,.contrast-result strong{color:#f4efff}.contrast-grade[data-level=pass]{background:#d3ff4e20;color:#d3ff4e}.contrast-grade[data-level=large]{background:#ffbd4a20;color:#ffd27c}.contrast-grade[data-level=low]{background:#ff55751c;color:#ff839c}
.harmony-tabs,.harmony-row{border-color:#ffffff12;background:#101119}.harmony-tab,.harmony{color:#aaa3b7}.harmony-tab.is-active,.harmony.is-active{background:linear-gradient(100deg,#b35aff,#7655ef);color:#fff;box-shadow:0 4px 15px #9259ef3d}
.palette-chip,.palette-swatch{border-color:#ffffff19;background:#101119}.palette-chip-meta b,.swatch-info b{color:#f0ebf7}.palette-chip-meta small,.swatch-info small{color:#a49bb2}.swatch.is-selected{border-color:var(--studio-lime)}
.swatch-note,.swatch-caption{color:#aaa2b6}.contrast-preview{border-color:#ffffff18;background:#101119}.contrast-preview small{color:#aaa2b6}
.favorite,.favorite-item{border-color:#ffffff1b;background:#101119;color:#e1dbec}.favorite b,.remove-favorite{color:#a59db0}.favorite:hover{border-color:#a17cff}.favorite-color{box-shadow:0 0 0 1px #ffffff45}
.export-button{background:linear-gradient(105deg,#b95cff,#7453f0);color:#fff;border-color:transparent}
.palette-bottom{color:#a59db2}.save-color{border-color:#d3ff4e45;background:#d3ff4e13;color:#d3ff4e}
.ready-dot{background:#d3ff4e;box-shadow:0 0 0 5px #d3ff4e1c}.preview-badge{border-color:#d3ff4e3a;background:#d3ff4e15;color:#d3ff4e}
.page-footer,.footer{color:#898396}.page-footer b,.footer i{color:#ff55b8}
.toast{border-color:#a17cff80;background:#201b2e;color:#f9f6ff;box-shadow:0 10px 30px #0008}
@media(max-width:520px){.topbar,.page-shell,.workspace{width:calc(100% - 30px)}.topbar{height:61px}.page-shell,.workspace{padding-top:30px}.intro{margin-bottom:19px}.intro h1{font-size:34px;letter-spacing:-1.5px}}