:root{
    --bg:#FAFBF7;
    --ink:#122019;
    --ink-soft:#5b6b62;
    --green-deep:#173F2E;
    --green:#2E7D5B;
    --green-bright:#6FCF97;
    --green-glow:rgba(111,207,151,.35);
    --red:#E2574C;
    --red-soft:#F7DCD9;
    --green-soft:#E3F3E8;
    --line:#DCE5DE;
    --card:#FFFFFF;
    --shadow:0 20px 50px -22px rgba(23,63,46,.35);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:#EFEEE7;font-family:'Inter',sans-serif;}
  .app{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;padding:24px;
  }
  @media(max-width:768px){
    .app{
        min-height:30vh;
        padding:0;
        margin-bottom:10px
    }
  }
  .player{
    width:100%;max-width:960px;
    background:var(--card);
    border-radius:20px;
    box-shadow:var(--shadow);
    overflow:hidden;
    border:1px solid var(--line);
  }
  .stage{
    position:relative;width:100%;aspect-ratio:16/9;
    background:
      radial-gradient(120% 140% at 15% -10%, #F1F7F1 0%, var(--bg) 55%);
    overflow:hidden;
    container-type:inline-size;
    container-name:stage;
  }
  .scene{
    position:absolute;inset:0;
    opacity:0;pointer-events:none;
    transition:opacity .6s ease;
  }
  .scene.active{opacity:1;}

  /* ---------- shared elements ---------- */
  .el{position:absolute;}
  .card{
    background:var(--card);border:1px solid var(--line);
    border-radius:12px;box-shadow:0 10px 24px -14px rgba(23,63,46,.25);
  }
  .icon{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .icon-fill{fill:currentColor;stroke:none;}
  .avatar{
    width:9%;aspect-ratio:1/1;border-radius:50%;
    background:var(--green-soft);color:var(--green-deep);
    display:flex;align-items:center;justify-content:center;padding:22%;
    border:1.5px solid var(--line);
  }
  .avatar.red{background:var(--red-soft);color:#8f2e26;}
  .label{
    font-family:'Space Grotesk',sans-serif;font-weight:600;
    color:var(--ink);letter-spacing:.01em;white-space:nowrap;
  }
  .sublabel{font-family:'Inter',sans-serif;color:var(--ink-soft);white-space:nowrap;}
  .pill{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--green-soft);color:var(--green-deep);
    border-radius:999px;font-family:'Space Grotesk',sans-serif;font-weight:600;
    white-space:nowrap;
  }
  .pill.red{background:var(--red-soft);color:#8f2e26;}
  .routepath{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
  .routepath path{fill:none;stroke:var(--line);stroke-width:1.4;}
  .routepath path.draw{stroke:var(--green);stroke-dasharray:4 3;}
  .routepath path.draw.red{stroke:var(--red);}
  .moving{position:absolute;transform:translate(-50%,-50%);transition:none;}
  .fade-item{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;}
  .fade-item.show{opacity:1;transform:translateY(0);}
  .scale-item{opacity:0;transform:scale(.85);transition:opacity .55s ease,transform .55s ease;}
  .scale-item.show{opacity:1;transform:scale(1);}

  /* ---------- scene 1 ---------- */
  #scene1 .house{width:11%;}
  #scene1 .jacket-tag{
    top:20%;left:38%;width:16%;padding:2% 3%;font-size:1.7cqw;
  }

  /* ---------- scene 2 ---------- */
  #scene2 .node{width:9%;}
  #scene2 .node-label{font-size:1.35cqw;top:63%;text-align:center;transform:translateX(-50%);}
  #scene2 .timerbox{
    top:8%;right:6%;padding:10px 16px;font-family:'Space Grotesk',sans-serif;
    font-weight:700;font-size:2.2cqw;color:#8f2e26;background:var(--red-soft);
    border-radius:12px;
  }
  #scene2 .reject{
    width:6%;top:24%;color:#8f2e26;
  }

  /* ---------- scene 3 ---------- */
  #scene3{background:#fff;}
  #scene3 .wipe{
    position:absolute;inset:0;background:var(--red);
    transform:scaleX(0);transform-origin:left;
  }
  #scene3 .wipe2{
    position:absolute;inset:0;background:var(--green-deep);
    transform:scaleX(0);transform-origin:left;
  }
  #scene3 .logo{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:10px;color:#fff;opacity:0;transform:scale(.8);
    transition:opacity .5s ease, transform .5s ease;
  }
  #scene3 .logo.show{opacity:1;transform:scale(1);}
  #scene3 .logo .mark{
    width:64px;height:64px;border-radius:16px;background:#fff;color:var(--green-deep);
    display:flex;align-items:center;justify-content:center;
  }
  #scene3 .logo .word{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;letter-spacing:.02em;}

  /* ---------- scene 4 ---------- */
  #scene4 .stepcard{
    position:absolute;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 14px 30px -16px rgba(23,63,46,.3);
    padding:2.2% 2.6%;
  }
  #scene4 .stepcard .icon-wrap{width:22px;height:22px;color:var(--green);margin-bottom:6px;}
  #scene4 .stepcard h4{margin:0 0 2px 0;font-family:'Space Grotesk',sans-serif;font-size:1.5cqw;color:var(--ink);}
  #scene4 .stepcard p{margin:0;font-size:1.15cqw;color:var(--ink-soft);}
  #scene4 .branch-label{
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.7cqw;
  }

  /* ---------- scene 5 ---------- */
  #scene5{background:var(--bg);}
  .compare{
    position:absolute;inset:6% 5% 6% 5%;
    display:grid;grid-template-columns:1fr 1fr;gap:3%;
  }
  .compare .col{border-radius:16px;padding:4% 5%;display:flex;flex-direction:column;gap:4%;}
  .compare .col.trad{background:var(--red-soft);}
  .compare .col.cv{background:var(--green-soft);}
  .compare h3{
    margin:0 0 2%;font-family:'Space Grotesk',sans-serif;font-size:2cqw;
  }
  .compare .col.trad h3{color:#8f2e26;}
  .compare .col.cv h3{color:var(--green-deep);}
  .compare .row{
    display:flex;align-items:center;gap:8px;font-size:1.55cqw;font-family:'Inter';
  }
  .compare .col.trad .row{color:#7a2c25;}
  .compare .col.cv .row{color:#1c4a37;}
  .compare .row .dot{width:7px;height:7px;border-radius:50%;flex:none;}
  .compare .col.trad .dot{background:#c14b41;}
  .compare .col.cv .dot{background:var(--green);}

  /* ---------- scene 6 ---------- */
  #scene6{background:linear-gradient(180deg,#173F2E 0%, #0F2C20 100%);color:#fff;}
  #scene6 .closing-logo{
    position:absolute;top:9%;left:0;right:0;text-align:center;
  }
  #scene6 .closing-logo .word{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.6cqw;letter-spacing:.02em;}
  #scene6 .tagline{
    position:absolute;top:19%;left:0;right:0;text-align:center;
    font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1.7cqw;color:#CFEBDC;
  }
  #scene6 .blob{
    position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
    width:46%;opacity:.5;
  }
  #scene6 .hub-dot{position:absolute;width:2.2%;aspect-ratio:1/1;}
  #scene6 .hub-dot .core{width:100%;height:100%;border-radius:50%;background:var(--green-bright);}
  #scene6 .hub-dot .ring{
    position:absolute;inset:-60%;border-radius:50%;border:1.5px solid var(--green-bright);opacity:0;
  }
  #scene6 .hub-name{
    position:absolute;font-size:1.15cqw;font-family:'Inter';color:#CFEBDC;
    white-space:nowrap;transform:translate(-50%,6px);top:100%;left:50%;
  }
  #scene6 .stats{
    position:absolute;bottom:8%;left:0;right:0;
    display:flex;justify-content:center;gap:8%;
  }
  #scene6 .stat{text-align:center;}
  #scene6 .stat .num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.4cqw;color:var(--green-bright);}
  #scene6 .stat .lbl{font-size:1.15cqw;color:#B9D9C8;}

  /* ---------- caption + controls ---------- */
  .captionbar{
    min-height:52px;display:flex;align-items:center;justify-content:center;
    padding:10px 24px;background:#fff;border-top:1px solid var(--line);
  }
  .captionbar p{
    margin:0;text-align:center;font-family:'Space Grotesk',sans-serif;
    font-size:15px;color:var(--ink);
  }
  .controls{
    display:flex;align-items:center;gap:14px;
    padding:12px 20px 18px;background:#fff;
  }
  #playBtn{
    width:38px;height:38px;flex:none;border-radius:50%;border:none;
    background:var(--green-deep);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:14px;
  }
  #playBtn:hover{background:var(--green);}
  .scrubwrap{flex:1;}
  .scrub{
    position:relative;height:6px;border-radius:999px;background:var(--line);cursor:pointer;
  }
  .scrubfill{
    position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--green);width:0%;
  }
  .scrubhead{
    position:absolute;top:50%;width:12px;height:12px;border-radius:50%;
    background:var(--green-deep);transform:translate(-50%,-50%);left:0%;
    box-shadow:0 0 0 3px rgba(23,63,46,.15);
  }
  .chapters{position:absolute;inset:0;}
  .chapters .tick{
    position:absolute;top:50%;width:2px;height:10px;background:#fff;
    transform:translate(-50%,-50%);opacity:.7;
  }
  .time{
    font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:13px;
    font-family:'Space Grotesk',sans-serif;flex:none;
  }
  .credit{
    text-align:center;font-size:12px;color:var(--ink-soft);padding:0 0 16px;
    font-family:'Inter';
  }

  @container (max-width: 1px){}