:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Yu Gothic,sans-serif;color:#25282c;background:#f8f8f6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:280px}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid #5874b5;outline-offset:3px}button:not(:focus-visible){outline:none}a{color:inherit}.app-shell{position:relative;min-height:100dvh}.mobile-only{display:initial}.desktop-only{display:none}.eyebrow{color:#7c8188;font-size:10px;font-weight:750;letter-spacing:.17em;line-height:1.5}.app-header{position:relative;z-index:5;background:#f8f8f6f5}.app-header__inner{display:flex;align-items:center;min-height:60px;max-width:1800px;margin:auto;padding:0 22px;gap:15px}.about-link{position:absolute;z-index:6;top:13px;right:70px;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 4px;border:0;background:transparent;color:#5c6268;font-size:12px;font-weight:600}.about-link:hover{color:#25282c}.about-link__icon{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#e6e8e9;color:#545b61;font-family:Georgia,serif;font-size:13px;font-weight:700}.about-link__full{display:none}.about-link__short{display:inline}.menu-button{flex:none;width:44px;height:44px;margin-left:auto;padding:12px 9px;border:0;background:transparent}.menu-button span{display:block;width:22px;height:2px;margin:4px auto;border-radius:2px;background:#282b2f}.app-body{display:block}.sidebar{display:none}.main-content{min-width:0}.main-content__inner{max-width:1160px;margin:auto;padding:28px 20px 54px}.hero-copy{width:100%;text-align:center}.hero-copy__title{display:flex;align-items:center;justify-content:center;gap:10px}.hero-copy__mark{display:block;flex:none;width:27px;height:27px}.hero-copy h1{margin:9px 0;font-size:clamp(29px,7.8vw,42px);line-height:1.25;letter-spacing:-.065em;font-weight:730}.hero-copy p{margin:0;color:#4d565c;font-size:15px;font-weight:650;line-height:1.6}.workspace{display:flex;flex-direction:column;gap:22px}.stage-column{display:flex;flex-direction:column;align-items:center;min-width:0}.canvas-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;margin-top:21px}.mix-canvas{position:relative;isolation:isolate;width:min(100%,360px);aspect-ratio:.8;overflow:hidden;background:#fff}.paint-canvas,.mix-animation,.result-surface,.reduced-mix-surface{position:absolute;inset:0;width:100%;height:100%}.stage-actions{display:flex;flex-direction:column;align-items:center;width:min(100%,360px);margin-top:24px;gap:9px}.stage-actions__primary{display:flex;width:100%;gap:9px}.choose-button{width:100%;min-height:44px;padding:8px 16px;border:0;border-radius:14px;background:#e9eceb;color:#2f3438;font-size:13px;font-weight:700}.choose-button span{margin-left:12px}.choose-button:hover{background:#e1e5e4}.mix-button{display:flex;flex:1;justify-content:center;align-items:center;position:relative;min-width:0;min-height:52px;padding:10px 12px;border:0;border-radius:16px;background:#24282c;color:#fff;font-size:15px;font-weight:750;letter-spacing:.03em;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}.mix-button:hover:not(:disabled){background:#363b40;transform:translateY(-1px)}.mix-button:disabled{background:#dedfdd;color:#757b7e}.mix-button--dirty{box-shadow:0 0 0 5px #4e596421}.mix-button__arrow{position:absolute;right:19px;font-size:17px;font-weight:400}.reset-button{flex:0 0 102px;min-height:52px;padding:8px 7px;border:1px solid #cbd0d1;border-radius:16px;background:#fff;color:#39444b;font-size:13px;font-weight:750;white-space:nowrap}.reset-button:hover:not(:disabled){background:#edf0ef}.reset-button:disabled{border-color:#e1e3e2;background:#f3f4f3;color:#92999d}.result-copy{display:flex;align-items:flex-start;justify-content:center;min-height:75px;width:100%;margin-top:14px;text-align:center}.result-copy__pending{padding:8px 13px;border-radius:10px;background:#e7ebee;color:#39444d;font-size:13px;font-weight:700}.result-copy__inner{display:flex;flex-direction:column;align-items:center;gap:3px;animation:result-appear .3s ease-out both}.result-copy__stale{color:#5e6871;font-size:11px;font-weight:700}@keyframes result-appear{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.result-copy__inner strong{font-size:20px;font-weight:720;letter-spacing:-.035em}.result-copy__inner>span:not(.eyebrow){color:#5e6871;font-size:12px}.save-button{margin-top:10px;min-height:44px;padding:0 18px;border:1px solid #c9d0d1;border-radius:12px;background:#fff;color:#263139;font-size:13px;font-weight:750}.save-button:hover{background:#edf2f1}.mix-side-panel{display:flex;flex-direction:column;min-width:0;width:100%;padding:17px 18px 18px;border-radius:22px;background:#fff}.mix-side-panel__tabs{display:grid;flex:none;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid #e3e6e5;gap:8px}.mix-side-panel__tabs button{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:49px;padding:3px 4px 10px;border:0;background:transparent;color:#737b80;font-size:14px;font-weight:700;white-space:nowrap;gap:6px}.mix-side-panel__tabs button:hover{color:#30383c}.mix-side-panel__tabs button[aria-selected=true]{color:#252b30}.mix-side-panel__tabs button[aria-selected=true]:after{position:absolute;right:8px;bottom:-1px;left:8px;height:3px;border-radius:3px;background:#323b44;content:""}.mix-side-panel__tabs span{color:#69747b;font-size:11px;font-weight:650}.mix-side-panel__view{min-height:0;padding-top:15px}.mix-side-panel__view[hidden]{display:none}.selection{min-width:0;width:100%}.selection__list{display:flex;flex-direction:column;gap:8px}.selection__empty{display:flex;flex-direction:column;align-items:flex-start;min-height:125px;padding:26px 18px;border-radius:16px;background:#f7f8f7}.selection__empty p{margin:0 0 8px;color:#51585d;font-size:13px;font-weight:650}.selection__empty>span{color:#92989b;font-size:11px}.text-action{min-height:44px;padding:0;border:0;background:transparent;color:#424c56;font-size:12px;font-weight:700}.text-action span{margin-left:8px}.selected-row{display:grid;grid-template-columns:30px minmax(0,1fr) 44px;grid-template-rows:auto auto;align-items:center;padding:9px 10px 8px 12px;border-radius:16px;background:#f6f7f6;gap:4px 10px}.selected-row--pulse{animation:row-pulse .64s ease-out}@keyframes row-pulse{0%,to{background:#f6f7f6}35%{background:#e6eaf0}}.swatch{display:inline-block;flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px #292d310e,0 1px 4px #292d3113}.swatch--category{width:26px;height:26px}.selected-row__swatch{width:29px;height:29px}.selected-row__name{display:flex;grid-column:2;grid-row:1;flex-direction:column;min-width:0;gap:1px}.selected-row__name strong{overflow:hidden;color:#292f33;font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.selected-row__name span{overflow:hidden;color:#8b9296;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.amount-picker{display:flex;grid-column:1 / -1;grid-row:2;flex-direction:column;min-width:0;gap:2px}.amount-picker__readout{display:flex;align-items:center;justify-content:space-between;padding:0 7px;color:#59646b;font-size:11px;font-weight:700}.amount-picker__readout strong{color:#303d47;font-size:12px}.eyedropper-rating{display:grid;grid-template-columns:repeat(5,minmax(0,44px));justify-content:center;gap:clamp(2px,1vw,7px)}.eyedropper-button{display:grid;place-items:center;min-width:0;min-height:48px;padding:1px 0;border:0;background:transparent}.eyedropper-button:hover:not(:disabled) .eyedropper-icon{transform:translateY(-2px) rotate(-15deg)}.eyedropper-button:disabled{opacity:.55}.eyedropper-icon{display:block;width:16px;height:46px;overflow:visible;transform:rotate(-15deg);transition:transform .15s ease}.remove-button{display:grid;grid-column:3;grid-row:1;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:#343c42;font-size:23px;font-weight:400}.remove-button:hover:not(:disabled){border-radius:12px;background:#e9eceb}.remove-button:disabled{color:#bcbfc0}.drop-note{margin:16px 2px 0;color:#8b9196;font-size:10px;line-height:1.7}.color-nav{display:flex;flex-direction:column;min-height:0;height:100%}.nav-heading{display:flex;flex:none;align-items:center;padding:20px 24px 14px;gap:10px}.nav-heading h2{margin:0;font-size:24px;font-weight:730;letter-spacing:-.06em}.nav-heading p{margin:0;color:#90969b;font-size:11px}.nav-window{min-height:0;flex:1;overflow:hidden}.nav-track{display:flex;width:200%;height:100%;transform:translate(0);transition:transform .24s cubic-bezier(.2,.75,.3,1)}.nav-track--detail{transform:translate(-50%)}.nav-page{flex:0 0 50%;min-width:0;height:100%;padding:2px 13px 22px;overflow-y:auto;scrollbar-width:thin}.nav-list{display:flex;flex-direction:column;gap:2px}.nav-row{display:flex;align-items:center;width:100%;min-height:51px;padding:7px 11px;border:0;border-radius:12px;background:transparent;color:#32373b;text-align:left;gap:13px}.nav-row:hover{background:#f1f3f1}.nav-row__name{font-size:13px;font-weight:700}.nav-row__en{margin-left:auto;color:#adb2b5;font-size:9px;font-weight:700;letter-spacing:.08em}.nav-row__arrow{color:#a4a8ab;font-size:21px;line-height:1}.nav-back{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 8px 3px;padding:0;border:0;background:transparent;color:#42505a}.nav-back span{font-size:24px}.nav-back:hover{color:#262b30}.nav-detail-heading{display:flex;align-items:center;margin:0 11px 23px;gap:12px}.nav-detail-heading h3{margin:0;font-size:23px;font-weight:740;line-height:1.1}.nav-detail-heading>div>span{color:#a1a7aa;font-size:10px;font-weight:700;letter-spacing:.1em}.nav-row--preset{min-height:57px}.nav-row__names{display:flex;flex:1;flex-direction:column;min-width:0;gap:1px}.nav-row__sub{overflow:hidden;color:#92999d;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.nav-row__add{display:grid;flex:none;place-items:center;width:27px;height:27px;border-radius:50%;background:#ebecea;color:#5a6369;font-size:18px;line-height:1}.nav-row--selected .nav-row__add{background:#dfe6e2;color:#3f6754;font-size:14px}.nav-row:disabled{opacity:.52}.drawer-shell{position:fixed;z-index:20;inset:0;visibility:hidden;pointer-events:none}.drawer-shell--open{visibility:visible;pointer-events:auto}.drawer-scrim,.modal-scrim{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#20262b40;opacity:0;transition:opacity .24s ease}.drawer-shell--open .drawer-scrim{opacity:1}.drawer{position:absolute;inset:0 auto 0 0;display:flex;flex-direction:column;width:min(88vw,360px);height:100dvh;padding-bottom:env(safe-area-inset-bottom);background:#fff;box-shadow:9px 0 30px #1b20251a;transform:translate(-101%);transition:transform .24s cubic-bezier(.2,.75,.3,1)}.drawer-shell--open .drawer{transform:translate(0)}.drawer__top{display:flex;flex:none;align-items:center;justify-content:flex-end;min-height:50px;padding:0 17px 0 24px}.icon-button{display:grid;flex:none;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:#555d62;font-size:25px}.icon-button:hover{background:#eff1f0}.drawer .nav-heading{padding-top:11px}.drawer__done{display:flex;flex:none;align-items:center;justify-content:space-between;min-height:54px;margin:10px 21px 18px;padding:0 18px;border:0;border-radius:14px;background:#24282c;color:#fff;font-size:13px;font-weight:700}.drawer__done span{font-size:17px}.modal-layer{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:18px}.modal-scrim{opacity:1}.about-modal{position:relative;width:min(100%,520px);max-height:min(86dvh,690px);padding:22px 27px 28px;overflow-y:auto;border-radius:23px;background:#fff;box-shadow:0 20px 65px #181d2126}.about-modal__heading{display:flex;align-items:center;justify-content:space-between}.about-modal h2{margin:12px 0 19px;font-size:24px;letter-spacing:-.05em}.about-modal>p{margin:0 0 13px;color:#515a61;font-size:13px;line-height:1.9}.about-modal__detail{margin-top:22px;padding:17px 18px;border-radius:15px;background:#f5f6f5}.about-modal__detail strong{font-size:12px}.about-modal__detail p{margin:6px 0 0;color:#687078;font-size:11px;line-height:1.8}.about-modal .about-modal__license{margin:20px 0 0;color:#9aa0a3;font-size:10px}.toast{position:fixed;z-index:40;right:18px;bottom:calc(20px + env(safe-area-inset-bottom));left:18px;display:flex;justify-content:center;pointer-events:none}.toast span{padding:11px 19px;border-radius:999px;background:#30363b;box-shadow:0 6px 22px #15191c26;color:#fff;font-size:12px;font-weight:700}@media(min-width:600px){.main-content__inner{padding:36px 38px 70px}.mix-canvas{width:min(100%,560px);aspect-ratio:1.45}.mix-side-panel{max-width:540px;align-self:center}}@media(orientation:landscape)and (min-width:900px)and (max-width:1279px){.main-content__inner{max-width:none;padding:20px 30px 28px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px);align-items:start;gap:24px}.stage-column{grid-column:1;grid-row:1}.hero-copy{text-align:left}.hero-copy__title{justify-content:flex-start}.hero-copy h1{margin:0 0 3px;font-size:clamp(30px,3.2vw,40px)}.canvas-wrap{margin-top:20px}.mix-canvas{width:min(100%,600px);aspect-ratio:1.55}.mix-side-panel{grid-column:2;grid-row:1;max-width:none;max-height:calc(100dvh - 40px);align-self:start}.mix-side-panel__view{overflow-y:auto}}@media(orientation:landscape)and (min-width:1280px){.mobile-only{display:none}.desktop-only{display:initial}.app-shell{--sidebar-width: clamp(282px, 20vw, 318px);display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.app-header{display:none}.app-body{display:contents}.sidebar{position:sticky;top:0;display:flex;grid-column:1;grid-row:1;flex-direction:column;height:100dvh;min-height:0;background:#fff}.main-content{grid-column:2;grid-row:1}.main-content__inner{max-width:none;margin:0;padding:22px clamp(24px,3vw,54px) 30px}.hero-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;text-align:left}.hero-copy__title{justify-content:flex-start}.hero-copy__mark{width:31px;height:31px}.hero-copy h1{margin:0 0 3px;font-size:clamp(31px,2.7vw,47px)}.hero-copy p{grid-column:1 / -1;padding-left:41px}.hero-copy .about-link{position:static;grid-column:2;grid-row:1;margin-left:8px}.workspace{display:flex;flex-direction:column;align-items:stretch;gap:16px}.stage-column{width:100%}.canvas-wrap{margin-top:23px}.mix-canvas{width:min(100%,640px);aspect-ratio:1.55}.stage-actions{margin-top:19px}.mix-side-panel{max-width:560px;align-self:center}.result-copy{margin-top:15px}.drawer-shell{display:none}}@media(orientation:landscape)and (min-width:1480px){.about-link__full{display:inline}.about-link__short{display:none}}@media(orientation:landscape)and (min-width:900px){.selection__list{gap:5px}.selected-row{grid-template-columns:25px minmax(0,1fr) 36px;padding:5px 8px;gap:0 8px}.selected-row__swatch{width:25px;height:25px}.remove-button{width:36px;height:36px}.eyedropper-button{min-height:44px;padding:0}.eyedropper-icon{width:15px;height:44px}}@media(orientation:landscape)and (min-width:1280px){.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,370px);align-items:start;gap:clamp(20px,2.8vw,48px)}.stage-column{grid-column:1;grid-row:1}.mix-side-panel{grid-column:2;grid-row:1;max-width:none;align-self:stretch}}@media(orientation:landscape)and (min-width:1280px)and (min-height:780px){.app-shell{height:100dvh;min-height:0;overflow:hidden}.main-content{min-height:0}.main-content__inner,.workspace{height:100%;min-height:0}.workspace{grid-template-rows:minmax(0,1fr)}.mix-side-panel{height:100%;min-height:0;overflow:hidden}.mix-side-panel__view{flex:1;min-height:0;overflow-y:auto}.mix-side-panel__view--saved{overflow:hidden}.saved-mixes{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.saved-mixes__list{flex:1;min-height:0;max-height:none}}@media(max-width:410px){.app-header__inner{padding:0 13px;gap:8px}.about-link{font-size:11px}.mix-button{font-size:14px}.reset-button{flex-basis:94px;font-size:12px}.mix-side-panel{padding:14px 12px}.mix-side-panel__tabs button{font-size:13px}.selected-row{grid-template-columns:26px minmax(0,1fr) 44px;gap:4px 8px;padding:8px 8px 8px 11px}.selected-row__swatch{grid-column:1;grid-row:1;width:26px;height:26px}}@media(max-width:340px){.main-content__inner{padding-right:12px;padding-left:12px}.mix-button{font-size:13px}.reset-button{flex-basis:88px}}@media(max-width:599px)and (max-height:700px){.app-header__inner{min-height:60px}.main-content__inner{padding-top:14px}.hero-copy h1{margin:4px 0;font-size:clamp(26px,7.8vw,34px);line-height:1.15}.hero-copy p{font-size:14px;line-height:1.35}.canvas-wrap{margin-top:12px}.mix-canvas{aspect-ratio:1.2}.stage-actions{margin-top:12px;gap:6px}.choose-button{min-height:42px}.mix-button,.reset-button{min-height:48px}.result-copy{margin-top:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}.nav-track,.drawer,.drawer-scrim,.mix-button,.eyedropper-icon{transition-duration:.01ms}.result-surface,.result-copy__inner,.selected-row--pulse{animation-duration:.13s}}.reduced-mix-surface{animation:reduced-reveal .13s linear both}@keyframes reduced-reveal{0%{opacity:0}to{opacity:1}}.saved-mixes{width:100%;min-width:0}.saved-mixes__head{display:flex;align-items:center;justify-content:flex-end;gap:10px}.saved-mixes__tools{display:flex;align-items:center;gap:3px}.saved-mixes__tools button{min-height:40px;padding:0 7px;border:0;background:transparent;color:#3f5969;font-size:12px;font-weight:700}.saved-mixes__tools button:hover{text-decoration:underline}.saved-mixes__empty{margin:12px 0 0;color:#5c656a;font-size:13px}.saved-mixes__list{display:flex;flex-direction:column;gap:5px;max-height:min(60dvh,640px);margin-top:8px;overflow-y:auto}.saved-mix{display:flex;align-items:center;min-width:0;padding:6px 7px;border-radius:11px;background:#f5f6f5;gap:7px}.saved-mix__swatch{flex:none;width:27px;height:27px;border-radius:7px}.saved-mix__info{display:flex;flex:1;flex-direction:column;min-width:0;gap:3px}.saved-mix__info strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.saved-mix__info time{color:#69747b;font-size:10px}.saved-mix>button{flex:none;min-height:34px;padding:0 5px;border:0;background:transparent;color:#35434d;font-size:12px;font-weight:700}.saved-mix>button:last-child{width:30px;font-size:20px}.saved-mixes__pages{display:flex;flex:none;align-items:center;justify-content:center;min-height:42px;padding-top:5px;gap:16px}.saved-mixes__pages button{min-width:44px;min-height:36px;padding:0 5px;border:0;background:transparent;color:#384f60;font-size:12px;font-weight:700}.saved-mixes__pages button:disabled{color:#a5adb0}.saved-mixes__pages span{color:#5f6b72;font-size:12px;font-weight:700}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(orientation:landscape)and (min-width:1280px)and (min-height:780px){.saved-mixes__list{flex:1;min-height:0;max-height:none}}