:root{
  --ink:#121118;--ink2:#1b1a23;--text:#f3f2f7;--sub:#aaa7b9;--faint:#6f6c80;
  --glass:rgba(255,255,255,.065);--glass2:rgba(255,255,255,.11);--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.2);
  --peach:#ffb892;--pink:#f4a7cb;--lilac:#b9a9ff;--aqua:#93d5e6;
  --iris:linear-gradient(135deg,var(--peach),var(--pink) 35%,var(--lilac) 70%,var(--aqua));
  --r:18px;
  --safe-b:env(safe-area-inset-bottom,0px);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:var(--ink);color:var(--text);height:100%}
body{margin:0;min-height:100%;background:transparent;font-size:14px;line-height:1.5;letter-spacing:-.01em;overflow:hidden;height:100dvh}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,label:focus-visible,a:focus-visible{outline:2px solid var(--lilac);outline-offset:2px}

.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42}
.bg i:nth-child(1){width:60vmax;height:60vmax;left:-22vmax;top:-26vmax;background:#5b3f4d}
.bg i:nth-child(2){width:52vmax;height:52vmax;right:-24vmax;top:18vh;background:#3c3a66}
.bg i:nth-child(3){width:46vmax;height:46vmax;left:10vw;bottom:-30vmax;background:#2c4a55;opacity:.32}
.bg::after{content:"";position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.screen{position:fixed;inset:0;display:flex;flex-direction:column}

/* pills & buttons */
.pill{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:999px;background:#f6f5fa;color:#16151c;font-weight:650;font-size:14px;letter-spacing:-.02em;cursor:pointer;user-select:none;transition:transform .15s,opacity .15s}
.pill:active{transform:scale(.97)}
.pill.big{height:50px;padding:0 30px;font-size:16px}
.pill.soft{background:var(--glass2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.pill[disabled]{opacity:.45;pointer-events:none}
.ghost{height:36px;padding:0 13px;border-radius:999px;color:var(--sub);font-size:13.5px;font-weight:550;transition:color .15s,background .15s}
.ghost:hover{color:var(--text)}
.ghost.on,.ghost:active{background:var(--glass2);color:var(--text)}
.icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--sub)}
.icon:hover{color:var(--text);background:var(--glass)}

/* home */
.home{align-items:center;justify-content:center;text-align:center;padding:24px 20px calc(56px + var(--safe-b))}
.hero{width:min(300px,78vw);margin-bottom:26px}
.demo{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7),inset 0 0 0 1px var(--line)}
.d-photo{fill:url(#dPhoto);fill:#2a2834}
.d-head{fill:#e9d6c8}.h2{fill:#d8b39b}.h3{fill:#f0ddd2}
.d-body{fill:#4b4a63}.b2{fill:#6a5466}.b3{fill:#3f5866}
.d-eyes ellipse{fill:#2a2433}
.d-eyes.shut path{fill:none;stroke:#2a2433;stroke-width:2.2;stroke-linecap:round}
.d-mouth{fill:none;stroke:#2a2433;stroke-width:2;stroke-linecap:round;opacity:.75}
.d-ring{fill:none;stroke:url(#dIris);stroke-width:2.4;opacity:0;stroke-dasharray:260;stroke-dashoffset:260}
.p2 .d-eyes.shut{animation:dShut 4.2s infinite}
.p2 .d-eyes.late{opacity:0;animation:dOpen 4.2s infinite;transform-box:fill-box;transform-origin:center}
.p2 .d-ring{animation:dRing 4.2s infinite}
.p1 .d-eyes,.p3 .d-eyes{transform-box:fill-box;transform-origin:center;animation:dBlink 4.2s infinite}
.p3 .d-eyes{animation-delay:-1.6s}
@keyframes dShut{0%,46%{opacity:1}52%,100%{opacity:0}}
@keyframes dOpen{0%,48%{opacity:0;transform:scaleY(.1)}56%,100%{opacity:1;transform:scaleY(1)}}
@keyframes dRing{0%,18%{opacity:0;stroke-dashoffset:260}24%{opacity:1}46%{stroke-dashoffset:0;opacity:1}70%{opacity:1;stroke-dashoffset:0}86%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes dBlink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.1)}}

.word{margin:0;font-size:30px;font-weight:800;letter-spacing:-.05em;line-height:1}
.word .i{position:relative;display:inline-block}
.word .i b{position:absolute;left:50%;top:-.05em;width:.2em;height:.2em;margin-left:-.1em;border-radius:50%;background:var(--iris);animation:tittle 4.2s infinite}
@keyframes tittle{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.15)}}
.lede{margin:10px 0 26px;color:var(--sub);font-size:15px}
.hint{margin:12px 0 0;color:var(--faint);font-size:12.5px}
.hint.lock{margin-top:6px;display:inline-flex;align-items:center;gap:5px}
.hint+.hint{margin-top:4px}

/* processing */
.work{align-items:center;justify-content:center;gap:0;padding:24px}
.fan{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:330px;margin-bottom:28px}
.fan .card{position:relative;width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);opacity:.5;transition:opacity .3s,transform .3s}
.fan .card img{width:100%;height:100%;object-fit:cover;display:block}
.fan .card.scan{opacity:1;transform:scale(1.06);box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.fan .card.done{opacity:1}
.fan .card.scan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);background-size:100% 260%;animation:scan 1.1s linear infinite}
.fan .card.done::before{content:"";position:absolute;right:6px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--iris);box-shadow:0 0 0 2px rgba(0,0,0,.35);z-index:1}
.fan .card.solo{width:150px;height:150px;opacity:1}
@keyframes scan{from{background-position:0 130%}to{background-position:0 -130%}}
.status{margin:0 0 12px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.bar{width:180px;height:3px;border-radius:3px;background:var(--glass2);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--iris);transition:width .3s}

/* editor */
.edit{padding-bottom:var(--safe-b)}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 6px;flex:none}
.top .mid{flex:1;text-align:center;font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
#stage{flex:1;min-height:0;position:relative}
.stage{overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.stage .wrap{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.stage canvas{display:block;width:100%;height:100%;border-radius:6px}
.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity .2s}
.ring{fill:none;stroke:rgba(255,255,255,.55);stroke-width:calc(1.4px / var(--k,1));vector-effect:none;transition:stroke .2s,opacity .2s}
.rings .ring{stroke-width:1.3;vector-effect:non-scaling-stroke}
.rings.picking .ring{opacity:.35}
.rings .ring.on{stroke:url(#iris);stroke-width:2.6;opacity:1}
.rings .ring.solo{opacity:.0}
.rings .ring.pulse{animation:pulse .9s ease-out}
@keyframes pulse{0%{stroke:url(#iris);stroke-width:5}100%{stroke-width:1.3}}
.rings .dot{r:0;fill:url(#iris)}
.rings .dot.chg{r:calc(5px / var(--k,1))}
.rings .dot.done{r:calc(5px / var(--k,1));fill:#9fe3b8}

.panel{flex:none;margin:6px 10px 10px;padding:12px 0 10px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px var(--line);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
.note{margin:0 16px 10px;font-size:13px;color:var(--sub);min-height:1em}
.note:empty{display:none}
.row{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 4px;scrollbar-width:none;scroll-snap-type:x proximity}
.row::-webkit-scrollbar{display:none}
.face{position:relative;flex:none;width:52px;height:52px;border-radius:50%;padding:0;scroll-snap-align:center;transition:transform .18s}
.face img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:var(--ink2)}
.face::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);transition:box-shadow .2s}
.face:active{transform:scale(.95)}
.face.chg::before{content:"";position:absolute;right:-1px;top:-1px;width:12px;height:12px;border-radius:50%;background:var(--iris);box-shadow:0 0 0 2px var(--ink);z-index:1}
.face.done::before{content:"";position:absolute;right:-1px;top:-1px;width:12px;height:12px;border-radius:50%;background:#9fe3b8;box-shadow:0 0 0 2px var(--ink);z-index:1}
.cands{gap:10px;align-items:center}
.back{flex:none;height:64px;width:40px;display:grid;place-items:center;color:var(--sub);border-radius:14px}
.back:hover{color:var(--text)}
.cand{position:relative;flex:none;width:64px;height:64px;border-radius:16px;scroll-snap-align:center;transition:transform .18s}
.cand img{width:100%;height:100%;border-radius:16px;object-fit:cover;display:block;background:var(--ink2)}
.cand::after{content:"";position:absolute;inset:-3px;border-radius:19px;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s}
.cand.on::after{box-shadow:inset 0 0 0 2.5px #fff}
.cand.on{transform:translateY(-2px)}
.cand .tag{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);font-size:10.5px;color:var(--faint);white-space:nowrap}
.cand.rec .tag{color:var(--sub)}
.cands{padding-bottom:16px}
.acts{display:flex;align-items:center;gap:4px;padding:10px 12px 0;margin-top:6px;border-top:1px solid rgba(255,255,255,.07)}
.acts .pill{margin-left:auto}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(8,7,12,.55);z-index:20;animation:fade .2s}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(520px,100%);max-height:88dvh;overflow:auto;z-index:21;padding:8px 20px calc(22px + var(--safe-b));border-radius:26px 26px 0 0;background:rgba(30,29,38,.92);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 -20px 60px rgba(0,0,0,.5);animation:up .32s cubic-bezier(.2,.8,.2,1)}
.grab{width:36px;height:4px;border-radius:4px;background:var(--line2);margin:2px auto 14px}
.sheet h2{margin:0 0 6px;font-size:17px;font-weight:700;letter-spacing:-.03em}
.sheet p{margin:0 0 14px;color:var(--sub);font-size:13.5px}
.sheet .btns{display:flex;gap:8px;margin-top:16px}
.sheet .btns .pill{flex:1;height:46px;font-size:15px}
.sheet .result{display:block;width:100%;border-radius:14px;margin:4px 0 6px;box-shadow:inset 0 0 0 1px var(--line)}
.sheet .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sheet .grid button{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--ink2)}
.sheet .grid img{width:100%;height:100%;object-fit:cover;display:block}
.sheet .grid button.on::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 2.5px #fff}
.sheet .grid .n{position:absolute;left:6px;bottom:5px;font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.link{display:flex;align-items:center;gap:8px;height:46px;padding:0 6px 0 14px;border-radius:14px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);font-size:14px}
.link span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.link .pill{height:34px}
.small{font-size:12px;color:var(--faint);margin-top:10px!important}

.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translate(-50%,-20px);opacity:0;z-index:30;padding:9px 15px;border-radius:999px;background:rgba(40,39,50,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:550;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}

.by{position:fixed;left:0;right:0;bottom:calc(10px + var(--safe-b));text-align:center;font-size:11px;color:var(--faint);text-decoration:none;z-index:1;width:max-content;margin:auto}
body.editing .by{display:none}

@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translate(-50%,40px);opacity:0}}

@media (min-width:900px){
  .edit{display:grid;grid-template-columns:1fr 360px;grid-template-rows:auto 1fr;padding:0 16px 16px}
  .top{grid-column:1/3}
  #stage{grid-row:2;grid-column:1}
  .panel{grid-row:2;grid-column:2;align-self:end;margin:0 0 0 14px}
  .row{flex-wrap:wrap;overflow:visible}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}
@media (hover:none) and (pointer:coarse){
  body{touch-action:manipulation}
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]),select,textarea{font-size:max(16px,1em)}
}