/* Fraction Splitter: the site's Direction C system for a kid-first tool.
   Cream paper, warm ink, forest green for the shaded amount, terracotta for
   the pin and the "add 1" mistake, gold for cuts and highlights, and jewel
   glass for Mira's window wall. Light only, like the site. Every colour is a
   token on .fl; layout responds to the widget's own width (container queries). */
.fl, .fl-poster {
  --fl-paper: #FFFBF2; --fl-bench: #EFE9DB; --fl-ink: #22201C; --fl-ink-2: #57524A; --fl-rule: #D8D0BF;
  --fl-fill: #2E5141; --fl-fill-2: #4B6E5E; --fl-wash: #E4ECE5; --fl-empty: #FFFDF7; --fl-white: #FFFFFF;
  --fl-pin: #C8512E; --fl-pin-ink: #8F3A20; --fl-pin-wash: #FBE8DF; --fl-hi: #F0C24B; --fl-hi-soft: #F9E7AE;
  /* cut lines: dark gold on the empty part, light gold on the green, cream for the original pieces on green (all 3:1 or more) */
  --fl-cut-off: #8A6512; --fl-cut-on: #F0C24B; --fl-cut-big-on: #FFFBF2;
  --fl-try: #6B2414; --fl-try-bg: #FFF1EC; --fl-try-line: #F2B8A8;
  --fl-hint: #3A2378; --fl-hint-bg: #F0EAFE; --fl-hint-line: #C8B7F4;
  --fl-good: #12432B; --fl-good-bg: #E3F5EB; --fl-good-line: #9ED3B6;
  --fl-show: #2B2A26; --fl-show-bg: #FFFDF7; --fl-show-line: #CFC6B3;
  --fl-shadow: rgba(34, 32, 28, .14); --fl-veil: rgba(255, 253, 247, .72); --fl-pick: rgba(240, 194, 75, .38); --fl-right: rgba(46, 81, 65, .15);
  --fl-sheen: rgba(255, 255, 255, .55); --fl-stripe: rgba(255, 255, 255, .55);
  /* a control at its limit: dimmed with colour, not opacity, so its focus ring stays full strength */
  --fl-off-ink: #A39D92; --fl-off-line: #CFC8BA;
  --fl-star: #8A6512; /* stars and the glass-family frame text: 5.2:1 on white */
  /* Mira's glass: a soft tint when a row is lit, a bright glow where the line passes (ink labels 6.4:1 or more) */
  --fl-glass-off-in: #DDD6C8;
  --fl-glass-1: #F3E3B5; --fl-glass-1-in: #E9B949; --fl-glass-2: #F7D5C6; --fl-glass-2-in: #EC9471;
  --fl-glass-3: #F4E6A8; --fl-glass-3-in: #E2C23E; --fl-glass-4: #DCECC5; --fl-glass-4-in: #9DCB6C;
  --fl-glass-5: #CDEDE1; --fl-glass-5-in: #6CC6A8; --fl-glass-6: #CFE5F3; --fl-glass-6-in: #78B6E0;
  --fl-glass-8: #D9DDF6; --fl-glass-8-in: #97A3EA; --fl-glass-10: #E6D8F3; --fl-glass-10-in: #BB93E2;
  --fl-glass-12: #F5D5E4; --fl-glass-12-in: #E28DB7;
  --fl-display: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', 'DM Sans Variable', 'DM Sans', system-ui, sans-serif;
}
/* host pages may style headings (the site sets letter-spacing on h1–h5) */
.fl :is(h1, h2, h3, h4), .fl-poster :is(h1, h2, h3, h4) { letter-spacing: normal; }
.fl {
  container: fl / inline-size;
  font-family: 'DM Sans Variable', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--fl-ink); line-height: 1.45;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(10px, 3vw, 28px); background: var(--fl-paper);
  border: 2px solid var(--fl-ink); border-radius: 10px; box-shadow: 5px 5px 0 var(--fl-shadow);
}
.fl *, .fl *::before, .fl *::after { box-sizing: border-box; }
.fl button { font: inherit; color: inherit; cursor: pointer; }
.fl button:disabled, .fl button[aria-disabled="true"] { cursor: not-allowed; }
.fl :focus-visible { outline: 3px solid var(--fl-pin); outline-offset: 2px; }
.fl p { margin: 0; }
.fl h2 { margin: 0; }
.fl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fl-label { display: block; font-weight: 800; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fl-ink-2); margin-bottom: 6px; }

/* the top row: tabs, and the sound switch (off until a child turns it on) */
.fl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fl-nosave { order: 3; flex: 1 1 100%; padding: 8px 12px; border: 1px solid var(--fl-ink-2); border-radius: 8px; background: #FFF6D8; color: var(--fl-ink); font-size: .88rem; line-height: 1.4; }
.fl-nosave[hidden] { display: none; }
.fl-sound { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; border: 1.5px solid var(--fl-rule); border-radius: 999px; background: var(--fl-white); font-weight: 700; font-size: .9rem; color: var(--fl-ink-2); }
.fl-sound svg { width: 20px; height: 20px; }
.fl-sound .fl-sound-on, .fl-sound[aria-pressed="true"] .fl-sound-off { display: none; }
.fl-sound[aria-pressed="true"] .fl-sound-on { display: inline; }
.fl-sound[aria-pressed="true"] { border-color: var(--fl-ink); color: var(--fl-ink); background: var(--fl-hi-soft); }

/* tabs */
.fl-tabs { display: grid; grid-template-columns: repeat(3, auto); gap: 6px; padding: 4px; border-radius: 12px; background: var(--fl-bench); border: 1.5px solid var(--fl-rule); width: fit-content; max-width: 100%; }
.fl-tabs [role="tab"] { min-height: 44px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; font-weight: 800; white-space: nowrap; }
.fl-tabs [role="tab"][aria-selected="true"] { background: var(--fl-ink); color: var(--fl-paper); box-shadow: 2px 2px 0 var(--fl-pin); }
.fl-tabnote { font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; display: inline-block; margin-left: .3em; }
.fl-tabnote.bump { animation: flBump .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes flBump { 30% { transform: scale(1.45); color: var(--fl-pin-ink); opacity: 1; } }
.fl-narrow { display: none; }
.fl-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.fl-panel[hidden] { display: none; }

/* stacked fractions */
.fl-frac { display: inline-grid; grid-template-rows: auto auto; justify-items: center; line-height: 1.02; vertical-align: middle; font-weight: 800; margin: 0 .1em; font-variant-numeric: tabular-nums; position: relative; }
.fl-frac > span:first-child { border-bottom: 2px solid currentColor; padding: 0 .2em; }
.fl-frac.fl-int { grid-template-rows: auto; }
.fl-frac.fl-int > span:first-child { border-bottom: 0; }
.fl-frac > .fl-slash { position: absolute; inset: 0; display: grid; place-items: center; color: transparent; pointer-events: none; }
.fl-frac.big { font: 800 1.9rem var(--fl-display); }
.fl-frac.big > span:first-child { border-bottom-width: 3px; }
.fl-frac.now { color: var(--fl-fill); }
.fl-frac.tiny { font-size: .66rem; font-weight: 800; }
.fl-frac.tiny > span:first-child { border-bottom-width: 1px; }

/* Mira and her speech bubble */
.fl-mira { display: block; width: 64px; height: 64px; flex: none; }
.fl-mira .cx { width: 100%; height: 100%; }
.fl-guide { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: end; }
.fl-guide.is-quiet { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fl-guide.is-quiet .fl-mira { display: none; }
.fl-bubble { position: relative; }
.fl-bubble::before { content: ''; position: absolute; left: -8px; bottom: 16px; width: 14px; height: 14px; background: inherit; border: inherit; border-top-color: transparent; border-right-color: transparent; transform: rotate(45deg); }
.fl-bubble:empty::before { display: none; }

/* explore: start picker and the chain of names */
.fl-ex-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: end; }
.fl-stack { display: inline-grid; justify-items: center; gap: 4px; }
.fl-step { display: flex; align-items: center; gap: 6px; }
.fl-step b { min-width: 2ch; text-align: center; font: 800 1.9rem var(--fl-display); font-variant-numeric: tabular-nums; }
.fl-step button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--fl-ink); background: var(--fl-white); font-weight: 800; font-size: 1.2rem; line-height: 1; }
.fl-step button:disabled, .fl-step button[aria-disabled="true"] { color: var(--fl-off-ink); border-color: var(--fl-off-line); }
.fl-bar-line { display: block; width: 56px; height: 3px; background: var(--fl-ink); border-radius: 2px; }
.fl-chainbox { min-width: 0; }
.fl-chain { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 76px; }
.fl-chain li { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.fl-chain .fl-eqs { font: 800 1.6rem var(--fl-display); color: var(--fl-ink-2); }
.fl-op { font: 800 .8rem 'DM Sans Variable', 'DM Sans', sans-serif; color: var(--fl-pin-ink); padding: 0 7px; border-radius: 999px; background: var(--fl-pin-wash); }
.fl-chain li:last-child .fl-frac { animation: flIn .45s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes flIn { from { transform: translateY(8px) scale(.9); opacity: 0; } }

/* bars: pieces and lines are placed with --a (start) and --w (width) */
.fl-bench { display: grid; gap: 6px; padding: clamp(10px, 2.4vw, 20px); background: var(--fl-bench); border: 1px solid var(--fl-rule); border-radius: 8px; min-width: 0; }
.fl-strip { position: relative; padding-inline: 16px; }
.fl-bar { position: relative; height: 72px; border: 3px solid var(--fl-ink); border-radius: 8px; background: var(--fl-empty); overflow: hidden; }
.fl-pc { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc(var(--w) * 100%); background: transparent; transition: background .3s; }
.fl-pc.on { background: var(--fl-fill); }
.fl-cut { --cut: var(--fl-cut-off); position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: 0; border-left: 2px solid var(--cut); transform: translateX(-1px); pointer-events: none; }
.fl-cut.on { --cut: var(--fl-cut-on); }
.fl-cut.edge { --cut: var(--fl-ink); }
.fl-cut.big { --cut: var(--fl-ink); border-left-width: 3px; transform: translateX(-1.5px); }
.fl-cut.big.on { --cut: var(--fl-cut-big-on); }
.fl-cut.new { animation: flZip .5s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i) * 14ms); }
@keyframes flZip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.fl-cut.melt { animation: flMelt .5s ease-out both; }
/* hundredths: thin lines inside each tenth, the tenths drawn full strength */
.fl-bar.fine .fl-cut:not(.big) { border-left-width: 1px; transform: none; opacity: .55; }
@keyframes flMelt { from { opacity: 1; } to { opacity: 0; transform: translateX(-1px) scaleY(.2); } }
.fl-strip.stay .fl-bar { animation: flStay .7s ease-out; }
@keyframes flStay { 40% { box-shadow: 0 0 0 5px var(--fl-hi-soft); } }
.fl-ghost { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: 5px; margin-left: -2.5px; z-index: 2; background: repeating-linear-gradient(180deg, var(--fl-hi) 0 7px, var(--fl-ink) 7px 12px); box-shadow: 0 0 0 1.5px var(--fl-white); pointer-events: none; }
.fl-strip-add .fl-bar { height: 36px; border-color: var(--fl-pin); border-style: dashed; }
.fl-bar.wrong .fl-pc.on { background: var(--fl-pin); }
.fl-addlab { display: block; margin-top: 4px; text-align: right; font-weight: 800; font-size: .86rem; color: var(--fl-pin-ink); }
.fl-addlab .fl-frac { font-size: 1.05rem; }

/* number line */
.fl-line { display: block; width: 100%; height: auto; overflow: visible; }
.fl-axis { stroke: var(--fl-ink); stroke-width: 3; stroke-linecap: round; }
.fl-axis.thin { stroke-width: 2; }
.fl-tick { stroke: var(--fl-ink-2); stroke-width: 2; }
.fl-tick.big { stroke: var(--fl-ink); stroke-width: 3; }
.fl-num { font: 800 17px var(--fl-display); fill: var(--fl-ink); text-anchor: middle; }
.fl-sfrac text { font: 800 15px var(--fl-display); fill: var(--fl-fill); text-anchor: middle; }
.fl-sfrac line { stroke: var(--fl-fill); stroke-width: 2; }
.fl-sfrac.wrong text { fill: var(--fl-pin-ink); }
.fl-sfrac.wrong line { stroke: var(--fl-pin-ink); }
.fl-pin path { fill: var(--fl-pin); stroke: var(--fl-ink); stroke-width: 2; }
.fl-pin circle { fill: var(--fl-white); }
.fl-pin.wrong path { fill: var(--fl-white); stroke: var(--fl-pin); stroke-width: 2.5; stroke-dasharray: 4 3; }
.fl-pin.wrong circle { fill: var(--fl-pin); }
.fl-pin.pick path { fill: var(--fl-hi); }
.fl-pin.stay { animation: flPinStay .7s ease-out; }
@keyframes flPinStay { 40% { filter: drop-shadow(0 0 6px var(--fl-hi)); } }
.fl-gap { fill: none; stroke: var(--fl-pin); stroke-width: 2.5; stroke-dasharray: 4 3; }
.fl-gaplab { font: 700 13px 'DM Sans Variable', 'DM Sans', sans-serif; fill: var(--fl-pin-ink); text-anchor: middle; }
.fl-zoomring { fill: none; stroke: var(--fl-pin-ink); stroke-width: 2; }
.fl-zoomlead { stroke: var(--fl-pin-ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.fl-zoombox { fill: var(--fl-empty); stroke: var(--fl-pin-ink); stroke-width: 1.5; }
.fl-zoomtag { font: 800 10px 'DM Sans Variable', 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; fill: var(--fl-ink-2); }
.fl-zdot { fill: var(--fl-pin); stroke: var(--fl-ink); stroke-width: 2; }
.fl-zdot.wrong { fill: var(--fl-white); stroke: var(--fl-pin); stroke-width: 2.5; stroke-dasharray: 3 2; }

/* verbs */
.fl-verbs { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: end; }
.fl-verb { min-width: 0; }
.fl-vbtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 52px; }
.fl-vbtn { min-width: 52px; min-height: 52px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--fl-ink); background: var(--fl-white); font-weight: 800; box-shadow: 3px 3px 0 var(--fl-ink); transition: transform .1s, box-shadow .1s, background .15s; }
.fl-vbtn b { font: 800 1.35rem var(--fl-display); }
.fl-vbtn.cut b::before { content: '✂ '; font-size: .8em; }
.fl-vbtn.glue { background: var(--fl-hi-soft); }
.fl-vbtn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--fl-hi-soft); }
.fl-vbtn:active:not(:disabled):not([aria-disabled="true"]) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--fl-ink); }
.fl-vbtn:disabled, .fl-vbtn[aria-disabled="true"] { color: var(--fl-off-ink); border-color: var(--fl-off-line); background: var(--fl-paper); box-shadow: none; }
.fl-vbtn.quiet { min-height: 44px; box-shadow: none; border-width: 1.5px; font-size: .95rem; }
.fl-verb-misc { display: flex; gap: 8px; margin-left: auto; align-self: end; }
.fl-none { font-size: .92rem; color: var(--fl-ink-2); }
.fl-say { padding: 12px 16px; background: var(--fl-hi-soft); border: 1.5px solid transparent; border-radius: 10px; font-weight: 600; line-height: 1.6; min-height: 3.2em; }
.fl-btn { min-height: 44px; padding: 0 18px; border-radius: 8px; border: 2px solid var(--fl-ink); background: var(--fl-white); font-weight: 800; }
.fl-btn.primary { background: var(--fl-fill); color: var(--fl-white); box-shadow: 3px 3px 0 var(--fl-ink); }
.fl-btn.primary:disabled { opacity: .45; box-shadow: none; }
.fl-btn.primary[aria-disabled="true"] { background: var(--fl-bench); color: var(--fl-ink-2); border-color: var(--fl-off-ink); box-shadow: none; }
.fl-btn.quiet { border-width: 1.5px; }
.fl-btn.quiet:disabled { opacity: .5; }
.fl-addbtn { justify-self: start; text-align: left; padding-block: 8px; }
.fl-addbtn[aria-pressed="true"] { background: var(--fl-pin-wash); border-color: var(--fl-pin); }

/* challenges */
.fl-ch-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 14px; }
.fl-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; flex: 1 1 200px; min-width: 0; max-width: 290px; }
.fl-dots li { flex: 1 1 0; min-width: 6px; max-width: 24px; height: 12px; border-radius: 6px; background: var(--fl-rule); box-shadow: inset 0 0 0 1.5px var(--fl-ink-2); }
.fl-dots li.now { background: var(--fl-white); box-shadow: inset 0 0 0 2.5px var(--fl-ink); }
.fl-dots li:nth-child(3), .fl-dots li:nth-child(7) { margin-right: 6px; } /* warm-up · trickier · mixed */
.fl-stage { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--fl-ink); color: var(--fl-paper); }
.fl-dots li.first, .fl-sum-panes li.first, .fl-sw.first { background: var(--fl-hi); box-shadow: inset 0 0 0 1.5px var(--fl-ink); }
.fl-dots li.helped, .fl-sum-panes li.helped, .fl-sw.helped { background: var(--fl-fill); box-shadow: inset 0 0 0 1.5px var(--fl-ink); }
.fl-dots li.shown, .fl-sum-panes li.shown, .fl-sw.shown { background: var(--fl-empty) repeating-linear-gradient(45deg, transparent 0 3px, var(--fl-rule) 3px 6px); box-shadow: inset 0 0 0 1.5px var(--fl-ink-2); }
.fl-best { font-size: .85rem; font-weight: 700; color: var(--fl-ink-2); }
.fl-grade { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1.5px solid var(--fl-ink); background: var(--fl-white); }
.fl-grade button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: .9rem; }
.fl-grade button[aria-pressed="true"] { background: var(--fl-fill); color: var(--fl-white); }
.fl-confirm { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px 10px 16px; border: 2px solid var(--fl-ink); border-radius: 10px; background: var(--fl-white); box-shadow: 3px 3px 0 var(--fl-shadow); }
.fl-confirm[hidden] { display: none; }
.fl-confirm p { flex: 1 1 220px; font-weight: 700; }
.fl-confirm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-ch-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: clamp(10px, 2.6vw, 22px); background: var(--fl-bench); border: 1px solid var(--fl-rule); border-radius: 10px; min-width: 0; }
.fl-play { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.fl-play[hidden], .fl-sum[hidden] { display: none; }
.fl-ch-prompt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
.fl-ch-num { grid-column: 1 / -1; font-weight: 800; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fl-ink-2); }
.fl-ch-q { font: 800 clamp(1.2rem, 2.6vw, 1.6rem)/1.35 var(--fl-display); text-wrap: balance; min-width: 0; border-radius: 6px; }
.fl-ch-q:focus { outline: none; }
.fl-ch-q:focus-visible { outline: 3px solid var(--fl-pin); outline-offset: 4px; }
.fl-ch-q .fl-frac { font-size: 1.15em; }
.fl-speak { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--fl-ink); background: var(--fl-white); display: grid; place-items: center; }
.fl-speak svg { width: 24px; height: 24px; }
.fl-ch-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.fl-ch-now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-weight: 700; color: var(--fl-ink-2); }
.fl-ch-now .fl-frac { color: var(--fl-fill); }
.fl-goal { padding: 2px 10px; border-radius: 999px; background: var(--fl-white); border: 1.5px solid var(--fl-rule); color: var(--fl-ink); font-size: .9rem; }
.fl-verbs.compact { gap: 10px 18px; }
.fl-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.fl-pair .fl-strip { padding-right: 70px; }
.fl-tag { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 58px; text-align: center; font-size: 1.25rem; }
.fl-later { padding: 14px 16px; border: 2px dashed var(--fl-rule); border-radius: 8px; color: var(--fl-ink-2); font-weight: 600; }
/* the bar a child shades: buttons for pieces, lines drawn over them */
.fl-tapbar { background: var(--fl-empty); }
.fl-tp { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc(var(--w) * 100%); border: 0; border-radius: 0; background: transparent; padding: 0; }
.fl-tp.on { background: var(--fl-fill); }
.fl-tp:hover:not(:disabled) { background: var(--fl-wash); }
.fl-tp.on:hover:not(:disabled) { background: var(--fl-fill-2); }
.fl-tp:focus-visible { outline: 3px solid var(--fl-pin-ink); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--fl-white); z-index: 3; }
/* tall bars: on a narrow card the two bars stand side by side and fill from the bottom, like glass */
.fl-pair.is-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 12px; }
.fl-pair.is-tall .fl-strip { padding: 0; display: grid; justify-items: center; gap: 8px; width: 100%; }
.fl-pair.is-tall .fl-tag { position: static; transform: none; width: auto; }
.fl-pair.is-tall .fl-strip > [role="img"] { width: 100%; display: flex; justify-content: center; }
.fl-nowrap { white-space: nowrap; }
.fl-bar.tall { width: min(104px, 100%); height: max(224px, calc(var(--rows) * 44px + 8px)); } /* every tappable piece is at least 44px tall, after the bar's border */
.fl-bar.tall .fl-pc, .fl-bar.tall .fl-tp { left: 0; right: 0; width: auto; top: auto; bottom: calc(var(--a) * 100%); height: calc(var(--w) * 100%); }
.fl-bar.tall .fl-cut { left: 0; right: 0; top: auto; bottom: calc(var(--a) * 100%); width: auto; height: 0; border-left: 0; border-top: 2px solid var(--cut); transform: translateY(1px); }
.fl-bar.tall .fl-cut.big { border-top-width: 3px; transform: translateY(1.5px); }
.fl-bar.tall .fl-ghost { left: 0; right: 0; top: auto; bottom: calc(var(--a) * 100%); width: auto; height: 5px; margin: 0 0 -2.5px; background: repeating-linear-gradient(90deg, var(--fl-hi) 0 7px, var(--fl-ink) 7px 12px); }
.fl-numstep { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fl-numstep button { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--fl-ink); background: var(--fl-white); font: 800 1.4rem var(--fl-display); }
.fl-numstep button.tens { width: auto; min-width: 56px; padding: 0 10px; border-radius: 26px; font-size: 1.05rem; }
.fl-numstep button:disabled, .fl-numstep button[aria-disabled="true"] { color: var(--fl-off-ink); border-color: var(--fl-off-line); }
.fl-numstep output { min-width: 2.2ch; text-align: center; font: 800 2rem var(--fl-display); font-variant-numeric: tabular-nums; }
.fl-topin { width: 3.2ch; min-width: 52px; height: 52px; padding: 0 4px; border: 2px solid var(--fl-ink); border-radius: 12px; background: var(--fl-white); color: var(--fl-ink); text-align: center; font: 800 2rem var(--fl-display); font-variant-numeric: tabular-nums; }
.fl-topin::placeholder { color: var(--fl-off-ink); opacity: 1; }
.fl-topin:focus-visible { outline: 3px solid var(--fl-pin-ink); outline-offset: 2px; }
.fl-topin:disabled { color: var(--fl-ink); border-color: var(--fl-off-line); opacity: 1; }
.fl-numstep-eq { margin-left: 8px; font-size: 1.5rem; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.fl-matchlist { position: relative; display: grid; gap: 10px; }
.fl-matchbar { position: relative; display: block; width: 100%; padding: 8px 74px 8px 14px; border: 2px solid transparent; border-radius: 10px; background: var(--fl-paper); text-align: left; }
.fl-matchbar .fl-bar { height: 44px; }
.fl-matchbar .fl-tag { right: 8px; }
.fl-matchbar.on { border-color: var(--fl-ink); background: var(--fl-hi-soft); box-shadow: 3px 3px 0 var(--fl-ink); }
.fl-matchbar.right { border-color: var(--fl-fill); background: var(--fl-good-bg); }
.fl-eqmark { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--fl-fill); color: var(--fl-white); display: grid; place-items: center; font-weight: 800; }
.fl-matchlines { position: absolute; inset: 0 76px 0 16px; pointer-events: none; }
.fl-matchlines b { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: 3px; margin-left: -1.5px; background: repeating-linear-gradient(180deg, var(--fl-pin) 0 6px, transparent 6px 10px); }
/* the tick picker: a radio group laid over the number line. Each button is a tall,
   invisible target with a ring drawn round its tick, so the line and ticks stay clear. */
.fl-tickpick { --edge: 18px; position: relative; padding-top: 6px; }
.fl-tickbtns { position: absolute; left: 0; right: 0; top: 6px; height: 92px; }
.fl-tickbtn { position: absolute; top: 24px; left: calc(var(--edge) + (100% - 2 * var(--edge)) * var(--a)); width: min(44px, calc((100% - 2 * var(--edge)) / var(--parts) - 1px)); height: 44px; transform: translateX(-50%); border: 0; border-radius: 12px; background: transparent; padding: 0; }
.fl-tickbtn::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(22px, calc(100% - 6px)); aspect-ratio: 1; border-radius: 50%; border: 2.5px solid var(--fl-ink-2); background: transparent; transform: translate(-50%, -50%); transition: transform .15s, background-color .15s; }
.fl-tickbtn:hover:not(:disabled)::before { border-color: var(--fl-ink); background-color: var(--fl-pick); transform: translate(-50%, -50%) scale(1.15); }
.fl-tickbtn.on::before { border: 3px solid var(--fl-ink); background-color: var(--fl-pick); transform: translate(-50%, -50%) scale(1.15); }
.fl-tickbtn.right::before { border: 3.5px solid var(--fl-fill); background-color: var(--fl-right); transform: translate(-50%, -50%) scale(1.15); }
.fl-tickbtn:disabled:not(.right)::before { opacity: .4; }
.fl-tickbtn:focus-visible { outline-offset: 0; }
/* a short line with many parts: the buttons stand on stems above the line, alternate ticks on
   two rows, so each is a full 44px wide without overlapping its neighbours */
.fl-tickpick.is-dense { --edge: 22px; padding-top: 60px; }
.fl-tickpick.is-dense .fl-tickbtns { top: 0; height: 100px; }
.fl-tickpick.is-dense .fl-tickbtn { top: 50px; width: min(44px, calc(2 * (100% - 2 * var(--edge)) / var(--parts) - 1px)); --stem: 21px; }
.fl-tickpick.is-dense .fl-tickbtn:nth-child(even) { top: 0; --stem: 71px; }
.fl-tickpick.is-dense .fl-tickbtn::before { width: 26px; }
.fl-tickpick.is-dense .fl-tickbtn::after { content: ''; position: absolute; left: 50%; top: calc(50% + 13px); height: var(--stem); border-left: 2px solid var(--fl-ink-2); transform: translateX(-1px); pointer-events: none; }
.fl-tickpick.is-dense .fl-tickbtn.on::after { border-left: 3px solid var(--fl-ink); transform: translateX(-1.5px); }
.fl-tickpick.is-dense .fl-tickbtn.right::after { border-left: 3.5px solid var(--fl-fill); transform: translateX(-1.75px); }
.fl-tickpick.is-dense .fl-tickbtn:disabled:not(.right)::after { opacity: .4; }
.fl-pin.dot circle { fill: var(--fl-pin); stroke: var(--fl-ink); stroke-width: 2; }
.fl-pin.dot.pick circle { fill: var(--fl-hi); }
/* compare: the two amounts with a box for the sign, and three sign buttons */
.fl-cmp-eq { display: flex; align-items: center; justify-content: center; gap: 14px; }
.fl-cmp-box { display: grid; place-items: center; width: 54px; height: 54px; border: 3px dashed var(--fl-ink-2); border-radius: 10px; font: 800 2rem var(--fl-display); color: var(--fl-ink-2); background: var(--fl-white); }
.fl-cmp-box.on { border-style: solid; border-color: var(--fl-ink); color: var(--fl-ink); background: var(--fl-hi-soft); }
.fl-cmp-box.right { border-color: var(--fl-fill); background: var(--fl-good-bg); color: var(--fl-good); }
.fl-signs .fl-ynbtn.fl-signbtn { flex: 1 1 0; justify-content: center; gap: 8px; padding: 0 10px; }
.fl-signbtn b { font: 800 1.6rem/1 var(--fl-display); }
.fl-signbtn span { font-size: .95rem; }
/* "Can it be glued?": two big radio buttons, each with a dot that fills when picked */
.fl-yn { display: flex; flex-wrap: wrap; gap: 12px; }
.fl-yn .fl-ynbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px; border-radius: 12px; border: 2px solid var(--fl-ink); background: var(--fl-white); font: 800 1.1rem var(--fl-display); box-shadow: 3px 3px 0 var(--fl-ink); }
.fl-ynbtn::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid var(--fl-ink); background: var(--fl-white); }
.fl-ynbtn.on { background: var(--fl-hi-soft); }
.fl-ynbtn.on::before { background: var(--fl-ink); box-shadow: inset 0 0 0 3px var(--fl-white); }
.fl-ynbtn:hover:not(:disabled) { background: var(--fl-hi-soft); }
.fl-ynbtn:disabled { box-shadow: none; opacity: .55; }
.fl-ynbtn.right { opacity: 1; border-color: var(--fl-fill); background: var(--fl-good-bg); color: var(--fl-good); }
.fl-ynbtn.right::after { content: '✓'; margin-left: 2px; }
.fl-glued .fl-bar { border-color: var(--fl-fill); }
.fl-ch-say { min-height: 1.6em; padding: 10px 14px; border-radius: 10px; font-weight: 600; line-height: 1.55; border: 1.5px solid transparent; }
.fl-ch-say:empty { padding: 0; min-height: 0; border: 0; }
.fl-ch-say.is-good { background: var(--fl-good-bg); border-color: var(--fl-good-line); color: var(--fl-good); }
.fl-ch-say.is-try { background: var(--fl-try-bg); border-color: var(--fl-try-line); color: var(--fl-try); }
.fl-ch-say.is-hint { background: var(--fl-hint-bg); border-color: var(--fl-hint-line); color: var(--fl-hint); }
.fl-ch-say.is-show { background: var(--fl-show-bg); border-color: var(--fl-show-line); color: var(--fl-show); }
/* rewards for a solve: one short line, then the new glass as tiles and a new star as a chip */
.fl-reward { display: block; margin-top: 8px; }
.fl-reward-line { display: block; font-size: .92rem; font-weight: 800; }
.fl-reward-line::before { content: '✦ ' / ''; color: var(--fl-pin); }
.fl-reward-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.fl-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 2px 10px; border-radius: 999px; background: var(--fl-white); border: 1.5px solid var(--fl-rule); color: var(--fl-ink); font-size: .85rem; font-weight: 800; }
.fl-chip.star > span[aria-hidden], .fl-chip .fl-starrow { color: var(--fl-star); }
/* new glass as a strip of coloured tiles, like the panes on the wall */
.fl-famglass { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--fl-ink); }
.fl-famglass i { font-style: normal; display: grid; place-items: center; min-width: 28px; height: 32px; padding: 0 4px; background: var(--glow); color: var(--fl-ink); }
.fl-famglass i:first-child { border-radius: 5px 0 0 5px; }
.fl-famglass i:last-child { border-radius: 0 5px 5px 0; }
.fl-famglass .fl-frac.tiny { font-size: .78rem; }
.fl-ch-say.is-big { animation: flBig 1.6s ease-out; }
@keyframes flBig { 0% { box-shadow: 0 0 0 0 var(--fl-hi); } 30% { box-shadow: 0 0 0 8px var(--fl-hi-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
.fl-ch-say.is-note { background: var(--fl-hint-bg); border-color: var(--fl-hint-line); color: var(--fl-hint); }
.fl-nudge { display: block; margin-top: 6px; font-weight: 800; }
.fl-ch-say.is-nudged { animation: flNudge .35s ease; }
@keyframes flNudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.fl-ch-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; scroll-margin: 16px; }
/* the end of a set */
.fl-sum { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 6px; }
.fl-sum-top { display: flex; align-items: center; gap: 14px; text-align: left; }
.fl-sum-top .fl-mira { width: 88px; height: 88px; }
.fl-sum-h { font: 800 1.15rem var(--fl-display); color: var(--fl-ink-2); border-radius: 6px; }
.fl-sum-h:focus { outline: none; }
.fl-sum-h:focus-visible { outline: 3px solid var(--fl-pin); outline-offset: 4px; }
.fl-sum-big { font: 800 2.4rem/1.05 var(--fl-display); color: var(--fl-fill); }
.fl-sum-panes { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fl-sum-panes li { width: 26px; height: 34px; border-radius: 6px 6px 3px 3px; }
.fl-sum-parts { font-weight: 700; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.fl-sum-parts > span { display: inline-flex; align-items: center; gap: 6px; }
.fl-sw { display: inline-block; width: 14px; height: 18px; border-radius: 4px 4px 2px 2px; }
.fl-sum-cheer, .fl-sum-wall, .fl-sum-best, .fl-sum-up, .fl-sum-stars { max-width: 52ch; }
.fl-sum-stars { display: grid; justify-items: center; gap: 6px; }
.fl-sum-starh { margin: 0; font-weight: 800; }
.fl-sum-starh > span { color: var(--fl-star); }
.fl-chiplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fl-chiplist .fl-chip { gap: 4px; padding: 2px 9px; font-size: .8rem; }
.fl-sum-up { padding: 8px 14px; border-radius: 10px; background: var(--fl-hi-soft); }
.fl-sum .fl-ch-actions { justify-content: center; margin-top: 6px; }

/* Mira's window wall */
.fl-wall-head { display: flex; align-items: center; gap: 14px; }
.fl-wall-head .fl-mira { width: 60px; height: 60px; }
.fl-wall-title { font: 800 1.3rem var(--fl-display); }
.fl-wall-lede { max-width: 66ch; }
.fl-wall { --wl: 108px; --pos: .5; position: relative; display: grid; gap: 6px; padding: 8px 0; }
.fl-wrow { display: grid; grid-template-columns: var(--wl) minmax(0, 1fr); align-items: center; }
/* each row's glass colours, shared by the wall, the family strips and the poster */
.fl [data-d="1"], .fl-poster [data-d="1"] { --lit: var(--fl-glass-1); --glow: var(--fl-glass-1-in); }
.fl [data-d="2"], .fl-poster [data-d="2"] { --lit: var(--fl-glass-2); --glow: var(--fl-glass-2-in); }
.fl [data-d="3"], .fl-poster [data-d="3"] { --lit: var(--fl-glass-3); --glow: var(--fl-glass-3-in); }
.fl [data-d="4"], .fl-poster [data-d="4"] { --lit: var(--fl-glass-4); --glow: var(--fl-glass-4-in); }
.fl [data-d="5"], .fl-poster [data-d="5"] { --lit: var(--fl-glass-5); --glow: var(--fl-glass-5-in); }
.fl [data-d="6"], .fl-poster [data-d="6"] { --lit: var(--fl-glass-6); --glow: var(--fl-glass-6-in); }
.fl [data-d="8"], .fl-poster [data-d="8"] { --lit: var(--fl-glass-8); --glow: var(--fl-glass-8-in); }
.fl [data-d="10"], .fl-poster [data-d="10"] { --lit: var(--fl-glass-10); --glow: var(--fl-glass-10-in); }
.fl [data-d="12"], .fl-poster [data-d="12"] { --lit: var(--fl-glass-12); --glow: var(--fl-glass-12-in); }
.fl-wname { font-weight: 700; font-size: .82rem; color: var(--fl-ink-2); padding-right: 8px; text-align: right; white-space: nowrap; }
.fl-wrow.done .fl-wname { color: var(--fl-ink); }
.fl-wstar { font-style: normal; color: var(--fl-pin); margin-right: .3em; }
/* the dark leading between panes is the bar's own background showing through the gaps */
.fl-wbar { display: flex; gap: 2px; height: 44px; cursor: pointer; border: 2px solid var(--fl-ink); border-radius: 7px; overflow: hidden; background: var(--fl-ink); }
/* a pane is clear until a solve lights it; where the line passes, lit glass glows and clear glass shows a frosted hint of its colour */
.fl-wpc { flex: 1 1 0; min-width: 0; border: 0; border-radius: 0; background-color: var(--fl-empty); display: grid; place-items: center; padding: 0; color: var(--fl-ink); transition: background-color .25s; }
.fl-wpc.lit { background-color: var(--lit); background-image: linear-gradient(155deg, var(--fl-sheen) 0 14%, transparent 14% 100%); }
.fl-wpc.in { background-color: var(--fl-glass-off-in); background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--fl-stripe) 5px 8px); }
@supports (color: color-mix(in srgb, red 50%, blue)) { .fl-wpc.in { background-color: color-mix(in srgb, var(--glow) 42%, var(--fl-empty)); } }
.fl-wpc.lit.in { background-color: var(--glow); background-image: linear-gradient(155deg, var(--fl-sheen) 0 14%, transparent 14% 100%); }
.fl-wpc.fresh { animation: flPane 1.8s ease-out; }
@keyframes flPane { 0%, 35% { box-shadow: inset 0 0 0 3px var(--fl-hi), inset 0 0 14px var(--fl-white); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
/* labels sit above the scan line, on a chip of their own pane's colour */
.fl-wpc .fl-frac { position: relative; z-index: 2; padding: 1px 3px; border-radius: 3px; background-color: inherit; transition: background-color .25s, transform .2s; }
/* every pane lit: a gold frame */
.fl-wall.is-complete .fl-wbar { box-shadow: 0 0 0 2px var(--fl-star); }
.fl-wrow.hit .fl-wname { color: var(--fl-ink); font-weight: 800; }
.fl-scanline { position: absolute; top: 2px; bottom: 2px; left: calc(var(--wl) + (100% - var(--wl)) * var(--pos)); width: 0; border-left: 3px solid var(--fl-pin); box-shadow: 0 0 0 1px var(--fl-veil); transform: translateX(-1.5px); pointer-events: none; transition: left .2s ease-out; }
.fl-wall.is-show .fl-scanline { transition-duration: .7s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
/* the slider sits under the bars, its label above it */
.fl-scan { --wl: 108px; display: grid; grid-template-columns: var(--wl) minmax(0, 1fr); align-items: center; row-gap: 4px; }
.fl-scan .fl-label { grid-column: 2; margin: 0; }
.fl-scan input { grid-column: 2; width: 100%; margin: 0; accent-color: var(--fl-pin); height: 44px; }
.fl-wall-stats { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.fl-wall-stats span { padding: 2px 10px; border-radius: 999px; background: var(--fl-white); border: 1.5px solid var(--fl-rule); font-size: .88rem; }
.fl-stars { display: grid; gap: 6px; padding: 12px 14px; border: 1.5px solid var(--fl-rule); border-radius: 10px; background: var(--fl-white); }
.fl-stars-h { margin: 0; font: 800 1rem var(--fl-display); }
.fl-stars-key { font-size: .82rem; color: var(--fl-ink-2); }
.fl-starlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 18px; }
.fl-starlist li { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: .9rem; color: var(--fl-ink-2); }
.fl-starlist li.got { color: var(--fl-ink); }
.fl-starrow { color: var(--fl-star); letter-spacing: .08em; white-space: nowrap; }
.fl-poster-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 10px; }
.fl-name { display: grid; gap: 4px; flex: 1 1 200px; max-width: 300px; }
.fl-name .fl-label { margin: 0; }
.fl-name input { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--fl-ink); border-radius: 8px; font: inherit; background: var(--fl-white); color: var(--fl-ink); }
.fl-name input::placeholder { color: var(--fl-ink-2); }
.fl-wall-say { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 64px; padding: 10px 14px; background: var(--fl-hi-soft); border-radius: 8px; }
.fl-wall-say .fl-frac { font: 800 1.5rem var(--fl-display); }
.fl-weq { font: 800 1.3rem var(--fl-display); color: var(--fl-ink-2); }
.fl-wcount { flex-basis: 100%; font-size: .9rem; font-weight: 700; color: var(--fl-ink-2); }

/* grown-ups */
.fl-grown { border-top: 1px solid var(--fl-rule); padding-top: 10px; }
.fl-grown summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
.fl-grown p { margin: 8px 0 0; max-width: 70ch; color: var(--fl-ink-2); }
.fl-grown p b { color: var(--fl-ink); }
/* sparkles live on <body> (fixed to the viewport), so their colour is set from --fl-hi in script */
.fl-spark { position: fixed; z-index: 50; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 2px; pointer-events: none; }

/* the printable poster: built on demand as a child of <body>, shown only while it prints */
.fl-wall-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.fl-poster { display: none; }
@media print {
  html.fl-printing body > *:not(.fl-poster) { display: none !important; }
  html.fl-printing, html.fl-printing body { background: none !important; margin: 0 !important; }
  html.fl-printing .fl-poster { display: block; font-family: 'DM Sans Variable', 'DM Sans', system-ui, sans-serif; color: var(--fl-ink); line-height: 1.4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.fl-poster *, .fl-poster *::before, .fl-poster *::after { box-sizing: border-box; }
.fl-poster p, .fl-poster h1, .fl-poster h2 { margin: 0; }
.flp-sheet { border: 3px solid var(--fl-ink); border-radius: 14px; padding: 20px 24px; background: var(--fl-paper); display: grid; gap: 14px; break-inside: avoid; }
.flp-sheet.gold { border: 6px double var(--fl-star); }
.flp-head { display: flex; align-items: center; gap: 16px; }
.flp-head .cx { width: 96px; height: 96px; flex: none; }
.flp-eyebrow { font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fl-ink-2); }
.flp-title { font: 800 34px/1.05 var(--fl-display); }
.flp-sub { font-size: 14px; color: var(--fl-ink-2); margin-top: 4px; }
.flp-wall { display: grid; gap: 5px; }
.flp-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; }
.flp-name { font-weight: 800; font-size: 13px; text-align: right; padding-right: 10px; color: var(--fl-ink-2); }
.flp-row.done .flp-name { color: var(--fl-ink); }
.flp-bar { display: flex; gap: 2px; height: 36px; border: 2px solid var(--fl-ink); border-radius: 7px; overflow: hidden; background: var(--fl-ink); }
.flp-pc { flex: 1 1 0; min-width: 0; display: grid; place-items: center; background: var(--fl-white); font-size: 11px; }
.flp-pc.lit { background: var(--glow); }
.flp-pc .fl-frac, .flp-win .fl-frac { display: inline-grid; grid-template-rows: auto auto; justify-items: center; line-height: 1.02; font-weight: 800; }
.flp-pc .fl-frac > span:first-child, .flp-win .fl-frac > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 .2em; }
.fl-poster .fl-frac.fl-int > span:first-child { border-bottom: 0; }
.flp-by { font: 800 17px var(--fl-display); margin-top: 2px; }
/* the families as stained-glass windows: one arched window per amount, a pane for each of its names */
.flp-fams { display: grid; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--fl-hi-soft); }
.flp-fams h2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; font: 800 16px var(--fl-display); }
.flp-fams h2 span { font: 700 12px 'DM Sans Variable', 'DM Sans', system-ui, sans-serif; color: var(--fl-ink-2); }
.flp-wins { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; align-items: end; }
.flp-win { display: grid; gap: 3px; justify-items: center; padding: 8px 4px 4px; border: 2px solid var(--fl-ink); border-radius: 40px 40px 5px 5px; background: var(--fl-white); }
.flp-win.found { box-shadow: 0 0 0 3px var(--fl-hi); }
.flp-win-h { font-size: 15px; }
.flp-glass { display: grid; gap: 2px; width: 100%; padding: 2px; border-radius: 4px; background: var(--fl-ink); }
.flp-chip { display: grid; place-items: center; min-height: 27px; background: var(--fl-white); font-size: 11px; }
.flp-chip.lit { background: var(--glow); }
.flp-stars { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; font-weight: 700; }
.flp-star b { color: var(--fl-star); letter-spacing: .06em; }
.flp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 12px; color: var(--fl-ink-2); }

/* phones: the widget's own width decides */
@container fl (max-width: 560px) {
  /* a hundredths bar is too fine for 100 full lines on a phone: they become ruler ticks under the tenths */
  .fl-bar.fine .fl-cut:not(.big) { top: 68%; }
  .fl-ex-top { grid-template-columns: minmax(0, 1fr); }
  .fl-start { display: flex; align-items: center; gap: 16px; }
  .fl-start .fl-label { margin: 0; }
  .fl-chain { min-height: 0; }
  .fl-frac.big { font-size: 1.5rem; }
  .fl-verb-misc { margin-left: 0; }
  .fl-vbtns { gap: 6px; }
  .fl-vbtn { min-width: 46px; padding: 0 4px; }
  .fl-vbtn.quiet { padding: 0 12px; }
  .fl-bar { height: 60px; }
  .fl-wall, .fl-scan { --wl: 64px; }
  .fl-wname { font-size: .72rem; padding-right: 6px; }
  .fl-wstar { margin-right: .15em; }
  .fl-sound { margin-left: auto; }
  .fl-numstep { gap: 8px; }
  .fl-numstep button { width: 44px; height: 44px; }
  .fl-topin { height: 44px; min-width: 48px; font-size: 1.7rem; }
  .fl-numstep.has-tens { gap: 5px; }
  .fl-numstep.has-tens button { width: 44px; }
  .fl-numstep.has-tens button.tens { min-width: 46px; padding: 0 4px; font-size: .95rem; }
  .fl-numstep.has-tens output { font-size: 1.6rem; min-width: 2ch; }
  .fl-cmp-eq { gap: 10px; }
  .fl-signs .fl-ynbtn.fl-signbtn { gap: 4px; padding: 0 6px; }
  .fl-signbtn::before { display: none; }
  .fl-starlist { grid-template-columns: minmax(0, 1fr); }
  .fl-sum-panes { gap: 5px; }
  .fl-sum-panes li { width: 22px; height: 30px; }
  .fl-tabs { width: 100%; justify-content: stretch; gap: 3px; }
  .fl-tabs [role="tab"] { padding: 2px 8px; font-size: .9rem; display: grid; align-content: center; line-height: 1.15; white-space: normal; }
  .fl-tabnote { font-size: .78rem; margin-left: 0; }
  .fl-wide { display: none; }
  .fl-narrow { display: inline; }
  .fl-pair .fl-strip { padding-right: 58px; }
  .fl-tag { width: 50px; font-size: 1.05rem; }
  .fl-mira { width: 42px; height: 42px; }
  /* Mira sits inside her bubble and the words wrap round her, so a line never shrinks to a sliver */
  .fl-guide, .fl-guide.is-quiet { display: block; }
  .fl-guide .fl-mira { float: left; position: relative; z-index: 1; width: 40px; height: 40px; margin: 8px 8px 2px 8px; }
  .fl-guide .fl-bubble::before { display: none; }
  .fl-guide:not(.is-quiet) .fl-bubble { min-height: 56px; }
  .fl-say { padding: 10px 12px; line-height: 1.5; }
  /* the five cuts always fit on one row */
  .fl-verb-cut { flex: 1 1 100%; }
  .fl-verb-cut .fl-vbtns { display: grid; grid-template-columns: repeat(5, minmax(0, 60px)); }
  .fl-verb-cut .fl-vbtn { min-width: 0; padding: 0 2px; }
  .fl-yn { gap: 10px; }
  .fl-yn .fl-ynbtn { flex: 1 1 0; justify-content: center; padding: 0 10px; gap: 8px; font-size: 1rem; }
  .fl-wall-head .fl-mira { width: 48px; height: 48px; }
  .fl-sum-top .fl-mira { width: 64px; height: 64px; }
  .fl-sum-big { font-size: 2rem; }
  .fl-strip { padding-inline: 10px; }
  .fl-tickpick { --edge: 14px; }
  .fl-numstep-eq { margin-left: 0; }
}
@container fl (max-width: 300px) {
  .fl-tabs [role="tab"] { padding: 2px 4px; font-size: .86rem; }
  .fl-sum-panes { gap: 4px; }
  .fl-sum-panes li { width: 18px; height: 26px; }
  .fl-ch-head { gap: 8px; }
  .fl-grade button { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-cut.new, .fl-cut.melt, .fl-strip.stay .fl-bar, .fl-pin.stay, .fl-chain li:last-child .fl-frac, .fl-tabnote.bump, .fl-wpc.fresh, .fl-ch-say.is-big, .fl-ch-say.is-nudged { animation: none; }
  .fl-cut.melt { display: none; }
  .fl-pc, .fl-wpc, .fl-wpc .fl-frac, .fl-scanline, .fl-vbtn, .fl-tickbtn::before { transition: none; }
  .fl .cx .cx-body, .fl .cx .cx-head, .fl .cx .cx-arm-l, .fl .cx .cx-arm-r, .fl .cx .cx-cheek { animation: none !important; transition: none !important; }
}

/* Windows contrast themes (forced colors): the shading is the content, so the bars, the wall and
   the picked states keep their own drawing, in system colours (Highlight for green and lit glass,
   a hatch where the colour alone would carry meaning). */
@media (forced-colors: active) {
  .fl-bar, .fl-wbar, .fl-dots li, .fl-sum-panes li, .fl-sw, .fl-famglass, .fl-cmp-box, .fl .cx, .fl-line, .fl-tickbtn::before, .fl-ynbtn::before { forced-color-adjust: none; }
  .fl-bar { background: Canvas; border-color: CanvasText; }
  .fl-pc.on, .fl-tp.on { background: Highlight; }
  .fl-tp:hover:not(:disabled) { background: Canvas; outline: 2px solid Highlight; outline-offset: -4px; }
  .fl-tp.on:hover:not(:disabled) { background: Highlight; outline: 2px solid CanvasText; outline-offset: -4px; }
  .fl-cut { --cut: CanvasText; }
  .fl-cut.on, .fl-cut.big.on { --cut: Canvas; }
  .fl-cut.edge, .fl-cut.big { --cut: CanvasText; }
  .fl-bar.wrong .fl-pc.on { background: repeating-linear-gradient(45deg, CanvasText 0 2px, Canvas 2px 6px); }
  .fl-ghost { background: repeating-linear-gradient(180deg, CanvasText 0 6px, Canvas 6px 10px); box-shadow: 0 0 0 1px Canvas; }
  .fl-bar.tall .fl-ghost { background: repeating-linear-gradient(90deg, CanvasText 0 6px, Canvas 6px 10px); }
  .fl-matchlines b { background: repeating-linear-gradient(180deg, CanvasText 0 6px, transparent 6px 10px); forced-color-adjust: none; }
  .fl-wbar { background: CanvasText; border-color: CanvasText; }
  .fl-wpc { background: Canvas; color: CanvasText; }
  .fl-wpc.lit { background: Highlight; color: HighlightText; }
  .fl-wpc.in { background: repeating-linear-gradient(135deg, Canvas 0 4px, CanvasText 4px 5px); }
  .fl-wpc.lit.in { background: repeating-linear-gradient(135deg, Highlight 0 4px, HighlightText 4px 6px); }
  .fl-wpc .fl-frac { background: Canvas; color: CanvasText; }
  .fl-scanline { border-left-color: CanvasText; forced-color-adjust: none; }
  .fl-famglass { background: CanvasText; }
  .fl-famglass i { background: Highlight; color: HighlightText; }
  .fl-line .fl-axis, .fl-line .fl-tick, .fl-line .fl-gap, .fl-line .fl-zoomlead { stroke: CanvasText; }
  .fl-line .fl-num, .fl-line .fl-sfrac text, .fl-line .fl-gaplab, .fl-line .fl-zoomtag { fill: CanvasText; }
  .fl-line .fl-sfrac line { stroke: CanvasText; }
  .fl-line .fl-pin path, .fl-line .fl-zdot { fill: Highlight; stroke: CanvasText; }
  .fl-line .fl-pin circle { fill: Canvas; }
  .fl-line .fl-pin.dot circle { fill: Highlight; stroke: CanvasText; }
  .fl-line .fl-pin.wrong path, .fl-line .fl-zdot.wrong { fill: Canvas; stroke: CanvasText; }
  .fl-line .fl-zoombox, .fl-line .fl-zoomring { fill: Canvas; stroke: CanvasText; }
  .fl-dots li, .fl-sum-panes li, .fl-sw { background: Canvas; box-shadow: inset 0 0 0 1.5px CanvasText; }
  .fl-dots li.now { box-shadow: inset 0 0 0 3px CanvasText; }
  .fl-dots li.first, .fl-sum-panes li.first, .fl-sw.first, .fl-dots li.helped, .fl-sum-panes li.helped, .fl-sw.helped { background: Highlight; }
  .fl-dots li.helped, .fl-sum-panes li.helped, .fl-sw.helped { background: repeating-linear-gradient(90deg, Highlight 0 3px, Canvas 3px 4px); }
  .fl-dots li.shown, .fl-sum-panes li.shown, .fl-sw.shown { background: repeating-linear-gradient(45deg, CanvasText 0 1px, Canvas 1px 4px); }
  .fl-tickbtn::before { border-color: CanvasText; background: transparent; }
  .fl-tickbtn:hover:not(:disabled)::before { background: transparent; border-color: Highlight; }
  .fl-tickbtn.on::before, .fl-tickbtn.right::before, .fl-tickbtn.on:hover:not(:disabled)::before { background: Highlight; border-color: CanvasText; }
  .fl-ynbtn::before { border-color: CanvasText; background: Canvas; }
  .fl-ynbtn.on::before { background: Highlight; box-shadow: inset 0 0 0 3px Canvas; }
  .fl-ynbtn.on, .fl-matchbar.on, .fl-cmp-box.on { outline: 3px solid Highlight; outline-offset: 1px; }
  .fl-cmp-box, .fl-cmp-box.on, .fl-cmp-box.right { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .fl-tabs [role="tab"][aria-selected="true"], .fl-grade button[aria-pressed="true"], .fl-sound[aria-pressed="true"], .fl-addbtn[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 1px; }
  .fl-ch-say, .fl-say, .fl-wall-say, .fl-confirm, .fl-stars { border: 1px solid CanvasText; }
}