@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#242b23;--muted:#747971;--line:#dde0d7;--lime:#d9ee9b;--paper:#f7f8f3;--white:#fff;--peach:#f2b89b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px}button,input,textarea{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;transition:background .15s,transform .15s}button:hover{filter:brightness(.95)}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #76933b;outline-offset:4px}header{height:86px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fafbf7}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:24px;letter-spacing:-1px;font-weight:700}.brandmark{display:grid;place-items:center;width:36px;height:36px;background:var(--ink);color:var(--lime);font-size:29px;border-radius:11px;font-family:Georgia;font-style:italic}.beta{font-size:10px;letter-spacing:1.3px;font-weight:500;border:1px solid #d4d8cd;padding:6px 8px;border-radius:4px;margin-left:8px}.quiet{border:0;background:transparent;color:var(--ink);font-size:14px;padding:10px}.quiet span{border:1px solid #bfc6b7;border-radius:100%;padding:0 5px;margin-left:9px}main{max-width:1550px;margin:auto;padding:36px 4.5% 20px}.intro{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:27px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600;margin-bottom:10px;color:#657156}h1{font-family:Manrope,sans-serif;font-size:43px;line-height:1.15;letter-spacing:-2px;font-weight:500;margin:0}h1 em{font-family:Georgia,serif;font-weight:400;color:#7b865f}.intro p{text-align:right;font-size:14px;line-height:1.6;color:var(--muted);margin:0}.importbar{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;padding:7px 8px 7px 20px;background:white;gap:15px}.youtube{color:#c4705c;font-size:19px}.importbar input{flex:1;min-width:0;border:0;background:transparent;outline:none;padding:12px 0;color:var(--ink);font-size:14px}.primary{border:0;border-radius:8px;background:var(--ink);color:white;font-size:14px;padding:15px 21px;display:flex;gap:24px;align-items:center;justify-content:center}.primary span{margin-left:auto}.importnote{font-size:12px;color:#74796e;line-height:1.5;margin:9px 2px 27px}.workspace{display:grid;grid-template-columns:235px minmax(320px,1fr) 290px;gap:28px}.sectionline{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:1.5px;font-weight:600;color:var(--muted)}.sectionline #sampleTag{font-size:9px;letter-spacing:.7px;background:#e9eedf;padding:5px 6px;border-radius:4px;color:#5c6d42}h2{font-family:Manrope,sans-serif;font-size:25px;line-height:1.23;letter-spacing:-1px;font-weight:600;margin:14px 0 9px}.sub{color:var(--muted);font-size:13px;line-height:1.6;margin:0}.stats{display:flex;gap:12px;font-size:11px;color:#6b7560;margin-top:18px}.line{height:1px;background:var(--line);margin:23px 0 17px}.step{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:0;background:transparent;padding:13px 10px;border-radius:9px;margin-bottom:7px;color:var(--muted)}.step .number{display:grid;place-items:center;border:1px solid #d8ded0;border-radius:50%;width:29px;height:29px;font-size:12px;flex-shrink:0}.step strong{display:block;font-size:13px;font-weight:500;color:var(--ink)}.step small{display:block;font-size:11px;margin-top:4px}.step.active{background:#e8eedb}.step.active .number{background:var(--ink);border-color:var(--ink);color:var(--lime)}.step.active strong{font-weight:700}.step.done .number{background:var(--lime);border-color:var(--lime);color:var(--ink)}.progressLabel{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:27px}progress{width:100%;height:4px;appearance:none;margin:11px 0 2px}progress::-webkit-progress-bar{background:#e1e6d9;border-radius:3px}progress::-webkit-progress-value{background:#7d9750;border-radius:3px}.textbutton{background:transparent;border:0;font-size:12px;color:#6f795e;padding:12px 0}.mirror{position:relative;border-radius:16px;overflow:hidden;background:#2c2c29;aspect-ratio:3/4;min-height:420px}.mirror img,.mirror video{position:absolute;width:100%;height:100%;object-fit:contain;inset:0}.mirror video{transform:scaleX(-1)}.mirror canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.mirrorTop{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;gap:8px}.glasspill{padding:8px 10px;background:#2229;border:1px solid #ffffff32;color:#fff;border-radius:6px;font-size:9px;letter-spacing:1px;backdrop-filter:blur(12px)}.glassbutton{background:#f8f9f5e8;border:0;border-radius:30px;font-size:11px;color:#343c2e;padding:9px 12px}.faceHint{position:absolute;top:65px;left:12px;right:12px;text-align:center;font-size:10px;color:#e3e4db;text-shadow:0 1px 4px #000}.placementLabel{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);background:#f8f9f2e8;backdrop-filter:blur(10px);border-radius:8px;padding:12px 16px;white-space:nowrap;font-size:12px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 20px #0001}.tinySpark{font-size:22px}.mirrorBottom{position:absolute;bottom:0;left:0;right:0;padding:38px 20px 21px;background:linear-gradient(transparent,#161914cf);display:flex;align-items:center;flex-direction:column;gap:11px}.cameraBtn{background:var(--lime);border:0;color:#29391e;font-size:13px;font-weight:600;padding:12px 27px;border-radius:30px}.mirrorBottom>span{font-size:10px;color:#e4e8dc}.mirrorSettings{display:flex;align-items:center;gap:12px;margin:11px 2px;font-size:11px;color:var(--muted)}input[type=range]{accent-color:#738651;width:90px;min-width:30px}.mirrorSettings .quiet{margin-left:auto;font-size:11px;padding:8px 0}.guidance{padding:4px 0}.duration{background:#edf0e5;border-radius:5px;padding:6px 8px;font-size:9px;letter-spacing:.6px}.guidance h2{font-size:32px;line-height:1.18;margin:20px 0 16px;letter-spacing:-1.2px}.tooltag{font-size:11px;line-height:1.5;padding:9px 12px;border:1px solid #d6dccb;border-radius:6px;color:#656f57}.instruction{font-size:14px;line-height:1.7;color:#66705c;margin:22px 0 18px}.actions{list-style:none;padding:0;counter-reset:action}.actions li{counter-increment:action;position:relative;padding:0 0 16px 27px;font-size:13px;line-height:1.6;color:#4f5949}.actions li:before{content:counter(action,decimal-leading-zero);position:absolute;left:0;top:0;font-size:10px;color:#8f9984}.tip{border-radius:9px;background:#ecf0e1;padding:17px 17px 14px;margin:13px 0 22px}.tip>span{font-size:10px;letter-spacing:1.2px;color:#657a44}.tip p{font-size:12px;line-height:1.65;color:#596448;margin:9px 0 0}.adaptation{display:flex;gap:13px;margin:21px 0;color:#526142}.adaptiveIcon{font-size:26px}.adaptation strong{font-weight:500;font-size:12px}.adaptation p{font-size:11px;line-height:1.5;color:var(--muted);margin:5px 0}.complete{width:100%;padding:16px;background:#dbeaac;color:#293c20}.guidance>.textbutton{display:block;margin:2px auto}footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:30px;padding-top:18px;color:#869078;font-size:10px}.tutorialBox{margin-top:18px}iframe{width:100%;aspect-ratio:16/9;border:0;margin-top:12px;border-radius:8px}dialog{border:1px solid var(--line);border-radius:18px;max-width:580px;width:calc(100% - 30px);padding:35px;color:var(--ink);background:var(--paper);box-shadow:0 20px 100px #0004}dialog::backdrop{background:#17200b70;backdrop-filter:blur(5px)}dialog p{font-size:14px;line-height:1.7;color:var(--muted)}dialog .close{position:absolute;top:12px;right:17px;font-size:28px;border:0;background:none;color:var(--muted)}dialog label{font-size:13px;display:block;margin:20px 0 9px}textarea{resize:vertical;min-height:180px;width:100%;padding:14px;background:white;border:1px solid #cfd5c5;border-radius:9px;font-size:14px;line-height:1.6}.aboutSteps{padding-left:20px}.aboutSteps li{padding:9px}.aboutSteps p{margin:4px 0}.small{font-size:12px!important}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;z-index:20;border-radius:10px;padding:15px 24px;max-width:90%;font-size:13px;box-shadow:0 8px 35px #0003}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}
@media(min-width:1450px){.workspace{grid-template-columns:255px minmax(320px,1fr) 320px;gap:36px}.mirror{max-height:710px;aspect-ratio:auto}.guidance h2{font-size:37px}.actions li{font-size:14px}}@media(max-width:1100px){.workspace{grid-template-columns:190px minmax(280px,1fr) 240px;gap:20px}main{padding:25px 3%}.guidance h2{font-size:27px}.mirrorSettings{gap:6px}.mirrorSettings input{width:60px}.beta{display:none}}@media(max-width:850px){.workspace{grid-template-columns:minmax(270px,1fr) minmax(230px,.75fr)}.steps{grid-column:1/-1}.steps nav{display:flex;gap:7px;overflow:auto;padding-bottom:4px}.step{min-width:143px;padding:10px;margin:0}.step small{display:none}.steps h2{font-size:22px}.steps .sub,.stats,.steps .line,.progressLabel,.steps progress,.steps>#restartBtn{display:none}.steps .sectionline{margin-bottom:0}.steps h2{margin:8px 0 14px}.tutorialBox{max-width:400px}.mirror{min-height:450px}.intro p{display:none}}@media(max-width:560px){header{height:66px;padding:0 18px}.brand{font-size:22px}header>.quiet{font-size:12px;padding:4px}main{padding:25px 16px 18px}h1{font-size:35px}.intro{margin-bottom:20px}.eyebrow{font-size:9px}.importbar{padding:7px 6px 7px 10px;gap:8px}.importbar input{font-size:12px}.importbar .primary{font-size:11px;padding:13px 12px;gap:8px}.importbar .primary span{display:none}.importnote{font-size:11px;margin-bottom:22px}.workspace{display:flex;flex-direction:column;gap:18px}.steps{order:0}.mirrorColumn{order:1}.guidance{order:2;padding:10px 3px}.mirror{min-height:0;aspect-ratio:3/4}.mirrorSettings{font-size:11px;gap:12px}.mirrorSettings input{width:80px}.guidance h2{font-size:30px;margin:13px 0}.guidance .instruction{margin:15px 0}.tip{margin-top:6px}.adaptation{margin:14px 0}.complete{font-size:15px}footer{flex-direction:column;gap:8px;font-size:10px;margin-top:20px}.sectionline{font-size:10px}dialog{padding:28px 22px}.step strong{font-size:12px}}

/* Anchored to the bottom camera controls so it never covers them. */
.pip{position:absolute;right:14px;bottom:calc(100% + 6px);width:132px;height:74px;border-radius:10px;overflow:hidden;background-color:#111;background-repeat:no-repeat;border:1px solid #ffffff66;box-shadow:0 4px 16px #0006;z-index:1;pointer-events:none}.pip span{position:absolute;left:6px;bottom:5px;font-size:10px;line-height:1.4;color:#fff;background:#000000a6;border-radius:6px;padding:0 5px;font-variant-numeric:tabular-nums}
.analysisProgress{display:flex;flex-direction:column;gap:6px;margin-top:12px}.analysisProgress[hidden]{display:none}.analysisProgress progress{width:100%;height:8px;appearance:none;-webkit-appearance:none;border:0;border-radius:99px;background:#e3e7d8;overflow:hidden}.analysisProgress progress::-webkit-progress-bar{background:#e3e7d8;border-radius:99px}.analysisProgress progress::-webkit-progress-value{background:#7d9a4f;border-radius:99px;transition:width .4s ease}.analysisProgress progress::-moz-progress-bar{background:#7d9a4f;border-radius:99px}.analysisProgress span{font-size:12px;line-height:1.5;color:#526047}