/* ---------- wave 7: embed mode (inside an iframe) ---------- */
html.embed,html.embed body{min-height:0;background:var(--bg)}
html.embed .wshell{height:var(--eh,100dvh)}
html.embed .topbar{padding:4px 8px;gap:5px}
html.in-frame .topbar a.ibtn[href="#/"]{display:none}
html.embed .topbar h1{font-size:clamp(16px,3vw,21px);gap:6px}
html.embed .topbar h1 .tic{width:28px;height:28px;border-radius:8px}
html.embed .topbar h1 .tic svg{width:22px;height:22px}
html.embed .topbar .ibtn{min-height:36px;min-width:36px}
html.embed .topbar [aria-label="מסך מלא"]{display:inline-flex}
html.embed .panel .copy{font-size:10px;padding:2px 0 0;opacity:.8}
html.embed .home .hero{padding:12px 16px}html.embed .home .hero .art{display:none}
/* narrow / portrait frames: controls ABOVE the board, so a tall or short frame never hides them */
html.embed:not(.embed-wide) .wbody{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr}
html.embed:not(.embed-wide) .panel{order:-1;border-radius:0 0 20px 20px;box-shadow:0 4px 14px rgba(80,60,120,.08);max-height:calc(var(--eh,100dvh)*.42);padding:8px 10px 4px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}
html.embed:not(.embed-wide) .panel .copy{order:99}
html.embed.embed-short:not(.embed-wide) .panel{max-height:calc(var(--eh,100dvh)*.38);gap:5px 6px;padding-top:6px}
html.embed.embed-short .panel .btn{min-height:38px;padding:0 11px;font-size:15px}
html.embed.embed-short .panel .seg button{min-height:34px;padding:0 9px;font-size:14.5px}
html.embed.embed-short .panel .stepper button{width:36px;height:36px}
/* wide, short frames (e.g. 800×450): controls beside the board */
html.embed.embed-wide .wbody{grid-template-rows:1fr;grid-template-columns:1fr minmax(220px,30%)}
html.embed.embed-wide .panel{border-radius:20px 0 0 20px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;max-height:none;padding:10px 10px 4px;box-shadow:4px 0 16px rgba(80,60,120,.08)}
html.embed.embed-wide .panel .copy{margin-top:auto}
html.embed.embed-wide .panel .ctl{justify-content:flex-start}
html.embed.embed-wide .panel .btn{min-height:40px}

/* ---------- wave 7: mode strip ---------- */
.xstrip{flex:none;display:flex;gap:6px;padding:5px 10px;overflow-x:auto;scrollbar-width:none;background:linear-gradient(180deg,#FFFCF8,#FFF7EE);border-bottom:1px solid #F1E7DC}
.xstrip::-webkit-scrollbar{display:none}
.xchip{flex:none;border:none;border-radius:999px;padding:0 13px;min-height:34px;font-size:15px;font-weight:600;white-space:nowrap;box-shadow:inset 0 -2px 0 rgba(0,0,0,.06)}
.xchip.pred{background:var(--lav-l);color:#5a3fa8}.xchip.trap{background:var(--amber-l);color:#8a5d00}.xchip.next{background:var(--mint-l);color:#1d7a61}
.xchip:active{transform:scale(.95)}
@media (min-width:700px){.xstrip{justify-content:center}.xchip{min-height:36px;font-size:16px}}
html.embed .xstrip{padding:3px 8px}html.embed .xchip{min-height:30px;font-size:14px;padding:0 10px}
/* predict / trap layers */
.xlayer .gbox{gap:8px}.xsub{text-align:start!important}
.xlock{pointer-events:none}.gfields.xlock{opacity:.85}
.gopt.wrong{border-color:#E6A6A0;background:var(--coral-l)}
.xlocked{display:inline-block;background:#fff;border-radius:12px;padding:2px 12px;box-shadow:var(--shadow)}
.gvis.xflash{transition:opacity .35s}.gvis.gone{opacity:0;visibility:hidden}
.xreveal{animation:xrev .55s ease-out}
@keyframes xrev{0%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1.03)}100%{transform:scale(1)}}
.xdraw{stroke-dasharray:400;stroke-dashoffset:400;animation:xdraw .6s ease-out forwards}
@keyframes xdraw{to{stroke-dashoffset:0}}
.xbig{font-family:var(--fround);font-weight:700;font-size:clamp(44px,10vw,80px);line-height:1.1;text-align:center;color:var(--ink)}
.xbig sup{font-size:.5em}
.xstack{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}.xstack .gsvg{max-height:90px}
.xrow{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}.xrow .gsvg{max-width:46%;max-height:200px}
.xvs{font-size:20px;color:var(--ink2)}
.xnoruler svg>rect:first-child,.xnoruler svg>line,.xnoruler svg>text{opacity:0}
.xcoins{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;width:min(100%,520px)}
.xcoin{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(9px,2.4vw,13px);font-weight:700;animation:popin .35s both}
.xcoin.h{background:#FFE29A;color:#8a5d00;box-shadow:inset 0 -3px 0 #F4B43C}.xcoin.t{background:#DCEEFC;color:#1f5f93;box-shadow:inset 0 -3px 0 #4C9FE0}
@media (prefers-reduced-motion:reduce){.xreveal,.xdraw,.xcoin{animation:none;stroke-dashoffset:0}}
/* ---------- wave 7: teacher screen ---------- */
.hero-acts{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.btn.tbtn{text-decoration:none;min-height:46px;font-size:17px}
.teach{height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
.teach-bar{flex:none;display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(180deg,#fff,#FFFCF8);box-shadow:0 2px 10px rgba(80,60,120,.07);z-index:2;flex-wrap:wrap}
.teach-bar h1{flex:1;margin:0;font-family:var(--fround);font-size:clamp(18px,3vw,24px);white-space:nowrap}
.teach-bar .btn{min-height:40px;padding:0 12px;font-size:15px}
.teach-grid{flex:1;min-height:0;display:grid;gap:8px;padding:8px;grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
.teach-grid.n3{grid-template-columns:repeat(3,1fr)}
.teach-cell{min-height:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.teach-cell iframe{width:100%;height:100%;border:0;display:block}
.teach .copy{flex:none;padding:2px 0 4px;font-size:11px}
@media (max-width:1099px){.teach-grid.n3{grid-template-columns:1fr 1fr}.teach-grid.n3 .teach-cell:last-child{grid-column:1/-1}}
@media (max-width:760px){.teach{height:auto;min-height:100dvh}.teach-grid{display:flex;flex-direction:column}.teach-cell{height:calc(100dvh - 70px);min-height:520px}}
.teachpick .tp-hero{margin-bottom:8px}
.tp-presets{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 2px}
.tp-presets .cl{font-size:15px;color:var(--ink2);font-weight:600}
.tp-bar{position:sticky;top:0;z-index:4;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;background:rgba(255,247,238,.94);backdrop-filter:blur(6px);padding:8px;border-radius:18px;margin:4px 0 6px}
.tp-cnt{font-weight:700;font-size:16px}
button.card.tp-card{font:inherit;color:inherit;text-align:start;border:2.5px solid transparent;width:100%;position:relative;cursor:pointer}
.tp-card.on{border-color:var(--lav);background:linear-gradient(180deg,#fff,#F3EEFF)}
.tp-n{position:absolute;top:8px;inset-inline-end:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:transparent}
.tp-card.on .tp-n{background:var(--lav)}

/* ---------- wave 7: story overlays ---------- */
.xchip.story{background:var(--coral-l);color:#a8402f}
.xplay{justify-content:flex-start}
.fs-vis{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fs-pie{width:clamp(96px,22vw,150px);height:auto;filter:drop-shadow(0 4px 6px rgba(80,60,120,.15))}
.fs-txt .frac,.gexp .frac{vertical-align:middle}
.fs-plates{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fs-plate{display:flex;align-items:center;gap:6px;background:#fff;border:3px solid var(--c);border-radius:999px;padding:4px 12px 4px 6px;font-size:18px;animation:popin .4s both}
.fs-plate b{width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:15px}
.sd-wrap{display:flex;gap:14px;width:100%;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.sd-side{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 1 220px;max-width:320px}
.sd-clock{width:min(100%,220px)}.sd-clock .gsvg{max-height:220px}
.sd-art{display:flex;gap:10px;align-items:flex-end}.sd-art img{height:64px;width:auto;filter:drop-shadow(0 3px 5px rgba(80,60,120,.15))}
.sd-list{display:flex;flex-direction:column;gap:5px;flex:1 1 260px;max-width:420px}
.sd-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;border:2px solid var(--line);background:#fff;border-radius:14px;padding:6px 10px;font-size:16px;text-align:start;font-family:inherit;color:inherit}
.sd-row.brk{background:#FFF8E6}.sd-row.home{border-style:dashed;background:var(--mint-l)}
.sd-row.on{border-color:var(--lav);background:var(--lav-l)}
.sd-e{font-size:20px}.sd-t{font-weight:600;color:var(--ink2)}
.sd-q{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.gf-row{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.gf-art{width:clamp(70px,18vw,130px);height:auto;filter:drop-shadow(0 4px 6px rgba(80,60,120,.15))}
.gf-vis{flex:0 1 340px}.gf-vis .gsvg{max-height:220px}
.gf-nums{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.gf-n{flex:1 1 220px;max-width:340px;background:var(--bg);border-radius:16px;padding:8px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:600;text-align:center}
.gf-n b{font-size:clamp(18px,3.4vw,24px)}.gf-n small{color:var(--ink2);font-weight:500}
.gf-n.wrap{border:2.5px solid #9CC9EF}.gf-n.candy{border:2.5px solid #F5B7CF}.gf-n img{height:30px;width:auto}
.hp-clue{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}
.hp-dot{width:22px;height:22px;border-radius:50%;display:inline-block;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.hp-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;width:min(100%,520px,calc(100dvh - 330px));min-width:260px;aspect-ratio:1}
.hp-c{border:none;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1.5px #EADFD3;font-size:clamp(10px,2.4vw,16px);font-weight:600;color:var(--ink);padding:0}
.hp-c.on{color:#fff;box-shadow:none}
.hp-done .hp-c:not(.on){opacity:.35}
.hp-xy{width:min(100%,460px,calc(100dvh - 300px));min-width:260px;height:auto;touch-action:manipulation}
.hp-hit{cursor:pointer}
.dc-words{min-height:1.6em;font-size:clamp(22px,4.4vw,32px);font-weight:600;color:var(--ink2);text-align:center}
.dc-words.on{color:var(--ink);background:var(--amber-l);border-radius:14px;padding:2px 14px}
.bb-wrap{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}
.bb-svg{width:min(100%,260px);height:auto;max-height:44vh}
.bb-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:360px}
.bb-btns .btn{font-size:15px;padding:0 10px}
.bk-vis{width:100%;display:flex;justify-content:center}.bk-svg{width:min(100%,520px);height:auto;max-height:50vh}
.bk-eq{font-size:clamp(18px,3.4vw,24px)}
.pl-cards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.pl-card{flex:1 1 240px;max-width:360px;display:flex;align-items:center;gap:10px;border:3px solid var(--c);border-radius:18px;padding:8px 10px;background:#fff}
.pl-card img{height:64px;width:auto}.pl-card b{color:var(--c);font-size:18px}.pl-card .ctl{justify-content:flex-start}
.pl-card .stepper .v{min-width:58px}
.pl-vis{width:100%;display:flex;justify-content:center}.pl-svg{width:min(100%,560px);height:auto;max-height:42vh}
.pl-info{font-size:clamp(17px,3vw,22px)}

.tf.bugs .tf-dot{background:transparent url(../img/bug-red.webp) center/contain no-repeat!important;box-shadow:none!important;border:none!important}
.tf.bugs .tf-dot[data-c="b"]{background-image:url(../img/bug-yellow.webp)!important}

/* ===== new elementary 4: decimals, division, symmetry, solids ===== */
.xrow{display:flex;gap:10px;justify-content:center;align-items:center;width:100%}.xrow .gsvg{max-width:46%;max-height:min(30vh,240px)}
/* decimals */
.dg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.dg-row{display:flex;align-items:center;justify-content:center;gap:22px}.dg-row.col{flex-direction:column;gap:8px}
.dg-gw svg{display:block;touch-action:none;cursor:pointer;filter:drop-shadow(0 4px 10px rgba(80,60,120,.12));background:#fff;border-radius:6px}
.dg-info{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:10px 16px;min-width:150px}
.dg-info.sm{padding:6px 12px;gap:3px;box-shadow:none;background:transparent}
.dg-big-n{font-size:clamp(34px,7vw,64px);font-weight:700;line-height:1}.dg-info.sm .dg-big-n{font-size:clamp(26px,5vw,40px)}
.dg-eq{font-size:clamp(17px,2.6vw,24px);display:flex;align-items:center;gap:6px;font-family:var(--fround);font-weight:600}
.dg-w{font-size:15px;color:var(--ink2);text-align:center}
.dg-pv{border-collapse:separate;border-spacing:4px 2px;font-size:13px}.dg-pv th{font-weight:600;padding:0 2px}.dg-pv td{font-size:24px;font-weight:700;text-align:center;border-radius:8px;min-width:42px;padding:2px 4px}.dg-pv td.dg-dot{background:none;min-width:8px;font-size:30px}
.dg-cmp{display:flex;align-items:center;justify-content:center;gap:12px}.dg-cmp.col{flex-direction:column;gap:2px}
.dg-cc{display:flex;flex-direction:column;align-items:center;gap:2px}
.dg-cmp.col .dg-cc{flex-direction:row;gap:10px}
.dg-sign{font-size:48px;font-weight:700;color:var(--ink);min-width:44px;text-align:center}.dg-cmp.col .dg-sign{font-size:34px;line-height:1}.dg-sign.eq{color:var(--mint)}
.dg-note{background:var(--amber-l);color:#7a5200;border-radius:14px;padding:6px 12px;font-size:16px;text-align:center}
.dg-mcol{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.dg-mw svg{display:block;max-width:100%;height:auto;touch-action:none;cursor:pointer}
.dg-cm{font-size:clamp(20px,3.4vw,30px);font-weight:600;font-family:var(--fround)}
/* division */
.dv{--ck:24px;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:auto}
.dv-story{font-size:clamp(16px,2.4vw,21px);text-align:center;color:var(--ink)}
.dv-pw{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px dashed var(--line);border-radius:18px;padding:4px 10px 8px;min-width:120px;max-width:96%;transition:background .3s}
.dv-pw.rem{background:var(--amber-l);border-color:var(--amber)}
.dv-pl{font-size:14px;color:var(--ink2);font-weight:600}
.dv-pile{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:min(92vw,560px);min-height:var(--ck);touch-action:none}
.dv-ck{display:inline-block;width:var(--ck);height:var(--ck);border-radius:50%;flex:none;background:radial-gradient(circle at 30% 35%,#5b3415 0 7%,transparent 8%),radial-gradient(circle at 64% 30%,#5b3415 0 6%,transparent 7%),radial-gradient(circle at 55% 66%,#5b3415 0 7%,transparent 8%),radial-gradient(circle at 28% 70%,#5b3415 0 5%,transparent 6%),radial-gradient(circle at 40% 35%,#E8B276,#C98A4B 70%);box-shadow:inset 0 -2px 0 rgba(90,50,10,.25),0 1px 2px rgba(80,50,20,.25);cursor:grab}
.dv-ck.rem{outline:3px solid var(--amber);outline-offset:1px}
.dv-ghost{position:fixed;z-index:60;pointer-events:none;transform:scale(1.25)}
.dv-boxes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:100%}
.dv-box{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:2px;justify-content:center;width:calc(var(--ck)*3.4);min-height:calc(var(--ck)*2.2);padding:calc(var(--ck)*.3) 4px 4px;background:#fff;border:3px solid var(--mint);border-radius:12px;box-shadow:var(--shadow)}
.dv-box.bag{border-color:var(--sky);border-radius:6px 6px 16px 16px;border-top-style:dashed}
.dv-box .dv-ck{cursor:default}
.dv-cnt{position:absolute;top:-11px;right:-8px;background:var(--mint);color:#fff;border-radius:999px;min-width:22px;height:22px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.dv-box.bag .dv-cnt{background:var(--sky)}
.dv-hint{color:var(--ink2);font-size:15px;padding:8px}
.dv-eq{font-size:clamp(22px,3.6vw,34px);font-weight:700;text-align:center;min-height:1.2em}
.dv-eq.ok{color:#1d7a61}.dv-chk{font-size:.6em;color:var(--ink2);font-weight:500}
.dv-warn{font-size:17px;color:#a8402f}
.dv-eqs{font-family:var(--fround);white-space:nowrap}
.dv-pic{display:flex;flex-direction:column;align-items:center;gap:6px;--ck:20px;width:100%}
.dv-pic.sm{--ck:17px}.dv-pic .dv-pile{max-width:min(86vw,420px)}
.dv-pic .dv-box{min-height:calc(var(--ck)*1.6)}
.dv-left{display:flex;flex-wrap:wrap;gap:3px;align-items:center;background:var(--amber-l);border-radius:12px;padding:3px 8px}.dv-left span{font-size:13px;color:#7a5200;margin-left:4px;font-weight:600}
.gopt .dv-eqs{font-size:.95em}
/* symmetry */
.sy{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.sy-col{display:flex;flex-direction:column;align-items:center;gap:8px}
.sy-grid{display:block;touch-action:none;cursor:pointer;background:#fff;border-radius:8px;box-shadow:var(--shadow)}
.sy-grid rect.sy-c{stroke:#3A3456;stroke-opacity:.22;stroke-width:1;transition:fill .12s}
.sy-grid rect.given{stroke-opacity:.6;stroke-width:1.6}
.sy-grid rect.bad{stroke:#E0446A;stroke-opacity:1;stroke-width:3}
.sy-mir{stroke:#3A3456;stroke-width:3;stroke-dasharray:7 5;stroke-linecap:round}
.sy-msg{font-size:16px;color:var(--ink2);text-align:center;min-height:1.3em}.sy-msg.ok{color:#1d7a61;font-weight:600}
.sy-sw{display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid rgba(58,52,86,.25);vertical-align:middle}
.sy-shapes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.sy-shapes .chip{padding:5px 11px;font-size:14.5px}
.sy-pic svg{display:block}
.sy-svg .sy-ax{stroke:#E0446A;stroke-width:3;stroke-dasharray:8 6;stroke-linecap:round}
.sy-svg .sy-ax.an{stroke-dasharray:600;stroke-dashoffset:600;animation:syDraw .7s ease-out forwards}
@keyframes syDraw{to{stroke-dashoffset:0;stroke-dasharray:8 6}}
.sy-svg .sy-cand{stroke:#E0446A;stroke-width:4;stroke-dasharray:9 6;stroke-linecap:round}
.sy-gg [data-tg]{cursor:pointer}.sy-gg [data-tg].on{fill:#E86FA0}
.gvis.revealed .sy-gg [data-tg][data-ok].on{fill:#F4A0C4}
.sy-mini{max-height:min(24vh,170px)!important}
/* solids */
.sl{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:12px;flex-direction:column}.sl.wide{flex-direction:row}
.sl-main{display:flex;flex-direction:column;align-items:center;gap:6px}
.sl-big{display:block;touch-action:none;cursor:grab}
.sl-info{text-align:center}
.sl-name{font-family:var(--fround);font-weight:700;font-size:clamp(20px,3vw,28px)}
.sl-cnt{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sl-k{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:14px;padding:4px 12px;box-shadow:var(--shadow);font-size:14px;color:var(--ink2);border:2px solid transparent}
.sl-k b{font-size:26px;color:var(--ink);line-height:1.1}.sl-k.on{border-color:#E0446A}.sl-k.on b{color:#B5305A}
.sl-cur{display:flex;flex-direction:column;gap:3px;font-size:15px;color:var(--ink2);max-width:320px}
.sl-netw{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:8px 12px}
.sl-nt{font-size:15px;color:var(--ink2);font-weight:600}
.sl-netw svg{display:block;width:100%;height:auto}
.sl-nonet{font-size:16px;color:var(--ink2);max-width:240px;text-align:center;padding:10px}
.sl-mini{max-height:min(22vh,160px)!important}
html.embed .sl-k b{font-size:21px}
.dg-row:not(.col) .dg-info.sm{min-width:0;padding:4px 6px}.dg-row:not(.col){gap:12px}

/* ---------- mobile test (Nov 10): compact panel + visible "more options" cue in short narrow frames ---------- */
html.embed:not(.embed-wide) .panel{max-height:calc(var(--eh,100dvh)*.46);gap:4px 5px;padding:5px 8px 2px;scrollbar-width:thin;scrollbar-color:#b9a8e6 transparent}
html.embed:not(.embed-wide) .panel::-webkit-scrollbar{width:5px}
html.embed:not(.embed-wide) .panel::-webkit-scrollbar-thumb{background:#b9a8e6;border-radius:4px}
html.embed:not(.embed-wide) .panel .ptitle{display:none}
html.embed:not(.embed-wide) .panel .btn{min-height:34px;padding:0 9px;font-size:14px}
html.embed:not(.embed-wide) .panel .seg button{min-height:31px;padding:0 8px;font-size:13.5px}
html.embed:not(.embed-wide) .panel .stepper button{width:32px;height:32px}
html.embed:not(.embed-wide) .panel .ctl{gap:4px}
html.embed:not(.embed-wide) .panel .more-cue{display:none}
html.embed:not(.embed-wide) .panel.can-more .more-cue{display:flex;position:sticky;bottom:-2px;order:98;width:calc(100% + 16px);margin:0 -8px;justify-content:center;padding:14px 0 3px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 60%);font:600 12.5px var(--fround,inherit);color:#7a62c9;pointer-events:none}

html.embed.embed-short:not(.embed-wide) .panel{max-height:calc(var(--eh,100dvh)*.46)}
html.embed.embed-short .panel .btn{min-height:34px;padding:0 9px;font-size:14px}
html.embed.embed-short .panel .seg button{min-height:31px;padding:0 8px;font-size:13.5px}
html.embed.embed-short .panel .stepper button{width:32px;height:32px}

/* ---------- collapsible controls (Nov 10, Natalie's idea) ---------- */
.pfold{display:none}
html.embed:not(.embed-wide) .panel .pfold{display:flex;order:-2;position:sticky;top:-5px;z-index:3;width:calc(100% + 16px);margin:-5px -8px 2px;justify-content:center;align-items:center;gap:6px;min-height:28px;padding:3px 0;border:0;background:#f3eefc;color:#5a3f8a;font:600 13.5px var(--fround,inherit);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.embed:not(.embed-wide) .panel.folded{max-height:none!important;overflow:hidden;padding:0 8px!important;gap:0}
html.embed:not(.embed-wide) .panel.folded>*:not(.pfold){display:none!important}
html.embed:not(.embed-wide) .panel.folded .pfold{margin:0 -8px;top:0;border-radius:0 0 16px 16px;min-height:34px;font-size:14.5px}