:root {
  --eazo-safe-area-top: max(56px, env(safe-area-inset-top, 0px));
  --eazo-safe-area-bottom: max(34px, env(safe-area-inset-bottom, 0px));
  --bg: #001818;
  --ink: #F5F5F5;
  --muted: rgba(245,245,245,.66);
  --line: rgba(245,245,245,.22);
  --green: #004830;
  --green2: #003018;
  --orange: #C07848;
  --brown: #483018;
  --rose: #ffb6ba;
  --cream: #fff2dd;
  --mint: #8de2be;
  --danger: #ff6b80;
  --shadow: 0 22px 70px rgba(0,0,0,.36);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); overflow-x: hidden; }
body { touch-action: manipulation; }
button { font: inherit; color: inherit; }
.app {
  min-height: 100svh;
  padding-top: var(--eazo-safe-area-top);
  padding-bottom: var(--eazo-safe-area-bottom);
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 9%, rgba(192,120,72,.28), transparent 27rem),
    radial-gradient(circle at 18% 22%, rgba(245,245,245,.18), transparent 8rem),
    radial-gradient(circle at 78% 32%, rgba(255,111,126,.22), transparent 9rem),
    radial-gradient(circle at 52% 65%, rgba(0,72,48,.9), transparent 24rem),
    linear-gradient(160deg, #001818, #000018 66%, #001510);
}
.app::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2;
  background-image:
    linear-gradient(rgba(245,245,245,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,245,.035) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .22; mask-image: radial-gradient(circle at center, #000, transparent 75%);
}
.orb { position: fixed; border-radius: 999px; filter: blur(1px); opacity: .52; pointer-events: none; z-index: -1; mix-blend-mode: screen; }
.orb.one { width: 210px; height: 210px; top: 5%; left: 50%; transform: translateX(-50%); background: radial-gradient(circle at 38% 22%, #fff6ec, #9a735e 36%, transparent 70%); opacity:.42; }
.orb.two { width: 150px; height: 150px; right: -44px; top: 24%; background: radial-gradient(circle at 45% 38%, #ff885f, #58301e 50%, transparent 75%); }
.orb.three { width: 128px; height: 128px; left: -44px; top: 45%; background: radial-gradient(circle at 36% 36%, #f4f7ff, #526d65 45%, transparent 72%); opacity:.34; }
.shell { width: min(100%, 560px); margin: 0 auto; min-height: calc(100svh - var(--eazo-safe-area-top) - var(--eazo-safe-area-bottom)); padding: 10px 16px 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.topbar { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; min-width: 0; }
.brand { min-width: 0; }
.brand h1 { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 620; letter-spacing: -.04em; text-shadow: 0 0 24px rgba(255,255,255,.18); }
.status { margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang { min-width: 88px; height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(245,245,245,.08); backdrop-filter: blur(16px); display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.lang span:first-child { color: var(--ink); }
.lang span:last-child { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.progress { height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; }
.progress::before { content:""; position:absolute; left: 18%; right:18%; top:50%; height:1px; background: rgba(245,245,245,.24); }
.mini-nail { width: 34px; height: 34px; border: 1px solid rgba(245,245,245,.25); border-radius: 999px; background: rgba(0,24,24,.58); display: grid; place-items: center; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.mini-nail i { width: 12px; height: 18px; display:block; border-radius: 8px 8px 5px 5px; background: linear-gradient(160deg, var(--cream), #f8d4c9); border: 1px solid rgba(72,48,24,.28); }
.mini-nail.done i { background: linear-gradient(140deg, var(--done-color, #ff6b9d), #fff5); box-shadow: 0 0 18px var(--done-color, #ff6b9d); }
.mini-nail.active { border-color: #fff; transform: translateY(-2px); }
.stageWrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.stage { flex: 1 1 auto; min-height: 360px; max-height: 610px; position: relative; border-radius: 38px; overflow: hidden; border: 1px solid rgba(245,245,245,.18); background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.16), transparent 13rem),
    radial-gradient(circle at 76% 71%, rgba(192,120,72,.18), transparent 8rem),
    linear-gradient(145deg, var(--towel-a, #f6aeba), var(--towel-b, #ffd6d8) 45%, #f2c6bc);
  box-shadow: var(--shadow); touch-action: none; transform: translateX(0); transition: transform .42s cubic-bezier(.2,.9,.2,1), opacity .25s; }
.stage.slide { transform: translateX(-18px); opacity: .72; }
.stage::before { content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(105deg, rgba(255,255,255,.16) 0 1px, transparent 1px 10px), repeating-linear-gradient(15deg, rgba(72,48,24,.05) 0 1px, transparent 1px 13px); opacity:.55; pointer-events:none; }
.thin-orbit { position:absolute; inset: 32px 24px auto; height: 210px; border: 1px solid rgba(245,245,245,.34); border-bottom-color: transparent; border-left-color: rgba(245,245,245,.12); border-radius: 50%; pointer-events:none; opacity:.65; }
.finger { position: absolute; left: 50%; bottom: 9%; width: min(54vw, 260px); height: min(74%, 440px); transform: translateX(-50%); border-radius: 48% 48% 42% 42% / 27% 27% 9% 9%; background: linear-gradient(90deg, rgba(103,46,32,.25), transparent 18%, rgba(255,255,255,.36) 43%, transparent 66%, rgba(78,30,20,.18)), linear-gradient(180deg, var(--skin-hi, #ffd7bd), var(--skin, #df946e) 74%, var(--skin-lo, #ba664b)); box-shadow: inset 16px 0 30px rgba(255,255,255,.16), inset -18px 0 34px rgba(80,24,18,.2), 0 24px 48px rgba(72,48,24,.28); transform-origin: 50% 82%; transition: transform .18s; }
.finger.flinch { animation: flinch .46s cubic-bezier(.2,1.4,.35,1); }
@keyframes flinch { 0%,100%{ transform: translateX(-50%) rotate(0) translateY(0);} 28%{ transform: translateX(-50%) rotate(-5deg) translateY(10px);} 58%{ transform: translateX(-50%) rotate(4deg) translateY(-4px);} }
.knuckle { position:absolute; left:18%; right:18%; bottom: 34%; height: 26px; border-top: 1px solid rgba(99,46,34,.22); border-radius: 50%; opacity:.65; }
.finger-mark { position:absolute; left:50%; top: 9%; width: 54px; height: 22px; transform: translateX(-50%); border-radius: 50%; background: rgba(255,76,107,.35); filter: blur(.5px); opacity:0; transition: opacity .25s; }
.finger-mark.show { opacity:1; }
.nailZone { position: absolute; top: 5.5%; left: 50%; width: 54%; height: 25%; transform: translateX(-50%); border-radius: 48% 48% 42% 42% / 54% 54% 36% 36%; }
.nail { position:absolute; inset:0; border-radius: inherit; background: linear-gradient(160deg, #fff7eb, #f7cfc5 66%, #d79989); border: 1px solid rgba(72,48,24,.35); box-shadow: inset 0 7px 16px rgba(255,255,255,.55), inset 0 -8px 18px rgba(116,47,34,.16), 0 6px 14px rgba(72,48,24,.18); overflow:hidden; clip-path: polygon(var(--jag, 0 0,100% 0,100% 88%,85% 82%,69% 93%,52% 85%,35% 94%,18% 83%,0 90%)); transition: clip-path .35s ease, transform .22s; }
.nail::before { content:""; position:absolute; left:18%; top:12%; width: 42%; height: 72%; border-radius: 50%; background: linear-gradient(90deg, rgba(255,255,255,.66), transparent); transform: rotate(14deg); pointer-events:none; z-index: 3; }
.nail.spark::after { content:""; position:absolute; width:18px; height:18px; right:22%; top:22%; background: radial-gradient(circle, #fff 0 22%, transparent 24%); filter: drop-shadow(0 0 9px #fff); animation: sparkle 1.8s infinite ease-in-out; z-index: 4; pointer-events:none; }
@keyframes sparkle { 0%,100%{ transform: scale(.6) rotate(0); opacity:.2;} 45%{ transform: scale(1.3) rotate(30deg); opacity:.85;} }
.paintCanvas { position:absolute; inset:0; width:100%; height:100%; border-radius: inherit; clip-path: ellipse(48% 48% at 50% 50%); z-index: 2; touch-action:none; }
.cutLine { position:absolute; left: 9%; right: 9%; top: 72%; border-top: 2px dotted rgba(0,24,24,.72); z-index:5; filter: drop-shadow(0 1px rgba(255,255,255,.35)); pointer-events:none; }
.hit { position:absolute; left:-18%; right:-18%; top:50%; bottom:-18%; border-radius: 34px; z-index: 8; background: transparent; }
.clipper { position:absolute; left:50%; top:7%; width: 180px; height: 92px; transform: translateX(-50%); pointer-events:none; opacity:0; z-index: 20; }
.clipper.show { opacity:1; animation: clipSnap .46s cubic-bezier(.1,1.15,.22,1); }
.jaw { position:absolute; top: 34px; width: 92px; height: 14px; border-radius: 12px; background: linear-gradient(180deg, #f8fbff, #7f918d); box-shadow: inset 0 1px 0 #fff, 0 7px 14px rgba(0,0,0,.18); }
.jaw.l { left:0; transform-origin: right center; transform: rotate(9deg); }
.jaw.r { right:0; transform-origin: left center; transform: rotate(-9deg); }
.clipper.show .jaw.l { animation: jawL .46s; } .clipper.show .jaw.r { animation: jawR .46s; }
@keyframes jawL { 0%{transform: rotate(9deg) translateX(-18px)} 55%{transform: rotate(0) translateX(8px)} 100%{transform: rotate(9deg) translateX(-18px)} }
@keyframes jawR { 0%{transform: rotate(-9deg) translateX(18px)} 55%{transform: rotate(0) translateX(-8px)} 100%{transform: rotate(-9deg) translateX(18px)} }
@keyframes clipSnap { 0%{ transform: translateX(-50%) translateY(-10px); opacity:0;} 25%,70%{opacity:1;} 100%{ transform: translateX(-50%) translateY(-2px); opacity:0;} }
.bubble { position:absolute; left: 52%; top: 7%; transform: translateX(34px); min-width: 70px; padding: 8px 12px; border-radius: 18px 18px 18px 5px; background: rgba(0,24,24,.82); border: 1px solid rgba(245,245,245,.3); color: #fff; font-size: 13px; letter-spacing:.02em; opacity:0; z-index: 30; pointer-events:none; }
.bubble.show { animation: pop .95s ease; }
@keyframes pop { 0%{opacity:0; transform: translateX(34px) translateY(6px) scale(.8)} 20%,75%{opacity:1; transform: translateX(34px) translateY(0) scale(1)} 100%{opacity:0; transform: translateX(34px) translateY(-10px) scale(.94)} }
.dish { position:absolute; width: 76px; height: 52px; right: 24px; bottom: 28px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,24,24,.16), rgba(245,245,245,.22) 58%, rgba(255,255,255,.38) 60%, rgba(255,255,255,.12)); border:1px solid rgba(255,255,255,.3); box-shadow: inset 0 5px 20px rgba(255,255,255,.2); }
.polishBottle { position:absolute; left: 22px; bottom: 32px; width: 42px; height: 72px; border-radius: 15px 15px 18px 18px; background: linear-gradient(160deg, rgba(255,255,255,.65), transparent 28%), var(--polish, #ff6b9d); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 14px 28px rgba(0,0,0,.2); opacity:.92; }
.polishBottle::before { content:""; position:absolute; top:-18px; left:10px; width:22px; height:24px; border-radius: 7px 7px 4px 4px; background: linear-gradient(180deg, #213330, #071514); }
.clipping { position:absolute; width: 24px; height: 12px; border-radius: 50% 50% 45% 45%; background: linear-gradient(160deg, #fff4e3, #e6b5a4); border:1px solid rgba(72,48,24,.2); z-index:12; animation: fly 850ms cubic-bezier(.13,.78,.2,1) both; }
@keyframes fly { 0%{ left:50%; top:23%; transform: translate(-50%,0) rotate(0deg) scale(1); opacity:1;} 72%{ transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.96); opacity:1;} 100%{ transform: translate(var(--dx), var(--land)) rotate(var(--rot)) scale(.9); opacity:.92;} }
.dust { position:absolute; width: 10px; height: 10px; border-radius:50%; background: rgba(255,255,255,.72); filter: blur(1px); pointer-events:none; animation: dust 750ms ease-out forwards; z-index:18; }
@keyframes dust { to { transform: translate(var(--dx), -28px) scale(2.5); opacity:0; } }
.smear { position:absolute; width: 22px; height: 11px; border-radius: 50%; background: var(--polish, #ff6b9d); opacity:.55; filter: blur(.4px); z-index: 10; pointer-events:none; transform: rotate(var(--r)); }
.edgeMeter { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 0 6px; font-size: 13px; color: var(--muted); }
.bar { height: 8px; border-radius: 999px; background: rgba(245,245,245,.13); overflow:hidden; border:1px solid rgba(245,245,245,.11); }
.bar span { display:block; height:100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--mint), #fff2dd); border-radius: inherit; transition: width .22s, background .22s; }
.bar.red span { background: linear-gradient(90deg, var(--danger), #ffd0d8); }
.instruction { margin: 0; padding: 0 4px; color: rgba(245,245,245,.82); font-size: 13px; line-height: 1.35; text-align:center; letter-spacing: .01em; }
.tools { display:flex; gap: 8px; justify-content:center; align-items:center; min-width:0; }
.pill { min-height: 46px; min-width: 82px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(245,245,245,.2); background: rgba(245,245,245,.08); color: var(--ink); cursor:pointer; text-transform: uppercase; letter-spacing:.08em; font-size: 12px; font-weight: 720; backdrop-filter: blur(18px); }
.pill.active { background: linear-gradient(135deg, rgba(192,120,72,.92), rgba(0,72,48,.92)); border-color: rgba(255,255,255,.48); box-shadow: 0 0 28px rgba(192,120,72,.26); }
.pill:disabled { opacity:.46; cursor:not-allowed; }
.colors { display:none; gap: 8px; overflow-x:auto; padding: 2px 1px 4px; scrollbar-width: none; }
.colors.show { display:flex; }
.swatch { flex:0 0 auto; width:44px; height:44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: var(--c); cursor:pointer; box-shadow: inset 0 10px 12px rgba(255,255,255,.28), 0 8px 20px rgba(0,0,0,.14); }
.swatch.active { outline: 3px solid #fff; outline-offset: 2px; }
.actions { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 2px; }
.action { min-height:46px; border-radius: 18px; border:1px solid rgba(245,245,245,.16); background: rgba(0,24,24,.46); cursor:pointer; backdrop-filter: blur(16px); }
.action:disabled { opacity:.46; cursor:not-allowed; }
.action.primary { grid-column: 1 / -1; background: linear-gradient(135deg, #f6c3b8, #C07848); color:#001818; font-weight:800; }
.action.hidden { display:none; }
.result { display:none; min-height: calc(100svh - var(--eazo-safe-area-top) - var(--eazo-safe-area-bottom)); padding: 10px 16px 0; width:min(100%, 560px); margin:0 auto; }
.result.show { display:flex; flex-direction:column; gap: 12px; }
.card { border:1px solid rgba(245,245,245,.22); border-radius: 34px; background: rgba(245,245,245,.08); box-shadow: var(--shadow); backdrop-filter: blur(18px); overflow:hidden; }
.scoreHero { padding: 18px 18px 12px; text-align:center; }
.scoreHero h2 { margin:0; font-size: 22px; line-height:1.2; letter-spacing:-.03em; }
.score { font-size:64px; line-height:1.05; font-weight:700; letter-spacing:-.07em; margin: 2px 0; }
.hand { height: 244px; margin: 0 14px 14px; border-radius: 28px; position:relative; background: linear-gradient(145deg, var(--towel-a, #f6aeba), var(--towel-b, #ffd6d8)); overflow:hidden; }
.handFinger { position:absolute; bottom: 23px; width: 42px; height: 150px; border-radius: 24px 24px 18px 18px; background: linear-gradient(90deg, rgba(255,255,255,.26), var(--skin, #df946e), rgba(80,24,18,.16)); transform-origin: bottom center; }
.handFinger i { position:absolute; left:50%; top:7px; width:26px; height:36px; transform:translateX(-50%); border-radius: 14px 14px 10px 10px; background: var(--pc, #ff6b9d); box-shadow: inset 0 7px 9px rgba(255,255,255,.45), 0 0 18px var(--pc, #ff6b9d); }
.fingerScores { display:flex; gap:8px; justify-content:center; padding: 0 14px 16px; flex-wrap:wrap; }
.fingerScore { min-width:48px; padding:8px 9px; border-radius: 16px; background: rgba(0,24,24,.4); border:1px solid rgba(255,255,255,.13); text-align:center; font-size:13px; }
.resultActions { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--eazo-safe-area-bottom) + 12px); transform: translateX(-50%) translateY(14px); opacity:0; padding: 10px 14px; border-radius: 999px; background: rgba(0,24,24,.88); border:1px solid rgba(255,255,255,.2); color:#fff; font-size: 13px; z-index: 60; pointer-events:none; transition: .22s; }
.toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
@media (min-width: 720px) { .shell, .result { max-width: 620px; } .stage { min-height: 500px; } .finger { width: 230px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }