:root {
    --bg: #0a0a0a; --card: #141414; --border: #2a2a2a;
    --text: #f0f0f0; --dim: #777; --accent: #5b9bff; --radius: 10px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    background: var(--bg); color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6; min-height: 100vh;
  }
  .launch-screen {
    position:fixed; inset:0; z-index:9999;
    display:grid; place-items:center; align-content:center; gap:14px;
    background:var(--bg); color:var(--text);
    pointer-events:none;
    opacity:0; visibility:hidden;
  }
  body.booting .launch-screen {
    opacity:1; visibility:visible;
    animation:launchOut 1320ms cubic-bezier(.22,.61,.36,1) 160ms forwards;
  }
  .launch-title {
    max-width:min(760px, 86vw); text-align:center;
    font-size:clamp(1.45rem, 4.6vw, 2.28rem); line-height:1.25; font-weight:780;
    letter-spacing:0;
    transform-origin:center center;
    opacity:0;
  }
  body.booting .launch-title {
    animation:launchTitleMove 1320ms cubic-bezier(.22,.61,.36,1) 160ms forwards;
  }
  .launch-line {
    width:54px; height:3px; border-radius:999px; background:var(--accent);
    opacity:0;
  }
  body.booting .launch-line {
    animation:launchLineOut 980ms ease 220ms forwards;
  }
  body.booting .container {
    opacity:0;
    transform:translateY(8px);
    animation:containerIn 520ms ease 1160ms forwards;
  }
  .container { max-width: 1060px; margin: 0 auto; padding: 32px 20px; }

  .topbar { display:flex; justify-content:flex-end; margin-bottom:16px; }
  .lang-switch {
    display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;
    background:#101010;
  }
  .lang-btn {
    border:none; background:transparent; color:var(--dim); padding:7px 12px;
    font-size:0.76rem; cursor:pointer;
  }
  .lang-btn.active { background:var(--accent); color:var(--bg); font-weight:700; }
  .header { text-align: center; margin-bottom: 28px; }
  .header h1 { font-size: 1.45rem; font-weight: 600; margin-bottom: 4px; }
  .header .sub { color: var(--dim); font-size: 0.82rem; }
  .divider { width: 50px; height: 3px; background: var(--accent); margin: 12px auto; }

  .step { display: none; }
  .step.active { display: block; animation:stepFadeIn 150ms ease both; }
  .step-title { font-size: 1.28rem; font-weight: 750; margin-bottom: 8px; letter-spacing:0; }
  .step-desc {
    color:#d0d0d0; font-size:0.92rem; font-weight:650; line-height:1.55;
    margin-bottom:22px; max-width:920px;
  }
  .intro-carousel {
    border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#101010;
  }
  .intro-slide {
    display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(300px, 0.65fr);
    min-height:470px;
  }
  .intro-slide[hidden] { display:none; }
  .intro-media {
    min-height:470px; display:flex; align-items:center; justify-content:center;
    background:#080808; border-right:1px solid var(--border); overflow:hidden;
  }
  .intro-media img, .intro-media video {
    display:block; width:100%; height:100%; min-height:470px; object-fit:contain; background:#080808;
  }
  .intro-copy {
    display:flex; flex-direction:column; justify-content:center; padding:34px;
  }
  .intro-slide-kicker {
    color:var(--accent); font-size:0.84rem; font-weight:800; margin-bottom:10px;
  }
  .intro-copy h2 { font-size:1.18rem; line-height:1.35; margin-bottom:14px; }
  .intro-copy p { color:#bbb; font-size:0.88rem; line-height:1.72; }
  .intro-carousel-nav {
    display:grid; grid-template-columns:minmax(130px, auto) 1fr minmax(130px, auto);
    align-items:center; gap:14px; padding:14px 18px;
    border-top:1px solid var(--border); background:#0d0d0d;
  }
  .intro-nav-button { min-width:130px; }
  .intro-page-indicator { display:grid; justify-items:center; gap:4px; }
  .intro-dots { display:flex; align-items:center; justify-content:center; gap:9px; }
  .intro-dot {
    width:9px; height:9px; padding:0; border:0; border-radius:50%;
    background:#3d3d3d; cursor:pointer; transition:width 160ms ease, background-color 160ms ease;
  }
  .intro-dot.active { width:24px; border-radius:999px; background:var(--accent); }
  .intro-dot:focus-visible { outline:2px solid #fff; outline-offset:3px; }
  .intro-page-status { color:var(--dim); font-size:0.66rem; min-height:1em; }
  @keyframes launchTitleMove {
    0% { opacity:0; transform:translateY(14px) scale(0.985); }
    24% { opacity:1; transform:translateY(0) scale(1); }
    64% { opacity:1; transform:translateY(0) scale(1); }
    100% {
      opacity:0;
      transform:translate(var(--launch-dx, 0px), var(--launch-dy, -42px)) scale(var(--launch-scale, 0.78));
    }
  }
  @keyframes launchLineOut {
    0%, 54% { opacity:1; transform:scaleX(1); }
    100% { opacity:0; transform:scaleX(0.64); }
  }
  @keyframes launchOut {
    0%, 76% { opacity:1; visibility:visible; }
    100% { opacity:0; visibility:hidden; }
  }
  @keyframes containerIn {
    to { opacity:1; transform:translateY(0); }
  }
  @keyframes stepFadeIn {
    from { opacity:0; transform:translateY(4px); }
    to { opacity:1; transform:translateY(0); }
  }
  .current-intent {
    position:sticky; top:14px; z-index:40;
    display:grid; grid-template-columns:auto minmax(90px, auto) minmax(0, 1fr); align-items:center; gap:12px;
    background:rgba(238,242,247,0.10); border:1px solid rgba(255,255,255,0.18); border-radius:8px;
    padding:12px 14px; margin-bottom:10px; min-width:0;
    transition:background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }
  .current-intent.is-stuck {
    background:rgba(244,247,251,0.72);
    border-color:rgba(255,255,255,0.58);
    box-shadow:0 16px 42px rgba(0,0,0,0.46), 0 1px 0 rgba(255,255,255,0.72) inset;
    -webkit-backdrop-filter:blur(20px) saturate(1.35);
    backdrop-filter:blur(20px) saturate(1.35);
  }
  .intent-label {
    color:#b8bec8; font-size:0.68rem; font-weight:800;
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .current-intent.is-stuck .intent-label { color:#4e5560; }
  .current-intent .intent-name {
    display:inline; font-size:1.08rem; font-weight:800; margin-right:0;
  }
  .current-intent.is-stuck .intent-name { color:#111827; }
  .current-intent .intent-desc {
    display:inline; color:#c8cdd4; font-size:0.84rem; line-height:1.42;
  }
  .current-intent.is-stuck .intent-desc { color:#374151; }
  .return-intents-inline {
    appearance:none; flex:0 0 auto;
    border:1px solid #353535; border-radius:999px;
    background:#101010; color:#aebbd0;
    padding:6px 10px; font-size:0.66rem; font-weight:700; cursor:pointer;
    white-space:nowrap;
  }
  .return-intents-inline:hover {
    border-color:rgba(96,165,250,0.6); background:rgba(96,165,250,0.08); color:#d9e8ff;
  }
  .intent-progress-row {
    display:flex; align-items:flex-start; gap:10px; margin-bottom:18px;
  }
  .intent-progress-list {
    display:flex; flex:1 1 auto; min-width:0; flex-wrap:wrap; gap:7px;
  }
  .intent-progress-chip {
    appearance:none; cursor:pointer; font-family:inherit; text-align:left;
    display:inline-flex; align-items:center; gap:6px;
    min-height:28px; padding:5px 9px; border-radius:999px;
    border:1px solid var(--border); background:#101010;
    color:#aaa; font-size:0.7rem; line-height:1.2;
  }
  .intent-progress-chip:hover {
    border-color:rgba(91,155,255,0.55); color:#e5efff;
  }
  .intent-progress-chip:focus-visible {
    outline:2px solid var(--accent); outline-offset:2px;
  }
  .intent-progress-chip.current {
    border-color:var(--accent); background:#111b2a; color:#e8f1ff;
  }
  .intent-progress-chip.done {
    border-color:rgba(34,197,94,0.55); color:#c8f3d7;
  }
  .intent-progress-chip.pending {
    color:#777;
  }
  .intent-progress-chip .status {
    color:var(--dim); font-size:0.66rem;
  }

  .progress-wrap { margin-bottom: 24px; }
  .progress-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
  .progress-fill { height: 100%; background: var(--accent); transition: width 0.35s; border-radius: 2px; }
  .progress-text {
    display:flex; justify-content:flex-end; align-items:center; gap:12px;
    min-height:1.2em; font-size:0.7rem; color:var(--dim); margin-top:5px;
  }
  #pTextLabel { text-align:right; }
  #pTextIntent { text-align:right; white-space:nowrap; }
  .progress-text.workflow { justify-content:space-between; }
  .progress-text.workflow #pTextLabel { text-align:left; }

  /* ── STEP 1 ── */
  .panel {
    background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
    padding:18px; margin-bottom:16px;
  }
  .panel p { color:#b8b8b8; font-size:0.88rem; line-height:1.55; margin-bottom:10px; }
  .consent-check { display:flex; gap:10px; align-items:flex-start; color:#ddd; font-size:0.86rem; margin-top:14px; }
  .consent-check input { margin-top:4px; }
  .form-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; }
  .field label { display:block; font-size:0.76rem; color:var(--dim); margin-bottom:5px; }
  .field input, .field select {
    width:100%; background:#0f0f0f; color:var(--text); border:1px solid var(--border);
    border-radius:8px; padding:10px 11px; font-size:0.84rem;
  }
  .field input:focus, .field select:focus { outline:none; border-color:var(--accent); }
  .field.invalid input, .field.invalid select { border-color:#ef4444; }
  .presence-field { margin-top:16px; }
  .presence-field.invalid .presence-scale { border-color:#ef4444; }
  .presence-question {
    font-size:0.86rem; color:#e8e8e8; font-weight:760; line-height:1.45; margin-bottom:10px;
  }
  .presence-scale {
    display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px;
    border:1px solid transparent; border-radius:10px;
  }
  .presence-option {
    min-height:86px; padding:11px 6px; border:1px solid var(--border); border-radius:8px;
    background:#101010; color:var(--text); cursor:pointer; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:7px; text-align:center; transition:all 0.16s ease;
  }
  .presence-option:hover { border-color:#555; }
  .presence-option.selected {
    border-color:var(--accent); background:#111b2a; box-shadow:0 0 0 1px rgba(91,155,255,0.22);
  }
  .presence-number {
    width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
    background:#181818; color:#bbb; font-size:0.8rem; font-weight:850;
  }
  .presence-option.selected .presence-number { background:var(--accent); color:var(--bg); }
  .presence-label { font-size:0.78rem; line-height:1.25; color:#b8b8b8; }
  .presence-option.selected .presence-label { color:#e5efff; }
  .error-text { display:none; color:#fca5a5; font-size:0.74rem; margin-top:10px; }
  .error-text.show { display:block; }
  .intent-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr; gap: 10px; align-items: stretch;
  }
  .select-row { display:flex; gap:8px; justify-content:flex-end; margin-bottom:8px; }
  .select-row button { background:none; border:none; color:var(--accent); font-size:0.76rem; cursor:pointer; }
  .no-intent-option {
    display:flex; gap:10px; align-items:flex-start;
    background:#101010; border:1px solid var(--border); border-radius:8px;
    padding:11px 13px; margin:12px 0 0; cursor:pointer;
  }
  .no-intent-option input { margin-top:4px; }
  .no-intent-option strong { display:block; font-size:0.82rem; color:#eee; line-height:1.35; }
  .no-intent-option small { display:block; margin-top:3px; color:#aaa; font-size:0.76rem; line-height:1.42; }
  .no-intent-option.selected {
    border-color:var(--accent); background:#111b2a; box-shadow:0 0 0 1px rgba(91,155,255,0.18);
  }
  .no-intent-option.disabled {
    opacity:0.55; cursor:not-allowed;
  }
  .intent-card {
    background: var(--card); border: 2px solid var(--border); border-radius: var(--radius);
    padding: 11px 14px; cursor: pointer; transition: all 0.18s; user-select: none; position: relative;
    display:grid; grid-template-columns:60px minmax(0, 1fr); gap:12px; align-items:center; height:100%;
  }
  .intent-card:hover { border-color: #444; }
  .intent-card.sel { border-color: var(--accent); background: #111b2a; }
  .intent-icon-wrap {
    width:56px; height:56px; display:grid; place-items:center;
    color:var(--accent); border-right:1px solid #2b2b2b; padding-right:10px;
  }
  .intent-icon {
    width:46px; height:46px; overflow:visible; fill:none; stroke:currentColor;
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  }
  .intent-icon *, .intent-icon { transform-box:fill-box; transform-origin:center; }
  .intent-copy { min-width:0; padding-right:24px; }
  .intent-card .name { font-size: 0.9rem; font-weight: 600; }
  .intent-card .desc {
    font-size:0.78rem; color:#aaa; margin-top:5px; line-height:1.4;
  }
  .intent-card .dot {
    position: absolute; top: 12px; right: 14px;
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center; transition: all 0.18s;
  }
  .intent-card.sel .dot { border-color: var(--accent); background: var(--accent); }
  .intent-card.sel .dot::after { content: "✓"; color: var(--bg); font-size: 11px; font-weight: 700; }

  .intent-card.is-animating .comfort-heart { animation:comfort-embrace 520ms cubic-bezier(.2,.8,.2,1); }
  .intent-card.is-animating .comfort-clasp { animation:comfort-clasp 520ms cubic-bezier(.2,.8,.2,1); }
  .intent-card.is-animating .calm-wave-1 { animation:calm-wave 480ms ease-out; }
  .intent-card.is-animating .calm-wave-2 { animation:calm-wave 480ms 40ms ease-out both; }
  .intent-card.is-animating .calm-wave-3 { animation:calm-wave 480ms 80ms ease-out both; }
  .intent-card.is-animating .affection-heart { animation:heart-beat 480ms cubic-bezier(.2,.8,.2,1); }
  .intent-card.is-animating .salutation-hand { animation:hand-wave 560ms cubic-bezier(.2,.8,.2,1); transform-origin:72% 88%; }
  .intent-card.is-animating .salutation-lines,
  .intent-card.is-animating .attention-ring-lines { animation:signal-flicker 560ms ease-out; }
  .intent-card.is-animating .appreciation-thumb { animation:thumb-up 440ms cubic-bezier(.2,.85,.25,1); transform-origin:45% 90%; }
  .intent-card.is-animating .gratitude-hands { animation:gratitude-hands 500ms cubic-bezier(.2,.8,.2,1); }
  .intent-card.is-animating .gratitude-heart { animation:gratitude-heart 560ms cubic-bezier(.2,.8,.2,1); }
  .intent-card.is-animating .encouragement-path { animation:line-rise 500ms ease-out; }
  .intent-card.is-animating .encouragement-arrow { animation:arrow-forward 500ms cubic-bezier(.2,.8,.2,1); }
  .intent-card.is-animating .presence-pin { animation:pin-drop 470ms cubic-bezier(.2,.85,.25,1); }
  .intent-card.is-animating .presence-dot { animation:location-pulse 550ms 100ms ease-out both; }
  .intent-card.is-animating .playful-cone { animation:popper-compress 540ms cubic-bezier(.2,.8,.2,1); transform-origin:25% 78%; }
  .intent-card.is-animating .playful-confetti { animation:confetti-burst 580ms cubic-bezier(.15,.8,.25,1); transform-origin:58% 42%; }
  .intent-card.is-animating .attention-bell { animation:bell-ring 560ms cubic-bezier(.2,.8,.2,1); transform-origin:50% 15%; }
  .intent-card.is-animating .attention-clapper { animation:clapper-swing 560ms cubic-bezier(.2,.8,.2,1); transform-origin:50% 0; }
  .intent-card.is-animating .guidance-sign { animation:sign-guide 500ms cubic-bezier(.2,.8,.2,1); }
  .intent-card.is-animating .guidance-post { animation:post-settle 500ms cubic-bezier(.2,.8,.2,1); transform-origin:50% 100%; }
  .intent-card.is-animating .request-bubble { animation:bubble-pop 470ms cubic-bezier(.2,.85,.25,1); }
  .intent-card.is-animating .request-question { animation:question-pop 500ms 80ms cubic-bezier(.2,.85,.25,1) both; }
  .intent-card.is-animating .apology-head { animation:apology-return 520ms cubic-bezier(.2,.8,.2,1); }
  .intent-card.is-animating .apology-path { animation:apology-path 520ms ease-out; }
  .intent-card.is-animating .refusal-ring { animation:boundary-set 440ms cubic-bezier(.2,.8,.2,1); }
  .intent-card.is-animating .refusal-slash { animation:slash-draw 440ms 70ms ease-out both; }

  @keyframes comfort-embrace { 0%,100%{transform:scale(1)} 32%{transform:scale(.96)} 62%{transform:scale(1.035)} }
  @keyframes comfort-clasp { 0%,100%{transform:translateY(0)} 35%{transform:translateY(1px) scale(.97)} 65%{transform:translateY(-.5px)} }
  @keyframes calm-wave { 0%{transform:translateX(-2px);opacity:.55} 45%{transform:translateX(1.25px);opacity:1} 100%{transform:translateX(0);opacity:1} }
  @keyframes heart-beat { 0%,100%{transform:scale(1)} 28%{transform:scale(1.1)} 48%{transform:scale(.97)} 70%{transform:scale(1.045)} }
  @keyframes hand-wave { 0%,100%{transform:rotate(0)} 22%{transform:rotate(-9deg)} 45%{transform:rotate(11deg)} 68%{transform:rotate(-6deg)} 84%{transform:rotate(4deg)} }
  @keyframes signal-flicker { 0%,100%{opacity:1} 22%,62%{opacity:.25} 42%,82%{opacity:1} }
  @keyframes thumb-up { 0%{transform:translateY(2px) rotate(-3deg) scale(.96)} 58%{transform:translateY(-2px) rotate(2deg) scale(1.035)} 100%{transform:none} }
  @keyframes gratitude-hands { 0%,100%{transform:scale(1)} 38%{transform:scale(.97)} 70%{transform:scale(1.015)} }
  @keyframes gratitude-heart { 0%{transform:translateY(2px) scale(.75);opacity:.3} 55%{transform:translateY(-2px) scale(1.08);opacity:1} 100%{transform:none;opacity:1} }
  @keyframes line-rise { 0%{transform:translateY(2px);opacity:.55} 70%{transform:translateY(-1px);opacity:1} 100%{transform:none} }
  @keyframes arrow-forward { 0%{transform:translate(-2px,2px) scale(.88);opacity:.35} 65%{transform:translate(1px,-1px) scale(1.06);opacity:1} 100%{transform:none;opacity:1} }
  @keyframes pin-drop { 0%{transform:translateY(-4px) scale(.92);opacity:.35} 68%{transform:translateY(1px) scale(1.03);opacity:1} 100%{transform:none;opacity:1} }
  @keyframes location-pulse { 0%{transform:scale(.55);opacity:.3} 55%{transform:scale(1.25);opacity:1} 100%{transform:scale(1);opacity:1} }
  @keyframes popper-compress { 0%,100%{transform:rotate(0) scale(1)} 28%{transform:rotate(5deg) scale(.88)} 58%{transform:rotate(-2deg) scale(1.05)} }
  @keyframes confetti-burst { 0%,24%{transform:translate(-2px,3px) scale(.35);opacity:0} 62%{transform:translate(1px,-1px) scale(1.08);opacity:1} 100%{transform:none;opacity:1} }
  @keyframes bell-ring { 0%,100%{transform:rotate(0)} 24%{transform:rotate(-8deg)} 48%{transform:rotate(8deg)} 70%{transform:rotate(-4deg)} 86%{transform:rotate(2deg)} }
  @keyframes clapper-swing { 0%,100%{transform:rotate(0)} 26%{transform:rotate(11deg)} 52%{transform:rotate(-10deg)} 76%{transform:rotate(5deg)} }
  @keyframes sign-guide { 0%{transform:translateX(-2px);opacity:.55} 58%{transform:translateX(1.5px);opacity:1} 100%{transform:none} }
  @keyframes post-settle { 0%,100%{transform:rotate(0)} 35%{transform:rotate(-2deg)} 70%{transform:rotate(1deg)} }
  @keyframes bubble-pop { 0%{transform:scale(.86);opacity:.35} 62%{transform:scale(1.04);opacity:1} 100%{transform:scale(1);opacity:1} }
  @keyframes question-pop { 0%{transform:translateY(2px) scale(.55);opacity:0} 65%{transform:translateY(-1px) scale(1.12);opacity:1} 100%{transform:none;opacity:1} }
  @keyframes apology-return { 0%{transform:translateX(3px);opacity:.35} 58%{transform:translateX(-1px);opacity:1} 100%{transform:none;opacity:1} }
  @keyframes apology-path { 0%{stroke-dasharray:40;stroke-dashoffset:-40;opacity:.35} 100%{stroke-dasharray:40;stroke-dashoffset:0;opacity:1} }
  @keyframes boundary-set { 0%{transform:scale(.82);opacity:.3} 62%{transform:scale(1.04);opacity:1} 100%{transform:scale(1);opacity:1} }
  @keyframes slash-draw { 0%{stroke-dasharray:24;stroke-dashoffset:24;opacity:.3} 100%{stroke-dasharray:24;stroke-dashoffset:0;opacity:1} }

  /* ── CONTEXT QUESTIONS ── */
  .context-list { display:grid; gap:14px; }
  .context-card {
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px; display:grid; gap:16px;
  }
  .context-block { display:grid; gap:8px; }
  .context-question { font-size:0.92rem; font-weight:760; color:#eee; line-height:1.45; }
  .scale-row {
    display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px;
  }
  .scale-option, .context-option {
    background:#101010; border:1px solid var(--border); color:var(--text);
    border-radius:8px; cursor:pointer; transition:all 0.16s ease;
  }
  .scale-option {
    min-height:152px; padding:13px 7px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:7px; text-align:center;
  }
  .scale-option:hover, .context-option:hover { border-color:#555; }
  .scale-option.selected, .context-option.selected {
    border-color:var(--accent); background:#111b2a; box-shadow:0 0 0 1px rgba(91,155,255,0.22);
  }
  .scale-number {
    width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
    background:#181818; color:#bbb; font-size:0.8rem; font-weight:800;
  }
  .scale-option.selected .scale-number { background:var(--accent); color:var(--bg); }
  .scale-label { font-size:0.8rem; line-height:1.25; color:#b5b5b5; }
  .scale-option.selected .scale-label { color:#e5efff; }
  .ios-diagram {
    position:relative; width:108px; height:56px; margin:3px auto 4px;
    display:block;
  }
  .ios-circle {
    position:absolute; top:6px; width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center; font-size:0.8rem; font-weight:850;
    border:2px solid rgba(255,255,255,0.62); color:rgba(255,255,255,0.88);
    background:rgba(10,10,10,0.72);
  }
  .ios-human { left:8px; }
  .ios-robot { background:rgba(20,38,68,0.72); color:#d8e7ff; }
  .ios-level-1 .ios-human { left:8px; }
  .ios-level-1 .ios-robot { left:56px; }
  .ios-level-2 .ios-human { left:13px; }
  .ios-level-2 .ios-robot { left:51px; }
  .ios-level-3 .ios-human { left:17px; }
  .ios-level-3 .ios-robot { left:47px; }
  .ios-level-4 .ios-human { left:21px; }
  .ios-level-4 .ios-robot { left:43px; }
  .ios-level-5 .ios-human { left:25px; }
  .ios-level-5 .ios-robot { left:39px; }
  .ios-level-6 .ios-human { left:28px; }
  .ios-level-6 .ios-robot { left:36px; }
  .ios-level-7 .ios-human { left:30px; }
  .ios-level-7 .ios-robot { left:34px; }
  .scale-option.selected .ios-circle {
    border-color:rgba(255,255,255,0.55); color:#fff;
  }
  .context-options { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  .context-option {
    min-height:98px; padding:12px; text-align:left; display:flex; flex-direction:column; gap:5px;
  }
  .context-option-combo {
    display:grid; grid-template-columns:minmax(0, 1fr); gap:0;
  }
  .context-option-combo.selected {
    grid-column:1 / -1;
    grid-template-columns:minmax(240px, 1fr) minmax(320px, 2fr);
  }
  .context-option-combo .context-option {
    width:100%; height:100%;
  }
  .context-option-combo.selected .context-option {
    border-radius:8px 0 0 8px;
  }
  .convention-block {
    border-top:1px solid var(--border); padding-top:16px; margin-top:2px;
  }
  .touch-reference {
    display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:start; gap:10px;
    padding:11px 12px; border-left:3px solid rgba(91,155,255,0.72);
    background:rgba(91,155,255,0.07); border-radius:0 7px 7px 0;
  }
  .touch-reference-title {
    color:#bfdbfe; font-size:0.82rem; font-weight:800; white-space:nowrap;
  }
  .touch-reference-text {
    color:#c4cede; font-size:0.82rem; line-height:1.52;
  }
  .convention-scale {
    display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px;
  }
  .convention-option {
    min-height:88px; padding:12px 9px;
    display:grid; grid-template-rows:auto auto; justify-items:center; align-content:center; gap:7px;
    background:#101010; border:1px solid var(--border); border-radius:8px;
    color:var(--text); cursor:pointer; text-align:center; transition:all 0.16s ease;
  }
  .convention-option:hover { border-color:#555; }
  .convention-option.selected {
    border-color:var(--accent); background:#111b2a; box-shadow:0 0 0 1px rgba(91,155,255,0.22);
  }
  .convention-number {
    width:27px; height:27px; display:grid; place-items:center;
    border-radius:50%; background:#181818; color:#bbb; font-size:0.8rem; font-weight:800;
  }
  .convention-option.selected .convention-number { background:var(--accent); color:var(--bg); }
  .convention-label { color:#eee; font-size:0.82rem; font-weight:760; line-height:1.25; }
  .context-name { font-size:0.84rem; font-weight:750; color:#eee; }
  .context-desc { font-size:0.8rem; color:#aaa; line-height:1.42; }
  .context-option.selected .context-name { color:#fff; }
  .context-option.selected .context-desc { color:#c8d9ff; }
  .other-context-field {
    display:flex; align-items:center; min-width:0; padding:12px;
    border:1px solid rgba(91,155,255,0.9); border-left:0; border-radius:0 8px 8px 0;
    background:rgba(91,155,255,0.06);
  }
  .other-context-field input {
    width:100%; min-height:42px; padding:9px 11px;
    color:var(--text); background:#0d0d0d; border:1px solid #3a3a3a; border-radius:7px;
    font:inherit; font-size:0.78rem;
  }
  .other-context-field input:focus { outline:none; border-color:var(--accent); }

  /* ── STEP 2 ── */
  .badge { display:inline-block;background:var(--accent);color:var(--bg);font-size:0.78rem;font-weight:600;padding:4px 14px;border-radius:20px;margin-bottom:8px; }
  .body-map-shell, .color-legend, .nav { user-select:none; -webkit-user-select:none; }
  .body-map-shell {
    position:relative; width:min(100%, 900px); height:clamp(600px, 76vh, 820px);
    margin:10px auto 0; border:1px solid var(--border); border-radius:8px;
    background:#080808;
    overflow:hidden;
  }
  .body-map-svg {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    overflow:hidden; touch-action:manipulation;
  }
  .body-map-svg-artwork {
    display:block; width:100%; height:100%; max-width:100%; max-height:100%;
  }
  .body-map-status {
    position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
    min-height:18px; padding:4px 10px; border-radius:999px;
    color:#aaa; background:rgba(10,10,10,0.72); font-size:0.7rem;
    pointer-events:none; opacity:0; transition:opacity 0.18s ease;
  }
  .body-map-status.show { opacity:1; }
  .empty-map-confirm {
    display:flex; align-items:flex-start; gap:9px;
    flex:1 1 auto; min-width:0; margin:0;
    color:#d5d5d5; font-size:0.8rem; line-height:1.46;
    background:#101010; border:1px solid var(--border); border-radius:8px;
    padding:10px 12px;
  }
  .empty-map-confirm input { margin-top:3px; }
  .empty-map-confirm.disabled { opacity:0.55; }
  .map-post-controls {
    display:flex; align-items:stretch; gap:10px;
    width:min(100%, 860px); margin:12px auto 0;
  }
  #mapError {
    width:min(100%, 860px); margin:8px auto 0;
  }

  /* Paint tools */
  .color-legend {
    display:grid; grid-template-columns:minmax(420px, 1fr) minmax(240px, auto) minmax(130px, auto);
    align-items:center; gap:12px;
    padding:0; margin:4px auto 10px; max-width:960px;
  }
  .color-controls { display:flex; align-items:center; justify-content:flex-start; gap:10px; flex-wrap:wrap; }
  .toolbar-action {
    background:#101010; border:1px solid var(--border); color:var(--text);
    border-radius:8px; padding:9px 10px; cursor:pointer; font-size:0.74rem;
    min-height:40px; align-self:center;
  }
  .toolbar-action:hover { border-color:#555; }
  .toolbar-action strong { font-weight:800; color:#fff; }
  .toolbar-action.reset-map {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    flex:0 0 64px; color:#d07b7b; border-color:rgba(239,68,68,0.36);
    background:rgba(16,16,16,0.72);
  }
  .toolbar-action.reset-map .reset-icon { font-size:0.9rem; line-height:1; }
  .toolbar-action.reset-map:hover { background:rgba(239,68,68,0.15); }
  .toolbar-action.back-intents { color:#ddd; }
  .toolbar-action.back-intents span { color:var(--dim); margin-right:2px; }
  .toolbar-action.back-intents strong { color:var(--text); }
  .color-controls .leg-item { display:flex; align-items:center; gap:8px; font-size:0.7rem; color:var(--dim); }
  .color-controls .leg-swatch { width:16px; height:16px; border-radius:3px; flex-shrink:0; }
  .color-controls .bucket {
    display:flex; align-items:center; gap:9px;
    background:#101010; border:2px solid var(--border); color:var(--text);
    border-radius:8px; padding:9px 10px; cursor:pointer; font-size:0.74rem;
  }
  .color-controls .bucket.active { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,0.08); }
  .color-controls .leg-swatch.l2p { background:rgba(22,163,74,0.76); }
  .color-controls .leg-swatch.l0  { background:rgba(216,216,216,0.5); border:1px solid #fff; }
  .color-controls .leg-swatch.l2n { background:rgba(220,38,38,0.72); }
  .color-controls .leg-title { font-size:0.75rem; font-weight:600; color:var(--text); margin-right:4px; }
  .tool-status {
    display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
    text-align:center; font-size:0.72rem; color:#8c8c8c; line-height:1.3;
  }
  .current-tool { color:#bbb; }
  .status-dot { color:#555; }

  .region-tooltip {
    position:fixed; background:#1a1a1a; color:#fff; font-size:0.72rem;
    padding:5px 10px; border-radius:4px; pointer-events:none; z-index:999;
    border:1px solid #555; max-width:min(220px, calc(100vw - 16px));
    white-space:normal; overflow-wrap:anywhere; line-height:1.35;
    opacity:0; visibility:hidden; transition:opacity 0.22s ease, visibility 0s linear 0.22s;
  }
  .region-tooltip.show {
    opacity:1; visibility:visible; transition:opacity 0.12s ease;
  }

  /* ── Nav ── */
  .nav { display:flex; gap:12px; justify-content:center; margin-top:24px; align-items:center; flex-wrap:wrap; }
  .btn { padding:10px 26px; border-radius:8px; font-size:0.86rem; font-weight:600; cursor:pointer; transition:all 0.18s; border:none; }
  .btn-p { background:var(--accent); color:var(--bg); }
  .btn-p:hover { filter:brightness(1.15); }
  .btn-p.soft-disabled {
    background:#333;
    color:#777;
    box-shadow:none;
  }
  .btn-p.soft-disabled:hover { filter:none; }
  .btn-p:disabled { background:#333; color:#666; cursor:not-allowed; }
  .btn-s { background:transparent; border:1px solid var(--border); color:var(--text); }
  .btn-s:hover { border-color:#555; }
  .btn-s:disabled { color:#777; border-color:#2a2a2a; cursor:not-allowed; opacity:0.55; }
  .btn-e { background:#22c55e; color:var(--bg); }
  .btn-e:hover { filter:brightness(1.15); }
  .btn-warn { background:transparent; border:1px solid #ef4444; color:#ef4444; font-size:0.78rem; }
  .btn-warn:hover { background:rgba(239,68,68,0.15); }
  .counter { color:var(--dim); font-size:0.82rem; min-width:110px; text-align:center; }

  /* ── STEP 3 ── */
  .rev-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
  .rev-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px; }
  .rev-card.no-intent-review { grid-column:1 / -1; }
  .rev-card .r-name { font-weight:600; font-size:0.86rem; }
  .rev-card .r-stats { font-size:0.72rem; color:var(--dim); margin-top:4px; }
  .rev-card .r-meta { font-size:0.72rem; color:#a7c3ff; margin-top:5px; }
  .rev-card .r-note { font-size:0.7rem; color:#fbbf24; margin-top:5px; }
  .result-panel {
    max-width:720px; margin:0 auto; background:var(--card); border:1px solid var(--border);
    border-radius:8px; padding:18px;
  }
  .result-kicker { font-size:0.76rem; font-weight:700; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.08em; }
  .result-panel.ok { border-color:rgba(34,197,94,0.5); }
  .result-panel.ok .result-kicker { color:#22c55e; }
  .result-panel.err { border-color:rgba(239,68,68,0.5); }
  .result-panel.err .result-kicker { color:#ef4444; }
  .followup-panel {
    display:block; margin-top:20px; padding-top:18px; border-top:1px solid var(--border);
  }
  .followup-title {
    font-size:0.88rem; font-weight:750; margin-bottom:6px; color:#e8e8e8;
  }
  .followup-label {
    display:block; color:#b8b8b8; font-size:0.82rem; line-height:1.55; margin-bottom:10px;
  }
  .followup-row { display:flex; gap:10px; align-items:center; }
  .followup-row input {
    flex:1 1 auto; min-width:0;
    background:#0f0f0f; color:var(--text); border:1px solid var(--border);
    border-radius:8px; padding:10px 11px; font-size:0.84rem;
  }
  .followup-row input:focus { outline:none; border-color:var(--accent); }
  .followup-submit { flex:0 0 auto; min-height:40px; padding:8px 13px; }
  .followup-status {
    min-height:1.3em; margin-top:8px; font-size:0.76rem; color:#aaa;
  }
  .followup-status.ok { color:#86efac; }
  .followup-status.warn { color:#fbbf24; }
  .followup-status.err { color:#fca5a5; }
  .surveycircle-note {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:5px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,0.05);
    color:rgba(255,255,255,0.48);
    font-size:0.74rem;
    line-height:1.45;
    text-align:right;
  }
  .survey-code-row {
    display:grid;
    grid-template-columns:max-content max-content max-content;
    column-gap:4px;
    align-items:baseline;
    font-weight:650;
    letter-spacing:0;
  }
  .survey-code-source { color:rgba(255,255,255,0.42); }
  .survey-code-label { color:rgba(255,255,255,0.52); }
  .survey-code-value { color:rgba(255,255,255,0.58); }

  .unselected-panel {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:14px;
    display:grid;
    gap:12px;
  }
  .unselected-summary {
    color:#b8b8b8;
    font-size:0.86rem;
    line-height:1.5;
  }
  .unselected-intent-chips {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
  }
  .unselected-intent-chip {
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:3px 9px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#141414;
    color:#cfcfcf;
    font-size:0.74rem;
    line-height:1.2;
  }
  .unselected-reason-list {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .unselected-reason-option {
    background:#101010;
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
  }
  .unselected-reason-option.selected {
    background:#111b2a;
    border-color:var(--accent);
    box-shadow:0 0 0 1px rgba(91,155,255,0.18);
  }
  .unselected-reason-option button {
    width:100%;
    min-height:58px;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:10px;
    align-items:start;
    padding:10px 12px;
    border:0;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:0.9rem;
    line-height:1.45;
    text-align:left;
    cursor:pointer;
  }
  .reason-check {
    width:22px;
    height:22px;
    border-radius:50%;
    border:2px solid var(--border);
    display:grid;
    place-items:center;
    color:#06121f;
    font-size:0.72rem;
    font-weight:800;
    line-height:1;
  }
  .unselected-reason-option.selected .reason-check {
    background:var(--accent);
    border-color:var(--accent);
  }
  .unselected-other-input {
    width:calc(100% - 24px);
    min-height:42px;
    margin:0 12px 12px;
    padding:9px 11px;
    border:1px solid #3a3a3a;
    border-radius:7px;
    background:#0d0d0d;
    color:var(--text);
    font:inherit;
    font-size:0.82rem;
  }
  .unselected-other-input:focus {
    outline:none;
    border-color:var(--accent);
  }
  .unselected-limit {
    color:var(--dim);
    font-size:0.78rem;
    line-height:1.45;
  }

  @media (max-width: 760px) {
    .step-title { font-size:1.18rem; }
    .step-desc { font-size:0.88rem; }
    .form-grid { grid-template-columns:1fr; }
    .intro-slide { grid-template-columns:1fr; min-height:0; }
    .intro-media { min-height:250px; border-right:0; border-bottom:1px solid var(--border); }
    .intro-media img, .intro-media video { min-height:250px; max-height:320px; }
    .intro-copy { padding:24px 20px; }
    .intro-carousel-nav { grid-template-columns:1fr 1fr; }
    .intro-page-indicator { grid-column:1 / -1; grid-row:1; }
    .intro-nav-button { min-width:0; }
    .presence-scale { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .presence-option { min-height:78px; }
    .current-intent {
      top:10px; grid-template-columns:auto minmax(72px, auto); gap:4px 10px;
      padding:10px 12px;
    }
    .current-intent .intent-desc { grid-column:1 / -1; }
    html[lang="en"] .current-intent {
      grid-template-columns:1fr;
    }
    html[lang="en"] .current-intent .intent-name {
      justify-self:start;
    }
    .intent-progress-row { gap:7px; }
    .return-intents-inline { padding:6px 8px; font-size:0.62rem; }
    .body-map-shell { height:clamp(540px, 70vh, 700px); }
    .color-legend { grid-template-columns:1fr; padding:8px 10px; max-width:520px; }
    .color-controls {
      display:grid;
      grid-template-columns:auto auto minmax(0, 1fr);
      gap:8px;
      align-items:center;
      width:100%;
    }
    .color-controls .leg-title { display:none; }
    .color-controls .bucket {
      gap:7px;
      padding:8px 9px;
      font-size:0.7rem;
      white-space:nowrap;
    }
    .color-controls .leg-item {
      justify-self:end;
      gap:6px;
      white-space:nowrap;
    }
    .map-post-controls {
      align-items:stretch; gap:8px; width:100%;
    }
    .empty-map-confirm {
      padding:9px 10px; font-size:0.76rem; line-height:1.42;
    }
    .toolbar-action.reset-map {
      flex-basis:56px; padding:7px 6px; font-size:0.68rem; min-height:auto;
    }
    .convention-scale { grid-template-columns:1fr; }
    .convention-option {
      min-height:62px; grid-template-columns:auto minmax(0, 1fr);
      grid-template-rows:1fr; justify-items:start; align-items:center; text-align:left;
    }
    .touch-reference { grid-template-columns:1fr; gap:4px; }
    .toolbar-action { align-self:auto; }
    .intent-grid { grid-template-columns:1fr; }
    .intent-card { grid-template-columns:50px minmax(0, 1fr); gap:9px; padding:9px 11px; }
    .intent-icon-wrap { width:48px; height:48px; padding-right:8px; }
    .intent-icon { width:39px; height:39px; }
    .intent-copy { padding-right:22px; }
    .intent-card .name { font-size:0.88rem; }
    .intent-card .desc { margin-top:3px; font-size:0.76rem; line-height:1.38; }
    .field input, .field select, .other-context-field input, .followup-row input {
      font-size:16px;
    }
    .followup-row { flex-direction:column; align-items:stretch; }
    .nav {
      padding-bottom:max(64px, calc(env(safe-area-inset-bottom) + 48px));
    }
    .btn, .intent-card, .context-option, .scale-option, .convention-option {
      touch-action:manipulation;
    }
    .scale-row { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .scale-option { min-height:144px; }
    .context-options { grid-template-columns:1fr; }
    .unselected-reason-list { grid-template-columns:1fr; }
    .unselected-other-input { font-size:16px; }
    .context-option-combo.selected {
      grid-column:auto;
      grid-template-columns:1fr;
    }
    .context-option-combo.selected .context-option {
      border-radius:8px 8px 0 0;
    }
    .other-context-field {
      border:1px solid rgba(91,155,255,0.9);
      border-top:0;
      border-radius:0 0 8px 8px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.booting .launch-screen { display:none; }
    body.booting .container { opacity:1; transform:none; animation:none; }
    .step.active { animation:none; }
    .intro-dot, .intent-card, .intent-card .dot { transition:none; }
    .intent-card.is-animating .intent-icon * { animation:none !important; }
  }

  @media (min-width: 761px) and (max-width: 980px) {
    .form-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .intent-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .context-options { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }