: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));
  --ink:#f6f4f1;
  --muted:#a9a6ad;
  --black:#050506;
  --line:rgba(246,244,241,.28);
  --accent:#ff2bc2;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--black);color:var(--ink);
  font-family:Arial,Helvetica,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}

.app-container{
  min-height:100svh;
  display:flex;flex-direction:column;
  padding-top:var(--eazo-safe-area-top);
  padding-bottom:var(--eazo-safe-area-bottom);
  position:relative;background:var(--black)
}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* drifting grain */
.grain{pointer-events:none;position:fixed;inset:0;opacity:.1;z-index:10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode:screen;animation:drift .32s steps(2) infinite}
@keyframes drift{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-2%,-3%)}100%{transform:translate(2%,2%)}}

.shell{width:min(100%,760px);margin:0 auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative}

/* topbar */
.topbar{flex:0 0 auto;min-height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;position:relative;z-index:5}
.wordmark{font:700 12px/1 monospace;letter-spacing:.14em;text-transform:uppercase}
.lang{min-height:44px;padding:10px 0 10px 12px;font:700 11px monospace;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.lang b{color:var(--ink)}

#stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative}

/* ---------- questions ---------- */
.question-view{flex:1 1 auto;min-height:0;padding:6vh 22px 24px;display:flex;flex-direction:column;justify-content:flex-start;overflow:auto}
.q-rail{display:flex;gap:5px;margin-bottom:24px}
.q-rail i{height:4px;flex:1;min-width:0;background:rgba(255,255,255,.22);transition:.3s}
.q-rail i.on{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.meta{font:700 11px monospace;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-bottom:22px}
.q-title{font-size:clamp(38px,11vw,72px);line-height:.92;letter-spacing:-.055em;max-width:650px;margin:0 0 16px;font-weight:900;text-wrap:balance}
.instruction{font-size:15px;line-height:1.45;color:#c6c2c8;max-width:440px;margin:0 0 30px}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:600px;margin-bottom:20px}
.chip{min-height:58px;padding:14px 15px;text-align:left;border:1px solid var(--line);background:#0d0d0f;
  font-weight:700;font-size:15px;line-height:1.2;transition:.2s ease;position:relative;overflow:hidden;color:var(--ink)}
.chip:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transition:.2s;transform-origin:top}
.chip:hover,.chip:active{border-color:var(--accent);box-shadow:0 0 25px color-mix(in srgb,var(--accent),transparent 82%)}
.chip:hover:before,.chip:active:before{transform:scaleY(1)}
.skip{align-self:flex-start;min-height:44px;padding:12px 4px;color:var(--muted);font:700 12px monospace;letter-spacing:.06em;text-decoration:underline;text-underline-offset:4px}
.skip:hover{color:var(--ink)}

/* ---------- build ---------- */
.build{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:28px;flex-direction:column;text-align:center;gap:22px}
.build-mark{font-size:clamp(64px,18vw,120px);font-weight:900;letter-spacing:-.1em;color:var(--accent);
  text-shadow:0 0 28px var(--accent);animation:pulse 1s ease-in-out infinite alternate;line-height:1}
.build p{font:700 12px monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0}
@keyframes pulse{to{transform:scale(1.06);filter:brightness(1.3)}}

/* ---------- report ---------- */
.report{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;touch-action:pan-y}
.report-rail{position:absolute;z-index:6;top:12px;left:18px;right:18px;display:flex;gap:4px}
.rail-dot{height:4px;flex:1;min-width:0;background:rgba(255,255,255,.25);padding:0;min-height:auto;position:relative}
.rail-dot:before{content:"";position:absolute;inset:-11px 0;}
.rail-dot.active{background:var(--accent);box-shadow:0 0 10px var(--accent)}

.cards-wrap{position:absolute;inset:0}
.cards{height:100%;display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.22,.75,.2,1)}
.report-card{height:100%;flex:0 0 100%;padding:clamp(52px,9vh,90px) 24px 26px;display:flex;flex-direction:column;
  justify-content:space-between;position:relative;overflow:hidden;
  background:radial-gradient(circle at 85% 8%,color-mix(in srgb,var(--card),transparent 84%),transparent 32%),#08080a}
.report-card:after{content:"";position:absolute;width:46vw;height:46vw;max-width:340px;max-height:340px;
  border:1px solid color-mix(in srgb,var(--card),transparent 50%);border-radius:50%;right:-18vw;top:22%;
  box-shadow:0 0 34px color-mix(in srgb,var(--card),transparent 70%);pointer-events:none}
.card-kicker{font:700 11px monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--card);
  text-shadow:0 0 16px color-mix(in srgb,var(--card),transparent 45%);position:relative;z-index:2}
.card-body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-height:0;gap:6px}
.stat-number{font-size:clamp(96px,34vw,220px);font-weight:900;line-height:.82;letter-spacing:-.06em;color:var(--card);
  text-shadow:0 0 40px color-mix(in srgb,var(--card),transparent 55%)}
.stat-unit{font-size:clamp(26px,7vw,48px);font-weight:900;color:var(--card);letter-spacing:-.03em;margin-top:2px}
.stat-label{font-size:clamp(17px,4.6vw,26px);font-weight:700;line-height:1.15;max-width:15ch;margin-top:14px;color:var(--ink)}
.words-stat{font-size:clamp(34px,9.5vw,68px);font-weight:900;line-height:.98;letter-spacing:-.04em;color:var(--card);
  text-shadow:0 0 30px color-mix(in srgb,var(--card),transparent 55%);text-wrap:balance}
.excuses{display:flex;flex-direction:column;gap:8px;margin:0}
.excuse{display:flex;align-items:baseline;gap:12px;font-size:clamp(20px,5.4vw,32px);font-weight:800;line-height:1.05}
.excuse small{font:700 12px monospace;color:var(--card);letter-spacing:.05em;flex:0 0 auto}
.verdict-stat{font-size:clamp(40px,11vw,80px);font-weight:900;line-height:.95;letter-spacing:-.05em;
  color:var(--card);text-shadow:0 0 34px color-mix(in srgb,var(--card),transparent 50%);text-wrap:balance}

/* summary card */
.summary-card .sum-grid{display:flex;flex-direction:column;gap:16px}
.sum-heading{font:700 11px monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sum-row{border-top:1px solid var(--line);padding-top:12px}
.sum-row .k{font:700 11px monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.sum-row .v{font-size:clamp(28px,8vw,52px);font-weight:900;line-height:.95;letter-spacing:-.04em;color:var(--card)}
.sum-row .v.small{font-size:clamp(22px,6vw,38px)}
.actions{display:flex;flex-direction:column;gap:10px;max-width:100%;position:relative;z-index:3;margin-top:16px}
.action{min-height:52px;padding:15px 18px;font-weight:900;font-size:16px;letter-spacing:.02em;
  border:1px solid var(--card);color:#08080a;background:var(--card);
  box-shadow:0 0 28px color-mix(in srgb,var(--card),transparent 62%);transition:.18s}
.action.secondary{background:none;color:var(--ink);box-shadow:none;border-color:var(--line)}
.action:hover{filter:brightness(1.08)}
.action.secondary:hover{border-color:var(--card)}

.tap-hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;font:700 10px monospace;
  letter-spacing:.14em;color:var(--muted);z-index:5;pointer-events:none;opacity:.7}

/* detail overlay */
.detail{position:absolute;inset:0;z-index:7;background:#050506;
  padding:clamp(52px,9vh,90px) 24px calc(24px + var(--eazo-safe-area-bottom));overflow:auto;
  transform:translateY(100%);transition:transform .4s cubic-bezier(.22,.75,.2,1);display:flex;flex-direction:column;gap:2px}
.detail.open{transform:translateY(0)}
.detail h2{font-size:clamp(30px,9vw,54px);font-weight:900;letter-spacing:-.05em;margin:0 0 18px;line-height:.95}
.detail-item{border-top:1px solid var(--line);padding:16px 0;font-size:clamp(20px,5.4vw,30px);font-weight:800;
  display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.detail-item .di-val{color:var(--card,#ff2bc2);font-weight:900;text-align:right;flex:0 0 auto;max-width:55%}
.detail-close{margin-top:20px;min-height:52px;padding:15px 18px;font-weight:900;border:1px solid var(--line);color:var(--ink)}

/* ---------- empty ---------- */
.empty{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:6vh 24px 24px;gap:18px}
.empty .em-mark{font-size:clamp(80px,24vw,160px);font-weight:900;line-height:.8;color:var(--accent);
  text-shadow:0 0 34px var(--accent)}
.empty p{font-size:clamp(24px,6.4vw,40px);font-weight:900;line-height:1.05;letter-spacing:-.03em;max-width:16ch;margin:0}
.empty .action{margin-top:14px;align-self:flex-start;--card:var(--accent);border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 28px color-mix(in srgb,var(--accent),transparent 62%);min-width:160px;text-align:center}

/* wide */
@media (min-width:620px){
  .question-view,.empty{padding-left:clamp(38px,8vw,100px);padding-right:clamp(38px,8vw,100px)}
  .topbar{padding-left:clamp(38px,8vw,100px);padding-right:clamp(38px,8vw,100px)}
  .report-rail{left:clamp(38px,8vw,100px);right:clamp(38px,8vw,100px)}
  .report-card{padding-left:clamp(38px,8vw,100px);padding-right:clamp(38px,8vw,100px)}
  .detail{padding-left:clamp(38px,8vw,100px);padding-right:clamp(38px,8vw,100px)}
  .actions{max-width:340px}
  .chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chip{min-height:70px}
}

@media (prefers-reduced-motion:reduce){
  .grain,.build-mark{animation:none}
  .cards,.detail{transition:none}
  .chip,.action{transition:none}
}