:root {
  --g:    #5baa3e;
  --g-dk: #3d8228;
  --g-lt: #eef7e8;
  --g-bar:#8dc63f;
  --bg:   #f5f2e8;
  --dk:   #3a2a00;
  --tx:   #5a4a20;
  --pw:   100%;
  --ph:   auto;
}
*{margin:0;padding:0;box-sizing:border-box}


/* ══════════════════
   SECTION
══════════════════ */
.cs{max-width:860px;margin:0 auto;padding:48px 16px 52px;position:relative}

/* ── HEADER ── */
.sh{text-align:center;margin-bottom:36px;min-height:76px;position:relative}
.st{
  font-size:32px;font-weight:900;color:var(--dk);
  margin-bottom:8px;line-height:1.3;
  transition:opacity .28s ease,transform .28s ease;
}
.ss{
  font-size:22px;font-weight:500;color:var(--tx);line-height:1.65;
  transition:opacity .28s ease,transform .28s ease;
}
.sh.out .st,.sh.out .ss{opacity:0;transform:translateY(-8px)}

/* ── STAGE ── */
.stage{display:flex;align-items:center;justify-content:center;gap:32px}

/* ── ARROWS ── */
.ab{
  flex-shrink:0;width:56px;height:56px;border-radius:50%;
  background:var(--g);border:none;color:#fff;
  font-size:35px;cursor:pointer;
  display:flex;justify-content:center;
  box-shadow:0 4px 16px rgba(91,170,62,.35);
  transition:background .18s,transform .15s,box-shadow .18s;
  position:relative;z-index:2;
  user-select:none;
LINE-HEIGHT: 50PX;
    margin-top: -30%;
}
.ab:hover{background:var(--g-dk);transform:scale(1.07);box-shadow:0 6px 20px rgba(91,170,62,.45)}
.ab:active{transform:scale(.95)}
.ab:disabled{background:#c5c5b0;box-shadow:none;cursor:default;transform:none}

/* ── PHONE ── */
.pw{position:relative;width:var(--pw);flex-shrink:0}
.pf{
  width:100%;height:auto;

  padding:14px 10px;

  position:relative;overflow:hidden;
}
/* notch */

/* side button */
.pf::after{
  content:'';position:absolute;
  right:-3px;top:108px;
  width:3px;height:54px;
  background:#3a3a3a;border-radius:0 2px 2px 0;
}
/* vol buttons */
.pf-vol{
  position:absolute;left:-3px;top:90px;
  width:3px;height:34px;background:#3a3a3a;border-radius:2px 0 0 2px;
}
.pf-vol2{
  position:absolute;left:-3px;top:136px;
  width:3px;height:34px;background:#3a3a3a;border-radius:2px 0 0 2px;
}

.ps{width:100%;height:100%;overflow:hidden;position:relative}

/* track inside phone */
.pt{
  display:flex;width:100%;height:100%;
  transition:transform .42s cubic-bezier(.4,0,.2,1);
}
.psl{
  min-width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}

/* slide inner */
.psi{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:12px;padding:20px 14px;text-align:center;
}
.psi-tag{
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 10px;border-radius:100px;
  background:var(--g);color:#fff;
}
.psi-ico{font-size:54px;line-height:1}
.psi-name{font-size:14px;font-weight:800;color:var(--dk)}
.psi-box{
  background:#fff;border:2.5px solid var(--g);
  border-radius:10px;padding:8px 14px;
  font-size:11px;font-weight:700;color:var(--g-dk);
  box-shadow:0 3px 12px rgba(91,170,62,.18);
  line-height:1.5;
}
.psi-hint{font-size:11px;color:#666;line-height:1.55}

/* slide themes */
.bg1{background:linear-gradient(150deg,#eef7e8,#d4edca)}
.bg2{background:linear-gradient(150deg,#e8f4ff,#cce3ff)}
.bg3{background:linear-gradient(150deg,#fff8e8,#ffe9b8)}
.bg4{background:linear-gradient(150deg,#fce8ff,#f0c8ff)}
.bg5{background:linear-gradient(150deg,#e8fff4,#b8ffdc)}

/* ── PROGRESS ── */
.prg-wrap{margin-top:16px}
.prg-segs{display:flex;gap:6px}
.prg-seg{
  flex:1;height:7px;border-radius:4px;
  background:#d0ccb8;overflow:hidden;cursor:pointer;
  transition:opacity .2s;
}
.prg-seg:hover{opacity:.75}
.prg-seg-f{
  height:100%;border-radius:4px;
  background:var(--g-bar);width:0%;
  transition:width .45s ease;
}
.prg-seg.active .prg-seg-f{width:100%}
.prg-seg.done .prg-seg-f{width:100%;background:var(--g-dk)}

.dots{display:flex;justify-content:center;gap:8px;margin-top:14px;    DISPLAY: none;}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:#c0bba8;cursor:pointer;
  transition:background .2s,transform .2s;
}
.dot.active{background:var(--g);transform:scale(1.35)}
.dot.done{background:var(--g-dk)}

.cnt{text-align:center;margin-top:10px;font-size:13px;color:#999;font-weight:500}
.cnt strong{color:var(--g-dk);font-size:15px}

/* ── RWD ── */
@media(max-width:680px){
  :root{--pw:210px;--ph:420px}
  .ab{width:46px;height:46px;font-size:30px;line-height: 25px;}
  .stage{gap:14px}
  .st{font-size:22px}
  .ss{font-size:1.1rem;}
  .cs{padding:12px 12px 44px}
}
@media(max-width:480px){
  :root{--pw:172px;--ph:344px}
  .ab{        width: 38px;
        height: 38px;
        font-size: 40px;
        line-height: 30px;}
  .stage{gap:0px}
  .st{font-size:18px}
  .ss{font-size:1.1rem;}
  .psi-ico{font-size:40px}
  .psi-name{font-size:12px}
  .psi-box{font-size:10px;padding:6px 10px}
  .psi-hint{font-size:10px}
.pw {

    width: 85%;

}
.pf {
    padding: 0px 0px;

}
}
@media(max-width:360px){
  :root{--pw:144px;--ph:290px}
  .ab{width:32px;height:32px;font-size:14px}
  .stage{gap:5px}
  .st{font-size:16px}
  .cs{padding:24px 8px 36px}
}