@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Geist:wght@400;450;500;600;650;700&family=Geist+Mono:wght@400;500&display=swap");

/* BEGO Learning Lab — components and motion. Every value comes from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
:where(button, a, input, select, textarea, label):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.ll-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font: 700 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.ll-eyebrow::before { content: ""; width: 23px; height: 2px; background: var(--accent); }
.ll-muted { color: var(--ink-muted); }

/* ---------- Motion primitives ---------- */
@keyframes ll-enter { from { opacity: 0; transform: translateY(var(--ll-enter-distance, var(--move-enter))); } to { opacity: 1; transform: none; } }
@keyframes ll-exit { to { opacity: 0; transform: translateY(4px); } }
@keyframes ll-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ll-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ll-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes ll-confirm { from { box-shadow: 0 0 0 2px currentColor; } to { box-shadow: 0 0 0 10px transparent; } }
@keyframes ll-travel { from { left: 0; } to { left: 100%; } }
@keyframes ll-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes ll-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .ll-m-enter   { animation: ll-enter var(--dur-slow) var(--ease-out) both; }
  .ll-m-row     { animation: ll-enter var(--dur-medium) var(--ease-out) both; }
  .ll-m-grow    { animation: ll-grow-x var(--dur-reward) var(--ease-out) both; transform-origin: left; }
  .ll-m-pop     { animation: ll-pop var(--dur-medium) var(--ease-pop); }
  .ll-m-confirm { animation: ll-confirm var(--dur-slow) var(--ease-out); }
  .ll-stagger > * { animation-delay: calc(var(--i, 0) * 60ms); }
}

/* ---------- Button ---------- */
.ll-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 10px var(--space-4); border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 500 14px/1.2 var(--font-sans); cursor: pointer; text-decoration: none; }
.ll-btn:hover { background: var(--raised); }
.ll-btn:disabled { opacity: .5; cursor: default; }
.ll-btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
.ll-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ll-btn--primary:active:not(:disabled) { background: var(--accent-press); }
.ll-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.ll-btn--ghost:hover { color: var(--ink); }
.ll-btn--danger { color: var(--danger); }
.ll-btn--danger:hover { background: var(--danger-soft); }
.ll-btn--pill { border-radius: var(--radius-full); padding-inline: 22px; }
.ll-btn .ll-arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .ll-btn { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out); }
  .ll-btn:active:not(:disabled) { transform: translateY(var(--move-press)); }
  .ll-btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-accent); }
  .ll-btn--primary:active:not(:disabled) { transform: translateY(var(--move-press)); box-shadow: none; }
  .ll-btn .ll-arrow { transition: transform var(--dur-base) var(--ease-out); }
  .ll-btn:hover .ll-arrow { transform: translateX(var(--move-nudge)); }
}

/* ---------- Lesson nav ---------- */
.ll-nav { display: grid; gap: var(--space-1); max-width: 260px; }
.ll-nav-item { position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); font: 450 14px/1.35 var(--font-sans); text-align: left; cursor: pointer; }
.ll-nav-item:hover { background: var(--raised); color: var(--ink); }
.ll-nav-item[aria-current="page"] { background: var(--raised); color: var(--accent-ink); }
.ll-nav-item[aria-current="page"]::after { content: ""; position: absolute; right: 6px; width: 4px; height: 19px; border-radius: 4px; background: var(--accent); }
.ll-navnum { display: grid; place-items: center; width: 28px; min-width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
.ll-nav-item[aria-current="page"] .ll-navnum { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ll-nav-item.is-done .ll-navnum { border-color: var(--success); color: var(--success); background: var(--success-soft); }
@media (prefers-reduced-motion: no-preference) {
  .ll-nav-item { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
  .ll-nav-item[aria-current="page"]::after { animation: ll-grow-y var(--dur-base) var(--ease-out); }
  .ll-nav-item[aria-current="page"] .ll-navnum, .ll-nav-item.is-done .ll-navnum { animation: ll-pop var(--dur-medium) var(--ease-pop); }
}

/* ---------- Segmented control ---------- */
.ll-seg { position: relative; display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--control-border); border-radius: var(--radius-full); background: var(--bg); isolation: isolate; }
.ll-seg button { position: relative; z-index: 1; min-height: 38px; padding: 6px 14px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-muted); font: 500 13px/1 var(--font-sans); white-space: nowrap; cursor: pointer; }
.ll-seg button:hover { color: var(--ink); }
.ll-seg button[aria-pressed="true"] { color: var(--on-accent); font-weight: 700; }
.ll-seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--radius-full); background: var(--accent); }
.ll-seg:not(.has-thumb) button[aria-pressed="true"] { background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .ll-seg-thumb { transition: transform var(--dur-base) var(--ease-in-out), width var(--dur-base) var(--ease-in-out); }
  .ll-seg button { transition: color var(--dur-fast) var(--ease-out); }
}

/* ---------- Route card ---------- */
.ll-route { display: grid; gap: var(--space-2); width: 100%; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.ll-route strong { font: 650 19px/1.35 var(--font-sans); }
.ll-route span { color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.ll-route .ll-route-go { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); color: var(--accent-ink); font: 600 13px/1 var(--font-sans); }
.ll-route:hover { border-color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  .ll-route { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .ll-route:hover { transform: translateY(calc(var(--move-lift) * -1)); box-shadow: var(--shadow-soft); }
  .ll-route:active { transform: translateY(0); }
  .ll-route .ll-arrow { transition: transform var(--dur-base) var(--ease-out); }
  .ll-route:hover .ll-arrow { transform: translate(2px, -2px); }
}

/* ---------- Screen hotspot ---------- */
.ll-shot { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.ll-hotspot { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 2px solid var(--on-accent); border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font: 700 13px/1 var(--font-mono); box-shadow: var(--shadow-hotspot); transform: translate(-50%, -50%); cursor: pointer; }
.ll-hotspot::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.ll-hotspot:hover, .ll-hotspot[aria-pressed="true"] { background: var(--spotlight); box-shadow: 0 0 0 5px var(--accent-glow), 0 4px 12px rgba(0,0,0,.3); }
.ll-hotspot:focus-visible { outline: 3px solid var(--on-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .ll-hotspot { transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out); }
  .ll-hotspot:active { transform: translate(-50%, -50%) scale(.94); }
  .ll-hotspot.is-new::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: ll-pulse 1.2s var(--ease-out) 2; pointer-events: none; }
}

/* ---------- Feedback ---------- */
.ll-feedback { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 49px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--raised); color: var(--ink); font-size: 14px; line-height: 1.5; }
.ll-feedback-mark { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: var(--radius-full); font: 700 13px/1 var(--font-sans); }
.ll-feedback strong { font-weight: 650; }
.ll-feedback--success { background: var(--success-soft); }
.ll-feedback--success .ll-feedback-mark, .ll-feedback--success strong { color: var(--success); }
.ll-feedback--success .ll-feedback-mark { border: 1.5px solid var(--success); }
.ll-feedback--retry { background: var(--warning-soft); }
.ll-feedback--retry .ll-feedback-mark, .ll-feedback--retry strong { color: var(--warning); }
.ll-feedback--retry .ll-feedback-mark { border: 1.5px solid var(--warning); }
.ll-feedback--danger { background: var(--danger-soft); }
.ll-feedback--danger .ll-feedback-mark, .ll-feedback--danger strong { color: var(--danger); }
.ll-feedback--danger .ll-feedback-mark { border: 1.5px solid var(--danger); }
.ll-feedback.is-flash { color: inherit; }
.ll-feedback--success.is-flash { --flash: var(--success); }
@media (prefers-reduced-motion: no-preference) {
  .ll-feedback.is-flash { animation: ll-enter var(--dur-base) var(--ease-out); }
  .ll-feedback.is-flash .ll-feedback-mark { animation: ll-pop var(--dur-medium) var(--ease-pop); }
}

/* ---------- Toast ---------- */
.ll-toast { display: inline-flex; align-items: center; gap: var(--space-2); max-width: calc(100% - 32px); padding: var(--space-3) 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--raised); color: var(--ink); box-shadow: var(--shadow-float); font-size: 14px; }
.ll-toast .ll-check { color: var(--success); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .ll-toast { --ll-enter-distance: 6px; animation: ll-enter var(--dur-base) var(--ease-out); }
  .ll-toast.is-leaving { animation: ll-exit var(--dur-fast) var(--ease-exit) forwards; }
}

/* ---------- Checklist ---------- */
.ll-checklist { display: grid; gap: var(--space-3); }
.ll-check-row { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; }
.ll-check-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ll-box { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border: 1.5px solid var(--control-border); border-radius: 6px; background: var(--bg); }
.ll-box svg { width: 14px; height: 14px; fill: none; stroke: var(--on-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.ll-check-row:has(input:checked) { border-color: var(--success); background: var(--success-soft); }
.ll-check-row:has(input:checked) .ll-box { background: var(--success); border-color: var(--success); }
.ll-check-row:has(input:checked) .ll-box svg { stroke-dashoffset: 0; }
.ll-check-row:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .ll-check-row { transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
  .ll-box { transition: background-color var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out); }
  .ll-check-row:has(input:checked) .ll-box svg { animation: ll-draw var(--dur-medium) var(--ease-out); }
}

/* ---------- Progress ---------- */
.ll-progress { display: grid; gap: var(--space-2); }
.ll-progress-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ll-progress-track { height: 4px; border-radius: var(--radius-full); background: var(--line); overflow: hidden; }
.ll-progress-fill { height: 100%; width: var(--value, 0%); border-radius: var(--radius-full); background: var(--accent); }
.ll-progress.is-complete .ll-progress-fill { background: var(--success); }
@media (prefers-reduced-motion: no-preference) {
  .ll-progress-fill { transition: width var(--dur-medium) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
}

/* ---------- Reward badge ---------- */
.ll-count { display: grid; place-items: center; flex-shrink: 0; width: 53px; height: 53px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--accent-ink); font: 500 28px/1 var(--font-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ll-count.is-ready { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ll-medal { display: grid; place-items: center; flex-shrink: 0; width: 55px; height: 55px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font: 700 26px/1 var(--font-sans); }
@media (prefers-reduced-motion: no-preference) {
  .ll-count { transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
  .ll-count.is-bump, .ll-count.is-ready, .ll-medal { animation: ll-pop var(--dur-medium) var(--ease-pop); }
}

/* ---------- Automation wire (event travel) ---------- */
.ll-wire { position: relative; height: 2px; background: var(--line); }
.ll-wire-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.ll-wire.is-connected .ll-wire-fill { transform: scaleX(1); }
.ll-wire-dot { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: var(--radius-full); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ll-wire.is-connected .ll-wire-fill { animation: ll-grow-x var(--dur-slow) var(--ease-out); }
  .ll-wire.is-sending .ll-wire-dot { opacity: 1; animation: ll-travel var(--dur-slow) var(--ease-linear) both; }
}

/* =====================================================================
   v3 — Hive signature and high-energy microinteractions
   ===================================================================== */

/* ---------- Hive (cubes) ---------- */
.ll-hive { display: block; overflow: visible; }
.ll-cube polygon { stroke: var(--hive-edge); stroke-width: .8; stroke-linejoin: round; }
.ll-cube .f-top { fill: var(--hive-top); }
.ll-cube .f-left { fill: var(--hive-left); }
.ll-cube .f-right { fill: var(--hive-right); }
.ll-cube { transform-box: fill-box; transform-origin: center; }
.ll-cube[data-lit="1"] .f-top { fill: color-mix(in srgb, var(--accent) 22%, var(--hive-top)); }
.ll-cube[data-lit="1"] .f-left { fill: color-mix(in srgb, var(--hive-lit-left) 14%, var(--hive-left)); }
.ll-cube[data-lit="2"] .f-top { fill: color-mix(in srgb, var(--accent) 58%, var(--hive-top)); }
.ll-cube[data-lit="2"] .f-left { fill: color-mix(in srgb, var(--hive-lit-left) 45%, var(--hive-left)); }
.ll-cube[data-lit="2"] .f-right { fill: color-mix(in srgb, var(--hive-lit-right) 40%, var(--hive-right)); }
.ll-cube.is-on .f-top, .ll-cube.is-wave .f-top, .ll-cube[data-lit="3"] .f-top { fill: var(--accent); }
.ll-cube.is-on .f-left, .ll-cube.is-wave .f-left, .ll-cube[data-lit="3"] .f-left { fill: var(--hive-lit-left); }
.ll-cube.is-on .f-right, .ll-cube.is-wave .f-right, .ll-cube[data-lit="3"] .f-right { fill: var(--hive-lit-right); }
.ll-cube.is-on polygon, .ll-cube.is-wave polygon, .ll-cube[data-lit="3"] polygon { stroke: var(--hive-lit-right); }
.ll-cube[data-lit="3"] .f-top { fill: var(--accent-electric); }
.ll-cube.is-current .f-top { fill: color-mix(in srgb, var(--accent) 30%, var(--hive-top)); }
.ll-cube.is-glint .f-top { fill: color-mix(in srgb, var(--accent) 32%, var(--hive-top)); }
.ll-cube.is-glint .f-left { fill: color-mix(in srgb, var(--hive-lit-left) 22%, var(--hive-left)); }
.ll-cube[data-lit="1"] .f-right { fill: color-mix(in srgb, var(--hive-lit-right) 18%, var(--hive-right)); }
.ll-cube.is-current polygon { stroke: var(--accent); stroke-width: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .ll-cube polygon { transition: fill var(--dur-base) var(--ease-out), stroke var(--dur-base) var(--ease-out); }
  .ll-cube.is-current .f-top { animation: ll-breathe 1.8s var(--ease-in-out) infinite alternate; }
  .ll-hive.is-intro .ll-cube { animation: ll-cube-in var(--dur-slow) var(--ease-expo) both; animation-delay: var(--d, 0ms); }
}
@keyframes ll-cube-pop { 0% { transform: translateY(0) scale(.7); } 60% { transform: translateY(-8px) scale(1.12); } 100% { transform: translateY(calc(var(--cube-rise) * -1)) scale(1); } }
@keyframes ll-cube-in { from { opacity: 0; transform: translateY(14px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes ll-breathe { from { fill: color-mix(in srgb, var(--accent) 18%, var(--hive-top)); } to { fill: color-mix(in srgb, var(--accent) 55%, var(--hive-top)); } }

/* ---------- Primary button sheen + magnetic ---------- */
.ll-btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.ll-btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, var(--sheen) 50%, transparent 70%); transform: translateX(-130%); pointer-events: none; }
.ll-btn-label { display: inline-flex; align-items: center; gap: var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
  .ll-btn--primary:hover::after { transform: translateX(130%); transition: transform 750ms var(--ease-expo); }
  .ll-magnetic, .ll-magnetic:hover:not(:disabled) { transform: translate(var(--tx, 0px), var(--ty, 0px)); transition: transform var(--dur-slow) var(--ease-pop), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
  .ll-magnetic:hover { transition: transform 90ms linear, background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
  .ll-magnetic .ll-btn-label { transform: translate(calc(var(--tx, 0px) * .5), calc(var(--ty, 0px) * .5)); transition: transform var(--dur-slow) var(--ease-pop); }
  .ll-magnetic:active:not(:disabled) { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(.97); }
}

/* ---------- Spotlight card (light + edge glow + tilt) ---------- */
.ll-spot { position: relative; isolation: isolate; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -40%), var(--accent-soft), transparent 65%), var(--surface); }
.ll-spot::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: radial-gradient(200px circle at var(--mx, 50%) var(--my, -40%), var(--accent), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; pointer-events: none; }
.ll-spot:hover::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ll-spot::before { transition: opacity var(--dur-base) var(--ease-out); }
  .ll-spot:hover { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(var(--move-lift) * -1)); }
  .ll-spot { transition: transform var(--dur-slow) var(--ease-expo), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast); }
}

/* ---------- Headline reveal + highlighter ---------- */
.ll-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.ll-w > span { display: inline-block; }
.ll-mark { color: inherit; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 100% 100%; color: var(--on-accent); padding: 0 .12em; margin: 0 -.06em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: no-preference) {
  .ll-reveal-ready .ll-w > span { transform: translateY(108%) rotate(4deg); transform-origin: left bottom; transition: transform var(--dur-cinematic) var(--ease-expo); transition-delay: calc(var(--i, 0) * 55ms); }
  .ll-reveal-ready.is-in .ll-w > span { transform: none; }
  .ll-reveal-ready .ll-mark { background-size: 0% 100%; color: inherit; transition: background-size 700ms var(--ease-expo), color 200ms var(--ease-out); transition-delay: calc(var(--words, 6) * 55ms + 250ms); }
  .ll-reveal-ready.is-in .ll-mark { background-size: 100% 100%; color: var(--on-accent); }
}

/* ---------- Odometer ---------- */
.ll-odo { display: inline-flex; font-variant-numeric: tabular-nums; line-height: 1; height: 1em; overflow: hidden; }
.ll-odo-col { display: inline-block; height: 1em; overflow: hidden; }
.ll-odo-stack { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1em)); }
.ll-odo-stack > span { height: 1em; line-height: 1; text-align: center; }
.ll-odo-col.is-char .ll-odo-stack { transform: translateY(-10em); }
@media (prefers-reduced-motion: no-preference) {
  .ll-odo-stack { transition: transform var(--dur-slow) var(--ease-expo); transition-delay: calc(var(--i, 0) * 45ms); }
}

/* ---------- Burst ---------- */
.ll-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.ll-burst svg { position: absolute; left: 0; top: 0; overflow: visible; }
.ll-burst-host { position: relative; }

/* ---------- Hex wipe ---------- */
.ll-wipe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }

/* ---------- Hex cursor ---------- */
.ll-cursor-area { position: relative; }
.ll-cursor { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; pointer-events: none; z-index: 40; opacity: 0; }
.ll-cursor svg { width: 100%; height: 100%; overflow: visible; transition: transform var(--dur-base) var(--ease-pop); }
.ll-cursor polygon { fill: transparent; stroke: var(--accent-ink); stroke-width: .08; transition: fill var(--dur-fast); }
.ll-cursor.is-on { opacity: 1; transition: opacity var(--dur-fast); }
.ll-cursor.is-hover svg { transform: scale(1.7) rotate(30deg); }
.ll-cursor.is-hover polygon { fill: var(--accent-soft); }
.ll-cursor.is-down svg { transform: scale(.75) rotate(30deg); }

/* ---------- Scroll reveal + reading progress ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ll-revealable { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-cinematic) var(--ease-expo); transition-delay: calc(var(--i, 0) * 70ms); }
  .ll-pending { opacity: 0; transform: translateY(24px); }
}
.ll-readbar { position: sticky; top: env(safe-area-inset-top, 0px); height: 3px; background: transparent; z-index: var(--z-header); }
.ll-readbar::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 12px var(--accent-glow); }

/* ---------- Nav number flip on hover (v3) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ll-nav-item:hover .ll-navnum { transform: rotateY(180deg) rotateY(180deg); }
  .ll-nav-item .ll-navnum { transition: transform var(--dur-slow) var(--ease-expo), background-color var(--dur-fast); }
  .ll-nav-item:hover:not([aria-current]) .ll-navnum { transform: translateY(-2px); border-color: var(--accent-ink); color: var(--accent-ink); }
}

/* ---------- Hive on saffron: the brand application (logo cubes on #FCBD16) ---------- */
.ll-hive-field--yellow { background: var(--accent); }
.ll-hive-field--yellow .ll-cube polygon { fill: transparent; stroke: var(--on-accent); stroke-opacity: .28; stroke-width: 1; }
.ll-hive-field--yellow .ll-cube[data-lit="1"] polygon { stroke-opacity: .6; }
.ll-hive-field--yellow .ll-cube[data-lit="2"] .f-top { fill: var(--cube-top); }
.ll-hive-field--yellow .ll-cube[data-lit="2"] polygon { stroke-opacity: .9; }
.ll-hive-field--yellow .ll-cube.is-on .f-top, .ll-hive-field--yellow .ll-cube.is-wave .f-top, .ll-hive-field--yellow .ll-cube[data-lit="3"] .f-top { fill: var(--cube-top); }
.ll-hive-field--yellow .ll-cube.is-on .f-left, .ll-hive-field--yellow .ll-cube.is-wave .f-left, .ll-hive-field--yellow .ll-cube[data-lit="3"] .f-left { fill: var(--hive-lit-left); }
.ll-hive-field--yellow .ll-cube.is-on .f-right, .ll-hive-field--yellow .ll-cube.is-wave .f-right, .ll-hive-field--yellow .ll-cube[data-lit="3"] .f-right { fill: var(--hive-lit-right); }
.ll-hive-field--yellow .ll-cube.is-on polygon, .ll-hive-field--yellow .ll-cube.is-wave polygon, .ll-hive-field--yellow .ll-cube[data-lit="3"] polygon { stroke: var(--on-accent); stroke-opacity: 1; stroke-width: 1.4; }
.ll-hive-field { position: relative; overflow: hidden; border-radius: var(--radius-xl); }
.ll-hive-field > .ll-hive { position: absolute; inset: 0; width: 100%; height: 100%; }
.ll-count, .ll-medal { position: relative; }
.ll-hive-field--yellow .ll-cube[data-lit="2"] .f-left { fill: color-mix(in srgb, var(--hive-lit-left) 70%, transparent); }
.ll-hive-field--yellow .ll-cube[data-lit="2"] .f-right { fill: color-mix(in srgb, var(--hive-lit-right) 70%, transparent); }

/* =====================================================================
   v4 — more microinteractions
   ===================================================================== */

/* ---------- Hex press ripple (all .ll-btn) ---------- */
.ll-btn { position: relative; overflow: hidden; isolation: isolate; }
.ll-press { position: absolute; z-index: -1; pointer-events: none; fill: currentColor; }

/* ---------- Theme toggle ---------- */
.ll-theme { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); cursor: pointer; }
.ll-theme:hover { background: var(--raised); }
.ll-theme svg { width: 24px; height: 24px; overflow: visible; }
.ll-theme .t-hex { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transform: rotate(var(--spin, 0deg)); }
.ll-theme .t-core { fill: var(--accent-ink); }
.ll-theme .t-bite { fill: var(--surface); transform-box: fill-box; transform-origin: center; }
.ll-theme:hover .t-bite { fill: var(--raised); }
.ll-theme .t-rays { stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.ll-theme[data-mode="dark"] .t-rays { transform: scale(.3) rotate(-45deg); opacity: 0; }
.ll-theme[data-mode="light"] .t-bite { transform: translate(7px, -7px) scale(.2); }
@media (prefers-reduced-motion: no-preference) {
  .ll-theme .t-hex { transition: transform var(--dur-slow) var(--ease-pop); }
  .ll-theme .t-rays, .ll-theme .t-bite { transition: transform var(--dur-slow) var(--ease-expo), opacity var(--dur-base); }
  .ll-theme { transition: background-color var(--dur-fast); }
}
.ll-theme-fade, .ll-theme-fade * { transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out), border-color 400ms var(--ease-out) !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- Rolling text ---------- */
.ll-roll { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; line-height: 1.2; }
.ll-roll > span { display: flex; flex-direction: column; }
.ll-roll > span > span { height: 1.2em; }
.is-rolling .ll-roll > span { transform: translateY(-50%); transition: transform 380ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 28ms); }

/* ---------- Glossary term ---------- */
.ll-term { position: relative; display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: help; text-decoration: underline dotted var(--accent-ink); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ll-term:hover, .ll-term:focus-visible, .ll-term.is-open { text-decoration-style: solid; text-decoration-thickness: 2px; color: var(--accent-ink); }
.ll-term-pop { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: var(--z-toast); width: max-content; max-width: 260px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--raised); color: var(--ink); box-shadow: var(--shadow-float); font: 400 13px/1.45 var(--font-sans); text-align: left; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(6px) scale(.94); transform-origin: 16px 100%; pointer-events: none; }
.ll-term-pop b { display: block; margin-bottom: 2px; font: 600 12px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--accent-ink); }
.ll-term-pop::after { content: ""; position: absolute; left: 14px; top: 100%; border: 6px solid transparent; border-top-color: var(--raised); }
.ll-term:hover .ll-term-pop, .ll-term:focus-visible .ll-term-pop, .ll-term.is-open .ll-term-pop { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .ll-term { transition: color var(--dur-fast), text-decoration-color var(--dur-fast); }
  .ll-term-pop { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-expo), visibility 0s linear var(--dur-base); }
  .ll-term:hover .ll-term-pop, .ll-term:focus-visible .ll-term-pop, .ll-term.is-open .ll-term-pop { transition-delay: 0s; }
}

/* ---------- Drag board (kanban practice) ---------- */
.ll-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ll-lane { display: grid; align-content: start; gap: var(--space-2); min-height: 150px; padding: var(--space-3); border: 1px dashed transparent; border-radius: var(--radius-lg); background: var(--raised); }
.ll-lane h4 { margin: 0 0 4px; font: 700 12px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.ll-lane-list { display: grid; gap: var(--space-2); }
.ll-lane.is-target { border-color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 10%, var(--raised)); }
.ll-card { position: relative; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; cursor: grab; touch-action: none; user-select: none; }
.ll-card small { display: block; color: var(--ink-muted); font-size: 12px; }
.ll-card:hover { border-color: var(--control-border); }
.ll-card.is-dragging { z-index: 10; cursor: grabbing; box-shadow: var(--shadow-float); border-color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  .ll-card { transition: border-color var(--dur-fast), box-shadow var(--dur-base); }
  .ll-card:hover:not(.is-dragging) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
  .ll-lane { transition: background-color var(--dur-fast), border-color var(--dur-fast); }
  .ll-lane.is-landed { animation: ll-lane-flash 600ms var(--ease-out); }
}
@keyframes ll-lane-flash { 0% { box-shadow: inset 0 0 0 2px var(--accent); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
@media (max-width: 560px) { .ll-board { grid-template-columns: 1fr; } }

/* =====================================================================
   Charts — BegoLab.charts
   ===================================================================== */
.ll-chart { position: relative; display: grid; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); min-width: 0; }
.ll-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.ll-chart-title { margin: 0; font: 650 16px/1.3 var(--font-sans); text-wrap: balance; }
.ll-chart-sub { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.ll-chart-toggle { flex-shrink: 0; min-height: 32px; padding: 4px 12px; border: 1px solid var(--control-border); border-radius: var(--radius-full); background: transparent; color: var(--ink-muted); font: 500 12px/1 var(--font-sans); cursor: pointer; }
.ll-chart-toggle:hover, .ll-chart-toggle[aria-pressed="true"] { color: var(--ink); background: var(--raised); }
.ll-chart-plot { min-width: 0; }
.ll-chart-plot svg { display: block; overflow: visible; }
.ll-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 13px; color: var(--ink-muted); }
.ll-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ll-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ll-key--line { width: 14px; height: 2px; border-radius: 2px; }
.ll-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.ll-axis { stroke: var(--viz-axis); stroke-width: 1; shape-rendering: crispEdges; }
.ll-tick { fill: var(--ink-muted); font: 400 11px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.ll-tick--cat { fill: var(--ink); font-size: 12px; }
.ll-value { fill: var(--ink-muted); font: 500 12px/1 var(--font-sans); }
.ll-value.is-strong { fill: var(--ink); font-weight: 650; }
.ll-mark { cursor: pointer; outline: none; }
.ll-mark:hover, .ll-mark:focus-visible { filter: brightness(1.15); }
.ll-mark:focus-visible { stroke: var(--focus); stroke-width: 2; }
.ll-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ll-area { opacity: .1; }
.ll-dot { stroke: var(--surface); stroke-width: 2; }
.ll-dot--hover, .ll-cross { opacity: 0; pointer-events: none; }
.is-hover .ll-dot--hover, .is-hover .ll-cross { opacity: 1; }
.ll-cross { stroke: var(--ink-muted); stroke-width: 1; }
.ll-chart-table { overflow-x: auto; }
.ll-chart-table table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ll-chart-table th, .ll-chart-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ll-chart-table th:first-child, .ll-chart-table tbody th { text-align: left; font-weight: 500; }
.ll-chart-table thead th { color: var(--ink-muted); font-weight: 600; font-size: 12px; }

/* tooltip: value leads, label follows, line keys */
.ll-tip { position: absolute; z-index: 5; min-width: 120px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); box-shadow: var(--shadow-float); font-size: 12px; pointer-events: none; opacity: 0; transform: translateY(4px); }
.ll-tip.is-on { opacity: 1; transform: none; }
.ll-tip-head { margin-bottom: 4px; color: var(--ink-muted); font-weight: 500; }
.ll-tip-row { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 6px; }
.ll-tip-key { width: 12px; height: 2px; border-radius: 2px; }
.ll-tip-row b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.ll-tip-row span { color: var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
  .ll-tip { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-expo); }
  .ll-mark { transition: filter var(--dur-fast); }
}

/* donut */
.ll-donut { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.ll-donut svg { flex-shrink: 0; }
.ll-donut-track { fill: none; stroke: var(--viz-grid); }
.ll-donut-seg { fill: none; cursor: pointer; outline: none; transition: stroke-width var(--dur-base) var(--ease-pop), opacity var(--dur-fast); }
.ll-donut svg.is-hover .ll-donut-seg:not(.is-on) { opacity: .35; }
.ll-donut-seg.is-on { stroke-width: 30; }
.ll-donut-center { position: absolute; left: 0; top: 0; width: 200px; height: 200px; display: grid; place-content: center; text-align: center; pointer-events: none; }
.ll-donut-center strong { font: 600 24px/1 var(--font-display); letter-spacing: -.02em; justify-content: center; }
.ll-donut-center > span { margin-top: 6px; font-size: 12px; color: var(--ink-muted); max-width: 110px; }
.ll-donut-legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; min-width: 180px; flex: 1; }
.ll-donut-legend li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; outline: none; }
.ll-donut-legend li b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ll-donut-legend li.is-on, .ll-donut-legend li:focus-visible { background: var(--raised); }

/* sankey */
.ll-flow { fill: var(--viz-context); opacity: .45; cursor: pointer; outline: none; }
.ll-flow.is-on { fill: var(--viz-focus); opacity: .75; }
.ll-flow:hover, .ll-flow:focus-visible { opacity: .9; }
.ll-node { fill: var(--ink); cursor: pointer; outline: none; }
.ll-node:focus-visible { stroke: var(--focus); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) { .ll-flow { transition: fill var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } }

/* battery */
.ll-battery { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; --bat-fill: var(--viz-focus); }
.ll-battery.is-low { --bat-fill: var(--warning); }
.ll-battery.is-critical { --bat-fill: var(--danger); }
.ll-bat-body { display: flex; gap: 2px; padding: 4px; width: 200px; height: 52px; border: 2px solid var(--control-border); border-radius: var(--radius-sm); }
.ll-bat-nub { width: 5px; height: 18px; margin-left: calc(var(--space-4) * -1 + 1px); border-radius: 0 3px 3px 0; background: var(--control-border); }
.ll-bat-cell { flex: 1; border-radius: 3px; background: var(--viz-track); }
.ll-bat-cell.is-full { background: var(--bat-fill); }
.ll-bat-cell.is-hex { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border-radius: 0; }
.ll-bat-meta { display: grid; gap: 2px; }
.ll-bat-value { font: 600 34px/1 var(--font-display); letter-spacing: -.03em; }
.ll-bat-label { font-size: 13px; color: var(--ink-muted); }
.ll-bat-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.ll-bat-state b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; background: var(--bat-fill); color: var(--on-accent); }
.ll-battery.is-critical .ll-bat-state b, .ll-battery.is-low .ll-bat-state b { color: var(--bg); }
.ll-battery--v { flex-direction: column; align-items: flex-start; }
.ll-battery--v .ll-bat-body { flex-direction: column-reverse; width: 56px; height: 150px; }
.ll-battery--v .ll-bat-nub { order: -1; width: 20px; height: 5px; margin: 0 0 -14px 18px; border-radius: 3px 3px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .ll-bat-cell.is-full { animation: ll-cell-fill var(--dur-medium) var(--ease-pop) both; animation-delay: calc(var(--i) * 55ms); }
  .ll-bat-cell.is-charging { animation: ll-charge 1.4s var(--ease-in-out) infinite alternate; }
}
@keyframes ll-cell-fill { from { background: var(--viz-track); transform: scaleY(.6); } to { background: var(--bat-fill); transform: none; } }
@keyframes ll-charge { from { background: var(--viz-track); } to { background: color-mix(in srgb, var(--bat-fill) 55%, var(--viz-track)); } }

/* funnel */
.ll-funnel { display: grid; gap: 4px; }
.ll-funnel-row { display: grid; gap: 6px; }
.ll-funnel-label { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ll-funnel-label b { font-variant-numeric: tabular-nums; font-weight: 650; }
.ll-funnel-track { height: 22px; }
.ll-funnel-bar { height: 100%; border-radius: 0 4px 4px 0; cursor: pointer; transform-origin: left center; outline: none; }
.ll-funnel-bar:hover, .ll-funnel-bar:focus-visible { filter: brightness(1.12); }
.ll-funnel-conv { padding: 2px 0 6px 2px; font-size: 12px; color: var(--ink-muted); }

/* stat tile */
.ll-stat { display: grid; gap: 6px; align-content: start; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.ll-stat-label { font-size: 13px; color: var(--ink-muted); }
.ll-stat-value { font: 600 36px/1 var(--font-display); letter-spacing: -.03em; }
.ll-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; }
.ll-delta b { font-size: 10px; }
.ll-delta.is-good { color: var(--success); }
.ll-delta.is-bad { color: var(--danger); }
.ll-spark { margin-top: 6px; overflow: visible; }
.ll-spark-line { fill: none; stroke: var(--viz-context); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* hive heat */
.ll-hexcell { stroke: var(--surface); stroke-width: 1.5; cursor: pointer; outline: none; }
.ll-hexcell.is-zero { fill: var(--viz-grid); }
.ll-hexcell:hover, .ll-hexcell:focus-visible { stroke: var(--ink); stroke-width: 1.5; }
.ll-ramp { display: flex; align-items: center; gap: 3px; margin-top: var(--space-3); font-size: 12px; color: var(--ink-muted); }
.ll-ramp i { width: 14px; height: 10px; border-radius: 2px; }
.ll-ramp span:first-child { margin-right: 6px; } .ll-ramp span:last-child { margin-left: 6px; }

/* chart entry motion */
@media (prefers-reduced-motion: no-preference) {
  .ll-anim-col { animation: ll-grow-y var(--dur-reward) var(--ease-expo) both; transform-box: view-box; }
  .ll-anim-row { animation: ll-grow-x var(--dur-reward) var(--ease-expo) both; transform-box: view-box; }
  .ll-anim-fade { animation: ll-enter var(--dur-base) var(--ease-out) both; --ll-enter-distance: 4px; }
  .ll-anim-draw { animation: ll-draw-line var(--dur-cinematic) var(--ease-expo) forwards; }
  .ll-anim-area { animation: ll-area-in var(--dur-cinematic) var(--ease-out) both; animation-delay: 300ms; }
  .ll-anim-pop { animation: ll-pop var(--dur-medium) var(--ease-pop) both; transform-box: fill-box; transform-origin: center; }
  .ll-anim-sweep { animation: ll-sweep var(--dur-slow) var(--ease-expo) both; }
  .ll-anim-funnel { animation: ll-grow-x var(--dur-reward) var(--ease-expo) both; }
  .ll-anim-hex { animation: ll-hex-in var(--dur-slow) var(--ease-pop) both; transform-box: fill-box; transform-origin: center; }
}
@keyframes ll-draw-line { to { stroke-dashoffset: 0; } }
@keyframes ll-area-in { from { opacity: 0; } to { opacity: .1; } }
@keyframes ll-sweep { from { stroke-dasharray: 0 var(--C); } to { stroke-dasharray: var(--seg) var(--C); } }
@keyframes ll-hex-in { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }

.ll-node-label { fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }