:root{
    color-scheme:dark;
    --bg:#07101a;
    --bg-soft:#0b1623;
    --panel:#111d2b;
    --panel-strong:#162538;
    --panel-muted:#0d1825;
    --border:#2a4057;
    --border-strong:#456581;
    --text:#f5f8fc;
    --muted:#a9b8c8;
    --accent:#72a7ff;
    --teal:#4dd7c6;
    --green:#45d57a;
    --blue:#58a8ff;
    --amber:#ffc35a;
    --red:#ff6671;
    --purple:#ad8cff;
    --line:#4f6e8b;
    --shadow:0 22px 65px rgba(0,0,0,.34);
  }

  *{box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    margin:0;
    min-height:100vh;
    color:var(--text);
    font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.45;
    background:
      linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
      radial-gradient(circle at 15% -10%, rgba(77,215,198,.15), transparent 36%),
      radial-gradient(circle at 85% 0%, rgba(173,140,255,.14), transparent 40%),
      var(--bg);
    background-size:28px 28px,28px 28px,auto,auto,auto;
  }

  button,input{font:inherit;}

  button{touch-action:manipulation;}

  .app{
    width:min(900px,100%);
    margin:0 auto;
    padding:32px 18px 72px;
  }

  .hero{
    text-align:center;
    margin-bottom:20px;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:9px;
    color:var(--teal);
    font-size:.74rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
  }

  .eyebrow::before{
    content:"";
    width:20px;
    height:2px;
    border-radius:999px;
    background:currentColor;
  }

  h1{
    margin:0;
    font-size:clamp(2rem,5vw,3.35rem);
    line-height:1.04;
    letter-spacing:-.045em;
    font-weight:850;
    background:linear-gradient(90deg,#71b8ff 0%,#55dccb 46%,#b69aff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .subtitle{
    max-width:680px;
    margin:11px auto 0;
    color:var(--muted);
    font-size:clamp(.96rem,2vw,1.08rem);
  }

  .toolbar{
    position:sticky;
    top:64px;
    z-index:20;
    display:grid;
    grid-template-columns:auto minmax(150px,1fr) auto;
    gap:12px;
    align-items:center;
    margin:22px 0 14px;
    padding:10px;
    border:1px solid rgba(69,101,129,.72);
    border-radius:16px;
    background:rgba(10,21,33,.86);
    box-shadow:0 14px 38px rgba(0,0,0,.28);
    backdrop-filter:blur(14px);
  }

  .toolbar-btn{
    min-height:42px;
    padding:9px 14px;
    border:1px solid var(--border);
    border-radius:11px;
    color:var(--text);
    background:var(--panel);
    font-size:.82rem;
    font-weight:750;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,transform .18s ease,opacity .18s ease;
  }

  .toolbar-btn:hover:not(:disabled){
    border-color:var(--accent);
    background:var(--panel-strong);
    transform:translateY(-1px);
  }

  .toolbar-btn:active:not(:disabled){transform:translateY(0) scale(.98);}
  .toolbar-btn:disabled{opacity:.32;cursor:not-allowed;}
  .toolbar-btn:focus-visible,
  .answer-btn:focus-visible,
  .result-action:focus-visible,
  summary:focus-visible{
    outline:3px solid rgba(77,215,198,.8);
    outline-offset:3px;
  }

  .progress-wrap{
    min-width:0;
    text-align:center;
  }

  .progress-copy{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
    color:var(--muted);
    font-size:.72rem;
    font-weight:700;
  }

  .progress-track{
    height:7px;
    overflow:hidden;
    border-radius:999px;
    background:#0a121d;
    border:1px solid #26384c;
  }

  .progress-fill{
    width:8%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--teal),var(--accent),var(--purple));
    transition:width .45s cubic-bezier(.2,.75,.25,1);
  }

  .path-summary{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
    min-height:27px;
    margin:0 0 18px;
  }

  .path-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 10px;
    border:1px solid var(--border);
    border-radius:999px;
    background:rgba(17,29,43,.82);
    color:var(--muted);
    font-size:.7rem;
    animation:chipIn .25s ease both;
  }

  .path-chip b{color:var(--text);font-weight:800;}

  @keyframes chipIn{
    from{opacity:0;transform:translateY(-4px);}
    to{opacity:1;transform:translateY(0);}
  }

  .tree{
    position:relative;
    width:100%;
  }

  .stage{
    position:relative;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    transform-origin:top center;
  }

  .stage.is-entering{
    animation:stageIn .5s cubic-bezier(.2,.8,.25,1) both;
  }

  .stage.is-leaving{
    pointer-events:none;
    animation:stageOut .23s ease forwards;
  }

  @keyframes stageIn{
    0%{opacity:0;transform:translateY(-12px) scale(.975);filter:blur(5px);}
    65%{filter:blur(0);}
    100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
  }

  @keyframes stageOut{
    to{opacity:0;transform:translateY(-10px) scale(.98);filter:blur(4px);}
  }

  .node{
    width:100%;
    padding:22px clamp(18px,4vw,30px);
    border:1px solid var(--border);
    border-radius:20px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.025),transparent 45%),
      linear-gradient(180deg,var(--panel-strong),var(--panel));
    box-shadow:var(--shadow);
    text-align:center;
    transition:border-color .25s ease,background .25s ease;
  }

  .node.question{
    border-color:var(--border-strong);
  }

  .node h2{
    margin:0;
    font-size:clamp(1.22rem,3vw,1.65rem);
    line-height:1.23;
    letter-spacing:-.02em;
    font-weight:820;
  }

  .node .helper{
    max-width:660px;
    margin:9px auto 0;
    color:var(--muted);
    font-size:.9rem;
  }

  .node.result{
    text-align:left;
    border-width:2px;
  }

  .node.result h2{
    text-align:center;
  }

  .node.result .helper{
    text-align:center;
  }

  .node.lower{
    border-color:rgba(69,213,122,.72);
    background:linear-gradient(180deg,rgba(69,213,122,.09),var(--panel));
  }

  .node.blue{
    border-color:rgba(88,168,255,.76);
    background:linear-gradient(180deg,rgba(88,168,255,.09),var(--panel));
  }

  .node.amber{
    border-color:rgba(255,195,90,.8);
    background:linear-gradient(180deg,rgba(255,195,90,.09),var(--panel));
  }

  .node.red{
    border-color:rgba(255,102,113,.85);
    background:linear-gradient(180deg,rgba(255,102,113,.11),var(--panel));
  }

  .status-pill{
    display:table;
    margin:0 auto 9px;
    padding:4px 11px;
    border:1px solid currentColor;
    border-radius:999px;
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
    background:rgba(255,255,255,.035);
  }

  .status-pill.lower{color:var(--green);}
  .status-pill.blue{color:var(--blue);}
  .status-pill.amber{color:var(--amber);}
  .status-pill.red{color:var(--red);}

  .answer-zone{
    width:100%;
    padding-top:15px;
  }

  .answer-row{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
  }

  .answer-btn{
    position:relative;
    min-width:112px;
    min-height:46px;
    padding:10px 18px;
    border:1px solid rgba(114,167,255,.7);
    border-radius:13px;
    color:#eaf3ff;
    background:rgba(39,74,112,.7);
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    font-size:.88rem;
    font-weight:820;
    cursor:pointer;
    transition:
      transform .18s cubic-bezier(.2,.8,.25,1),
      opacity .18s ease,
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease;
  }

  .answer-btn:hover:not(:disabled){
    transform:translateY(-2px);
    border-color:#9bc7ff;
    background:rgba(47,88,132,.94);
  }

  .answer-btn:active:not(:disabled){transform:translateY(0) scale(.98);}
  .answer-btn.no{border-color:rgba(77,215,198,.75);background:rgba(24,100,93,.64);}
  .answer-btn.warn{border-color:rgba(255,195,90,.78);background:rgba(112,78,24,.68);}
  .answer-btn.danger{border-color:rgba(255,102,113,.84);background:rgba(117,38,49,.75);}
  .answer-btn.purple{border-color:rgba(173,140,255,.78);background:rgba(78,55,122,.73);}

  .answer-btn.is-selected{
    transform:translateY(-2px);
    border-color:#fff;
    box-shadow:0 0 0 2px rgba(255,255,255,.95),0 11px 26px rgba(0,0,0,.3);
  }

  .answer-btn.is-muted{
    opacity:.38;
    filter:saturate(.45);
  }

  .answer-btn.is-muted:hover{
    opacity:.72;
    filter:saturate(.8);
  }

  .answer-btn:disabled{
    opacity:.34;
    cursor:not-allowed;
    transform:none;
  }

  .connector-wrap{
    position:relative;
    width:100%;
    height:66px;
    overflow:visible;
  }

  .connector-svg{
    display:block;
    width:100%;
    height:66px;
    overflow:visible;
  }

  .connector-path{
    fill:none;
    stroke:url(#connectorGradient);
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-dasharray:180;
    stroke-dashoffset:180;
    filter:drop-shadow(0 0 5px rgba(114,167,255,.35));
    animation:drawLine .55s cubic-bezier(.2,.75,.25,1) forwards;
  }

  .connector-dot{
    fill:var(--accent);
    opacity:0;
    animation:dotIn .22s ease .38s forwards;
  }

  .simple-connector{
    position:relative;
    width:100%;
    height:66px;
  }

  .simple-connector::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:2px;
    height:61px;
    border-radius:999px;
    background:linear-gradient(var(--red),var(--amber),var(--accent));
    transform:translateX(-50%) scaleY(0);
    transform-origin:top;
    animation:growLine .5s cubic-bezier(.2,.75,.25,1) forwards;
  }

  .simple-connector::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 10px rgba(114,167,255,.7);
    transform:translateX(-50%) scale(0);
    animation:dotScale .2s ease .38s forwards;
  }

  @keyframes drawLine{to{stroke-dashoffset:0;}}
  @keyframes dotIn{to{opacity:1;}}
  @keyframes growLine{to{transform:translateX(-50%) scaleY(1);}}
  @keyframes dotScale{to{transform:translateX(-50%) scale(1);}}

  .check-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:17px 0 2px;
    text-align:left;
  }

  .check-item{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-height:54px;
    padding:11px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(8,17,27,.52);
    color:#dce6f1;
    font-size:.83rem;
    font-weight:650;
    cursor:pointer;
    transition:border-color .18s ease,background .18s ease,transform .18s ease;
  }

  .check-item:hover{
    border-color:var(--border-strong);
    background:rgba(18,34,50,.8);
    transform:translateY(-1px);
  }

  .check-item:has(input:checked){
    border-color:rgba(77,215,198,.78);
    background:rgba(77,215,198,.08);
  }

  .check-item input{
    width:19px;
    height:19px;
    margin:1px 0 0;
    flex:0 0 auto;
    accent-color:var(--teal);
    cursor:pointer;
  }

  .check-progress{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
    color:var(--muted);
    font-size:.73rem;
    font-weight:750;
  }

  .check-meter{
    height:6px;
    margin-top:6px;
    overflow:hidden;
    border-radius:999px;
    background:#09121d;
    border:1px solid #26384c;
  }

  .check-meter span{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--teal),var(--accent));
    transition:width .3s ease;
  }

  .facts{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    margin:16px 0 12px;
  }

  .fact{
    padding:12px 8px;
    border:1px solid rgba(255,102,113,.32);
    border-radius:12px;
    background:rgba(255,102,113,.07);
    text-align:center;
    color:#ffe7e9;
    font-size:.82rem;
    font-weight:800;
  }

  .quote-box{
    margin:14px 0 2px;
    padding:13px 15px;
    border-left:5px solid var(--red);
    border-radius:11px;
    background:rgba(255,102,113,.1);
    color:#ffe1e4;
    font-size:.92rem;
    font-weight:800;
  }

  .rec-list{
    margin:15px 0 0;
    padding-left:21px;
    color:#dce5ef;
    font-size:.9rem;
  }

  .rec-list li{margin:6px 0;}

  .step-tag{
    display:inline-block;
    margin-right:7px;
    padding:2px 7px;
    border:1px solid currentColor;
    border-radius:2px 7px 2px 7px;
    font-size:.58rem;
    font-weight:900;
    letter-spacing:.08em;
    line-height:1.35;
    text-transform:uppercase;
    vertical-align:1px;
    white-space:nowrap;
  }
  .step-tag.official{color:var(--teal);background:rgba(52,230,213,.055);}
  .step-tag.guide{color:var(--amber);background:rgba(255,193,77,.055);}

  details.context-details{
    margin-top:14px;
    border:1px solid #35454a;
    border-radius:3px 11px 3px 11px;
    background:rgba(52,230,213,.025);
  }
  details.context-details summary{
    padding:10px 12px;
    color:#c8d4d6;
    font-size:.76rem;
    font-weight:800;
    cursor:pointer;
  }
  details.context-details .context-body{padding:0 12px 12px;}
  details.context-details .context-body p{margin:7px 0;color:var(--muted);font-size:.8rem;}
  details.context-details .rec-list{margin-top:8px;}

  .identity-guide{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:16px 0 2px;
    text-align:left;
  }
  .identity-guide .info-box{margin:0;}

  @media (max-width:700px){
    .identity-guide{grid-template-columns:1fr;}
  }

  .info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:16px 0 0;
  }

  .info-box{
    padding:12px 13px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(8,17,27,.48);
  }

  .info-box .label{
    margin-bottom:4px;
    color:var(--muted);
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .info-box .value{
    font-size:.88rem;
    font-weight:760;
  }

  details.unresolved{
    margin-top:15px;
    border:1px dashed var(--border);
    border-radius:11px;
    background:rgba(114,167,255,.035);
  }

  details.unresolved summary{
    padding:10px 12px;
    color:var(--accent);
    font-size:.76rem;
    font-weight:800;
    cursor:pointer;
  }

  details.unresolved ul{
    margin:0;
    padding:0 28px 12px;
    color:var(--muted);
    font-size:.76rem;
  }

  details.unresolved li{margin:4px 0;}

  .result-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:9px;
    margin-top:16px;
  }

  .result-action{
    min-height:41px;
    padding:8px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--text);
    background:rgba(17,29,43,.94);
    font-size:.79rem;
    font-weight:760;
    cursor:pointer;
    transition:border-color .18s ease,transform .18s ease,background .18s ease;
  }

  .result-action:hover{
    border-color:var(--accent);
    background:var(--panel-strong);
    transform:translateY(-1px);
  }

  .common-faq{
    margin-top:34px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(17,29,43,.72);
  }

  .common-faq summary{
    padding:13px 15px;
    color:var(--teal);
    font-size:.88rem;
    font-weight:800;
    cursor:pointer;
  }

  .faq-list{
    display:grid;
    gap:9px;
    padding:0 15px 15px;
  }

  .faq-item{
    padding:11px 12px;
    border:1px solid rgba(42,64,87,.8);
    border-radius:3px 11px 3px 11px;
    background:rgba(8,17,27,.38);
  }

  .faq-item b{
    display:block;
    margin-bottom:4px;
    color:#e9f7f5;
    font-size:.8rem;
  }

  .faq-item p{
    margin:0;
    color:var(--muted);
    font-size:.76rem;
    line-height:1.5;
  }

  .inline-official-link{
    display:inline-block;
    margin-top:11px;
    padding:8px 11px;
    border:1px solid rgba(52,230,213,.42);
    border-radius:3px 10px 3px 10px;
    background:rgba(52,230,213,.055);
    color:#a8fff6;
    font-size:.76rem;
    font-weight:800;
    text-decoration:none;
  }

  .inline-official-link:hover{
    border-color:var(--teal);
    color:#fff;
  }

  .sources{
    margin-top:34px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(17,29,43,.72);
  }

  .sources summary{
    padding:13px 15px;
    color:var(--accent);
    font-size:.88rem;
    font-weight:800;
    cursor:pointer;
  }

  .source-list{
    display:grid;
    gap:9px;
    padding:0 15px 15px;
  }

  .source-link{
    display:block;
    padding:10px 12px;
    border:1px solid rgba(42,64,87,.8);
    border-radius:10px;
    color:#cddcff;
    background:rgba(8,17,27,.38);
    text-decoration:none;
    font-size:.8rem;
    font-weight:700;
  }

  .source-link:hover{
    border-color:var(--accent);
    color:#fff;
  }

  .disclaimer{
    margin-top:15px;
    padding:13px 15px;
    border:1px solid rgba(255,195,90,.5);
    border-radius:13px;
    background:rgba(255,195,90,.055);
    color:#dfc995;
    text-align:center;
    font-size:.8rem;
    font-weight:650;
  }

  .empty-note{
    color:var(--muted);
    font-size:.72rem;
    text-align:center;
  }

  @media (max-width:700px){
    .app{padding:24px 12px 56px;}
    .toolbar{position:static;grid-template-columns:auto 1fr auto;gap:8px;}
    .toolbar-btn{padding:8px 10px;font-size:.75rem;}
    .progress-copy span:first-child{display:none;}
    .check-list{grid-template-columns:1fr;}
    .facts{grid-template-columns:1fr;}
    .node{padding:19px 15px;}
    .answer-btn{flex:1 1 130px;}
  }

  @media (max-width:430px){
    .toolbar{grid-template-columns:1fr 1fr;}
    .progress-wrap{grid-column:1/-1;grid-row:1;}
    .toolbar-btn{width:100%;}
    .info-grid{grid-template-columns:1fr;}
  }



  /* =========================================================
     ONCE HUMAN THEME PASS
     Cold cyan signal light + warning red + industrial charcoal.
     Decorative only; decision logic remains unchanged.
     ========================================================= */
  :root{
    --bg:#06080b;
    --bg-soft:#0b0f13;
    --panel:#10151a;
    --panel-strong:#151c22;
    --panel-muted:#0b1015;
    --border:#313c45;
    --border-strong:#4d6870;
    --text:#f3f7f7;
    --muted:#a7b4b8;
    --accent:#34e6d5;
    --teal:#34e6d5;
    --green:#67e59b;
    --blue:#4bc6ff;
    --amber:#ffc14d;
    --red:#ff4659;
    --purple:#b08cff;
    --line:#55666d;
    --shadow:0 22px 70px rgba(0,0,0,.48);
  }

  body{
    position:relative;
    background:
      radial-gradient(circle at 13% 3%, rgba(52,230,213,.15), transparent 29%),
      radial-gradient(circle at 88% 7%, rgba(255,70,89,.13), transparent 28%),
      radial-gradient(circle at 50% 78%, rgba(52,230,213,.055), transparent 38%),
      linear-gradient(135deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 0/26px 26px,
      linear-gradient(315deg, rgba(255,255,255,.012) 25%, transparent 25%) 0 0/26px 26px,
      var(--bg);
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.24;
    background:
      repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
      linear-gradient(90deg, transparent 0 49.9%, rgba(52,230,213,.025) 50%, transparent 50.1%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%);
  }

  .app{width:min(940px,100%);}

  .hero{
    position:relative;
    padding:24px 18px 22px;
    margin-bottom:18px;
    overflow:hidden;
    border:1px solid rgba(78,102,109,.5);
    border-radius:4px 20px 4px 20px;
    background:
      linear-gradient(90deg, rgba(52,230,213,.055), transparent 32%, transparent 68%, rgba(255,70,89,.055)),
      rgba(10,14,18,.68);
  }

  .hero::before,
  .hero::after{
    content:"";
    position:absolute;
    width:92px;
    height:3px;
    top:0;
  }

  .hero::before{left:0;background:linear-gradient(90deg,var(--teal),transparent);}
  .hero::after{right:0;background:linear-gradient(270deg,var(--red),transparent);}

  .eyebrow{
    color:#d8ffff;
    letter-spacing:.18em;
    font-size:.69rem;
    text-shadow:0 0 14px rgba(52,230,213,.28);
  }

  .eyebrow::before{display:none;}

  .eyebrow-mark{
    position:relative;
    width:15px;
    height:15px;
    display:inline-block;
    border:1px solid var(--teal);
    transform:rotate(45deg);
    box-shadow:0 0 12px rgba(52,230,213,.35);
  }

  .eyebrow-mark::after{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    top:4px;
    left:4px;
    background:var(--red);
    box-shadow:0 0 8px rgba(255,70,89,.65);
  }

  h1{
    letter-spacing:-.055em;
    font-weight:900;
    text-transform:uppercase;
    background:linear-gradient(92deg,#f3fbfb 0%,#9efff4 30%,#34e6d5 53%,#f1f7f7 69%,#ff6674 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 0 18px rgba(52,230,213,.09));
  }

  .subtitle{color:#b6c1c4;}

  .toolbar{
    border-color:rgba(70,91,98,.82);
    border-radius:3px 14px 3px 14px;
    background:rgba(8,12,16,.9);
    box-shadow:0 14px 40px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.025);
  }

  .toolbar::before{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    top:0;
    height:1px;
    background:linear-gradient(90deg,var(--teal),transparent 42%,transparent 58%,var(--red));
    opacity:.8;
  }

  .toolbar-btn{
    border-radius:3px 10px 3px 10px;
    border-color:#344148;
    background:#10161b;
    letter-spacing:.02em;
  }

  .toolbar-btn:hover:not(:disabled){
    border-color:var(--teal);
    background:#151d22;
    box-shadow:inset 3px 0 var(--teal);
  }

  .progress-track{
    background:#080c10;
    border-color:#27333a;
    border-radius:2px;
  }

  .progress-fill{
    border-radius:1px;
    background:linear-gradient(90deg,var(--teal) 0%,#d7fffb 52%,var(--red) 100%);
    box-shadow:0 0 13px rgba(52,230,213,.35);
  }

  .path-chip{
    border-radius:3px 10px 3px 10px;
    background:#0e1419;
    border-color:#344149;
  }

  .path-chip::before{
    content:"//";
    color:var(--teal);
    font-weight:900;
    letter-spacing:-.08em;
  }

  .node{
    position:relative;
    overflow:hidden;
    border-radius:4px 20px 4px 20px;
    border-color:#344149;
    background:
      linear-gradient(145deg,rgba(255,255,255,.026),transparent 37%),
      linear-gradient(180deg,#151c22,#0e1419);
    box-shadow:0 24px 64px rgba(0,0,0,.42);
  }

  .node::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:86px;
    height:2px;
    background:linear-gradient(90deg,var(--teal),transparent);
    opacity:.8;
  }

  .node::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:52px;
    height:2px;
    background:linear-gradient(270deg,var(--red),transparent);
    opacity:.65;
  }

  .node.question{
    border-color:#49636a;
    box-shadow:0 22px 66px rgba(0,0,0,.42),0 0 0 1px rgba(52,230,213,.03) inset;
  }

  .node.question h2::before{
    content:"QUESTION // ";
    color:var(--teal);
    font-size:.65em;
    letter-spacing:.08em;
    font-weight:900;
  }

  .node.result.lower::before{background:linear-gradient(90deg,var(--green),transparent);}
  .node.result.blue::before{background:linear-gradient(90deg,var(--blue),transparent);}
  .node.result.amber::before{background:linear-gradient(90deg,var(--amber),transparent);}
  .node.result.red::before{background:linear-gradient(90deg,var(--red),transparent);width:125px;}

  .node.red{
    border-color:rgba(255,70,89,.82);
    background:
      linear-gradient(135deg,rgba(255,70,89,.105),transparent 35%),
      linear-gradient(180deg,#1b161a,#111317);
  }

  .node.amber{
    border-color:rgba(255,193,77,.76);
    background:linear-gradient(180deg,rgba(255,193,77,.07),#101519);
  }

  .node.blue{
    border-color:rgba(75,198,255,.7);
    background:linear-gradient(180deg,rgba(75,198,255,.065),#101519);
  }

  .node.lower{
    border-color:rgba(103,229,155,.68);
    background:linear-gradient(180deg,rgba(103,229,155,.06),#101519);
  }

  .status-pill{
    border-radius:2px 9px 2px 9px;
    background:#0b1014;
    letter-spacing:.12em;
  }

  .answer-btn{
    overflow:hidden;
    border-radius:3px 12px 3px 12px;
    border-color:rgba(52,230,213,.58);
    color:#eafffd;
    background:linear-gradient(180deg,#132126,#0e171b);
    box-shadow:0 8px 22px rgba(0,0,0,.3),inset 2px 0 rgba(52,230,213,.35);
    text-transform:uppercase;
    letter-spacing:.055em;
    font-size:.8rem;
  }

  .answer-btn::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-38%;
    width:28%;
    opacity:0;
    transform:skewX(-22deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  }

  .answer-btn:hover:not(:disabled){
    border-color:#87fff5;
    color:#fff;
    background:#152429;
    box-shadow:0 10px 28px rgba(0,0,0,.36),0 0 0 1px rgba(52,230,213,.12) inset;
  }

  .answer-btn:hover:not(:disabled)::after{
    opacity:1;
    animation:signalSweep .65s ease forwards;
  }

  .answer-btn.no{
    border-color:rgba(103,229,155,.65);
    background:linear-gradient(180deg,rgba(28,83,55,.64),rgba(14,28,21,.92));
    box-shadow:0 8px 22px rgba(0,0,0,.3),inset 2px 0 rgba(103,229,155,.42);
  }

  .answer-btn.warn{
    border-color:rgba(255,193,77,.72);
    background:linear-gradient(180deg,rgba(89,64,20,.76),rgba(28,23,14,.94));
    box-shadow:0 8px 22px rgba(0,0,0,.3),inset 2px 0 rgba(255,193,77,.46);
  }

  .answer-btn.danger{
    border-color:rgba(255,70,89,.78);
    background:linear-gradient(180deg,rgba(95,28,39,.8),rgba(30,13,17,.96));
    box-shadow:0 8px 22px rgba(0,0,0,.3),inset 2px 0 rgba(255,70,89,.48);
  }

  .answer-btn.purple{
    border-color:rgba(176,140,255,.7);
    background:linear-gradient(180deg,rgba(67,50,101,.78),rgba(22,17,31,.96));
  }

  .answer-btn.is-selected{
    border-color:#eafffd;
    box-shadow:
      0 0 0 1px #d9fffb,
      0 0 24px rgba(52,230,213,.22),
      inset 3px 0 var(--teal);
  }

  .connector-path{
    stroke-width:2.7;
    filter:drop-shadow(0 0 6px rgba(52,230,213,.35));
  }

  .connector-dot{
    fill:var(--red);
    filter:drop-shadow(0 0 6px rgba(255,70,89,.7));
  }

  .simple-connector::before{
    background:linear-gradient(var(--red),#f3f7f7 50%,var(--teal));
    box-shadow:0 0 8px rgba(52,230,213,.16);
  }

  .simple-connector::after{
    background:var(--red);
    box-shadow:0 0 11px rgba(255,70,89,.7);
  }

  .check-item{
    border-radius:3px 11px 3px 11px;
    background:#0c1217;
    border-color:#303b43;
  }

  .check-item:hover{background:#121a20;}
  .check-item:has(input:checked){
    border-color:rgba(52,230,213,.72);
    background:rgba(52,230,213,.06);
    box-shadow:inset 3px 0 rgba(52,230,213,.55);
  }

  .check-item input{accent-color:var(--teal);}

  .check-meter{
    border-radius:2px;
    background:#080c10;
    border-color:#27333a;
  }

  .check-meter span{
    border-radius:1px;
    background:linear-gradient(90deg,var(--teal),#e5fffc,var(--red));
  }

  .facts{gap:8px;}
  .fact{
    border-radius:3px 11px 3px 11px;
    border-color:rgba(255,70,89,.38);
    background:rgba(255,70,89,.07);
    color:#ffe4e7;
  }

  .quote-box{
    position:relative;
    overflow:hidden;
    border-left-color:var(--red);
    border-radius:2px 12px 2px 12px;
    background:linear-gradient(90deg,rgba(255,70,89,.13),rgba(255,70,89,.035));
    color:#fff0f2;
  }

  .quote-box::after{
    content:"OFFICIAL WARNING";
    display:block;
    margin-top:8px;
    color:rgba(255,125,136,.72);
    font-size:.62rem;
    font-style:normal;
    letter-spacing:.13em;
  }

  .info-box,
  .result-action,
  .source-link,
  details.unresolved,
  .sources,
  .disclaimer{
    border-radius:3px 11px 3px 11px;
  }

  .info-box{background:#0c1217;border-color:#313d45;}

  details.unresolved{
    background:rgba(52,230,213,.025);
    border-color:#35454a;
  }
  details.unresolved summary{color:#76eee3;}

  .result-action{
    background:#0d1318;
    border-color:#344149;
  }
  .result-action:hover{
    border-color:var(--teal);
    background:#141d22;
    box-shadow:inset 3px 0 var(--teal);
  }

  .sources{
    background:rgba(10,14,18,.82);
    border-color:#344149;
  }
  .sources summary{color:var(--teal);}
  .source-link{
    color:#c9f8f3;
    background:#0c1217;
    border-color:#303b43;
  }
  .source-link:hover{border-color:var(--teal);color:#fff;}

  .disclaimer{
    border-color:rgba(255,193,77,.5);
    background:rgba(255,193,77,.045);
    color:#e8d09a;
  }

  @keyframes signalSweep{
    from{left:-38%;}
    to{left:118%;}
  }

  @keyframes stageIn{
    0%{opacity:0;transform:translateY(-12px) scale(.985);filter:blur(4px);clip-path:inset(0 0 75% 0);}
    55%{opacity:1;filter:blur(0);clip-path:inset(0 0 0 0);}
    72%{transform:translateY(2px) scale(1.002);}
    100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);clip-path:inset(0 0 0 0);}
  }

  @keyframes chipIn{
    0%{opacity:0;transform:translateX(-6px);}
    60%{opacity:1;transform:translateX(2px);}
    100%{opacity:1;transform:translateX(0);}
  }

  @media (max-width:700px){
    .hero{padding:20px 12px 18px;}
    .node.question h2::before{display:block;margin-bottom:5px;}
  }



  /* =========================================================
     MOTION PASS
     Choreographed reveals, energised connectors, tactile input.
     Palette, layout and decision logic unchanged.
     ========================================================= */

  .stage{will-change:transform,opacity;}

  /* ---------- stage entrance ---------- */
  @keyframes stageIn{
    0%{opacity:0;transform:translateY(-16px) scale(.984);clip-path:inset(0 0 84% 0);}
    58%{opacity:1;clip-path:inset(0 0 0 0);}
    76%{transform:translateY(3px) scale(1.004);}
    100%{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0);}
  }

  .stage.is-entering{
    animation:stageIn .62s cubic-bezier(.22,.9,.28,1) both;
  }

  @keyframes stageOut{
    to{opacity:0;transform:translateY(-12px) scale(.975);}
  }

  /* ---------- official warning scan ---------- */
  .quote-box{
    background:
      linear-gradient(100deg,transparent 22%,rgba(255,255,255,.14) 40%,transparent 58%) -70% 0/230% 100% no-repeat,
      linear-gradient(90deg,rgba(255,70,89,.13),rgba(255,70,89,.035));
    animation:quoteScan 6s ease-in-out 1.2s infinite;
  }

  @keyframes quoteScan{
    0%{background-position:-70% 0,0 0;}
    55%,100%{background-position:200% 0,0 0;}
  }

  /* ---------- cascading content reveal ---------- */
  @keyframes rvRise{
    from{opacity:0;transform:translateY(14px);}
    to{opacity:1;transform:translateY(0);}
  }

  @keyframes rvPill{
    0%{opacity:0;transform:translateY(-7px) scale(.84);}
    62%{opacity:1;transform:translateY(0) scale(1.05);}
    100%{opacity:1;transform:translateY(0) scale(1);}
  }

  @keyframes rvWipe{
    from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(4px);}
    to{opacity:1;clip-path:inset(0 -6% 0 0);transform:translateY(0);}
  }

  @keyframes rvFact{
    from{opacity:0;transform:perspective(700px) rotateX(-34deg) translateY(12px);}
    to{opacity:1;transform:perspective(700px) rotateX(0deg) translateY(0);}
  }

  @keyframes rvBtn{
    0%{opacity:0;transform:translateY(14px) scale(.94);}
    100%{opacity:1;transform:translateY(0) scale(1);}
  }

  .rv{
    animation:rvRise .44s cubic-bezier(.2,.85,.28,1) both;
    animation-delay:calc(90ms + var(--d,0) * 38ms);
  }

  .rv.rv-pill{animation-name:rvPill;animation-duration:.42s;}
  .rv.rv-wipe{animation-name:rvWipe;animation-duration:.52s;}
  .rv.rv-fact{animation-name:rvFact;animation-duration:.5s;}
  .rv.rv-btn{animation-name:rvBtn;animation-duration:.44s;}

  /* ---------- active question breathing ---------- */
  @keyframes activePulse{
    0%,100%{
      box-shadow:0 22px 66px rgba(0,0,0,.42),0 0 0 1px rgba(52,230,213,.03) inset;
      border-color:#49636a;
    }
    50%{
      box-shadow:0 22px 66px rgba(0,0,0,.42),0 0 34px -10px rgba(52,230,213,.5),0 0 0 1px rgba(52,230,213,.16) inset;
      border-color:#5d8b91;
    }
  }

  .node.question{transition:border-color .35s ease,box-shadow .35s ease;}
  .node.question.is-active{animation:activePulse 3.6s ease-in-out 1s infinite;}

  /* ---------- result blooms ---------- */
  @keyframes hazardBloom{
    0%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 0 0 rgba(255,70,89,.42);}
    45%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 48px -4px rgba(255,70,89,.36);}
    100%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 0 0 rgba(255,70,89,0);}
  }

  @keyframes safeBloom{
    0%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 0 0 rgba(103,229,155,.4);}
    45%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 46px -6px rgba(103,229,155,.32);}
    100%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 0 0 rgba(103,229,155,0);}
  }

  @keyframes signalBloom{
    0%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 0 0 rgba(75,198,255,.4);}
    45%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 46px -6px rgba(75,198,255,.32);}
    100%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 0 0 rgba(75,198,255,0);}
  }

  @keyframes cautionBloom{
    0%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 0 0 rgba(255,193,77,.4);}
    45%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 46px -6px rgba(255,193,77,.32);}
    100%{box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 0 0 rgba(255,193,77,0);}
  }

  .node.result.red{animation:hazardBloom 1.7s ease-out .15s 2;}
  .node.result.lower{animation:safeBloom 1.7s ease-out .15s 1;}
  .node.result.blue{animation:signalBloom 1.7s ease-out .15s 1;}
  .node.result.amber{animation:cautionBloom 1.7s ease-out .15s 1;}

  /* ---------- answer buttons: ripple, lock-in, recede ---------- */
  .answer-btn{
    transition:
      transform .2s cubic-bezier(.2,.85,.28,1),
      opacity .22s ease,
      filter .28s ease,
      border-color .2s ease,
      background .2s ease,
      box-shadow .2s ease;
  }

  .answer-btn::before{
    content:"";
    position:absolute;
    top:var(--ry,50%);
    left:var(--rx,50%);
    width:14px;
    height:14px;
    margin:-7px 0 0 -7px;
    border-radius:50%;
    opacity:0;
    transform:scale(0);
    pointer-events:none;
    background:radial-gradient(circle,rgba(234,255,253,.8),rgba(52,230,213,.28) 58%,transparent 74%);
  }

  .answer-btn.is-pressed::before{animation:ripple .62s cubic-bezier(.15,.75,.3,1);}

  @keyframes ripple{
    0%{opacity:.9;transform:scale(0);}
    100%{opacity:0;transform:scale(24);}
  }

  .answer-btn.is-locking{animation:lockPulse .72s cubic-bezier(.2,.8,.25,1);}

  @keyframes lockPulse{
    0%{box-shadow:0 0 0 0 rgba(52,230,213,.6),inset 3px 0 var(--teal);transform:translateY(-2px) scale(1.035);}
    100%{box-shadow:0 0 0 18px rgba(52,230,213,0),inset 3px 0 var(--teal);transform:translateY(-2px) scale(1);}
  }

  .answer-btn.is-muted{
    opacity:.3;
    filter:saturate(.35);
    transform:scale(.93);
  }

  .answer-btn.is-muted:hover:not(:disabled){
    opacity:.85;
    filter:saturate(.92);
    transform:scale(.99) translateY(-1px);
  }

  .answer-btn:disabled{filter:grayscale(.45) saturate(.5);}

  .answer-btn.is-unlocked{animation:unlockPop .85s cubic-bezier(.2,.8,.25,1);}

  @keyframes unlockPop{
    0%{transform:scale(.955);box-shadow:0 0 0 0 rgba(52,230,213,.55);}
    42%{transform:scale(1.035);}
    100%{transform:scale(1);box-shadow:0 0 0 20px rgba(52,230,213,0);}
  }

  /* ---------- connectors ---------- */
  .connector-path{
    stroke-dasharray:none;
    stroke-dashoffset:0;
    animation:none;
    transition:opacity .45s ease;
  }

  .connector-pulse{
    fill:#eafffd;
    filter:drop-shadow(0 0 7px rgba(52,230,213,.9));
    transition:opacity .45s ease;
  }

  .connector-wrap:not(.is-latest) .connector-path{opacity:.42;}
  .connector-wrap:not(.is-latest) .connector-pulse{opacity:0;}

  .simple-connector::before{
    background:
      linear-gradient(180deg,transparent,rgba(255,255,255,.92),transparent) 0 -60%/100% 48% no-repeat,
      linear-gradient(var(--red),#f3f7f7 50%,var(--teal));
    box-shadow:0 0 9px rgba(52,230,213,.18);
    animation:
      growLine .5s cubic-bezier(.2,.75,.25,1) var(--cd,0s) forwards,
      flowDown 2.1s linear calc(var(--cd,0s) + .5s) infinite;
  }

  .simple-connector::after{
    animation:dotScale .24s cubic-bezier(.2,.8,.25,1) calc(var(--cd,0s) + .42s) forwards;
  }

  @keyframes flowDown{
    0%{background-position:0 -60%,0 0;}
    100%{background-position:0 165%,0 0;}
  }

  /* ---------- progress + path chips ---------- */
  .progress-fill{position:relative;overflow:hidden;}

  .progress-fill::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    transform:translateX(-130%);
    animation:barSweep 3s ease-in-out 1.2s infinite;
  }

  @keyframes barSweep{
    0%{transform:translateX(-130%);}
    55%,100%{transform:translateX(330%);}
  }

  .progress-track{transform-origin:center;}
  .progress-track.is-bumped{animation:trackBump .5s cubic-bezier(.2,.8,.25,1);}

  @keyframes trackBump{
    0%{transform:scaleY(1);}
    38%{transform:scaleY(1.75);}
    100%{transform:scaleY(1);}
  }

  .path-chip{transition:opacity .26s ease,transform .26s ease;}
  .path-chip.is-out{opacity:0;transform:translateY(-7px) scale(.9);}

  /* ---------- checklists ---------- */
  .check-item{transition:border-color .2s ease,background .2s ease,transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s ease;}
  .check-item:has(input:checked){animation:checkPop .4s cubic-bezier(.2,.8,.25,1);}

  @keyframes checkPop{
    0%{transform:scale(1);}
    34%{transform:scale(1.035);}
    100%{transform:scale(1);}
  }

  .check-meter span{transition:width .45s cubic-bezier(.2,.8,.25,1),box-shadow .35s ease;}
  .check-meter.is-full span{box-shadow:0 0 14px rgba(52,230,213,.6);}
  .check-progress [data-check-count]{transition:color .25s ease;}
  .check-progress.is-full [data-check-count]{color:var(--teal);}

  /* ---------- misc polish ---------- */
  .result-action,
  .toolbar-btn,
  .source-link{transition:border-color .2s ease,transform .2s cubic-bezier(.2,.85,.28,1),background .2s ease,box-shadow .2s ease,color .2s ease;}

  .node{transition:border-color .3s ease,background .3s ease,box-shadow .35s ease;}


  @media print{
    body{background:#fff;color:#111;}
    .hero,.toolbar,.path-summary,.sources,.disclaimer,.answer-zone,.connector-wrap{display:none!important;}
    .app{width:100%;padding:0;}
    .tree>.stage:not(:last-child){display:none!important;}
    .node{box-shadow:none;background:#fff;color:#111;border-color:#444;}
    .node *{color:#111!important;}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      transition-duration:.01ms!important;
      scroll-behavior:auto!important;
    }
  }

  .eu-topbar{
    position:sticky;top:0;z-index:60;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    height:52px;padding:0 clamp(13px,3vw,22px);
    border-bottom:1px solid rgba(168,120,255,.18);
    background:rgba(10,4,22,.86);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    font-family:"Inter","Segoe UI",system-ui,sans-serif;
  }
  .eu-topbar a{text-decoration:none;}
  .eu-back{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 13px 7px 10px;
    border:1px solid rgba(168,120,255,.18);
    border-radius:9px;
    background:rgba(255,255,255,.025);
    color:#E8DFF5;font-size:.85rem;font-weight:650;
    transition:color .2s,background .2s,border-color .2s,box-shadow .2s,transform .2s;
  }
  .eu-back:hover{
    color:#F6F1FF;
    background:rgba(255,91,225,.08);
    border-color:rgba(255,91,225,.34);
    box-shadow:0 0 16px rgba(157,92,255,.12);
    transform:translateY(-1px);
  }
  .eu-back svg{transition:transform .25s cubic-bezier(.22,1,.36,1);}
  .eu-back:hover svg{transform:translateX(-3px);}
  .eu-brand{
    display:flex;align-items:baseline;gap:6px;
    font-family:"Archivo","Segoe UI",system-ui,sans-serif;
    font-weight:800;font-size:.78rem;letter-spacing:.16em;
  }
  .eu-brand span{color:#F6F1FF;}
  .eu-brand em{
    font-style:normal;
    background:linear-gradient(100deg,#FF5BE1,#9D5CFF 45%,#4CA8FF 78%,#45E5F0);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .eu-yt{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 13px;border-radius:9px;
    border:1px solid rgba(255,120,235,.34);
    background:linear-gradient(180deg,rgba(255,91,225,.16),rgba(157,92,255,.09));
    color:#F6F1FF;font-size:.8rem;font-weight:600;
    transition:box-shadow .25s,border-color .25s,transform .25s cubic-bezier(.22,1,.36,1);
  }
  .eu-yt:hover{transform:translateY(-1px);border-color:#FF5BE1;box-shadow:0 0 20px rgba(255,91,225,.34);}
  .eu-topbar :focus-visible{outline:2px solid #45E5F0;outline-offset:2px;}
  @media (max-width:560px){ .eu-brand{display:none;} }
  @media (prefers-reduced-motion:reduce){
    .eu-topbar *{transition-duration:.001ms !important;}
  }