:root{--bg:#050308;--panel:#0e0b12;--pink:#ff70bd;--pink2:#ffb6df;--text:#fff;--muted:#c9b8c4;--line:#4d2940;--gold:#e2bd70}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;overflow:hidden}
button,input{font:inherit}
button{cursor:pointer}
#app{width:100%;height:100dvh}
.page{display:none;width:100%;height:100dvh;position:relative;background:var(--bg)}
.page.active{display:flex}
/* Page 1 */
.page1{align-items:center;justify-content:center;overflow:hidden}
.hero-art{width:100%;height:100%;object-fit:contain;display:block;background:#050308}
.image-enter{position:absolute;left:15%;width:70%;bottom:8.3%;height:7.2%;min-height:44px;border:0;background:transparent;border-radius:999px;padding:0}
.image-enter:focus-visible{outline:3px solid var(--pink2);outline-offset:4px}
/* Pages 2/4 */
.page2,.page4{align-items:center;justify-content:center;flex-direction:column;padding:14px;gap:12px}
.portrait-shell,.result-card{position:relative;width:min(560px,96vw);height:min(76dvh,820px);overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#09070b;box-shadow:0 20px 60px #0008}
.portrait-shell img,.result-card img{width:100%;height:100%;object-fit:cover;display:block}
.portrait-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0001 45%,#000b 100%)}
.portrait-copy{position:absolute;left:22px;right:22px;bottom:20px;text-align:left;text-shadow:0 2px 12px #000}
.eyebrow,.result-info>span,.builder-overlay span{font-size:11px;letter-spacing:3px;color:var(--pink2);font-weight:800}
.portrait-copy h1{font-size:36px;margin:4px 0 0}.portrait-copy p{margin:3px 0;color:#eadce5}
.action-dock{width:min(420px,92vw);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.primary,.secondary{height:52px;border-radius:999px;border:1px solid;font-weight:900;letter-spacing:1.4px;font-size:12px}
.primary{background:linear-gradient(180deg,#ff89c8,#f85cae);border-color:#ffb5df;color:#210917;box-shadow:0 0 24px #ff63b640}
.secondary{background:#120d14;border-color:#6b3d59;color:#ffe1f0}
.primary:focus-visible,.secondary:focus-visible,.chips button:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--pink2);outline-offset:3px}
/* Page 3 */
.page3{padding:12px}
.builder{width:min(1180px,100%);height:100%;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:12px;margin:auto}
.builder-portrait{position:relative;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#09070b}
.builder-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.builder-overlay{position:absolute;left:20px;bottom:18px;display:flex;flex-direction:column;gap:4px;text-shadow:0 2px 12px #000}
.builder-overlay strong{font-size:30px}
.controls{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:13px;overflow:auto;display:flex;flex-direction:column;gap:9px;min-width:0}
.controls-head{display:flex;align-items:center;gap:9px;padding-bottom:2px}.controls-head span{font-size:9px;letter-spacing:2px;color:var(--pink2);font-weight:800}.controls-head h2{margin:1px 0 0;font-size:20px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid #6b3d59;background:#171018;color:#fff;font-size:22px}
.control-group,.slider-card{background:#130e16;border:1px solid #3e2435;border-radius:12px;padding:9px}
.control-group>label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#d7c5d0;font-weight:800;margin-bottom:7px}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.chips button{height:34px;border-radius:8px;border:1px solid #553149;background:#171118;color:#f8eaf1;font-size:9px;font-weight:800}.chips button.selected{background:linear-gradient(180deg,#ff86c7,#f15aa9);color:#250b18;border-color:#ffb2dc}
.slider-card label{display:flex;justify-content:space-between;font-size:11px;font-weight:800}.slider-card b{color:var(--pink2)}
input[type=range]{width:100%;accent-color:#ff70bd;margin:8px 0 0}
.builder-actions{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:7px}.builder-actions button{width:100%;height:48px}
/* Page 4 */
.result-card{height:min(78dvh,760px)}.result-info{position:absolute;left:20px;right:20px;bottom:18px;padding:14px;border-radius:14px;background:#050308aa;backdrop-filter:blur(7px)}.result-info h2{font-size:34px;margin:4px 0}.result-info p{margin:0;color:#eadce5}.result-actions{grid-template-columns:1fr 1fr}
@media(max-width:760px){.builder{grid-template-columns:minmax(0,1fr) minmax(220px,.75fr);gap:7px}.controls{padding:9px;border-radius:15px}.controls-head h2{font-size:16px}.control-group,.slider-card{padding:7px}.chips button{height:31px;font-size:8px}.builder-overlay strong{font-size:24px}}
@media(max-width:520px){.page2,.page4{padding:8px;gap:8px}.portrait-shell,.result-card{width:96vw;height:calc(100dvh - 90px);border-radius:17px}.action-dock{width:96vw;gap:6px}.primary,.secondary{height:46px;font-size:10px}.builder{grid-template-columns:1fr .82fr}.controls{gap:6px}.controls-head{gap:6px}.icon-btn{width:32px;height:32px;font-size:18px}.control-group>label{font-size:8px}.chips{gap:3px}.chips button{font-size:7px;height:28px}.slider-card{font-size:9px}.builder-actions{grid-template-columns:1fr}.builder-actions button{height:42px}.builder-actions .secondary{display:none}.builder-overlay{left:12px;bottom:12px}.builder-overlay strong{font-size:19px}}
@media(max-width:380px){.builder{grid-template-columns:1fr .9fr}.controls{padding:6px}.control-group,.slider-card{padding:5px}.chips button{height:26px;font-size:6.5px}.controls-head h2{font-size:14px}}
@media(orientation:landscape) and (max-height:600px){.portrait-shell{height:calc(100dvh - 80px)}.page2,.page4{padding:6px;gap:6px}.action-dock{grid-template-columns:1fr 1fr}.primary,.secondary{height:42px}.builder{grid-template-columns:1.25fr .75fr}}