@font-face{font-family:Rubik;src:url(fonts/Rubik.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:InterL;src:url(fonts/Inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --ink:#2d3050; --mute:#6a6d8c; --line:#dcdbe9; --card:#fbfaff;
  --fig:#8678c6; --figbg:#ece9f8;
  --verb:#3f78ad; --verbdk:#2d5f8f; --verbbg:#e1ebf4;
  --roof:#c9897d; --be:#f2db86; --do:#bcd4ea; --have:#c5e0bb; --mod:#f0c8d5;
  --candy:#f2709c; --candydk:#d4467a;
  --not:#b9b8c8; --extra:#e9e7ef;
  --past:#d9c7a4; --pastdk:#a08868; --fut:#cfe8ea; --futdk:#7fb0b7;
  --ok:#5c9a7f; --soft:#f3f1fa;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#dedbea;font-family:Rubik,system-ui,sans-serif;color:var(--ink)}
.en,[lang=en]{font-family:InterL,Rubik,sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
.viewport{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 30% 20%,#ebe8f4,#d6d3e5 70%)}
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;
  background:linear-gradient(170deg,#f6f4fb 0%,#efecf7 55%,#e8e9f3 100%);display:flex;flex-direction:column;overflow:hidden;border-radius:6px;box-shadow:0 20px 60px #8a86a533}
.rotate{display:none}
@media (orientation:portrait) and (max-width:700px){.rotate{display:block;position:fixed;bottom:12px;left:0;right:0;text-align:center;font-size:15px;color:#555a7a;margin:0}}

/* top bar */
.top{height:104px;flex:none;display:flex;align-items:center;gap:28px;padding:0 40px;border-bottom:2px solid #e3e0ef;background:#f8f7fcdd}
.brand{border:0;background:none;display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;padding:0}
.brand .en{font-size:34px;font-weight:800;letter-spacing:-.5px;color:#4b4a78}
.brand small{font-size:22px;color:var(--mute);font-weight:500}
.chips{flex:1;display:flex;gap:10px;justify-content:center}
.chip{display:flex;align-items:center;gap:10px;border:2px solid transparent;background:#efedf7;border-radius:18px;padding:8px 16px 8px 18px;font-size:23px;font-weight:600;color:#55587a;transition:background .3s,border-color .3s}
.chip svg,.chip .house{width:34px;height:34px;flex:none}
.chip .n{font-size:18px;color:#8d8fac;font-weight:700}
.chip:hover{background:#e6e3f3}
.chip[aria-current=true]{background:#fff;border-color:#b9b2df;color:var(--ink)}
.chip.seen:not([aria-current=true]) .n::after{content:" ✓";color:#7d9c8c}
.topl{display:flex;align-items:center;gap:14px}
.fb{display:flex;align-items:center;gap:8px;text-decoration:none;color:#5d5f80;font-size:21px;background:#efedf7;border-radius:14px;padding:10px 16px}
.ibtn{border:0;background:#efedf7;border-radius:14px;width:52px;height:50px;font-size:26px}
main{flex:1;position:relative;overflow:hidden}
.bottom{height:84px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-top:2px solid #e3e0ef;background:#f8f7fcdd}
.credit{margin:0;font-size:19px;color:#7c7e98}
.nav{border:2px solid #cfcae6;background:#fff;border-radius:16px;font-size:26px;font-weight:600;padding:10px 26px;color:#4b4d72}
.nav:disabled{opacity:.35;cursor:default}

/* stations */
.st{position:absolute;inset:0;padding:30px 56px 20px;display:flex;flex-direction:column;gap:18px}
.st-head{display:flex;align-items:flex-start;gap:26px}
.st-head .big{width:96px;height:96px;flex:none}
.st-head h2{margin:0;font-size:54px;line-height:1.1;font-weight:800;color:#3b3d63}
.st-head p{margin:8px 0 0;font-size:30px;line-height:1.35;color:#53567a;max-width:1300px}
.more{margin-inline-start:auto;flex:none;border:2px solid #cfcae6;background:#fff;border-radius:16px;font-size:24px;padding:10px 20px;color:#55587a}
.more[aria-expanded=true]{background:#ece9f8}
.fold{position:absolute;top:150px;left:56px;width:640px;max-height:calc(100% - 180px);overflow:auto;background:#fffefe;border:2px solid #d9d4ee;border-radius:24px;padding:26px 32px;font-size:26px;line-height:1.45;box-shadow:0 16px 40px #6f69a026;z-index:20;transform:translateY(-10px);opacity:0;visibility:hidden;transition:opacity .35s,transform .35s,visibility 0s .35s}
.fold.open{opacity:1;transform:none;visibility:visible;transition:opacity .35s,transform .35s}
.fold h3{margin:0 0 10px;font-size:30px}
.fold ul{margin:0;padding-inline-start:28px}
.fold li{margin:6px 0}
.fold .x{position:absolute;top:12px;left:14px;border:0;background:#f0eef8;border-radius:12px;width:44px;height:44px;font-size:24px}
.ltr{direction:ltr;unicode-bidi:isolate}
b.e,span.e{font-family:InterL,Rubik,sans-serif;direction:ltr;unicode-bidi:isolate;font-weight:700}
.st-body{flex:1;position:relative;min-height:0}

/* symbols */
.sym{display:block}
.tile{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:120px;padding:12px 18px 12px;border-radius:22px;background:#fff;border:3px solid var(--line);font-family:InterL,Rubik,sans-serif;font-weight:700;font-size:40px;color:var(--ink);line-height:1.05;white-space:nowrap}
.tile .ic{height:74px;display:flex;align-items:flex-end}
.tile .ic svg,.tile .ic .house{height:74px;width:auto}
.tile.S{background:var(--figbg);border-color:#c7bfe9}
.tile.V{background:var(--verbbg);border-color:#a9c4de}
.tile.H{border-color:#e2d7b0;background:#fdf8e8}
.tile.H.do{background:#eef4fa;border-color:#bdd0e4}
.tile.H.have{background:#f0f7ec;border-color:#c3dab9}
.tile.H.mod{background:#fbeff3;border-color:#e6c3cf}
.tile.N{background:#f1f0f5;border-color:#cfcedb;color:#5f6078}
.tile.X{background:var(--extra);border-color:#dad8e4;color:#4f5170;font-weight:600}
.tile.W{background:#f3eaf6;border-color:#d8c2e2}
.tile.P{min-width:64px;padding:12px 14px;background:transparent;border-color:transparent;font-size:58px}
.tile .tag{font-family:Rubik,sans-serif;font-size:18px;font-weight:600;color:#7a7c98;position:absolute;top:-30px;left:50%;transform:translateX(-50%);white-space:nowrap}
.badge{position:absolute;top:-22px;right:-24px;width:70px;height:42px;z-index:3;pointer-events:none}
.badge.ed{width:auto;height:auto;padding:2px 12px;border-radius:12px;background:#fff3d6;border:2px solid #dfc17c;font-size:24px;color:#8a6a22;top:-18px;right:-18px}
.vmark{position:absolute;top:-16px;left:-16px;width:40px;height:40px}
.row{display:flex;direction:ltr;align-items:flex-end;gap:18px;flex-wrap:nowrap}
.plus{font-size:52px;color:#9a98b4;font-weight:300;align-self:center;font-family:InterL}

/* home */
.home{display:grid;grid-template-columns:1fr 1fr;gap:40px;height:100%}
.home h1{font-size:76px;margin:10px 0 6px;line-height:1.05;color:#3b3d63}
.home .sub{font-size:32px;color:#5b5e80;margin:0 0 26px;line-height:1.4}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.four .card{background:#fff;border:2px solid var(--line);border-radius:26px;padding:18px 10px 16px;text-align:center}
.four .card svg,.four .card .house{height:110px;width:auto;margin:auto}
.four .card b{display:block;font-size:28px;margin-top:10px}
.four .card span{display:block;font-size:22px;color:var(--mute)}
.formula{background:#fff;border:2px solid var(--line);border-radius:28px;padding:22px 28px;display:flex;flex-direction:column;gap:14px}
.formula .fl{display:flex;align-items:center;gap:20px;font-size:28px}
.formula .fl .row{gap:10px}
.formula .fl .row svg,.formula .fl .row .house{height:62px;width:auto}
.formula .fl .lbl{width:200px;color:#55587a}
.go{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-content:start}
.go button{display:flex;align-items:center;gap:18px;text-align:start;border:2px solid var(--line);background:#fff;border-radius:24px;padding:16px 22px;font-size:29px;font-weight:700;color:#44466c}
.go button svg,.go button .house{width:62px;height:62px;flex:none}
.go button small{display:block;font-size:21px;font-weight:400;color:var(--mute);margin-top:2px}
.go .num{font-size:22px;color:#9b9db6;margin-inline-start:auto}
.isl{position:absolute;bottom:-30px;left:-20px;width:430px;opacity:.55;pointer-events:none}

/* figure station */
.figwrap{display:grid;grid-template-columns:520px 1fr;gap:40px;height:100%}
.bigfig{position:relative;background:#fff;border:2px solid var(--line);border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.bigfig svg,.bigfig .house{height:330px;width:auto}
.openbtn{border:2px solid #c7bfe9;background:var(--figbg);border-radius:18px;font-size:28px;padding:12px 26px;font-weight:600}
.inside{display:flex;flex-direction:column;gap:16px}
.grp{background:#fff;border:2px solid var(--line);border-radius:26px;padding:14px 22px;transition:opacity .5s,transform .5s}
.closed .grp{opacity:.0;transform:translateX(40px);pointer-events:none}
.grp h3{margin:0 0 10px;font-size:27px;color:#55587a;font-weight:600}
.toks{display:flex;gap:12px;flex-wrap:wrap;direction:ltr}
.tok{border:2px solid #d6d0ee;background:#f7f5fd;border-radius:18px;padding:8px 16px;font-family:InterL,Rubik;font-weight:700;font-size:34px;display:flex;align-items:center;gap:10px}
.tok img{height:62px;width:auto}
.tok small{font-family:Rubik;font-weight:400;font-size:19px;color:#7d7f9b;direction:rtl}
.tok[aria-pressed=true]{background:var(--figbg);border-color:var(--fig)}
.demo{background:#fff;border:2px solid var(--line);border-radius:26px;padding:20px 26px;display:flex;align-items:center;gap:30px;min-height:190px}
.demo .row{gap:16px}
.demo .note{font-size:25px;color:#5b5e80;line-height:1.4;flex:1}

/* verb station */
.vwrap{display:grid;grid-template-columns:560px 1fr;gap:36px;height:100%}
.vbig{background:#fff;border:2px solid var(--line);border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative;padding:20px}
.vbig svg.v{height:220px;width:auto}
.vbig .word{font-family:InterL;font-size:84px;font-weight:800;color:var(--verbdk);direction:ltr;position:relative}
.vbig .form{font-size:30px;font-weight:700;color:#55587a}
.vbig .ex{font-family:InterL;font-size:34px;direction:ltr;color:#3d3f60;min-height:44px}
.vbig .when{font-size:24px;color:#6a6d8c;text-align:center;line-height:1.35;min-height:66px}
.pick{display:flex;flex-wrap:wrap;gap:10px;direction:ltr}
.pick button{border:2px solid #cdd9e8;background:#f6f9fc;border-radius:16px;padding:8px 18px;font-family:InterL;font-weight:700;font-size:28px}
.pick button[aria-pressed=true]{background:var(--verbbg);border-color:var(--verb)}
.forms{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;direction:ltr}
.forms button{border:2px solid #cdd9e8;background:#fff;border-radius:18px;padding:12px 6px;font-family:InterL;font-weight:800;font-size:30px;color:#3d5f82;display:flex;flex-direction:column;align-items:center;gap:2px}
.forms button small{font-family:Rubik;font-weight:400;font-size:19px;color:#7a7c98}
.forms button[aria-pressed=true]{background:var(--verbbg);border-color:var(--verb)}
.vtable{width:100%;border-collapse:separate;border-spacing:0;direction:ltr;font-family:InterL;font-size:29px;background:#fff;border:2px solid var(--line);border-radius:22px;overflow:hidden}
.vtable th{font-size:24px;color:#55587a;background:#f3f1fa;padding:8px;font-family:Rubik}
.vtable td{padding:6px 14px;border-top:1px solid #ecebf3;text-align:center}
.vtable tr.reg td{color:#3d5f82}
.vtable td.sel{background:var(--verbbg);font-weight:800}
.vtable .kind{font-family:Rubik;font-size:19px;color:#8b8da6}

/* houses */
.hwrap{display:grid;grid-template-columns:1fr 600px;gap:36px;height:100%}
.htabs{display:flex;gap:10px;margin-bottom:12px}
.htabs button{border:2px solid var(--line);background:#fff;border-radius:16px;padding:8px 22px;font-size:27px;font-weight:700}
.htabs button[aria-pressed=true]{border-color:#b9b2df;background:#ece9f8}
.hstage{background:linear-gradient(#fbfaff 0,#fbfaff 78%,#e7efe2 78%);border:2px solid var(--line);border-radius:30px;height:calc(100% - 70px);display:flex;align-items:center;justify-content:center;position:relative}
.hstage svg,.hstage .house{width:96%;height:auto;max-height:100%}
.hstage svg .part{cursor:pointer}
.hstage svg .part .hl{opacity:0;transition:opacity .3s}
.hstage svg .part.on .hl{opacity:1}
.hlabels{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:space-around;direction:ltr;font-size:24px;color:#6a6d8c;pointer-events:none}
.hinfo{background:#fff;border:2px solid var(--line);border-radius:30px;padding:24px 30px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.hinfo h3{margin:0;font-size:34px}
.who{display:flex;flex-direction:column;gap:10px}
.who .w1{display:flex;align-items:center;gap:16px;direction:ltr;justify-content:flex-end}
.who .w1 .aux{font-family:InterL;font-weight:800;font-size:44px;min-width:150px;text-align:left;position:relative}
.who .w1 .aux svg,.who .w1 .aux .house{width:58px;height:34px;position:absolute;top:-14px;right:-50px}
.who .w1 .ps{font-family:InterL;font-size:28px;color:#5f6080;flex:1;text-align:left}
.hinfo .use{font-size:25px;line-height:1.42;color:#4e5174;margin:0}
.hinfo .exs{font-family:InterL;font-size:31px;direction:ltr;text-align:left;line-height:1.5;margin:0;color:#3a3c5e}
.hinfo .exs i{font-style:normal;background:#fdf3c9;border-radius:8px;padding:0 6px}

/* candy */
.cwrap{display:flex;flex-direction:column;gap:22px;height:100%}
.cpick{display:flex;gap:10px;direction:ltr;flex-wrap:wrap}
.cpick button{border:2px solid #d6d0ee;background:#fff;border-radius:16px;padding:8px 18px;font-family:InterL;font-weight:700;font-size:30px}
.cpick button[aria-pressed=true]{background:var(--figbg);border-color:var(--fig)}
.ccols{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;direction:ltr;flex:1}
.ccol{background:#fff;border:2px solid var(--line);border-radius:28px;padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ccol h4{margin:0;font-size:24px;color:#6a6d8c;font-weight:600;direction:rtl}
.ccol .opts{font-family:InterL;font-size:26px;color:#9a9cb5}
.ccol .icon svg,.ccol .icon .house{height:96px;width:auto}
.ccol .res{font-family:InterL;font-weight:800;font-size:46px;position:relative;margin-top:22px}
.ccol .res .badge{top:-36px;right:-46px}
.ccol .sent{font-family:InterL;font-size:26px;color:#4b4d70;text-align:center;line-height:1.3}
.cfoot{font-size:26px;color:#55587a;background:#fff;border:2px solid var(--line);border-radius:22px;padding:14px 22px;line-height:1.4}

/* order */
.owrap{display:flex;flex-direction:column;gap:18px;height:100%}
.octl{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.seg{display:flex;gap:8px}
.seg button{border:2px solid var(--line);background:#fff;border-radius:16px;padding:8px 20px;font-size:26px;font-weight:700}
.seg button[aria-pressed=true]{border-color:#b9b2df;background:#ece9f8}
.seg button:disabled{opacity:.35;cursor:default}
.seg.modes button{font-size:28px;min-width:110px}
.board{flex:1;background:#fff;border:2px solid var(--line);border-radius:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;position:relative;padding:30px}
.board .row{min-height:180px;align-items:flex-end;gap:20px}
.board .sentence{font-family:InterL;font-size:44px;direction:ltr;color:#3a3c5e}
.board .why{font-size:27px;color:#5b5e80;text-align:center;max-width:1400px;line-height:1.4;min-height:76px}
.formrow{display:flex;gap:8px;direction:ltr;align-items:center}
.formrow svg,.formrow .house{height:54px;width:auto}
.formrow .q{font-size:46px;font-family:InterL;color:#7a7c98;font-weight:700}

/* tenses */
.twrap{display:grid;grid-template-columns:1fr 760px;gap:30px;height:100%}
.tgrid{display:grid;grid-template-columns:190px repeat(3,1fr);grid-template-rows:auto repeat(3,1fr);gap:12px;direction:ltr}
.tgrid .ch{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;font-size:26px;font-weight:700;color:#55587a;direction:rtl}
.tgrid .ch svg,.tgrid .ch .house{height:70px;width:auto}
.tgrid .rh{display:flex;flex-direction:column;justify-content:center;font-size:25px;font-weight:700;color:#55587a;direction:rtl;text-align:right;padding-right:6px;line-height:1.25}
.tgrid .rh small{font-weight:400;font-size:20px;color:#7d7f9b}
.tcell{border:2px solid var(--line);background:#fff;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px}
.tcell.past{background:#faf6ee}
.tcell.fut{background:#f1f9fa}
.tcell b{font-family:InterL;font-size:23px;color:#55587a}
.tcell .formrow svg,.tcell .formrow .house{height:46px}
.tcell .formrow .t{font-family:InterL;font-weight:800;font-size:23px;color:#4b4d70}
.tcell[aria-pressed=true]{border-color:#9d94d6;box-shadow:inset 0 0 0 2px #9d94d6}
.passbtn{margin-top:12px;border:2px dashed #cbc6e3;background:#fbfaff;border-radius:18px;padding:10px 20px;font-size:25px;font-weight:600}
.passbtn[aria-pressed=true]{border-style:solid;border-color:#9d94d6;background:#ece9f8}
.tdet{background:#fff;border:2px solid var(--line);border-radius:30px;padding:22px 28px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.tdet h3{margin:0;font-family:InterL;font-size:40px;direction:ltr;text-align:right}
.tdet h3 small{display:block;font-family:Rubik;font-size:25px;color:#6a6d8c;font-weight:500}
.tdet .mean{font-size:25px;color:#4e5174;margin:0;line-height:1.4}
.tline{display:flex;align-items:center;gap:14px}
.tline .sg{font-size:34px;font-weight:800;width:40px;text-align:center;color:#7a7c98;font-family:InterL}
.tline .row{gap:8px;flex-wrap:wrap}
.tline .tile{font-size:26px;min-width:0;padding:6px 10px;border-radius:14px;border-width:2px;gap:2px}
.tline .tile .ic svg,.tline .tile .ic .house{height:40px}
.tline .tile .ic{height:40px}
.tline .tile.P{font-size:34px;padding:6px 4px}
.tline .badge{width:44px;height:27px;top:-12px;right:-16px}
.tline .badge.ed{font-size:16px;padding:0 6px;top:-10px;right:-12px}
.tline .vmark{width:26px;height:26px;top:-10px;left:-10px}

/* practice */
.pwrap{display:flex;flex-direction:column;gap:16px;height:100%}
.pbox{flex:1;background:#fff;border:2px solid var(--line);border-radius:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:24px;position:relative}
.pbox .inst{font-size:30px;color:#4e5174;margin:0;text-align:center}
.slots{display:flex;gap:16px;direction:ltr;min-height:170px;align-items:flex-end;padding:16px 26px;border-radius:26px;background:#f6f5fb;border:2px dashed #d3cfe6;min-width:900px;justify-content:center}
.tray{display:flex;gap:16px;direction:ltr;min-height:170px;align-items:flex-end;flex-wrap:wrap;justify-content:center}
.tray .tile,.slots .tile{cursor:pointer}
.tile.off{border-style:dashed;border-color:#c98f8f}
.pfoot{display:flex;gap:16px;align-items:center}
.pfoot .chk{border:2px solid #b9b2df;background:#ece9f8;border-radius:16px;font-size:27px;font-weight:700;padding:10px 26px}
.pfoot .nx{border:2px solid var(--line);background:#fff;border-radius:16px;font-size:27px;padding:10px 26px}
.msg{font-size:29px;min-height:40px;margin:0;color:#4e5174;text-align:center}
.msg.good{color:#3f7d63}
.done{font-family:InterL;font-size:44px;direction:ltr;color:#3f7d63;min-height:56px;margin:0}
.dots{display:flex;gap:8px;direction:ltr}
.dots i{width:16px;height:16px;border-radius:50%;background:#dcd9ea;display:block}
.dots i.cur{background:#8678c6}
.dots i.ok{background:#9cc7b2}
.tagline{display:flex;gap:22px;direction:ltr;align-items:flex-end;flex-wrap:wrap;justify-content:center}
.tagw{display:flex;flex-direction:column;align-items:center;gap:8px;border:3px solid var(--line);background:#fff;border-radius:22px;padding:10px 18px;min-width:120px;cursor:pointer}
.tagw .slot{height:84px;display:flex;align-items:flex-end;justify-content:center;min-width:80px}
.tagw .slot svg,.tagw .slot .house{height:80px;width:auto}
.tagw .slot .q{font-size:22px;color:#a3a5bd;font-family:Rubik;align-self:center}
.tagw .w{font-family:InterL;font-weight:700;font-size:40px}
.tagw.S{background:var(--figbg);border-color:#c7bfe9}
.tagw.H{background:#fdf8e8;border-color:#e2d7b0}
.tagw.V{background:var(--verbbg);border-color:#a9c4de}
.tagw.O{background:#f4f3f8}
.vsent{font-family:InterL;font-size:56px;direction:ltr;color:#3a3c5e}
.vsent u{text-decoration:none;border-bottom:6px solid #a9c4de;color:var(--verbdk);font-weight:800}
.choices{display:flex;gap:14px;direction:ltr}
.choices button{border:2px solid #cdd9e8;background:#fff;border-radius:18px;padding:12px 24px;font-family:InterL;font-weight:800;font-size:34px;color:#3d5f82;min-width:150px}
.choices button[aria-pressed=true]{background:#eef0f6;border-color:#8f92b3}

/* summary */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:20px;height:100%}
.sbox{background:#fff;border:2px solid var(--line);border-radius:28px;padding:18px 24px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.sbox h3{margin:0;font-size:30px;display:flex;align-items:center;gap:12px}
.sbox h3 svg,.sbox h3 .house{height:58px;width:auto}
.sbox p,.sbox li{font-size:24px;line-height:1.4;margin:0;color:#4e5174}
.sbox ul{margin:0;padding-inline-start:24px}
.sbox .formrow svg,.sbox .formrow .house{height:44px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.chips{gap:8px}
.chip{white-space:nowrap;font-size:22px;padding:8px 12px;gap:8px;border-radius:16px}
.chip svg,.chip .house{width:30px;height:30px}
.brand .en{font-size:32px;white-space:nowrap}
.home h1{font-size:66px}
.board .tile{font-size:58px;padding:16px 26px;min-width:150px;border-radius:26px}
.board .tile .ic,.board .tile .ic svg,.board .tile .ic .house{height:104px}
.board .tile.P{font-size:80px;min-width:70px}
.board .badge{width:92px;height:55px;top:-30px;right:-34px}
.board .badge.ed{font-size:32px;width:auto;height:auto;top:-24px;right:-24px}
.board .vmark{width:52px;height:52px;top:-22px;left:-22px}
#oForm{display:flex;align-items:center;gap:14px;font-size:24px;color:#6a6d8c}
#oForm .formrow svg,#oForm .formrow .house{height:70px}
.tline .tile{font-size:31px;padding:8px 12px}
.tline .tile .ic,.tline .tile .ic svg,.tline .tile .ic .house{height:52px}
.tline .badge{width:52px;height:31px;top:-14px;right:-18px}
.tdet{gap:18px}
.tline{gap:16px;margin-top:10px}
.pbox{gap:16px;padding:18px 24px;justify-content:flex-start}
.slots,.tray{min-height:150px}
.slots{min-width:1000px}
.pbox .inst{font-size:28px}
.msg{min-height:52px}
.who .w1{display:grid;grid-template-columns:230px 1fr;align-items:center;justify-content:start;direction:ltr}
.who .w1 .aux{display:inline-flex;align-items:center;gap:8px;min-width:0}
.who .w1 .aux svg.cd{position:static;width:62px;height:36px}
.ccol .icon svg,.ccol .icon .house{height:120px}
.ccol .res{font-size:60px;margin-top:30px}
.ccol .sent{font-size:30px;margin-top:auto}
.ccol{gap:14px;padding:20px 14px 26px}
.cfoot{font-size:28px}
.inside{position:relative}

.footmid{display:flex;align-items:center;gap:22px}
.fb{font-size:20px;padding:8px 14px}
.chip .n{display:none}
.chip{padding:8px 14px;font-size:23px}
.twrap{grid-template-columns:1fr 880px}
.tline .row{flex-wrap:nowrap}
.tline .tile{font-size:27px;padding:6px 10px}
.tline .tile .ic,.tline .tile .ic svg,.tline .tile .ic .house{height:46px}
.notrows{display:flex;flex-direction:column;gap:16px;align-items:center;transform:none}
.notrows .tile{font-size:34px;padding:8px 14px;border-radius:18px}
.notrows .tile .ic,.notrows .tile .ic svg,.notrows .tile .ic .house{height:56px}
.notrows .tile.P{font-size:44px}
.notrows .tile.P{min-width:24px;padding:8px 0}
.toks{justify-content:flex-end}
.hinfo .exs{font-size:36px}
.hinfo .use{font-size:28px}
.hinfo{gap:22px}

/* ===== round 2 ===== */
img.sym.house{object-fit:contain;width:auto}
.chip .house{width:44px!important;height:36px!important}
.st-head .big .house{width:96px;height:96px}
.formrow .house + .house{margin-inline-start:-6px}
/* the candy s inside the word */
.cs{color:#e0457f;display:inline-block;font-weight:800}
@media (prefers-reduced-motion:no-preference){.cs{animation:sland .85s cubic-bezier(.3,.8,.3,1.2) both}}
@keyframes sland{0%{transform:translate(.5em,-1.5em) scale(.45);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}
/* narrator bubbles */
.narr{display:flex;align-items:flex-end;gap:10px;margin-inline-start:auto;flex:none;max-width:560px}
.narr img{height:96px;width:auto;flex:none}
.narr p{margin:0 0 30px;background:#fff;border:2px solid #dcd6ef;border-radius:22px 22px 22px 6px;padding:10px 16px;font-size:22px;line-height:1.35;color:#4c4f72;box-shadow:0 6px 16px #6f69a01a}
.narr p:empty{display:none}
.st-head .narr + .more{margin-inline-start:16px}
.home .narr{margin:26px 0 0;max-width:none}
/* world (3D opening) */
.world{position:fixed;inset:0;z-index:5;background:radial-gradient(ellipse at 50% 30%,#3a3f86 0%,#232860 45%,#141838 100%);overflow:hidden;transition:opacity .45s}
body.staging .world{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
body:not(.staging) .viewport{visibility:hidden}
.mtitle{position:absolute;top:22px;left:0;right:0;text-align:center;z-index:4;pointer-events:none;color:#fff;text-shadow:0 2px 12px #000a;display:flex;flex-direction:column;align-items:center}
.mtitle .en{font-size:clamp(28px,3.4vw,58px);font-weight:800;letter-spacing:-.5px}
.mtitle small{font-size:clamp(16px,1.5vw,26px);color:#dfe3ff}
.greet{position:absolute;right:2.2vw;bottom:2.4vh;z-index:4;display:flex;align-items:flex-end;gap:6px;max-width:min(560px,46vw)}
.greet img{height:clamp(90px,13vh,150px);width:auto;filter:drop-shadow(0 6px 14px #0008)}
.greet img.g2{margin-inline-start:-26px}
.greet .gb{background:#fbfaffee;color:#30335a;border-radius:24px 24px 24px 6px;padding:14px 18px;margin-bottom:58px;font-size:clamp(15px,1.25vw,22px);line-height:1.4;box-shadow:0 10px 30px #0006}
.greet .gb p{margin:0 0 10px}
.startbtn{border:0;border-radius:16px;background:#8678c6;color:#fff;font-size:1.05em;font-weight:700;padding:9px 20px}
.hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#cfd5ff;font-size:clamp(13px,1vw,18px);margin:0;z-index:3;pointer-events:none;transition:opacity .6s}
.hint.gone{opacity:0}
.maplist{position:absolute;inset:18vh 8vw 24vh;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;z-index:3}
body.three .maplist{display:none}
.maplist button{border:0;border-radius:18px;background:#ffffffe6;color:#30335a;font-size:clamp(15px,1.4vw,24px);font-weight:700;display:flex;align-items:center;gap:10px;padding:12px 16px}
.maplist .n{display:grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:#8678c6;color:#fff;font-size:.8em}
.mapb{font-size:28px!important}
.brand{cursor:pointer}
/* figure: the character steps in beside the stick figure */
.figpair{display:flex;align-items:flex-end;gap:10px}
.buddy{height:250px;width:auto;opacity:0;transition:opacity .4s}
.buddy.on{opacity:1}
/* ---------- houses: gradual reveal ---------- */
.hst{gap:8px}
.hhead{display:flex;align-items:center;gap:26px}
.ftabs{display:flex;gap:10px;flex:none}
.ft{display:flex;align-items:center;gap:8px;border:2px solid #dcd8ec;background:#fff;border-radius:18px;padding:6px 14px 6px 10px;font-size:26px;font-weight:800;color:#4b4d72}
.ft img,.ft .house{height:46px;width:auto}
.ft[aria-pressed=true]{background:#f4f1fd;border-color:#9e94d4;box-shadow:inset 0 -4px 0 #b6acdf}
.hprin{margin:0;font-size:22px;line-height:1.35;color:#5d6082;background:#f6f4fc;border:2px dashed #d9d4ee;border-radius:16px;padding:8px 14px}
.hmean{margin:0;font-size:28px;color:#3f4268}
.hscene{position:relative;height:410px;flex:none}
.bld{position:absolute;bottom:0;transition:transform .9s cubic-bezier(.3,.8,.25,1),opacity .7s}
.bld img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 18px #6f69a033)}
.bld.main{left:50%;width:470px;transform:translateX(-50%) translateY(30px);opacity:0;z-index:3}
.bld.main.on{transform:translateX(-50%);opacity:1}
.bld.main.tower{width:290px}
.bld.main.modal{width:500px}
.hscene.haspast .bld.main{left:56%}
.bld.wing{width:330px;z-index:2;opacity:0}
.bld.wing.past{left:calc(56% - 235px - 300px);transform:translateX(220px) rotateY(60deg) scale(.85);transform-origin:right bottom}
.bld.wing.fut{left:calc(56% + 225px);width:300px;transform:translateX(-200px) scale(.8);transform-origin:left bottom}
.hscene.hasfut .bld.main{left:50%}
.hscene.hasfut .bld.wing.past{left:calc(50% - 235px - 300px)}
.hscene.hasfut .bld.wing.fut{left:calc(50% + 225px)}
.bld.wing.on{transform:none;opacity:1}
.bld.wing.past.on{filter:sepia(.25)}
.roof{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none}
.roof span{font-family:InterL,Rubik,sans-serif;font-weight:900;font-size:64px;letter-spacing:4px;color:#4d3f6e;text-shadow:0 2px 0 #fff8}
.tower .roof span{font-size:46px;letter-spacing:3px}
.modal .roof span{font-size:46px}
.win{position:absolute;display:flex;align-items:center;justify-content:center}
.win>span{font-family:InterL,Rubik,sans-serif;font-weight:800;font-size:38px;color:#2f3256;background:#fffdf5f0;border-radius:12px;padding:2px 8px;box-shadow:0 2px 6px #0002;white-space:nowrap}
.modal .win>span{font-size:26px;padding:2px 5px}
.tower .win span,.fut .win>span{font-size:34px}
.wtag{position:absolute;bottom:-8px;z-index:4;font-size:20px;font-weight:700;padding:3px 12px;border-radius:999px;opacity:0;transition:opacity .6s .4s;font-family:InterL,Rubik,sans-serif}
.wtag.on{opacity:1}
.wtag.past{left:calc(56% - 235px - 300px + 100px);background:#eadcc0;color:#6d5a3d;border:2px solid #c9b48c}
.hscene.hasfut .wtag.past{left:calc(50% - 235px - 300px + 100px)}
.wtag.fut{left:calc(50% + 225px + 80px);background:#e6e0f6;color:#5d4f8e;border:2px solid #c4b8e6}
.nofut{position:absolute;left:calc(56% + 250px);bottom:30px;width:300px;height:260px;border:3px dashed #c9c3e3;border-radius:28px;background:#f8f6fdcc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:24px;color:#5d6082;opacity:0;transition:opacity .6s;pointer-events:none}
.nofut.on{opacity:1;pointer-events:auto}
.nofut img,.nofut .house{height:110px;width:auto}
.cmp{position:absolute;right:0;top:40px;display:flex;flex-direction:column;gap:18px;opacity:0;transform:translateX(30px);transition:opacity .6s,transform .6s;direction:ltr}
.cmp.on{opacity:1;transform:none}
.cmp .cl{display:flex;align-items:flex-end;gap:8px}
.cmp .tile{font-size:34px;min-width:90px;padding:8px 12px}
.cmp .tile .ic,.cmp .tile .ic svg,.cmp .tile .ic .house{height:50px}
.cmp .q{font-size:48px;font-weight:800;color:#6d6f8e}
.hcards{display:flex;justify-content:center;gap:14px;min-height:180px}
.hcard{width:270px;background:#fff;border:2px solid #e2def0;border-radius:20px;padding:10px 14px;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s,border-color .3s;position:relative}
.hcard.on{opacity:1;transform:none}
.hcard.cur{border-color:#a99fdc;box-shadow:0 8px 20px #6f69a022}
.hcard.past{background:#fbf6ec;border-color:#e6d8bb}
.hcard.fut{background:#f6f3fd;border-color:#d8cfef;width:390px}
.hcard .hw{font-family:InterL,Rubik,sans-serif;font-size:44px;font-weight:800;color:#2f3256;position:relative;display:inline-block}
.hcard .hw .badge{top:-14px;right:-58px;width:58px;height:34px}
.hcard .hhe{font-size:20px;color:#6a6d8c}
.who{display:flex;align-items:center;gap:8px;font-size:26px;font-weight:700;color:#4b4a78;margin-top:4px;direction:ltr}
.who svg.fig{height:46px;width:auto}
.who .heb{direction:rtl;font-family:Rubik}
.who .cnd{height:26px;width:auto}
.hex{display:flex;flex-direction:column;gap:2px;margin-top:6px;font-size:21px;color:#5a5d80;font-family:InterL,Rubik,sans-serif}
.hctl{flex:none;display:flex;align-items:center;gap:14px;direction:rtl}
.hnext{border:0;background:#8678c6;color:#fff;border-radius:18px;font-size:28px;font-weight:700;padding:12px 26px;box-shadow:0 6px 16px #8678c655}
.hrst,.hall{border:2px solid #d4cfe8;background:#fff;border-radius:16px;font-size:22px;padding:8px 16px;color:#55587a}
.hdots{display:flex;gap:7px;align-items:center}
.hdots i{display:block;width:14px;height:14px;border-radius:50%;background:#dcd8ec}
.hdots i.done{background:#b2a8dd}
.hdots i.cur{background:#8678c6;transform:scale(1.25)}
.hsay{position:absolute;top:250px;left:56px;max-width:420px;z-index:6}
.hsay .narr{margin:0}
.hsay .narr{flex-direction:row-reverse}.hsay .narr img{height:120px}.hsay .narr p{border-radius:22px 22px 6px 22px}
.hsay .narr p{font-size:25px}
/* ---------- question & negation ---------- */
.nqtabs{margin-bottom:14px}
.nqbox{position:relative}
.notrow{display:flex;justify-content:center;align-items:flex-end;gap:16px;direction:ltr;margin:40px 0 10px;min-height:190px}
.notrow .tile{font-size:64px;min-width:150px;padding:16px 24px}
.notrow .tile .ic,.notrow .tile .ic svg,.notrow .tile .ic .house{height:100px}
.tile.gap{border:4px dashed #c9c5dc;background:#f8f7fc;color:#b0aec6;min-width:170px;height:190px;justify-content:center;font-size:70px}
.tile.N.wob{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){.tile.N.wob{animation:wob 1.6s ease-in-out infinite}}
@keyframes wob{0%,100%{transform:rotate(-9deg) translateY(-6px)}50%{transform:rotate(9deg) translateY(-6px)}}
.tile.N.lean{transform:rotate(-7deg);transform-origin:0 100%;transition:transform .5s}
.nsent{text-align:center;font-family:InterL,Rubik,sans-serif;font-size:52px;font-weight:800;color:#3b3d63;margin:10px 0 0}
.nnote{text-align:center;font-size:24px;color:#6a6d8c;min-height:34px;margin:6px 0}
.nctl{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:10px;flex-wrap:wrap}
.hbtn{display:flex;align-items:center;gap:10px;border:2px solid #cfcae6;background:#fff;border-radius:18px;font-size:26px;font-weight:700;padding:8px 18px;color:#4b4d72}
.hbtn img{height:56px;width:auto}
.hpick{display:flex;align-items:center;gap:8px;font-size:22px;color:#6a6d8c}
.hpick button{border:2px solid #dcd8ec;background:#fff;border-radius:14px;font-size:26px;font-weight:700;padding:6px 14px;font-family:InterL,Rubik,sans-serif}
.hpick button[aria-pressed=true]{background:#f1eefb;border-color:#9e94d4}
.inst{font-size:26px;color:#5d6082;text-align:center;margin:0}
.board.big .tile{font-size:66px;min-width:150px;padding:16px 24px}
.board.big .tile .ic,.board.big .tile .ic svg,.board.big .tile .ic .house{height:110px}
.board.big .tile.P{font-size:80px}
/* ---------- verbs ---------- */
.vw2{display:grid;grid-template-columns:330px 1fr;gap:34px;height:100%}
.vpics{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.vpic{border:3px solid #e2def0;background:#fff;border-radius:20px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:0}
.vpic img{width:136px;height:136px;border-radius:14px}
.vpic span{font-family:InterL,Rubik,sans-serif;font-size:28px;font-weight:800;color:#2d5f8f}
.vpic small{font-size:17px;color:#7b7e9a}
.vpic[aria-pressed=true]{border-color:#7fa6cc;background:#f2f7fc}
.vmain{display:flex;flex-direction:column;gap:16px}
.vprin{display:flex;gap:10px;flex-wrap:wrap}
.vprin button{border:2px solid #cfd9e8;background:#fff;border-radius:16px;font-size:25px;font-weight:700;padding:8px 18px;color:#3d5f86}
.vprin button[aria-pressed=true]{background:#e6eef8;border-color:#7fa6cc}
.vtxt{margin:0;font-size:29px;line-height:1.4;color:#3f4268;min-height:84px}
.vforms{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.vf{background:#fff;border:3px solid #e3e1ee;border-radius:22px;padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .4s,border-color .4s,transform .4s}
.vf.dim{opacity:.42}
.vf.hl{border-color:#7fa6cc;background:#f5f9fd}
.vk{font-family:InterL,Rubik,sans-serif;font-weight:800;font-size:26px;color:#7b7e9a}
.vw{font-family:InterL,Rubik,sans-serif;font-weight:800;font-size:54px;color:#2d5f8f;position:relative}
.vw .badge{top:-24px;right:-46px;width:56px;height:34px}
.vt{font-family:InterL,Rubik,sans-serif;font-weight:800;font-size:24px;padding:2px 12px;border-radius:999px;background:#e8eef7;color:#3d5f86}
.vt.heb{font-family:Rubik;background:#f6eadf;color:#8a5f3d}
.vt.base{background:#eef0f6;color:#7b7e9a}
.vf.irr .vw{color:#8a5f3d}
.vex{font-size:21px;color:#5a5d80;text-align:center;font-family:InterL,Rubik,sans-serif}
/* ---------- tenses ---------- */
.twrap2{display:grid;grid-template-columns:1fr 360px;gap:30px;height:100%}
.tplay{display:flex;align-items:center;justify-content:center}
.playbtn{border:0;border-radius:18px;background:#8678c6;color:#fff;font-size:24px;font-weight:700;padding:10px 16px}
.playbtn[aria-pressed=true]{background:#6d6f8e}
.tgrid .ch .house{height:70px}
.tgrid .ch span{display:block}
.tcell .tq{display:none;font-size:60px;color:#b3b0c9;font-weight:800}
.tgrid.playing .tcell:not(.solved) .tm{display:none}
.tgrid.playing .tcell:not(.solved) .tq{display:block}
.tside{display:flex;flex-direction:column;gap:20px;justify-content:center}
.tinfo{font-size:25px;color:#5d6082;line-height:1.4;margin:0}
.tpop{position:absolute;left:56px;right:56px;top:20px;bottom:10px;background:#fffefe;border:3px solid #d9d4ee;border-radius:34px;padding:30px 44px;box-shadow:0 30px 70px #4f4a8040;z-index:30;display:none;flex-direction:column;gap:20px;transform-origin:0 0}
.tpop.open{display:flex}
.tpop .x{position:absolute;top:18px;left:20px;border:0;background:#f0eef8;border-radius:14px;width:54px;height:54px;font-size:28px}
.ttl{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ttl h3{margin:0;font-family:InterL,Rubik,sans-serif;font-size:64px;font-weight:900;padding:6px 30px;border-radius:999px;background:#f6e9b4;color:#4a3f1c}
.ttl.past h3{background:#eadcc0;color:#5d4a2c}
.ttl.future h3{background:#e2dbf6;color:#43386e}
.ttl .the{font-size:34px;font-weight:700;color:#4b4d72}
.ttl .tmean{font-size:24px;color:#7b7e9a}
.bigpat{display:flex;align-items:center;justify-content:center;gap:22px}
.bigpat .bp{display:flex;flex-direction:column;align-items:center;gap:6px}
.bigpat .bpi{display:flex;align-items:flex-end;height:120px}
.bigpat .bpi svg,.bigpat .bpi img{height:120px;width:auto}
.bigpat b{font-family:InterL,Rubik,sans-serif;font-size:50px;font-weight:900;color:#2f3256}
.bigpat .pl{font-size:60px;color:#a3a1bb;font-weight:800}
.bigpat.game .bp svg{height:120px;width:auto}
.slot{display:inline-flex;align-items:center;justify-content:center;min-width:260px;height:110px;border:4px dashed #c9c5dc;border-radius:22px;font-family:InterL,Rubik,sans-serif;font-size:48px;font-weight:900;color:#b0aec6;padding:0 20px}
.slot.ok{border-style:solid;border-color:#b9b2df;color:#2f3256;background:#f8f6fd}
.gtray{display:flex;flex-direction:column;gap:12px;align-items:center}
.gtray>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;font-size:24px;color:#6a6d8c}
.gopt{border:2px solid #d4cfe8;background:#fff;border-radius:16px;font-size:28px;font-weight:700;padding:8px 18px;color:#3b3d63}
.tlines{display:flex;flex-direction:column;gap:12px;align-items:center}
.tpop .tline .tile{font-size:36px}
.tpop .tline .tile .ic,.tpop .tline .tile .ic svg,.tpop .tline .tile .ic .house{height:54px}
.swap{display:flex;gap:14px;justify-content:center}
.swap button{border:2px solid #cfcae6;background:#fff;border-radius:16px;font-size:24px;font-weight:700;padding:8px 18px;color:#4b4d72}
/* ---------- the lock ---------- */
.lockw{display:flex;flex-direction:column;align-items:center;gap:18px;height:100%}
.lrow{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:10px}
.lslot{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .5s cubic-bezier(.3,.8,.3,1.2)}
.lslot .hic{height:86px;display:flex;align-items:flex-end;order:-1}
.lslot .hic svg,.lslot .hic img{height:86px;width:auto}
.lslot.h .hic{cursor:pointer}
.reel{position:relative;display:flex;flex-direction:column;align-items:center;outline:none}
.reel:focus-visible .rwin{box-shadow:0 0 0 4px #b6acdf}
.rwin{height:248px;overflow:hidden;border-radius:26px;background:linear-gradient(#e9e6f3,#fff 30%,#fff 70%,#e9e6f3);border:3px solid #cfc9e6;padding:0 22px;position:relative}
.rstrip{transition:transform .33s cubic-bezier(.3,.8,.3,1.1)}
.ritem{height:124px;display:flex;align-items:center;justify-content:center;font-family:InterL,Rubik,sans-serif;font-size:76px;font-weight:800;color:#b7b5c9;white-space:nowrap}
.ritem.on{color:#2f3256}
.sreel .rwin{background:linear-gradient(#ece9f8,#faf9ff 30%,#faf9ff 70%,#ece9f8);border-color:#c7bfe9}
.vreel .rwin{background:linear-gradient(#e1ebf4,#f7fafd 30%,#f7fafd 70%,#e1ebf4);border-color:#a9c4de}
.hreel .rwin{background:linear-gradient(#eef4fa,#fdfdfb 30%,#fdfdfb 70%,#eef4fa);border-color:#bdd0e4}
.ritem .noh{font-family:Rubik;font-size:40px}
.ra{border:0;background:none;font-size:26px;color:#8a87ad;padding:0 10px;line-height:1}
.lobj,.lwh,.lp{font-family:InterL,Rubik,sans-serif;font-size:76px;font-weight:700;color:#4f5170;align-self:center;margin-top:92px;white-space:nowrap}
.lwh{color:#8e62a8;font-weight:800}
.lp{font-size:90px}
.lrow .tile.N{font-size:60px;align-self:center;margin-top:92px}
.lslot.v .cslot{position:absolute;top:-6px;right:-34px;width:70px;height:44px;border:3px dashed #e3b8c0;border-radius:22px;opacity:0;transition:opacity .4s}
.lslot.v .cslot.full{border-color:transparent}
.lslot.v .cslot svg{width:70px;height:44px}
.lslot.v.bad .cslot,.lslot.v .cslot.full{opacity:1}
.lslot.bad{transform:rotate(-7deg) translateY(10px)}
.lslot.bad .rwin{border-color:#e3b8c0}
.lslot.misplaced{transform:rotate(8deg) translateY(16px)}
.lslot .badge{top:-10px;right:-40px}
.ltools{display:flex;align-items:center;gap:30px}
.lcandy{display:flex;align-items:center;gap:12px;border:2px solid #f6bcd1;background:#fff3f8;border-radius:20px;font-size:24px;font-weight:700;padding:8px 20px;color:#a3305e}
.lcandy svg{height:44px;width:auto}
.lmsg{font-size:30px;color:#4b4d72;margin:0;max-width:1100px}
.lmsg.err{color:#8a5a64}
.lmodes{margin-top:4px}
.home .formula{align-self:start}
.hcard .hw .badge{top:-10px}

.hdots i{flex:none;height:14px;max-height:14px;align-self:center}
.chips{gap:6px!important;min-width:0}
.chip{font-size:19px!important;padding:6px 10px!important;gap:6px!important;border-radius:14px!important}
.chip .n{display:none}
.chip svg,.chip .house{width:28px!important;height:28px!important}
.top{gap:16px!important;padding:0 26px!important}
.brand .en{font-size:28px!important}.brand small{font-size:18px!important}
.greet{right:auto!important;left:2vw;top:15vh;bottom:auto!important;flex-direction:row-reverse}
.greet .gb{margin-bottom:40px!important;border-radius:24px 24px 6px 24px!important}
.greet img.g2{margin-inline-start:0!important;margin-inline-end:-26px}

[lang=en]{direction:ltr;unicode-bidi:isolate}
.hrow{display:flex;align-items:center;gap:20px;justify-content:space-between}
.hmean{flex:1}
.hscene{margin-top:26px}
.hd{display:block;width:14px;height:14px;border-radius:50%;background:#dcd8ec;flex:none}
.hd.dn{background:#b2a8dd}.hd.cur{background:#8678c6;transform:scale(1.25)}
.bld.main.modal{width:450px}

.rwin::before,.rwin::after{content:"";position:absolute;left:0;right:0;height:70px;z-index:2;pointer-events:none}
.rwin::before{top:0;background:linear-gradient(#f3f1f9,#f3f1f900)}
.rwin::after{bottom:0;background:linear-gradient(#f3f1f900,#f3f1f9)}
.rwin{box-shadow:inset 0 0 0 2px #fff,0 10px 26px #6f69a022}
.ritem.on{text-shadow:0 2px 0 #fff}
.vstage{display:flex;gap:24px;align-items:center;margin-top:6px}
.vstage img{width:220px;height:220px;border-radius:26px;box-shadow:0 10px 24px #6f69a022;flex:none}
.vtl{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.vtc{background:#fff;border:2px solid #e3e1ee;border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.vtc small{font-size:20px;color:#8a8cab;font-weight:700}
.vtc b{font-size:28px;color:#2f3256;font-family:InterL,Rubik,sans-serif}
.vtc>span{align-self:flex-start;font-size:19px;font-weight:800;padding:1px 10px;border-radius:999px;background:#e8eef7;color:#3d5f86}
.vtc.past{background:#fbf6ec;border-color:#e6d8bb}
.vtc.perf{background:#f2f8ef;border-color:#cfe2c6}

[hidden]{display:none!important}
.tpop{top:-24px!important;bottom:0!important;padding:24px 40px!important;gap:14px!important}
.ttl h3{font-size:56px!important}
.bigpat .bpi{height:100px}.bigpat .bpi svg,.bigpat .bpi img{height:100px}
.bigpat b{font-size:44px}
.tpop .tline .tile{font-size:30px;min-width:80px;padding:6px 12px}
.tpop .tline .tile .ic,.tpop .tline .tile .ic svg,.tpop .tline .tile .ic .house{height:40px}
.tpop .tline .tile.P{font-size:40px;min-width:30px}
.tlines{gap:8px}
.slot{height:96px}

.st .home{height:100%;align-content:center}
.four .card svg,.four .card .house{height:150px!important}

.greet{left:24vw!important;top:auto!important;bottom:6vh!important}
.hsay{max-width:560px!important}
.hsay .narr p{max-width:440px}

.greet{left:31vw!important;max-width:min(560px,36vw)!important}
.greet img{height:clamp(80px,11vh,140px)!important}

/* ===== round 3: opening screen (four symbols) ===== */
.st .home{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;gap:0;max-width:1560px;margin:0 auto}
.home h1{font-size:84px!important;margin:0 0 14px}
.home .sub{font-size:36px;margin:0 0 54px}
.home .four{grid-template-columns:repeat(4,300px);gap:34px;margin:0 0 44px;justify-content:center}
.four .card{font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:30px 14px 26px;border-radius:30px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;box-shadow:0 6px 0 #e9e7f3}
.four .card .ico{display:flex;align-items:center;justify-content:center;width:170px;height:170px}
.four .card .ico svg{height:150px!important;width:150px!important;margin:0;overflow:visible}
.four .card .ico svg.fig{width:auto!important;height:160px!important}
.four .card b{font-size:34px;margin-top:16px}
.four .card span:not(.ico){font-size:25px}
.four .card:hover,.four .card:focus-visible{transform:translateY(-6px);border-color:#b9b2df;box-shadow:0 12px 0 #e2def3}
.four .card:focus-visible{outline:4px solid #8678c6;outline-offset:4px}
.four .card:active{transform:translateY(-2px)}
.home .narr{margin:0!important;justify-content:center}
.home.reveal .rv{opacity:0;animation:rvIn .7s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes rvIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* stick man: an occasional wave or wink (never under reduced motion) */
.figlive .armA,.figlive .armB{transform-box:view-box;transform-origin:32px 41px}
.figlive .face{opacity:0;transition:opacity .25s}
.figlive .face .eyeL{opacity:0}
.figlive.wave .armB{animation:figWave 1.6s ease-in-out}
@keyframes figWave{0%{transform:none}22%{transform:rotate(-58deg)}38%{transform:rotate(-36deg)}54%{transform:rotate(-60deg)}70%{transform:rotate(-38deg)}86%{transform:rotate(-54deg)}100%{transform:none}}
.figlive.wink .face{opacity:1}
.figlive.wink .face .eyeL{animation:figWinkA 1.4s steps(1,end)}
.figlive.wink .face .eyeLo{animation:figWinkB 1.4s steps(1,end)}
@keyframes figWinkA{0%{opacity:0}35%{opacity:1}72%{opacity:0}100%{opacity:0}}
@keyframes figWinkB{0%{opacity:1}35%{opacity:0}72%{opacity:1}100%{opacity:1}}
@media (prefers-reduced-motion: reduce){.home.reveal .rv{opacity:1;animation:none}.figlive .armB,.figlive .face *{animation:none!important}}

/* ===== round 3: the sentence = a notebook strip (ruled guide lines, pencil, handwriting, symbol drawn above the word, no frames) ===== */
@font-face{font-family:Hand;src:url(fonts/Hand.woff2) format("woff2");font-display:swap}
.nb{--ink2:#34385e;position:relative;background:#fffef9!important;border:2px solid #e6e1d3!important;border-radius:14px!important;box-shadow:0 3px 0 #ece7da}
.nb::after{content:"";position:absolute;width:150px;height:30px;right:26px;bottom:-14px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%2028%22%3E%3Cpath%20d%3D%22M10%205h96v18H10z%22%20fill%3D%22%23f4cf6b%22%20stroke%3D%22%23b8923a%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M10%2011h96M10%2017h96%22%20stroke%3D%22%23e0b44f%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M106%205l24%209-24%209z%22%20fill%3D%22%23f3dcc0%22%20stroke%3D%22%23b8923a%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M123%2011.4l7%202.6-7%202.6z%22%20fill%3D%22%234a4c66%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%2212%22%20height%3D%2218%22%20rx%3D%223%22%20fill%3D%22%23e9a3ad%22%20stroke%3D%22%23c07c87%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M10%205v18%22%20stroke%3D%22%23b9b9c8%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;transform:rotate(-8deg);pointer-events:none;filter:drop-shadow(0 3px 2px #0001)}
@media (prefers-reduced-motion:no-preference){.nb::after{animation:pencilIn .9s ease-out .2s backwards}}
@keyframes pencilIn{from{opacity:0;transform:translate(-60px,-10px) rotate(-14deg)}to{opacity:1;transform:rotate(-8deg)}}
.nb .row,.nb .notrow,.nb .cl{--g:#a9bde0;background:linear-gradient(90deg,transparent 30px,#f1b9bd 30px 32px,transparent 32px) 0 0/100% 100% no-repeat,linear-gradient(var(--g),var(--g)) 0 100%/100% 2.5px no-repeat,repeating-linear-gradient(90deg,#c8d5ec 0 9px,transparent 9px 16px) 0 calc(100% - .46em)/100% 1.5px no-repeat,linear-gradient(#d9e2f1,#d9e2f1) 0 calc(100% - .92em)/100% 1.5px no-repeat;padding:0 22px 0 64px!important;gap:.42em!important}
.nb .tile{background:transparent!important;border:0!important;box-shadow:none!important;padding:0 2px!important;min-width:0!important;gap:.1em!important;font-size:1em!important;border-radius:0!important}
.nb .tile .w{font-family:Hand,"Comic Sans MS","Segoe Print",cursive;font-weight:400;color:var(--ink2);line-height:1;margin-bottom:-.2em;letter-spacing:.01em}
.nb .tile.X .w{color:#5c5f7e}
.nb .tile .ic,.nb .tile .ic svg,.nb .tile .ic .house{height:.8em!important;width:auto}
.nb .tile .ic svg.fig{height:1em!important}
.nb .tile .ic{height:1em!important;align-items:flex-end}
.nb .tile.P{margin-left:-.42em}
.nb .tile .ic{margin-bottom:.2em;opacity:.92}
.nb .tile.P{font-family:Hand,cursive;color:var(--ink2);line-height:1}
.nb .tile.gap{border:3px dashed #c9c5dc!important;border-radius:16px!important;background:#f8f7fc!important;height:auto!important;min-width:2em!important;padding:.2em .3em!important;color:#b0aec6;font-size:.9em!important;margin-bottom:.1em}
.nb .badge.candy{top:.12em;right:-.78em;width:.72em;height:.72em;scale:1}
#figDemo.nb .row{flex:1 1 auto}
.nb .vmark{display:none}
#figDemo.nb .row{font-size:56px}
#figDemo.nb{padding:26px 26px 30px}
.nb.nbn{margin:26px 0 8px;padding:22px 10px 30px}
.nb .notrow{font-size:70px;margin:0!important;min-height:0!important;justify-content:center;padding:0 22px!important}
.board.big.nb{padding:26px 10px 34px}
.board.big.nb .row{font-size:66px;min-height:0}
.tlines.nb{padding:22px 16px 30px;gap:18px}
.tlines.nb .tline .row{font-size:38px;flex:1}
.tlines.nb::after{width:110px;height:22px;bottom:-10px}
.cmp.nb{padding:16px 10px 18px}
.cmp.nb .cl{font-size:36px}
.cmp.nb::after{display:none}
.cmp .q{font-family:Hand,cursive;font-weight:400}
/* stick man is busy giving birth to bodies: groups fade, items emerge from him */
.figwrap .grp{transition:opacity .4s}
.closed .grp{transform:none}
svg.badge.candy{scale:1.3}

/* UI icons: Lucide inline SVG (no emoji) */
svg.lu{display:inline-block;width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ibtn svg.lu{width:30px;height:30px;vertical-align:middle}
.x svg.lu{width:.9em;height:.9em;vertical-align:-.1em}
.nox{color:#c46b6b}
.rotate svg.lu{margin-inline-start:6px}

/* r4 — הגוף: the learner clicks the stick man; each click gives birth to the next pronoun */
.figbtn{border:0;background:none;padding:6px 10px;border-radius:26px;cursor:pointer;line-height:0}
.figbtn:focus-visible{outline:4px solid var(--fig);outline-offset:4px}
.bigfig .figbtn svg{height:330px;width:auto}
.figbtn.nudge svg{animation:figNudge 1.5s ease-in-out .6s 10}
@keyframes figNudge{0%,100%{transform:none;filter:none}50%{transform:scale(1.06);filter:drop-shadow(0 0 14px rgba(134,120,198,.75))}}
.fighint{margin:0;display:flex;align-items:center;gap:12px;font-size:30px;font-weight:700;color:#fff;background:var(--ink);border-radius:18px;padding:12px 26px;transition:opacity .35s,transform .35s}
.fighint svg.lu{width:34px;height:34px}
.fighint.gone{opacity:0;transform:translateY(10px);pointer-events:none}
.tok.hid,.grp.hid,.figinst.hid,.demo.hid{visibility:hidden}
.grp h3 .cnt{font-size:22px;font-weight:600;color:#6b6e8f;margin-inline-start:10px}
.tok.rep{flex-direction:column;align-items:flex-start;gap:0;line-height:1.1}
.tok .eqs{font-family:InterL,Rubik;font-weight:600;font-size:20px;color:#6b6e8f;direction:ltr}
.figinst{margin:0;display:flex;align-items:center;gap:12px;font-size:32px;font-weight:700;color:#3f3d64;background:#fff6d6;border:2px solid #e8c95a;border-radius:20px;padding:12px 22px;align-self:flex-start}
.figinst svg.lu{width:36px;height:36px;color:#b8901c}
/* המפונקים: the 7 pronouns are one set; names are replacements, apart */
.cpick{gap:26px;align-items:stretch}
.cset{display:flex;gap:10px;align-items:center;flex-wrap:wrap;position:relative;padding-top:34px}
.crep{border-left:3px dashed #c9c4dd;padding-left:24px}
.clab{position:absolute;top:0;right:0;font-family:Rubik;font-size:22px;font-weight:600;color:#55587a;direction:rtl}
.cpick button small{font-size:19px;font-weight:600;color:#6b6e8f;margin-inline-start:8px}
#sndBtn[aria-pressed=true]{color:#8a8ca8}
@media (prefers-reduced-motion: reduce){.figbtn.nudge svg{animation:none}.figbtn.nudge{outline:3px dashed var(--fig);outline-offset:4px}}
/* the guide character beside its speech bubble: bigger, more present (her note, Nov 11) */
.narr img{height:180px}
.st-head .narr{margin-top:-14px;margin-bottom:-14px}
.narr p{font-size:25px;margin-bottom:46px}
.hsay .narr img{height:220px}
.hsay .narr p{font-size:27px}
/* פעלי העזר: the guide stands in the free left corner, bubble above it; the WILL notebook has its own column on the right — nothing overlaps */
.hsay{top:190px;left:56px;width:350px;max-width:350px!important}
.hsay .narr{flex-direction:column-reverse!important;align-items:flex-end;gap:8px;max-width:none}
.hsay .narr img{height:190px}
.hsay .narr p{max-width:350px!important;margin:0;font-size:25px;border-radius:22px 22px 22px 6px}
.cmp.nb{position:absolute;left:auto;right:10px;width:560px;top:30px}
/* שאלה ושלילה: 1 · הסבר / 2 · תרגול */
.nqstage{justify-content:center;margin:0 0 12px}
.nqstage button{font-size:26px;min-width:150px}
.nqstage button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.pdots{display:flex;justify-content:center;gap:10px;margin:10px 0 0}
.pdots i{width:16px;height:16px;border-radius:50%;background:#d9d6e6}
.pdots i.cur{background:var(--ink)}
.pdots i.ok{background:var(--ok)}
.phe{text-align:center;font-size:30px;color:#3f4266;margin:4px 0 0;font-weight:600}
.pmsg{font-size:27px;font-weight:600}
.pmsg.good{color:#2f6f53}
.pmsg.bad{color:#9a4b12}
.pmsg b[lang=en]{font-size:34px}
.ppick{gap:10px;direction:ltr}
.ppick button{display:flex;align-items:center;gap:8px;font-size:30px;padding:8px 16px}
.ppick button .house{height:40px;width:auto}
.pdone{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:70px}
.pwell{font-size:44px;font-weight:800;color:#2f6f53;margin:0}

/* tense game picker: one column under each slot (r5) */
.bigpat.game{display:grid;grid-template-columns:repeat(5,auto);justify-content:center;align-items:center;column-gap:22px;row-gap:8px}
.bigpat.game .gcol{grid-row:2;display:flex;flex-direction:column;align-items:stretch;gap:5px;align-self:start}
.bigpat.game .gcol[data-for="sH"]{grid-column:3}
.bigpat.game .gcol[data-for="sV"]{grid-column:5}
.bigpat.game .gcol.done{display:none}
.glab{font-size:24px;font-weight:800;color:#55587a;text-align:center;padding-bottom:2px;border-bottom:3px solid #e3e0f0;margin-bottom:3px}
.bigpat.game .gopt{font-size:26px;padding:3px 16px;border-radius:14px;text-align:center;white-space:nowrap}

/* v29 — timeline graphs in the tenses pop (עבר right · עכשיו middle · עתיד left, like the grid) */
.tgrid .rh{border:0;background:none;cursor:pointer;border-radius:18px;transition:background .25s;align-items:flex-start}
.tgrid .rh:hover,.tgrid .rh:focus-visible{background:#efedf7}
.tgrid .rh .rtl-b{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:18px;font-weight:700;color:#55587a;background:#fff;border:2px solid #e3e1ee;border-radius:999px;padding:3px 12px 3px 10px}
.tgrid .rh .rtl-b .lu{width:20px;height:20px}
.tlwrap{position:relative;flex:none}
.tlc{margin:0;background:#fffefb;border:2px solid #ebe6da;border-radius:24px;padding:4px 18px 14px;display:flex;flex-direction:column;align-items:center}
svg.tl{display:block;width:100%;max-width:880px;height:auto;overflow:visible}
svg.tl text{text-anchor:middle;font-weight:800}
svg.tl .tlab{font-family:Rubik,sans-serif;font-size:34px}
svg.tl .tnow{font-family:Rubik,sans-serif;font-size:30px}
svg.tl .tref,svg.tl .tact{font-family:InterL,Rubik,sans-serif;font-size:30px}
.tlx{display:flex;align-items:baseline;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:-6px}
.tlx b{font-family:InterL,Rubik,sans-serif;font-size:34px;font-weight:800;color:#2f3256}
.tlx span{font-size:24px;color:#7b7e9a}
.tlre{position:absolute;top:12px;left:14px;display:flex;align-items:center;gap:6px;border:2px solid #e3e1ee;background:#fff;border-radius:999px;padding:6px 14px 6px 12px;font-size:20px;font-weight:700;color:#55587a}
.tlre .lu{width:22px;height:22px}
.tlre:hover{background:#f3f1fa}
.tlrow{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.tlrow .tlc.sm{flex:1;min-height:0;flex-direction:row;gap:24px;padding:6px 22px;justify-content:space-between}
.tlrow .tlc.sm svg.tl{width:auto;height:100%;max-height:230px;flex:0 1 auto;min-width:0}
.tlrow .tlc.sm .tlh{display:flex;flex-direction:column;gap:4px;width:300px;flex:none}
.tlrow .tlc.sm .tlh b{font-family:InterL,Rubik,sans-serif;font-size:32px;font-weight:900;color:#2f3256}
.tlrow .tlc.sm .tlh span{font-size:24px;color:#5d6082;font-weight:700}
.tlrow .tlc.sm .tlx{flex-direction:column;align-items:flex-start;gap:4px;width:420px;flex:none;margin:0}
.tlrow .tlc.sm .tlx b{font-size:28px}
.tlrow .tlc.sm .tlx span{font-size:21px}
.tlrow .tlre{top:auto;bottom:-6px;left:-6px}
.tbody2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center;min-height:0}
.tbody2.one{display:flex;justify-content:center}
.tbody2 .tlines.nb{align-self:center;align-items:stretch}
.tbody2 .tlines.nb .tline .row{font-size:34px}
.tbody2 .tlc{padding:44px 14px 14px}
.tbody2 .tlx{flex-direction:column;align-items:center;gap:4px;margin-top:0}
.tlrow .tlc.sm svg.tl{height:min(205px,100%);width:auto;max-width:none;flex:none}
.tlrow .tlc.sm .tlh{width:270px}
.tlrow .tlc.sm .tlx{width:400px}
.tbody2 .tlx{margin-top:8px}
.tlrow .tlre{top:-78px;bottom:auto;left:70px}
.tlrow{gap:10px}

/* v30: link back to the English hub (english-games), map screen only */
.hubpill{position:absolute;top:18px;left:20px;z-index:6;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;background:#fbfaffee;color:var(--ink);text-decoration:none;font-size:16px;font-weight:600;line-height:1.2;box-shadow:0 6px 20px #0006;transition:background .2s,box-shadow .2s}
.hubpill svg.lu{width:18px;height:18px;flex:none;fill:none;stroke:var(--verb);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hubpill svg.lu.ar{width:16px;height:16px;stroke:var(--mute)}
.hubpill:hover{background:#fff;box-shadow:0 0 0 2.5px #ffe58a,0 6px 20px #0006}
.hubpill:focus-visible{outline:3px solid #ffe58a;outline-offset:3px}
@media (max-width:760px){.hubpill{top:10px;left:50%;transform:translateX(-50%);font-size:14px;padding:6px 12px;white-space:nowrap}.mtitle{top:54px}}