/* Goal100 "Another way" (rule 157, Nov 10, 2026): the same problem solved by each common method, side by side, then practice in the way
   the learner picks. Uses site.css variables. The four piece colors are always paired with the numbers, never used alone. */
.way{--wA:#DCDFFF;--wAi:#23226F;--wB:#FFE3B8;--wBi:#6B4300;--wC:#CFF0D9;--wCi:#0F5A30;--wD:#FFD3E0;--wDi:#8A1C45;display:flex;flex-direction:column;gap:18px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .way{--wA:#34367F;--wAi:#E4E5FF;--wB:#6A4A12;--wBi:#FFE9C7;--wC:#1E5637;--wCi:#D6F5E0;--wD:#6E2743;--wDi:#FFDDE8}}
:root[data-theme="dark"] .way{--wA:#34367F;--wAi:#E4E5FF;--wB:#6A4A12;--wBi:#FFE9C7;--wC:#1E5637;--wCi:#D6F5E0;--wD:#6E2743;--wDi:#FFDDE8}
.way-head{display:flex;flex-direction:column;gap:6px}
.way-head h1{font-size:clamp(1.7rem,4.6vw,2.6rem)}
.way-sub{color:var(--ink2);font-size:1.08rem}
.way-crumb{font-weight:700;font-size:.92rem}
.way-screen{display:flex;flex-direction:column;gap:14px}
.way-ask{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,3vw,1.6rem);line-height:1.2;margin:0}
.way-cards{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.way-pick{display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:left;background:var(--card);border:3px solid var(--line);border-radius:20px;padding:12px;cursor:pointer;font:inherit;color:var(--ink);min-width:0}
.way-pick:hover,.way-pick:focus-visible{border-color:var(--brand);box-shadow:var(--shadow)}
.way-pick b{font-family:var(--display);font-size:1.2rem;line-height:1.15}
.way-pick .way-mini{pointer-events:none;background:var(--bg);border-radius:12px;padding:8px;min-height:150px;display:grid;place-items:center;overflow:hidden}
.way-pick small{color:var(--ink2);font-size:.9rem;line-height:1.3}
.way-unsure{align-self:flex-start}
.way-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.way-bar .lab{font-weight:700;font-size:.95rem}
.way-two{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.way-panel{background:var(--card);border:3px solid var(--brand);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.way-panel.alt{border-color:var(--gold)}
.way-panel h2{font-size:1.2rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.way-panel h2 small{font:400 .88rem var(--body);color:var(--ink2)}
.way-fig{display:grid;place-items:center;min-height:178px;padding:4px 0}
.way-cap{font-size:.98rem;line-height:1.35;color:var(--ink2);min-height:2.7em}
.way-step{font-family:var(--display);font-weight:800;font-size:1.15rem;margin:0}
.way-match{background:var(--gold-soft);border:2px dashed var(--gold);border-radius:18px;padding:12px 14px;font-size:1.05rem;line-height:1.45}
.way-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.way-ctl .btn.small{min-height:44px;padding:8px 14px;font-size:.98rem}
.way-dots{display:flex;gap:6px}.way-dots i{width:12px;height:12px;border-radius:50%;background:var(--line)}.way-dots i.on{background:var(--brand)}
/* pieces */
.wA{background:var(--wA);color:var(--wAi)}.wB{background:var(--wB);color:var(--wBi)}.wC{background:var(--wC);color:var(--wCi)}.wD{background:var(--wD);color:var(--wDi)}
.way-hide{visibility:hidden}
/* area model */
.wa{display:grid;grid-template-columns:auto 2.1fr 1fr;grid-template-rows:auto 1.5fr 1fr;gap:0;font:800 1.15rem var(--display);width:min(100%,290px)}
.wa .hd{display:grid;place-items:center;padding:2px 8px;color:var(--ink)}
.wa .cell{display:grid;place-items:center;min-height:52px;border:2px solid var(--ink);margin:-1px;font-size:1.2rem;padding:4px}
.wa .cell.tall{min-height:76px}
.wa-sum,.wp-sum{font:800 1.08rem var(--display);text-align:center;margin-top:8px}
.wa-sum b,.wp-sum b,.ws-total{font-size:1.25em}
/* break-apart */
.wp{display:flex;flex-direction:column;gap:5px;font:800 1.08rem var(--display);width:min(100%,270px)}
.wp .split{font-family:var(--body);font-weight:700;font-size:.98rem;color:var(--ink2);text-align:center}
.wp .ln{display:flex;justify-content:space-between;align-items:center;gap:8px;border-radius:10px;padding:5px 12px;min-height:38px}
.wp hr{border:0;border-top:3px solid var(--ink);margin:3px 0;width:100%}
/* standard way */
.ws{display:inline-grid;grid-template-columns:auto auto;gap:2px 12px;align-items:center;font:800 1.5rem ui-monospace,Menlo,Consolas,monospace}
.ws .num{display:flex;justify-content:flex-end;gap:0}
.ws .num span{display:inline-grid;place-items:center;width:1.25ch;min-width:26px;height:38px;border-radius:6px}
.ws .wnote{font:700 .86rem var(--body);color:var(--ink2);white-space:nowrap}
.ws .rule{grid-column:1;border-top:3px solid var(--ink);height:0}
.ws .x{margin-right:auto;padding-right:8px}
/* practice */
.way-q{font-size:1.15rem;line-height:1.45}
.way-q b{font-family:var(--display);font-size:1.3em}
.way-in{font:800 1.1rem var(--display);width:4.6ch!important;min-width:74px;min-height:44px!important;text-align:center;border:2px solid var(--ink)!important;border-radius:10px;background:var(--card)!important;color:var(--ink)!important;padding:4px!important}
.cell .way-in,.ln .way-in{background:rgba(255,255,255,.75)!important;color:#16163A!important}
.way-in.ok{border-color:var(--good)!important;box-shadow:0 0 0 3px var(--good-soft)}
.way-in.ny{border-color:var(--gold)!important;box-shadow:0 0 0 3px var(--gold-soft)}
.way-fb{min-height:2.8em;font-size:1.05rem;line-height:1.4}
.way-fb.good{color:var(--good);font-weight:700}
.way-prog{font-weight:700;color:var(--ink2);font-size:.95rem;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.way-tag{display:inline-flex;padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:.85rem}
.way-tag.alt{background:var(--gold-soft);color:var(--gold-deep)}
.way-done{align-items:center;text-align:center}
.way-star{font-size:4rem;line-height:1}
.way-note{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 16px}
.way-note summary{font-weight:700;cursor:pointer;min-height:32px}
.way-note p{margin-top:8px;font-size:.98rem;line-height:1.5}
.way-note blockquote{margin:8px 0;padding:8px 14px;border-left:4px solid var(--brand);background:var(--brand-soft);border-radius:0 10px 10px 0;font-weight:700}
@media (max-width:760px){
 .way-cards{grid-template-columns:minmax(0,1fr)}
 .way-pick{flex-direction:row;align-items:center}
 .way-pick .way-mini{flex:0 0 44%;height:124px;min-height:0;padding:0}
 .way-pick .way-mini>*{transform:scale(.56);transform-origin:center;flex:none;width:250px}
 .way-pick .way-mini .wa-sum,.way-pick .way-mini .wp-sum{white-space:nowrap}
 .way-pick .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
 .way-two{grid-template-columns:minmax(0,1fr)}
 .way-fig{min-height:150px}
 .way-panel{padding:10px 12px}
 .way-cap{min-height:0}
}
@media (min-width:761px){.way-pick .txt{display:flex;flex-direction:column;gap:4px}}
/* the link a lesson shows */
.g100-way-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:10px;padding:6px 16px;border-radius:999px;border:2px solid #F2A93B;background:#FDF0D8;color:#16163A;font-weight:700;text-decoration:none}
.g100-way-link:hover,.g100-way-link:focus-visible{background:#F2A93B}
/* phones: the header does not stay stuck on this page, so both ways fit on the screen together */
@media (max-width:760px){
 body.way-page header.top{position:static}
 .way-bar .pill{min-height:44px;padding:2px 12px;font-size:.9rem}
 .way-bar{gap:6px 8px}
}
/* motion: one new piece per beat. The piece pops in, arrows draw from the numbers that make it. */
.way-fig{position:relative}
.way-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;color:var(--brand)}
.way-arrows path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:waydraw .7s ease forwards}
@keyframes waydraw{to{stroke-dashoffset:0}}
.way-pop{animation:waypop .55s cubic-bezier(.3,1.6,.5,1) .35s both;outline:3px solid var(--brand);outline-offset:2px;border-radius:8px;position:relative;z-index:1}
.cell.way-pop{border-radius:0}
@keyframes waypop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.way-src{outline:3px dashed var(--gold);outline-offset:1px;border-radius:8px}
.way-n{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--brand);color:var(--brand-ink);font-size:.9em;margin-right:4px}
.way-step{min-height:2.6em}
@media (prefers-reduced-motion:reduce){.way-arrows path{animation:none;stroke-dashoffset:0}.way-pop{animation:none}}
.way-sum-src{animation:wayglow 1.1s ease 2}
@keyframes wayglow{50%{filter:brightness(1.12) saturate(1.5);transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.way-sum-src{animation:none}}
/* Nov 11, 2026: shared pieces for the next topics (division, fractions, decimals). New rules only; the pilot's rules above are unchanged. */
.way-ops{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.way-ops .pill[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.wf{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;font-weight:800;margin:0 .12em}
.wf>i{font-style:normal;padding:0 .18em}
.wf>i:first-child{border-bottom:.12em solid currentColor}
.wf-in{gap:4px}.wf-in>.way-in:first-child{border-bottom-width:4px!important}
.way-in.dec{width:6ch!important;min-width:84px}
.way-q .wf{font-size:1.05em}
.way-fig svg .way-pop{outline:none;transform-box:fill-box;transform-origin:center}
.way-fig svg .way-src{outline:none;stroke:var(--gold);stroke-width:3px;paint-order:stroke}
.way-fig svg text{font-family:var(--display);font-weight:800}
.wk-ink{stroke:var(--ink);fill:none}
/* a simple worked layout used by several topics: one line per piece */
.wl{display:flex;flex-direction:column;gap:5px;font:800 1.08rem var(--display);width:290px;max-width:100%}
.wl .ln{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 8px;border-radius:10px;padding:5px 12px;min-height:40px}
.wl .ln.plain{justify-content:center}
.wl .hdr{font-family:var(--body);font-weight:700;font-size:1rem;color:var(--ink2);text-align:center}
.wl hr{border:0;border-top:3px solid var(--ink);margin:3px 0;width:100%}
.wl .ln .way-in,.wbx .way-in{background:rgba(255,255,255,.75)!important;color:#16163A!important}
.wl .sum{text-align:center;font-size:1.12rem}
/* long division */
.wd{display:inline-grid;gap:2px 0;align-items:center;font:800 1.45rem ui-monospace,Menlo,Consolas,monospace}
.wd span{display:inline-grid;place-items:center;min-width:26px;height:36px;border-radius:6px}
.wd .br{border-left:3px solid var(--ink);border-top:3px solid var(--ink);border-top-left-radius:10px}
.wd .tp{border-top:3px solid var(--ink)}
.wd .rule{border-top:3px solid var(--ink);height:0;align-self:start}
.wd .wnote{font:700 .82rem var(--body);color:var(--ink2);white-space:nowrap;padding-left:8px;justify-self:start;place-items:center start}
.wd .way-in{min-width:60px;width:3.4ch!important}
/* boxes for division area model and fraction strips */
.wbx{display:flex;flex-direction:column;gap:6px;width:290px;max-width:100%;font:800 1.05rem var(--display)}
.wbx .row{display:flex;align-items:stretch;gap:6px}
.wbx .side{display:grid;place-items:center;min-width:34px}
.wbx .rect{display:flex;flex:1;border:2px solid var(--ink);min-height:84px}
.wbx .rect>div{display:grid;place-items:center;border-right:2px solid var(--ink);padding:4px;min-width:62px;text-align:center}
.wbx .rect>div:last-child{border-right:0}
.wbx .tops{display:flex;flex:1}
.wbx .tops>div{display:grid;place-items:center;min-width:62px;min-height:30px}
.wnt{font:700 .95rem var(--body);text-align:center;border-radius:10px;padding:4px 8px}
.wst{display:flex;flex-direction:column;gap:7px;width:290px;max-width:100%;font:800 1rem var(--display)}
.wst .sr0{display:flex;align-items:center;gap:8px}
.wst .lab{min-width:58px;text-align:right}
.wst .bar{flex:1;display:flex;height:34px;border:2px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--card)}
.wst .bar>i{flex:1;border-right:1px solid transparent}
.wst .bar>i.cut{border-right:2px solid var(--ink)}
.wst .bar.fine>i{border-right-color:var(--ink2)}
.wst .bar.fine>i.cut{border-right:2px solid var(--ink)}
.wst .bar>i:last-child{border-right:0!important}
.wst .eq{min-width:52px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:8px;padding:2px 4px}
/* fraction area: a square cut both ways */
.wq{display:grid;gap:6px;justify-items:center;font:800 1.05rem var(--display)}
.wq .sq{position:relative;display:grid;width:min(190px,62vw);aspect-ratio:1;border:3px solid var(--ink);background:var(--card)}
.wq .sq>i{border:1px solid transparent}
.wq .sq.grid>i{border-color:var(--ink2)}
.wq .ov{z-index:0;opacity:.8;pointer-events:none;mix-blend-mode:multiply}
.wq .sq{background-position:-1px -1px;background-color:var(--card)}
.wq .lab2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
/* base-ten pieces for decimals */
.wg{display:flex;flex-direction:column;gap:6px;width:290px;max-width:100%;font:800 1rem var(--display)}
.wg .grow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px;min-height:44px;border-radius:10px;padding:4px 6px}
.wg .grow>b{min-width:46px;font-size:.95rem}
.wg .one{width:40px;height:40px;border:2px solid currentColor;background:repeating-linear-gradient(0deg,transparent 0 3px,currentColor 3px 4px);opacity:.9}
.wg .ten{width:6px;height:40px;border:1.5px solid currentColor;background:repeating-linear-gradient(0deg,transparent 0 3px,currentColor 3px 4px)}
.wg .hun{width:6px;height:6px;border:1.5px solid currentColor}
.wg .hund{display:inline-grid;grid-template-columns:repeat(5,6px);gap:2px}
.wg .lbl{font:700 .88rem var(--body);color:var(--ink2);margin-left:auto}
.wdg{display:grid;font:800 1.05rem var(--display);border:2px solid var(--ink);width:min(100%,280px);aspect-ratio:auto}
.wdg>div{display:grid;place-items:center;border:1px solid var(--ink);min-height:44px;padding:3px;background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);background-size:10% 10%}
.wdg .hd{background:none;border:0;font-size:1rem}
@media (max-width:760px){
 .way-pick .way-mini .wl,.way-pick .way-mini .wbx,.way-pick .way-mini .wst,.way-pick .way-mini .wg{width:250px}
}
/* division and decimals details */
.wl .pc{padding:3px 10px;border-radius:8px;min-width:64px;text-align:right}
.wl .gq{min-width:56px;text-align:center;font-family:var(--body);font-weight:700;color:var(--ink2)}
.wl .gq.small{font-size:.85rem}
.wl .gh{min-height:0;padding:0 12px}
.wd .dv{padding-right:4px;min-width:30px}
.wd .sumn{font-size:1rem;margin-top:4px}
.wnt.sum{font-size:1.1rem}
.wd .sumn{white-space:nowrap}
@media (max-width:760px){
 .way-pick .way-mini>*:has(.wl),.way-pick .way-mini>*:has(.wbx),.way-pick .way-mini>*:has(.wst),.way-pick .way-mini>*:has(.wq),.way-pick .way-mini>*:has(.wg),.way-pick .way-mini>*:has(.wd),.way-pick .way-mini>*:has(.wdg){transform:scale(.36)}
}
/* Nov 12, 2026 (N120): full screen for the side-by-side film. The button sits in the top row of the film; the film box (.way-screen)
   goes to the browser's full screen, or to the top layer (Popover API) where a phone has no Fullscreen API. See assets/g100-way.js. */
.way-filmtop{display:flex;align-items:flex-start;gap:10px}
.way-filmtop .way-step{flex:1 1 auto;min-width:0}
.way-fs{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;margin:0;padding:4px 14px;border-radius:999px;border:2px solid var(--brand);background:var(--card);color:var(--ink);font:700 .95rem/1.1 var(--body);cursor:pointer;-webkit-tap-highlight-color:transparent}
.way-fs>span:first-child{font-size:1.15rem;line-height:1}
.way-fs:hover{border-color:var(--gold)}
.way-fs:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.way-fs[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
@media (max-width:760px),(max-height:540px){.way-fs{padding:4px}.way-fs .way-fs-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.way-screen.way-full{background:var(--bg);color:var(--ink);box-sizing:border-box;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;border:0;outline:0;overflow:auto;overscroll-behavior:contain;gap:10px;
 padding:0 max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px))}
.way-screen.way-over{position:fixed;inset:0;top:0;left:0;z-index:2147483000}
.way-screen.way-over[popover]{margin:0;border:0;inset:0}
.way-screen[popover]::backdrop{background:#16163A}
html.way-lock,html.way-lock body{overflow:hidden!important}
.way-full .way-filmtop{position:sticky;top:0;z-index:3;background:var(--bg);padding:max(10px,env(safe-area-inset-top,0px)) 0 6px;order:-1}
.way-full .way-step{min-height:0}
.way-full .way-two{margin-block:auto}
.way-full .way-ctl{position:sticky;bottom:0;z-index:3;background:var(--bg);margin-top:auto;padding:8px 0 max(10px,env(safe-area-inset-bottom,0px))}
.way-full .way-two+.way-ctl,.way-full .way-match+.way-ctl{margin-top:0}
@media (min-width:1000px) and (min-height:640px){
 .way-screen.way-full{padding-left:max(28px,calc((100vw - 1320px) / 2));padding-right:max(28px,calc((100vw - 1320px) / 2))}
 .way-full .way-two{zoom:1.25}
 .way-full .way-step{font-size:1.4rem}
 .way-full .way-match{font-size:1.2rem}
}
/* a phone held sideways: both ways next to each other, the buttons in a narrow column on the right */
@media (orientation:landscape) and (max-height:540px){
 .way-screen.way-full{display:grid;grid-template-columns:minmax(0,1fr) 164px;grid-template-rows:auto minmax(0,1fr) auto;gap:6px 10px;overflow:hidden;
  padding-top:max(6px,env(safe-area-inset-top,0px));padding-bottom:max(6px,env(safe-area-inset-bottom,0px))}
 .way-full .way-ops,.way-full .way-bar,.way-full>p.small{display:none}
 .way-full .way-filmtop{grid-column:1 / 3;grid-row:1;position:static;padding:0;align-items:center}
 .way-full .way-step{font-size:1rem;line-height:1.25}
 .way-full .way-two{grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:0;min-height:0;overflow:auto;gap:8px;align-items:start;zoom:.85;overscroll-behavior:contain}
 .way-full .way-panel{padding:6px 10px;gap:4px;border-width:2px;border-radius:14px;min-height:100%;box-sizing:border-box}
 .way-full .way-panel h2{font-size:1rem}
 .way-full .way-panel h2 small{display:none}
 .way-full .way-fig{min-height:0}
 .way-full .way-cap{font-size:.9rem;line-height:1.3;min-height:0}
 .way-full .way-match{grid-column:1;grid-row:3;padding:5px 10px;font-size:.86rem;line-height:1.28;max-height:30vh;overflow:auto;border-radius:12px}
 .way-full .way-ctl{grid-column:2;grid-row:2 / 4;position:static;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:6px;margin:0;padding:0;overflow-y:auto}
 .way-full .way-ctl>.btn,.way-full .way-ctl>.pill{min-height:44px;width:100%;box-sizing:border-box;justify-content:center;text-align:center;padding:4px 8px;font-size:.9rem;margin:0}
 .way-full .way-dots{justify-content:center;padding:4px 0}
}