:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#18201d;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#fbfbfb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{background:#fbfbfb;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer;border:0}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #4584ff47}.app-shell{grid-template-columns:248px minmax(0,1fr);min-height:100vh;display:grid}.side-nav{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffd1;border-right:1px solid #e7eaed;flex-direction:column;gap:26px;height:100vh;padding:26px 18px;display:flex;position:sticky;top:0}.brand{color:inherit;background:0 0;align-items:center;gap:12px;text-decoration:none;display:flex}.brand-mark{color:#fff;background:conic-gradient(from 130deg,#ff8c58,#ed5a7e,#4584ff,#7ac7a2,#ffce73,#ff8c58);border-radius:8px;place-items:center;width:46px;height:46px;display:grid;box-shadow:0 18px 36px #29332e29}.brand strong{letter-spacing:0;font-size:20px;display:block}.brand small{color:#7c8782;margin-top:2px;font-size:12px;font-weight:700;display:block}.nav-list{gap:6px;display:grid}.nav-item{color:#6c7670;text-align:left;background:0 0;border-radius:8px;align-items:center;gap:11px;width:100%;height:42px;padding:0 13px;font-size:14px;font-weight:700;display:flex}.nav-item:hover,.nav-item.active{color:#16211c;background:#edf2ee}.side-note{color:#385246;background:#edf7f0;border:1px solid #d8eadc;border-radius:8px;margin-top:auto;padding:16px}.side-note p{margin:10px 0 0;font-size:13px;line-height:1.65}.side-note a{color:#18201d;margin-top:12px;font-size:13px;font-weight:900;text-decoration:none;display:inline-flex}.workspace{min-width:0;padding:30px}.topbar{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px;display:flex}.topbar h1{letter-spacing:0;max-width:760px;margin:0;font-size:clamp(30px,4vw,54px);line-height:1.06}.topbar p{color:#66726c;max-width:620px;margin:13px 0 0;font-size:16px;line-height:1.7}.top-actions{flex-shrink:0;gap:10px;display:flex}.icon-button,.primary-button,.secondary-button,.quiet-button{border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:42px;font-size:14px;font-weight:800;transition:transform .18s,box-shadow .18s,background .18s;display:inline-flex}.icon-button{color:#26312d;background:#fff;border:1px solid #e2e6e4;width:42px}.primary-button{color:#fff;background:#18201d;padding:0 16px;box-shadow:0 16px 32px #18201d2e}.secondary-button{color:#18201d;background:#f1f4f2;border:1px solid #e0e5e2;flex:1;padding:0 12px}.quiet-button{color:#68756f;background:0 0;padding:0 4px 0 12px}.icon-button:hover,.primary-button:hover,.secondary-button:hover{transform:translateY(-1px)}.search-row{grid-template-columns:minmax(0,1fr);align-items:start;gap:14px;margin-bottom:22px;display:grid}.search-action-group{grid-template-columns:minmax(0,1fr) 104px;gap:10px;display:grid;position:relative}.search-box{color:#818b86;background:#fff;border:1px solid #e3e7e5;border-radius:8px;align-items:center;gap:10px;height:48px;padding:0 14px;display:flex;box-shadow:0 10px 28px #1d27230d}.search-box input{color:#18201d;background:0 0;border:0;outline:0;width:100%;font-size:14px}.search-submit{color:#fff;background:#18201d;border:0;border-radius:8px;justify-content:center;align-items:center;gap:7px;height:48px;font-weight:900;display:inline-flex;box-shadow:0 12px 30px #18201d24}.search-submit:disabled{color:#6d7671;box-shadow:none;cursor:not-allowed;background:#e8eeea}.search-hint{color:#7a8580;grid-column:1/-1;font-size:12px}.search-panel{background:#fff;border:1px solid #e9eceb;border-radius:8px;grid-column:1/-1;gap:28px;padding:22px 18px 24px;display:grid;box-shadow:0 24px 70px #1a211e14}.search-panel-head{color:#1f2924;justify-content:space-between;align-items:center;display:flex}.search-panel-head strong{font-size:18px}.search-panel-head button{color:#6e7973;background:0 0;font-size:13px;font-weight:900}.connection-block{gap:14px;display:grid}.connection-block.compact{padding-top:2px}.connection-block h2,.connection-block h3{color:#222927;margin:0;font-size:18px;line-height:1.2}.connection-block h3{font-size:16px}.connection-block p{color:#75817b;margin:0;font-size:13px}.connection-chip-row{flex-wrap:wrap;gap:8px;display:flex}.connection-chip{color:#252c29;background:#fff;border:1px solid #e5e8e7;border-radius:999px;align-items:center;gap:8px;min-height:38px;padding:0 13px;font-size:14px;font-weight:700;display:inline-flex}.connection-chip:hover,.connection-chip.saved{background:#f7faf8;border-color:#dbe3de}.connection-chip span{border:1px solid #0000000f;border-radius:50%;width:15px;height:15px}.connection-chip.plain{padding-inline:17px}.connection-chip small{color:#88948f;font-size:11px}.filter-strip{gap:8px;padding-bottom:2px;display:flex;overflow-x:auto}.filter-chip{color:#66726c;white-space:nowrap;background:#fff;border:1px solid #e2e7e4;border-radius:8px;min-height:38px;padding:0 13px;font-size:13px;font-weight:800}.filter-chip.active{color:#fff;background:#18201d;border-color:#18201d}.content-grid{grid-template-columns:minmax(0,1fr) 386px;align-items:start;gap:22px;display:grid}.right-stack{gap:16px;display:grid}.palette-section,.tool-panel,.preview-panel,.knowledge-panel,.export-panel,.upload-panel,.knowledge-card,.discover-rail,.collections-page,.create-panel,.about-page,.random-focus,.empty-state{background:#ffffffeb;border:1px solid #e3e8e5;border-radius:8px;box-shadow:0 18px 50px #212b2712}.palette-section{padding:20px}.section-head,.panel-title{justify-content:space-between;align-items:center;gap:16px;display:flex}.section-head{margin-bottom:17px}.section-head h2,.panel-title h2{color:#18201d;margin:0;font-size:19px;line-height:1.2}.section-head p{color:#75817b;margin:6px 0 0;font-size:13px}.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.palette-grid.wide{grid-template-columns:repeat(3,minmax(0,1fr))}.discover-rail{gap:14px;padding:16px;display:grid}.rail-tabs{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.rail-tabs button,.random-actions button{color:#18201d;background:#f3f6f4;border:1px solid #e0e6e2;border-radius:8px;justify-content:center;align-items:center;gap:7px;min-height:38px;font-size:13px;font-weight:900;display:inline-flex}.mini-palette-list{gap:8px;display:grid}.mini-palette-list button{color:#26302b;text-align:left;background:#fff;border:1px solid #e6ebe8;border-radius:8px;grid-template-columns:minmax(0,1fr) 92px;align-items:center;gap:10px;min-height:42px;padding:8px;display:grid}.mini-palette-list span{text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:900;overflow:hidden}.mini-palette-list i{border-radius:6px;grid-template-columns:repeat(5,1fr);height:24px;display:grid;overflow:hidden}.mini-palette-list b{display:block}.saved-connections{flex-wrap:wrap;gap:8px;padding-top:4px;display:flex}.saved-connections strong{color:#26302b;width:100%;font-size:13px}.saved-connections button{color:#4b5852;background:#f8faf9;border:1px solid #e4e9e6;border-radius:999px;align-items:center;gap:7px;min-height:30px;padding:0 10px;font-size:12px;font-weight:800;display:inline-flex}.saved-connections span{border-radius:50%;width:11px;height:11px}.saved-connections p{color:#7a8580;margin:0;font-size:12px;line-height:1.5}.load-more{color:#18201d;background:#edf2ee;border:1px solid #dce5df;border-radius:8px;width:100%;min-height:46px;margin-top:18px;font-size:14px;font-weight:900}.palette-card{background:#fff;border:1px solid #e5e9e7;border-radius:8px;min-width:0;transition:transform .18s,border-color .18s,box-shadow .18s;overflow:hidden}.palette-card:hover,.palette-card.selected{border-color:#18201d61;transform:translateY(-2px);box-shadow:0 20px 38px #1e28241f}.swatch-stack{grid-template-columns:repeat(5,1fr);height:148px;display:grid}.swatch{border-radius:0;width:100%;height:100%}.swatch:hover{outline-offset:-5px;outline:3px solid #fffc}.card-body{justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 14px 8px;display:flex}.card-body h3{margin:0;font-size:17px;line-height:1.2}.card-body p{color:#6f7b75;margin:6px 0 0;font-size:12px;line-height:1.5}.favorite-button{color:#6a7670;background:0 0;align-items:center;gap:4px;font-size:12px;font-weight:800;display:inline-flex}.favorite-button.active{color:#d84668}.tag-row{gap:7px;padding:0 14px 14px;display:flex}.tag-row span{color:#55625c;background:#f2f5f3;border-radius:7px;padding:5px 8px;font-size:11px;font-weight:800}.tool-rail{gap:16px;display:grid}.tool-panel,.preview-panel,.knowledge-panel,.export-panel,.upload-panel{padding:18px}.panel-title{color:#35403b;justify-content:flex-start;margin-bottom:16px}.color-picker{color:#6f7a75;background:#f6f8f7;border:1px solid #e4e9e6;border-radius:8px;grid-template-columns:auto 52px 1fr;align-items:center;gap:12px;margin-bottom:14px;padding:10px;font-size:13px;font-weight:800;display:grid}.color-picker input{background:0 0;border:0;width:52px;height:36px;padding:0}.color-picker strong{color:#1b2520;text-align:right}.wheel-picker{background:linear-gradient(180deg, #ffffffe0, #f6f8f7eb), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--marker-color), transparent 86%), transparent 9rem);touch-action:none;border:1px solid #e4e9e6;border-radius:8px;place-items:center;min-height:176px;margin-bottom:14px;display:grid;position:relative}.hue-ring{cursor:grab;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:50%;width:142px;height:142px;position:relative;box-shadow:inset 0 0 0 15px #fffffff5,0 12px 30px #18201d14}.hue-marker{background:var(--marker-color);width:18px;height:18px;transform:rotate(var(--hue)) translateX(72px) rotate(calc(var(--hue) * -1));transform-origin:50%;border:3px solid #fff;border-radius:50%;margin:-9px 0 0 -9px;position:absolute;top:50%;left:50%;box-shadow:0 8px 18px #18201d2e}.tone-square{background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--marker-color));cursor:crosshair;border:1px solid #18201d29;border-radius:8px;width:78px;height:78px;position:absolute;box-shadow:0 14px 34px #18201d29}.tone-square span{top:var(--tone-y);left:var(--tone-x);border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 6px 14px #18201d3d}.harmony-tabs,.preview-tabs{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px;display:grid}.preview-tabs{grid-template-columns:repeat(3,1fr)}.harmony-tabs button,.preview-tabs button{color:#6c7771;background:#f2f5f3;border:1px solid #e3e8e5;border-radius:8px;min-height:36px;font-size:12px;font-weight:800}.harmony-tabs button.active,.preview-tabs button.active{color:#fff;background:#18201d;border-color:#18201d}.generated-strip{gap:8px;margin-bottom:14px;display:grid}.generated-strip button{border-radius:8px;justify-content:flex-end;align-items:center;min-height:48px;padding:8px;display:flex;box-shadow:inset 0 0 0 1px #0000000a}.generated-strip span{color:#18201d;background:#ffffffb8;border-radius:6px;padding:5px 7px;font-size:11px;font-weight:900}.tool-actions{gap:8px;display:flex}.poster-preview,.web-preview,.data-preview{border-radius:8px;min-height:278px;overflow:hidden}.poster-preview{color:var(--c5);background:linear-gradient(135deg, var(--c1), var(--c2));flex-direction:column;padding:22px;display:flex;position:relative}.poster-topline{color:var(--c4);font-size:11px;font-weight:900}.poster-preview h3{max-width:210px;margin:32px 0 9px;font-size:34px;line-height:1.05}.poster-preview p{max-width:200px;color:color-mix(in srgb, var(--c5), transparent 16%);margin:0;font-size:13px;line-height:1.65}.poster-art{place-items:center;width:145px;height:145px;display:grid;position:absolute;bottom:18px;right:18px}.poster-art span{border-radius:999px;position:absolute}.poster-art span:first-child{background:var(--c3);width:130px;height:130px}.poster-art span:nth-child(2){background:var(--c4);width:92px;height:92px;transform:translate(-28px,24px)}.poster-art span:nth-child(3){background:var(--c5);width:66px;height:66px;transform:translate(38px,-36px)}.poster-preview button{width:fit-content;color:var(--c1);background:var(--c5);border-radius:8px;margin-top:auto;padding:10px 14px;font-size:13px;font-weight:900}.web-preview{background:var(--c5);padding:12px}.browser-bar{align-items:center;gap:5px;padding:8px 0 12px;display:flex}.browser-bar span{background:var(--c2);border-radius:50%;width:8px;height:8px}.browser-bar strong{color:color-mix(in srgb, var(--c1), transparent 20%);margin-left:6px;font-size:10px}.mini-site-nav{color:var(--c5);background:var(--c1);border-radius:8px;grid-template-columns:1fr auto auto auto auto;align-items:center;gap:8px;margin-bottom:10px;padding:9px 10px;display:grid}.mini-site-nav strong{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.mini-site-nav span{color:color-mix(in srgb, var(--c5), transparent 20%);font-size:10px;font-weight:800}.mini-site-nav button{min-height:26px;color:var(--c1);background:var(--c4);border-radius:7px;padding:0 9px;font-size:10px;font-weight:900}.web-hero{min-height:166px;color:var(--c5);background:var(--c1);border-radius:8px;grid-template-columns:1fr 96px;gap:12px;padding:18px;display:grid}.web-hero strong{max-width:180px;font-size:27px;line-height:1.08;display:block}.web-hero p{color:color-mix(in srgb, var(--c5), transparent 20%);margin:10px 0 14px;font-size:12px;line-height:1.55}.web-hero button{min-height:32px;color:var(--c1);background:var(--c4);border-radius:8px;padding:0 12px;font-size:12px;font-weight:900}.web-widget{color:var(--c5);background:var(--c2);text-align:center;border-radius:8px;align-content:center;justify-items:center;gap:7px;display:grid}.web-widget span{font-size:11px;font-weight:800}.web-widget strong{font-size:26px}.web-list{grid-template-columns:1fr 1.25fr .8fr;gap:10px;margin-top:12px;display:grid}.web-feature-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;display:grid}.web-feature-grid div{min-height:82px;color:var(--c5);background:var(--c1);border-radius:8px;padding:10px}.web-feature-grid span{color:var(--c3);font-size:10px;font-weight:900;display:block}.web-feature-grid strong{margin-top:6px;font-size:12px;display:block}.web-feature-grid p{color:color-mix(in srgb, var(--c5), transparent 25%);margin:5px 0 0;font-size:10px;line-height:1.35}.web-chart{background:var(--c1);border-radius:8px;gap:7px;margin-top:10px;padding:12px;display:grid}.web-chart span{background:var(--c3);border-radius:99px;height:8px}.web-chart span:nth-child(2){background:var(--c4)}.web-chart span:nth-child(3){background:var(--c2)}.web-list span{background:var(--c3);border-radius:8px;height:54px}.web-list span:nth-child(2){background:var(--c2)}.web-list span:nth-child(3){background:var(--c4)}.data-preview{color:var(--c5);background:var(--c1);gap:14px;padding:16px;display:grid}.metric-card{min-height:58px;color:var(--c1);background:var(--c5);border-radius:8px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:0 14px;display:grid}.metric-card span{font-size:13px;font-weight:800}.metric-card strong{font-size:22px}.bars{background:#fff;border-radius:8px;grid-template-columns:repeat(5,1fr);align-items:end;gap:10px;height:130px;padding:14px;display:grid}.bars span{background:var(--c3);border-radius:8px 8px 3px 3px}.bars span:nth-child(2){background:var(--c4)}.bars span:nth-child(3){background:var(--c2)}.bars span:nth-child(4){background:var(--c5)}.bars span:nth-child(5){background:var(--c3)}.data-preview p{color:color-mix(in srgb, var(--c5), transparent 18%);margin:0;font-size:12px;line-height:1.65}.knowledge-panel{color:var(--c5);background:var(--c1);gap:10px;display:grid}.knowledge-panel div{align-items:center;gap:8px;display:flex}.knowledge-panel strong{font-size:14px}.knowledge-panel p{color:color-mix(in srgb, var(--c5), transparent 18%);margin:0;font-size:12px;line-height:1.7}.toast{color:#fff;opacity:0;pointer-events:none;background:#18201d;border-radius:8px;align-items:center;gap:8px;padding:12px 15px;transition:opacity .2s,transform .2s;display:flex;position:fixed;bottom:24px;right:26px;transform:translateY(12px);box-shadow:0 18px 44px #18201d38}.toast.show{opacity:1;transform:translateY(0)}.designer-grid,.image-grid,.random-page,.create-page{grid-template-columns:minmax(0,1fr) 430px;align-items:start;gap:22px;display:grid}.random-focus,.create-panel,.about-page,.collections-page{padding:22px}.random-focus{min-height:520px;color:var(--c5);background:var(--c1);grid-template-columns:minmax(0,1fr) 300px;gap:22px;display:grid}.random-swatch{border-radius:8px;grid-template-columns:repeat(5,1fr);display:grid;overflow:hidden}.random-swatch button{color:#ffffffeb;writing-mode:vertical-rl;justify-content:center;align-items:flex-end;padding:14px 4px;font-size:12px;font-weight:900;display:flex}.random-copy{flex-direction:column;justify-content:center;display:flex}.random-copy h2{color:var(--c5);margin:0;font-size:34px;line-height:1.05}.random-copy p{color:color-mix(in srgb, var(--c5), transparent 22%)}.random-actions{gap:8px;margin-top:18px;display:grid}.collections-page{gap:30px;display:grid}.create-panel{gap:16px;display:grid}.create-panel label{color:#46524d;gap:8px;font-size:13px;font-weight:900;display:grid}.create-panel input,.create-panel textarea{color:#18201d;background:#fff;border:1px solid #dfe6e2;border-radius:8px;outline:0;width:100%}.create-panel input{height:44px;padding:0 12px}.create-panel textarea{resize:vertical;min-height:120px;padding:12px}.about-page{max-width:960px}.about-page h2{margin:0;font-size:34px}.about-page>p{color:#64706a;max-width:680px;line-height:1.8}.about-page>div{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px;display:grid}.about-page article{background:#f7faf8;border:1px solid #e2e8e4;border-radius:8px;padding:18px}.about-page strong,.about-page span{display:block}.about-page span{color:#66736d;margin-top:8px;font-size:13px;line-height:1.7}.large-tool{gap:16px;display:grid}.large-tool .wheel-picker{min-height:280px}.large-tool .hue-ring{width:198px;height:198px}.large-tool .hue-marker{transform:rotate(var(--hue)) translateX(100px) rotate(calc(var(--hue) * -1))}.large-tool .tone-square{width:116px;height:116px}.export-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.export-grid button{color:#18201d;background:#f1f4f2;border:1px solid #e0e5e2;border-radius:8px;min-height:44px;font-size:13px;font-weight:900}.upload-zone{color:#52605a;text-align:center;background:#f6f8f7;border:1px dashed #cfd8d2;border-radius:8px;place-items:center;gap:10px;width:100%;min-height:320px;padding:20px;display:grid}.upload-zone img{object-fit:contain;border-radius:8px;width:100%;max-height:260px}.upload-zone strong{color:#17211d;font-size:20px}.upload-zone span{color:#6e7b74;max-width:360px;font-size:13px;line-height:1.6}.extract-status{color:#66726c;margin:10px 0 0;font-size:13px;line-height:1.55}.picked-colors{grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px;display:grid}.picked-colors button{color:#18201d;border-radius:8px;justify-content:center;align-items:flex-end;min-height:96px;padding:8px;font-size:11px;font-weight:900;display:flex;box-shadow:inset 0 0 0 1px #0000000d}.knowledge-page{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.knowledge-card{gap:14px;padding:18px;display:grid}.knowledge-card h2{margin:0;font-size:21px}.knowledge-card p{color:#65716b;margin:9px 0 0;font-size:13px;line-height:1.75}.knowledge-swatch{border-radius:8px;grid-template-columns:repeat(5,1fr);min-height:118px;display:grid;overflow:hidden}.knowledge-swatch button{color:#18201d;justify-content:center;align-items:flex-end;padding:8px 4px;font-size:10px;font-weight:900;display:flex}.empty-state{color:#65716b;text-align:center;place-items:center;min-height:440px;padding:36px;display:grid}.empty-state h2{color:#18201d;margin:10px 0 0}.empty-state p{max-width:360px;line-height:1.7}@media (width<=1180px){.app-shell{grid-template-columns:86px minmax(0,1fr)}.side-nav{padding:20px 14px}.brand span:last-child,.nav-item span,.side-note{display:none}.nav-item{justify-content:center;padding:0}.content-grid{grid-template-columns:1fr}.tool-rail,.designer-grid,.image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.knowledge-panel{grid-column:1/-1}}@media (width<=820px){.app-shell{display:block}.side-nav{flex-direction:row;align-items:center;height:auto;padding:12px;position:static;overflow-x:auto}.brand{flex-shrink:0}.nav-list{min-width:max-content;display:flex}.workspace{padding:18px}.topbar,.search-row,.search-action-group{grid-template-columns:1fr}.topbar{display:grid}.top-actions{width:100%}.primary-button{flex:1}.palette-grid,.palette-grid.wide,.tool-rail,.designer-grid,.image-grid,.random-page,.create-page,.random-focus,.knowledge-page,.about-page>div{grid-template-columns:1fr}.large-tool .wheel-picker{min-height:210px}}@media (width<=520px){.workspace{padding:14px}.topbar h1{font-size:32px}.topbar p{font-size:14px}.swatch-stack{height:118px}.harmony-tabs{grid-template-columns:repeat(2,1fr)}.preview-tabs,.export-grid,.picked-colors{grid-template-columns:1fr}.picked-colors button{min-height:54px}.mini-site-nav{grid-template-columns:1fr auto}.mini-site-nav span{display:none}.web-feature-grid{grid-template-columns:1fr}.card-body,.section-head{flex-direction:column;align-items:flex-start}.toast{justify-content:center;bottom:14px;left:14px;right:14px}}