:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: rgba(16, 28, 48, .88);
  --panel-2: rgba(27, 43, 70, .86);
  --line: rgba(255,255,255,.10);
  --text: #f8fafc;
  --muted: #9fb0c5;
  --accent: #6ee7b7;
  --accent-2: #38bdf8;
  --warn: #fbbf24;
  --danger: #fb7185;
  --good: #86efac;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: ui-rounded, "Hiragino Sans", "Yu Gothic", system-ui, -apple-system, sans-serif; }
body { min-height: 100dvh; overflow-x: hidden; }
button, textarea { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100dvh; max-width: 560px; margin: 0 auto; position: relative; background:
  radial-gradient(120% 65% at 50% -10%, rgba(56,189,248,.20), transparent 58%),
  radial-gradient(95% 70% at 100% 100%, rgba(110,231,183,.12), transparent 60%),
  linear-gradient(180deg, #0a1727 0%, #07111f 100%); }
.screen { min-height: 100dvh; padding: max(18px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); display:flex; flex-direction:column; }

.brand { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo { font-size:18px; letter-spacing:.08em; font-weight:900; }
.logo span { color:var(--accent); }
.icon-btn { width:42px; height:42px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.05); display:grid; place-items:center; cursor:pointer; }

.hero { padding: 54px 4px 24px; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hero h1 { margin:12px 0 14px; font-size:clamp(38px, 10vw, 58px); line-height:.98; letter-spacing:-.05em; }
.hero p { margin:0; max-width:430px; color:#c5d3e3; font-size:16px; line-height:1.7; }
.hero-visual { margin:28px 0 24px; height:190px; position:relative; border-radius:28px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg, rgba(56,189,248,.12), rgba(110,231,183,.08)); box-shadow:var(--shadow); }
.orb { position:absolute; border-radius:999px; filter:blur(.2px); }
.orb.a { width:140px; height:140px; left:-24px; top:66px; background:rgba(56,189,248,.16); }
.orb.b { width:120px; height:120px; right:-18px; top:20px; background:rgba(110,231,183,.14); }
.avatar-big { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:132px; height:132px; }
.avatar-head { position:absolute; width:70px; height:70px; border-radius:50%; left:31px; top:5px; background:#f5c9aa; box-shadow: inset 0 -8px 0 rgba(0,0,0,.06); }
.avatar-hair { position:absolute; width:76px; height:42px; border-radius:42px 42px 22px 18px; left:28px; top:0; background:#263245; transform:rotate(-4deg); }
.avatar-body { position:absolute; width:118px; height:80px; border-radius:52px 52px 18px 18px; left:7px; top:64px; background:linear-gradient(180deg,#35b7f4,#247dba); }
.shield { position:absolute; right:52px; bottom:33px; width:50px; height:58px; border:3px solid var(--accent); border-radius:25px 25px 28px 28px; background:rgba(110,231,183,.12); transform:rotate(8deg); }
.shield::after { content:"NO"; position:absolute; inset:0; display:grid; place-items:center; font-weight:900; font-size:13px; color:var(--accent); }

.primary-btn, .secondary-btn { width:100%; border:none; border-radius:18px; padding:16px 18px; font-weight:900; cursor:pointer; transition:.15s transform,.15s opacity,.15s background; }
.primary-btn { background:linear-gradient(135deg,#6ee7b7,#38bdf8); color:#062034; box-shadow:0 14px 34px rgba(56,189,248,.18); }
.secondary-btn { margin-top:10px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:#dce7f3; }
.primary-btn:active, .secondary-btn:active, .choice:active { transform:scale(.985); }
.micro { margin-top:12px; text-align:center; color:#7f93a9; font-size:12px; }

.topbar { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; }
.progress-wrap { min-width:0; }
.stage-line { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); }
.progress { height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:8px; }
.progress > div { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .35s ease; }

.stat-row { display:flex; gap:8px; margin-top:12px; }
.stat { flex:1; padding:9px 10px; border-radius:14px; background:rgba(255,255,255,.045); border:1px solid var(--line); }
.stat-label { display:flex; justify-content:space-between; gap:6px; color:var(--muted); font-size:12px; margin-bottom:6px; }
.meter { height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.meter > div { height:100%; border-radius:999px; transition:width .35s ease; }
.meter.boundary > div { background:var(--accent); }
.meter.relation > div { background:var(--accent-2); }

.scene { flex:1; display:flex; flex-direction:column; min-height:0; }
.context-row { display:flex; align-items:center; gap:8px; margin-top:18px; flex-wrap:wrap; }
.tag { font-size:12px; color:#c9d7e6; border:1px solid var(--line); border-radius:999px; padding:6px 9px; background:rgba(255,255,255,.04); }
.tag.danger { color:#ffd3da; border-color:rgba(251,113,133,.3); background:rgba(251,113,133,.08); }

.person-stage { display:grid; grid-template-columns:86px 1fr; gap:12px; align-items:end; margin-top:18px; }
.person-card { width:86px; height:102px; border-radius:24px 24px 18px 18px; background:linear-gradient(180deg, rgba(56,189,248,.12), rgba(255,255,255,.03)); border:1px solid var(--line); position:relative; overflow:hidden; }
.face { position:absolute; width:52px; height:52px; border-radius:50%; left:17px; top:12px; background:var(--skin,#efc1a1); }
.face::before { content:""; position:absolute; width:56px; height:26px; border-radius:30px 30px 12px 12px; left:-2px; top:-5px; background:var(--hair,#2b3447); }
.face::after { content:"••"; position:absolute; letter-spacing:13px; left:11px; top:24px; font-size:12px; color:#27364b; }
.torso { position:absolute; width:76px; height:54px; border-radius:34px 34px 10px 10px; left:5px; bottom:-5px; background:var(--shirt,#4ea9dd); }
.person-name { position:absolute; left:0; right:0; bottom:5px; text-align:center; font-size:12px; font-weight:900; text-shadow:0 1px 4px rgba(0,0,0,.8); }
.bubble { position:relative; background:#f7fbff; color:#142236; border-radius:22px 22px 22px 8px; padding:16px 17px; line-height:1.55; font-weight:800; font-size:15px; min-height:92px; box-shadow:0 18px 38px rgba(0,0,0,.18); display:flex; align-items:center; }
.bubble.pushback { animation:pop .25s ease; border:2px solid rgba(251,191,36,.75); }
@keyframes pop { from{transform:scale(.96); opacity:.55} to{transform:scale(1);opacity:1} }

.instruction { margin:18px 2px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.instruction strong { font-size:14px; }
.instruction span { font-size:12px; color:var(--muted); }
.choices { display:grid; gap:9px; padding-bottom:4px; }
.choice { width:100%; text-align:left; border:1px solid var(--line); border-radius:18px; padding:13px 14px; background:rgba(255,255,255,.055); cursor:pointer; display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; transition:.15s transform,.15s border-color,.15s background; }
.choice:hover { border-color:rgba(110,231,183,.35); background:rgba(110,231,183,.07); }
.choice-text { font-size:13px; line-height:1.55; font-weight:800; }
.choice-type { font-size:12px; border-radius:999px; padding:5px 7px; color:#b7c8d9; background:rgba(255,255,255,.06); white-space:nowrap; }

.feedback-overlay { position:fixed; z-index:30; inset:0; display:flex; align-items:flex-end; justify-content:center; background:rgba(3,8,16,.58); backdrop-filter:blur(4px); }
.feedback-card { width:min(560px,100%); border-radius:28px 28px 0 0; background:#101d30; padding:22px 18px calc(22px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); box-shadow:0 -18px 60px rgba(0,0,0,.4); animation:sheet .26s ease; }
@keyframes sheet { from{ transform:translateY(18px); opacity:0 } to{transform:translateY(0);opacity:1} }
.grade { display:flex; align-items:center; gap:12px; }
.grade-badge { width:52px; height:52px; border-radius:18px; display:grid; place-items:center; font-weight:1000; font-size:21px; background:rgba(110,231,183,.12); color:var(--accent); }
.grade h2 { margin:0 0 4px; font-size:20px; }
.grade p { margin:0; color:var(--muted); font-size:12px; }
.lesson { margin:16px 0; padding:14px; border-radius:17px; background:rgba(255,255,255,.045); border:1px solid var(--line); }
.lesson-title { font-size:12px; color:var(--accent); font-weight:900; margin-bottom:7px; }
.lesson-text { font-size:14px; line-height:1.6; font-weight:800; }
.delta-row { display:flex; gap:8px; margin-bottom:16px; }
.delta { flex:1; border-radius:14px; padding:9px 10px; background:rgba(255,255,255,.04); font-size:12px; color:var(--muted); text-align:center; }
.delta b { color:var(--text); font-size:14px; }

.unlock { margin:14px 0; padding:14px; border-radius:17px; border:1px solid rgba(110,231,183,.24); background:rgba(110,231,183,.07); }
.unlock small { display:block; color:var(--accent); font-weight:900; margin-bottom:5px; }
.unlock strong { font-size:15px; }

.collection-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.skill-card { min-height:118px; padding:13px; border-radius:18px; background:rgba(255,255,255,.045); border:1px solid var(--line); }
.skill-card.locked { opacity:.35; filter:grayscale(.7); }
.skill-num { font-size:12px; color:var(--muted); }
.skill-card h3 { font-size:14px; margin:8px 0 6px; }
.skill-card p { font-size:12px; color:#afbed0; margin:0; line-height:1.5; }

.freebox { margin-top:10px; }
.freebox textarea { width:100%; min-height:100px; resize:none; border:1px solid var(--line); border-radius:18px; padding:14px; background:rgba(255,255,255,.055); color:var(--text); outline:none; line-height:1.6; }
.freebox textarea:focus { border-color:rgba(110,231,183,.45); box-shadow:0 0 0 3px rgba(110,231,183,.08); }

.summary { padding-top:36px; }
.summary h1 { font-size:34px; margin:10px 0 8px; letter-spacing:-.04em; }
.summary p { color:#bdcad9; line-height:1.65; }
.score-ring { width:150px; height:150px; margin:22px auto; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--accent) var(--deg,250deg), rgba(255,255,255,.08) 0); position:relative; }
.score-ring::after { content:""; position:absolute; inset:12px; border-radius:50%; background:#0d1a2c; }
.score-ring div { z-index:1; text-align:center; }
.score-ring b { display:block; font-size:34px; }
.score-ring small { color:var(--muted); }
.summary-list { display:grid; gap:8px; margin:16px 0 20px; }
.summary-item { display:flex; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:15px; background:rgba(255,255,255,.045); border:1px solid var(--line); font-size:12px; }
.summary-item b { font-size:13px; }

.toast { position:fixed; z-index:60; top:max(16px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%); background:#16263d; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:999px; padding:10px 14px; font-size:12px; font-weight:900; animation:toast .25s ease; }
@keyframes toast { from{opacity:0;transform:translate(-50%,-8px)} to{opacity:1;transform:translate(-50%,0)} }

@media (min-width:700px){ body{padding:24px 0;} .app-shell{min-height:calc(100dvh - 48px); border-radius:34px; overflow:hidden; box-shadow:0 30px 100px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.07)} .screen{min-height:calc(100dvh - 48px)} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }