@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap";:root{color:#26251f;font-synthesis:none;--ink:#25251f;--muted:#716e63;--paper:#fbf8f1;--line:#d9d1c2;--rust:#b14e32;--green:#435b4b;background:#f4efe6;font-family:DM Sans,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background-color:#f4efe6;background-image:linear-gradient(90deg,#483a2306 1px,#0000 1px),none;background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:48px 48px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;margin:0}button,a{font:inherit}button{cursor:pointer}header{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:#f4efe6eb;justify-content:space-between;align-items:center;height:86px;padding:0 max(5vw,24px);display:flex;position:sticky;top:0}.brand{color:var(--ink);align-items:center;gap:10px;line-height:.95;text-decoration:none;display:flex}.brand-mark{background:var(--rust);color:#fff;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.brand span:last-child{font-family:Playfair Display,serif;font-size:17px}.brand b{font-style:italic}nav{gap:34px;display:flex}nav a{color:#59574f;font-size:14px;font-weight:600;text-decoration:none}.ghost,.secondary,.primary{border:0;border-radius:999px;justify-content:center;align-items:center;gap:9px;font-weight:700;display:inline-flex}.ghost{color:var(--ink);background:0 0;padding:10px 14px}.count{background:#dfd7c9;border-radius:20px;padding:2px 8px;font-size:11px}.primary{background:var(--rust);color:#fff;padding:15px 23px;box-shadow:0 7px 20px #8e371f2e}.primary:disabled{opacity:.45}.secondary{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:13px 19px}main{overflow:hidden}.hero{text-align:center;max-width:900px;margin:0 auto;padding:92px 24px 54px}.eyebrow,.kicker{letter-spacing:.17em;color:var(--rust);font-size:11px;font-weight:800}.eyebrow{background:#f8eae3;border:1px solid #d7a28f;border-radius:50px;align-items:center;gap:7px;padding:8px 12px;display:inline-flex}.hero h1{letter-spacing:-.035em;margin:25px 0 22px;font-family:Playfair Display,serif;font-size:clamp(48px,7vw,78px);line-height:1.03}.hero h1 em{color:var(--rust);font-weight:600}.hero>p{color:var(--muted);max-width:670px;margin:0 auto 30px;line-height:1.75}.hero-actions{justify-content:center;align-items:center;gap:23px;display:flex}.text-link{color:var(--ink);text-underline-offset:5px;align-items:center;gap:7px;font-size:14px;font-weight:700;display:flex}.upload-stage{background:#fbf8f19e;border:1px dashed #b8ad9b;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;max-width:1080px;min-height:390px;margin:0 auto 110px;transition:all .2s;display:flex;box-shadow:0 20px 50px #382e1c0d}.upload-stage.dragging{border-color:var(--rust);background:#efe1d6;transform:scale(1.005)}.upload-icon{width:76px;height:76px;color:var(--rust);background:#e8ded0;border-radius:50%;place-items:center;margin-bottom:16px;display:grid}.upload-icon svg{width:31px;height:31px}.upload-stage h2{margin:4px;font-family:Playfair Display,serif;font-size:29px}.upload-stage p{color:var(--muted);margin:8px 0 22px}.upload-stage small{color:#969186;margin-top:15px}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.paint-section{color:#f7f2e9;background:#2c342e;padding:105px max(5vw,24px)}.section-heading{justify-content:space-between;align-items:end;max-width:1180px;margin:auto;display:flex}.section-heading h2,.steps h2,.recipe h2,.palette-panel h2{margin:10px 0;font-family:Playfair Display,serif;font-size:38px}.section-heading p{color:#aeb7ae}.paint-section .secondary{background:#f6f0e6}.paint-grid{grid-template-columns:repeat(4,1fr);gap:18px;max-width:1180px;margin:40px auto 0;display:grid}.paint-card,.add-card{color:#fff;text-align:left;background:#374139;border:1px solid #ffffff21;border-radius:18px;min-height:215px;padding:13px;position:relative}.paint-swatch{border-radius:12px;height:124px;position:relative;overflow:hidden}.paint-swatch img{object-fit:cover;width:100%;height:100%}.paint-swatch span{border:3px solid #fff;border-radius:50%;width:30px;height:30px;position:absolute;bottom:10px;right:10px;box-shadow:0 2px 5px #0005}.paint-card>div:nth-child(2){flex-direction:column;padding:13px 4px 0;display:flex}.paint-card small{color:#aeb7ae;margin-top:4px;font-size:11px}.paint-card>button{color:#89968c;background:0 0;border:0;position:absolute;bottom:17px;right:13px}.add-card{color:#dfe5df;background:0 0;border-style:dashed;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex}.add-card>svg{background:#435047;border-radius:50%;width:48px;height:48px;padding:13px}.add-card small{color:#909b92}.steps{text-align:center;max-width:1180px;margin:auto;padding:110px 24px}.step-grid{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px;display:grid}.step-grid>div{text-align:left;border-top:1px solid var(--line);padding:26px 18px;position:relative}.step-grid>div>span{color:#c8c0b2;font-family:Playfair Display;font-size:25px;position:absolute;right:15px}.step-grid svg{color:var(--rust);width:29px;height:29px}.step-grid h3{font-family:Playfair Display;font-size:21px}.step-grid p{color:var(--muted);font-size:14px;line-height:1.6}footer{border-top:1px solid var(--line);min-height:130px;color:var(--muted);justify-content:space-between;align-items:center;padding:30px max(5vw,24px);font-size:12px;display:flex}.analysis-stage{max-width:1180px;margin:0 auto 110px;padding:0 24px}.analysis-top{background:var(--paper);border:1px solid var(--line);border-radius:25px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.reference{background:#ddd;height:440px;position:relative}.reference img{object-fit:cover;width:100%;height:100%}.reference button{background:#fff;border:0;border-radius:50px;align-items:center;gap:6px;padding:9px 13px;display:flex;position:absolute;top:16px;right:16px}.palette-panel{padding:70px 54px}.palette-panel p{color:var(--muted)}.color-row{gap:10px;margin-top:30px;display:flex}.color-row button{border:3px solid #0000;border-radius:11px;flex:1;height:75px;position:relative;box-shadow:inset 0 0 0 1px #0001}.color-row button.selected{outline:2px solid var(--rust);border-color:#fff;transform:translateY(-5px)}.color-row span{background:#fff;border-radius:4px;padding:3px;font-size:8px;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}.recipe{border:1px solid var(--line);background:#fbf8f1;border-radius:25px;margin-top:20px;padding:42px}.recipe-title{justify-content:space-between;align-items:center;display:flex}.match{border:6px solid #d5decf;border-top-color:var(--green);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:78px;height:78px;display:flex}.match b{font-size:17px}.match span{color:var(--muted);font-size:8px}.mix-flow{background:#f1eadf;border-radius:18px;align-items:center;gap:23px;margin:25px 0;padding:25px;display:flex}.target-chip{text-align:center;min-width:90px}.target-chip>span{border:4px solid #fff;border-radius:50%;width:72px;height:72px;margin:auto;display:block;box-shadow:0 2px 8px #0002}.target-chip small{color:var(--muted);margin-top:8px;font-size:8px;display:block}.target-chip b{font-size:11px}.operator{color:#a79e90;flex-shrink:0}.ingredients{flex:1;gap:10px;display:flex}.ingredients>div{background:var(--paper);border:1px solid var(--line);border-radius:12px;flex:1;align-items:center;gap:10px;padding:10px;display:flex;position:relative}.ingredients>div>span{border-radius:50%;flex-shrink:0;width:37px;height:37px}.ingredients p{color:var(--muted);flex-direction:column;margin:0;font-size:10px;display:flex}.ingredients p b{color:var(--ink);font-size:13px}.ingredients small{color:var(--rust);font-weight:700;position:absolute;top:7px;right:7px}.tip{color:var(--green);background:#edf0e9;border-radius:12px;gap:12px;padding:15px 18px;display:flex}.tip p{flex-direction:column;margin:0;font-size:12px;line-height:1.5;display:flex}.save{margin-top:20px}.empty-recipe{text-align:center;background:var(--paper);border-radius:20px;margin-top:20px;padding:50px}.modal-backdrop,.drawer-backdrop{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1e211dbb;place-items:center;display:grid;position:fixed;inset:0}.modal{background:var(--paper);border-radius:24px;width:min(480px,100% - 32px);padding:36px;position:relative}.modal h2,.drawer h2{margin:8px 0;font-family:Playfair Display;font-size:32px}.modal>p{color:var(--muted);font-size:13px;line-height:1.5}.modal-close,.drawer-head button{background:#ece5da;border:0;border-radius:50%;place-items:center;width:38px;height:38px;display:grid;position:absolute;top:22px;right:22px}.modal label{flex-direction:column;gap:7px;margin:14px 0;font-size:12px;font-weight:700;display:flex}.modal label input{border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px}.photo-input{height:110px;color:var(--muted);border:1px dashed #b9ad9b;border-radius:13px;justify-content:center;overflow:hidden;align-items:center!important}.photo-input img{object-fit:cover;opacity:.25;width:calc(100% - 72px);height:110px;position:absolute}.photo-input span,.photo-input svg{z-index:1}.color-input{gap:8px;display:flex}.color-input input[type=color]{width:54px;padding:3px}.color-input input:last-child{flex:1}.full{width:100%;margin-top:8px}.drawer-backdrop{place-items:stretch end}.drawer{background:var(--paper);width:min(460px,100%);height:100%;padding:35px;overflow:auto}.drawer-head{border-bottom:1px solid var(--line);margin-bottom:20px;display:flex;position:relative}.history-list{flex-direction:column;gap:10px;display:flex}.history-list>button{text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;align-items:center;gap:13px;padding:8px;display:flex}.history-list img,.history-list>button>div{object-fit:cover;background:#ddd;border-radius:8px;width:70px;height:70px}.history-list>button>span{flex-direction:column;flex:1;gap:3px;display:flex}.history-list small{color:var(--muted)}.history-list i{gap:2px;margin-top:5px;display:flex}.history-list em{border-radius:50%;width:15px;height:15px}.go{color:#aaa;transform:rotate(180deg)}.clear{color:var(--rust);background:0 0;border:0;gap:6px;margin:20px auto;display:flex}.empty-history{text-align:center;color:var(--muted);margin:100px 20px}@media (width<=800px){header nav{display:none}.hero{padding-top:60px}.hero-actions{flex-direction:column}.upload-stage{min-height:330px;margin:0 16px 70px}.paint-grid{grid-template-columns:repeat(2,1fr)}.section-heading{flex-direction:column;align-items:flex-start;gap:20px}.step-grid,.analysis-top{grid-template-columns:1fr}.reference{height:330px}.palette-panel{padding:35px 25px}.mix-flow{overflow:auto}.ingredients{min-width:420px}.recipe{padding:25px 16px}.recipe-title h2{font-size:28px}footer{text-align:center;flex-direction:column;gap:20px}}@media (width<=480px){.ghost{font-size:0}.ghost .count{font-size:11px}.hero h1{font-size:43px}.paint-grid{grid-template-columns:1fr}.paint-card,.add-card{min-height:190px}.reference{height:280px}.analysis-stage{padding:0 12px}.color-row button{height:60px}.palette-panel h2{font-size:30px}}.paint-card>.paint-actions{gap:2px;padding:0;display:flex;position:absolute;bottom:12px;right:10px}.paint-actions button{color:#9aa59d;background:0 0;border:0;border-radius:50%;place-items:center;width:30px;height:30px;display:grid}.paint-actions button:hover{color:#fff;background:#ffffff12}.compression-badge{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;background:#202721e0;border-radius:10px;align-items:center;gap:7px;padding:9px 12px;font-size:10px;display:flex;position:absolute;bottom:16px;left:16px}.compression-badge b{color:#bcd2b9}.upload-error,.form-error{color:#913d29;background:#f7dfd8;border-radius:9px;margin-top:15px;padding:10px 14px;font-size:12px}.form-error{margin-top:0}.photo-input span{text-align:center;padding:0 10px}@media (width<=480px){.compression-badge span{display:none}}.history-item{border:1px solid var(--line);background:#fff;border-radius:12px;align-items:center;gap:5px;padding:8px;display:flex}.history-open{text-align:left;background:0 0;border:0;flex:1;align-items:center;gap:13px;min-width:0;padding:0;display:flex}.history-list img,.history-placeholder{object-fit:cover;background:#ddd;border-radius:8px;flex:0 0 70px;width:70px;height:70px}.history-open>span{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.history-open b{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.go{flex-shrink:0}.history-delete{width:38px;height:38px;color:var(--rust);background:#f7ebe7;border:0;border-radius:50%;flex:0 0 38px;place-items:center;display:grid}.history-delete:hover{background:#edd7cf}.history-group{flex-direction:column;gap:7px;display:flex}.history-child{background:#f8f3ea;margin-left:30px;position:relative}.history-child:before{content:"";border-bottom:1px solid #c8bcaa;border-left:1px solid #c8bcaa;border-radius:0 0 0 8px;width:12px;height:47px;position:absolute;top:-8px;left:-18px}.history-child .history-open img,.history-child .history-placeholder{flex-basis:54px;width:54px;height:54px}.history-child .go{display:none}.analysis-name{color:var(--muted);letter-spacing:.06em;flex-direction:column;gap:6px;margin:18px 0 25px;font-size:11px;font-weight:800;display:flex}.analysis-name input,.history-search input{border:1px solid var(--line);color:var(--ink);font:inherit;background:#fff;border-radius:10px;padding:12px}.history-search{border:1px solid var(--line);color:var(--muted);background:#fff;border-radius:12px;align-items:center;gap:8px;margin-bottom:16px;padding:0 12px;display:flex}.history-search input{border:0;outline:0;flex:1;min-width:0;padding:13px 0}.search-empty{margin:70px 20px}.palette-mode{background:#eee7dc;border-radius:10px;gap:5px;margin-bottom:22px;padding:4px;display:flex}.palette-mode button{color:var(--muted);background:0 0;border:0;border-radius:7px;flex:1;justify-content:center;align-items:center;gap:6px;padding:9px;font-size:12px;font-weight:700;display:flex}.palette-mode button.active{color:var(--rust);background:#fff;box-shadow:0 2px 8px #59452d14}.palette-mode button:disabled{opacity:.65}.mix-limit{border:1px solid var(--line);background:#f3ede3;border-radius:12px;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px;padding:13px 15px;display:flex}.mix-limit>div:first-child{flex-direction:column;gap:3px;display:flex}.mix-limit small{color:var(--muted);font-size:10px}.mix-limit>div:last-child{align-items:center;gap:8px;display:flex}.mix-limit button{border:1px solid var(--line);width:30px;height:30px;color:var(--rust);background:#fff;border-radius:50%;place-items:center;display:grid}.mix-limit button:disabled{opacity:.35}.mix-limit strong{text-align:center;min-width:20px;font-size:18px}.reference{background:#e6dfd3;justify-content:center;align-items:center;display:flex}.reference img{object-fit:contain}.cutout-preview{background-color:#eee9df;background-image:linear-gradient(45deg,#d8d1c5 25%,#0000 25%),linear-gradient(-45deg,#d8d1c5 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d8d1c5 75%),linear-gradient(-45deg,#0000 75%,#d8d1c5 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}.preview-switch{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#242820cc;border-radius:50px;gap:3px;padding:4px;display:flex;position:absolute;top:16px;left:16px}.reference .preview-switch button{color:#fff;background:0 0;border:0;border-radius:50px;padding:7px 11px;font-size:10px;font-weight:700;position:static}.reference .preview-switch button.active{color:var(--rust);background:#fff}.subject-processing{color:#fff;background:#242820dd;border-radius:50px;align-items:center;gap:8px;padding:10px 14px;font-size:11px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.recipe-controls{grid-template-columns:minmax(210px,.75fr) 1.25fr;gap:12px;margin-bottom:14px;display:grid}.recipe-controls .mix-limit{margin:0}.unit-control{border:1px solid var(--line);background:#f3ede3;border-radius:12px;flex-direction:column;gap:5px;padding:13px 15px;display:flex}.unit-control label{font-size:12px;font-weight:700}.unit-control select{border:1px solid var(--line);width:100%;color:var(--ink);font:inherit;background:#fff;border-radius:8px;padding:8px}.unit-control small{color:var(--muted);font-size:9px;line-height:1.35}@media (width<=700px){.recipe-controls{grid-template-columns:1fr}}