:root{--bg:#faf8f3;--ink:#171715;--muted:#70716f;--blue:#0759ff;--line:#e7e4de;--soft:#edf3ff;color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#eeece6;font-synthesis:none;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}body{margin:0}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #7da7ff;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}button{transition:transform .18s,background .18s}button:active:not(:disabled){transform:scale(.98)}[hidden]{display:none!important}.app{max-width:480px;min-height:100svh;margin:auto;background:var(--bg);padding:calc(12px + var(--tg-content-safe-area-inset-top,0px)) 18px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column}header{height:47px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;margin-bottom:16px}.wordmark{color:var(--ink);text-decoration:none;font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:950;letter-spacing:-1.8px;font-size:29px;display:block;transform:scaleX(.83)}.icon-button,.header-space{width:36px;height:36px}.icon-button{border:0;background:transparent;padding:7px;display:grid;place-items:center}.icon-button svg{width:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.screen{display:flex;flex-direction:column;flex:1;animation:screen-in .3s both}.intro{text-align:center;margin:2px 0 20px}.intro h1{font-size:clamp(23px,6vw,28px);line-height:1.08;letter-spacing:-1px;margin:0 0 8px;font-weight:800}.intro p{font-size:14px;line-height:1.4;color:#626360;margin:0}.reference-card{position:relative;border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden;aspect-ratio:0.88;max-height:45svh;min-height:220px}.reference-card>img{width:100%;height:100%;object-fit:contain;display:block}.arrow{position:absolute;bottom:12px;border:1px solid #deded8;background:#fffffff0;width:39px;height:39px;border-radius:50%;font-size:24px;line-height:1;box-shadow:0 2px 6px #0000000a}.prev{left:12px}.next{right:12px}.haircut-name{text-align:center;padding:13px 0 12px}.haircut-name h2{font-size:17px;line-height:1.2;margin:0 0 5px;letter-spacing:-.35px}.haircut-name p{font-size:13px;color:var(--muted);margin:0}.thumbnails{display:flex;gap:7px;overflow:auto;padding:2px 2px 8px;scrollbar-width:none;margin-bottom:8px}.thumbnails::-webkit-scrollbar{display:none}.thumb{flex:0 0 75px;height:87px;padding:0;border:2px solid transparent;border-radius:11px;overflow:hidden;background:#e7e5e1}.thumb[aria-pressed=true]{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}.thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.actions{display:flex;flex-direction:column;gap:9px;margin-top:auto;padding-top:8px}.primary,.secondary{width:100%;min-height:51px;padding:13px 15px;border-radius:16px;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.3}.primary{border:1px solid var(--blue);background:var(--blue);color:white}.primary:hover{background:#004de8}.secondary{border:1.2px solid var(--blue);background:transparent;color:var(--blue)}.secondary:hover{background:#eaf0ff}.text-button{border:0;padding:8px 0;background:transparent;color:var(--blue);font-size:13px;font-weight:600}.stepper{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:18px;flex-shrink:0}.stepper span{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#dcdcd8;color:white;font-size:11px;font-weight:700}.stepper span.active{background:var(--blue)}.stepper i{height:2px;width:31px;background:#e1e1dd}.notice{background:#fff0db;border:1px solid #f0d3a6;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.45;margin-bottom:16px;white-space:pre-line}.notice a{color:var(--blue)}.upload-area{width:100%;position:relative;aspect-ratio:1.1;min-height:230px;max-height:43svh;border:1.4px dashed #82aaff;border-radius:18px;background:linear-gradient(140deg,#eaf3ff,#dceaff);color:var(--blue);padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center}.upload-placeholder{display:flex;align-items:center;flex-direction:column;gap:16px;font-size:17px}.upload-placeholder svg{width:50px;height:50px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.upload-hint{position:absolute;bottom:16px;left:12px;right:12px;text-align:center;color:#71819b;font-size:11px;line-height:1.4}.upload-area img{height:100%;width:100%;object-fit:contain;display:block;background:#eceae5}.upload-area.has-photo .upload-placeholder{display:none}.selected-style{border:1px solid var(--line);border-radius:16px;padding:8px;display:flex;align-items:center;gap:12px;margin:15px 0}.selected-style img{width:65px;height:66px;object-fit:cover;object-position:top;border-radius:11px}.selected-style div{display:flex;flex-direction:column;gap:4px;flex:1}.selected-style span{font-size:12px;color:var(--muted)}.selected-style strong{font-size:16px}.selected-style button{padding:10px}.loading{text-align:center}.loading .intro{margin-top:16px}.magic-stage{height:290px;max-height:40svh;position:relative;display:grid;place-items:center;margin:3px 0 16px;isolation:isolate}.orbit{position:absolute;left:50%;top:50%;width:226px;height:226px;border-radius:50%;border:1px dashed #bdcefb;transform:translate(-50%,-50%) rotate(-20deg);animation:orbit 30s linear infinite}.orbit-two{width:164px;height:164px;border:1px solid #dce5fb;animation-direction:reverse;animation-duration:22s}.bouncing-emoji{font-size:83px;line-height:1;display:block;position:relative;animation:hop 1.65s cubic-bezier(.4,0,.2,1) infinite;filter:drop-shadow(0 9px 6px #0049bd10)}.emoji-shadow{position:absolute;top:calc(50% + 52px);width:79px;height:10px;border-radius:50%;background:#cedcff;filter:blur(3px);animation:shadow 1.65s ease-in-out infinite}.tiny-emoji{position:absolute;left:calc(50% + 53px);top:calc(50% - 70px);font-size:27px;animation:twinkle 2.8s infinite}.spark{position:absolute;color:var(--blue);font-size:23px;animation:twinkle 3s infinite}.spark-one{left:16%;top:22%}.spark-two{right:15%;bottom:23%;animation-delay:.8s}.spark-three{left:23%;bottom:21%;font-size:14px;animation-delay:1.6s}.status-container{min-height:136px}.status-container h2{font-size:21px;line-height:1.25;letter-spacing:-.6px;max-width:330px;margin:0 auto 14px;text-wrap:balance}.status-container h2.switching{animation:status-in .55s both}.status-container p{font-size:14px;line-height:1.55;color:var(--muted);margin:14px 0 0}.loading-dots{display:flex;gap:6px;justify-content:center}.loading-dots i{width:6px;height:6px;background:var(--blue);border-radius:50%;animation:dot 1.3s infinite}.loading-dots i:nth-child(2){animation-delay:.18s}.loading-dots i:nth-child(3){animation-delay:.36s}.handwritten{font-family:'Segoe Print','Comic Sans MS',cursive;font-size:16px;line-height:1.5;color:#50534f;margin:auto 0 16px;padding-top:30px;font-style:italic}.handwritten svg{display:block;width:145px;height:16px;margin:2px auto;stroke:var(--blue);fill:none;stroke-width:1.5}.result-photo{border-radius:18px;overflow:hidden;background:#e7e5df;margin-bottom:16px}.result-photo img{width:100%;height:auto;display:block}

@keyframes hop{0%,100%{transform:translateY(9px) rotate(-10deg) scaleX(1.03)}45%{transform:translateY(-28px) rotate(12deg) scaleX(.98)}65%{transform:translateY(-20px) rotate(7deg)}}@keyframes shadow{0%,100%{transform:scaleX(1);opacity:.7}45%,65%{transform:scaleX(.55);opacity:.25}}@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.7) rotate(-10deg)}50%{opacity:1;transform:scale(1.1) rotate(15deg)}}@keyframes orbit{to{transform:translate(-50%,-50%) rotate(340deg)}}@keyframes dot{0%,65%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:1}}@keyframes screen-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes status-in{0%{opacity:0;transform:translateY(8px);filter:blur(3px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(min-width:650px){body{padding:20px}.app{min-height:calc(100svh - 40px);border-radius:27px;padding-left:23px;padding-right:23px;box-shadow:0 12px 60px #2421110a}.reference-card{max-height:430px}header{margin-bottom:20px}.thumbnails{margin-bottom:5px}}
@media(max-height:720px) and (max-width:649px){.app{padding-top:7px}header{margin-bottom:8px;height:38px}.intro{margin-bottom:12px}.reference-card{max-height:40svh;min-height:200px}.thumb{height:66px;flex-basis:62px}.haircut-name{padding:9px 0}.stepper{padding-top:12px}.primary,.secondary{min-height:47px}.magic-stage{height:235px}.loading .intro{margin-top:5px}.handwritten{padding-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* The supplied logo is inserted unchanged; the viewport hides its outer margins. */
header{height:88px}.wordmark{position:relative;display:block;width:112px;height:84px;transform:none;overflow:hidden}.wordmark img{position:absolute;width:160px;height:auto;max-width:none;left:-29px;top:-111px;mix-blend-mode:multiply}.subscription .intro{margin-top:22px}.subscription-art{position:relative;text-align:center;font-size:85px;padding:55px 0 28px;line-height:1.3}.subscription-art span{position:absolute;color:var(--blue);font-size:25px;top:40px;margin-left:10px}.subscription-note{text-align:center;font-size:14px;line-height:1.65;color:var(--muted);margin:15px 0 30px}.subscription .actions a{text-decoration:none}.subscription .actions{padding-top:25px}body:has(#subscription:not([hidden])) .stepper{visibility:hidden}@media(max-height:720px){header{height:70px}.wordmark{transform:scale(.82);transform-origin:center}}

/* Keep the complete reference at its native ratio and fill the card width. */
.reference-card{aspect-ratio:auto;max-height:none;min-height:0}.reference-card>img{width:100%;height:auto;object-fit:initial}
/* All views share the visible Telegram viewport. Media gets the remaining space. */
:root{--view-gap:8px;--header-height:62px;--thumb-height:58px;--button-height:46px;--title-size:24px;--small-size:13px}
:root[data-layout=compact]{--view-gap:6px;--header-height:50px;--thumb-height:48px;--button-height:44px;--title-size:22px;--small-size:12px}
:root[data-layout=tight]{--view-gap:5px;--header-height:42px;--thumb-height:40px;--button-height:42px;--title-size:19px;--small-size:11px}
html,body{height:100%;width:100%;overflow:hidden;overscroll-behavior:none}body{padding:0}
.app{width:100%;height:var(--app-height,100dvh);min-height:0;max-height:var(--app-height,100dvh);margin:0 auto;padding:calc(8px + max(env(safe-area-inset-top,0px),var(--app-safe-top,0px))) 16px calc(8px + max(env(safe-area-inset-bottom,0px),var(--app-safe-bottom,0px)));border-radius:0;box-shadow:none;overflow:hidden;gap:var(--view-gap)}
header{height:var(--header-height);min-height:var(--header-height);margin:0;display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center}.wordmark{justify-self:center;width:84px;height:62px;transform:none}.wordmark img{width:120px;left:-22px;top:-83px}
:root[data-layout=compact] .wordmark,:root[data-layout=tight] .wordmark{width:68px;height:50px}.wordmark img{display:block}:root[data-layout=compact] .wordmark img,:root[data-layout=tight] .wordmark img{width:97px;left:-18px;top:-67px}:root[data-layout=tight] .wordmark{transform:scale(.82)}
.screen{flex:1;min-height:0;width:100%;overflow:hidden;gap:var(--view-gap);align-items:center;animation:none}
#catalog{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto}
#upload{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
#result{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
#loading,#subscription{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
.intro,.loading .intro,.subscription .intro{width:100%;margin:0;text-align:center}.intro h1{font-size:var(--title-size);line-height:1.12;margin:0 0 5px;letter-spacing:-.7px}.intro p{font-size:var(--small-size);line-height:1.3;margin:0}
.media-stage{display:grid;place-items:center;min-width:0;min-height:0;width:100%;height:100%;overflow:hidden}
.reference-card,.result-photo,.upload-area{aspect-ratio:auto;min-height:0;max-height:none;max-width:100%;margin:0;justify-self:center;align-self:center}
.reference-card{background:transparent}.reference-card>img,.result-photo img{width:100%;height:100%;object-fit:contain;display:block}.arrow{width:40px;height:40px;font-size:22px;bottom:7px}.prev{left:7px}.next{right:7px}
.haircut-name{padding:0;text-align:center}.haircut-name h2{font-size:15px;line-height:1.2;margin:0 0 3px}.haircut-name p{font-size:12px;line-height:1.2;margin:0}
.thumbnails{width:100%;min-width:0;height:calc(var(--thumb-height) + 4px);margin:0;padding:2px;gap:6px;overflow-x:auto;overflow-y:hidden;align-self:center}.thumb{height:var(--thumb-height);flex-basis:calc(var(--thumb-height)*.82);flex-shrink:0}
.actions,.subscription .actions{width:100%;margin:0;padding:0;gap:7px;align-self:end}.primary,.secondary{min-height:var(--button-height);height:var(--button-height);padding:8px 12px;font-size:15px;border-radius:14px;flex-shrink:0}
.stepper{height:24px;padding:0;gap:11px}.stepper span{width:19px;height:19px;font-size:10px}.stepper i{width:25px}
.notice{flex-shrink:0;max-height:64px;overflow:auto;margin:0;padding:8px 10px;font-size:12px;line-height:1.3}
.selected-style{width:100%;min-width:0;margin:0;padding:6px;gap:9px;border-radius:13px}.selected-style img{width:45px;height:45px;border-radius:8px}.selected-style strong{font-size:14px}.selected-style span{font-size:11px}.selected-style button{padding:8px;font-size:12px}
.upload-placeholder{gap:10px;font-size:15px}.upload-placeholder svg{width:40px;height:40px}.upload-hint{font-size:10px;bottom:9px}.text-button{padding:4px;font-size:12px}.upload-area{border-radius:15px}
.magic-stage{width:100%;height:100%;min-height:0;max-height:none;margin:0;overflow:hidden}.orbit{width:min(50vw,180px);height:auto;aspect-ratio:1;max-height:95%}.orbit-two{width:min(37vw,130px)}.bouncing-emoji{font-size:64px}.status-container{width:100%;min-height:0}.status-container h2{font-size:19px;margin:0 auto 10px}.status-container p{font-size:12px;line-height:1.4;margin-top:10px}.handwritten{margin:0;padding:10px 0 0;font-size:14px}.handwritten svg{height:12px}
.subscription-art{display:grid;place-items:center;width:100%;height:100%;padding:0;font-size:70px}.subscription-art span{left:60%;top:28%}.subscription-note{font-size:13px;line-height:1.4;margin:0}.subscription .actions{padding:0}
:root[data-layout=tight] .haircut-name h2{font-size:13px}:root[data-layout=tight] .haircut-name p{font-size:11px}:root[data-layout=tight] .selected-style img{width:35px;height:35px}:root[data-layout=tight] .status-container h2{font-size:16px}:root[data-layout=tight] .handwritten{font-size:12px;padding:0}:root[data-layout=tight] .bouncing-emoji{font-size:46px}:root[data-layout=tight] .subscription-note{font-size:12px}