:root{--paper:#f8f5f1;--white:#fffdfa;--ink:#302635;--muted:#756d79;--line:#e5dddF;--plum:#68425e;--pink:#dec1ce;--soft:#efe6eb;--dark:#22182b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:9px;min-height:42px;padding:9px 13px;transition:background .18s}button:hover{background:var(--soft)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #a37ca6;outline-offset:3px}.primary{background:var(--plum);color:#fff;border-color:var(--plum)}.primary:hover{background:#503047}.textButton{border:0;background:transparent;padding:4px 0;min-height:34px;color:var(--plum);font-size:12px;text-align:left}.top{padding:20px 36px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);background:#fffdfa}.brand{text-decoration:none;color:var(--ink);font:32px Georgia,serif;white-space:nowrap}.brand>span:first-child{font-size:39px;color:var(--plum);vertical-align:middle;margin-right:8px}.brandSub{font:9px system-ui;letter-spacing:3px;margin-left:10px}.top nav{display:flex;gap:8px}.top nav button{border:0;background:transparent;color:var(--muted);font-size:13px}.top nav button.active{color:var(--plum);background:var(--soft)}#savedCount{font-size:10px;background:#e9dce6;border-radius:50%;padding:2px 5px}.beta,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650;color:var(--plum)}.beta{border:1px solid var(--line);padding:7px 12px;border-radius:30px;font-size:9px}.headline{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:35px 0 28px}.headline h1{font:clamp(32px,3.5vw,48px)/1.15 Georgia,serif;margin:9px 0}.headline p{margin:0;color:var(--muted)}main{max-width:1560px;margin:auto;padding:0 30px}p{color:var(--muted)}h2{font:24px/1.25 Georgia,serif;margin:8px 0 15px}h3{font-size:13px}.workspace{display:grid;grid-template-columns:250px minmax(320px,1fr) minmax(310px,370px);gap:20px;align-items:start}.panel{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:23px}.panelHeading{display:flex;align-items:center;gap:10px;margin-bottom:15px}.panelHeading h2{font:18px Georgia,serif;margin:0}.number{font-size:10px;background:var(--soft);border-radius:50%;width:25px;height:25px;display:grid;place-content:center;color:var(--plum)}.small{font-size:12px;line-height:1.65}.tiny{font-size:11px;line-height:1.6;color:var(--muted)}.field{display:flex;flex-direction:column;gap:6px;margin:13px 0;font-size:11px;font-weight:600;color:var(--muted)}select,input[type=text]{width:100%;border:1px solid var(--line);background:#fffdfa;color:var(--ink);border-radius:8px;padding:10px 9px;min-width:0;font-size:12px}input[type=color]{width:100%;height:42px;border:1px solid var(--line);background:white;border-radius:8px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.two .field{min-width:0}.hint{border-left:2px solid var(--pink);padding-left:10px}.toneStrip{display:flex;gap:6px}.toneStrip button{flex:1;min-height:22px;height:22px;padding:0;border-radius:5px;border:2px solid transparent}.toneStrip button.active{outline:2px solid var(--plum);outline-offset:2px}.profileSummary{font-size:11px;background:var(--paper);border-radius:10px;padding:12px;color:var(--muted);margin-top:18px}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.between{justify-content:space-between}.mirror{padding:0;overflow:hidden;background:var(--dark);color:#f4edf5}.mirrorTop{display:flex;justify-content:space-between;align-items:center;padding:12px;gap:7px}.modeTabs{display:flex;background:#34283c;padding:3px;border-radius:8px}.modeTabs button{background:transparent;border:0;color:#c5b7cc;font-size:11px;padding:7px 10px;min-height:34px}.modeTabs button[aria-selected=true]{background:#f2e7ef;color:#38283d}.ghost{background:transparent;color:#d7c7dd;border:0;font-size:10px;padding:4px;min-height:34px}.ghost:hover{background:#3c2a43}.stage{position:relative;aspect-ratio:4/5;width:100%;overflow:hidden;background:#21172b}.stage canvas,.stage video,.stage svg{position:absolute;inset:0;width:100%;height:100%}.stage video{object-fit:cover;transform:scaleX(-1)}#overlay{pointer-events:none}.cameraWelcome{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#49324f,#21172b);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px}.cameraWelcome h2{font-size:27px}.cameraWelcome p{color:#c7b8ce}.moon{font-size:55px;color:#e7c6dc;margin-bottom:20px}.cameraWelcome .primary{background:#dfc1d2;color:#34223c}.stageTags{position:absolute;bottom:15px;left:15px;right:15px;display:flex;justify-content:space-between;gap:8px;pointer-events:none}.stageTags span{border:1px solid #bba8c12e;border-radius:20px;font-size:8px;letter-spacing:1.2px;padding:5px 9px;background:#21172bc9;color:#cbbbd2}.mirrorTools{padding:18px}.mirrorTools button{background:#37283f;border-color:#513d5a;color:#f4edf5;font-size:11px}.mirrorTools .primary{background:#dfc1d2;color:#34223c;border-color:#dfc1d2}.mirrorTools p,.mirrorTools .tiny{color:#bdacc7}.check{display:flex;align-items:center;gap:6px;font-size:11px}.check input{accent-color:#b47f9e}.rangeLabel{display:block;font-size:11px;margin:15px 0 9px;color:inherit}.rangeLabel output{float:right;color:#dfc1d2}.rangeLabel input{display:block;width:100%;accent-color:#cb9bb7;margin-top:9px}.mirrorTools .two{gap:12px}.mirrorTools .field{color:#d7c7dd}.mirrorTools select{color:#eee;background:#37283f;border-color:#513d5a}.progress{height:3px;background:#4d3555;margin:15px 0 5px}.progress span{height:100%;display:block;background:#e3bbd1;width:0}.exports{padding-top:14px;margin-top:15px;border-top:1px solid #493151}.lookSelect{display:flex;align-items:center;gap:12px}.lookSelect label{flex:1;margin:0}.paletteTabs{display:flex;gap:5px;margin-top:18px}.paletteTabs button{flex:1;padding:7px 4px;font-size:11px;min-height:34px}.paletteTabs button.active{background:var(--soft);border-color:#c5a8b9;color:var(--plum)}#palette{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.colorTile{padding:0;border:0;background:transparent;text-align:left;font-size:10px;min-width:0;line-height:1.3}.colorTile .paint{height:45px;display:block;border-radius:8px;margin-bottom:5px;box-shadow:inset 0 0 0 1px #00000012}.colorTile strong{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.colorTile em{display:block;font-style:normal;color:var(--muted);font-size:9px;margin-top:3px}.shadeNotes{border-bottom:1px solid var(--line);padding:10px 0 16px;font-size:11px}summary{cursor:pointer;color:var(--plum)}.lessonHeader{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.lessonHeader span{font-size:9px;color:var(--muted)}#lessonTitle{font-size:27px;margin:10px 0 12px}.toolTag{font-size:10px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;color:var(--muted)}#technique ol{padding-left:18px;font-size:12px;line-height:1.7}#technique li{padding-left:3px;margin-bottom:10px}#technique b{color:var(--plum)}.adaptation{background:#f4edf2;border-radius:10px;padding:13px;margin:15px 0}.adaptation span{font-size:8px;letter-spacing:1.5px;color:var(--plum);font-weight:700}.adaptation p{font-size:11px;margin:5px 0 0;color:#655169}.stepDots{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:18px 0}.stepDots button{min-height:30px;border-radius:6px;padding:3px;font-size:10px}.stepDots button.active{color:white;background:var(--plum);border-color:var(--plum)}.stepDots button.done{box-shadow:inset 0 -3px #b4c4ad}.doneButton{margin-top:12px;text-align:center;width:100%}.bottomGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}.insight h2{font-size:26px}.insight p{font-size:13px}.pill{font-size:10px;background:var(--soft);color:var(--plum);padding:5px 10px;border-radius:30px}.kit{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:11px}.kit label{display:flex;align-items:start;gap:7px;padding:7px 0;color:var(--muted)}.kit input{accent-color:var(--plum)}.learning{border-top:1px solid var(--line);padding:20px 0;font-size:12px;max-width:1000px}.learning a{color:var(--plum)}.lookGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:35px}.lookCard{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden}.lookArt{height:250px;position:relative;overflow:hidden;background:#ebe1e8}.lookArt svg{height:350px;width:100%;object-fit:contain;margin-top:0}.lookCardContent{padding:22px}.lookCardContent p{font-size:13px;min-height:42px}.lookCardContent .swatches{display:flex;gap:6px;margin:12px 0 18px}.swatches span{display:block;width:23px;height:23px;border-radius:50%}.lookMeta{font-size:9px;letter-spacing:2px;color:var(--plum);text-transform:uppercase}.lookCard h2{font-size:28px;margin:5px 0}.lookCardContent .primary{width:100%}#collection{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}.savedCard{padding:24px}.savedCard p{font-size:12px}.savedCard .row{margin-top:20px}.empty{grid-column:1/-1;text-align:center;padding:80px 20px;border:1px dashed #cdb7c7;border-radius:18px}.empty h2{font-size:30px}.empty p{font-size:14px}footer{border-top:1px solid var(--line);padding:25px 35px;display:flex;gap:20px;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:1px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#36243d;color:white;padding:12px 22px;border-radius:12px;box-shadow:0 10px 40px #21172b33;z-index:100;max-width:90vw;display:none;font-size:13px}dialog{border:1px solid var(--line);border-radius:20px;padding:28px;max-width:780px;width:calc(100% - 32px);color:var(--ink);background:var(--paper);max-height:90svh;overflow:auto}dialog::backdrop{background:#21172b99;backdrop-filter:blur(5px)}dialog p{font-size:13px}.shapeGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.shapeCard{padding:12px;text-align:center;min-width:0}.shapeCard svg{height:90px;width:100%}.shapeCard b{display:block}.shapeCard p{font-size:11px;text-align:left;margin-bottom:0}.shadeOption{display:flex;gap:15px;align-items:center;width:100%;margin:10px 0;text-align:left}.shadeOption span{width:50px;height:40px;border-radius:7px;flex-shrink:0}.shadeOption small{display:block;color:var(--muted)}[hidden]{display:none!important}@media(min-width:1600px){.stage{max-height:700px;aspect-ratio:4/5;width:560px;max-width:100%;margin:auto}}@media(max-width:1200px){main{padding:0 20px}.workspace{grid-template-columns:220px minmax(290px,1fr) 310px;gap:12px}.panel{padding:18px}.mirror{padding:0}.top{padding:15px 20px}.beta{display:none}.headline h1{font-size:38px}.mirrorTop{flex-wrap:wrap}}@media(max-width:1000px){.workspace{grid-template-columns:1fr 1fr}.profile{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:0 15px}.profile .panelHeading,.profile>p.small{grid-column:1/-1}.profile>.hint{grid-column:3/5;margin-top:0}.profile>.textButton{grid-column:2}.profile>.two{grid-column:3/5}.profile .profileSummary{grid-column:1/4}.profile>.tiny{grid-column:1/-1}.toneStrip{align-items:center}.bottomGrid{gap:12px}.lookGrid,#collection{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.top{padding:12px 16px;flex-wrap:wrap;gap:8px}.brand{font-size:28px}.brand>span:first-child{font-size:32px}.top nav{width:100%;justify-content:space-between;gap:3px}.top nav button{font-size:12px;padding:6px 10px;min-height:36px}main{padding:0 14px}.headline{margin:25px 0 20px;align-items:start}.headline h1{font-size:34px}.headline p{font-size:12px}.headline>.primary{font-size:11px;padding:8px;white-space:nowrap}.workspace{grid-template-columns:1fr;gap:16px}.profile{grid-template-columns:1fr 1fr;padding:18px}.profile .panelHeading,.profile>p.small{grid-column:1/-1}.profile>.hint{grid-column:1/-1}.profile>.textButton{grid-column:auto}.profile>.two{grid-column:1/-1}.profile .profileSummary{grid-column:1/-1}.profile>.tiny{grid-column:1/-1}.profile .field{margin:9px 0}.profileSummary{margin-top:10px}.mirror{grid-row:2}.lesson{grid-row:3}.stage{max-height:none}.bottomGrid,.lookGrid,#collection{grid-template-columns:1fr}.shapeGrid{grid-template-columns:1fr 1fr}.lookArt{height:270px}.lookArt svg{height:400px}.lesson .panelHeading{margin-bottom:20px}.mirrorTop{flex-wrap:nowrap}.modeTabs button{font-size:11px}.kit{grid-template-columns:1fr 1fr}.bottomGrid{margin:16px 0}.panel.insight{padding:20px}footer{padding:20px 16px;flex-wrap:wrap;gap:10px;font-size:9px}.stageTags span{font-size:7px}.shadeOption{padding:10px}dialog{padding:20px}}

.cameraStep{padding:10px 0 16px;border-bottom:1px solid #493151;margin-bottom:12px}.cameraStep span{font-size:11px;flex:1;text-align:center}.cameraStep button{min-width:40px}

.colorLibraryNotice{border:1px solid #eed8db;border-radius:10px;padding:12px;background:linear-gradient(110deg,#fff1df,#fce5f0,#edf6f8);margin:12px 0}.colorLibraryNotice>span{font-size:8px;letter-spacing:1.5px;color:#7c4f68}.colorLibraryNotice>b{display:block;font-size:13px;color:#52304f}.colorLibraryNotice p{font-size:11px;line-height:1.5;margin:5px 0 0}.lookFilters{display:flex;align-items:end;gap:24px;margin-bottom:24px}.lookFilters .field{min-width:230px;margin:0}.lookFilters p{margin-bottom:10px}#shadeDialog{width:calc(100% - 28px);max-width:900px}.shadeFilters{display:grid;grid-template-columns:1fr 1fr;gap:16px}.shadeFilters input{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px;background:white;color:var(--ink);font-size:13px}#shadeOptions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-height:43svh;overflow-y:auto;padding:3px 4px 8px}.shadeOption{display:block;min-width:0;margin:0;padding:8px;line-height:1.35;font-size:11px;min-height:115px}.shadeOption>span{display:block;width:100%;height:55px;margin-bottom:7px;box-shadow:inset 0 0 0 1px #00000010}.shadeOption small{font-size:9px;margin-top:4px}.emptyShades{grid-column:1/-1}#suggestedShade{display:block;margin-top:12px}.lookArt{background:linear-gradient(135deg,#f8e8df,#ede2f1)}@media(max-width:640px){#shadeOptions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:42svh}.shadeOption{padding:6px;font-size:10px;min-height:108px}.shadeOption>span{height:45px}.shadeFilters{gap:10px;grid-template-columns:1fr}.shadeFilters .field{margin:5px 0}.lookFilters{align-items:start;flex-direction:column;gap:5px}.lookFilters .field{width:100%}.lookFilters p{margin:5px 0}.colorLibraryNotice{margin-top:15px}}

.stage #chart{z-index:1}.stage #camera{z-index:2}.stage #overlay{z-index:3;pointer-events:none}.stage .cameraWelcome{z-index:4}.stageTags{z-index:5}.stage #overlay[hidden]{display:none!important}.practiceButton{margin-top:12px;background:transparent;color:#f1deee;border-color:#bda0c3}.guideSettings{padding-bottom:5px}.guideSettings>span{font-size:10px;color:#e8c88b}.referenceNote{font-size:10px;line-height:1.6;color:#c7b5cf;margin:0 0 13px}.lookArt{height:320px}.lookArt canvas{width:100%;height:100%;object-fit:cover;object-position:center 35%}.lookArt svg{display:none}#guideState{max-width:190px;text-align:right}#startFromPractice{margin-bottom:12px}@media(max-width:640px){.lookArt{height:340px}.referenceNote{font-size:10px}.guideSettings{gap:8px}}

.trackingStatus{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.trackingStatus>span{font-size:11px;color:#ecd7a1}.trackingStatus>span[data-state=locked]{color:#b9e3c0}.trackingStatus>span[data-state=error]{color:#f2a4ad}.mirrorTools #trackingTips p{font-size:11px;line-height:1.6}.mirrorTools #retryTracking{font-size:10px;min-height:32px;padding:6px 10px}#alignment{display:none!important}

/* Color playground: vivid accents, quiet reading surfaces. */
:root{--paper:#fcf7ff;--white:#fffefd;--ink:#30213e;--muted:#716179;--line:#ead9ef;--plum:#8b32b1;--pink:#fa8ac2;--soft:#f5e5fc;--dark:#25132e}
body{background:radial-gradient(ellipse at 3% 6%,#ffd6ec80,transparent 35%),radial-gradient(ellipse at 98% 14%,#c5f6f380,transparent 35%),var(--paper)}
.top{border-top:5px solid transparent;border-image:linear-gradient(90deg,#f84d9d,#a253ed,#4fcac9,#ffbc62) 1;background:#fffdfdf2}.brand>span:first-child{color:#b72fb0}.top nav button.active{color:#8425aa;background:#f1ddff}.beta{background:#fff1f8;border-color:#f6c1dd;color:#9b287b}.headline h1{letter-spacing:-1.3px}.colorWord{background:linear-gradient(100deg,#cb2585,#9735cb 55%,#2d858e);background-clip:text;-webkit-background-clip:text;color:transparent}.headline .primary,.lookCardContent .primary{background:linear-gradient(110deg,#a532bd,#dc398a);border:0;box-shadow:0 5px 16px #ba39992b}.primary:hover{filter:brightness(1.06)}.panel{box-shadow:0 7px 30px #6b277009}.profile{border-top:3px solid #ba74e1}.lesson{border-top:3px solid #f47cba}.number{color:#fff;background:linear-gradient(135deg,#b546cc,#e44499);font-weight:700}.panelHeading h2{color:#582365}.mirror{border-color:#71366e;box-shadow:0 12px 35px #6a286b20}.mirrorTop{background:linear-gradient(105deg,#40204f,#64294f)}.modeTabs button[aria-selected=true]{background:#ffe3f6;color:#63215c}.stageTags span{border-color:#f9abdf66}.colorLibraryNotice{position:relative;overflow:hidden;background:linear-gradient(110deg,#ffe6f4,#f0ddff 50%,#d8f9f4);border-color:#e5b7ed;padding:15px}.colorLibraryNotice:after{content:'✦';position:absolute;right:10px;top:-4px;font-size:42px;color:#b13fc326;pointer-events:none}.colorLibraryNotice>b{font-size:14px;max-width:95%;line-height:1.5}.colorLibraryNotice>span{color:#9a268a;font-weight:700}.paletteTabs button{border-radius:30px;background:#fff}.paletteTabs button.active{background:#8d32b1;color:#fff;border-color:#8d32b1}.colorTile{border:1px solid #ead9ef;background:#fff;border-radius:13px;padding:6px;transition:transform .18s,box-shadow .18s;text-align:left}.colorTile:hover{background:#fff6fd;transform:translateY(-3px);box-shadow:0 7px 15px #8d32b122}.colorTile .paint{height:58px;position:relative;margin-bottom:7px;border-radius:9px}.colorTile strong{font-size:10px;font-weight:650}.colorTile em{font-size:9px;margin-top:4px}.makeupIcon{position:absolute;right:5px;bottom:5px;width:29px;height:29px!important;display:grid!important;place-items:center;border:1px solid #ffffff50;border-radius:9px!important;background:#ffffff24;box-shadow:0 2px 6px #00000013}.makeupIcon svg{width:21px;height:21px;display:block}.shadeOption>span{position:relative;height:65px;border-radius:10px}.shadeOption .makeupIcon{width:30px;height:30px!important;margin:0}.shadeOption{border-radius:13px;background:#fff}.shadeOption:hover{background:#faeafa;border-color:#c570d9}.shadeOption:focus-visible{outline-color:#b32d9b}.adaptation{background:linear-gradient(120deg,#f6e6fc,#fce7f3);border-left:3px solid #cb66bb}.stepDots button.active{background:linear-gradient(135deg,#ad39b6,#dc458d);border-color:#b23ab1}.toolTag{background:#fdf2fa;border-color:#f0d3e9}.insight:first-child{border-top:3px solid #64c7c5}.insight:last-child{border-top:3px solid #ffb768}.lookCard{box-shadow:0 6px 22px #8d32b110}.lookMeta{color:#a8299a}.swatches span{border:2px solid white;outline:1px solid #e8d5ea;box-shadow:0 2px 4px #41234515}.lookCardContent .swatches{gap:8px}.pill{background:#eedcfa;color:#7f2da2}dialog{background:#fff9fe;box-shadow:0 20px 80px #50224a55}.mirrorTools .progress span{background:linear-gradient(90deg,#f47cba,#a980f3,#63d7cc)}.rangeLabel input{accent-color:#f087cc}.check input{accent-color:#d159c8}#toast{background:linear-gradient(110deg,#6c2b87,#a52a7a)}footer{background:#f4e9fa80}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline-color:#b43bb5}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.colorTile:hover{transform:none}}
@media(max-width:640px){.headline h1{font-size:33px}.headline{gap:10px}.colorTile .paint{height:63px}.colorTile strong{font-size:11px}.colorTile em{font-size:10px}.headline>.primary{white-space:normal;max-width:95px;flex-shrink:0}.makeupIcon{width:30px;height:30px!important}}
.eyeHint{grid-column:1/-1;font-size:11px;line-height:1.65;margin:5px 0 13px;padding:10px 12px;background:#fcf1fc;border-radius:0 9px 9px 0}.eyeHelp{grid-column:1/-1}#eyeDialog{max-width:780px}.eyelidGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.eyelidCard{text-align:left;min-width:0;border-radius:16px;padding:17px;background:#fff;display:flex;flex-direction:column;align-items:start}.eyelidCard svg{width:100%;height:100px;background:linear-gradient(120deg,#fff4fa,#f3e7ff);border-radius:10px;margin-bottom:12px}.eyelidCard strong{font-size:15px;color:#73338a}.eyelidCard>span{font-size:12px;color:var(--muted);margin-top:6px}.eyelidCard p{font-size:12px;line-height:1.5;margin:10px 0;flex:1}.eyelidCard em{font-size:11px;font-style:normal;color:#a13299;font-weight:600}.eyelidCard[aria-pressed=true]{border:2px solid #b744b6;background:#fff3fc;padding:16px}.eyelidCard:hover{background:#fbedff;border-color:#c378d3}#mirrorEye{margin-bottom:4px}@media(max-width:640px){.eyelidGrid{gap:10px}.eyelidCard{padding:12px}.eyelidCard[aria-pressed=true]{padding:11px}.eyelidCard strong{font-size:13px}.eyelidCard svg{height:80px}.eyelidCard>span,.eyelidCard p{font-size:11px}.profile>.eyeHelp,.profile>.eyeHint{grid-column:1/-1}}
#testerDialog{max-width:760px}#testerDialog h2{font-size:27px;margin-top:10px}.testerSteps{padding-left:22px;font-size:13px;line-height:1.7}.testerSteps li{margin:12px 0;padding-left:4px}.testerSteps b{color:var(--plum)}textarea{font:13px/1.6 system-ui;width:100%;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff;color:var(--ink);min-height:100px}#testerReport{font:11px/1.6 ui-monospace,monospace;background:#f9f2fc}#testerDialog hr{border:0;border-top:1px solid var(--line);margin:23px 0}#testerDialog details p{font-size:12px}#testerHelp{min-height:44px}footer{align-items:center}

/* Keep the mirror and palette primary; reveal profile and lessons on demand. */
.workspace{grid-template-columns:minmax(300px,1.4fr) minmax(280px,1fr);max-width:1100px;margin:auto}
.workspace>.profile{display:block;grid-column:1/-1;grid-row:auto;padding:16px 20px}
.profile>summary,.lessonDetails>summary,.extras>summary{cursor:pointer;font-weight:600;font-size:15px;min-height:28px;padding:5px 0}
.profile>summary span{font-size:12px;font-weight:400;color:var(--muted);margin-left:10px}
.profileFields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;padding-top:16px}
.profileFields>.panelHeading,.profileFields>.profileSummary,.profileFields>.tiny{grid-column:1/-1}
.workspace>.mirror{grid-column:1;grid-row:2}.workspace>.lesson{grid-column:2;grid-row:2}
.colorLibraryNotice{display:none}.lessonDetails{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}.extras{max-width:1100px;margin:20px auto}
#cameraNotice{font-size:13px;line-height:1.5;padding:12px;border-radius:10px;background:#352644;color:#fff}#cameraNotice[data-state=error]{background:#6a253f}
@media(max-width:700px){.workspace{grid-template-columns:1fr}.workspace>.mirror{grid-column:1;grid-row:2}.workspace>.lesson{grid-column:1;grid-row:3}.profileFields{grid-template-columns:1fr 1fr}.profile>summary span{display:block;margin:5px 0 0}.headline .eyebrow{display:none}.headline h1{font-size:30px}.stage{max-height:65vh;width:auto;aspect-ratio:4/5}.profileFields>.hint{grid-column:auto}}

/* Clear entry points and comfortable touch targets for new users. */
.startLesson{width:100%;margin:16px 0 10px;min-height:48px}.downloadOptions{margin-top:16px}.downloadOptions summary{cursor:pointer;padding:12px 0;font-weight:600}button,select,summary{touch-action:manipulation}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #8b44b1;outline-offset:3px}@media(max-width:700px){button,select{min-height:44px}.paletteTabs{gap:6px}.hero h1{font-size:clamp(28px,8vw,42px)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Color playground: a friendly, playful shell around the mirror. */
:root{--paper:#fff5fc;--white:#fff;--ink:#38204c;--muted:#685371;--line:#ecd4f5;--plum:#7831b5;--pink:#ffb8df;--soft:#f2e4ff;--dark:#38204c}
body{background:radial-gradient(ellipse at 6% 12%,#ffe0f2 0,transparent 38%),radial-gradient(ellipse at 95% 30%,#def9f5 0,transparent 38%),#fff7fc}
.top{background:#ffffffed;border-bottom:2px solid #edd9fc}.brand{font-family:ui-rounded,'Trebuchet MS',sans-serif;font-weight:900;color:#7631af}.top nav button{border-radius:99px;font-weight:750}.top nav button.active{background:#efe1ff;color:#602195}.beta{background:#fff2b8;color:#604516;border:0;letter-spacing:1px}
.headline{margin:28px 0 16px}.headline h1{font-family:ui-rounded,'Trebuchet MS',sans-serif;font-weight:900;letter-spacing:-1.4px;font-size:clamp(32px,4.5vw,56px)}.headline .colorWord{color:#a72d8f}.headline p{font-size:16px;max-width:570px}.eyebrow{letter-spacing:1px;color:#933b9c}.welcomeChips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}.welcomeChips span{padding:8px 16px;background:#ffe1f1;border-radius:99px;color:#63204d;font-weight:700}.welcomeChips span:nth-child(2){background:#d7f8f0;color:#205d52}.welcomeChips span:nth-child(3){background:#fff0b8;color:#695111}
.panel{border:2px solid #ead5f5;border-radius:26px;box-shadow:0 7px 0 #ecdaf45c}.panel h2,h2{font-family:ui-rounded,'Trebuchet MS',sans-serif;font-weight:800}.panelHeading .number{display:none}.profile.panel{background:#f5edff}.profile summary{font-weight:800}.lesson.panel{background:linear-gradient(155deg,#fff,#fff5fb)}button{border-radius:16px;font-weight:650}button.primary,.primary{background:#7831b5;border-color:#7831b5;box-shadow:0 4px 0 #4c1d7a;color:white}.primary:hover{background:#65269d}.startLesson{font-size:17px;min-height:52px}.field select{border-radius:14px;background:#fff;border:2px solid #e8d4f2;min-height:46px}.lessonDetails summary,.downloadOptions summary,.extras summary{color:#6c2b98;font-weight:750}.paletteTabs button{border-radius:99px}.paletteTabs button.active{background:#eadaff;color:#582183}.stage{border-radius:22px}.check{font-weight:650}.textButton{color:#71309b}.top nav button:hover{background:#f5e8ff}
@media(max-width:700px){main{padding:0 14px}.top{padding:12px 14px;gap:10px;flex-wrap:wrap}.top nav{gap:3px}.top nav button{padding:8px 10px}.headline{align-items:flex-start;flex-direction:column;gap:14px}.headline h1{letter-spacing:-.8px}.welcomeChips{gap:6px}.welcomeChips span{font-size:12px;padding:7px 10px}.panel{padding:17px;border-radius:22px}}

/* Stable mirror and two explicit tool panels. */
.headline{margin:18px auto;max-width:1100px}.headline h1{font-size:clamp(26px,3vw,38px)}.headline .eyebrow{display:none}.workspace>.profile{grid-row:2}.workspace>.mirror{grid-row:1;position:sticky;top:12px}.workspace>.lesson{grid-row:1}.studioPanelTabs{display:flex;gap:8px;position:sticky;top:0;background:#fff;padding:8px 0 16px;z-index:2}.studioPanelTabs button{flex:1;min-height:46px}.studioPanelTabs button[aria-pressed=true]{background:#7831b5;color:#fff}.lessonDetails{border:0;margin:0;padding:0}.lessonDetails>summary{display:none}.stage{max-height:55vh;aspect-ratio:4/5;width:auto;margin:auto}.mirror>div:not(.stage){padding-top:12px}.top{padding:12px 24px}.headline p{font-size:14px}.cameraWelcome{padding:20px}.cameraWelcome p{margin:8px 0}.cameraWelcome h2{font-size:23px}.profile{margin-top:4px}#cameraControls .cameraStep{display:none}.profileFields{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.workspace{gap:14px}.workspace>.mirror{grid-row:1;grid-column:1;position:relative;top:auto}.workspace>.lesson{grid-row:2;grid-column:1}.workspace>.profile{grid-row:3;grid-column:1}.stage{height:auto;max-height:340px;width:min(100%,272px);aspect-ratio:4/5}.headline{margin:12px 0;gap:8px}.headline h1{font-size:27px;margin:4px 0}.headline #saveLook{align-self:flex-end;font-size:12px;min-height:36px}.top .beta{display:none}.top{justify-content:center}.top .brand{font-size:23px}.top nav{width:100%;justify-content:space-around}.profileFields{grid-template-columns:1fr}.mirror .tiny{font-size:11px}.studioPanelTabs{position:static}.lesson.panel{padding:14px}}