@font-face{font-family:PeonySans;src:local('Avenir Next'),local('Avenir'),local('Helvetica Neue');font-display:swap}
:root{
  --ink:#231a43;--muted:#625976;--paper:#f1f0ff;--line:rgba(92,67,155,.14);
  --accent:#7439e6;--pink:#d42591;--plum:#7439e6;--white:#fff;
  --glass:rgba(255,255,255,.65);--glass-strong:rgba(255,255,255,.85);
  --gradient:linear-gradient(120deg,#d52b91 0%,#8b3de8 57%,#5559e9 100%);
  --shadow:0 16px 50px #6350a414,0 2px 8px #6350a408;
  font-family:PeonySans,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light;
}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:transparent}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 2% 13%,#ff7bc361,transparent 42%),radial-gradient(ellipse at 94% 26%,#9c7aff69,transparent 45%),radial-gradient(ellipse at 13% 91%,#65e7ed57,transparent 44%),radial-gradient(ellipse at 75% 100%,#e292ff44,transparent 40%),#f1f0ff}
button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer;border:0;background:none}button:disabled{opacity:.38;cursor:default}button:active:not(:disabled){transform:translateY(1px)}button,a,input,select,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #8642ed;outline-offset:4px}[hidden]{display:none!important}a{color:inherit}input::placeholder{color:#81758f}
svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}span[data-icon]{display:inline-flex;align-items:center}p{line-height:1.65}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:inherit}h1{font-size:clamp(42px,4.5vw,62px);line-height:1.06;letter-spacing:-2.9px;font-weight:750;margin-bottom:0}h1 em{font-style:normal;color:var(--accent);background:var(--gradient);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}h2{font-size:27px;letter-spacing:-1.1px;font-weight:650;line-height:1.2;margin-bottom:0}h3{font-size:23px;font-weight:600;letter-spacing:-.7px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:750;color:var(--accent);margin-bottom:13px;line-height:1.3}
.topbar,.preview-panel,.controls-panel,.inspiration{border:1px solid #ffffffc7;background:var(--glass);box-shadow:var(--shadow),inset 0 1px 0 #ffffff;backdrop-filter:blur(25px) saturate(145%);-webkit-backdrop-filter:blur(25px) saturate(145%)}
.topbar{max-width:1180px;margin:20px auto 0;padding:13px 25px;display:flex;justify-content:space-between;align-items:center;border-radius:24px}.brand{display:flex;align-items:center;gap:20px;text-decoration:none}.brand img{width:58px;height:63px;object-fit:contain}.brand span{font-size:9px;letter-spacing:1.8px;padding-left:21px;border-left:1px solid #957ba630;color:var(--muted);line-height:1.7;max-width:130px}.top-actions{display:flex;align-items:center;gap:24px}.private-note{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:9px}.private-note i,.photo-label i{width:6px;height:6px;border-radius:50%;background:#8e4de1;box-shadow:0 0 0 4px #9861ea16}.quiet-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;min-height:44px;padding:8px 11px;border-radius:12px}.quiet-button:hover{background:#8642ed0a}.quiet-button b{font-weight:650;border-radius:8px;background:#efe4ff;color:#7031cd;font-size:10px;margin-left:5px;padding:4px 7px}#savedTop{border:1px solid #ffffff;background:#ffffff73;box-shadow:0 3px 10px #7547a40a}.small{font-size:11px!important}
.icon-button{min-width:46px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffffdd;border-radius:16px;background:#ffffff8c;box-shadow:0 2px 8px #633a8910}.primary,.secondary{min-height:46px;padding:12px 19px;border-radius:14px;display:inline-flex;justify-content:center;align-items:center;gap:9px;font-size:12px;font-weight:650}.primary{background:var(--gradient);color:#fff;border:1px solid #ffffff38;box-shadow:0 6px 20px #9c43d82b,inset 0 1px 0 #ffffff44}.primary:hover{filter:brightness(1.05)}.secondary{background:#ffffff8c;border:1px solid #ffffff;color:#58368d;box-shadow:0 3px 10px #8060ad0b}.secondary:hover{background:#fff}.full{width:100%;margin-top:12px}
main{max-width:1260px;margin:auto;padding:0 40px}.intro{display:flex;justify-content:space-between;align-items:end;padding:36px 4px 28px}.intro .eyebrow{display:inline-flex;gap:7px;align-items:center;letter-spacing:1.7px}.intro .eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:#da37a7;box-shadow:0 0 12px #dd3aaf77}.intro>p{font-size:12px;line-height:1.85;color:var(--muted);margin:0 4px 3px 25px}.workspace{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:24px;align-items:start}.preview-panel{position:sticky;top:16px;border-radius:28px;padding:16px}.preview-top{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}.photo-label{display:flex;align-items:center;gap:8px;font-size:10px;color:#5c4979;letter-spacing:.1px}.preview-top .quiet-button{color:#7031cd;background:#ece1ff9c;border:1px solid #fff;min-height:36px;padding:8px 12px;border-radius:12px}.photo-stage{position:relative;overflow:hidden;border:1px solid #ffffff88;border-radius:20px;background:linear-gradient(135deg,#ddcbff,#ecc6f0 50%,#c2e9fa);isolation:isolate;min-height:180px}.photo-stage>canvas{display:block;width:100%;height:auto}.photo-stage #overlay{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;outline-offset:-4px;background:transparent}.photo-stage.editing #overlay{touch-action:none;cursor:crosshair}.stage-caption{position:absolute;bottom:16px;left:16px;color:#fff;background:#21133855;border:1px solid #ffffff4a;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:16px;padding:12px 16px;pointer-events:none;max-width:calc(100% - 32px);box-shadow:0 4px 18px #160b3422}.stage-caption span{font-size:7px;letter-spacing:1.8px;display:block;margin-bottom:5px;font-weight:600;color:#ffffffd9}.stage-caption strong{font-size:23px;font-weight:600;letter-spacing:-.6px}.compare{position:absolute;top:12px;right:12px;background:#fffc;border:1px solid #ffffffe0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:20px;font-size:10px;min-height:38px;display:flex;align-items:center;gap:7px;padding:9px 13px;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:0 3px 12px #22113612;color:#39235f}.compare svg{width:14px;height:14px}.edit-badge{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);border-radius:16px;padding:8px 12px;background:#6432d6e6;backdrop-filter:blur(12px);color:white;font-size:10px;white-space:nowrap;pointer-events:none;border:1px solid #ffffff66}.editing .stage-caption{display:none}.preview-actions{display:grid;grid-template-columns:46px 1fr 1.2fr;gap:8px;padding-top:13px}.preview-disclaimer{font-size:9px;text-align:center;color:var(--muted);margin:11px 3px 1px}
.controls-panel{min-width:0;padding:18px 24px 24px;border-radius:28px}.tabs{display:flex;justify-content:space-between;gap:7px;background:#e8dff65c;padding:5px;border:1px solid #ffffff88;border-radius:17px}.tabs button{min-height:43px;display:flex;gap:7px;align-items:center;justify-content:center;font-size:11px;position:relative;padding:9px;flex:1;color:var(--muted);border-radius:12px;white-space:nowrap}.tabs button.active{color:#7431cf;background:#ffffffed;box-shadow:0 3px 12px #7b4e9820;font-weight:700}.tabs button.active svg{color:#ac38d6}.tabs svg{width:16px;height:16px}.scope-row{display:flex;align-items:center;gap:10px;margin:18px 0 25px;font-size:11px;color:var(--muted)}.segmented{display:flex;padding:3px;background:#e8def77d;border:1px solid #ffffff88;border-radius:12px}.segmented button{font-size:10px;min-height:30px;padding:7px 14px;border-radius:9px}.segmented button.active{background:#fff;color:#7331ca;box-shadow:0 2px 6px #60338c12;font-weight:650}select{border:1px solid #d8c8f0;background:#ffffffb3;padding:9px;border-radius:10px;font-size:12px;color:var(--ink);max-width:100%}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px;gap:12px}.section-heading .eyebrow{font-size:9px;letter-spacing:1.6px;margin-bottom:9px}.count{font-size:9px;line-height:1.7;color:var(--muted);text-align:right;flex-shrink:0}.selected-color{display:flex;align-items:center;gap:12px;padding:13px;background:linear-gradient(125deg,#fbd9f175,#e7deff99);border:1px solid #ffffffed;border-radius:18px;margin-bottom:17px;box-shadow:inset 0 1px 0 #fff}.selected-color>span{display:block;width:42px;height:42px;border-radius:14px;box-shadow:inset 0 0 0 1px #ffffffaa,0 4px 9px #49276215;flex-shrink:0}.selected-color strong{display:block;font-size:12px;font-weight:650}.selected-color small{display:block;font-size:9px;color:var(--muted);margin-top:5px;letter-spacing:.4px}.selected-color button{margin-left:auto;font-size:10px;color:#7530c3}
.color-filter{display:flex;gap:6px;overflow:auto;padding-bottom:8px;scrollbar-width:none}.color-filter button{border:1px solid #ffffffba;background:#ffffff6e;border-radius:20px;min-height:35px;white-space:nowrap;font-size:10px;padding:8px 13px;color:var(--muted)}.color-filter button.active{background:var(--gradient);border-color:#ffffff60;color:white;box-shadow:0 3px 10px #8a35d426;font-weight:650}.search{display:flex;align-items:center;gap:8px;border:1px solid #ffffffd9;background:#ffffff8c;border-radius:12px;padding:0 12px;margin:5px 0 16px;color:var(--muted)}.search svg{height:15px;width:15px}.search input{width:100%;padding:10px 0;font-size:11px;min-height:40px;border:0;background:none;outline-offset:0;color:var(--ink)}.search>span:last-child{font-size:10px;color:#8b689d}.color-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 6px;max-height:350px;overflow:auto;padding:7px 3px 10px;scrollbar-width:thin;scrollbar-color:#c6ace7 transparent}.color-card{padding:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;border-radius:12px}.color-card i{width:38px;height:46px;display:block;border-radius:18px 18px 14px 14px;border:1px solid #ffffff99;box-shadow:inset 5px 0 7px #ffffff55,inset -4px 0 6px #00000014,0 5px 10px #53337414;position:relative}.color-card i:after{content:'';position:absolute;left:7px;top:6px;width:4px;height:18px;border-radius:100%;background:#ffffff8f}.color-card.active i{outline:2px solid #a448e4;outline-offset:4px;box-shadow:inset 5px 0 7px #ffffff55,0 4px 16px #9b42d038}.color-card span{font-size:9px;line-height:1.4;text-align:center;max-width:66px;min-height:26px}.color-card:hover i{transform:translateY(-2px)}.color-card.active span{color:#7431cf;font-weight:650}
.custom-colors{border:1px solid #ffffffed;border-radius:17px;margin-top:14px;background:linear-gradient(120deg,#ffffff90,#e9dfff73);box-shadow:0 3px 15px #76459b08}.custom-colors summary{display:flex;gap:12px;align-items:center;padding:15px;cursor:pointer;list-style:none;font-size:11px;font-weight:600}.custom-colors summary::-webkit-details-marker{display:none}.custom-colors summary small{display:block;font-size:9px;font-weight:400;color:var(--muted);margin-top:5px}.spectrum-dot{width:31px;height:31px;border-radius:50%;background:conic-gradient(#fc3897,#ffd76b,#78e0a4,#67d8ff,#9274ff,#fc3897);flex-shrink:0;border:3px solid #ffffffaa;box-shadow:0 4px 12px #ad63d62b}.plus{margin-left:auto;font-size:20px;font-weight:400;color:#8c43d8}.custom-inner{padding:0 15px 15px}.spectrum{position:relative;height:130px;border-radius:10px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),#ff0033;touch-action:none;cursor:crosshair}.spectrum>span{position:absolute;border:2px solid white;border-radius:50%;width:15px;height:15px;box-shadow:0 0 0 1px #0007;transform:translate(-50%,-50%);pointer-events:none}.hue-label{font-size:10px;display:flex;align-items:center;gap:15px;margin:15px 0}.hue-label input{appearance:none;-webkit-appearance:none;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);height:10px;border-radius:5px;width:100%}input[type=range]{accent-color:var(--accent);cursor:pointer}.custom-fields{display:flex;align-items:end;gap:10px}.custom-fields label{font-size:9px;letter-spacing:1px}.custom-fields input[type=text],#hexInput{display:block;min-height:42px;max-width:125px;width:100%;border:1px solid #d2bfe5;background:#fff9;border-radius:9px;padding:8px;font-size:12px;margin-top:6px;text-transform:uppercase;color:var(--ink)}.custom-fields button{min-height:42px}.native-color{flex-shrink:0}.native-color input{display:block;width:62px;height:42px;border:0;padding:0;background:none;margin-top:6px}.error{color:#ae1757;font-size:11px;margin:12px 0 0}
.style-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px 9px}.style-card{padding:14px 3px 10px;border:1px solid #ffffffdd;border-radius:16px;background:#ffffff85;min-width:0;box-shadow:inset 0 1px 0 #fff,0 4px 9px #62308005}.style-card.active{border-color:#b67bea;background:linear-gradient(140deg,#f8dbf09c,#e7d8ffcc);box-shadow:0 0 0 1px #c891f133,0 4px 12px #9d50cb16}.style-card canvas{width:38px;height:54px;display:block;margin:0 auto 8px}.style-card span{font-size:9px}.accent-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px;font-size:11px;gap:10px}.accent-row label{display:flex;align-items:center;gap:10px}.accent-row input{width:34px;height:32px;border:0;background:none;padding:0}.accent-row>span{font-size:9px;color:var(--muted)}.range-row{display:grid;grid-template-columns:1fr auto;font-size:11px;margin:26px 0;align-items:center;gap:12px}.range-row output{color:var(--muted);font-size:10px}.range-row input{grid-column:span 2;width:100%;min-height:24px;margin:0}.select-row{display:flex;align-items:center;justify-content:space-between;font-size:11px}.fit-instruction,.helper{font-size:12px;color:var(--muted);line-height:1.7}.fit-buttons{display:flex;justify-content:space-between;gap:8px}.helper{margin:20px 0}.empty{font-size:12px;padding:20px;text-align:center;color:var(--muted)}.empty-state{padding:38px 10px;text-align:center}.empty-state>span{background:linear-gradient(130deg,#f8d1ec,#ddcaff);border:1px solid #fff;border-radius:22px;padding:18px;margin-bottom:20px;color:#9942c4}.empty-state h3{font-size:22px;margin-bottom:14px}.empty-state p{font-size:12px;color:var(--muted)}.saved-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.saved-card{position:relative;border:1px solid #fff;border-radius:17px;overflow:hidden;background:#ffffff85;box-shadow:0 5px 15px #6b3b9810}.saved-card>button:first-child{padding:0;width:100%;text-align:left}.saved-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.saved-card strong,.saved-card small{display:block;margin:9px 12px}.saved-card strong{font-size:12px}.saved-card small{font-size:10px;color:var(--muted);margin-bottom:14px}.saved-card .delete-saved{position:absolute;top:7px;right:7px;border-radius:50%;width:33px;height:33px;background:#ffffffe0;backdrop-filter:blur(12px);font-size:18px;color:#663d8e}
.inspiration{border-radius:28px;margin-top:26px;padding:25px}.inspiration .section-heading>p{font-size:11px;color:var(--muted);margin:0}.look-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.look-card{padding:0;text-align:left;min-width:0}.look-art{border-radius:18px;background:linear-gradient(140deg,#edcafa,#d0e9ff);border:1px solid #ffffffb5;box-shadow:inset 0 1px 0 #ffffffc9,0 7px 18px #85489c0b;height:138px;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;position:relative}.look-art:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#ffffff5c,transparent 50%);pointer-events:none}.look-art canvas{width:36px;height:66px;filter:drop-shadow(1px 7px 6px #48226627)}.look-art canvas:nth-child(1){transform:translateY(8px) rotate(-9deg)}.look-art canvas:nth-child(3){transform:translateY(9px) rotate(9deg)}.look-card small{font-size:7px;letter-spacing:1px;color:#805790;display:block;margin:13px 0 6px;font-weight:650}.look-card strong{font-size:14px;font-weight:600;display:block;line-height:1.35;letter-spacing:-.25px}.look-card:hover .look-art{box-shadow:0 0 0 2px #b375df7a,0 6px 18px #85489c17}footer{display:flex;align-items:center;gap:14px;margin-top:16px;padding:15px 6px 25px;color:var(--muted);font-size:10px}footer img{width:23px;height:23px}footer button{margin-left:auto;font-size:10px!important}
dialog{border:1px solid #fff;border-radius:27px;background:linear-gradient(135deg,#fcf5ffed,#eeecffeb);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);color:var(--ink);padding:38px 28px 26px;width:min(92vw,430px);max-height:90dvh;overflow:auto;box-shadow:0 25px 100px #5224783b,inset 0 1px 0 #fff}dialog::backdrop{background:#30204451;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}dialog h2{font-size:31px;margin-bottom:20px}dialog p:not(.eyebrow){font-size:13px;color:var(--muted)}dialog small{display:block;text-align:center;font-size:10px;color:var(--muted);margin-top:20px}.dialog-close{position:absolute;top:10px;right:10px;border:0;font-size:23px;background:transparent;box-shadow:none}#toast{position:fixed;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);max-width:90vw;width:max-content;background:linear-gradient(120deg,#7234c6f2,#ad278af2);backdrop-filter:blur(16px);color:white;border:1px solid #ffffff61;border-radius:16px;padding:13px 20px;font-size:12px;box-shadow:0 8px 30px #71349430;opacity:0;pointer-events:none;z-index:10;transition:opacity .2s,transform .2s}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1000px){.photo-stage{max-height:560px}.photo-stage>canvas{max-height:560px;object-fit:contain}.photo-stage #overlay{height:100%;object-fit:contain}}
@media(max-width:1240px){.topbar{margin:18px 40px 0}}
@media(max-width:1050px){.private-note{display:none}.workspace{gap:18px}.controls-panel{padding:16px 18px 20px}.look-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.look-art{height:150px}.color-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tabs{gap:2px}.tabs button{font-size:10px;padding:7px 5px}.tabs svg{width:15px}.intro>p{font-size:11px;max-width:235px}}
@media(max-width:700px){
  .topbar{margin:max(12px,env(safe-area-inset-top)) 14px 0;padding:10px 14px;border-radius:20px}.brand{gap:11px}.brand img{width:43px;height:46px}.brand span{font-size:7px;letter-spacing:1.3px;padding-left:12px;max-width:95px}.top-actions{gap:0}.top-actions button{font-size:10px;gap:5px;min-height:38px;padding:7px}.top-actions svg{width:16px}main{padding:0 14px}.intro{padding:24px 3px 20px;display:block}.intro .eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:11px}h1{font-size:36px;letter-spacing:-1.8px;line-height:1.08}.intro>p{display:none}.workspace{display:block}
  .preview-panel{position:sticky;top:-48px;border-radius:23px;padding:12px;z-index:3;background:linear-gradient(135deg,#f6e9fdd9,#f1ebffdf);backdrop-filter:blur(30px) saturate(130%);-webkit-backdrop-filter:blur(30px) saturate(130%);box-shadow:0 9px 30px #69429819,inset 0 1px 0 #fff}.preview-top{margin:0 0 9px}.photo-label{font-size:9px;gap:7px}.preview-top .quiet-button{font-size:10px!important;min-height:34px;padding:8px 10px}.photo-stage{border-radius:16px;min-height:120px;max-height:none}.photo-stage>canvas,.photo-stage #overlay{max-height:32dvh;object-fit:contain;background:transparent}.stage-caption{bottom:11px;left:11px;border-radius:12px;padding:8px 12px}.stage-caption span{font-size:6px;letter-spacing:1.4px;margin-bottom:4px}.stage-caption strong{font-size:20px;letter-spacing:-.4px}.compare{font-size:9px;min-height:34px;padding:8px 10px;top:9px;right:9px}.compare svg{width:12px;height:12px}.preview-actions{padding-top:10px;gap:7px;grid-template-columns:42px 1fr 1.2fr}.primary,.secondary{min-height:44px;padding:10px;font-size:10px;border-radius:12px}.icon-button{min-height:44px;min-width:42px;border-radius:13px}.preview-disclaimer{font-size:8px;margin:9px 0 0}
  .controls-panel{margin-top:16px;border-radius:23px;padding:17px 16px 20px}.tabs{position:fixed;top:auto;bottom:max(12px,env(safe-area-inset-bottom));left:20px;right:20px;padding:6px;z-index:6;border:1px solid #ffffffe6;border-radius:23px;box-shadow:0 8px 40px #684c9626,inset 0 1px 0 #fff;background:#fbf7ffcd;backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%)}
  /* The fixed nav must be viewport-relative, so this parent has no backdrop transform. */
  .controls-panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(140deg,#fff9,#f9f5ffb8)}
  .tabs button{flex:1;flex-direction:column;justify-content:center;gap:5px;min-height:44px;font-size:9px;padding:5px;border-radius:17px}.tabs button.active{background:linear-gradient(130deg,#f2d2f5bb,#e5d8ffcc);color:#722dc2;box-shadow:inset 0 1px 0 #fff,0 3px 8px #8b42b411}.tabs svg{width:18px;height:18px}.scope-row{margin:0 0 24px;font-size:10px}.section-heading{margin-bottom:17px}h2{font-size:24px;letter-spacing:-.9px}.section-heading .eyebrow{font-size:8px;letter-spacing:1.4px}.count{font-size:8px}.selected-color{padding:10px;border-radius:15px;gap:10px}.selected-color strong{font-size:11px}.selected-color small{font-size:8px}.selected-color>span{width:37px;height:37px;border-radius:12px}.selected-color button{font-size:9px;padding:5px;min-height:36px}.color-filter button{font-size:9px;min-height:33px;padding:7px 12px}.search{padding:0 10px}.search input{font-size:10px;min-height:38px}.color-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:15px 4px;max-height:350px;padding-top:7px}.color-card i{width:31px;height:40px;border-radius:15px 15px 12px 12px}.color-card span{font-size:8px}.color-card.active i{outline-width:1.5px;outline-offset:3px}.custom-colors summary{padding:12px 10px;font-size:10px;gap:10px}.custom-colors summary small{font-size:8px}.spectrum-dot{width:28px;height:28px}.style-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 7px}.style-card{border-radius:13px}.style-card span{font-size:8px}.custom-fields{gap:8px}.fit-buttons .quiet-button{font-size:10px}.edit-badge{font-size:9px}.inspiration{border-radius:23px;margin-top:18px;padding:20px 16px}.inspiration .section-heading>p{display:none}.look-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:21px 12px}.look-art{height:129px;border-radius:16px;gap:5px}.look-art canvas{width:32px;height:61px}.look-card strong{font-size:13px}.look-card small{font-size:6px;letter-spacing:.85px}footer{flex-wrap:wrap;gap:10px;padding:10px 2px 100px;font-size:9px}footer button{margin-left:auto;font-size:9px!important}footer img{width:20px;height:20px}#toast{bottom:90px}
}
@media(max-width:360px){h1{font-size:32px}.brand span{display:none}.controls-panel{padding-left:12px;padding-right:12px}.preview-actions .primary,.preview-actions .secondary{font-size:9px;gap:5px}.preview-actions svg{width:16px}.color-card i{width:29px}.selected-color button{font-size:8px}}
@media(prefers-reduced-transparency:reduce){.topbar,.preview-panel,.controls-panel,.inspiration,.tabs,dialog{background:#f7f2ff;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Camera-first Peony: the photo and color palette are the primary experience. */
body[data-screen]{padding-bottom:env(safe-area-inset-bottom)}
body[data-screen] .intro,body[data-screen] .inspiration,body[data-screen] footer{display:none}
body[data-screen='welcome'] .workspace,body[data-screen='welcome'] #photoStatus{display:none!important}
body[data-screen='editor'] .welcome-screen{display:none}
body[data-screen] .topbar{margin-top:max(14px,env(safe-area-inset-top));padding:10px 22px}
body[data-screen] .brand img{width:47px;height:51px}
body[data-screen] .brand span{font-size:11px;letter-spacing:1.1px;max-width:155px}
body[data-screen] .quiet-button,body[data-screen] .primary,body[data-screen] .secondary{font-size:14px;min-height:44px}
body[data-screen] .small{font-size:14px!important}
body[data-screen] .eyebrow,body[data-screen] .section-heading .eyebrow{font-size:11px;letter-spacing:1.3px}
body[data-screen] .top-actions button{font-size:14px;min-height:44px;padding:9px 12px}
body[data-screen] .top-actions button b{font-size:11px}
body[data-screen] main{padding-top:22px;padding-bottom:24px}
.welcome-screen{width:min(100%,540px);margin:clamp(8px,3vh,30px) auto 20px;text-align:center}
.welcome-copy .eyebrow{margin-bottom:12px}
.welcome-copy h1{font-size:clamp(34px,4.5vw,47px);font-weight:750;letter-spacing:-1.9px;line-height:1.12;max-width:540px;margin:0 auto 15px}
.welcome-copy>p:not(.eyebrow){font-size:16px;line-height:1.6;color:var(--muted);max-width:400px;margin:0 auto}
.capture-hero{position:relative;margin:21px auto 24px;min-height:164px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}
.capture-halo{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:129px;isolation:isolate}
.capture-halo:before{content:'';position:absolute;width:235px;height:129px;border-radius:50%;background:radial-gradient(ellipse,#ddbef580,transparent 70%);z-index:-1}
.capture-halo>img{width:52px;height:52px;object-fit:contain;margin:0 10px}
.welcome-nail{display:inline-block;width:34px;height:72px;flex-shrink:0;border-radius:19px 19px 13px 13px;border:1px solid #fff9;box-shadow:inset 5px 0 8px #ffffff64,inset -4px 0 7px #39205712,0 8px 15px #76358c16;background:#e857a4;transform:rotate(-12deg)}
.welcome-nail:nth-of-type(2){height:87px;background:#a48be9;transform:rotate(-6deg) translateY(-4px)}
.welcome-nail:nth-of-type(3){height:95px;background:#f4b6d7;transform:translateY(-6px)}
.welcome-nail:nth-of-type(4){height:87px;background:#ae4cba;transform:rotate(6deg) translateY(-4px)}
.welcome-nail:nth-of-type(5){height:72px;background:#7686e8;transform:rotate(12deg)}
.capture-guidance{font-size:13px;color:var(--muted);line-height:1.5;margin:0;max-width:390px}
.welcome-actions{display:flex;flex-direction:column;gap:11px;max-width:370px;margin:23px auto 0}
.welcome-actions .primary,.welcome-actions .secondary{width:100%;min-height:52px;font-size:16px;border-radius:16px}
.welcome-actions .quiet-button{align-self:center;color:#684199;font-size:14px;padding:10px 18px}
.welcome-privacy{font-size:12px;line-height:1.6;color:var(--muted);margin:16px auto 0;max-width:360px;display:flex;align-items:center;justify-content:center;gap:7px}
.welcome-privacy svg{width:15px;height:15px}
.capture-status{font-size:14px;color:var(--muted);line-height:1.5;margin:12px 0 0}
.capture-hero{display:grid;grid-template-columns:54px auto;gap:10px 16px;min-height:110px;width:max-content;max-width:100%;margin-top:24px}
.capture-halo{width:54px;height:95px}
.capture-halo:before{width:250px;left:-5px}
.capture-halo>img{width:46px;height:46px;margin:0}
.welcome-nails{display:flex;align-items:center;justify-content:center;gap:9px;height:105px}
.capture-hero>p{display:none}
.capture-guidance{grid-column:1/-1;font-size:12px}
.welcome-steps{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;font-size:12px;line-height:1.6;color:var(--muted);margin:18px 0 0;padding:0;list-style:none}
.photo-status{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 15px;padding:10px 15px;border:1px solid #fff;border-radius:17px;background:#ffffffa6;color:#5e467b;font-size:14px;line-height:1.5}
.photo-status>span{flex:1;min-width:0}
.photo-status button{flex-shrink:0;font-size:14px;min-height:44px;padding:8px 12px;border-radius:12px;color:#7130bc;background:#ede1ff}
body[data-screen='editor'] .preview-top{min-height:44px;margin-bottom:8px}
body[data-screen='editor'] .photo-label{font-size:11px}
body[data-screen='editor'] .preview-top .quiet-button{font-size:14px!important;min-height:44px}
body[data-screen='editor'] .compare{font-size:12px;min-height:44px}
body[data-screen='editor'] .stage-caption span{font-size:11px;letter-spacing:1px}
body[data-screen='editor'] .stage-caption strong{font-size:23px}
body[data-screen='editor'] .preview-actions{grid-template-columns:46px minmax(0,1fr) minmax(0,1fr)}
body[data-screen='editor'] .preview-actions #exportLook{color:#63368f;background:#ffffffaa;border:1px solid #fff;box-shadow:none}
body[data-screen='editor'] .preview-disclaimer{font-size:11px;line-height:1.45}
body[data-screen] .section-heading{margin-bottom:18px}
body[data-screen] .section-heading h2{font-size:28px;letter-spacing:-1px}
body[data-screen] .section-heading .eyebrow{margin-bottom:7px}
body[data-screen] .count{font-size:11px}
body[data-screen] .selected-color{padding:12px;gap:11px;margin-bottom:15px}
body[data-screen] .selected-color strong{font-size:15px}
body[data-screen] .selected-color small{font-size:11px;letter-spacing:0;line-height:1.4}
body[data-screen] .selected-color>span{width:44px;height:44px}
body[data-screen] .selected-color button{font-size:14px;min-height:44px;padding:8px 9px}
body[data-screen] .color-filter{gap:7px;padding-bottom:8px}
body[data-screen] .color-filter button{font-size:14px;min-height:44px;padding:10px 15px}
body[data-screen] .search input{font-size:16px;min-height:46px;padding:11px 0}
body[data-screen] .search>span:last-child{font-size:12px}
body[data-screen] .color-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 7px;max-height:400px;padding:8px 4px 12px;overscroll-behavior-y:contain}
body[data-screen] .color-card{min-height:83px;padding:4px 1px;gap:9px}
body[data-screen] .color-card i{width:40px;height:49px}
body[data-screen] .color-card span{font-size:11px;max-width:82px;min-height:30px;line-height:1.4}
body[data-screen] .custom-colors{margin-top:17px;border:1px solid #d6bcea;background:linear-gradient(125deg,#fcf2ffda,#eee6ffdf);box-shadow:0 4px 17px #8238b912}
body[data-screen] .custom-colors summary{padding:15px;font-size:15px;min-height:72px;gap:12px}
body[data-screen] .custom-colors summary small{font-size:12px;line-height:1.5;margin-top:4px}
body[data-screen] .spectrum-dot{width:37px;height:37px}
body[data-screen] .custom-inner{padding:0 15px 17px}
body[data-screen] .spectrum{height:155px}
body[data-screen] .hue-label{font-size:14px;min-height:44px;margin:10px 0}
body[data-screen] .hue-label input{min-height:44px;height:44px;background:transparent}
body[data-screen] .hue-label input::-webkit-slider-runnable-track{height:12px;border-radius:6px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}
body[data-screen] .hue-label input::-webkit-slider-thumb{margin-top:-2px}
body[data-screen] .hue-label input::-moz-range-track{height:12px;border-radius:6px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}
body[data-screen] .custom-fields{gap:10px;flex-wrap:wrap}
body[data-screen] .custom-fields label{font-size:11px;letter-spacing:.4px}
body[data-screen] .custom-fields input[type=text],body[data-screen] #hexInput{font-size:16px;min-height:46px;max-width:134px}
body[data-screen] .native-color input{min-width:66px;min-height:46px}
body[data-screen] .custom-fields button{min-height:46px}
body[data-screen] .error{font-size:13px}
#fineTune{margin-top:19px;border-top:1px solid var(--line)}
#fineTune>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;list-style:none;cursor:pointer;font-size:14px;color:#654b85;font-weight:600;min-height:50px;padding:10px 2px}
#fineTune>summary::-webkit-details-marker{display:none}
#fineTune>summary>span{display:none}
#fineTune>summary:after{content:'+';font-size:22px;font-weight:400;color:#8254a9}
#fineTune[open]>summary:after{content:'−'}
#fineTune .scope-row{font-size:14px;flex-wrap:wrap;margin:5px 0 16px;gap:8px}
#fineTune .segmented button{font-size:14px;min-height:44px;padding:9px 13px}
#fineTune select,body[data-screen] .select-row select{font-size:16px;min-height:44px}
#fineTune .tabs{position:static;inset:auto;display:flex;gap:5px;padding:5px;box-shadow:none;border-radius:15px;backdrop-filter:none;-webkit-backdrop-filter:none}
#fineTune .tabs button{font-size:14px;flex-direction:row;min-height:44px;gap:7px;padding:9px 7px;border-radius:10px;white-space:normal}
#fineTune .tabs button[data-tab='saved']{display:none}
#fineTune .tabs svg{width:17px;height:17px}
#backToColors{margin:0 0 15px;padding:8px 11px;border:1px solid #fff;background:#eee3ff7d;color:#7432bd}
body[data-screen] .style-card{min-height:102px;padding:14px 5px 11px}
body[data-screen] .style-card span{font-size:12px;line-height:1.35}
body[data-screen] .accent-row,body[data-screen] .range-row,body[data-screen] .select-row{font-size:14px}
body[data-screen] .accent-row>span{font-size:11px}
body[data-screen] .accent-row input{width:44px;height:44px}
body[data-screen] .range-row{margin:20px 0;gap:6px}
body[data-screen] .range-row input{min-height:44px}
body[data-screen] .range-row output{font-size:12px}
body[data-screen] .fit-instruction,body[data-screen] .helper,body[data-screen] .empty,body[data-screen] .empty-state p{font-size:14px}
body[data-screen] .fit-buttons{flex-wrap:wrap}
body[data-screen] .fit-buttons .quiet-button{font-size:14px}
body[data-screen] .edit-badge{font-size:11px;white-space:normal;width:max-content;max-width:90%;text-align:center;line-height:1.4}
body[data-screen] .saved-card strong{font-size:14px}
body[data-screen] .saved-card small{font-size:11px}
body[data-screen] .saved-card .delete-saved{width:44px;height:44px}
body[data-screen] dialog p:not(.eyebrow){font-size:15px}
body[data-screen] dialog small{font-size:12px;line-height:1.5}
body[data-screen] #toast{font-size:14px;bottom:max(18px,env(safe-area-inset-bottom));line-height:1.45}
@media(min-width:701px) and (max-width:1050px){body[data-screen] .color-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){
  body[data-screen] .topbar{margin:max(8px,env(safe-area-inset-top)) 12px 0;padding:6px 12px;border-radius:18px}
  body[data-screen] .brand img{width:36px;height:42px}
  body[data-screen] .brand span{display:none}
  body[data-screen] .top-actions button{font-size:14px;min-height:44px;padding:8px 9px;gap:7px}
  body[data-screen] .top-actions svg{width:18px;height:18px}
  body[data-screen] main{padding:14px 12px max(20px,env(safe-area-inset-bottom))}
  .welcome-screen{margin:11px auto 10px;max-width:430px}
  .welcome-copy h1{font-size:34px;letter-spacing:-1.5px;margin-bottom:12px}
  .welcome-copy>p:not(.eyebrow){font-size:16px;line-height:1.55;max-width:340px}
  .capture-hero{margin:18px auto 12px;min-height:100px;gap:4px 12px;grid-template-columns:43px auto}
  .capture-halo{width:43px;height:92px;gap:7px}
  .capture-halo>img{width:41px;height:41px;margin:0}
  .welcome-nails{height:90px;gap:8px}
  .welcome-nail{width:29px;height:61px}
  .welcome-nail:nth-of-type(2),.welcome-nail:nth-of-type(4){height:74px}
  .welcome-nail:nth-of-type(3){height:83px}
  .capture-guidance{font-size:12px;max-width:315px}
  .welcome-actions{max-width:350px;gap:9px;margin-top:21px}
  .welcome-actions .primary,.welcome-actions .secondary{min-height:52px;font-size:16px}
  .welcome-privacy{margin-top:11px;font-size:12px;padding:0 7px}
  .welcome-steps{font-size:11px;gap:7px 14px;margin-top:12px}
  .photo-status{font-size:13px;padding:8px 10px;margin-bottom:10px;gap:7px;border-radius:14px}
  .photo-status button{font-size:13px;padding:8px 10px;min-height:44px}
  body[data-screen='editor'] .preview-panel{position:sticky;top:0;z-index:3;padding:8px;border-radius:19px;background:linear-gradient(135deg,#faeffaeF,#eeebfff2);box-shadow:0 6px 20px #66439615;backdrop-filter:blur(23px);-webkit-backdrop-filter:blur(23px)}
  body[data-screen='editor'] .preview-top{min-height:44px;margin:0 2px 5px;gap:8px}
  body[data-screen='editor'] .photo-label{font-size:11px;line-height:1.4;gap:6px;min-width:0}
  body[data-screen='editor'] .preview-top .quiet-button{font-size:14px!important;min-height:44px;padding:8px 10px;flex-shrink:0}
  body[data-screen='editor'] .photo-stage{min-height:120px;border-radius:13px}
  body[data-screen='editor'] .photo-stage>canvas,body[data-screen='editor'] .photo-stage #overlay{max-height:min(25dvh,240px);object-fit:contain}
  body[data-screen='editor'] .photo-stage.editing>canvas,body[data-screen='editor'] .photo-stage.editing #overlay{max-height:min(30dvh,280px)}
  body[data-screen='editor'] .stage-caption{left:8px;bottom:8px;padding:7px 10px;max-width:calc(100% - 16px);border-radius:10px}
  body[data-screen='editor'] .stage-caption span{font-size:11px;letter-spacing:.6px;margin-bottom:3px}
  body[data-screen='editor'] .stage-caption strong{font-size:20px}
  body[data-screen='editor'] .compare{font-size:12px;min-height:44px;top:7px;right:7px;padding:8px 10px;gap:6px}
  body[data-screen='editor'] .compare svg{width:15px;height:15px}
  body[data-screen='editor'] .preview-actions{padding-top:7px;gap:6px;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr)}
  body[data-screen='editor'] .preview-actions .primary,body[data-screen='editor'] .preview-actions .secondary{font-size:14px;min-height:44px;padding:8px 6px;gap:6px}
  body[data-screen='editor'] .preview-actions svg{width:18px;height:18px}
  body[data-screen='editor'] .preview-actions .icon-button{min-width:44px;min-height:44px}
  body[data-screen='editor'] .preview-disclaimer{display:none}
  body[data-screen] .controls-panel{margin-top:10px;border-radius:20px;padding:15px 14px 14px;background:linear-gradient(145deg,#ffffffe0,#f5efffd1);backdrop-filter:none;-webkit-backdrop-filter:none}
  body[data-screen] .section-heading h2{font-size:26px;letter-spacing:-.9px}
  body[data-screen] .section-heading{margin-bottom:12px}
  body[data-screen] .section-heading .eyebrow{font-size:11px;letter-spacing:1px}
  body[data-screen] #colorsPanel .section-heading .eyebrow{display:none}
  body[data-screen] .count{font-size:11px}
  body[data-screen] .selected-color{padding:10px;gap:10px;margin-bottom:10px}
  body[data-screen] .selected-color>span{width:40px;height:44px;flex-shrink:0}
  body[data-screen] .selected-color strong{font-size:14px}
  body[data-screen] .selected-color small{font-size:11px}
  body[data-screen] .selected-color button{font-size:14px;padding:7px;gap:5px}
  body[data-screen] .color-filter button{font-size:14px;min-height:44px}
  body[data-screen] .search{margin-bottom:13px}
  body[data-screen] .search input{font-size:16px;min-height:46px}
  body[data-screen] .color-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:17px 8px;max-height:350px;padding:7px 4px 12px}
  body[data-screen] .color-card{min-height:86px;gap:10px}
  body[data-screen] .color-card i{width:42px;height:52px;border-radius:20px 20px 15px 15px}
  body[data-screen] .color-card span{font-size:11px;max-width:80px;min-height:31px;line-height:1.4}
  body[data-screen] .color-card.active i{outline-width:2px;outline-offset:3px}
  body[data-screen] .custom-colors summary{font-size:15px;padding:13px 11px;gap:10px;min-height:74px}
  body[data-screen] .custom-colors summary small{font-size:12px}
  body[data-screen] .custom-inner{padding:0 12px 15px}
  body[data-screen] .spectrum-dot{width:34px;height:34px}
  body[data-screen] .style-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
  body[data-screen] .style-card span{font-size:12px}
  body[data-screen] .edit-badge{font-size:11px}
  #fineTune{margin-top:17px}
  #fineTune .scope-row{font-size:14px}
  #fineTune .tabs button{font-size:14px;gap:5px;padding:9px 6px}
  #backToColors{font-size:14px;min-height:44px}
}
@media(max-width:360px){
  body[data-screen] main{padding-left:10px;padding-right:10px}
  .welcome-copy h1{font-size:31px}
  .welcome-copy>p:not(.eyebrow){font-size:15px}
  .capture-halo{gap:6px}
  .capture-halo>img{width:35px;height:35px}
  .welcome-nail{width:27px}
  body[data-screen] .controls-panel{padding-left:12px;padding-right:12px}
  body[data-screen='editor'] .preview-actions .primary,body[data-screen='editor'] .preview-actions .secondary{font-size:14px;gap:4px}
  body[data-screen='editor'] .preview-actions svg{width:16px;height:16px}
  body[data-screen] .selected-color button{font-size:14px;padding:6px}
  body[data-screen] .color-card span{font-size:11px}
  #fineTune .tabs button{font-size:13px}
}
@media(max-width:700px) and (max-height:700px){
  .welcome-screen{margin-top:6px}
  .welcome-copy h1{font-size:30px;margin-bottom:9px}
  .welcome-copy .eyebrow{margin-bottom:8px}
  .capture-hero{min-height:90px;margin:8px auto 10px;gap:3px 10px}
  .capture-halo{height:78px}
  .welcome-nails{height:78px;transform:scale(.88);transform-origin:center}
  .welcome-actions{gap:7px}
  .welcome-actions .primary,.welcome-actions .secondary{min-height:48px}
  .welcome-privacy{margin-top:7px}
  body[data-screen='editor'] .photo-stage>canvas,body[data-screen='editor'] .photo-stage #overlay{max-height:25dvh}
  body[data-screen='editor'] .preview-disclaimer{display:none}
}
@media(prefers-reduced-transparency:reduce){
  body[data-screen] .topbar,body[data-screen] .preview-panel,body[data-screen] .controls-panel,body[data-screen] .photo-status,body[data-screen] dialog{background:#f7f2ff;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* A centered title and balanced side controls give the start screen a clear identity. */
.brand-purpose { display:none; }
body[data-screen='welcome'] .topbar { display:grid; grid-template-columns:120px minmax(0,1fr) 120px; align-items:center; gap:12px; min-height:84px; }
body[data-screen='welcome'] .brand { justify-self:start; min-width:0; }
body[data-screen='welcome'] .brand img { flex-shrink:0; }
body[data-screen='welcome'] .brand-purpose { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; text-align:center; color:#39244e; }
body[data-screen='welcome'] .brand-purpose strong { font-size:23px; font-weight:650; line-height:1.1; letter-spacing:-.6px; }
body[data-screen='welcome'] .brand-purpose span { font-size:11px; font-weight:600; line-height:1.2; letter-spacing:2.2px; text-transform:uppercase; color:#896995; }
body[data-screen='welcome'] .top-actions { justify-self:end; min-width:0; }
@media(max-width:700px){
  body[data-screen='welcome'] .topbar { grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; min-height:76px; padding:10px 14px; }
  body[data-screen='welcome'] .brand img { width:39px; height:45px; }
  body[data-screen='welcome'] .brand-purpose strong { font-size:21px; }
  body[data-screen='welcome'] #savedTop { width:44px; height:44px; padding:11px; border-radius:50%; background:#ffffff85; border:1px solid #fff9; box-shadow:none; }
  body[data-screen='welcome'] #savedTop svg { width:20px; height:20px; }
  body[data-screen='welcome'] #savedTop>span:not([data-icon]) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}