:root{--bg:#020617;--fg:#e5e7eb;--accent:#f97316;--red:#ef4444;--green:#22c55e;--blue:#3b82f6;--cyan:#22d3ee;--magenta:#e879f9;--yellow:#eab308}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;background:radial-gradient(circle at 10% 0,#020617 0,#020617 40%,#000 100%);color:var(--fg);min-height:100vh;align-items:flex-start;justify-content:center;-webkit-font-smoothing:antialiased;transition:background .8s ease;overflow-x:hidden;overflow-y:auto}.app,body{display:flex}.app{width:100%;max-width:1120px;padding:2.4rem 1.6rem;flex-direction:column;gap:1.8rem}.app-header{justify-content:space-between;font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;color:#9ca3af}.app-header,.logo{display:flex;align-items:center}.logo{gap:.55rem}.logo-mark{width:1.9rem;height:1.9rem;border-radius:999px;background:radial-gradient(circle at 20% 0,rgba(239,68,68,.9) 0,transparent 55%),radial-gradient(circle at 80% 0,rgba(59,130,246,.8) 0,transparent 55%),radial-gradient(circle at 50% 100%,rgba(34,197,94,.85) 0,transparent 60%),#020617;box-shadow:0 0 20px rgba(248,250,252,.1),0 0 50px rgba(59,130,246,.35)}.logo-text{font-weight:500;letter-spacing:.15em}.tool-tabs{display:inline-flex;gap:.4rem;padding:.4rem .2rem .2rem;border-radius:999px;background:rgba(15,23,42,.9);border:1px solid rgba(30,64,175,.6);margin-bottom:.4rem;max-width:100%;overflow-x:auto}.tool-tabs::-webkit-scrollbar{height:4px}.tool-tabs::-webkit-scrollbar-thumb{background:rgba(30,64,175,.9);border-radius:999px}.tab{border:none;background:transparent;color:#9ca3af;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .9rem;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .18s ease,color .18s ease}.tab.active{background:radial-gradient(circle at 0 0,rgba(248,250,252,.12),transparent 55%),linear-gradient(135deg,#1f2937,#020617);color:#e5e7eb}.app-main{gap:1.8rem;min-height:calc(100vh - 7rem)}.app-main,.copy{display:flex;flex-direction:column}.copy{gap:.8rem;max-width:620px}.eyebrow{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:#9ca3af}.title{font-size:clamp(2.1rem,2.5vw + 1.4rem,2.7rem);line-height:1.1;font-weight:600}.title span{background:linear-gradient(120deg,#ef4444,#eab308,#22c55e,#38bdf8,#818cf8,#ec4899);-webkit-background-clip:text;color:transparent}.subtitle{font-size:.96rem;color:#9ca3af;max-width:33rem}.home-section{display:flex;flex-direction:column;gap:2rem}.home-hero{border-radius:1.6rem;padding:1.8rem 1.6rem;border:1px solid rgba(30,64,175,.6);background:radial-gradient(circle at 0 0,rgba(59,130,246,.24) 0,transparent 40%),radial-gradient(circle at 100% 100%,rgba(239,68,68,.18) 0,transparent 45%),rgba(15,23,42,.96);box-shadow:0 24px 50px rgba(15,23,42,.95),0 0 30px rgba(15,23,42,.9)}.home-copy{display:flex;flex-direction:column;gap:1rem}.home-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}.btn-ghost{border-radius:999px;padding:.7rem 1.4rem;border:1px solid rgba(148,163,184,.7);background:transparent;color:#e5e7eb;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.btn-ghost:hover{background:rgba(15,23,42,.85)}.home-learn{margin-top:.6rem;border-radius:1.6rem;padding:1.8rem 1.6rem 1.6rem;border:1px solid rgba(30,64,175,.6);background:radial-gradient(circle at 0 0,rgba(59,130,246,.18) 0,transparent 45%),radial-gradient(circle at 100% 100%,rgba(239,68,68,.16) 0,transparent 45%),rgba(15,23,42,.96);box-shadow:0 24px 50px rgba(15,23,42,.95),0 0 30px rgba(15,23,42,.9)}.learn-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);grid-gap:1.8rem;gap:1.8rem}.learn-sidebar{display:flex;flex-direction:column;gap:.45rem;padding-right:.8rem;border-right:1px solid rgba(30,64,175,.6)}.learn-tab{border-radius:.9rem;border:1px solid transparent;padding:.55rem .8rem;background:transparent;color:#9ca3af;font-size:.78rem;text-align:left;cursor:pointer;line-height:1.3;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.learn-tab:hover{background:rgba(15,23,42,.9);border-color:rgba(51,65,85,.9);color:#e5e7eb;transform:translateX(1px)}.learn-tab.active{background:radial-gradient(circle at 0 0,rgba(248,250,252,.12),transparent 55%),linear-gradient(135deg,#1f2937,#020617);border-color:rgba(30,64,175,.9);color:#e5e7eb}.learn-main{display:flex;flex-direction:column;gap:1.6rem}.learn-note{margin-top:.6rem}.btn-sequence{border:none;cursor:pointer;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;padding:.7rem 1.7rem;border-radius:999px;background:radial-gradient(circle at 0 0,rgba(248,250,252,.12),transparent 55%),linear-gradient(135deg,#1f2937,#020617);color:#e5e7eb;border:1px solid rgba(148,163,184,.7);box-shadow:0 16px 34px rgba(15,23,42,.9),0 0 0 1px #0f172a;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease}.btn-sequence:hover{transform:translateY(-1px);box-shadow:0 20px 50px #0f172a,0 0 25px rgba(59,130,246,.6);border-color:rgba(59,130,246,.9);background:linear-gradient(135deg,#020617,#020617)}.btn-icon{display:inline-block;transform:translateY(1px)}.tool-section{gap:1.2rem;width:100%}.tool-header,.tool-section{display:flex;flex-direction:column}.tool-header{gap:.4rem}.palette-header-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-column-gap:1.6rem;column-gap:1.6rem;align-items:start;margin-bottom:.4rem}.palette-header-copy{display:flex;flex-direction:column;gap:.75rem}.palette-controls{flex-direction:row;align-items:center;gap:.75rem;margin-top:1.3rem}.palette-controls,.palette-name-row{display:flex;justify-content:flex-end}.palette-name-row{width:100%;margin-top:-2rem;margin-bottom:.5rem}.palette-name-input{min-width:0;flex:0 0 220px;padding:.45rem .7rem;border-radius:999px;border:1px solid rgba(55,65,81,.9);background:rgba(15,23,42,.9);color:#e5e7eb;font-size:.8rem}.palette-name-input::placeholder{color:#6b7280}.palette-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:0;gap:0;width:100%}.swatch{position:relative;border-radius:1.2rem;padding:.6rem .6rem .9rem;display:flex;flex-direction:column;gap:.55rem}.swatch-color-block{border-radius:1.1rem;border:1px solid rgba(15,23,42,.9);min-height:140px;padding:.7rem;box-shadow:0 18px 40px rgba(15,23,42,.95),0 0 24px rgba(15,23,42,.85);display:flex;align-items:flex-start;cursor:pointer}.swatch-hex{background:rgba(15,23,42,.86);color:#e5e7eb;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.78rem;padding:.25rem .5rem;border-radius:999px;border:1px solid rgba(15,23,42,.95)}.swatch-color-input-hidden{position:absolute;top:50%;left:50%;width:1px;height:1px;opacity:0;pointer-events:none}.swatch-controls-row{display:flex;justify-content:center;gap:.4rem;opacity:0;pointer-events:none;transition:opacity .16s ease}.swatch:hover .swatch-controls-row{opacity:1;pointer-events:auto}.swatch-control-btn{border:none;border-radius:999px;padding:.25rem .55rem;font-size:.8rem;cursor:pointer;background:rgba(15,23,42,.9);color:#e5e7eb;border:1px solid rgba(31,41,55,.9)}.drag-handle{cursor:-webkit-grab;cursor:grab}.lock-btn.locked{background:rgba(34,197,94,.9);border-color:#16a34a}.swatch-dragging .swatch-color-block{outline:1px dashed rgba(148,163,184,.9);transform:scale(.98)}.swatch.swatch-empty{border-radius:1.2rem;border:1px dashed rgba(148,163,184,.7);min-height:140px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;padding:0;background:rgba(0,0,0,.45)}.swatch.swatch-empty .plus-icon{font-size:1.4rem;opacity:.95;color:#fff}.copy-toast{font-size:.78rem;color:#e5e7eb;padding:.35rem .7rem;border-radius:999px;background:rgba(15,23,42,.9);border:1px solid rgba(148,163,184,.7)}.color-detail{margin-top:1.6rem;padding:1.4rem 1.6rem 1.6rem;border-radius:1.4rem;background:rgba(15,23,42,.96);border:1px solid rgba(30,64,175,.7);box-shadow:0 24px 50px rgba(15,23,42,.95),0 0 30px rgba(15,23,42,.9)}.detail-heading{font-size:1.5rem;font-weight:600;margin-bottom:1.2rem}.conversion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:.8rem 2.4rem;gap:.8rem 2.4rem}.conversion-column{display:flex;flex-direction:column;gap:.5rem}.conversion-row{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;border-radius:.8rem;background:rgba(15,23,42,.9);border:1px solid rgba(31,41,55,.95)}.conversion-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:#d1d5db}.conversion-value{font-size:.9rem;font-weight:500;color:#f9fafb}.saved-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:.9rem;gap:.9rem}.saved-card{border-radius:1rem;background:rgba(15,23,42,.9);border:1px solid rgba(30,64,175,.7);padding:.6rem;display:flex;flex-direction:column;gap:.45rem}.saved-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.3rem}.saved-name{font-size:.82rem;font-weight:500;color:#e5e7eb}.saved-colors{border:none;padding:0;background:transparent;display:grid;grid-template-columns:repeat(5,1fr);grid-gap:.2rem;gap:.2rem;cursor:pointer}.saved-swatch{border-radius:.4rem;height:26px;border:1px solid rgba(15,23,42,.9)}.saved-meta{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:#9ca3af}.saved-delete{border:none;border-radius:999px;padding:.1rem .5rem;font-size:.78rem;cursor:pointer;background:rgba(127,29,29,.85);color:#fee2e2}.contrast-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr);grid-gap:1.2rem;gap:1.2rem;align-items:stretch}.contrast-controls{display:flex;flex-direction:column;gap:.9rem}.contrast-field{display:flex;flex-direction:column;gap:.5rem}.contrast-field span{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#9ca3af}.contrast-color-block{border-radius:1.1rem;min-height:80px;border:1px solid rgba(31,41,55,.95);box-shadow:0 16px 34px rgba(15,23,42,.9),0 0 20px rgba(15,23,42,.9);display:flex;align-items:flex-end;justify-content:flex-start;padding:.7rem;cursor:pointer}.contrast-color-label{background:rgba(15,23,42,.86);color:#e5e7eb;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.78rem;padding:.25rem .5rem;border-radius:999px;border:1px solid rgba(15,23,42,.95)}.contrast-color-input,.contrast-color-input-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.contrast-preview{border-radius:1.1rem;padding:1.2rem;display:flex;flex-direction:column;gap:.3rem;box-shadow:0 18px 40px rgba(15,23,42,.95),0 0 24px rgba(15,23,42,.9);height:100%;min-height:0}.contrast-preview p{font-size:1rem;font-weight:600}.contrast-preview span{font-size:.85rem}.legal-body{display:flex;flex-direction:column;gap:.6rem;font-size:.88rem;color:#9ca3af;max-width:40rem}.legal-body p{line-height:1.5}.faq-list{display:flex;flex-direction:column;gap:1rem;max-width:40rem}.faq-item h2{font-size:.98rem;font-weight:600;margin-bottom:.2rem}.faq-item p{font-size:.88rem;color:#9ca3af}.app-footer{margin-top:.6rem;padding-top:.8rem;border-top:1px solid rgba(31,41,55,.85);font-size:.78rem;color:#6b7280;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem}.footer-copy{max-width:100%}.app-footer a{color:#9ca3af;text-decoration:none;border-bottom:1px dashed rgba(148,163,184,.6)}.app-footer a:hover{color:#e5e7eb;border-bottom-style:solid}.footer-links{display:flex;gap:.6rem}.footer-link-btn{border:none;background:transparent;font-size:.78rem;color:#9ca3af;cursor:pointer;text-decoration:none}.footer-link-btn:hover{color:#e5e7eb}@media (max-width:900px){.app{padding-inline:1.2rem}.learn-layout{grid-template-columns:minmax(0,1fr)}.learn-sidebar{border-right:none;border-bottom:1px solid rgba(30,64,175,.6);padding-right:0;padding-bottom:.8rem;margin-bottom:.8rem}.palette-header-row,.spectrum-band-layout{grid-template-columns:minmax(0,1fr)}.palette-controls{margin-top:.8rem}.palette-controls,.palette-name-row{justify-content:flex-start}}@media (max-width:800px){.palette-row{grid-template-columns:repeat(3,minmax(0,1fr))}.contrast-grid,.conversion-grid{grid-template-columns:minmax(0,1fr)}.contrast-preview{min-height:180px}}.emotion-color-list{display:flex;flex-direction:column;gap:1.2rem;margin-top:2rem}.emotion-item{display:flex;align-items:flex-start;gap:1rem;max-width:640px}.emotion-item .color-block{width:9.25rem;height:5.25rem;border-radius:.75rem;flex-shrink:0}.emotion-desc{font-size:.85rem;opacity:.75;margin-top:.25rem;line-height:1.45}.variations-tab{display:flex;flex-direction:column;gap:2rem}.base-picker{display:flex;align-items:center;gap:1.5rem}.base-color-block{width:220px;height:80px;border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.45)}.base-picker-controls{display:flex;align-items:center;gap:.75rem}.base-color-input{width:48px;height:48px;background:transparent;padding:0;cursor:pointer}.base-color-input,.base-hex-readout{border-radius:999px;border:1px solid rgba(148,163,184,.6)}.base-hex-readout{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;padding:.4rem .8rem;font-size:.9rem}.variation-row{gap:.7rem}.variation-copy,.variation-row{display:flex;flex-direction:column}.variation-copy{gap:.25rem}.variation-label{font-size:1rem;font-weight:600}.variation-description{font-size:.9rem;opacity:.8}.variation-strip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));border-radius:999px;overflow:hidden}.variation-swatch-wrapper{position:relative;width:100%;height:36px}.variation-swatch{position:absolute;inset:0;border:none;padding:0;cursor:pointer;overflow:hidden}.variation-swatch-hex{left:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.7rem;padding:.15rem .45rem;border-radius:999px;background:rgba(15,23,42,.85);border:1px solid rgba(148,163,184,.7)}.variation-copy-btn,.variation-swatch-hex{position:absolute;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease}.variation-copy-btn{right:.6rem;border:none;background:rgba(15,23,42,.9);border-radius:999px;padding:.15rem .35rem;font-size:.75rem;line-height:1;color:#e5e7eb;border:1px solid rgba(51,65,85,.9)}.variation-swatch-wrapper:hover .variation-copy-btn,.variation-swatch-wrapper:hover .variation-swatch-hex{opacity:1;pointer-events:auto}.variation-copy-btn:focus,.variation-swatch:focus{outline:none}.variation-hex-pill{margin-top:.35rem;display:inline-flex;align-items:center;justify-content:center;padding:.25rem .6rem;border-radius:999px;background:rgba(15,23,42,.85);border:1px solid rgba(148,163,184,.7);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.8rem}.harmonies-section{margin-top:1rem;display:flex;flex-direction:column;gap:1.2rem}.harmonies-title{font-size:1.2rem;font-weight:600}.harmonies-subtitle{font-size:.9rem;opacity:.8}.harmonies-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));grid-gap:1rem;gap:1rem}.harmony-card{border-radius:16px;padding:.9rem;background:rgba(15,23,42,.7);border:1px solid rgba(51,65,85,.8);display:flex;flex-direction:column;gap:.6rem}.harmony-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:999px;overflow:hidden}.harmony-swatch-wrapper{position:relative;width:100%;height:32px}.harmony-swatch{position:absolute;inset:0;border:none;padding:0;cursor:pointer;overflow:hidden}.harmony-swatch-hex{left:50%;transform:translate(-50%,-50%);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.65rem;padding:.15rem .45rem;border-radius:999px;background:rgba(15,23,42,.85);border:1px solid rgba(148,163,184,.7)}.harmony-copy-btn,.harmony-swatch-hex{position:absolute;top:50%;opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease}.harmony-copy-btn{right:.55rem;transform:translateY(-50%);border:none;background:rgba(15,23,42,.9);border-radius:999px;padding:.12rem .32rem;font-size:.7rem;line-height:1;color:#e5e7eb;border:1px solid rgba(51,65,85,.9)}.harmony-swatch-wrapper:hover .harmony-copy-btn,.harmony-swatch-wrapper:hover .harmony-swatch-hex{opacity:1;pointer-events:auto}.harmony-copy-btn:focus,.harmony-swatch:focus{outline:none}.harmony-copy{display:flex;flex-direction:column;gap:.2rem}.harmony-label{font-size:.95rem;font-weight:600}.harmony-description{font-size:.85rem;opacity:.8}