/* Sketch kit, "Filed". Answering is filing: index cards you move, black folder pockets with the hero's frosted
   front, facts printed on a sheet. Values come from the homepage: paper, folder (#232322), frost, springs.
   One light from above: rim + top highlight + tight warm contact shadow at rest; a soft shadow only when lifted. */
.qk {
  --qk-desk: #f7f5f2; --qk-paper: #ffffff; --qk-folder: #232322; --qk-ink: #161616; --qk-ink-2: #5b5b56; --qk-ink-3: #6a6a64;
  --qk-rule: rgba(22,22,22,.08); --qk-track: rgba(22,22,22,.055);
  --qk-right: #1f9d50; --qk-wrong: #c8372d;
  --qk-hue: #ff7f66; --qk-hue-deep: #e2553e;
  --qk-c-red: #d4483b; --qk-c-blue: #3a7fc4; --qk-c-purple: #8a55c9; --qk-c-yellow: #f0b429; --qk-c-green: #3b9d5d; --qk-c-orange: #e8833a; --qk-c-pink: #e0729f; --qk-c-brown: #94663f; --qk-c-grey: #8d8a84;
  --qk-font: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --qk-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --qk-settle: cubic-bezier(.32,.72,0,1); --qk-drop: cubic-bezier(.3,1.25,.5,1); --qk-out: cubic-bezier(.19,1,.22,1);
  --qk-rest: 0 0 0 .5px rgba(40,32,24,.1), inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(40,32,24,.07), 0 2px 4px -1px rgba(40,32,24,.07);
  --qk-paper-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 -1px 2px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.06), 0 8px 16px -6px rgba(0,0,0,.1);
  font: 500 16px/1.5 var(--qk-font); color: var(--qk-ink); -webkit-font-smoothing: antialiased;
  max-width: 760px; margin: 0 auto; display: grid; gap: 22px; position: relative;
}
.qk *, .qk *::before, .qk *::after { box-sizing: border-box; }
.qk button { font: inherit; color: inherit; }
.qk :focus-visible { outline: 2px solid var(--qk-ink); outline-offset: 3px; }

/* The question: subject named quietly, then one clear question. Nothing under it. */
.qk-ask { display: grid; gap: 6px; }
.qk-ask .meta { display: flex; justify-content: space-between; gap: 12px; font: 700 13px/1 var(--qk-font); color: var(--qk-ink-3); letter-spacing: .005em; }
.qk-ask .q { margin: 0; font: 600 clamp(23px, 3.3vw, 30px)/1.14 var(--qk-display); letter-spacing: -0.03em; text-wrap: balance; }
/* emphasis in an all-bold question: a highlighter mark, not a link-like underline */
.qk-ask .q b { font-weight: 700; color: var(--qk-ink); background: linear-gradient(transparent 58%, color-mix(in srgb, var(--qk-hue) 30%, transparent) 58%, color-mix(in srgb, var(--qk-hue) 30%, transparent) 92%, transparent 92%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Sheet: where the facts are printed. The hero's paper. */
.qk-sheet { background: var(--qk-paper); border-radius: 14px; box-shadow: var(--qk-paper-shadow); padding: 20px 22px; position: relative; }
@media (max-width: 520px) { .qk-sheet { padding: 16px 14px; border-radius: 12px; } }

/* Card: a small index card with a tab. What you move. */
.qk-tile { appearance: none; border: 0; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; position: relative;
  min-height: 46px; min-width: 96px; padding: 12px 16px 11px; border-radius: 10px; background: var(--qk-paper); box-shadow: var(--qk-rest);
  font: 600 15px/1.2 var(--qk-font); letter-spacing: -0.005em; text-align: left; display: inline-flex; align-items: center;
  transform: rotate(var(--r, 0deg)); transition: transform 420ms var(--qk-settle), opacity 200ms; }
.qk-tile::before { content: ""; position: absolute; left: 10px; top: -6px; width: 34%; max-width: 54px; height: 7px; border-radius: 5px 5px 0 0;
  background: var(--tc, var(--qk-paper)); box-shadow: 0 0 0 .5px rgba(40,32,24,.1); clip-path: inset(-2px -2px 0 -2px); }
.qk-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 260ms var(--qk-out);
  box-shadow: 0 6px 12px -2px rgba(40,32,24,.12), 0 18px 30px -12px rgba(40,32,24,.2); }
.qk-tile:hover { transform: translateY(-2px) rotate(var(--r, 0deg)); }
.qk-tile:active { transform: scale(.97) rotate(var(--r, 0deg)); transition-duration: 90ms; }
.qk-tile.sel { transform: translateY(-6px) rotate(-1.5deg) scale(1.03); }
.qk-tile.sel::after, .qk-tile.dragging::after { opacity: 1; }
.qk-tile.dragging { cursor: grabbing; z-index: 60; transition: none; pointer-events: none; }
.qk-tile .lbl { display: block; }

/* Desk: loose cards resting where you left them. No tray, no box. */
.qk-desk { display: flex; flex-wrap: wrap; gap: 16px 14px; min-height: 58px; padding: 8px 2px 4px; align-content: flex-start; }
.qk-desk:empty { min-height: 0; padding: 0; }

/* Pocket: a little black folder with the frosted front. Cards file in behind the lip. */
.qk-well { position: relative; min-height: 78px; border-radius: 6px 12px 12px 12px; background: var(--qk-folder); padding: 12px 8px 0; display: flex; align-items: flex-start; justify-content: center;
  margin-top: 9px; transition: background 220ms; }
.qk-well::before { content: ""; position: absolute; left: 0; top: -8px; width: 42%; height: 12px; border-radius: 7px 9px 0 0; background: inherit;
  clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%); transition: background 220ms; }
.qk-well > .qk-tile { width: 100%; min-width: 0; --r: 0deg; z-index: 1; transform: translateY(0); }
.qk-well > .qk-tile:hover { transform: translateY(-3px); }
.qk-well .lip { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 52%; border-radius: 10px 10px 12px 12px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.8)); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), 0 -1px 3px rgba(0,0,0,.12); display: flex; align-items: flex-end; padding: 0 10px 7px;
  font: 700 11.5px/1 var(--qk-font); color: var(--qk-ink-2); letter-spacing: .01em; }
.qk-well .lip .glyph { width: 13px; height: 13px; margin-right: 5px; flex: none; }
.qk-well.hot { background: #2f2f2d; }
.qk-well.hot .lip { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1.5px var(--qk-ink); }
@media (prefers-reduced-transparency: reduce) { .qk-well .lip { background: #ecebe8; -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Filed right: the tab lights green. Filed wrong: the card sits proud of the pocket, and the lip names the right card. */
.qk-well.ok, .qk-well.ok::before { background: var(--qk-right); }
.qk-well.bad::before { background: var(--qk-wrong); }
.qk-well.bad > .qk-tile { transform: translateY(-10px) rotate(-2deg); }
.qk-well .lip .fix { color: var(--qk-right); font-weight: 700; }

.qk-pockets { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(max(132px, calc((100% - (var(--n) - 1) * 14px) / var(--n))), 1fr)); }
.qk-tile { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 560px) { .qk-pockets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qk-answer-pocket { max-width: 360px; }

/* Printed diagram: labels in ink, arrows you can tap. */
.qk-diagram { display: grid; justify-items: center; gap: 0; }
.qk-node { font: 600 17px/1.2 var(--qk-display); letter-spacing: -0.015em; text-align: center; padding: 6px 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.qk-node.end { color: var(--qk-ink-2); }
.qk-node.out { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--qk-ink-3); }
.qk-node .qk-well { min-width: 130px; min-height: 70px; margin-top: 8px; }
.qk-edge { display: grid; justify-items: center; color: rgba(22,22,22,.55); padding: 0; }
.qk-edge .fixed { font: 600 12.5px/1 var(--qk-font); color: var(--qk-ink-3); margin-top: -2px; padding-bottom: 4px; }
.qk-link { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; min-width: 150px; padding: 2px 14px 2px 8px; border-radius: 12px;
  background: transparent; color: var(--qk-ink-3); font: 600 14px/1 var(--qk-font); transition: background 160ms, color 160ms, transform 300ms var(--qk-settle); }
.qk-link:hover { background: var(--qk-track); }
.qk-link:active { transform: scale(.97); }
.qk-link.set { color: var(--qk-ink); }
.qk-link.pop .arrow { animation: qk-pop 360ms var(--qk-drop); }
.qk-link.is-right { color: var(--qk-right); }
.qk-link.is-wrong { color: var(--qk-wrong); }
.qk-link.is-wrong .lbl { text-decoration: line-through; }

/* Segments: equal widths, nouns, a paper thumb. */
.qk-grid { display: grid; gap: 10px; }
.qk-grid .row { display: grid; grid-template-columns: minmax(110px, .9fr) repeat(var(--c), minmax(0, 2fr)); gap: 12px; align-items: center; }
.qk-grid .row.head { font: 700 12px/1.2 var(--qk-font); color: var(--qk-ink-3); }
.qk-grid .rl { font: 600 16px/1.2 var(--qk-display); letter-spacing: -0.01em; }
.qk-grid .colname { display: none; font-size: 12px; color: var(--qk-ink-3); margin-bottom: 4px; font-weight: 700; }
.qk-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 3px; gap: 3px; border-radius: 12px; background: var(--qk-track); }
.qk-seg button { appearance: none; border: 0; cursor: pointer; min-height: 42px; padding: 6px 10px; border-radius: 9px; background: transparent; font: 600 14px/1.15 var(--qk-font); color: var(--qk-ink-2);
  transition: background 180ms, color 180ms, box-shadow 180ms; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.qk-seg button[aria-pressed="true"] { background: var(--qk-paper); color: var(--qk-ink); box-shadow: var(--qk-rest); }
.qk-seg button.is-right { color: var(--qk-right); }
.qk-seg button.is-wrong { color: var(--qk-wrong); text-decoration: line-through; }
@media (max-width: 560px) { .qk-grid .row { grid-template-columns: minmax(0, 1fr); gap: 6px; } .qk-grid .row.head { display: none; } .qk-grid .colname { display: block; } }

/* Table, printed */
.qk-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.qk-table th, .qk-table td { padding: 11px 12px; text-align: center; border-bottom: 1px solid var(--qk-rule); }
.qk-table thead th { font: 700 12.5px/1.2 var(--qk-font); color: var(--qk-ink-3); }
.qk-table th[scope="row"] { text-align: left; font: 600 15.5px/1.2 var(--qk-display); }
.qk-table tr:last-child td, .qk-table tr:last-child th { border-bottom: 0; }
.qk-table td.pos { font-weight: 700; } .qk-table td.neg { color: var(--qk-ink-3); }
.qk-table td.hidden-col { background: repeating-linear-gradient(135deg, rgba(22,22,22,.035) 0 5px, transparent 5px 10px); }
.qk-table td.newly { animation: qk-in 420ms var(--qk-out) both; }
.qk-tw { overflow-x: auto; }

/* Chart, printed in tones of the subject's colour, labelled on the line */
.qk-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.qk-chart .ax { stroke: rgba(22,22,22,.28); stroke-width: 1; }
.qk-chart .grid { stroke: rgba(22,22,22,.06); stroke-width: 1; }
.qk-chart text { font: 600 11.5px var(--qk-font); fill: var(--qk-ink-3); }
.qk-chart .lab { font: 700 12.5px var(--qk-font); }
.qk-chart .series path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.qk-chart .series path.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: qk-draw 1000ms var(--qk-out) forwards; }
.qk-chart .band { fill: rgba(22,22,22,.045); }
.qk-chart .bandlab { font: 700 11.5px var(--qk-font); fill: var(--qk-ink-2); }
.qk-wait { min-height: 120px; display: grid; place-items: center; color: var(--qk-ink-3); font-size: 14px; font-weight: 600;
  background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(22,22,22,.05) 27px 28px); border-radius: 8px; }

/* Levels, printed: a gutter of labels, then columns you set by dragging a tab */
.qk-levels { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.qk-gutter { position: relative; width: 88px; font: 700 12px/1.15 var(--qk-font); color: var(--qk-ink-3); }
.qk-gutter span { position: absolute; right: 0; transform: translateY(50%); text-align: right; }
.qk-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.qk-col { display: grid; gap: 8px; }
.qk-col .name { font: 600 14.5px/1.2 var(--qk-display); text-align: center; letter-spacing: -0.01em; }
.qk-col .well { position: relative; height: 230px; border-radius: 10px; overflow: hidden; touch-action: none; cursor: ns-resize; background: #fcf6f3; }
.qk-col .base { position: absolute; left: 0; right: 0; height: 2px; background: var(--qk-ink); }
.qk-col .handle { position: absolute; left: 0; right: 0; height: 0; z-index: 3; }
.qk-col .handle::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--qk-ink); opacity: .75; }
.qk-col .handle::after { content: ""; position: absolute; left: 50%; top: -9px; width: 36px; height: 18px; margin-left: -18px; border-radius: 6px; background: var(--qk-paper); box-shadow: var(--qk-rest), 0 3px 8px -2px rgba(40,32,24,.18); }
.qk-col .truthline { position: absolute; left: 0; right: 0; height: 0; border-top: 2.5px solid var(--qk-right); z-index: 2; animation: qk-in 420ms var(--qk-out) both; }
.qk-col .gap { position: absolute; left: 0; right: 0; background: rgba(200,55,45,.1); z-index: 1; }
.qk-col .val { font: 700 12px/1 var(--qk-font); text-align: center; color: var(--qk-ink-3); font-variant-numeric: tabular-nums; min-height: 12px; }
.qk-col .val.bad { color: var(--qk-wrong); } .qk-col .val.ok { color: var(--qk-right); }
.qk-col .epi { position: absolute; inset: 0; width: 100%; height: 100%; }
.qk-col .epi .fib { fill: none; stroke: #ecd9cf; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.qk-col .epi .cy { fill: #fdebe5; stroke: #f1d0c4; stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill 220ms, stroke 220ms; }
.qk-col .epi .nu { fill: #d6aa9b; transition: fill 220ms; }
.qk-col .epi .atyp .cy { fill: #f9d2c7; stroke: #e98c75; }
.qk-col .epi .atyp .nu { fill: #a8341f; }
.qk-col .epi .tongue { fill: #f9d2c7; stroke: #c4472f; stroke-width: 1; vector-effect: non-scaling-stroke; }
@media (max-width: 560px) { .qk-levels { grid-template-columns: minmax(0, 1fr); } .qk-gutter { display: none; } .qk-col .well { height: 190px; } .qk-cols { gap: 6px; } .qk-col .name { font-size: 12.5px; } }

/* Check and continue: the homepage's black button */
.qk-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qk-btn { appearance: none; border: 0; cursor: pointer; height: 48px; padding: 0 24px; border-radius: 14px; background: var(--qk-ink); color: #fff !important; font: 700 15.5px/1 var(--qk-font);
  transition: transform 300ms var(--qk-settle), background 160ms, opacity 200ms; }
.qk-btn:hover:not(:disabled):not(.off) { background: #000; transform: translateY(-1px); }
.qk-btn:active:not(:disabled):not(.off) { transform: scale(.97); transition-duration: 90ms; }
.qk-btn:disabled, .qk-btn.off { opacity: .2; cursor: not-allowed; }

/* The note: quiet, specific, next to what you did */
.qk-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px; padding-top: 18px; border-top: 1px solid var(--qk-rule); animation: qk-in 420ms var(--qk-out) both; }
.qk-note .glyph { width: 22px; height: 22px; margin-top: 1px; }
.qk-note .v { font: 700 16px/1.35 var(--qk-font); }
.qk-note p { margin: 0; grid-column: 2; font-size: 15.5px; line-height: 1.5; color: var(--qk-ink-2); max-width: 62ch; }
.qk-note p.mis { color: var(--qk-ink); }
.qk-note b { color: var(--qk-ink); font-weight: 700; }

.qk-hidden { display: none !important; }
@keyframes qk-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes qk-draw { to { stroke-dashoffset: 0; } }
@keyframes qk-pop { from { transform: scale(.82); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .qk *, .qk *::before, .qk *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } .qk-tile { transform: none !important; } }

/* ---------- Quiet: what the references do. The concept is the picture; controls are plain and nearly invisible. ---------- */
.qk.quiet { gap: 26px; }
.qk.quiet .qk-sheet { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.qk.quiet .qk-tile { background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(22,22,22,.14), 0 1px 1px rgba(22,22,22,.04); padding: 12px 16px; transform: none; --r: 0deg; min-height: 48px; }
.qk.quiet .qk-tile::before { display: none; }
.qk.quiet .qk-tile::after { box-shadow: 0 8px 18px -6px rgba(22,22,22,.22); }
.qk.quiet .qk-tile:hover { box-shadow: 0 0 0 1px rgba(22,22,22,.32), 0 1px 1px rgba(22,22,22,.04); transform: none; }
.qk.quiet .qk-tile.sel { box-shadow: 0 0 0 2px var(--qk-ink); transform: none; }
.qk.quiet .qk-tile.dragging { box-shadow: 0 0 0 1px rgba(22,22,22,.2); }
.qk.quiet .qk-desk { gap: 10px; padding: 0; }
.qk.quiet .qk-well { background: transparent; border-radius: 12px; padding: 26px 0 0; margin-top: 0; min-height: 76px; display: block; box-shadow: none; }
.qk.quiet .qk-well::before { display: none; }
.qk.quiet .qk-well::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 26px; border-radius: 12px; border: 1.5px dashed rgba(22,22,22,.2); pointer-events: none; }
.qk.quiet .qk-well:has(.qk-tile)::after { border-color: transparent; }
.qk.quiet .qk-well > .qk-tile { width: 100%; transform: none; }
.qk.quiet .qk-well .lip { position: absolute; top: 0; bottom: auto; height: auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 0;
  font: 700 12.5px/1.2 var(--qk-font); color: var(--qk-ink-3); align-items: center; }
.qk.quiet .qk-well.hot::after { border-color: var(--qk-ink); border-style: solid; }
.qk.quiet .qk-well.ok, .qk.quiet .qk-well.bad { background: transparent; }
.qk.quiet .qk-well.ok > .qk-tile { box-shadow: 0 0 0 2px var(--qk-right); }
.qk.quiet .qk-well.bad > .qk-tile { box-shadow: 0 0 0 2px var(--qk-wrong); transform: none; }
.qk.quiet .qk-well.bad > .qk-tile .lbl { text-decoration: line-through; text-decoration-color: var(--qk-wrong); }
.qk.quiet .qk-answer-pocket { max-width: 320px; }
.qk.quiet .qk-wait { background: none; border: 1.5px dashed rgba(22,22,22,.14); border-radius: 12px; min-height: 140px; }

/* Drag: a dashed outline marks where the card came from. */
.qk-tile.origin { opacity: 1 !important; background: transparent !important; box-shadow: inset 0 0 0 1.5px rgba(22,22,22,.16) !important; }
.qk-tile.origin .lbl { visibility: hidden; }
.qk.quiet .qk-tile.dragging { box-shadow: 0 0 0 1px rgba(22,22,22,.18), 0 10px 24px -8px rgba(22,22,22,.28) !important; }

/* Separation: the question, then room, then the sketch. */
.qk.quiet .qk-ask { padding-bottom: 14px; }

/* Flow diagram: one left edge for steps, connectors and labels. */
.qk.quiet .qk-diagram { justify-items: start; gap: 0; }
.qk.quiet .qk-node { justify-content: flex-start; text-align: left; padding: 4px 0; font: 600 19px/1.2 var(--qk-display); letter-spacing: -0.02em; }
.qk.quiet .qk-node.end { color: var(--qk-ink); }
.qk.quiet .qk-edge { display: block; color: var(--qk-ink); }
.qk.quiet .qk-edge .conn, .qk.quiet .qk-link { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; }
.qk.quiet .qk-edge .arrow { flex: none; margin-left: 2px; }
.qk.quiet .qk-edge .fixed { font: 600 14px/1 var(--qk-font); color: var(--qk-ink-3); padding: 0; margin: 0; }
.qk.quiet .qk-link { min-width: 220px; padding: 0 14px 0 0; margin-left: -8px; padding-left: 8px; border-radius: 10px; color: var(--qk-ink-3); }
.qk.quiet .qk-link .lbl { font: 600 15px/1 var(--qk-font); }
.qk.quiet .qk-link:not(.set) .lbl { color: var(--qk-ink-3); }
.qk.quiet .qk-link.set { color: var(--qk-ink); }
.qk.quiet .qk-link:hover { background: rgba(22,22,22,.045); }
.qk.quiet .qk-link.is-right { color: var(--qk-right); background: transparent; }
.qk.quiet .qk-link.is-wrong { color: var(--qk-wrong); background: transparent; }
.qk.quiet .qk-link.pop .arrow { animation: none; }

/* v3: option rows wrap at narrow widths instead of squeezing labels into each other */
.qk-cell { container-type: inline-size; min-width: 0; }
.qk-seg button span { overflow-wrap: anywhere; hyphens: auto; }
@container (max-width: 520px) { .qk-seg.n4, .qk-seg.n5 { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }
@container (max-width: 300px) { .qk-seg.n3 { grid-auto-flow: row; grid-template-columns: 1fr; } }
.qk-col .truthband { position: absolute; left: 0; right: 0; background: rgba(54,196,107,.16); border-top: 2.5px solid var(--qk-right); border-bottom: 2.5px solid var(--qk-right); z-index: 2; animation: qk-in 420ms var(--qk-out) both; }

/* v3: bespoke figures */
.qk-figure { position: relative; max-width: 640px; margin: 0 auto; }
.qk-figure svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--qk-font); }
.qk-figure .qk-after { opacity: 0; transition: opacity 420ms var(--qk-out); pointer-events: none; }   /* hidden until Check, and never in the way of a tap */
.qk-figure .qk-after.on { opacity: 1; }
.qk-figure .qk-fade { transition: opacity 420ms var(--qk-out); }
.qk-figure .qk-fade.on { opacity: .28; }
.qk-figure .qk-well.pin { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.qk.quiet .qk-figure .qk-well.pin { padding: 0; min-height: 0; height: 38px; min-width: 5.4em; }
.qk.quiet .qk-figure .qk-well.pin::after { top: 0; border-radius: 9px; background: rgba(247,245,242,.72); }
.qk.quiet .qk-figure .qk-well.pin > .qk-tile { min-height: 38px; height: 38px; padding: 0 10px; font-size: 13.5px; border-radius: 9px; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.qk.quiet .qk-figure .qk-well.pin .lip { top: auto; bottom: calc(100% + 3px); left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; padding: 1px 5px; border-radius: 5px; background: var(--qk-desk); }
@media (max-width: 480px) {
  .qk.quiet .qk-figure .qk-well.pin { height: 32px; min-width: 4.4em; }
  .qk.quiet .qk-figure .qk-well.pin > .qk-tile { min-height: 32px; height: 32px; padding: 0 7px; font-size: 12px; }
}
.qk.quiet .qk-figure .qk-well.pin .lip:empty { display: none; }

/* v3b: choose is tapped in place (no answer slot that looks like a text box) */
.qk-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.qk-opt { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-align: left; font: inherit; color: var(--qk-ink); }
.qk.quiet .qk-opt[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--qk-ink); }
.qk.quiet .qk-opt.is-right { box-shadow: 0 0 0 2px var(--qk-right); }
.qk.quiet .qk-opt.is-wrong { box-shadow: 0 0 0 2px var(--qk-wrong); }
.qk-opt.is-wrong .lbl { text-decoration: line-through; text-decoration-color: var(--qk-wrong); }
.qk-opt.is-dim { opacity: .5; }
/* the tick or cross sits on the chip's corner like a badge, so no chip changes size at Check */
.qk-opt { position: relative; }
.qk-opt .glyph { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; flex: none; background: var(--qk-paper); border-radius: 50%; }

/* Arrows: drag out from a dot to set an arrow. Learner arrows in ink; at Check, right ones turn green and the true arrow is drawn for wrong ones. */
.qk-arrows .qk-arrow { cursor: crosshair; outline: none; }
.qk-arrows .hit { fill: transparent; }
.qk-arrows .ring { fill: none; stroke: var(--qk-ink-3); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .9; }
.qk-arrows .qk-arrow.set .ring { opacity: 0; }
.qk-arrows .qk-arrow:focus-visible .ring { opacity: 1; stroke: var(--qk-ink); stroke-dasharray: none; }
.qk-arrows .dot { fill: var(--qk-ink); }
.qk-arrows .ln { fill: none; stroke: var(--qk-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.qk-arrows .qk-arrow.ok .ln, .qk-arrows .qk-arrow.ok .dot { stroke: var(--qk-right); fill: var(--qk-right); }
.qk-arrows .qk-arrow.ok .ln { fill: none; }
.qk-arrows .qk-arrow.bad .ln { stroke: var(--qk-wrong); opacity: .55; }
.qk-arrows .truth { fill: none; stroke: var(--qk-right); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: qk-in 420ms var(--qk-out) both; }
.qk-arrows .none-mark { display: none; fill: none; stroke: var(--qk-ink-2); stroke-width: 2; }
.qk-arrows .none-mark.on { display: inline; }
.qk-arrows .qk-arrow.ok .none-mark { stroke: var(--qk-right); }
.qk-arrows .qk-arrow.bad .none-mark { stroke: var(--qk-wrong); }
.qk-arrows .truth-none { fill: none; stroke: var(--qk-right); stroke-width: 2.5; animation: qk-in 420ms var(--qk-out) both; }

/* Spot: tap a place on the figure. */
.qk-tappable { cursor: crosshair; outline: none; }
.qk-tappable:focus-visible { outline: 2px solid var(--qk-ink); outline-offset: 4px; border-radius: 6px; }
/* a tap mark stands out from any outline in the figure: subject colour, thick, with a paper halo */
.qk-spots .mark { fill: none; stroke: var(--qk-hue-deep); stroke-width: 3.5; filter: drop-shadow(0 0 1.5px var(--qk-paper)) drop-shadow(0 0 1.5px var(--qk-paper)); }
.qk-spots .mark.ok { stroke: var(--qk-right); stroke-width: 2.2; }
.qk-spots .mark.bad { stroke: var(--qk-wrong); }
.qk-spots .truth { fill: none; stroke: var(--qk-right); stroke-width: 3; animation: qk-in 420ms var(--qk-out) both; }

/* States: tap a part of the figure to change it. */
.qk-figure .qk-part { cursor: pointer; outline: none; }
.qk-figure .qk-part > rect.hit { fill: transparent; stroke: none; }
/* a movable part is grabbed by a wide invisible copy of its own lines */
.qk-figure .qk-part > g.hit :is(path, line, polyline) { fill: none !important; stroke: transparent !important; pointer-events: stroke; stroke-linecap: round; }
.qk-locked .qk-figure .qk-part > g.hit { display: none; }
.qk-figure .qk-part > g.hit rect { fill: transparent; stroke: none; }
.qk-states .ring { fill: none; stroke: var(--qk-ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0; pointer-events: none; }
.qk-states .ring.bad { opacity: 1; stroke: var(--qk-right); stroke-width: 2.2; stroke-dasharray: 5 4; animation: qk-in 420ms var(--qk-out) both; }
.qk-states .ring.unset { opacity: .9; }
.qk-states .ring.set { opacity: .5; stroke-dasharray: none; stroke-width: 1.2; }
.qk-states .ring.ok { opacity: 1; stroke: var(--qk-right); stroke-width: 2.2; stroke-dasharray: none; }
.qk-states .badge circle { fill: var(--qk-wrong); }
.qk-states .badge text { fill: #fff; font-family: var(--qk-font); font-weight: 700; }
.qk-details { grid-column: 2; margin: 4px 0 2px; padding: 0; list-style: none; display: grid; gap: 6px; }
.qk-details li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 15.5px; line-height: 1.45; color: var(--qk-ink-2); }
.qk-details .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--qk-wrong); color: #fff; font: 700 12.5px/1 var(--qk-font); transform: translateY(3px); }
.qk-details b { color: var(--qk-ink); }
.qk-states .tag { font-family: var(--qk-font); font-weight: 650; fill: var(--qk-ink); cursor: pointer; }
.qk-states .pill { fill: var(--qk-paper); stroke: var(--qk-ink-3); stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: pointer; }
.qk-states .tag.ok { fill: var(--qk-right); cursor: default; }
.qk-states .pill.ok { stroke: var(--qk-right); cursor: default; }
.qk-states .pill.bad { stroke: var(--qk-wrong); cursor: default; }
.qk-states .tag .not { fill: var(--qk-ink-3); font-weight: 500; }
.qk-states .tag .was { fill: var(--qk-wrong); text-decoration: line-through; font-weight: 500; }
.qk-figure .qk-part:focus-visible { outline: 2px solid var(--qk-ink); outline-offset: 4px; }

.qk-figure:has(.qk-picker) { position: relative; }
.qk-picker { position: absolute; z-index: 5; display: flex; gap: 4px; padding: 4px; background: var(--qk-paper); border-radius: 12px;
  box-shadow: 0 0 0 .5px rgba(40,32,24,.14), 0 8px 24px -8px rgba(40,32,24,.35); animation: qk-in 160ms var(--qk-out) both; }
.qk-picker[hidden] { display: none; }
.qk-picker button { appearance: none; border: 0; cursor: pointer; min-height: 40px; padding: 6px 12px; border-radius: 9px; background: transparent; font: 600 14.5px/1.1 var(--qk-font); color: var(--qk-ink); white-space: nowrap; }
.qk-picker button:hover, .qk-picker button:focus-visible { background: var(--qk-desk); outline: none; }
.qk-picker button[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--qk-ink); }

/* Move: drag a part along a line. */
.qk-figure [role="slider"].qk-part { cursor: grab; touch-action: none; }
.qk-figure [role="slider"].qk-part:active { cursor: grabbing; }
.qk-figure .qk-ghost { opacity: 0; pointer-events: none; }
.qk-figure .qk-ghost.on { opacity: .28; }
.qk-figure .qk-ghost.on * { stroke-dasharray: 5 5; }
.qk-figure .qk-part .grip circle { fill: var(--qk-paper); stroke: var(--qk-ink); stroke-width: 1.8; }
.qk-figure .qk-part .grip path { fill: none; stroke: var(--qk-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qk-figure .qk-part.ok .grip, .qk-figure .qk-part.bad .grip, .qk-figure .qk-part.still .grip { display: none; }
.qk-figure [role="slider"].qk-part.ok :is(path, line, polyline) { stroke: var(--qk-right); }
.qk-figure [role="slider"].qk-part.ok text { fill: var(--qk-right); }
.qk-figure [role="slider"].qk-part.bad { opacity: .45; }
.qk-move .qk-truth { pointer-events: none; animation: qk-in 420ms var(--qk-out) both; }
.qk-move .qk-truth * { stroke: var(--qk-right); }
.qk-move .qk-truth text { fill: var(--qk-right); stroke: none; }
.qk-move .qk-truth.still * { stroke: var(--qk-ink); }
.qk-move .qk-truth.still text { fill: var(--qk-ink); }

/* Value: type a number. */
.qk-values { display: grid; gap: 12px; justify-items: start; }
.qk-value { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.qk-value input { width: 9ch; font: inherit; font-size: 18px; font-variant-numeric: tabular-nums; padding: 10px 12px; border-radius: 12px; border: 1.5px solid rgba(22,22,22,.18); background: var(--qk-paper); color: var(--qk-ink); }
.qk-value input:focus-visible { outline: 2px solid var(--qk-ink); outline-offset: 2px; }
.qk-value .unit { color: var(--qk-ink-2); }
.qk-value.ok input { border-color: var(--qk-right); color: var(--qk-right); }
.qk-value.bad input { border-color: var(--qk-wrong); color: var(--qk-wrong); }
.qk-value .fix { color: var(--qk-right); }

/* Sort: open groups where items stack; each item is marked at Check. */
.qk.quiet .qk-sort .qk-well { display: flex; flex-direction: column; gap: 8px; padding: 34px 10px 10px; min-height: 150px; }
.qk.quiet .qk-sort .qk-well::after { top: 26px; }
.qk.quiet .qk-sort .qk-well:has(.qk-tile)::after { border-color: rgba(22,22,22,.2); }
.qk.quiet .qk-sort .qk-well .lip { left: 0; padding-left: 2px; }
.qk.quiet .qk-sort .qk-tile.ok { box-shadow: 0 0 0 2px var(--qk-right); }
.qk.quiet .qk-sort .qk-tile.bad { box-shadow: 0 0 0 2px var(--qk-wrong); }
.qk.quiet .qk-sort .qk-tile .to { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--qk-right); }
.qk.quiet .qk-sort .qk-tile:has(.to) { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.qk.quiet .qk-sort .qk-tile .to { margin-top: 0; }

/* how to answer an on-figure question; hidden at Check */
.qk-hint { margin: 10px 4px 0; font-size: 14px; line-height: 1.4; color: var(--qk-ink-3); text-align: center; }
.qk-hint[hidden] { display: none; }

/* after Check nothing looks tappable */
.qk-locked .qk-seg button, .qk-locked .qk-opt, .qk-locked .qk-link, .qk-locked .qk-figure .qk-part, .qk-locked .qk-tappable, .qk-locked .qk-tile { cursor: default; }
.qk-locked .qk-seg button:not(.is-right):not(.is-wrong):not([aria-pressed="true"]) { opacity: .45; }
.qk-locked .qk-value input { background: transparent; }
.qk-well.pin.quiet { opacity: .35; }

.qk-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qk-nudge { font-size: 14.5px; color: var(--qk-ink-2); max-width: 34ch; }
.qk-nudge[hidden] { display: none; }
.qk-nudge.pop { animation: qk-in 300ms var(--qk-out) both; }
.qk-end { font-size: 14.5px; color: var(--qk-ink-3); }

/* a tapped card: the places it can go light up */
.qk-picking [data-drop]:not(.qk-desk) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--qk-hue) 60%, transparent); }

/* feedback above the button: keep a gap before it */
.qk-note { margin-bottom: 6px; }

/* spot at Check: found = solid green ring with a dot, missed = dashed green ring, wrong = red ring */
.qk-spots .truth.missed { stroke-dasharray: 5 4; }

/* place at Check: the right card shown in the spot it belongs in; a wrongly filled spot says so in red */
.qk-well .qk-tile.belongs { outline: 2px dashed var(--qk-right); outline-offset: -2px; color: var(--qk-right); background: var(--qk-paper); box-shadow: none; cursor: default; }
.qk-well .fix.none { color: var(--qk-wrong); }
.qk-well:focus-visible { outline: 2px solid var(--qk-ink); outline-offset: 2px; }

/* the no-arrow mark sits on its own paper disc, so its slash shows even along a sloping line */
.qk-arrows .none-mark circle { fill: var(--qk-paper); }
.qk-arrows .none-mark path { stroke-width: 2.4; }

/* a figure's own invisible helper lines never take a reveal colour */
.qk-figure .qk-invisible { stroke: transparent !important; fill: transparent !important; }

.qk-arrows .halo { fill: none; stroke: var(--qk-paper); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.qk-arrows .truth-none { fill: var(--qk-paper); stroke: var(--qk-right); stroke-width: 2.4; animation: qk-in 420ms var(--qk-out) both; }
.qk-arrows .truth { stroke-width: 2.4; }
.qk-arrows .qk-arrow.bad .ln { opacity: .5; }

/* move at Check: where a part belongs is dashed (green, or ink if it should have stayed) and keeps its label; the learner's wrong part fades without one */
.qk-move .qk-truth :is(path, line, polyline) { stroke-dasharray: 8 6; }
.qk-figure [role="slider"].qk-part.bad text { display: none; }
.qk-details li.plain { grid-template-columns: minmax(0, 1fr); }

/* Desktop: the figure on the left, what you answer, the feedback and Check on the right */
@media (min-width: 960px) {
  .qk { max-width: 1180px; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); column-gap: 48px; align-items: start; }
  .qk > .qk-ask { grid-column: 1 / -1; }
  .qk > .qk-sheet { grid-column: 1; grid-row: 2 / span 8; position: sticky; top: 8px; }
  .qk > :not(.qk-ask):not(.qk-sheet) { grid-column: 2; }
  .qk-figure { max-width: 700px; }
  .qk:has(.qk-table, .qk-seg, .qk-col) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
}


/* A Questo lesson. One step at a time: the teaching with its drawing, then the student works the point on a sketch.
   The sketches are played by the sketch kit. This file is the screen around them. */
.ls { color-scheme: light; --canvas: #f7f5f2; --ink: #161616; --ink-2: #5b5b56; --font: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Funnel Display", "Funnel Sans", system-ui, sans-serif; --out: cubic-bezier(.19,1,.22,1); --spring: cubic-bezier(.3,1.6,.5,1); } .ls, .ls *, .ls *::before, .ls *::after { box-sizing: border-box; } .ls { color: var(--ink); font: 500 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
.ls-top { position: sticky; top: 0; z-index: 30; height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 max(16px, env(safe-area-inset-left, 0px)); background: rgba(247,245,242,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ls-top .l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ls-back { appearance: none; border: 0; background: none; color: inherit; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; flex: none; transition: background 200ms, transform 300ms var(--spring); }
.ls-back:hover:not(:disabled) { background: rgba(22,22,22,.07); } .ls-back:active:not(:disabled) { transform: scale(.92); } .ls-back:disabled { opacity: .22; cursor: default; }
.ls-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ls-top b { font: 600 15.5px/20px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-segs { display: flex; gap: 4px; width: min(420px, 44vw); }
.ls-segs i { flex: 1; height: 6px; border-radius: 3px; background: rgba(22,22,22,.1); position: relative; overflow: hidden; }
.ls-segs i::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--ink); transform-origin: left; transform: scaleX(var(--f, 0)); transition: transform 600ms var(--out); }
.ls-main { padding: clamp(18px, 4vh, 36px) max(20px, env(safe-area-inset-left, 0px)) 96px; }
.ls-host { animation: ls-in 520ms var(--out) backwards; } @keyframes ls-in { from { opacity: 0; transform: translateY(14px); } }
/* The kit's own layout is used for teaching screens too, so the two kinds of screen line up. */
.ls-host .qk { max-width: 760px; } @media (min-width: 960px) { .ls-host .qk { max-width: 1080px; grid-template-columns: minmax(0, 600px) minmax(320px, 1fr); column-gap: 56px; } }
.ls-host .qk-ask .meta { display: none; } .ls-host .qk.quiet .qk-ask { padding-bottom: 6px; }
.ls-host .qk-ask .q { font-size: clamp(25px, 3.2vw, 34px); max-width: 24em; }
.ls-body { display: grid; gap: 14px; align-content: start; } .ls-body p { margin: 0; font: 500 18px/1.6 var(--font); color: var(--ink); max-width: 31em; text-wrap: pretty; } .ls-body b { font-weight: 700; }
@media (min-width: 960px) { .ls-teach .ls-body { padding-top: 10px; } }
.ls-host .qk-note p { font-size: 16.5px; line-height: 1.55; color: var(--ink); } .ls-host .qk-hint { font-size: 16px; color: var(--ink-2); }
.ls-host .qk-end { display: none; }
.ls-host .qk-seg button { white-space: nowrap; padding-inline: 6px; }
.ls-host .qk-hint { text-align: left; font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 30em; }
/* the drawing stays in view under the top bar while the feedback is read */
@media (min-width: 960px) { .ls-host .qk > .qk-sheet { top: 76px; } }
/* a screen with no drawing beside it (an exam question, cards placed on the drawing itself) is one centred column */
@media (min-width: 960px) { .ls-host .qk:not(:has(> .qk-sheet)) { max-width: 720px; grid-template-columns: minmax(0, 1fr); } .ls-host .qk:not(:has(> .qk-sheet)) > * { grid-column: 1; } }
.ls-btn { appearance: none; border: 0; cursor: pointer; height: 48px; padding: 0 24px; border-radius: 14px; background: var(--ink); color: #fff; font: 700 15.5px/1 var(--font); transition: transform 300ms var(--spring), background 200ms; } .ls-btn:hover { background: #000; transform: translateY(-1px); } .ls-btn:active { transform: scale(.97); }
/* Labels in a figure are sized for the screen: about 13px on a phone, and no larger than body text on a laptop. */
.ls-host .qk-figure svg text.lb { font-size: 20px; } @media (min-width: 700px) { .ls-host .qk-figure svg text.lb { font-size: 17px; } }
.ls-end { max-width: 720px; margin: 0 auto; } .ls-end h2 { margin: 0 0 14px; font: 600 clamp(30px, 4vw, 44px)/1.05 var(--display); letter-spacing: -.035em; }
.ls-end p { margin: 0 0 16px; font: 500 18px/1.6 var(--font); max-width: 33em; } .ls-end ul { list-style: none; margin: 14px 0 30px; padding: 0; display: grid; gap: 8px; }
.ls-end li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 .5px rgba(40,32,24,.06), 0 1px 2px rgba(40,32,24,.06), 0 6px 14px -8px rgba(40,32,24,.14); font: 600 16.5px/1.45 var(--font); }
.ls-end li svg { width: 24px; height: 24px; }
@media (max-width: 640px) { .ls-top { height: 54px; grid-template-columns: auto 1fr; } .ls-top .r { display: none; } .ls-segs { width: auto; justify-self: stretch; } .ls-top b { max-width: 38vw; } .ls-body p { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .ls-host { animation: none; } .flow { display: none; } .ls-segs i::after { transition: none; } }

/* groups for sorting sit two to a row, so long names fit */
.ls-host .qk-pockets { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Inside another page the player is part of that page: no sticky bar, and room kept so the page does not jump between screens */
.ls.emb .ls-top { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 clamp(10px, 2vw, 22px); }
.ls.emb .ls-main { padding: clamp(14px, 3vh, 28px) clamp(16px, 3vw, 40px) clamp(28px, 5vh, 48px); } .ls.emb .ls-host { min-height: 600px; }
.ls.emb .qk > .qk-sheet { position: relative; top: auto; }
@media (max-width: 640px) { .ls.emb .ls-host { min-height: 480px; } }