:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#ffffffde;--brand-color:#afd;--brand-font:"Monoton", cursive;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{background-color:#000;min-width:320px;min-height:100vh;margin:0}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}button:disabled{opacity:.5;cursor:not-allowed}.auth-form{background-color:#ffffff0d;border-radius:12px;max-width:400px;margin:0 auto;padding:2rem;box-shadow:0 4px 6px #0000001a}.auth-form h2{text-align:center;color:#646cff;margin-top:0;margin-bottom:1.5rem}.form-group{text-align:left;margin-bottom:1rem}.form-group label{color:#ffffffde;margin-bottom:.5rem;font-weight:500;display:block}.form-group input{color:#ffffffde;box-sizing:border-box;background-color:#ffffff0d;border:1px solid #fff3;border-radius:6px;width:100%;padding:.75rem;font-family:inherit;font-size:1rem}.form-group input:focus{background-color:#ffffff14;border-color:#646cff;outline:none}.form-group input:disabled{opacity:.5;cursor:not-allowed}.btn-primary{color:#fff;background-color:#646cff;border:none;width:100%;margin-top:1rem;padding:.75rem;font-weight:600}.btn-primary:hover:not(:disabled){background-color:#535bf2}.btn-secondary{color:#fff;background-color:#f44336;border:none}.btn-secondary:hover:not(:disabled){background-color:#d32f2f}.btn-google{color:#333;background-color:#fff;border:1px solid #ddd;width:100%;margin-bottom:.75rem;padding:.75rem;font-weight:600}.btn-google:hover:not(:disabled){background-color:#f5f5f5;border-color:#646cff}.btn-apple{color:#fff;background-color:#000;border:1px solid #000;width:100%;padding:.75rem;font-weight:600}.btn-apple:hover:not(:disabled){background-color:#333;border-color:#646cff}.divider{text-align:center;color:#ffffff80;margin:1.5rem 0;position:relative}.divider:before,.divider:after{content:"";background-color:#fff3;width:40%;height:1px;position:absolute;top:50%}.divider:before{left:0}.divider:after{right:0}.switch-auth{text-align:center;color:#ffffffb3;margin-top:1.5rem}.link-button{color:#646cff;cursor:pointer;font-size:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.link-button:hover{color:#535bf2}.error-message{color:#f44336;text-align:center;background-color:#f443361a;border:1px solid #f443364d;border-radius:6px;margin-bottom:1rem;padding:.75rem}.user-profile{background-color:#ffffff0d;border-radius:12px;max-width:500px;margin:2rem auto;padding:2rem;box-shadow:0 4px 6px #0000001a}.user-info{text-align:left;margin-bottom:1.5rem}.user-info p{word-break:break-all;margin:.75rem 0}.user-info strong{color:#646cff}.app-loading{text-align:center;padding:2rem}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}.auth-form{background-color:#f5f5f5}.form-group label{color:#213547}.form-group input{color:#213547;background-color:#fff;border-color:#ddd}.error-message{background-color:#f443360d}.user-profile{background-color:#f5f5f5}}.layout{background-color:#000;flex-direction:column;min-height:100vh;display:flex}.layout-header{background-color:#000;border-bottom:1px solid #222;padding:0}.layout-nav{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex}.nav-brand{font-size:2rem;font-weight:400}.nav-brand a{color:var(--brand-color,#afd);font-family:var(--brand-font,"Monoton", cursive);letter-spacing:.1em;text-decoration:none}.nav-links{align-items:center;gap:1.5rem;display:flex}.nav-links a{color:#fff;text-decoration:none;transition:color .2s}.nav-links a:hover{color:#646cff}.nav-user{color:#888;text-overflow:ellipsis;white-space:nowrap;max-width:200px;font-size:.9rem;overflow:hidden}.nav-button{color:#646cff;cursor:pointer;background-color:#0000;border:1px solid #646cff;border-radius:4px;padding:.5rem 1rem;font-size:.9rem;transition:background-color .2s,color .2s}.nav-button:hover{color:#fff;background-color:#646cff}.layout-main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem}.mobile-menu-toggle{color:#fff;cursor:pointer;z-index:1001;background:0 0;border:none;padding:.5rem;font-size:1.5rem;display:none}@media (max-width:768px){.mobile-menu-toggle{display:block}.layout-nav{padding:1rem;position:relative}.nav-links{z-index:1000;background-color:#000;border-left:1px solid #222;flex-direction:column;align-items:flex-start;gap:2rem;width:250px;height:100vh;padding:4rem 2rem 2rem;transition:right .3s ease-in-out;position:fixed;top:0;right:-100%}.nav-links.mobile-open{right:0}.nav-user{max-width:180px}.nav-button{width:100%}.layout-main{padding:1rem}}.generator-form{flex-direction:column;gap:1.5rem;display:flex}.generator-form h3{color:var(--brand-color,#afd);margin:0;font-size:1.25rem;font-weight:600}.generator-description{color:#888;margin:0}.scratch-inline-link{color:#afd;font-size:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:.3rem;padding:0;font-family:inherit;transition:color .15s;display:inline-flex}.scratch-inline-link:hover{color:#fff;text-decoration:underline}.mood-input,.hex-input{color:#fff;background-color:#2a2a2a;border:1px solid #444;border-radius:4px;width:100%;padding:.75rem;font-size:1rem}.mood-input:focus,.hex-input:focus{border-color:#646cff;outline:none}.generate-button{color:var(--brand-color,#afd);cursor:pointer;background-color:#0000;border:1px solid #444;border-radius:4px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;transition:all .2s;display:inline-flex}.generate-button:hover:not(:disabled){border-color:var(--brand-color,#afd);background-color:#aaffdd1a}.generate-button:disabled{opacity:.5;cursor:not-allowed}.generator-buttons-row{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.color-count-dropdown{color:#fff;cursor:pointer;appearance:none;background-color:#2a2a2a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;border:1px solid #444;border-radius:4px;padding:.75rem 2.5rem .75rem 1rem;font-size:1rem;font-weight:600;transition:all .2s}.color-count-dropdown:hover:not(:disabled){background-color:#333;border-color:#646cff}.color-count-dropdown:focus{border-color:#646cff;outline:none}.color-count-dropdown:disabled{opacity:.5;cursor:not-allowed}.color-count-dropdown option{color:#fff;background-color:#1a1a1a}.random-button{color:#888;cursor:pointer;background-color:#0000;border:1px solid #444;border-radius:4px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;transition:all .2s;display:inline-flex}.random-button:hover:not(:disabled){color:#fff;background-color:#ffffff0d;border-color:#666}.random-button:disabled{opacity:.5;cursor:not-allowed}.quick-moods{margin-top:1rem}.quick-moods p{color:#888;margin:0 0 .5rem;font-size:.9rem}.mood-chips{flex-wrap:wrap;gap:.5rem;display:flex}.mood-chip{color:#fff;cursor:pointer;background-color:#2a2a2a;border:1px solid #444;border-radius:20px;padding:.5rem 1rem;font-size:.9rem;transition:background-color .2s,border-color .2s}.mood-chip:hover:not(:disabled){background-color:#333;border-color:#646cff}.mood-chip:disabled{opacity:.5;cursor:not-allowed}.color-input-group{align-items:center;gap:1rem;display:flex}.color-picker{cursor:pointer;background-color:#0000;border:1px solid #444;border-radius:4px;width:80px;height:50px}.color-picker::-webkit-color-swatch-wrapper{padding:2px}.color-picker::-webkit-color-swatch{border:none;border-radius:2px}.multi-color-input{margin-bottom:1rem}.color-pickers-row{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.5rem;display:flex}.drag-hint{color:#666;margin:0 0 .5rem;font-size:.8rem}.color-picker-item{cursor:grab;touch-action:none;align-items:center;transition:transform .2s,opacity .2s;display:flex;position:relative}.color-picker-item:active{cursor:grabbing}.color-picker-item.dragging{opacity:.5;transform:scale(.95)}.color-picker-item.drag-over{transform:translate(10px)}.drag-handle{color:#666;letter-spacing:-2px;cursor:grab;-webkit-user-select:none;user-select:none;margin-right:4px;font-size:12px}.drag-handle:active{cursor:grabbing}.color-picker-item .color-picker{width:60px;height:50px}.remove-color-button{color:#fff;cursor:pointer;background-color:#f44;border:2px solid #000;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-size:14px;line-height:1;transition:background-color .2s;display:flex;position:absolute;top:-8px;right:-8px}.remove-color-button:hover:not(:disabled){background-color:#c33}.remove-color-button:disabled{opacity:.5;cursor:not-allowed}.add-color-button{color:#888;cursor:pointer;background-color:#0000;border:2px dashed #444;border-radius:4px;justify-content:center;align-items:center;width:50px;height:50px;font-size:24px;transition:border-color .2s,color .2s;display:flex}.add-color-button:hover:not(:disabled){color:#646cff;border-color:#646cff}.add-color-button:disabled{opacity:.5;cursor:not-allowed}.image-upload{flex-direction:column;gap:1rem;display:flex}.image-source-row{flex-wrap:wrap;gap:.5rem;display:flex}.file-input{display:none}.upload-button{color:#fff;cursor:pointer;background-color:#2a2a2a;border:1px solid #444;border-radius:4px;align-items:center;gap:.4rem;padding:.75rem 2rem;font-size:1rem;transition:background-color .2s,border-color .2s;display:inline-flex}.upload-button:hover:not(:disabled){background-color:#333;border-color:#646cff}.upload-button:disabled{opacity:.5;cursor:not-allowed}.image-url-row{gap:.5rem;display:flex}.image-url-input{color:#fff;background:#1a1a1a;border:1px solid #444;border-radius:4px;flex:1;padding:.6rem .75rem;font-size:.9rem}.image-url-input::placeholder{color:#666}.image-url-input:focus{border-color:#646cff;outline:none}.image-url-error{color:#ff6b6b;margin:0;font-size:.8rem}.image-hint{color:#666;margin:0;font-size:.8rem}.image-preview{margin-top:1rem}.image-preview img{border:1px solid #444;border-radius:4px;max-width:100%;max-height:300px}.palette-generator{background-color:#1a1a1a;border:1px solid #333;border-radius:8px;overflow:hidden}.generator-tabs{border-bottom:1px solid #333;display:flex}.tab{color:#888;cursor:pointer;background-color:#0000;border:none;flex:1;padding:1rem;font-size:1rem;transition:background-color .2s,color .2s}.tab:hover{color:#fff;background-color:#252525}.tab.active{color:#646cff;background-color:#2a2a2a;border-bottom:2px solid #646cff}.generator-content{padding:2rem}.color-swatch{flex-direction:column;align-items:center;display:flex}.swatch-color{aspect-ratio:1;cursor:pointer;border:1px solid #333;border-radius:8px;justify-content:center;align-items:center;width:100%;transition:transform .2s,box-shadow .2s;display:flex}.swatch-color:hover{transform:scale(1.03);box-shadow:0 4px 16px #0006}.swatch-hex{opacity:0;text-shadow:0 1px 2px #0000004d;font-family:monospace;font-size:.9rem;font-weight:500;transition:opacity .2s}.swatch-color:hover .swatch-hex,.swatch-hex.copied{opacity:1}.swatch-label{color:#888;text-transform:capitalize;text-align:center;margin-top:.5rem;font-size:.8rem}.contrast-info{color:#888;text-align:center;margin-top:.5rem;font-size:.75rem}@media (max-width:768px){.swatch-color{aspect-ratio:auto;min-height:12em}.swatch-label{margin-top:.75rem;margin-bottom:.5rem}}.editable-swatch,.editable-swatch .swatch-color{position:relative}.edit-color-label{cursor:pointer;align-items:center;display:flex;position:absolute;top:.5rem;right:.5rem}.edit-indicator-visible{color:#fff;background:#0009;border-radius:4px;align-items:center;gap:.25rem;padding:.35rem .6rem;font-size:.75rem;transition:background-color .2s;display:flex}.edit-color-label:hover .edit-indicator-visible{background:#000c}.swatch-color-picker{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.palette-display{width:100%}.palette-section{margin-bottom:4.5rem}.palette-section:last-child{margin-bottom:0}.section-title{color:#888;text-transform:uppercase;letter-spacing:.05em;margin:0 0 1.5rem;padding-bottom:50px;font-size:.875rem;font-weight:600}.editable-hint{color:#666;text-transform:none;letter-spacing:normal;margin-left:.5rem;font-size:.75rem;font-weight:400}.swatches-grid{justify-content:center;gap:1rem;padding:.5rem;display:flex}.swatches-grid .color-swatch{flex:1;min-width:80px;max-width:140px}.derived-grid{justify-content:center}.derived-grid .color-swatch{flex:none;width:120px}.derived-section{border-top:1px solid #333;padding-top:1.5rem;padding-bottom:3rem}@media (max-width:768px){.swatches-grid{flex-direction:column;gap:8rem;padding:3em}.swatches-grid .color-swatch{flex:none;width:100%;max-width:none;min-height:120px}.derived-grid .color-swatch{width:100%;max-width:none}.section-title{margin-bottom:1rem;padding-bottom:20px}.palette-section{margin-bottom:3rem}}.hero-palette{z-index:1;border-radius:8px;width:100%;height:55vh;min-height:300px;max-height:500px;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #00000080}.hero-palette-loading{background:linear-gradient(90deg,#111 0%,#222 50%,#111 100%) 0 0/200% 100%;animation:1.5s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.hero-color-block{cursor:pointer;flex:1;justify-content:center;align-items:flex-start;height:100%;transition:flex .3s;display:flex;position:relative}.hero-color-block:hover{flex:1.5}.hero-hex-tooltip{letter-spacing:.05em;opacity:0;cursor:pointer;-webkit-user-select:none;user-select:none;background:#0006;border-radius:4px;padding:.5rem .75rem;font-family:Monaco,Menlo,monospace;font-size:.875rem;font-weight:600;transition:opacity .2s,transform .2s;position:absolute;top:1rem;transform:translateY(-10px)}.hero-color-block:hover .hero-hex-tooltip{opacity:1;transform:translateY(0)}.hero-hex-tooltip:hover{background:#0009}.hero-hex-tooltip:active{transform:scale(.95)}.home{max-width:900px;margin:0 auto}.hero-wrapper{border-radius:8px;margin-bottom:3rem;position:relative;overflow:hidden}.home-header{text-align:center;z-index:2;text-shadow:0 4px 12px #0009;width:90%;position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%)}.home-header h1{color:#fff;margin-bottom:1rem;font-size:3rem;font-weight:800}.hero-title-button{color:#fff;cursor:pointer;text-shadow:0 4px 12px #0009;background:0 0;border:none;margin-bottom:.25rem;padding:0;font-family:inherit;font-size:3rem;font-weight:800;transition:transform .2s,text-shadow .2s}.hero-title-button:hover{text-shadow:0 6px 20px #000c;transform:scale(1.02)}.hero-title-button:active{transform:scale(.98)}.home-header p{color:#f0f0f0;margin-top:0;font-size:1.25rem;font-weight:500}.hero-actions{justify-content:center;gap:.6rem;margin-top:.75rem;display:flex}.hero-action-button{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f0f0f0;cursor:pointer;text-shadow:none;background:#00000073;border:1px solid #ffffff40;border-radius:6px;align-items:center;gap:.4rem;padding:.45rem 1rem;font-family:inherit;font-size:.85rem;transition:all .2s;display:inline-flex}.hero-action-button i{font-size:.8rem}.hero-action-button:hover:not(:disabled){color:#fff;background:#0009;border-color:#ffffff73}.hero-action-button:active:not(:disabled){transform:scale(.96)}.hero-action-button:disabled{opacity:.5;cursor:not-allowed}.hero-like-button.liked{color:#e91e63;border-color:#e91e6380}.hero-save-button.saved{color:#4caf50;border-color:#4caf5080}.palette-result{background-color:#111;border:1px solid #222;border-radius:8px;margin-top:3rem;padding:2rem}.palette-result h2{color:var(--brand-color,#afd);margin-top:0;margin-bottom:.5rem}.palette-actions{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2rem;display:flex}.palette-actions .action-button{color:#888;cursor:pointer;background-color:#0000;border:1px solid #444;border-radius:4px;align-items:center;gap:.5rem;padding:.6rem 1.25rem;font-size:.9rem;transition:all .2s;display:inline-flex}.palette-actions .action-button i{font-size:.85rem}.palette-actions .action-button:hover:not(:disabled){color:#fff;background-color:#ffffff0d;border-color:#666}.palette-actions .action-button:disabled{opacity:.5;cursor:not-allowed}.palette-actions .like-button.liked{color:#e91e63;border-color:#e91e63}.palette-actions .save-button.saved{color:#4caf50;border-color:#4caf50}.palette-actions .compose-button:hover:not(:disabled),.palette-actions .pattern-button:hover:not(:disabled),.palette-actions .design-button:hover:not(:disabled){color:#afd;border-color:#afd}.browse-page{max-width:1200px;margin:0 auto;padding:2rem 1rem}.browse-header{margin-bottom:2rem}.browse-header h1{color:#fff;margin:0 0 1.5rem;font-size:2rem}.browse-filters{flex-wrap:wrap;gap:.5rem;display:flex}.filter-button{color:#aaa;cursor:pointer;background:0 0;border:1px solid #333;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;transition:all .2s}.filter-button:hover{color:#fff;border-color:#555}.filter-button.active{color:#000;background:#fff;border-color:#fff}.browse-loading,.browse-error,.browse-empty{text-align:center;color:#888;padding:3rem}.browse-error button{color:#fff;cursor:pointer;background:#333;border:none;border-radius:4px;margin-top:1rem;padding:.5rem 1rem}.palette-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;display:grid}.palette-card{cursor:pointer;background:#111;border:1px solid #222;border-radius:8px;transition:transform .2s,border-color .2s;overflow:hidden}.palette-card:hover{border-color:#444;transform:translateY(-4px)}.palette-colors{height:120px;display:flex}.palette-color-strip{flex:1;height:100%;transition:flex .2s}.palette-card:hover .palette-color-strip:hover{flex:1.5}.palette-info{padding:1rem}.palette-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin:0 0 .5rem;font-size:1rem;font-weight:600;overflow:hidden}.palette-stats{color:#888;justify-content:space-between;align-items:center;font-size:.85rem;display:flex}.palette-stats .likes{align-items:center;gap:.25rem;display:flex}.browse-like-button{color:#888;cursor:pointer;background:0 0;border:1px solid #444;border-radius:4px;align-items:center;gap:.3rem;padding:.2rem .5rem;font-size:.8rem;transition:all .15s;display:flex}.browse-like-button:hover,.browse-like-button.liked{color:#ff6b8a;border-color:#ff6b8a}.browse-like-button:disabled{opacity:.5;cursor:default}.copy-id-button{color:#888;cursor:pointer;background:0 0;border:1px solid #444;border-radius:4px;padding:.15rem .5rem;font-size:.7rem;transition:all .15s}.copy-id-button:hover{color:#afd;border-color:#afd}.delete-palette-button{color:#888;cursor:pointer;background:0 0;border:1px solid #444;border-radius:4px;padding:.2rem .5rem;font-size:.8rem;transition:all .15s}.delete-palette-button:hover{color:#f44;border-color:#f44}@media (max-width:600px){.browse-page{padding:1rem}.browse-header h1{font-size:1.5rem}.palette-grid{grid-template-columns:1fr}.palette-colors{height:100px}}.login-page{justify-content:center;align-items:center;min-height:80vh;display:flex}.login-container{text-align:center;background-color:#1a1a1a;border:1px solid #333;border-radius:8px;width:100%;max-width:400px;padding:2rem}.login-container h1{margin-bottom:.5rem;font-size:2rem}.login-subtitle{color:#888;margin-bottom:2rem}.login-form{text-align:left}.palette-editor{margin:1.5rem 0}.palette-editor-hint{color:#666;text-align:center;margin-bottom:1rem;font-size:.82rem}.palette-editor-list{flex-direction:column;gap:.5rem;display:flex}.palette-editor-row{background:#111;border:1px solid #2a2a2a;border-radius:8px;align-items:center;gap:.75rem;padding:.5rem .75rem;transition:border-color .15s,opacity .15s,background-color .15s;display:flex}.palette-editor-row.is-dragging{opacity:.35;cursor:grabbing}.palette-editor-row.drag-over{border-color:var(--brand-color,#afd);background-color:#0d1f17}.editor-drag-handle{color:#444;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;flex-shrink:0;padding:0 .25rem;font-size:1rem;transition:color .15s}.palette-editor-row:hover .editor-drag-handle{color:#888}.editor-drag-handle:active{cursor:grabbing}.editor-swatch-label{cursor:pointer;flex:1;min-width:0;display:block;position:relative}.editor-swatch-fill{border-radius:6px;justify-content:center;align-items:center;gap:.5rem;width:100%;height:3.25rem;font-family:monospace;font-size:.85rem;transition:filter .15s;display:flex;position:relative;overflow:hidden}.editor-swatch-label:hover .editor-swatch-fill{filter:brightness(1.1)}.editor-hex{pointer-events:none;font-weight:600}.editor-edit-hint{opacity:.7;pointer-events:none;font-size:.75rem}.editor-color-input{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.editor-role{color:#777;text-align:right;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;width:6rem;font-size:.8rem;overflow:hidden}.editor-delete-btn{color:#555;cursor:pointer;background:0 0;border:1px solid #333;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;transition:color .15s,border-color .15s;display:flex}.editor-delete-btn:hover:not(:disabled){color:#ff6b6b;border-color:#ff6b6b}.editor-delete-btn:disabled{opacity:.25;cursor:not-allowed}@media (max-width:480px){.editor-role{display:none}}.color-export-table-container{background-color:#1e1e1e80;border-radius:8px;margin-top:2rem;padding:1.5rem}.export-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.export-header h3{color:#fff;margin:0;font-size:1.1rem}.export-csv-button{color:#888;cursor:pointer;background-color:#0000;border:1px solid #444;border-radius:4px;padding:.5rem 1rem;font-size:.85rem;transition:all .2s}.export-csv-button:hover{color:#fff;background-color:#ffffff0d;border-color:#666}.table-wrapper{overflow-x:auto}.color-export-table{border-collapse:collapse;width:100%;font-size:.9rem}.color-export-table th{text-align:left;color:#aaa;white-space:nowrap;border-bottom:2px solid #ffffff1a;padding:.75rem;font-weight:600}.color-export-table td{border-bottom:1px solid #ffffff0d;padding:.5rem .75rem}.swatch-col{width:120px}.swatch-cell{padding:.25rem!important}.color-swatch{border-radius:4px;justify-content:center;align-items:center;width:100px;height:50px;display:flex;box-shadow:0 2px 4px #0003}.swatch-role{text-transform:capitalize;opacity:.9;font-size:.7rem;font-weight:500}.value-cell{vertical-align:middle}.value-cell.clickable{cursor:pointer;transition:background-color .2s}.value-cell.clickable:hover{background-color:#646cff1a}.value-cell code{color:#e0e0e0;white-space:nowrap;background-color:#0003;border-radius:3px;padding:.2rem .4rem;font-family:Fira Code,Consolas,monospace;font-size:.85rem}.info-icon{color:#888;cursor:help;vertical-align:middle;border:1px solid #666;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;margin-left:.35rem;font-size:.6rem;font-style:italic;font-weight:600;display:inline-flex}@media (max-width:768px){.color-export-table-container{padding:1rem}.export-header{flex-direction:column;align-items:flex-start;gap:.75rem}.color-export-table{font-size:.8rem}.color-export-table th,.color-export-table td{padding:.5rem}.color-swatch{width:60px;height:40px}.swatch-role{font-size:.6rem}.value-cell code{padding:.15rem .25rem;font-size:.75rem}}.palette-detail{max-width:900px;margin:0 auto}.palette-detail-header{text-align:center;margin-bottom:2rem}.palette-detail-header h1{color:var(--brand-color,#afd);margin-bottom:.5rem}.palette-metadata{color:#888;margin-bottom:1rem;font-size:.9rem}.palette-explanation{color:#aaa;margin-bottom:1.5rem;font-style:italic}.palette-actions{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:1rem;display:flex}.action-button{color:#888;cursor:pointer;background-color:#0000;border:1px solid #444;border-radius:4px;align-items:center;gap:.5rem;padding:.6rem 1.25rem;font-size:.9rem;transition:all .2s;display:inline-flex}.action-button i{font-size:.85rem}.action-button:hover:not(:disabled){color:#fff;background-color:#ffffff0d;border-color:#666}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-button.active{color:#fff;background-color:#ffffff1a;border-color:#666}.action-button.active:hover:not(:disabled){background-color:#ffffff26}.like-button.active{color:#e91e63;border-color:#e91e63}.action-feedback{color:#fff;background-color:#4caf50;border-radius:4px;margin-top:1rem;padding:.75rem;font-size:.9rem}.action-error{color:#fff;background-color:#ff6b6b;border-radius:4px;margin-top:1rem;padding:.75rem;font-size:.9rem}.save-button.active{color:#4caf50;border-color:#4caf50}.save-button.save-dirty{color:var(--brand-color,#afd);border-color:var(--brand-color,#afd)}.save-dialog-backdrop{z-index:1000;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.save-dialog{text-align:center;background:#111;border:1px solid #333;border-radius:10px;width:calc(100% - 2rem);max-width:400px;padding:2rem}.save-dialog h3{color:#fff;margin:0 0 .5rem;font-size:1.1rem}.save-dialog p{color:#888;margin-bottom:1.5rem;font-size:.9rem}.save-dialog-actions{flex-direction:column;gap:.6rem;display:flex}.save-dialog-btn{color:#ccc;cursor:pointer;background:0 0;border:1px solid #444;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;padding:.7rem 1rem;font-size:.9rem;transition:all .15s;display:flex}.save-dialog-btn:hover:not(:disabled){color:#fff;background:#ffffff0d;border-color:#666}.save-dialog-btn.primary{border-color:var(--brand-color,#afd);color:var(--brand-color,#afd)}.save-dialog-btn.primary:hover:not(:disabled){background:#aaffdd14}.save-dialog-btn.cancel{color:#555;border-color:#0000}.save-dialog-btn.cancel:hover:not(:disabled){color:#888;background:0 0}.palette-detail-error{text-align:center;padding:3rem}.palette-detail-error h1{color:#ff6b6b;margin-bottom:1rem}.palette-detail-error p{color:#888}.palette-detail-loading{flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:4rem;display:flex}.loading-spinner{border:3px solid #646cff33;border-top-color:#646cff;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.palette-detail-loading p{color:#888;font-size:1rem}.compose-page{max-width:900px;margin:0 auto;padding:2rem 1rem 4rem}.compose-header h1{color:#fff;margin:0 0 .5rem;font-size:2rem}.compose-header h1 i{color:var(--brand-color,#afd);margin-right:.3rem}.compose-subtitle{color:#888;margin:0 0 1rem;font-size:.9rem;line-height:1.5}.key-badge{color:#afd;background:#aaffdd0f;border:1px solid #afd3;border-radius:20px;align-items:center;gap:.5rem;margin-bottom:1.2rem;padding:.4rem .9rem;font-size:.85rem;display:inline-flex}.key-badge i{opacity:.7;font-size:.75rem}.key-badge strong{text-transform:capitalize}.harmonize-btn{color:#afd;cursor:pointer;background:0 0;border:1px solid #aaffdd4d;border-radius:4px;margin-left:.5rem;padding:.2rem .6rem;font-size:.75rem;transition:all .15s}.harmonize-btn:hover{background:#aaffdd1a}.preset-panel{background:#111;border:1px solid #222;border-radius:10px;margin-bottom:1.5rem;padding:1rem}.preset-key-select{align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.key-color-swatch-wrapper{cursor:pointer;flex-shrink:0;display:inline-block;position:relative}.key-color-swatch{border:2px solid #fff3;border-radius:6px;flex-shrink:0;width:28px;height:28px;transition:background-color .3s}.key-color-input{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.preset-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.5rem;display:grid}.preset-btn{color:#ccc;cursor:pointer;text-align:left;background:0 0;border:1px solid #333;border-radius:6px;flex-direction:column;align-items:flex-start;padding:.6rem .8rem;font-size:.8rem;transition:all .15s;display:flex}.preset-btn:hover{color:#afd;border-color:#afd}.preset-btn.active{color:#afd;background:#aaffdd1a;border-color:#afd}.preset-btn.active .preset-desc{color:#8ca}.preset-name{font-size:.82rem;font-weight:600}.preset-desc{color:#666;margin-top:.15rem;font-size:.7rem}.preset-btn:hover .preset-desc{color:#8ca}.compose-toolbar{background:#111;border:1px solid #222;border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:.75rem 1rem;display:flex}.toolbar-group{align-items:center;gap:.5rem;display:flex}.toolbar-btn{color:#ccc;cursor:pointer;background:0 0;border:1px solid #333;border-radius:6px;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.85rem;transition:all .15s;display:inline-flex}.toolbar-btn:hover{color:#afd;border-color:#afd}.toolbar-btn.playing{color:#e63946;border-color:#e63946}.section-group{border-left:1px solid #333;padding-left:.75rem}.section-label{text-transform:uppercase;letter-spacing:.06em;color:#555;margin-right:.1rem;font-size:.7rem}.section-btn{padding:.4rem .75rem!important;font-size:.8rem!important}.tempo-label{color:#888;align-items:center;gap:.5rem;font-size:.85rem;display:flex}.tempo-label input[type=range]{accent-color:#afd;width:100px}.tempo-value{text-align:right;color:#afd;font-variant-numeric:tabular-nums;min-width:60px}.color-bar{border:1px solid #222;border-radius:8px;height:40px;margin-bottom:1.5rem;display:flex;overflow:hidden}.color-bar-swatch{cursor:pointer;flex:1;transition:flex .3s,outline .3s,filter .15s}.color-bar-swatch:hover{filter:brightness(1.2);outline-offset:-2px;outline:2px solid #ffffff80}.color-bar-swatch.active{outline-offset:-2px;outline:2px solid #fff;flex:2}.step-list{flex-direction:column;gap:.75rem;display:flex}.step-card{background:#111;border:1px solid #222;border-radius:10px;transition:border-color .25s,box-shadow .25s;display:flex;overflow:hidden}.step-card.active{border-color:#afd;box-shadow:0 0 16px #aaffdd26}.step-color{cursor:pointer;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;width:80px;min-height:110px;transition:filter .15s;display:flex;position:relative}.step-color:hover{filter:brightness(1.15)}.step-color:hover .step-play-icon{opacity:1}.step-play-icon{color:#fffc;opacity:0;text-shadow:0 1px 4px #0009;font-size:.9rem;transition:opacity .15s}.step-number{color:#ffffffb3;text-shadow:0 1px 4px #00000080;font-size:1.4rem;font-weight:700}.color-picker-input{cursor:pointer;background:0 0;border:none;width:32px;height:24px;padding:0}.color-picker-input::-webkit-color-swatch-wrapper{padding:0}.color-picker-input::-webkit-color-swatch{border:1px solid #ffffff4d;border-radius:4px}.step-details{flex-direction:column;flex:1;gap:.5rem;padding:.75rem 1rem;display:flex}.step-chord-row{align-items:center;gap:.5rem;display:flex}.step-chord-label{color:#fff;letter-spacing:.02em;font-size:1.5rem;font-weight:700}.suggest-toggle{color:#555;cursor:pointer;background:0 0;border:1px solid #333;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.75rem;transition:all .15s;display:flex}.suggest-toggle:hover,.suggest-toggle.open{color:#f4a261;background:#f4a26114;border-color:#f4a261}.suggestions-panel{flex-wrap:wrap;gap:.35rem;padding:.4rem 0;display:flex}.suggestion-btn{cursor:pointer;text-align:left;background:#f4a2610a;border:1px solid #333;border-radius:5px;flex-direction:column;padding:.35rem .65rem;transition:all .15s;display:flex}.suggestion-btn:hover{background:#f4a2611a;border-color:#f4a261}.suggestion-label{color:#ddd;font-size:.85rem;font-weight:600}.suggestion-reason{color:#888;margin-top:.1rem;font-size:.65rem}.suggestion-btn:hover .suggestion-reason{color:#f4a261}.step-controls{flex-wrap:wrap;gap:.5rem;display:flex}.step-field{flex-direction:column;gap:.15rem;display:flex}.step-field span{text-transform:uppercase;letter-spacing:.06em;color:#666;font-size:.65rem}.step-field select{color:#ccc;cursor:pointer;background:#0a0a0a;border:1px solid #333;border-radius:4px;padding:.3rem .5rem;font-size:.8rem}.step-field select:hover{border-color:#555}.step-meta{color:#555;gap:1rem;font-size:.75rem;display:flex}.hex-label{font-family:monospace}.step-remove{color:#555;cursor:pointer;background:0 0;border:none;border-left:1px solid #222;justify-content:center;align-items:center;width:36px;font-size:.9rem;transition:color .15s,background .15s;display:flex}.step-remove:hover{color:#e63946;background:#e639461a}.compose-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;display:flex}.back-link{color:#888;cursor:pointer;background:0 0;border:none;padding:0;font-size:.9rem;text-decoration:none;transition:color .15s}.back-link:hover{color:#afd}.compose-nav-buttons{gap:.5rem;display:flex}.compose-nav-btn{color:#aaa;cursor:pointer;background:0 0;border:1px solid #444;border-radius:6px;align-items:center;gap:.4rem;padding:.45rem 1rem;font-family:inherit;font-size:.85rem;transition:all .2s;display:inline-flex}.compose-nav-btn:hover{color:#afd;background:#aaffdd0f;border-color:#afd}.compose-save-feedback{text-align:center;color:#afd;background:#aaffdd1a;border:1px solid #aaffdd4d;border-radius:6px;margin-top:.75rem;padding:.5rem 1rem;font-size:.85rem;animation:4s ease-in-out fadeInOut}@keyframes fadeInOut{0%{opacity:0}10%{opacity:1}80%{opacity:1}to{opacity:0}}@media (max-width:600px){.compose-page{padding:1rem .75rem 3rem}.compose-header h1{font-size:1.5rem}.compose-toolbar{flex-direction:column;align-items:stretch}.toolbar-group{flex-wrap:wrap}.preset-grid{grid-template-columns:1fr}.step-color{width:60px}.step-chord-label{font-size:1.2rem}.step-controls{gap:.35rem}}.pattern-page{max-width:900px;margin:0 auto;padding:2rem 1rem 4rem}.pattern-header h1{color:#fff;margin:0 0 .5rem;font-size:2rem}.pattern-header h1 i{color:var(--brand-color,#afd);margin-right:.3rem}.pattern-subtitle{color:#888;margin:0 0 1.5rem;font-size:.9rem;line-height:1.5}.pattern-type-grid{flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;display:flex}.ptype-btn{color:#aaa;cursor:pointer;background:#111;border:1px solid #333;border-radius:8px;flex-direction:column;align-items:center;gap:.25rem;min-width:64px;padding:.5rem .75rem;font-family:inherit;font-size:.7rem;transition:all .15s;display:flex}.ptype-btn i{font-size:1rem}.ptype-btn:hover{color:#fff;background:#1a1a1a;border-color:#555}.ptype-btn.active{color:#afd;background:#aaffdd0f;border-color:#afd}.icon-rotate-45{transform:rotate(-45deg)}.pattern-canvas-wrap{background:#111;border:1px solid #222;border-radius:8px;width:100%;margin-bottom:1.5rem;overflow:hidden}.pattern-canvas-wrap canvas{width:100%;display:block}.pattern-controls{background:#111;border:1px solid #222;border-radius:10px;flex-direction:column;gap:1rem;margin-bottom:1.5rem;padding:1rem;display:flex}.ctrl-row{align-items:center;gap:.75rem;display:flex}.ctrl-row label{color:#888;min-width:72px;font-size:.85rem}.ctrl-row input[type=range]{accent-color:#afd;flex:1}.ctrl-value{color:#aaa;text-align:right;min-width:44px;font-family:monospace;font-size:.8rem}.toggle-group{border:1px solid #333;border-radius:6px;gap:0;display:flex;overflow:hidden}.toggle-btn{color:#888;cursor:pointer;background:0 0;border:none;padding:.35rem .85rem;font-family:inherit;font-size:.8rem;transition:all .15s}.toggle-btn+.toggle-btn{border-left:1px solid #333}.toggle-btn:hover:not(:disabled){color:#fff;background:#ffffff0a}.toggle-btn.active{color:#afd;background:#aaffdd14}.toggle-btn.disabled,.toggle-btn:disabled{opacity:.35;cursor:not-allowed}.pattern-weights{background:#111;border:1px solid #222;border-radius:10px;margin-bottom:1.5rem;padding:1rem}.weights-head{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.weights-head h3{color:#ddd;margin:0;font-size:1rem}.reset-weights-btn{color:#aaa;cursor:pointer;background:0 0;border:1px solid #444;border-radius:4px;align-items:center;gap:.35rem;padding:.3rem .7rem;font-family:inherit;font-size:.8rem;transition:all .15s;display:inline-flex}.reset-weights-btn:hover{color:#afd;border-color:#afd}.weight-bar{cursor:default;touch-action:none;-webkit-user-select:none;user-select:none;border:1px solid #333;border-radius:6px;height:36px;display:flex;overflow:hidden}.weight-segment{min-width:2px;height:100%}.weight-handle{cursor:col-resize;z-index:1;background:#fff3;flex-shrink:0;width:6px;height:100%;transition:background .15s;position:relative}.weight-handle:hover,.weight-handle:active{background:#aaffddb3}.pattern-colors{background:#111;border:1px solid #222;border-radius:10px;margin-bottom:1.5rem;padding:1rem}.colors-head{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.colors-head h3{color:#ddd;margin:0;font-size:1rem}.add-color-btn{color:#aaa;cursor:pointer;background:0 0;border:1px solid #444;border-radius:4px;align-items:center;gap:.35rem;padding:.3rem .7rem;font-family:inherit;font-size:.8rem;transition:all .15s;display:inline-flex}.add-color-btn:hover{color:#afd;border-color:#afd}.color-list{flex-wrap:wrap;gap:.5rem;display:flex}.color-item{cursor:grab;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:6px;align-items:center;gap:.4rem;padding:.3rem .5rem;transition:opacity .15s,border-color .15s,transform .15s;display:flex}.color-item:active{cursor:grabbing}.color-item.dragging{opacity:.35}.color-item.drag-over{border-color:#afd;transform:scale(1.04)}.color-drag-handle{color:#444;cursor:grab;flex-shrink:0;font-size:.75rem}.color-item:hover .color-drag-handle{color:#888}.pattern-page .color-swatch{cursor:pointer;border:1px solid #ffffff26;border-radius:4px;flex-shrink:0;width:28px;height:28px;display:block;position:relative;overflow:hidden}.pattern-page .color-swatch input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.color-hex{color:#999;font-family:monospace;font-size:.75rem}.color-remove{color:#555;cursor:pointer;background:0 0;border:none;padding:0 .15rem;font-size:1rem;line-height:1;transition:color .15s}.color-remove:hover:not(:disabled){color:#e63946}.color-remove:disabled{opacity:.3;cursor:not-allowed}.pattern-actions{justify-content:center;gap:.75rem;display:flex}.download-btn{color:#afd;cursor:pointer;background:0 0;border:1px solid #afd;border-radius:6px;align-items:center;gap:.5rem;padding:.6rem 1.5rem;font-family:inherit;font-size:.9rem;transition:all .2s;display:inline-flex}.download-btn:hover{background:#aaffdd1a}@media (max-width:600px){.pattern-page{padding:1rem .75rem 3rem}.pattern-header h1{font-size:1.5rem}.pattern-type-grid{gap:.35rem}.ptype-btn{min-width:52px;padding:.4rem .5rem;font-size:.65rem}.ptype-btn i{font-size:.85rem}.ctrl-row{flex-wrap:wrap}.ctrl-row label{min-width:auto}.color-hex{display:none}}.scratch-page{max-width:900px;margin:0 auto;padding:2rem 1rem 4rem}.scratch-header h1{color:#fff;margin:0 0 .5rem;font-size:2rem}.scratch-header h1 i{color:var(--brand-color,#afd);margin-right:.3rem}.scratch-subtitle{color:#888;margin:0 0 1.5rem;font-size:.9rem;line-height:1.5}.scratch-start{flex-direction:column;align-items:center;gap:1.5rem;display:flex}.start-picker-row{align-items:center;gap:1.25rem;display:flex}.start-swatch-large{cursor:pointer;border:2px solid #ffffff26;border-radius:12px;flex-shrink:0;width:80px;height:80px;transition:border-color .15s;display:block;position:relative;overflow:hidden}.start-swatch-large:hover{border-color:#afd}.start-swatch-large input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.start-picker-info{flex-direction:column;gap:.6rem;display:flex}.start-hex{color:#ccc;font-family:monospace;font-size:1.2rem}.start-divider{color:#555;align-items:center;gap:1rem;width:100%;max-width:500px;font-size:.8rem;display:flex}.start-divider:before,.start-divider:after{content:"";background:#333;flex:1;height:1px}.preset-grid{flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:560px;display:flex}.preset-swatch{cursor:pointer;border:2px solid #0000;border-radius:8px;justify-content:center;align-items:flex-end;width:56px;height:56px;padding:0 0 3px;font-family:inherit;transition:all .15s;display:flex;position:relative}.preset-swatch:hover{z-index:1;border-color:#afd;transform:scale(1.1)}.preset-label{opacity:0;text-shadow:0 1px 3px #00000080;font-family:monospace;font-size:.5rem;transition:opacity .15s}.preset-swatch:hover .preset-label{opacity:1}.scratch-palette-strip{border:1px solid #333;border-radius:10px;gap:0;min-height:72px;margin-bottom:1.5rem;display:flex;overflow:hidden}.strip-swatch{cursor:pointer;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.2rem;min-width:48px;padding:.5rem .25rem;transition:all .15s;display:flex;position:relative}.strip-swatch:hover{filter:brightness(1.1)}.strip-swatch.focused{outline-offset:-3px;z-index:1;outline:3px solid #afd}.strip-label{opacity:.75;pointer-events:none;font-family:monospace;font-size:.6rem}.strip-remove{cursor:pointer;opacity:0;background:0 0;border:none;padding:0;font-size:1rem;line-height:1;transition:opacity .15s;position:absolute;top:2px;right:4px}.strip-swatch:hover .strip-remove{opacity:.8}.strip-remove:hover{opacity:1!important}.strip-edit{cursor:pointer;opacity:0;align-items:center;padding:4px;font-size:.65rem;line-height:1;transition:opacity .15s;display:flex;position:absolute;top:2px;left:4px}.strip-edit input[type=color]{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.strip-swatch:hover .strip-edit{opacity:.8}.strip-edit:hover{opacity:1!important}.strip-focus-badge{opacity:.6;font-size:.6rem;position:absolute;bottom:3px;right:5px}.scratch-suggestions{flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex}.suggestion-group{background:#111;border:1px solid #222;border-radius:10px;padding:.75rem 1rem}.suggestion-group-label{color:#999;margin:0;font-size:.85rem;font-weight:500}.suggestion-group-label i{color:#afd;margin-right:.3rem;font-size:.8rem}.suggestion-group-head{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.save-group-btn{color:#aaa;cursor:pointer;background:0 0;border:1px solid #444;border-radius:5px;flex-shrink:0;align-items:center;gap:.35rem;padding:.25rem .65rem;font-family:inherit;font-size:.75rem;transition:all .15s;display:inline-flex}.save-group-btn:hover:not(:disabled){color:#afd;border-color:#afd}.save-group-btn:disabled{opacity:.5;cursor:not-allowed}.save-group-btn.saved{color:#afd;background:#aaffdd14;border-color:#afd}.scratch-btn.saved{color:#afd;background:#aaffdd1a;border-color:#afd}.suggestion-swatches{flex-wrap:wrap;gap:.4rem;display:flex}.suggestion-swatch{cursor:pointer;border:2px solid #0000;border-radius:8px;justify-content:center;align-items:flex-end;width:52px;height:52px;padding:0 0 2px;font-family:inherit;transition:all .15s;display:flex;position:relative}.suggestion-swatch:hover{z-index:1;border-color:#afd;transform:scale(1.1)}.swatch-label{opacity:0;text-shadow:0 1px 3px #00000080;font-family:monospace;font-size:.45rem;transition:opacity .15s}.suggestion-swatch:hover .swatch-label{opacity:1}.scratch-manual-row{background:#111;border:1px solid #222;border-radius:10px;align-items:center;gap:.65rem;margin-bottom:1.5rem;padding:.75rem 1rem;display:flex}.manual-swatch{cursor:pointer;border:1px solid #ffffff26;border-radius:6px;flex-shrink:0;width:36px;height:36px;display:block;position:relative;overflow:hidden}.manual-swatch input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.manual-hex{color:#999;min-width:64px;font-family:monospace;font-size:.8rem}.scratch-btn{color:#afd;cursor:pointer;background:0 0;border:1px solid #afd;border-radius:6px;align-items:center;gap:.45rem;padding:.5rem 1.1rem;font-family:inherit;font-size:.85rem;transition:all .2s;display:inline-flex}.scratch-btn:hover{background:#aaffdd1a}.scratch-btn.primary{background:#aaffdd1f}.scratch-btn.primary:hover{background:#aaffdd38}.scratch-btn.secondary{color:#aaa;border-color:#555}.scratch-btn.secondary:hover{color:#ddd;background:#ffffff0a;border-color:#888}.scratch-btn.danger{color:#e63946;border-color:#e63946}.scratch-btn.danger:hover{background:#e639461a}.scratch-btn.small{padding:.35rem .75rem;font-size:.8rem}.scratch-actions{flex-wrap:wrap;justify-content:center;gap:.65rem;display:flex}@media (max-width:600px){.scratch-page{padding:1rem .75rem 3rem}.scratch-header h1{font-size:1.5rem}.start-swatch-large{width:60px;height:60px}.preset-grid{gap:.35rem}.preset-swatch{width:44px;height:44px}.strip-label{display:none}.strip-edit,.strip-remove{opacity:.8;justify-content:center;align-items:center;min-width:28px;min-height:28px;padding:6px;font-size:.85rem;display:flex}.strip-remove{font-size:1.2rem}.suggestion-swatch{width:42px;height:42px}.swatch-label,.manual-hex{display:none}.scratch-actions{flex-direction:column}.scratch-actions .scratch-btn{justify-content:center}}.font-picker{flex-direction:column;flex:1;gap:.3rem;min-width:200px;display:flex;position:relative}.font-picker-label{color:#aaa;letter-spacing:.02em;font-size:.8rem}.font-picker-trigger{color:#fff;cursor:pointer;background:#111;border:1px solid #333;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;min-height:42px;padding:.55rem .75rem;transition:border-color .15s;display:flex}.font-picker-trigger:hover{border-color:#555}.font-picker-trigger-preview{text-overflow:ellipsis;white-space:nowrap;font-size:1rem;overflow:hidden}.font-picker-arrow{color:#777;flex-shrink:0;font-size:.65rem}.font-picker-dropdown{z-index:100;background:#141414;border:1px solid #333;border-radius:10px;flex-direction:column;min-width:320px;max-height:440px;animation:.15s fontPickerSlideIn;display:flex;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden;box-shadow:0 12px 40px #0009}@keyframes fontPickerSlideIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.font-picker-search{border-bottom:1px solid #222;flex-shrink:0;align-items:center;gap:8px;padding:8px 12px;display:flex}.font-picker-search-icon{color:#555;flex-shrink:0;font-size:.8rem}.font-picker-search-input{color:#eee;background:0 0;border:none;outline:none;flex:1;font-size:.85rem}.font-picker-search-input::placeholder{color:#555}.font-picker-search-clear{color:#666;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 4px;font-size:.75rem}.font-picker-search-clear:hover{color:#aaa;background:#222}.font-picker-categories{border-bottom:1px solid #222;flex-shrink:0;gap:2px;padding:6px 8px;display:flex;overflow-x:auto}.font-picker-cat{color:#888;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:4px;padding:4px 10px;font-size:.72rem;transition:all .12s;display:flex}.font-picker-cat i{font-size:.65rem}.font-picker-cat:hover{color:#ccc;background:#1a1a1a}.font-picker-cat-active{color:#8bf;background:#88bbff14;border-color:#8bf3}.font-picker-list{flex:1;min-height:0;overflow-y:auto}.font-picker-empty{text-align:center;color:#555;padding:24px 16px;font-size:.85rem}.font-row{cursor:pointer;text-align:left;width:100%;color:inherit;background:0 0;border:none;border-bottom:1px solid #1a1a1a;flex-direction:column;gap:2px;padding:10px 14px;transition:background .1s;display:flex;position:relative}.font-row:hover{background:#1a1a2a}.font-row-selected{background:#88bbff0f}.font-row-selected:hover{background:#88bbff1a}.font-row-info{justify-content:space-between;align-items:center;gap:8px;display:flex}.font-row-name{color:#aaa;font-size:.75rem;font-weight:500}.font-row-selected .font-row-name{color:#8bf}.font-row-category{color:#555;text-transform:uppercase;letter-spacing:.05em;font-size:.6rem}.font-row-preview{color:#eee;text-overflow:ellipsis;white-space:nowrap;font-size:1.15rem;line-height:1.4;overflow:hidden}.font-row-check{color:#8bf;font-size:.75rem;position:absolute;top:10px;right:12px}@media (max-width:600px){.font-picker-dropdown{min-width:unset;max-height:380px}.font-picker-cat span{display:none}.font-picker-cat{padding:6px 8px}.font-picker-cat i{font-size:.8rem}}.design-page{max-width:1000px;margin:0 auto;padding:2rem 1rem}.design-page h1{color:#fff;margin:0 0 .5rem;font-size:2rem}.design-intro{color:#999;margin:0 0 2rem;font-size:.95rem;line-height:1.6}.design-intro a{color:#8bf;text-decoration:none}.design-intro a:hover{text-decoration:underline}.section-hint{color:#666;margin:-.5rem 0 .75rem;font-size:.75rem}.design-color-list{flex-direction:column;gap:6px;display:flex}.design-color-item{background:#111;border:1px solid #222;border-radius:8px;align-items:center;gap:10px;padding:8px 10px;transition:opacity .15s,border-color .15s,transform .15s;display:flex}.design-color-item.dragging{opacity:.4}.design-color-item.drag-over{border-color:#8bf;transform:translate(4px)}.design-drag-handle{color:#555;cursor:grab;font-size:.85rem}.design-drag-handle:active{cursor:grabbing}.design-color-swatch{cursor:pointer;border:1px solid #333;border-radius:6px;flex-shrink:0;width:32px;height:32px;position:relative}.design-color-swatch input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.design-color-hex{color:#aaa;min-width:72px;font-family:monospace;font-size:.85rem}.design-color-role{color:#888;white-space:nowrap;background:#1a1a1a;border-radius:10px;padding:3px 8px;font-size:.72rem}.design-color-remove{color:#555;cursor:pointer;background:0 0;border:none;border-radius:4px;margin-left:auto;padding:4px 6px;font-size:.75rem}.design-color-remove:hover{color:#f66;background:#ff66661a}.design-add-color{color:#666;cursor:pointer;background:0 0;border:1px dashed #333;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:8px;font-size:.8rem;transition:all .15s;display:flex}.design-add-color:hover{color:#aaa;border-color:#555}.theme-controls{flex-direction:column;gap:.75rem;display:flex}.theme-toggle{gap:6px;display:flex}.theme-btn{color:#999;cursor:pointer;background:#111;border:1px solid #333;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:.85rem;transition:all .15s;display:flex}.theme-btn:hover{color:#ccc;border-color:#555}.theme-btn.active{color:#8bf;background:#88bbff14;border-color:#8bf}.theme-btn i{font-size:.8rem}.custom-bg-row{align-items:center;gap:10px;display:flex}.custom-bg-label{color:#aaa;font-size:.85rem}.custom-bg-swatch{cursor:pointer;border:1px solid #333;border-radius:6px;flex-shrink:0;width:28px;height:28px;position:relative}.custom-bg-swatch input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.custom-bg-hex{color:#888;font-family:monospace;font-size:.8rem}.design-no-palette{color:#888;text-align:center;background:#111;border:1px dashed #333;border-radius:8px;margin-bottom:2rem;padding:1rem}.design-section{margin-bottom:2rem}.design-section h2{color:#ddd;margin:0 0 .75rem;font-size:1.1rem}.font-selector{flex-wrap:wrap;gap:.75rem;display:flex}.font-preview{background:#111;border:1px solid #222;border-radius:6px;margin-top:.75rem;padding:.75rem 1rem}.font-preview-heading{color:#fff;margin:0 0 .3rem;font-size:1.3rem}.font-preview-body{color:#aaa;margin:0;font-size:.9rem}.template-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;display:grid}.template-card{cursor:pointer;background:#0a0a0a;border:2px solid #222;border-radius:8px;transition:border-color .2s,transform .15s;overflow:hidden}.template-card:hover{border-color:#555;transform:translateY(-2px)}.template-card.selected{border-color:#8bf}.template-preview{height:160px;position:relative;overflow:hidden}.template-label{color:#ccc;justify-content:space-between;align-items:center;padding:.6rem .75rem;font-size:.85rem;display:flex}.template-label .check{color:#8bf}.preview-top-nav{flex-direction:column;height:100%;display:flex}.preview-top-nav .nav-bar{align-items:center;gap:6px;height:28px;padding:0 8px;display:flex}.preview-top-nav .nav-bar .nav-item{opacity:.7;border-radius:3px;width:24px;height:6px}.preview-top-nav .body-area{flex-direction:column;flex:1;gap:4px;padding:8px;display:flex}.preview-top-nav .body-area .content-line{opacity:.3;border-radius:2px;height:5px}.preview-left-nav{height:100%;display:flex}.preview-left-nav .side-bar{flex-direction:column;gap:4px;width:40px;padding:6px 4px;display:flex}.preview-left-nav .side-bar .side-item{opacity:.7;border-radius:3px;width:100%;height:6px}.preview-left-nav .main-area{flex-direction:column;flex:1;gap:4px;padding:8px;display:flex}.preview-left-nav .main-area .content-line{opacity:.3;border-radius:2px;height:5px}.preview-mobile{justify-content:center;align-items:center;height:100%;padding:8px;display:flex}.preview-mobile .phone-frame{border:2px solid #444;border-radius:10px;flex-direction:column;width:70px;height:130px;display:flex;overflow:hidden}.preview-mobile .phone-status{height:10px}.preview-mobile .phone-content{flex-direction:column;flex:1;gap:3px;padding:4px;display:flex}.preview-mobile .phone-content .content-line{opacity:.3;border-radius:2px;height:4px}.preview-mobile .phone-tab-bar{gap:2px;height:14px;padding:2px;display:flex}.preview-mobile .phone-tab-bar .tab-item{opacity:.7;border-radius:2px;flex:1}.preview-dashboard{flex-direction:column;height:100%;display:flex}.preview-dashboard .dash-header{align-items:center;gap:4px;height:22px;padding:0 8px;display:flex}.preview-dashboard .dash-header .header-item{opacity:.7;border-radius:2px;width:16px;height:5px}.preview-dashboard .dash-body{flex:1;grid-template-columns:1fr 1fr;gap:4px;padding:6px;display:grid}.preview-dashboard .dash-body .card{opacity:.5;border-radius:4px}.preview-landing{flex-direction:column;height:100%;display:flex}.preview-landing .hero-section{flex-direction:column;flex:1.5;justify-content:center;align-items:center;gap:6px;padding:6px;display:flex}.preview-landing .hero-section .hero-title{opacity:.8;border-radius:3px;width:60%;height:8px}.preview-landing .hero-section .hero-btn{opacity:.9;border-radius:4px;width:32px;height:10px}.preview-landing .features-section{flex:1;gap:4px;padding:6px;display:flex}.preview-landing .features-section .feature-box{opacity:.3;border-radius:4px;flex:1}.generate-link-section{background:#111;border:1px solid #222;border-radius:8px;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;display:flex}.generate-link-button{color:#000;cursor:pointer;background:#8bf;border:none;border-radius:8px;padding:.75rem 2rem;font-size:1rem;font-weight:600;transition:background .2s}.generate-link-button:hover{background:#acf}.generate-link-button:disabled{color:#888;cursor:not-allowed;background:#444}.generated-link-row{align-items:center;gap:.5rem;width:100%;max-width:600px;display:flex}.generated-link-input{color:#fff;background:#1a1a1a;border:1px solid #333;border-radius:6px;flex:1;padding:.5rem .75rem;font-family:monospace;font-size:.85rem}.copy-link-button{color:#aaa;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #444;border-radius:6px;padding:.5rem 1rem;font-size:.85rem;transition:all .15s}.copy-link-button:hover{color:#afd;border-color:#afd}.design-nav-buttons{border-top:1px solid #333;justify-content:center;gap:.5rem;margin-top:2rem;padding-top:1.5rem;display:flex}.design-nav-btn{color:#aaa;cursor:pointer;background:0 0;border:1px solid #444;border-radius:6px;align-items:center;gap:.4rem;padding:.45rem 1rem;font-family:inherit;font-size:.85rem;transition:all .2s;display:inline-flex}.design-nav-btn:hover{color:#afd;background:#aaffdd0f;border-color:#afd}@media (max-width:600px){.design-page{padding:1rem}.design-page h1{font-size:1.5rem}.template-grid{grid-template-columns:1fr}.font-selector,.generated-link-row{flex-direction:column}.theme-toggle{flex-wrap:wrap}.design-color-role{display:none}}#root{text-align:center;max-width:1280px;margin:0 auto;padding:2rem}.logo{will-change:filter;height:6em;padding:1.5em;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:20s linear infinite logo-spin}}.card{padding:2em}.read-the-docs{color:#888}