:root{
  --cream:#FBF1DE;--mustard:#E2A11C;--navy:#1B2A4C;--coral:#EC8268;
  --ai:#38BDF8;--gold:#F4C766;--white:#FFFDF8;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{font-family:'Noto Sans Thai',sans-serif;background:var(--navy);color:var(--navy);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
#app{position:relative;width:100%;max-width:430px;height:100dvh;max-height:932px;
  background:radial-gradient(120% 80% at 50% 0%, #FFF7E8 0%, var(--cream) 55%, #F3E4C7 100%);
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);}
@media(min-width:480px){ #app{border-radius:36px;height:92dvh;} }

.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 24px 34px;text-align:center;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease, visibility .45s;}
.scene.active{opacity:1;visibility:visible;transform:none;}
.scene.scrolly{justify-content:flex-start;overflow-y:auto;padding-top:46px;padding-bottom:28px;}
.scene.scrolly .stack{position:static;margin-top:18px;padding:0;}

.progress{position:absolute;top:18px;left:0;right:0;display:flex;gap:7px;justify-content:center;z-index:30;}
.progress span{width:8px;height:8px;border-radius:50%;background:rgba(27,42,76,.16);transition:.3s;}
.progress span.on{background:var(--mustard);transform:scale(1.25);}

.mouse{width:200px;height:200px;filter:drop-shadow(0 16px 22px rgba(27,42,76,.22));}
.mouse.float{animation:float 3s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ear{transform-origin:center;animation:earwiggle 4s ease-in-out infinite;}
@keyframes earwiggle{0%,90%,100%{transform:rotate(0)}94%{transform:rotate(-7deg)}97%{transform:rotate(5deg)}}
.glasses{animation:glow 2.4s ease-in-out infinite;}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 1px var(--ai))}50%{filter:drop-shadow(0 0 7px var(--ai))}}
.eye{transform-origin:center;animation:blink 5s infinite;}
@keyframes blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}

h1{font-size:30px;font-weight:900;color:var(--navy);line-height:1.25;}
.speech{position:relative;background:var(--white);border-radius:22px;padding:18px 22px;margin-top:20px;max-width:340px;
  font-size:22px;font-weight:700;line-height:1.45;color:var(--navy);box-shadow:0 10px 26px rgba(27,42,76,.12);}
.speech:after{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  border:12px solid transparent;border-bottom-color:var(--white);border-top:0;}
.sub{margin-top:14px;font-size:16px;font-weight:500;color:#6b6354;max-width:330px;}
.actionq{font-size:18px;font-weight:900;color:var(--navy);max-width:330px;}

.btn{appearance:none;border:0;cursor:pointer;font-family:inherit;font-weight:900;font-size:21px;color:var(--white);
  background:var(--mustard);padding:18px 26px;border-radius:20px;width:100%;max-width:340px;
  box-shadow:0 8px 0 #b97f0d, 0 14px 22px rgba(185,127,13,.32);transition:transform .08s ease, box-shadow .08s ease;margin-top:10px;}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 #b97f0d,0 6px 12px rgba(185,127,13,.3);}
.btn:disabled{opacity:.45;box-shadow:0 8px 0 #b97f0d;}
.btn.secondary{background:var(--white);color:var(--navy);box-shadow:0 8px 0 #e3d6ba,0 14px 22px rgba(0,0,0,.08);}
.btn.secondary:active{box-shadow:0 2px 0 #e3d6ba;}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:none;font-size:17px;padding:12px;}
.btn.coral{background:var(--coral);box-shadow:0 8px 0 #c95f47,0 14px 22px rgba(201,95,71,.3);}
.btn.coral:active{box-shadow:0 2px 0 #c95f47;}
.stack{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;position:absolute;bottom:30px;left:0;padding:0 24px;}

.badge{font-size:14px;font-weight:700;color:var(--mustard);background:#fff3da;padding:7px 16px;border-radius:30px;letter-spacing:.5px;}
.book{font-size:13px;font-weight:700;color:#fff;background:var(--coral);padding:6px 14px;border-radius:20px;margin-top:14px;display:inline-block;}

.ai-dots{display:flex;gap:10px;margin-top:24px;}
.ai-dots i{width:14px;height:14px;border-radius:50%;background:var(--ai);animation:bob .9s infinite;}
.ai-dots i:nth-child(2){animation-delay:.15s}.ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-10px);opacity:1}}
@keyframes cardin{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes slideup{to{opacity:1;transform:none}}

.confetti{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;opacity:0;}

/* ---- blocks ---- */
.phone{width:285px;background:var(--white);border-radius:24px;padding:16px 14px 18px;box-shadow:0 16px 34px rgba(27,42,76,.18);}
.phone .top{font-size:14px;font-weight:700;color:#9a917f;border-bottom:1px solid #eee;padding-bottom:8px;margin-bottom:12px;}
.bubble{max-width:90%;padding:11px 14px;border-radius:16px;font-size:15px;font-weight:600;line-height:1.45;margin-bottom:10px;text-align:left;}
.bubble.them{background:#f0eee9;color:var(--navy);border-bottom-left-radius:5px;margin-right:auto;}
.bubble.them.dim{color:#8a8478;font-style:italic;}
.bubble.me{background:var(--mustard);color:#fff;border-bottom-right-radius:5px;margin-left:auto;}
.bubble.me.in{animation:cardin .5s backwards;}

.cards{display:flex;flex-direction:column;gap:14px;width:100%;max-width:340px;margin-top:6px;}
.card{background:var(--white);border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:16px;text-align:left;
  box-shadow:0 10px 22px rgba(27,42,76,.12);opacity:0;transform:translateY(20px) scale(.96);}
.card.in{animation:cardin .5s forwards;}
.card .emoji{font-size:40px;}
.card .t{font-size:20px;font-weight:900;color:var(--navy);}
.card .d{font-size:14px;font-weight:500;color:#7a7163;margin-top:2px;}

.rcard{width:300px;background:var(--white);border-radius:18px;padding:16px 18px;text-align:left;box-shadow:0 16px 34px rgba(27,42,76,.18);}
.rcard .h{font-size:14px;font-weight:900;color:var(--ai);margin-bottom:12px;}
.rcard ul{list-style:none;counter-reset:n;}
.rcard li{font-size:15px;font-weight:700;color:var(--navy);line-height:1.5;margin-bottom:10px;padding-left:28px;position:relative;opacity:0;transform:translateY(8px);}
.rcard li.in{animation:slideup .4s forwards;}
.rcard li.check:before{content:"✓";position:absolute;left:2px;top:0;color:var(--mustard);font-weight:900;}
.rcard li.num:before{counter-increment:n;content:counter(n);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:var(--mustard);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;}

.post{width:280px;background:var(--white);border-radius:18px;padding:16px;text-align:left;box-shadow:0 16px 34px rgba(27,42,76,.18);}
.post .top{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#9a917f;margin-bottom:10px;}
.post .top .dot{width:26px;height:26px;border-radius:50%;background:var(--gold);}
.post .img{height:120px;border-radius:12px;background:#f0eee9;display:flex;align-items:center;justify-content:center;font-size:54px;margin-bottom:10px;}
.post .cap{font-size:15px;font-weight:600;color:var(--navy);line-height:1.5;}
.post .cap.bland{color:#9a917f;font-style:italic;}
.post .meta{margin-top:10px;font-size:12px;color:#b3a98f;}
.post.in .cap{animation:cardin .5s backwards;}

.plan{width:295px;background:var(--white);border-radius:18px;padding:16px;text-align:left;box-shadow:0 16px 34px rgba(27,42,76,.18);}
.plan .h{font-size:16px;font-weight:900;color:var(--navy);margin-bottom:10px;}
.day{margin-bottom:12px;opacity:0;transform:translateY(10px);}
.day.in{animation:slideup .45s forwards;}
.day .dh{font-size:13px;font-weight:900;color:var(--mustard);margin-bottom:4px;}
.day .it{font-size:14px;font-weight:600;color:var(--navy);line-height:1.5;padding-left:18px;position:relative;}
.day .it:before{content:"•";position:absolute;left:4px;color:var(--coral);font-weight:900;}

.doc{width:290px;max-height:300px;overflow:hidden;background:#fff;border-radius:16px;padding:16px;text-align:left;
  box-shadow:0 16px 34px rgba(27,42,76,.18);position:relative;transition:max-height .9s ease;}
.doc .t{font-size:13px;font-weight:900;color:var(--navy);margin-bottom:8px;}
.doc p{font-size:11px;color:#7a7468;line-height:1.7;margin-bottom:7px;}
.doc:after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,#fff);}
.doc.shrunk{max-height:90px;}

.browser{width:300px;background:#fff;border-radius:16px;box-shadow:0 16px 34px rgba(27,42,76,.18);overflow:hidden;text-align:left;}
.browser .tabs{display:flex;gap:3px;background:#dde1e6;padding:6px 6px 0;overflow:hidden;}
.browser .tab{background:#eef1f4;font-size:10px;color:#7a8088;padding:5px 7px;border-radius:7px 7px 0 0;white-space:nowrap;max-width:60px;overflow:hidden;text-overflow:ellipsis;}
.browser .tab.act{background:#fff;color:#333;}
.browser .bar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid #eee;}
.browser .url{flex:1;background:#f1f3f4;border-radius:20px;font-size:11px;color:#5f6368;padding:5px 10px;}
.browser .res{padding:10px 12px;}
.browser .ad{background:#fff7e6;border:1px solid #ffe2a8;border-radius:8px;padding:6px 8px;margin-bottom:8px;}
.browser .ad .lbl{font-size:9px;font-weight:900;color:#b8860b;}
.browser .ad .ln{font-size:12px;color:#1a0dab;font-weight:700;}
.browser .link{margin-bottom:9px;}
.browser .link .t{font-size:12px;color:#1a0dab;font-weight:700;line-height:1.3;}
.browser .link .u{font-size:10px;color:#0a8043;}
.browser .link .d{font-size:10px;color:#5f6368;}

.tagbox{width:285px;background:var(--white);border-radius:16px;padding:14px;text-align:left;box-shadow:0 16px 34px rgba(27,42,76,.18);}
.tagbox .th{font-size:13px;font-weight:900;color:var(--navy);margin-bottom:6px;}
.tagbox .tag{display:inline-block;font-size:11px;background:#f0eee9;color:#8a8478;border-radius:8px;padding:4px 8px;margin:3px;}

.note{width:295px;border-radius:16px;padding:16px;text-align:left;}
.note.good{background:#eaf7ee;border:2px solid #46b46a;}
.note .nt{font-size:16px;font-weight:900;margin-bottom:6px;color:#2e7d46;}
.note .nd{font-size:15px;font-weight:600;color:var(--navy);line-height:1.5;}

/* build (chips) */
.buildbox{width:100%;max-width:345px;background:#fff8ea;border:2px solid var(--mustard);border-radius:16px;
  padding:14px 16px;text-align:left;font-size:15px;font-weight:700;color:var(--navy);line-height:1.55;min-height:60px;margin-top:8px;}
.buildbox .ph{color:#b3a98f;}
.buildbox .added{color:var(--mustard);}
.chips{display:flex;flex-direction:column;gap:10px;width:100%;max-width:345px;margin-top:14px;}
.chip{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:14px;padding:12px 14px;text-align:left;
  box-shadow:0 6px 16px rgba(27,42,76,.1);cursor:pointer;border:3px solid transparent;transition:transform .12s,border-color .2s,opacity .2s;}
.chip:active{transform:scale(.97);}
.chip.done{border-color:var(--mustard);opacity:.55;}
.chip .emoji{font-size:24px;}
.chip .k{font-size:13px;font-weight:900;color:var(--mustard);}
.chip .v{font-size:15px;font-weight:700;color:var(--navy);}
.chip .tick{margin-left:auto;font-size:20px;color:var(--mustard);opacity:0;}
.chip.done .tick{opacity:1;}

/* choose */
.choices{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;margin-top:16px;}
.choice{background:var(--white);border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:16px;text-align:left;
  box-shadow:0 8px 20px rgba(27,42,76,.1);cursor:pointer;border:3px solid transparent;transition:transform .12s ease;}
.choice:active{transform:scale(.97);}
.choice .emoji{font-size:32px;}
.choice .t{font-size:18px;font-weight:900;color:var(--navy);}
.choice .d{font-size:13px;font-weight:500;color:#7a7163;margin-top:1px;}

/* spot */
.stmt{font-size:15px;font-weight:700;color:var(--navy);line-height:1.5;padding:12px 14px;border-radius:12px;background:#f6f4ef;
  margin-bottom:10px;cursor:pointer;border:3px solid transparent;transition:transform .12s,border-color .2s,background .2s;display:flex;gap:10px;align-items:flex-start;}
.stmt:active{transform:scale(.98);}
.stmt .mk{flex:0 0 auto;font-size:16px;}
.stmt.right{border-color:#46b46a;background:#eaf7ee;}
.stmt.wrongpick{border-color:var(--coral);background:#fdeee9;}
.hint{min-height:24px;font-size:15px;font-weight:700;color:var(--coral);margin-top:8px;}

/* try-real steps */
.steps{display:flex;flex-direction:column;gap:10px;width:100%;max-width:350px;margin-top:16px;}
.step{display:flex;align-items:center;gap:14px;background:var(--white);border-radius:16px;padding:12px 16px;text-align:left;
  font-size:16px;font-weight:500;color:var(--navy);line-height:1.4;box-shadow:0 6px 16px rgba(27,42,76,.08);}
.step .num{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--mustard);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:16px;}
.promptbox{position:relative;width:100%;max-width:350px;margin-top:16px;background:#fff8ea;border:2px dashed var(--mustard);border-radius:16px;
  padding:16px 18px;text-align:left;font-size:15px;font-weight:700;color:var(--navy);line-height:1.6;}

/* camera viewfinder (scan) */
.viewfinder{width:250px;height:250px;border-radius:24px;position:relative;overflow:hidden;margin-top:6px;
  background:linear-gradient(180deg,#fff,#eef3f6);box-shadow:0 16px 30px rgba(27,42,76,.2);
  display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;padding:30px;}
.viewfinder .vit{font-size:46px;animation:popin .5s backwards;}
.viewfinder .vit:nth-child(6){animation-delay:.1s}.viewfinder .vit:nth-child(7){animation-delay:.25s}.viewfinder .vit:nth-child(8){animation-delay:.4s}
@keyframes popin{from{transform:scale(0)}to{transform:scale(1)}}
.corner{position:absolute;width:34px;height:34px;border:5px solid var(--ai);}
.c1{top:12px;left:12px;border-right:0;border-bottom:0;border-radius:10px 0 0 0;}
.c2{top:12px;right:12px;border-left:0;border-bottom:0;border-radius:0 10px 0 0;}
.c3{bottom:12px;left:12px;border-right:0;border-top:0;border-radius:0 0 0 10px;}
.c4{bottom:12px;right:12px;border-left:0;border-top:0;border-radius:0 0 10px 0;}
.scanline{position:absolute;left:0;right:0;height:6px;top:6%;background:linear-gradient(90deg,transparent,var(--ai),transparent);
  box-shadow:0 0 16px 3px var(--ai);animation:scan 1.8s ease-in-out infinite;}
@keyframes scan{0%{top:6%}50%{top:90%}100%{top:6%}}

/* hub */
#app.hub{overflow-y:auto;padding:34px 24px 40px;justify-content:flex-start;}
.hubhead{display:flex;flex-direction:column;align-items:center;text-align:center;}
.hubhead .mouse{width:120px;height:120px;}
.hub h1{font-size:27px;margin-top:6px;}
.pick{font-size:17px;font-weight:900;color:var(--mustard);margin:22px 0 12px;align-self:center;}
.list{display:flex;flex-direction:column;gap:14px;width:100%;}
.ep{display:flex;align-items:center;gap:14px;background:var(--white);border-radius:20px;padding:16px;text-decoration:none;color:inherit;
  box-shadow:0 10px 24px rgba(27,42,76,.1);transition:transform .12s ease;cursor:pointer;}
.ep:active{transform:scale(.97);}
.ep .ico{flex:0 0 58px;width:58px;height:58px;border-radius:16px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:30px;}
.ep .body{flex:1;text-align:left;}
.ep .no{font-size:12px;font-weight:900;color:var(--mustard);letter-spacing:.5px;}
.ep .t{font-size:19px;font-weight:900;color:var(--navy);line-height:1.25;margin-top:1px;}
.ep .d{font-size:13px;font-weight:500;color:#7a7163;margin-top:2px;}
.ep .go{flex:0 0 28px;font-size:24px;color:var(--mustard);font-weight:900;}
.ep.done{border:2px solid #bfe6cb;}
.ep.done .go{color:#46b46a;}
.ep.done .ico{background:#eaf7ee;}
.celebrate{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff8ea;
  border:2px solid var(--gold);border-radius:22px;padding:18px 18px 16px;margin-top:10px;width:100%;
  box-shadow:0 12px 26px rgba(226,161,28,.18);}
.celebrate .mouse{width:130px;height:auto;}
.celebrate h2{font-size:21px;font-weight:900;color:var(--mustard);margin-top:6px;}
.ep.locked{opacity:.6;cursor:default;box-shadow:0 6px 16px rgba(27,42,76,.06);}
.ep.locked .ico{background:#ece4d3;}
.ep.locked .go{color:#bbb2a0;font-size:20px;}
.soon{font-size:11px;font-weight:900;color:#fff;background:#bcae95;padding:3px 9px;border-radius:20px;margin-top:4px;display:inline-block;}