:root{color:#292724;--ink:#292724;--muted:#77716a;--line:#ded7cf;--accent:#9a5d45;background:#f6f3ef;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.app>header{border-bottom:1px solid var(--line);background:#fff;align-items:center;gap:36px;height:70px;padding:0 4vw;display:flex}.brand{color:var(--ink);align-items:center;gap:10px;font:600 20px Georgia,serif;text-decoration:none;display:flex}.brand i{background:var(--ink);color:#efd5c4;border-radius:50%;place-items:center;width:34px;height:34px;display:grid}.app nav{gap:22px;display:flex}.app nav a{color:var(--muted);font-size:14px;text-decoration:none}.local{color:#427659;margin-left:auto;font-size:13px}main{max-width:1240px;margin:auto;padding:54px 36px 70px}.intro{grid-template-columns:1.15fr .85fr;align-items:end;gap:50px;margin-bottom:35px;display:grid}.eyebrow{color:var(--accent);letter-spacing:1.6px;font-size:12px;font-weight:800}.intro h1{letter-spacing:-3px;margin:18px 0;font:500 clamp(48px,6vw,76px)/.96 Georgia,serif}.intro p{max-width:690px;color:var(--muted);font-size:16px;line-height:1.65}.mode{background:#ebe5de;border-radius:10px;grid-template-columns:1fr 1fr;padding:5px;display:grid}.mode button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;padding:16px 12px;font-size:12px;font-weight:800}.mode small{color:var(--muted);margin-top:4px;font-size:11px;font-weight:400;display:block}.workspace{grid-template-columns:1.25fr .75fr;gap:20px;display:grid}.viewer{border:1px solid var(--line);background:#e9e1da;border-radius:14px;place-items:center;min-height:600px;display:grid;overflow:hidden}.drop{cursor:pointer;color:var(--ink);background:0 0;border:0;justify-items:center;gap:10px;display:grid}.drop i{background:#fff;border-radius:50%;place-items:center;width:70px;height:70px;font-size:30px;font-style:normal;display:grid}.drop b{font:500 27px Georgia,serif}.drop span{color:var(--muted);font-size:13px}.stage{width:100%;height:auto;display:block;position:relative}.stage img{object-fit:contain;width:100%;height:auto;display:block}.stage svg{touch-action:none;width:100%;height:100%;position:absolute;inset:0}.point{fill:#fff;stroke:#9a5d45;stroke-width:3px;vector-effect:non-scaling-stroke;cursor:grab}.point.nose{fill:#ffd18b}.point.mouth{fill:#f6a5a7}.point.jaw,.point.chin{fill:#9dc6e8}.loading{color:#fff;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#222b;place-items:center;display:grid;position:absolute;inset:0}.panel{border:1px solid var(--line);background:#fff;border-radius:14px;align-self:start;padding:28px}.status{border-bottom:1px solid var(--line);grid-template-columns:12px 1fr;gap:3px 10px;padding-bottom:20px;display:grid}.status>span{background:#aaa;border-radius:50%;width:10px;height:10px;margin-top:5px}.status>span.ready{background:#42a16e}.status>span.loading{background:#d18a3f}.status>span.error{background:#d9584f}.status small{color:var(--muted);grid-column:2}.panel h2{margin:26px 0 17px;font:500 27px Georgia,serif}.metricgrid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.metricgrid>div{background:#f6f3ef;border-radius:7px;gap:5px;padding:12px;display:grid}.metricgrid small{color:var(--muted);font-size:11px}.scores{gap:15px;margin-top:24px;display:grid}.scores label>span{justify-content:space-between;margin-bottom:6px;font-size:13px;display:flex}.scores label>i{background:#eeeae6;border-radius:5px;height:6px;display:block;overflow:hidden}.scores em{background:var(--accent);height:100%;display:block}.save,.fallback button,.debug button{background:var(--ink);color:#fff;cursor:pointer;border:0;border-radius:7px;min-height:43px;padding:0 15px;font-weight:700}.save{width:100%;margin-top:22px}.fallback{background:#fff0ef;border:1px solid #edc5c1;border-radius:8px;margin-top:16px;padding:13px}.fallback p{color:#97433d;line-height:1.5}.fallback button{margin:4px 5px 0 0;font-size:12px}.disclaimer{border:1px solid var(--line);color:var(--muted);background:#fff;border-radius:10px;margin-top:24px;padding:18px;font-size:13px;line-height:1.6}.debug{color:#e7e7e1;background:#1f201f;border-radius:12px;margin-top:35px;padding:24px}.debug h2{margin-top:0}.debug-actions{gap:8px;display:flex}.debug button{color:#292724;background:#e7d2c3}.debug pre{background:#151615;border-radius:8px;padding:15px;font:12px/1.55 ui-monospace,monospace;overflow:auto}@media (width<=900px){.intro,.workspace{grid-template-columns:1fr}.viewer{min-height:520px}}@media (width<=600px){.app>header{padding:0 18px}.app nav{display:none}.local{font-size:0}.local:first-letter{font-size:14px}main{padding:35px 16px}.intro h1{font-size:48px}.mode{grid-template-columns:1fr}.viewer{min-height:430px}.drop span{max-width:280px}.metricgrid{grid-template-columns:1fr 1fr}}.psl-result{color:#fff;background:linear-gradient(145deg,#292724,#3b3732);border:1px solid #292724;border-radius:10px;margin-top:24px;padding:20px}.psl-result>small{letter-spacing:1.4px;color:#d8b8a5;font-size:10px;font-weight:800}.psl-result>div{align-items:flex-end;gap:7px;margin:7px 0 3px;display:flex}.psl-result strong{color:#f1d6c4;font:500 54px/1 Georgia,serif}.psl-result>div span{color:#c8c2bc;padding-bottom:7px}.psl-result>b{font-size:13px;display:block}.psl-result>p{color:#bcb6b0;margin:10px 0 0;font-size:11px;line-height:1.45}:root{--liquid-blue:#75a8ff;--liquid-violet:#a982ff;--liquid-mint:#77dfca;--glass:#ffffffad;--glass-line:#ffffffd1}body{background-color:#0000;background-image:radial-gradient(circle at 12% 12%,#75a8ff3d,#0000 33%),radial-gradient(circle at 88% 18%,#a982ff38,#0000 31%),radial-gradient(circle at 58% 90%,#77dfca2e,#0000 36%),linear-gradient(145deg,#f8f8fc,#f3f0f7 52%,#eef6f5);background-position:0 0,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,repeat;background-size:auto,auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;min-height:100vh}.app{isolation:isolate;min-height:100vh;position:relative;overflow:hidden}.app:before,.app:after{content:"";z-index:-1;filter:blur(3px);pointer-events:none;border-radius:42% 58% 65% 35%/45% 40% 60% 55%;position:fixed}.app:before{background:linear-gradient(145deg,#75a8ff40,#a982ff29);width:360px;height:360px;top:18%;left:-110px;transform:rotate(18deg)}.app:after{background:linear-gradient(145deg,#77dfca33,#75a8ff1f);width:430px;height:430px;bottom:-90px;right:-150px;transform:rotate(-24deg)}.app>header{z-index:30;-webkit-backdrop-filter:blur(24px)saturate(145%);backdrop-filter:blur(24px)saturate(145%);background:#ffffff9e;border-bottom:1px solid #ffffffd9;position:sticky;top:0;box-shadow:0 8px 28px #3f38560f}.brand i{background:linear-gradient(145deg,#242631,#51546a);box-shadow:inset 0 1px 1px #ffffff38,0 8px 18px #2a2c3f2e}.intro h1{background:linear-gradient(120deg,#25242b 15%,#59516f 68%,#426f75);color:#0000;-webkit-background-clip:text;background-clip:text}.mode{border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(18px)saturate(140%);backdrop-filter:blur(18px)saturate(140%);background:#fff6;border-radius:18px;padding:6px;box-shadow:0 16px 38px #453d5b17}.mode button{border-radius:13px;transition:transform .18s,background .18s}.mode button:hover{transform:translateY(-1px)}.mode button.active{background:linear-gradient(145deg,#fffffff2,#f4f2fbbf);box-shadow:0 8px 22px #3d38581f,inset 0 1px 1px #fff}.viewer,.panel,.disclaimer{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(22px)saturate(145%);backdrop-filter:blur(22px)saturate(145%);box-shadow:0 24px 70px #4139581c,inset 0 1px 1px #ffffffe6}.viewer{background:linear-gradient(145deg,#eef1f9c2,#e7e1efad);border-radius:26px;padding:8px}.stage,.stage img{border-radius:20px}.panel{border-radius:24px;padding:28px}.metricgrid>div{background:linear-gradient(145deg,#ffffffd1,#eff0f8ad);border:1px solid #ffffffdb;border-radius:13px;box-shadow:inset 0 1px 1px #fff}.psl-result{background:linear-gradient(135deg,#232532f5,#4a4365f0 62%,#39686ae6);border-radius:20px;position:relative;overflow:hidden;box-shadow:0 18px 42px #302d483d,inset 0 1px 1px #ffffff3d}.psl-result:after{content:"";background:radial-gradient(circle,#91d3ff61,#0000 68%);border-radius:50%;width:170px;height:170px;position:absolute;top:-85px;right:-65px}.scores em{background:linear-gradient(90deg,var(--liquid-blue),var(--liquid-violet),var(--liquid-mint));border-radius:99px}.scores label>i{background:#4b465c1a;height:8px}.save{background:linear-gradient(120deg,#282936,#4e5570);border-radius:14px;transition:transform .18s,box-shadow .18s;box-shadow:0 12px 24px #2a2d4233}.save:hover{transform:translateY(-2px);box-shadow:0 16px 28px #2a2d4240}.replace-photo{z-index:4;color:#fff;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);cursor:pointer;background:#1f202a8f;border:1px solid #ffffffbf;border-radius:13px;min-height:42px;padding:0 15px;position:absolute;bottom:16px;left:16px;box-shadow:0 8px 24px #0000002e}.replace-photo:hover{background:#1f202ab8}.point{filter:drop-shadow(0 2px 5px #0000004d);transition:r .12s}.point:hover{r:12}.loading{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#23243099;border-radius:20px}.disclaimer{border-radius:18px}.fallback{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffeef0c7;border-radius:15px}@media (width<=600px){.viewer,.panel{border-radius:20px}.panel{padding:20px}.psl-result strong{font-size:48px}.replace-photo{bottom:12px;left:12px}}.mode{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;gap:10px;padding:0}.mode button{-webkit-backdrop-filter:blur(22px)saturate(150%);backdrop-filter:blur(22px)saturate(150%);text-align:left;background:#ffffff94;border:1px solid #ffffffe6;grid-template-columns:42px 1fr;align-items:start;gap:14px;min-height:108px;padding:18px;display:grid;box-shadow:0 14px 38px #31304814}.mode button>i{color:#6f6b7c;background:#282a3712;border-radius:13px;place-items:center;width:40px;height:40px;font-style:normal;display:grid}.mode button>span{gap:3px;display:grid}.mode button b{letter-spacing:.2px;font-size:13px}.mode button small{font-size:11px}.mode button em{color:#65708f;text-transform:uppercase;letter-spacing:.7px;margin-top:8px;font-size:10px;font-style:normal;font-weight:800}.mode button.active{background:linear-gradient(145deg,#fffffffa,#ebf1ffe0);border-color:#84a2ff80;box-shadow:0 18px 46px #49548526,inset 0 1px 1px #fff}.mode button.active>i{color:#fff;background:linear-gradient(145deg,#667eea,#77b6d9);box-shadow:0 8px 20px #5b71c24d}.mode button.active em{color:#3f6bb8}