/* Roasty — neo-brutalist Gen-Z. Lime #C6FF3D + hot pink #FF3D8B + ink, white canvas. */
:root{--bg:#fffdf6;--paper:#fff;--ink:#0d0d0d;--lime:#c6ff3d;--pink:#ff3d8b;--sky:#7ad7ff;--sun:#ffd23d;--mut:#5c5c5c;--ok:#18c964;--bad:#ff3d3d;--b:3px solid var(--ink);--sh:5px 5px 0 var(--ink);--sh-s:3px 3px 0 var(--ink);--r:20px;--disp:"Unbounded",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:hidden;background:var(--bg);color:var(--ink);font:500 16px/1.45 "Manrope",-apple-system,system-ui,sans-serif}
body{padding-bottom:96px;background-image:radial-gradient(#0d0d0d14 1.2px,transparent 1.2px);background-size:22px 22px}
a{color:inherit;text-decoration:none}
#app{max-width:520px;margin:0 auto;padding:16px}
h1,h2,h3,.disp{font-family:var(--disp);letter-spacing:-.02em}
h1{font-size:40px;line-height:1.02;font-weight:900}
h2{font-size:24px;font-weight:800;margin:4px 0 12px}
h3{font-size:15px;font-weight:800;margin-bottom:6px}
.mut{color:var(--mut)}.sm{font-size:13px}
.card{background:var(--paper);border:var(--b);border-radius:var(--r);padding:16px;margin:14px 0;box-shadow:var(--sh)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--b);border-radius:16px;padding:15px 18px;font:800 16px/1 var(--disp);cursor:pointer;background:var(--paper);color:var(--ink);box-shadow:var(--sh-s);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.pri{background:var(--lime)}.btn.pink{background:var(--pink);color:#fff}.btn.ink{background:var(--ink);color:var(--lime)}
.btn.block{width:100%}.btn.xl{padding:20px;font-size:18px}
.btn:disabled{opacity:.5}
.chip{padding:9px 13px;border-radius:999px;border:2.5px solid var(--ink);background:var(--paper);cursor:pointer;font-weight:800;font-size:14px;transition:transform .1s}
.chip.on{background:var(--ink);color:var(--lime);transform:rotate(-2deg)}
input,textarea{width:100%;background:var(--paper);color:var(--ink);border:var(--b);border-radius:14px;padding:13px;font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:16px;line-height:1.4;outline:none;-webkit-appearance:none}
input::placeholder,textarea::placeholder{color:#8a8a8a;font-weight:600}
input:focus,textarea:focus{box-shadow:var(--sh-s);background:#fbffe9}
textarea{min-height:120px;resize:vertical}
label.lb{display:block;font:800 12px var(--disp);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px}
.tilt{transform:rotate(-2deg)}.tilt-r{transform:rotate(2deg)}
.sticker{display:inline-block;background:var(--lime);border:2.5px solid var(--ink);border-radius:12px;padding:6px 12px;font:800 13px var(--disp);box-shadow:var(--sh-s)}
.sticker.pink{background:var(--pink);color:#fff}.sticker.sun{background:var(--sun)}.sticker.sky{background:var(--sky)}
.hl{white-space:nowrap;background:var(--lime);padding:0 .15em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl.pink{background:var(--pink);color:#fff}
/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.logo{font:900 22px var(--disp);display:flex;align-items:center;gap:7px}
.logo img{width:42px;height:42px;border:2.5px solid var(--ink);border-radius:12px;background:var(--lime);object-fit:cover;box-shadow:2px 2px 0 var(--ink)}
.logo b{background:var(--pink);color:#fff;border:2.5px solid var(--ink);border-radius:9px;padding:1px 6px;font-size:11px;transform:rotate(-8deg) translateY(-8px);display:inline-block}
/* hero */
.hero{position:relative;padding:18px 0 4px}
.hero .masc{position:absolute;right:-10px;top:205px;width:150px;transform:rotate(6deg);filter:drop-shadow(4px 4px 0 var(--ink));animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(3deg) translateY(-6px)}}
.hero h1{position:relative;z-index:1}
/* chat */
.bubble{border:var(--b);border-radius:18px 18px 18px 4px;padding:13px 14px;margin:10px 0;max-width:92%;background:var(--paper);box-shadow:var(--sh-s);font-weight:600}
.bubble.me{margin-left:auto;border-radius:18px 18px 4px 18px;background:var(--sky)}
.bubble.roast{background:var(--ink);color:#fff;border-color:var(--ink)}
.bubble.roast b,.bubble.roast i{color:var(--lime)}
.bubble.q{background:var(--sun);font-family:var(--disp);font-weight:800;font-size:17px;line-height:1.25}
.who{display:flex;align-items:flex-end;gap:8px}
.who img{width:64px;flex:0 0 64px;filter:drop-shadow(2px 2px 0 var(--ink))}
.typing::after{content:"▍";animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
/* mic */
.micwrap{text-align:center;margin:20px 0 6px;position:relative}
.mic{width:112px;height:112px;border-radius:50%;border:var(--b);font-size:44px;cursor:pointer;background:var(--lime);box-shadow:var(--sh);transition:transform .1s}
.mic:active{transform:scale(.95)}
.mic.rec{background:var(--pink);animation:pulse 1.1s infinite}
@keyframes pulse{0%{box-shadow:var(--sh),0 0 0 0 #ff3d8b99}100%{box-shadow:var(--sh),0 0 0 26px #ff3d8b00}}
/* mascot reaction */
.react{position:relative;text-align:center;margin:8px 0 -6px}
.react img{width:190px;filter:drop-shadow(5px 5px 0 var(--ink));animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.3) rotate(-20deg);opacity:0}100%{transform:none;opacity:1}}
.react .say{position:absolute;top:6px;right:6px;transform:rotate(6deg)}
.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-9px) rotate(-1deg)}40%,80%{transform:translateX(9px) rotate(1deg)}}
/* score */
.score{font:900 56px/1 var(--disp)}
.lvl{display:inline-block;font:900 26px var(--disp);padding:6px 14px;border-radius:14px;background:var(--lime);border:var(--b);box-shadow:var(--sh-s);transform:rotate(-3deg)}
.bar{height:16px;background:var(--paper);border:2.5px solid var(--ink);border-radius:99px;overflow:hidden;margin:6px 0 10px}
.bar i{display:block;height:100%;background:var(--lime);border-right:2.5px solid var(--ink);transition:width 1s cubic-bezier(.2,.9,.3,1)}
.bar.hot i{background:linear-gradient(90deg,var(--sun),var(--pink),var(--bad))}
.meter{background:var(--ink);color:#fff;border-radius:var(--r);padding:14px 16px;border:var(--b);box-shadow:var(--sh);margin:14px 0}
.meter .bar{border-color:#fff;background:#222}
.meter .bar i{border-color:#fff}
.fix{border:2.5px solid var(--ink);padding:10px 12px;margin:10px 0;background:var(--paper);border-radius:14px;font-size:15px;font-weight:600}
.fix s{color:var(--bad);text-decoration-thickness:3px}.fix b{background:var(--lime);padding:0 4px;border-radius:5px}
.fix .mut{font-size:13px;margin-top:4px}
.stat{background:var(--paper);border:var(--b);border-radius:18px;padding:14px;box-shadow:var(--sh-s)}
.stat .v{font:900 26px var(--disp)}
.stat.lime{background:var(--lime)}.stat.pink{background:var(--pink);color:#fff}.stat.pink .mut{color:#fff}.stat.sun{background:var(--sun)}
/* tabbar */
#tabbar{position:fixed;bottom:12px;left:12px;right:12px;max-width:496px;margin:0 auto;display:flex;justify-content:space-around;background:var(--ink);border-radius:22px;padding:8px 6px;box-shadow:4px 4px 0 var(--pink);z-index:20}
#tabbar[hidden]{display:none}
#tabbar a{display:flex;flex-direction:column;align-items:center;font-size:21px;color:#fff;padding:6px 8px;border-radius:14px;opacity:.6;transition:all .15s}
#tabbar a span{font:700 10px var(--disp);margin-top:2px}
#tabbar a.on{opacity:1;background:var(--lime);color:var(--ink);transform:translateY(-4px) rotate(-3deg)}
.flash{background:var(--sun);border:2.5px solid var(--ink);padding:10px 12px;border-radius:14px;font-size:13px;font-weight:700;margin:8px 0}
.price{font:900 52px/1 var(--disp)}
.flip{min-height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;cursor:pointer;background:var(--lime)}
.flip.back{background:var(--sky)}
.opt{display:flex;width:100%;justify-content:flex-start;margin:10px 0;font-family:"Manrope",sans-serif;font-weight:800;text-align:left}
.opt.right{background:var(--lime)}.opt.wrong{background:var(--pink);color:#fff}
canvas.chart{width:100%;height:170px}
.spin{display:inline-block;width:22px;height:22px;border:4px solid var(--ink);border-top-color:var(--pink);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.marquee{overflow:hidden;border-block:var(--b);background:var(--pink);color:#fff;margin:18px -16px;padding:10px 0;transform:rotate(-2deg)}
.marquee div{display:inline-block;white-space:nowrap;font:900 18px var(--disp);animation:mq 18s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.rev{background:var(--paper);border:var(--b);border-radius:18px;padding:14px;box-shadow:var(--sh-s);min-width:240px}
.scroller{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 12px;scroll-snap-type:x mandatory}
.scroller>*{scroll-snap-align:start}
.feat{display:flex;gap:12px;align-items:flex-start}
.feat .ic{font-size:26px;width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border:var(--b);border-radius:14px;background:var(--lime)}
.list-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:2px dashed #0002;font-weight:700}
.list-row:last-child{border:0}
.empty{text-align:center;padding:10px}
.empty img{width:120px;filter:drop-shadow(3px 3px 0 var(--ink))}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
.toggle{display:flex;align-items:center;gap:12px;border:var(--b);border-radius:16px;padding:12px;background:var(--paper);cursor:pointer;font-weight:800}
.toggle input{width:22px;height:22px;accent-color:var(--pink)}
.modal{position:fixed;inset:0;background:#0d0d0dcc;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:14px}
.modal img{max-height:68vh;max-width:100%;border:var(--b);border-radius:20px;box-shadow:6px 6px 0 var(--lime)}
@media(max-width:380px){h1{font-size:34px}.hero .masc{width:140px;top:190px}}
.hscroll{overflow-x:auto;margin:8px -16px 0;padding:4px 16px 8px;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}.hscroll .row{flex-wrap:nowrap;gap:8px}.hscroll .chip{white-space:nowrap}
.card .row.between>.row{flex-wrap:nowrap}
.unit{display:block}.unit.cur{background:#fbffe9;border-width:4px}
.uic{font-size:30px;width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;border:var(--b);border-radius:16px;background:var(--sun);box-shadow:var(--sh-s)}
.locked{opacity:.45;pointer-events:none}
.fbk{border:var(--b);border-radius:var(--r);padding:14px;margin:14px 0;box-shadow:var(--sh)}
.fbk.ok{background:var(--lime)}.fbk.bad{background:#ffe0ec}
.wordline{min-height:58px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:3px dashed #0003;padding-bottom:10px}
.mt.sel{background:var(--sun)}.btn.sky{background:var(--sky)}
.plan{display:block;width:100%;text-align:left;cursor:pointer;position:relative}
.plan.on{background:var(--lime);transform:rotate(-1deg)}
.plan .badge{position:absolute;top:-12px;right:12px}
.ptab{width:100%;border-collapse:collapse;font-size:13px;font-weight:700}.ptab th{font:800 11px var(--disp);text-align:right;padding:6px 4px;border-bottom:2.5px solid var(--ink)}.ptab th:first-child,.ptab td:first-child{text-align:left}.ptab td{text-align:right;padding:7px 4px;border-bottom:1.5px dashed #0002;white-space:nowrap}.ptab tr.best td{background:var(--lime)}
.modal .price{font-size:38px;white-space:nowrap}.modal .price s{font-size:16px}
.plan .row.between>div:first-child{min-width:0}.plan s{margin-right:4px}
.plan .badge{right:auto;left:16px;top:-14px}
/* call screen */
body.incall #tabbar{display:none}
body.incall{background:var(--ink);background-image:radial-gradient(#ffffff14 1.2px,transparent 1.2px)}
.call{min-height:calc(100vh - 32px);display:flex;flex-direction:column;color:#fff}
.ctop{display:flex;justify-content:space-between;align-items:center}.ctop .disp{font-size:22px}.ctop .sm{color:var(--lime);font-weight:800}
.cface{position:relative;margin:26px auto 10px;width:270px;height:270px;display:grid;place-items:center}
.cface img{width:250px;position:relative;z-index:1;transition:transform .07s linear;filter:drop-shadow(6px 6px 0 #000)}
.cface img.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.cring{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,var(--lime) 0,#c6ff3d55 45%,transparent 70%);opacity:.25;transition:transform .07s linear}
.csub{background:#fff;color:var(--ink);border:var(--b);border-radius:18px;padding:14px;font-weight:700;min-height:84px;box-shadow:5px 5px 0 var(--pink)}
.cbar{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:auto;padding-top:22px}
.cbtn{width:62px;height:62px;border-radius:50%;border:3px solid #fff;background:#222;color:#fff;font-size:24px;cursor:pointer}
.cbtn.end{background:var(--bad)}
.call .mic:disabled{opacity:.4}
[hidden]{display:none!important}
.cface{width:300px;height:300px}.cface img{width:290px}
.fxl{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:visible}
.fxp{position:absolute;bottom:40%;animation:fxup 1.5s ease-out forwards;opacity:0}
@keyframes fxup{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:1}100%{transform:translateY(-170px) scale(1.2) rotate(20deg);opacity:0}}
.cface img{border-radius:0;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{scale:1.015}}
.call{height:calc(100dvh - 32px);min-height:0}.cface{width:min(300px,36dvh);height:min(300px,36dvh);margin:14px auto 8px}.cface img{width:100%}
.csub{max-height:24dvh;overflow-y:auto;font-size:15px;line-height:1.4}
.mic.orb{font-size:30px}.mic.orb.live{background:var(--lime);animation:none;transition:box-shadow .05s}
.dots{display:inline-flex;gap:4px;vertical-align:middle}.dots i{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:dot 1s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes dot{50%{transform:translateY(-5px);opacity:.4}}
.masc.demo{width:150px}.masc.demo img{width:100%;display:block}

/* chip feedback (iPad: selection must be obvious) */
.chip{font-family:inherit;color:var(--ink);-webkit-appearance:none;appearance:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;position:relative}
.chip:active{transform:scale(.94);background:#fbffe9}
.chip.on{background:var(--ink);color:var(--lime);box-shadow:3px 3px 0 var(--pink);padding-right:30px}
.chip.on::after{content:"✓";position:absolute;right:11px;top:50%;transform:translateY(-50%);font-weight:900;color:var(--lime)}
.chip.tap{animation:chipPop .25s cubic-bezier(.2,1.6,.4,1)}
@keyframes chipPop{0%{transform:scale(.88)}100%{transform:rotate(-2deg) scale(1)}}
@media (hover:hover){.chip:hover{background:#f4ffd9}.chip.on:hover{background:var(--ink)}}
#lg .chip.on,.chip.nochk{padding-right:13px}#lg .chip.on::after,.chip.nochk::after,a.chip::after{content:none}
.ptab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}.ptab{min-width:290px}
@media(max-width:360px){.ptab{font-size:11px}.ptab th{font-size:9.5px;padding:5px 2px}.ptab td{padding:5px 2px}}

/* (5) more air */
.card{padding:18px 18px;margin:16px 0}
.row{gap:12px}
.chip{margin:2px 0}
h2{margin:6px 0 14px}
.bubble{line-height:1.5;padding:14px 16px}
.feat .ic{flex:0 0 auto}
.unit .row{gap:14px}
#tabbar a{padding:7px 10px}

/* (4) hover / focus feedback */
.btn,.card,.chip,.opt,.stat,.unit,#tabbar a,.plan{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,filter .15s ease}
@media (hover:hover){
  .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);filter:brightness(1.03)}
  .btn.ink:hover{box-shadow:6px 6px 0 var(--pink)}
  a.card:hover,.stat:hover,.unit:hover,.plan:hover{transform:translate(-2px,-3px) rotate(0deg);box-shadow:8px 8px 0 var(--ink)}
  .opt:hover{background:#f4ffd9;transform:translateX(4px)}
  .chip:hover{transform:translateY(-2px)}
  #tabbar a:hover{opacity:1;background:#ffffff1a}
  .logo:hover img{transform:rotate(-8deg) scale(1.06)}
  .hero .masc:hover{animation-duration:.8s}
}
.btn:focus-visible,.chip:focus-visible,.opt:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.logo img{transition:transform .2s}

/* (1) desktop layout */
.hero-grid,.hero-side,.feat-grid,.unit-grid{display:block}
@media (min-width:960px){
  body{padding-bottom:40px;padding-top:84px}
  #app{max-width:1120px;padding:24px 32px}
  h1{font-size:60px}
  /* landing */
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;margin-bottom:12px}
  .hero-grid .hero{padding-top:30px}
  .hero-grid .hero p{max-width:70%!important;font-size:18px}
  .hero-grid .hero .masc{width:230px;right:0;top:120px}
  .hero-side .card{margin-top:0!important}
  .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .feat-grid .card{margin:0}
  .scroller{display:grid!important;grid-template-columns:repeat(3,1fr);gap:20px;overflow:visible}
  body[data-r="landing"] #app>.card:last-of-type{max-width:620px;margin-left:auto;margin-right:auto}
  /* app shell: tab bar becomes a top navigation */
  #tabbar{top:16px;bottom:auto;max-width:1120px;width:calc(100% - 64px);left:50%;right:auto;transform:translateX(-50%);justify-content:center;gap:10px;border-radius:20px}
  #tabbar a{flex-direction:row;gap:8px;font-size:18px;padding:10px 16px}
  #tabbar a span{font-size:13px;margin:0}
  #tabbar a.on{transform:rotate(-2deg)}
  body:not([data-r="home"]):not([data-r="landing"]) #app{max-width:760px}
  body[data-r="lesson"] #app,body[data-r="call"] #app,body[data-r="placement"] #app,body[data-r="warmup"] #app{max-width:680px}
  /* home */
  .unit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:8px 0}
  .unit-grid .card{margin:0}
  .grid2{gap:20px}
  .call{max-width:640px;margin:0 auto}
}
@media (min-width:1280px){ .unit-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:960px){
  .hero-grid .hero .masc{top:auto;bottom:-70px;right:10px;width:170px}
  .hero-grid .hero{padding-bottom:20px}
  body[data-r="home"] #app{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start}
  body[data-r="home"] #app>*{grid-column:1/-1}
  body[data-r="home"] #app>a.card.row,body[data-r="home"] #app>div.card.row{grid-column:auto;margin:8px 0}
}