:root{color-scheme:light;--bg:#f5f4ef;--surface:#fff;--text:#151515;--muted:#72716c;--line:rgba(20,20,20,.14);--soft:rgba(20,20,20,.055);--radius-sm:10px;--radius-md:18px;--radius-lg:28px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:48px;--space-2xl:72px;--fast:180ms;--normal:280ms;--font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
:root[data-theme="dark"]{color-scheme:dark;--bg:#11110f;--surface:#1a1a17;--text:#f3f2ec;--muted:#a09f98;--line:rgba(255,255,255,.14);--soft:rgba(255,255,255,.06)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}.shell{width:min(1180px,calc(100% - 40px));margin:auto}.site-header{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{position:relative;display:inline-flex;align-items:baseline;font-weight:800;letter-spacing:-.055em;font-size:34px;line-height:1;isolation:isolate}.brand::before{content:"";position:absolute;width:10px;height:10px;left:-17px;top:1px;border-radius:50%;background:#e241cf;box-shadow:0 12px 0 #d465eb;transform:scale(.72);transition:transform var(--normal)}.brand::after{content:"";position:absolute;z-index:-1;left:-3px;right:-4px;bottom:-8px;height:4px;border-radius:3px;background:#e241cf;transform:scaleX(.16);transform-origin:left;transition:transform var(--normal)}.brand-char{display:inline-block;transition:transform var(--fast),color var(--fast)}.brand-char:nth-child(4),.brand-char:nth-child(5){color:#b146d8}.brand-char:nth-child(6){margin-left:.06em;color:var(--muted)}.brand:hover::before{transform:scale(1) rotate(18deg)}.brand:hover::after{transform:scaleX(1)}.brand:hover .brand-char:nth-child(odd){transform:translateY(-2px)}.brand:hover .brand-char:nth-child(even){transform:translateY(1px)}.nav{display:flex;align-items:center;gap:24px}.nav a{font-size:14px;color:var(--muted);transition:color var(--fast)}.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text);cursor:pointer}.menu-button{display:none}.eyebrow{margin:0 0 16px;color:var(--muted);font-size:13px;letter-spacing:.14em;text-transform:uppercase}.hero{padding:72px 0 48px}.hero h1{font-size:clamp(76px,15vw,180px);line-height:.82;letter-spacing:-.09em;margin:0 0 36px;font-weight:800}.hero-line{display:flex;justify-content:space-between;align-items:end;gap:32px}.hero-copy{font-size:clamp(24px,3vw,42px);letter-spacing:-.045em;line-height:1.15;margin:0;max-width:620px}.muted{color:var(--muted)}.button{border:1px solid var(--text);background:var(--text);color:var(--bg);border-radius:999px;padding:13px 20px;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font-weight:650;transition:transform var(--fast),opacity var(--fast)}.button:hover{transform:translateY(-2px)}.button.secondary{background:transparent;color:var(--text);border-color:var(--line)}.palette{display:grid;grid-template-columns:repeat(5,1fr);min-height:330px;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}.swatch{position:relative;border:0;padding:0;background:var(--color);cursor:pointer;min-width:0;transition:flex var(--normal),transform var(--normal),background var(--normal)}.swatch:hover{transform:scale(1.018);z-index:1}.swatch-label{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:end;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.03em}.swatch-rgb{font-size:10px;font-weight:500;opacity:.65}.home-palette{margin:10px auto 88px}.section{padding:72px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}.section h1,.section h2{margin:0;font-size:clamp(40px,7vw,86px);letter-spacing:-.065em;line-height:.95}.lede{max-width:560px;color:var(--muted);font-size:17px;line-height:1.65}.feature-list{border-top:1px solid var(--line)}.feature{display:grid;grid-template-columns:80px 1fr auto;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);transition:padding var(--fast)}.feature:hover{padding-left:10px}.feature-index{color:var(--muted);font-size:12px}.feature h3{margin:0 0 5px;font-size:25px;letter-spacing:-.035em}.feature p{margin:0;color:var(--muted);font-size:14px}.feature-arrow{font-size:24px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.toolbar-group{display:flex;gap:10px;flex-wrap:wrap}.chip{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}.chip.active{background:var(--text);color:var(--bg);border-color:var(--text)}.page-palette{min-height:480px}.dropzone{border:1px dashed var(--line);border-radius:var(--radius-lg);min-height:360px;display:grid;place-items:center;text-align:center;background:var(--soft);cursor:pointer;overflow:hidden;position:relative}.dropzone.drag{border-color:var(--text)}.dropzone img{width:100%;height:100%;max-height:560px;object-fit:contain}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.dropzone-copy strong{font-size:24px;display:block;margin-bottom:8px}.result-palette{margin-top:22px;min-height:170px}.today-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}.date{font-variant-numeric:tabular-nums;color:var(--muted)}.palette-name{font-size:clamp(54px,8vw,112px);line-height:.95;letter-spacing:-.07em;margin:18px 0 24px}.personality{min-height:620px;border-radius:var(--radius-lg);padding:clamp(28px,6vw,72px);display:flex;flex-direction:column;justify-content:space-between;background:var(--personality);color:var(--personality-ink);transition:background var(--normal),color var(--normal)}.personality h1{font-size:clamp(64px,11vw,138px);margin:0;letter-spacing:-.08em;line-height:.86}.personality-en{font-size:20px;opacity:.7;margin:18px 0 0}.personality-hex{font-size:14px;letter-spacing:.14em}.quote{font-size:clamp(22px,3vw,36px);max-width:680px;line-height:1.35;margin:40px 0}.personality-actions{display:flex;gap:10px;flex-wrap:wrap}.personality .button{background:var(--personality-ink);color:var(--personality);border-color:transparent}.personality .button.secondary{background:transparent;color:var(--personality-ink);border-color:currentColor}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:var(--text);color:var(--bg);padding:11px 16px;border-radius:999px;font-size:13px;pointer-events:none;transition:all var(--fast);z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}footer{padding:70px 0 28px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:80px}
@media(max-width:760px){.shell{width:min(100% - 28px,1180px)}.site-header{height:68px}.nav a{display:none}.hero{padding:48px 0 34px}.hero h1{font-size:31vw;margin-bottom:28px}.hero-line{display:block}.hero-line .button{margin-top:24px}.palette{grid-template-columns:1fr;min-height:620px}.swatch-label{top:50%;bottom:auto;transform:translateY(-50%)}.swatch-rgb{display:none}.home-palette{margin-bottom:52px}.section{padding:46px 0}.section-head{display:block}.section-head .lede{margin-top:18px}.feature{grid-template-columns:42px 1fr auto;padding:22px 0}.feature h3{font-size:20px}.feature p{font-size:13px}.toolbar{align-items:flex-start;flex-direction:column}.page-palette{min-height:680px}.today-layout{grid-template-columns:1fr;gap:26px}.today-layout .palette{min-height:580px}.dropzone{min-height:300px}.result-palette{min-height:520px}.personality{min-height:calc(100vh - 96px);padding:30px 22px}.personality h1{font-size:22vw}footer{margin-top:50px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--bg:#11110f;--surface:#1a1a17;--text:#f3f2ec;--muted:#a09f98;--line:rgba(255,255,255,.14);--soft:rgba(255,255,255,.06)}}
.language-control{position:relative}.language-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.language-menu{position:absolute;z-index:60;right:0;top:calc(100% + 9px);display:grid;min-width:112px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 14px 40px rgba(0,0,0,.14);opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity var(--fast),transform var(--fast),visibility var(--fast)}.language-control.open .language-menu{opacity:1;visibility:visible;transform:translateY(0)}.language-menu button{border:0;border-radius:9px;padding:9px 11px;background:transparent;color:var(--muted);text-align:left;cursor:pointer}.language-menu button:hover,.language-menu button.active{background:var(--soft);color:var(--text)}@media(max-width:760px){.language-control{order:0}.nav.open .language-control{position:absolute;top:13px;right:118px}.nav.open .language-control .icon-button{position:static}.nav.open .language-menu{right:-2px}.nav.open>.icon-button{right:66px}}
.hero-title{position:relative;display:flex;align-items:baseline;width:max-content;isolation:isolate}.hero-title span{display:block}.hero-title::before{content:"";position:absolute;right:-.18em;top:.02em;width:.075em;height:.075em;border-radius:2px;background:#70c6d2;box-shadow:.11em 0 0 #e56b8a,.22em 0 0 #f2c14e}.hero-title span:last-child::after{content:"";position:absolute;z-index:-1;right:.01em;bottom:.025em;width:.43em;height:.065em;border-radius:999px;background:#e56b8a;transform:rotate(-3deg)}:root:not([data-theme="dark"]) .hero-title span:last-child{color:var(--bg);-webkit-text-stroke:clamp(2px,.24vw,4px) var(--text);paint-order:stroke fill}:root[data-theme="dark"] .hero-title span:last-child{color:var(--text);-webkit-text-stroke:0}
.not-found h1{font-size:clamp(56px,8vw,116px);max-width:700px}.feature-list{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:190px;gap:14px;border:0}.feature{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-width:0;padding:26px;border:0;border-radius:var(--radius-md);background:var(--surface);overflow:hidden;isolation:isolate;transition:transform var(--normal),background var(--normal),color var(--normal)}.feature::before{content:"";position:absolute;z-index:-1;left:24px;top:24px;width:13px;height:13px;border-radius:50%;background:var(--feature-color);box-shadow:0 0 0 7px color-mix(in srgb,var(--feature-color) 18%,transparent);transition:transform var(--normal)}.feature::after{content:"";position:absolute;z-index:-2;inset:0;background:var(--feature-color);opacity:0;transition:opacity var(--normal)}.feature:hover{padding:26px;transform:translateY(-4px);color:var(--feature-ink)}.feature:hover::before{transform:scale(1.35)}.feature:hover::after{opacity:1}.feature:nth-child(1){grid-column:span 7;grid-row:span 2;--feature-color:#6557D9;--feature-ink:#fff}.feature:nth-child(2){grid-column:span 5;--feature-color:#70C6D2;--feature-ink:#151515}.feature:nth-child(3){grid-column:span 5;--feature-color:#F2C14E;--feature-ink:#151515}.feature:nth-child(4){grid-column:span 6;--feature-color:#E56B8A;--feature-ink:#151515}.feature:nth-child(5){grid-column:span 6;--feature-color:#78A66A;--feature-ink:#151515}.feature-index{position:absolute;right:24px;top:22px;color:inherit;opacity:.55}.feature h3{margin:0 0 7px;font-size:clamp(26px,3vw,44px);letter-spacing:-.055em;line-height:1}.feature:first-child h3{font-size:clamp(42px,6vw,78px)}.feature p{max-width:320px;color:inherit;opacity:.62;font-size:14px;line-height:1.5}.feature-arrow{position:absolute;right:24px;bottom:24px;font-size:28px;transition:transform var(--fast)}.feature:hover .feature-arrow{transform:translate(3px,-3px)}@media(max-width:860px){.feature-list{grid-template-columns:repeat(2,1fr);grid-auto-rows:210px}.feature:nth-child(n){grid-column:span 1;grid-row:span 1}.feature:nth-child(1){grid-column:1/-1;min-height:320px}.feature:first-child h3{font-size:58px}}@media(max-width:760px){.not-found h1{font-size:16vw}.feature-list{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:10px}.feature:nth-child(n){min-height:210px;padding:18px}.feature:nth-child(1){min-height:280px}.feature:hover{padding:18px;transform:none}.feature::before{left:18px;top:18px}.feature-index{right:18px;top:17px}.feature-arrow{right:18px;bottom:18px}.feature h3{font-size:24px}.feature:first-child h3{font-size:46px}.feature p{font-size:12px}}@media(max-width:520px){.feature-list{grid-template-columns:1fr}.feature:nth-child(n){grid-column:1;min-height:190px}.feature:nth-child(1){min-height:260px}}
.nav-toggle{display:none;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text);cursor:pointer}.nav-toggle span{display:block;width:16px;height:1.5px;margin:4px auto;background:currentColor;transition:transform var(--fast),opacity var(--fast)}.not-found-page{min-height:100dvh;overflow-x:hidden}.not-found{min-height:calc(100dvh - 82px);padding:clamp(54px,9vw,120px) 0;position:relative}.error-code{position:absolute;right:0;top:8%;display:flex;align-items:center;font-size:clamp(150px,27vw,410px);font-weight:850;line-height:.8;letter-spacing:-.12em;color:var(--soft);pointer-events:none}.error-code i{width:.65em;height:.65em;margin-left:.07em;border-radius:50%;background:#d04edf;transition:background var(--normal),transform var(--normal)}.error-code i:hover{transform:scale(.92)}.not-found h1{position:relative;margin:0 0 28px;font-size:clamp(72px,12vw,160px);line-height:.84;letter-spacing:-.08em;max-width:900px}.not-found .lede{position:relative}.not-found-actions{position:relative;display:flex;gap:10px;margin-top:34px}@media(max-width:760px){body.menu-open{overflow:hidden}.nav-toggle{display:block;order:2}.nav .icon-button{order:1}.nav.open{position:fixed;z-index:50;inset:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:90px 22px 28px;background:var(--bg)}.nav.open a{display:flex;align-items:center;justify-content:space-between;min-height:72px;border-bottom:1px solid var(--line);font-size:clamp(26px,9vw,40px);font-weight:720;letter-spacing:-.05em;color:var(--text)}.nav.open a::after{content:"↗";font-size:20px;font-weight:400}.nav.open .nav-toggle,.nav.open .icon-button{position:absolute;top:13px}.nav.open .nav-toggle{right:14px}.nav.open .icon-button{right:66px}.nav.open .nav-toggle span:first-child{transform:translateY(2.75px) rotate(45deg)}.nav.open .nav-toggle span:last-child{transform:translateY(-2.75px) rotate(-45deg)}.not-found{min-height:calc(100dvh - 68px);padding-top:80px}.error-code{top:10%;right:-8%;font-size:54vw}.not-found h1{font-size:22vw;margin-top:120px}.not-found-actions{align-items:stretch;flex-direction:column}.not-found-actions .button{width:100%}}
.palette-stack{min-width:0}.palette-tools{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 12px;color:var(--muted);font-size:11px}.palette-tools.shell{margin:0 auto 12px}.format-switch{display:flex;padding:3px;border:1px solid var(--line);border-radius:999px}.format-switch button{border:0;border-radius:999px;padding:6px 10px;background:transparent;color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.04em;cursor:pointer}.format-switch button.active{background:var(--text);color:var(--bg)}.swatch-value{max-width:100%;overflow-wrap:anywhere}.studio{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);min-height:660px;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}.studio-preview{display:grid;place-items:center;min-height:580px;transition:background var(--normal),color var(--normal)}.studio-copy{display:grid;gap:8px;border:0;background:transparent;color:inherit;text-align:center;cursor:pointer}.studio-copy span{font-size:clamp(34px,5vw,72px);font-weight:780;letter-spacing:-.055em}.studio-copy small{opacity:.62}.studio-controls{padding:38px;display:flex;flex-direction:column;gap:16px}.color-native{grid-template-columns:1fr}.color-native input{width:100%;height:58px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;cursor:pointer}.triple-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.range-field{display:grid;gap:9px}.range-field span{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:650}.range-field input{width:100%;accent-color:var(--text)}.studio-values{display:grid;gap:8px}.studio-values button{min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);background:transparent;color:var(--text);text-align:left;font-size:12px;cursor:pointer}.studio-values button:hover{border-color:var(--text)}.studio-add{margin-top:auto}.saved-section{padding-top:72px}.saved-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.saved-head h2{margin:0;font-size:clamp(38px,6vw,72px);letter-spacing:-.06em}.saved-colors{display:grid;grid-template-columns:repeat(5,1fr);min-height:190px;border-radius:var(--radius-lg);overflow:hidden;background:var(--soft)}.saved-color{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;padding:16px;border:0;background:var(--saved);color:var(--saved-ink);cursor:pointer}.saved-color span{font-weight:750}.saved-color small{opacity:.65}.saved-empty{align-self:center;grid-column:1/-1;margin:auto;color:var(--muted)}@media(max-width:860px){.studio{grid-template-columns:1fr}.studio-preview{min-height:360px}.studio-controls{padding:26px}.saved-colors{grid-template-columns:1fr;min-height:500px}}@media(max-width:760px){.palette-tools{justify-content:space-between}.palette-tools.shell{width:min(100% - 28px,1180px)}.swatch-value{font-size:12px}.studio-preview{min-height:300px}.studio-controls{padding:22px 16px}.saved-section{padding-top:48px}}
.wallpaper-dialog{width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--radius-lg);background:var(--surface);color:var(--text);box-shadow:0 24px 90px rgba(0,0,0,.3);overflow:auto}.wallpaper-dialog::backdrop{background:rgba(10,10,9,.62);backdrop-filter:blur(5px)}.wallpaper-panel{padding:32px}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}.dialog-head h2{margin:0;font-size:42px;line-height:1;letter-spacing:-.055em}.dialog-close{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text);font-size:24px;cursor:pointer}.field{display:grid;gap:8px;min-width:0}.field>span{color:var(--muted);font-size:12px;font-weight:650}.field select,.field input[type="number"]{width:100%;height:48px;padding:0 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);outline:none}.field select:focus,.field input:focus{border-color:var(--text)}.size-fields{display:grid;grid-template-columns:1fr 42px 1fr;gap:10px;align-items:end;margin-top:16px}.swap-size{height:48px;border:1px solid var(--line);border-radius:var(--radius-sm);background:transparent;color:var(--text);cursor:pointer}.option-row{display:grid;grid-template-columns:1fr 180px;gap:18px;align-items:end;margin-top:18px}.check-option{height:48px;display:flex;gap:10px;align-items:center;cursor:pointer}.check-option input{width:18px;height:18px;accent-color:var(--text)}.quality-field{margin-top:16px}.quality-field>span{display:flex;justify-content:space-between}.quality-field input{width:100%;accent-color:var(--text)}.wallpaper-preview{width:100%;max-height:190px;margin-top:22px;border-radius:var(--radius-md);display:grid;place-items:center;overflow:hidden;transition:background var(--normal),aspect-ratio var(--normal)}.wallpaper-preview span{font-size:clamp(12px,2.5vw,22px);font-weight:750;letter-spacing:-.03em}.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px}.dialog-note{margin:0;color:var(--muted);font-size:12px}@media(max-width:760px){.wallpaper-panel{padding:24px 18px}.dialog-head h2{font-size:34px}.option-row{grid-template-columns:1fr}.size-fields{grid-template-columns:1fr 38px 1fr}.wallpaper-preview{max-height:150px}.dialog-actions{align-items:stretch;flex-direction:column}.dialog-actions .button{width:100%}}