Neobrutalism Media & Widgets in CSS, Bootstrap & Tailwind

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="nb-i-music" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5.5l11-2V16"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="17.5" cy="16" r="2.5"/></symbol>
  <symbol id="nb-i-shuffle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 7h3.5c5 0 5 10 10 10h3.5M3.5 17H7c1.6 0 2.7-1 3.5-2.4M13.5 9.4C14.3 8 15.4 7 17 7h3.5M18 4l2.5 3-2.5 3M18 14l2.5 3-2.5 3"/></symbol>
  <symbol id="nb-i-prev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M18.5 5v14l-10-7z"/><path d="M5.5 5v14"/></symbol>
  <symbol id="nb-i-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M7.5 4.5v15l12-7.5z"/></symbol>
  <symbol id="nb-i-pause" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M6.5 4.5h4v15h-4zM13.5 4.5h4v15h-4z"/></symbol>
  <symbol id="nb-i-next" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M5.5 5v14l10-7z"/><path d="M18.5 5v14"/></symbol>
  <symbol id="nb-i-repeat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11V9a2.5 2.5 0 0 1 2.5-2.5h13M16.5 3.5l3 3-3 3M20 13v2a2.5 2.5 0 0 1-2.5 2.5h-13M7.5 20.5l-3-3 3-3"/></symbol>
  <symbol id="nb-i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></symbol>
  <symbol id="nb-i-wind" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9h11a3 3 0 1 0-3-3M3 15h15a3 3 0 1 1-3 3M3 12h8"/></symbol>
  <symbol id="nb-i-drop" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5s6.5 7 6.5 11a6.5 6.5 0 0 1-13 0c0-4 6.5-11 6.5-11z"/></symbol>
  <symbol id="nb-i-cloud" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18.5h10a4 4 0 0 0 .6-7.95A5.5 5.5 0 0 0 7 10a4.25 4.25 0 0 0 0 8.5z"/></symbol>
  <symbol id="nb-i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></symbol>
</svg>
<div class="cols">
<section><span class="lbl">Music player · play, shuffle and repeat are pressed in when on</span>
<article class="nb-card nb-player" aria-label="Music player">
<div class="nb-player__art"><svg viewBox="0 0 340 190" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false"><rect width="340" height="190" style="fill:var(--nb-violet)"/><path d="M0 150l28-22 28 22 28-22 28 22 28-22 28 22 28-22 28 22 28-22 28 22 28-22 28 22v40H0z" stroke-width="3" style="fill:var(--nb-pink);stroke:var(--nb-line)"/><circle cx="170" cy="86" r="66" stroke-width="3" style="fill:#111;stroke:var(--nb-line)"/><circle cx="170" cy="86" r="50" fill="none" stroke="#3a3a3a" stroke-width="2"/><circle cx="170" cy="86" r="36" fill="none" stroke="#3a3a3a" stroke-width="2"/><circle cx="170" cy="86" r="22" stroke-width="3" style="fill:var(--nb-lemon);stroke:#111"/><circle cx="170" cy="86" r="4" fill="#111"/><path d="M262 34l8 16 18 2-13 12 4 18-17-9-16 9 3-18-13-12 18-2z" stroke-width="3" style="fill:var(--nb-lime);stroke:var(--nb-line)"/></svg><span class="nb-sticker nb-sticker--lime"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-music"/></svg>Now playing</span></div>
<h3 class="nb-player__title nb-display">Neon Laundromat</h3><p class="nb-player__artist">The Paper Cuts · Side B</p>
<div class="nb-seek"><label class="nb-sr" for="seek">Seek</label><input class="nb-range" id="seek" type="range" min="0" max="238" value="102" data-nb-seek>
<div class="nb-times" aria-hidden="true"><span data-nb-elapsed="seek">1:42</span><span>3:58</span></div></div>
<div class="nb-controls">
<label class="nb-mini"><input class="nb-sr" type="checkbox" aria-label="Shuffle" checked><span class="nb-mini__face"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-shuffle"/></svg></span></label>
<button class="nb-btn nb-btn--icon nb-btn--round" type="button" aria-label="Previous track"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-prev"/></svg></button>
<label class="nb-itoggle nb-play"><input class="nb-sr" type="checkbox" aria-label="Play" checked><span class="nb-itoggle__face"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-play"/></svg><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-pause"/></svg></span></label>
<button class="nb-btn nb-btn--icon nb-btn--round" type="button" aria-label="Next track"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-next"/></svg></button>
<label class="nb-mini"><input class="nb-sr" type="checkbox" aria-label="Repeat"><span class="nb-mini__face"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-repeat"/></svg></span></label>
</div></article></section>
<section><span class="lbl">Weather</span>
<article class="nb-card nb-card--cyan" aria-label="Weather in Lisbon">
<div class="nb-weather__top"><div><p class="nb-weather__place">Lisbon, Portugal</p><p class="nb-weather__temp nb-display">24°C</p><p class="nb-weather__desc">Sunny, light breeze</p></div><span class="nb-weather__sun"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg></span></div>
<p class="nb-weather__facts"><span><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-wind"/></svg>Wind 12 km/h</span><span><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-drop"/></svg>Humidity 48%</span><span><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg>UV 6</span></p>
<ul class="nb-hours" aria-label="Next hours">
<li aria-current="time">Now<svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg><span class="nb-sr">Sunny,</span><b>24°</b></li>
<li>15:00<svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg><span class="nb-sr">Sunny,</span><b>25°</b></li>
<li>18:00<svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-cloud"/></svg><span class="nb-sr">Cloudy,</span><b>22°</b></li>
<li>21:00<svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-moon"/></svg><span class="nb-sr">Clear,</span><b>19°</b></li>
</ul></article></section>
</div>
<div class="cols">
<section><span class="lbl">Mini calendar · today and release days are marked in text too</span>
<article class="nb-card nb-cal" aria-labelledby="cal-title">
<div class="nb-cal__head"><h3 class="nb-cal__title nb-display" id="cal-title">October 2026</h3><span class="nb-sticker nb-sticker--pink nb-sticker--right">3 releases</span></div>
<table><caption>October 2026, Monday first</caption>
<thead><tr><th scope="col"><abbr title="Monday">Mo</abbr></th><th scope="col"><abbr title="Tuesday">Tu</abbr></th><th scope="col"><abbr title="Wednesday">We</abbr></th><th scope="col"><abbr title="Thursday">Th</abbr></th><th scope="col"><abbr title="Friday">Fr</abbr></th><th scope="col"><abbr title="Saturday">Sa</abbr></th><th scope="col"><abbr title="Sunday">Su</abbr></th></tr></thead>
<tbody>
<tr><td></td><td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td><td class="is-event">9<span class="nb-sr">, print drop</span></td><td>10</td><td>11</td></tr>
<tr><td>12</td><td>13</td><td>14</td><td>15</td><td aria-current="date">16<span class="nb-sr">, today</span></td><td>17</td><td>18</td></tr>
<tr><td>19</td><td>20</td><td>21</td><td>22</td><td class="is-event">23<span class="nb-sr">, episode 43</span></td><td>24</td><td>25</td></tr>
<tr><td>26</td><td>27</td><td>28</td><td>29</td><td class="is-event">30<span class="nb-sr">, print drop</span></td><td>31</td><td></td></tr>
</tbody></table>
<p class="nb-cal__legend" aria-hidden="true"><span><i style="background:var(--nb-ink)"></i>Today</span><span><i style="background:var(--nb-pink)"></i>Release day</span></p>
</article></section>
<section><span class="lbl">Progress · labelled bars with the value written out</span>
<article class="nb-card nb-stack" aria-label="Progress">
<div class="nb-progress"><div class="nb-progress__top"><span id="pr-upload">Uploading episode 43</span><span>72%</span></div><div class="nb-bar" role="progressbar" aria-labelledby="pr-upload" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><span class="nb-bar__fill" style="--p:72%"></span></div></div>
<div class="nb-progress"><div class="nb-progress__top"><span id="pr-goal">Members goal</span><span>340 of 500</span></div><div class="nb-bar nb-bar--pink" role="progressbar" aria-labelledby="pr-goal" aria-valuenow="340" aria-valuemin="0" aria-valuemax="500" aria-valuetext="340 of 500 members"><span class="nb-bar__fill" style="--p:68%"></span></div></div>
<div class="nb-progress"><div class="nb-progress__top"><span id="pr-zines">Zines folded</span><span>412 of 500</span></div><div class="nb-bar nb-bar--cyan" role="progressbar" aria-labelledby="pr-zines" aria-valuenow="412" aria-valuemin="0" aria-valuemax="500" aria-valuetext="412 of 500 zines"><span class="nb-bar__fill" style="--p:82%"></span></div></div>
<div class="nb-progress"><span class="nb-progress__top" id="pr-steps">Launch checklist</span><ol class="nb-steps" aria-labelledby="pr-steps">
<li class="is-done">Record<span class="nb-sr">, done</span></li><li class="is-done">Edit<span class="nb-sr">, done</span></li><li aria-current="step">Artwork<span class="nb-sr">, in progress</span></li><li>Publish</li></ol></div>
</article></section>
</div>

/* ── Neobrutalism UI kit tokens (uiCookies) — identical in every set ─────────────
   Thick ink borders, hard offset shadows and flat saturated fills on cream paper.
   Change a token and the whole kit follows; the border and shadow recipes below are built from them. */
:root{
  --nb-paper:#fff6e0;        /* page background, cream */
  --nb-surface:#ffffff;      /* card, field and button faces */
  --nb-ink:#111111;          /* text, 17.5:1 on paper */
  --nb-muted:#454036;        /* secondary text, 9.6:1 on paper */
  --nb-line:#111111;         /* border colour */
  --nb-bw:3px;               /* border width */
  --nb-shadow-x:4px;         /* hard shadow offset; pressed controls move this far into it */
  --nb-shadow-y:4px;
  --nb-shadow-color:#111111;
  --nb-radius:12px;          /* cards and panels */
  --nb-radius-sm:8px;        /* buttons and fields */
  --nb-focus:#1d4ed8;        /* dashed focus outline, 6.2:1 on paper, never the shadow */
  --nb-on-fill:#111111;      /* text on every palette fill below, 6.8:1 or more */
  --nb-on-fill-muted:#2b2822;/* secondary text on fills, 5.2:1 or more */
  --nb-lemon:#ffe14d;--nb-pink:#ff90d0;--nb-cyan:#62e2e8;--nb-lime:#b6f36a;
  --nb-orange:#ffa94d;--nb-violet:#b9a3ff;--nb-red:#ff6b6b;
  --nb-blue:#2448e0;--nb-on-blue:#ffffff; /* the only fill that takes white text, 6.8:1 */
  --nb-danger:#b42318;       /* destructive text, 6.1:1 on paper */
  --nb-font:"Space Grotesk","Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --nb-font-display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
}
/* Dark brutalism: data-nb="dark" on any wrapper, or a checked .nb-theme-input inside a [data-nb] element.
   :is() is a forgiving list, so browsers without :has() still apply data-nb="dark". Fills keep dark text. */
[data-nb]:is([data-nb="dark"],:has(.nb-theme-input:checked)){
  --nb-paper:#17150f;--nb-surface:#25221b;--nb-ink:#fbf3dc;--nb-muted:#d6ccb2;--nb-line:#fbf3dc;
  --nb-shadow-color:#fbf3dc;--nb-focus:#8db4ff;--nb-danger:#ff9b8f;color-scheme:dark}
/* More contrast requested: secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-nb]:is([data-nb],:has(.nb-theme-input:checked)){--nb-muted:var(--nb-ink);--nb-on-fill-muted:var(--nb-on-fill)}}
:root,[data-nb]{
  --nb-border:var(--nb-bw) solid var(--nb-line);
  --nb-shadow:var(--nb-shadow-x) var(--nb-shadow-y) 0 0 var(--nb-shadow-color);
  --nb-shadow-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5) 0 0 var(--nb-shadow-color);
  --nb-shadow-lg:calc(var(--nb-shadow-x)*1.75) calc(var(--nb-shadow-y)*1.75) 0 0 var(--nb-shadow-color);
  --nb-shadow-hover:calc(var(--nb-shadow-x) + 2px) calc(var(--nb-shadow-y) + 2px) 0 0 var(--nb-shadow-color);
  --nb-press:var(--nb-shadow-x) var(--nb-shadow-y);                       /* translate for a pressed control */
  --nb-press-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5);  /* …for one with the small shadow */
}
[data-nb]{background:var(--nb-paper);color:var(--nb-ink);font-family:var(--nb-font)}
/* Components */
:where([class*="nb-"]),:where([class*="nb-"])::before,:where([class*="nb-"])::after{box-sizing:border-box}
.nb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nb-ico{width:20px;height:20px;flex:none}
.nb-display{font-family:var(--nb-font-display);font-weight:900;letter-spacing:-.01em;line-height:1.05}
.nb-link{color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.nb-link:hover{text-decoration-thickness:4px}
.nb-link:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:3px;border-radius:2px}
/* Buttons: a face, a thick border and a hard shadow. Hover lifts it, pressing moves it into its shadow */
.nb-btn{--nb-fill:var(--nb-surface);--nb-text:var(--nb-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.6rem 1.2rem;
  border:var(--nb-border);border-radius:var(--nb-radius-sm);background:var(--nb-fill);color:var(--nb-text);
  font:700 1rem/1.2 var(--nb-font);text-decoration:none;cursor:pointer;box-shadow:var(--nb-shadow);
  transition:translate .12s,box-shadow .12s}
.nb-btn:hover{translate:-2px -2px;box-shadow:var(--nb-shadow-hover)}
.nb-btn:active{translate:var(--nb-press);box-shadow:none}
.nb-btn:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:5px}
.nb-btn--lemon{--nb-fill:var(--nb-lemon);--nb-text:var(--nb-on-fill)}
.nb-btn--pink{--nb-fill:var(--nb-pink);--nb-text:var(--nb-on-fill)}
.nb-btn--cyan{--nb-fill:var(--nb-cyan);--nb-text:var(--nb-on-fill)}
.nb-btn--lime{--nb-fill:var(--nb-lime);--nb-text:var(--nb-on-fill)}
.nb-btn--red{--nb-fill:var(--nb-red);--nb-text:var(--nb-on-fill)}
.nb-btn--blue{--nb-fill:var(--nb-blue);--nb-text:var(--nb-on-blue)}
.nb-btn--ink{--nb-fill:var(--nb-ink);--nb-text:var(--nb-paper)}
.nb-btn--sm{min-height:38px;padding:.4rem .85rem;font-size:.875rem}
.nb-btn--lg{min-height:56px;padding:.8rem 1.6rem;font-size:1.15rem}
.nb-btn--block{width:100%}
.nb-btn--icon{width:48px;height:48px;min-height:0;padding:0}
.nb-btn--icon-sm{width:38px;height:38px;box-shadow:var(--nb-shadow-sm)}
.nb-btn--icon-sm:hover{box-shadow:var(--nb-shadow)}
.nb-btn--icon-sm:active{translate:var(--nb-press-sm)}
.nb-btn--round{border-radius:50%}
.nb-btn:disabled{--nb-fill:var(--nb-paper);--nb-text:var(--nb-muted);border-style:dashed;box-shadow:none;translate:none;cursor:not-allowed}
/* Icon toggle: a checkbox behind a round face. On = pressed into its shadow, pink, and the outline icon turns solid */
.nb-itoggle{position:relative;display:inline-flex}
.nb-itoggle__face{display:grid;place-items:center;width:48px;height:48px;border:var(--nb-border);border-radius:50%;background:var(--nb-surface);color:var(--nb-ink);
  box-shadow:var(--nb-shadow);cursor:pointer;transition:translate .12s,box-shadow .12s}
.nb-itoggle__face .nb-ico{width:22px;height:22px}
.nb-itoggle__face .nb-ico+.nb-ico,.nb-itoggle input:checked+.nb-itoggle__face .nb-ico:first-child{display:none}
.nb-itoggle input:checked+.nb-itoggle__face{translate:var(--nb-press);box-shadow:none;background:var(--nb-pink);color:var(--nb-on-fill)}
.nb-itoggle input:checked+.nb-itoggle__face .nb-ico+.nb-ico{display:block}
.nb-itoggle input:focus-visible+.nb-itoggle__face{outline:3px dashed var(--nb-focus);outline-offset:5px}
/* Card: a white panel, the thick border and the large hard shadow. Fill variants keep dark text */
.nb-card{position:relative;padding:1.4rem;border:var(--nb-border);border-radius:var(--nb-radius);background:var(--nb-surface);color:var(--nb-ink);box-shadow:var(--nb-shadow-lg);font-family:var(--nb-font)}
.nb-card h2,.nb-card h3,.nb-card p{margin:0}
.nb-card--lemon,.nb-card--pink,.nb-card--cyan,.nb-card--lime,.nb-card--orange,.nb-card--violet{--nb-muted:var(--nb-on-fill-muted);color:var(--nb-on-fill)}
.nb-card--lemon{background:var(--nb-lemon)}.nb-card--pink{background:var(--nb-pink)}.nb-card--cyan{background:var(--nb-cyan)}
.nb-card--lime{background:var(--nb-lime)}.nb-card--orange{background:var(--nb-orange)}.nb-card--violet{background:var(--nb-violet)}
/* Stickers: tilted labels that sit on or over a card */
.nb-sticker{display:inline-flex;align-items:center;gap:.35rem;width:max-content;padding:.3rem .7rem;border:var(--nb-border);border-radius:999px;
  background:var(--nb-lemon);color:var(--nb-on-fill);font:800 .75rem/1.1 var(--nb-font);letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--nb-shadow-sm);rotate:-4deg}
.nb-sticker .nb-ico{width:14px;height:14px}
.nb-sticker--pink{background:var(--nb-pink)}.nb-sticker--cyan{background:var(--nb-cyan)}.nb-sticker--lime{background:var(--nb-lime)}
.nb-sticker--orange{background:var(--nb-orange)}.nb-sticker--violet{background:var(--nb-violet)}
.nb-sticker--right{rotate:5deg}
.nb-sticker--corner{position:absolute;top:-16px;right:14px;z-index:2}
.nb-sticker--square{border-radius:4px}
/* Layout helpers */
.nb-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.nb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px;align-items:start}
.nb-stack{display:grid;gap:1.25rem}
/* Range: a native input with a striped fill and a square thumb (a few lines of script paint the WebKit fill) */
.nb-range{--val:50%;width:100%;height:30px;margin:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer}
.nb-range::-webkit-slider-runnable-track{height:12px;border:var(--nb-border);border-radius:999px;
  background:linear-gradient(var(--nb-pink),var(--nb-pink)) 0 0/var(--val) 100% no-repeat,var(--nb-surface)}
.nb-range::-webkit-slider-thumb{width:26px;height:26px;margin-top:-7px;border:var(--nb-border);border-radius:6px;background:var(--nb-lemon);box-shadow:var(--nb-shadow-sm);-webkit-appearance:none;appearance:none}
.nb-range::-moz-range-track{height:12px;border:var(--nb-border);border-radius:999px;background:var(--nb-surface)}
.nb-range::-moz-range-progress{height:12px;border:var(--nb-border);border-radius:999px;background:var(--nb-pink)}
.nb-range::-moz-range-thumb{width:20px;height:20px;border:var(--nb-border);border-radius:6px;background:var(--nb-lemon);box-shadow:var(--nb-shadow-sm)}
.nb-range:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:4px;border-radius:6px}
.nb-out{padding:.1rem .5rem;border:2px solid var(--nb-line);border-radius:6px;background:var(--nb-lemon);color:var(--nb-on-fill);font-weight:800;font-variant-numeric:tabular-nums}
/* Music player: a range seek bar, a checkbox play/pause, and shuffle and repeat toggles that press in and gain a dot */
.nb-player{max-width:380px}
.nb-player__art{position:relative;height:190px;margin-bottom:1.1rem;border:var(--nb-border);border-radius:var(--nb-radius-sm);overflow:hidden;background:var(--nb-violet)}
.nb-player__art svg{display:block;width:100%;height:100%}
.nb-player__art .nb-sticker{position:absolute;right:12px;bottom:12px}
.nb-player__title{font-size:1.4rem}
.nb-player__artist{margin-top:.2rem!important;font-weight:600;color:var(--nb-muted)}
.nb-times{display:flex;justify-content:space-between;margin-top:.15rem;font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}
.nb-seek{margin-top:1rem}
.nb-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:1rem}
.nb-play .nb-itoggle__face{width:62px;height:62px;background:var(--nb-lemon);color:var(--nb-on-fill)}
.nb-play .nb-itoggle__face .nb-ico{width:26px;height:26px}
.nb-play input:checked+.nb-itoggle__face{background:var(--nb-lemon)}
.nb-mini{position:relative;display:inline-flex}
.nb-mini__face{position:relative;display:grid;place-items:center;width:42px;height:42px;border:var(--nb-bw) solid transparent;border-radius:var(--nb-radius-sm);color:var(--nb-ink);cursor:pointer}
.nb-mini__face:hover{border-color:var(--nb-line)}
.nb-mini input:checked+.nb-mini__face{border-color:var(--nb-line);background:var(--nb-cyan);color:var(--nb-on-fill)}
.nb-mini input:checked+.nb-mini__face::after{content:"";position:absolute;bottom:3px;width:5px;height:5px;border-radius:50%;background:currentColor}
.nb-mini input:focus-visible+.nb-mini__face{outline:3px dashed var(--nb-focus);outline-offset:3px}
/* Weather card */
.nb-weather__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.nb-weather__place{font-weight:800}
.nb-weather__temp{margin-top:.2rem!important;font-size:3.6rem}
.nb-weather__sun{display:grid;place-items:center;width:84px;height:84px;flex:none;border:var(--nb-border);border-radius:50%;background:var(--nb-lemon);color:var(--nb-on-fill);box-shadow:var(--nb-shadow);rotate:-8deg}
.nb-weather__sun .nb-ico{width:44px;height:44px}
.nb-weather__desc{margin-top:.2rem!important;font-weight:700}
.nb-hours{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:1.2rem 0 0;padding:0;list-style:none}
.nb-hours li{display:grid;justify-items:center;gap:.3rem;padding:.55rem .2rem;border:2px solid var(--nb-line);border-radius:var(--nb-radius-sm);background:var(--nb-surface);color:var(--nb-ink);font-size:.85rem;font-weight:700}
.nb-hours li[aria-current="time"]{background:var(--nb-ink);color:var(--nb-paper)}
.nb-hours b{font-size:1.05rem}
.nb-weather__facts{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1rem 0 0!important;font-size:.88rem;font-weight:700}
.nb-weather__facts span{display:inline-flex;align-items:center;gap:.3rem}
.nb-weather__facts .nb-ico{width:16px;height:16px}
/* Mini calendar: a real table; today is ink and aria-current, event days are pink with hidden text */
.nb-cal{max-width:360px}
.nb-cal__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.9rem}
.nb-cal__title{font-size:1.25rem}
.nb-cal table{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed;text-align:center}
.nb-cal caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.nb-cal th{padding:0 0 .25rem;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--nb-muted)}
.nb-cal td{height:38px;padding:0;border:2px solid transparent;border-radius:6px;font-weight:700;font-variant-numeric:tabular-nums}
.nb-cal td.is-event{border-color:var(--nb-line);background:var(--nb-pink);color:var(--nb-on-fill)}
.nb-cal td[aria-current="date"]{border-color:var(--nb-line);background:var(--nb-ink);color:var(--nb-paper);box-shadow:var(--nb-shadow-sm)}
.nb-cal__legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.8rem!important;font-size:.82rem;font-weight:700}
.nb-cal__legend span{display:inline-flex;align-items:center;gap:.35rem}
.nb-cal__legend i{width:14px;height:14px;border:2px solid var(--nb-line);border-radius:3px}
/* Progress: labelled bars with a hatched fill and the value written out */
.nb-progress{display:grid;gap:.45rem}
.nb-progress__top{display:flex;justify-content:space-between;gap:1rem;font-weight:800}
.nb-progress__top span{font-variant-numeric:tabular-nums}
.nb-bar{height:24px;border:var(--nb-border);border-radius:999px;background:var(--nb-surface);overflow:hidden}
.nb-bar__fill{display:block;width:var(--p);height:100%;border-right:var(--nb-border);background:repeating-linear-gradient(-45deg,transparent 0 8px,rgba(17,17,17,.22) 8px 11px),var(--nb-tone,var(--nb-lime))}
.nb-bar--pink{--nb-tone:var(--nb-pink)}.nb-bar--cyan{--nb-tone:var(--nb-cyan)}.nb-bar--lemon{--nb-tone:var(--nb-lemon)}
.nb-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0;list-style:none;counter-reset:nb-step}
.nb-steps li{display:grid;gap:.35rem;font-size:.8rem;font-weight:800}
.nb-steps li::before{content:"";height:14px;border:var(--nb-border);border-radius:4px;background:var(--nb-surface)}
.nb-steps li.is-done::before{background:var(--nb-lime)}
.nb-steps li[aria-current="step"]::before{background:repeating-linear-gradient(-45deg,var(--nb-lemon) 0 6px,var(--nb-surface) 6px 10px)}
@media (prefers-reduced-motion:reduce){[class*="nb-"],[class*="nb-"]::before,[class*="nb-"]::after{transition:none!important;animation:none!important}}

// Seek bar: paint the WebKit fill and keep the visible time and aria-valuetext in step
document.querySelectorAll('[data-nb-seek]').forEach(function (r) {
  var now = document.querySelector('[data-nb-elapsed="' + r.id + '"]');
  function mmss(s) { return Math.floor(s / 60) + ':' + String(Math.floor(s % 60)).padStart(2, '0'); }
  function paint() {
    r.style.setProperty('--val', r.value / r.max * 100 + '%');
    r.setAttribute('aria-valuetext', mmss(r.value) + ' of ' + mmss(r.max));
    if (now) now.textContent = mmss(r.value);
  }
  r.addEventListener('input', paint); paint();
});

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="nb-i-music" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5.5l11-2V16"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="17.5" cy="16" r="2.5"/></symbol>
  <symbol id="nb-i-shuffle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 7h3.5c5 0 5 10 10 10h3.5M3.5 17H7c1.6 0 2.7-1 3.5-2.4M13.5 9.4C14.3 8 15.4 7 17 7h3.5M18 4l2.5 3-2.5 3M18 14l2.5 3-2.5 3"/></symbol>
  <symbol id="nb-i-prev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M18.5 5v14l-10-7z"/><path d="M5.5 5v14"/></symbol>
  <symbol id="nb-i-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M7.5 4.5v15l12-7.5z"/></symbol>
  <symbol id="nb-i-pause" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M6.5 4.5h4v15h-4zM13.5 4.5h4v15h-4z"/></symbol>
  <symbol id="nb-i-next" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M5.5 5v14l10-7z"/><path d="M18.5 5v14"/></symbol>
  <symbol id="nb-i-repeat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11V9a2.5 2.5 0 0 1 2.5-2.5h13M16.5 3.5l3 3-3 3M20 13v2a2.5 2.5 0 0 1-2.5 2.5h-13M7.5 20.5l-3-3 3-3"/></symbol>
  <symbol id="nb-i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></symbol>
  <symbol id="nb-i-wind" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9h11a3 3 0 1 0-3-3M3 15h15a3 3 0 1 1-3 3M3 12h8"/></symbol>
  <symbol id="nb-i-drop" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5s6.5 7 6.5 11a6.5 6.5 0 0 1-13 0c0-4 6.5-11 6.5-11z"/></symbol>
  <symbol id="nb-i-cloud" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18.5h10a4 4 0 0 0 .6-7.95A5.5 5.5 0 0 0 7 10a4.25 4.25 0 0 0 0 8.5z"/></symbol>
  <symbol id="nb-i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></symbol>
</svg>
<div class="cols">
<section><span class="lbl">Music player · play, shuffle and repeat are pressed in when on</span>
<article class="card nb-card nb-player" aria-label="Music player"><div class="card-body">
<div class="nb-player__art"><svg viewBox="0 0 340 190" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false"><rect width="340" height="190" style="fill:var(--nb-violet)"/><path d="M0 150l28-22 28 22 28-22 28 22 28-22 28 22 28-22 28 22 28-22 28 22 28-22 28 22v40H0z" stroke-width="3" style="fill:var(--nb-pink);stroke:var(--nb-line)"/><circle cx="170" cy="86" r="66" stroke-width="3" style="fill:#111;stroke:var(--nb-line)"/><circle cx="170" cy="86" r="50" fill="none" stroke="#3a3a3a" stroke-width="2"/><circle cx="170" cy="86" r="36" fill="none" stroke="#3a3a3a" stroke-width="2"/><circle cx="170" cy="86" r="22" stroke-width="3" style="fill:var(--nb-lemon);stroke:#111"/><circle cx="170" cy="86" r="4" fill="#111"/><path d="M262 34l8 16 18 2-13 12 4 18-17-9-16 9 3-18-13-12 18-2z" stroke-width="3" style="fill:var(--nb-lime);stroke:var(--nb-line)"/></svg><span class="badge nb-sticker nb-sticker-lime"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-music"/></svg>Now playing</span></div>
<h3 class="nb-player__title nb-display">Neon Laundromat</h3><p class="nb-player__artist">The Paper Cuts · Side B</p>
<div class="nb-seek"><label class="visually-hidden" for="seek">Seek</label><input class="form-range nb-range" id="seek" type="range" min="0" max="238" value="102" data-nb-seek>
<div class="nb-times" aria-hidden="true"><span data-nb-elapsed="seek">1:42</span><span>3:58</span></div></div>
<div class="nb-controls">
<input class="btn-check" type="checkbox" id="pl-shuffle" aria-label="Shuffle" checked autocomplete="off"><label class="nb-mini" for="pl-shuffle"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-shuffle"/></svg></label>
<button class="btn btn-nb btn-nb-icon rounded-circle" type="button" aria-label="Previous track"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-prev"/></svg></button>
<input class="btn-check" type="checkbox" id="pl-play" aria-label="Play" checked autocomplete="off"><label class="btn btn-nb btn-nb-icon rounded-circle nb-play" for="pl-play"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-play"/></svg><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-pause"/></svg></label>
<button class="btn btn-nb btn-nb-icon rounded-circle" type="button" aria-label="Next track"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-next"/></svg></button>
<input class="btn-check" type="checkbox" id="pl-repeat" aria-label="Repeat" autocomplete="off"><label class="nb-mini" for="pl-repeat"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-repeat"/></svg></label>
</div></div></article></section>
<section><span class="lbl">Weather</span>
<article class="card nb-card nb-card-cyan" aria-label="Weather in Lisbon"><div class="card-body">
<div class="nb-weather__top"><div><p class="nb-weather__place">Lisbon, Portugal</p><p class="nb-weather__temp nb-display">24°C</p><p class="nb-weather__desc">Sunny, light breeze</p></div><span class="nb-weather__sun"><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg></span></div>
<p class="nb-weather__facts"><span><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-wind"/></svg>Wind 12 km/h</span><span><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-drop"/></svg>Humidity 48%</span><span><svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg>UV 6</span></p>
<ul class="nb-hours" aria-label="Next hours">
<li aria-current="time">Now<svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg><span class="visually-hidden">Sunny,</span><b>24°</b></li>
<li>15:00<svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg><span class="visually-hidden">Sunny,</span><b>25°</b></li>
<li>18:00<svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-cloud"/></svg><span class="visually-hidden">Cloudy,</span><b>22°</b></li>
<li>21:00<svg class="nb-ico" aria-hidden="true" focusable="false"><use href="#nb-i-moon"/></svg><span class="visually-hidden">Clear,</span><b>19°</b></li>
</ul></div></article></section>
</div>
<div class="cols">
<section><span class="lbl">Mini calendar · today and release days are marked in text too</span>
<article class="card nb-card nb-cal" aria-labelledby="cal-title"><div class="card-body">
<div class="nb-cal__head"><h3 class="nb-cal__title nb-display" id="cal-title">October 2026</h3><span class="badge nb-sticker nb-sticker-pink nb-sticker-right">3 releases</span></div>
<table><caption>October 2026, Monday first</caption>
<thead><tr><th scope="col"><abbr title="Monday">Mo</abbr></th><th scope="col"><abbr title="Tuesday">Tu</abbr></th><th scope="col"><abbr title="Wednesday">We</abbr></th><th scope="col"><abbr title="Thursday">Th</abbr></th><th scope="col"><abbr title="Friday">Fr</abbr></th><th scope="col"><abbr title="Saturday">Sa</abbr></th><th scope="col"><abbr title="Sunday">Su</abbr></th></tr></thead>
<tbody>
<tr><td></td><td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td><td class="is-event">9<span class="visually-hidden">, print drop</span></td><td>10</td><td>11</td></tr>
<tr><td>12</td><td>13</td><td>14</td><td>15</td><td aria-current="date">16<span class="visually-hidden">, today</span></td><td>17</td><td>18</td></tr>
<tr><td>19</td><td>20</td><td>21</td><td>22</td><td class="is-event">23<span class="visually-hidden">, episode 43</span></td><td>24</td><td>25</td></tr>
<tr><td>26</td><td>27</td><td>28</td><td>29</td><td class="is-event">30<span class="visually-hidden">, print drop</span></td><td>31</td><td></td></tr>
</tbody></table>
<p class="nb-cal__legend" aria-hidden="true"><span><i style="background:var(--nb-ink)"></i>Today</span><span><i style="background:var(--nb-pink)"></i>Release day</span></p>
</div></article></section>
<section><span class="lbl">Progress · labelled bars with the value written out</span>
<article class="card nb-card" aria-label="Progress"><div class="card-body nb-stack">
<div class="nb-progress"><div class="nb-progress__top"><span id="pr-upload">Uploading episode 43</span><span>72%</span></div><div class="progress nb-bar" role="progressbar" aria-labelledby="pr-upload" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:72%"></div></div></div>
<div class="nb-progress"><div class="nb-progress__top"><span id="pr-goal">Members goal</span><span>340 of 500</span></div><div class="progress nb-bar nb-bar-pink" role="progressbar" aria-labelledby="pr-goal" aria-valuenow="340" aria-valuemin="0" aria-valuemax="500" aria-valuetext="340 of 500 members"><div class="progress-bar" style="width:68%"></div></div></div>
<div class="nb-progress"><div class="nb-progress__top"><span id="pr-zines">Zines folded</span><span>412 of 500</span></div><div class="progress nb-bar nb-bar-cyan" role="progressbar" aria-labelledby="pr-zines" aria-valuenow="412" aria-valuemin="0" aria-valuemax="500" aria-valuetext="412 of 500 zines"><div class="progress-bar" style="width:82%"></div></div></div>
<div class="nb-progress"><span class="nb-progress__top" id="pr-steps">Launch checklist</span><ol class="nb-steps" aria-labelledby="pr-steps">
<li class="is-done">Record<span class="visually-hidden">, done</span></li><li class="is-done">Edit<span class="visually-hidden">, done</span></li><li aria-current="step">Artwork<span class="visually-hidden">, in progress</span></li><li>Publish</li></ol></div>
</div></article></section>
</div>

/* ── Neobrutalism UI kit tokens (uiCookies) — identical in every set ─────────────
   Thick ink borders, hard offset shadows and flat saturated fills on cream paper.
   Change a token and the whole kit follows; the border and shadow recipes below are built from them. */
:root{
  --nb-paper:#fff6e0;        /* page background, cream */
  --nb-surface:#ffffff;      /* card, field and button faces */
  --nb-ink:#111111;          /* text, 17.5:1 on paper */
  --nb-muted:#454036;        /* secondary text, 9.6:1 on paper */
  --nb-line:#111111;         /* border colour */
  --nb-bw:3px;               /* border width */
  --nb-shadow-x:4px;         /* hard shadow offset; pressed controls move this far into it */
  --nb-shadow-y:4px;
  --nb-shadow-color:#111111;
  --nb-radius:12px;          /* cards and panels */
  --nb-radius-sm:8px;        /* buttons and fields */
  --nb-focus:#1d4ed8;        /* dashed focus outline, 6.2:1 on paper, never the shadow */
  --nb-on-fill:#111111;      /* text on every palette fill below, 6.8:1 or more */
  --nb-on-fill-muted:#2b2822;/* secondary text on fills, 5.2:1 or more */
  --nb-lemon:#ffe14d;--nb-pink:#ff90d0;--nb-cyan:#62e2e8;--nb-lime:#b6f36a;
  --nb-orange:#ffa94d;--nb-violet:#b9a3ff;--nb-red:#ff6b6b;
  --nb-blue:#2448e0;--nb-on-blue:#ffffff; /* the only fill that takes white text, 6.8:1 */
  --nb-danger:#b42318;       /* destructive text, 6.1:1 on paper */
  --nb-font:"Space Grotesk","Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --nb-font-display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
}
/* Dark brutalism: data-nb="dark" on any wrapper, or a checked .nb-theme-input inside a [data-nb] element.
   :is() is a forgiving list, so browsers without :has() still apply data-nb="dark". Fills keep dark text. */
[data-nb]:is([data-nb="dark"],:has(.nb-theme-input:checked)){
  --nb-paper:#17150f;--nb-surface:#25221b;--nb-ink:#fbf3dc;--nb-muted:#d6ccb2;--nb-line:#fbf3dc;
  --nb-shadow-color:#fbf3dc;--nb-focus:#8db4ff;--nb-danger:#ff9b8f;color-scheme:dark}
/* More contrast requested: secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-nb]:is([data-nb],:has(.nb-theme-input:checked)){--nb-muted:var(--nb-ink);--nb-on-fill-muted:var(--nb-on-fill)}}
:root,[data-nb]{
  --nb-border:var(--nb-bw) solid var(--nb-line);
  --nb-shadow:var(--nb-shadow-x) var(--nb-shadow-y) 0 0 var(--nb-shadow-color);
  --nb-shadow-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5) 0 0 var(--nb-shadow-color);
  --nb-shadow-lg:calc(var(--nb-shadow-x)*1.75) calc(var(--nb-shadow-y)*1.75) 0 0 var(--nb-shadow-color);
  --nb-shadow-hover:calc(var(--nb-shadow-x) + 2px) calc(var(--nb-shadow-y) + 2px) 0 0 var(--nb-shadow-color);
  --nb-press:var(--nb-shadow-x) var(--nb-shadow-y);                       /* translate for a pressed control */
  --nb-press-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5);  /* …for one with the small shadow */
}
[data-nb]{background:var(--nb-paper);color:var(--nb-ink);font-family:var(--nb-font)}
/* Bootstrap's own variables mapped onto the kit tokens */
:root,[data-nb]{--bs-body-bg:var(--nb-paper);--bs-body-color:var(--nb-ink);--bs-body-font-family:var(--nb-font);--bs-emphasis-color:var(--nb-ink);
  --bs-heading-color:var(--nb-ink);--bs-secondary-color:var(--nb-muted);--bs-tertiary-color:var(--nb-muted);
  --bs-border-color:var(--nb-line);--bs-border-width:var(--nb-bw);--bs-border-radius:var(--nb-radius-sm);--bs-border-radius-lg:var(--nb-radius);
  --bs-focus-ring-color:var(--nb-focus)}
/* Components */
.nb-ico{width:20px;height:20px;flex:none}
.nb-display{font-family:var(--nb-font-display);font-weight:900;letter-spacing:-.01em;line-height:1.05}
.nb-link{color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.nb-link:hover{color:inherit;text-decoration-thickness:4px}
.nb-link:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:3px;border-radius:2px}
/* Buttons: Bootstrap .btn with a .btn-nb variant set through --bs-btn-* variables.
   Hover lifts it, pressing (or a checked .btn-check) moves it into its shadow */
.btn-nb{--nb-fill:var(--nb-surface);--nb-text:var(--nb-ink);--nb-btn-shadow:var(--nb-shadow);
  --bs-btn-padding-x:1.2rem;--bs-btn-padding-y:.6rem;--bs-btn-font-family:var(--nb-font);--bs-btn-font-size:1rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.2;
  --bs-btn-border-width:var(--nb-bw);--bs-btn-border-radius:var(--nb-radius-sm);
  --bs-btn-bg:var(--nb-fill);--bs-btn-color:var(--nb-text);--bs-btn-border-color:var(--nb-line);
  --bs-btn-hover-bg:var(--nb-fill);--bs-btn-hover-color:var(--nb-text);--bs-btn-hover-border-color:var(--nb-line);
  --bs-btn-active-bg:var(--nb-fill);--bs-btn-active-color:var(--nb-text);--bs-btn-active-border-color:var(--nb-line);
  --bs-btn-disabled-bg:var(--nb-paper);--bs-btn-disabled-color:var(--nb-muted);--bs-btn-disabled-border-color:var(--nb-line);--bs-btn-disabled-opacity:1;
  --bs-btn-focus-box-shadow:var(--nb-btn-shadow);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;box-shadow:var(--nb-btn-shadow);transition:translate .12s,box-shadow .12s}
.btn-nb:hover{translate:-2px -2px;--nb-btn-shadow:var(--nb-shadow-hover)}
.btn-nb:active{translate:var(--nb-press);--nb-btn-shadow:none}
.btn-nb:focus-visible,.btn-check:focus-visible+.btn-nb{outline:3px dashed var(--nb-focus);outline-offset:5px;box-shadow:var(--nb-btn-shadow)}
.btn-nb-lemon{--nb-fill:var(--nb-lemon);--nb-text:var(--nb-on-fill)}
.btn-nb-pink{--nb-fill:var(--nb-pink);--nb-text:var(--nb-on-fill)}
.btn-nb-cyan{--nb-fill:var(--nb-cyan);--nb-text:var(--nb-on-fill)}
.btn-nb-lime{--nb-fill:var(--nb-lime);--nb-text:var(--nb-on-fill)}
.btn-nb-red{--nb-fill:var(--nb-red);--nb-text:var(--nb-on-fill)}
.btn-nb-blue{--nb-fill:var(--nb-blue);--nb-text:var(--nb-on-blue)}
.btn-nb-ink{--nb-fill:var(--nb-ink);--nb-text:var(--nb-paper)}
.btn-nb.btn-sm{--bs-btn-padding-x:.85rem;--bs-btn-padding-y:.4rem;--bs-btn-font-size:.875rem;--bs-btn-border-radius:var(--nb-radius-sm);min-height:38px}
.btn-nb.btn-lg{--bs-btn-padding-x:1.6rem;--bs-btn-padding-y:.8rem;--bs-btn-font-size:1.15rem;--bs-btn-border-radius:var(--nb-radius-sm);min-height:56px}
.btn-nb-icon{--bs-btn-padding-x:0;--bs-btn-padding-y:0;width:48px;height:48px;min-height:0}
.btn-nb-icon-sm{width:38px;height:38px;--nb-btn-shadow:var(--nb-shadow-sm)}
.btn-nb-icon-sm:hover{--nb-btn-shadow:var(--nb-shadow)}
.btn-nb-icon-sm:active{translate:var(--nb-press-sm)}
.btn-nb.rounded-circle{border-radius:50%}
.btn-nb:disabled{border-style:dashed;--nb-btn-shadow:none;translate:none}
/* Icon toggle: .btn-check + a round .btn. On = pressed into its shadow, pink, and the outline icon turns solid */
.btn-check+.btn-nb-icon .nb-ico{width:22px;height:22px}
.btn-check+.btn-nb-icon .nb-ico+.nb-ico,.btn-check:checked+.btn-nb-icon .nb-ico:first-child{display:none}
.btn-check:checked+.btn-nb-icon .nb-ico+.nb-ico{display:block}
.btn-check:checked+.btn-nb-icon{--nb-fill:var(--nb-pink);--nb-text:var(--nb-on-fill);translate:var(--nb-press);--nb-btn-shadow:none}
/* Card: Bootstrap .card restyled through --bs-card-*; fill variants keep dark text */
.card.nb-card{--bs-card-bg:var(--nb-surface);--bs-card-color:var(--nb-ink);--bs-card-border-color:var(--nb-line);--bs-card-border-width:var(--nb-bw);
  --bs-card-border-radius:var(--nb-radius);--bs-card-inner-border-radius:calc(var(--nb-radius) - var(--nb-bw));--bs-card-spacer-x:1.4rem;--bs-card-spacer-y:1.4rem;
  --bs-card-cap-bg:transparent;box-shadow:var(--nb-shadow-lg);font-family:var(--nb-font)}
.nb-card h2,.nb-card h3,.nb-card p{margin:0}
.card.nb-card-lemon,.card.nb-card-pink,.card.nb-card-cyan,.card.nb-card-lime,.card.nb-card-orange,.card.nb-card-violet{--nb-muted:var(--nb-on-fill-muted);--bs-card-color:var(--nb-on-fill);--bs-heading-color:var(--nb-on-fill)}
.card.nb-card-lemon{--bs-card-bg:var(--nb-lemon)}.card.nb-card-pink{--bs-card-bg:var(--nb-pink)}.card.nb-card-cyan{--bs-card-bg:var(--nb-cyan)}
.card.nb-card-lime{--bs-card-bg:var(--nb-lime)}.card.nb-card-orange{--bs-card-bg:var(--nb-orange)}.card.nb-card-violet{--bs-card-bg:var(--nb-violet)}
/* Stickers: tilted .badge labels that sit on or over a card */
.badge.nb-sticker{--bs-badge-padding-x:.7rem;--bs-badge-padding-y:.3rem;--bs-badge-font-size:.75rem;--bs-badge-font-weight:800;--bs-badge-color:var(--nb-on-fill);--bs-badge-border-radius:999px;
  display:inline-flex;align-items:center;gap:.35rem;width:max-content;border:var(--nb-border);background:var(--nb-lemon);font-family:var(--nb-font);line-height:1.1;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--nb-shadow-sm);rotate:-4deg}
.nb-sticker .nb-ico{width:14px;height:14px}
.badge.nb-sticker-pink{background:var(--nb-pink)}.badge.nb-sticker-cyan{background:var(--nb-cyan)}.badge.nb-sticker-lime{background:var(--nb-lime)}
.badge.nb-sticker-orange{background:var(--nb-orange)}.badge.nb-sticker-violet{background:var(--nb-violet)}
.nb-sticker-right{rotate:5deg}
.nb-sticker-corner{position:absolute;top:-16px;right:14px;z-index:2}
.badge.nb-sticker-square{--bs-badge-border-radius:4px}
.nb-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.nb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px;align-items:start}
.nb-stack{display:grid;gap:1.25rem}
/* Range: Bootstrap .form-range.nb-range with a pink fill and a square thumb (a few lines of script paint the WebKit fill) */
.form-range.nb-range{--val:50%;height:30px}
.form-range.nb-range::-webkit-slider-runnable-track{height:12px;border:var(--nb-border);border-radius:999px;background:linear-gradient(var(--nb-pink),var(--nb-pink)) 0 0/var(--val) 100% no-repeat,var(--nb-surface)}
.form-range.nb-range::-webkit-slider-thumb{width:26px;height:26px;margin-top:-7px;border:var(--nb-border);border-radius:6px;background:var(--nb-lemon);box-shadow:var(--nb-shadow-sm)}
.form-range.nb-range::-moz-range-track{height:12px;border:var(--nb-border);border-radius:999px;background:var(--nb-surface)}
.form-range.nb-range::-moz-range-progress{height:12px;border:var(--nb-border);border-radius:999px;background:var(--nb-pink)}
.form-range.nb-range::-moz-range-thumb{width:20px;height:20px;border:var(--nb-border);border-radius:6px;background:var(--nb-lemon);box-shadow:var(--nb-shadow-sm)}
.form-range.nb-range:focus::-webkit-slider-thumb{box-shadow:var(--nb-shadow-sm)}
.form-range.nb-range:focus::-moz-range-thumb{box-shadow:var(--nb-shadow-sm)}
.form-range.nb-range:focus-visible{outline:3px dashed var(--nb-focus);outline-offset:4px;border-radius:6px}
.nb-out{padding:.1rem .5rem;border:2px solid var(--nb-line);border-radius:6px;background:var(--nb-lemon);color:var(--nb-on-fill);font-weight:800;font-variant-numeric:tabular-nums}
/* Music player: a .form-range seek bar, a .btn-check play/pause, and shuffle and repeat toggles that press in and gain a dot */
.nb-player{max-width:380px}
.nb-player__art{position:relative;height:190px;margin-bottom:1.1rem;border:var(--nb-border);border-radius:var(--nb-radius-sm);overflow:hidden;background:var(--nb-violet)}
.nb-player__art svg{display:block;width:100%;height:100%}
.nb-player__art .nb-sticker{position:absolute;right:12px;bottom:12px}
.nb-player__title{font-size:1.4rem}
.nb-player__artist{margin-top:.2rem!important;font-weight:600;color:var(--nb-muted)}
.nb-times{display:flex;justify-content:space-between;margin-top:.15rem;font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}
.nb-seek{margin-top:1rem}
.nb-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:1rem}
.btn-nb-icon.nb-play{--nb-fill:var(--nb-lemon);--nb-text:var(--nb-on-fill);width:62px;height:62px}
.btn-check:checked+.btn-nb-icon.nb-play{--nb-fill:var(--nb-lemon)}
.btn-nb-icon.nb-play .nb-ico{width:26px;height:26px}
.nb-mini{position:relative;display:grid;place-items:center;width:42px;height:42px;border:var(--nb-bw) solid transparent;border-radius:var(--nb-radius-sm);color:var(--nb-ink);cursor:pointer}
.nb-mini:hover{border-color:var(--nb-line)}
.btn-check:checked+.nb-mini{border-color:var(--nb-line);background:var(--nb-cyan);color:var(--nb-on-fill)}
.btn-check:checked+.nb-mini::after{content:"";position:absolute;bottom:3px;width:5px;height:5px;border-radius:50%;background:currentColor}
.btn-check:focus-visible+.nb-mini{outline:3px dashed var(--nb-focus);outline-offset:3px}
/* Weather card */
.nb-weather__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.nb-weather__place{font-weight:800}
.nb-weather__temp{margin-top:.2rem!important;font-size:3.6rem}
.nb-weather__sun{display:grid;place-items:center;width:84px;height:84px;flex:none;border:var(--nb-border);border-radius:50%;background:var(--nb-lemon);color:var(--nb-on-fill);box-shadow:var(--nb-shadow);rotate:-8deg}
.nb-weather__sun .nb-ico{width:44px;height:44px}
.nb-weather__desc{margin-top:.2rem!important;font-weight:700}
.nb-hours{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:1.2rem 0 0;padding:0;list-style:none}
.nb-hours li{display:grid;justify-items:center;gap:.3rem;padding:.55rem .2rem;border:2px solid var(--nb-line);border-radius:var(--nb-radius-sm);background:var(--nb-surface);color:var(--nb-ink);font-size:.85rem;font-weight:700}
.nb-hours li[aria-current="time"]{background:var(--nb-ink);color:var(--nb-paper)}
.nb-hours b{font-size:1.05rem}
.nb-weather__facts{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1rem 0 0!important;font-size:.88rem;font-weight:700}
.nb-weather__facts span{display:inline-flex;align-items:center;gap:.3rem}
.nb-weather__facts .nb-ico{width:16px;height:16px}
/* Mini calendar: a real table; today is ink and aria-current, event days are pink with hidden text */
.nb-cal{max-width:360px}
.nb-cal__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.9rem}
.nb-cal__title{font-size:1.25rem}
.nb-cal table{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed;text-align:center}
.nb-cal caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.nb-cal th{padding:0 0 .25rem;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--nb-muted)}
.nb-cal td{height:38px;padding:0;border:2px solid transparent;border-radius:6px;font-weight:700;font-variant-numeric:tabular-nums}
.nb-cal td.is-event{border-color:var(--nb-line);background:var(--nb-pink);color:var(--nb-on-fill)}
.nb-cal td[aria-current="date"]{border-color:var(--nb-line);background:var(--nb-ink);color:var(--nb-paper);box-shadow:var(--nb-shadow-sm)}
.nb-cal__legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.8rem!important;font-size:.82rem;font-weight:700}
.nb-cal__legend span{display:inline-flex;align-items:center;gap:.35rem}
.nb-cal__legend i{width:14px;height:14px;border:2px solid var(--nb-line);border-radius:3px}
/* Progress: Bootstrap .progress with a hatched .progress-bar and the value written out */
.nb-progress{display:grid;gap:.45rem}
.nb-progress__top{display:flex;justify-content:space-between;gap:1rem;font-weight:800}
.nb-progress__top span{font-variant-numeric:tabular-nums}
.progress.nb-bar{--bs-progress-height:24px;--bs-progress-bg:var(--nb-surface);--bs-progress-border-radius:999px;--bs-progress-bar-bg:var(--nb-tone,var(--nb-lime));border:var(--nb-border)}
.nb-bar .progress-bar{border-right:var(--nb-border);background-image:repeating-linear-gradient(-45deg,transparent 0 8px,rgba(17,17,17,.22) 8px 11px)}
.nb-bar-pink{--nb-tone:var(--nb-pink)}.nb-bar-cyan{--nb-tone:var(--nb-cyan)}.nb-bar-lemon{--nb-tone:var(--nb-lemon)}
.nb-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0;list-style:none}
.nb-steps li{display:grid;gap:.35rem;font-size:.8rem;font-weight:800}
.nb-steps li::before{content:"";height:14px;border:var(--nb-border);border-radius:4px;background:var(--nb-surface)}
.nb-steps li.is-done::before{background:var(--nb-lime)}
.nb-steps li[aria-current="step"]::before{background:repeating-linear-gradient(-45deg,var(--nb-lemon) 0 6px,var(--nb-surface) 6px 10px)}
@media (prefers-reduced-motion:reduce){[class*="nb-"],[class*="nb-"]::before,[class*="nb-"]::after{transition:none!important;animation:none!important}}

// Seek bar: paint the WebKit fill and keep the visible time and aria-valuetext in step
document.querySelectorAll('[data-nb-seek]').forEach(function (r) {
  var now = document.querySelector('[data-nb-elapsed="' + r.id + '"]');
  function mmss(s) { return Math.floor(s / 60) + ':' + String(Math.floor(s % 60)).padStart(2, '0'); }
  function paint() {
    r.style.setProperty('--val', r.value / r.max * 100 + '%');
    r.setAttribute('aria-valuetext', mmss(r.value) + ' of ' + mmss(r.max));
    if (now) now.textContent = mmss(r.value);
  }
  r.addEventListener('input', paint); paint();
});

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="nb-i-music" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5.5l11-2V16"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="17.5" cy="16" r="2.5"/></symbol>
  <symbol id="nb-i-shuffle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 7h3.5c5 0 5 10 10 10h3.5M3.5 17H7c1.6 0 2.7-1 3.5-2.4M13.5 9.4C14.3 8 15.4 7 17 7h3.5M18 4l2.5 3-2.5 3M18 14l2.5 3-2.5 3"/></symbol>
  <symbol id="nb-i-prev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M18.5 5v14l-10-7z"/><path d="M5.5 5v14"/></symbol>
  <symbol id="nb-i-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M7.5 4.5v15l12-7.5z"/></symbol>
  <symbol id="nb-i-pause" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M6.5 4.5h4v15h-4zM13.5 4.5h4v15h-4z"/></symbol>
  <symbol id="nb-i-next" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M5.5 5v14l10-7z"/><path d="M18.5 5v14"/></symbol>
  <symbol id="nb-i-repeat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11V9a2.5 2.5 0 0 1 2.5-2.5h13M16.5 3.5l3 3-3 3M20 13v2a2.5 2.5 0 0 1-2.5 2.5h-13M7.5 20.5l-3-3 3-3"/></symbol>
  <symbol id="nb-i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></symbol>
  <symbol id="nb-i-wind" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9h11a3 3 0 1 0-3-3M3 15h15a3 3 0 1 1-3 3M3 12h8"/></symbol>
  <symbol id="nb-i-drop" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5s6.5 7 6.5 11a6.5 6.5 0 0 1-13 0c0-4 6.5-11 6.5-11z"/></symbol>
  <symbol id="nb-i-cloud" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18.5h10a4 4 0 0 0 .6-7.95A5.5 5.5 0 0 0 7 10a4.25 4.25 0 0 0 0 8.5z"/></symbol>
  <symbol id="nb-i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></symbol>
</svg>
<div class="grid grid-cols-1 gap-14 md:grid-cols-2">
<section><span class="mb-[18px] block text-[.72rem] font-extrabold tracking-[.12em] text-nb-muted uppercase">Music player · play, shuffle and repeat are pressed in when on</span>
<article class="relative border-(length:--nb-bw) border-nb-line rounded-nb p-[1.4rem] font-nb shadow-nb-lg bg-nb-surface text-nb-ink max-w-[380px]" aria-label="Music player">
<div class="relative mb-[1.1rem] h-[190px] overflow-hidden border-(length:--nb-bw) border-nb-line rounded-nb-sm bg-nb-violet [&>svg]:block [&>svg]:size-full"><svg viewBox="0 0 340 190" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false"><rect width="340" height="190" style="fill:var(--nb-violet)"/><path d="M0 150l28-22 28 22 28-22 28 22 28-22 28 22 28-22 28 22 28-22 28 22 28-22 28 22v40H0z" stroke-width="3" style="fill:var(--nb-pink);stroke:var(--nb-line)"/><circle cx="170" cy="86" r="66" stroke-width="3" style="fill:#111;stroke:var(--nb-line)"/><circle cx="170" cy="86" r="50" fill="none" stroke="#3a3a3a" stroke-width="2"/><circle cx="170" cy="86" r="36" fill="none" stroke="#3a3a3a" stroke-width="2"/><circle cx="170" cy="86" r="22" stroke-width="3" style="fill:var(--nb-lemon);stroke:#111"/><circle cx="170" cy="86" r="4" fill="#111"/><path d="M262 34l8 16 18 2-13 12 4 18-17-9-16 9 3-18-13-12 18-2z" stroke-width="3" style="fill:var(--nb-lime);stroke:var(--nb-line)"/></svg><span class="rounded-full inline-flex w-max items-center gap-[.35rem] border-(length:--nb-bw) border-nb-line px-[.7rem] py-[.3rem] font-nb text-[.75rem] leading-[1.1] font-extrabold tracking-[.06em] text-nb-on-fill uppercase shadow-nb-sm absolute right-3 bottom-3 -rotate-4 bg-nb-lime"><svg class="size-3.5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-music"/></svg>Now playing</span></div>
<h3 class="m-0 text-[1.4rem] font-nb-display font-black tracking-[-.01em] leading-[1.05]">Neon Laundromat</h3><p class="m-0 mt-[.2rem] font-semibold text-nb-muted">The Paper Cuts · Side B</p>
<div class="mt-4"><label class="sr-only" for="seek">Seek</label><input class="h-[30px] w-full cursor-pointer appearance-none bg-transparent [--val:50%] [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:border-(length:--nb-bw) [&::-webkit-slider-runnable-track]:border-nb-line [&::-webkit-slider-runnable-track]:[background:linear-gradient(var(--nb-pink),var(--nb-pink))_0_0/var(--val)_100%_no-repeat,var(--nb-surface)] [&::-webkit-slider-thumb]:-mt-[7px] [&::-webkit-slider-thumb]:size-[26px] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-md [&::-webkit-slider-thumb]:border-(length:--nb-bw) [&::-webkit-slider-thumb]:border-nb-line [&::-webkit-slider-thumb]:bg-nb-lemon [&::-webkit-slider-thumb]:shadow-nb-sm [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:border-(length:--nb-bw) [&::-moz-range-track]:border-nb-line [&::-moz-range-track]:bg-nb-surface [&::-moz-range-progress]:h-3 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:border-(length:--nb-bw) [&::-moz-range-progress]:border-nb-line [&::-moz-range-progress]:bg-nb-pink [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-md [&::-moz-range-thumb]:border-(length:--nb-bw) [&::-moz-range-thumb]:border-nb-line [&::-moz-range-thumb]:bg-nb-lemon [&::-moz-range-thumb]:shadow-nb-sm focus-visible:rounded-md focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-4 focus-visible:outline-nb-focus" id="seek" type="range" min="0" max="238" value="102" data-nb-seek>
<div class="mt-[.15rem] flex justify-between text-[.85rem] font-bold tabular-nums" aria-hidden="true"><span data-nb-elapsed="seek">1:42</span><span>3:58</span></div></div>
<div class="mt-4 flex items-center justify-between gap-2">
<label class="relative inline-flex"><input class="peer sr-only" type="checkbox" aria-label="Shuffle" checked><span class="relative grid size-[42px] cursor-pointer place-items-center rounded-nb-sm border-(length:--nb-bw) border-transparent text-nb-ink hover:border-nb-line peer-checked:border-nb-line peer-checked:bg-nb-cyan peer-checked:text-nb-on-fill peer-checked:after:absolute peer-checked:after:bottom-[3px] peer-checked:after:size-[5px] peer-checked:after:rounded-full peer-checked:after:bg-current peer-checked:after:content-[''] peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[3px] peer-focus-visible:outline-nb-focus"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-shuffle"/></svg></span></label>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none size-12 rounded-full bg-nb-surface text-nb-ink" type="button" aria-label="Previous track"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-prev"/></svg></button>
<label class="group relative inline-flex"><input class="peer sr-only" type="checkbox" aria-label="Play" checked><span class="grid size-[62px] cursor-pointer place-items-center rounded-full border-(length:--nb-bw) border-nb-line bg-nb-lemon text-nb-on-fill shadow-nb transition-[translate,box-shadow] duration-[120ms] motion-reduce:transition-none peer-checked:[translate:var(--nb-press)] peer-checked:shadow-none peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[5px] peer-focus-visible:outline-nb-focus"><svg class="size-[26px] shrink-0 group-has-checked:hidden" aria-hidden="true" focusable="false"><use href="#nb-i-play"/></svg><svg class="hidden size-[26px] shrink-0 group-has-checked:block" aria-hidden="true" focusable="false"><use href="#nb-i-pause"/></svg></span></label>
<button class="inline-flex items-center justify-center gap-2 border-(length:--nb-bw) border-nb-line font-nb font-bold leading-[1.2] no-underline cursor-pointer focus-visible:outline-3 focus-visible:outline-dashed focus-visible:outline-offset-[5px] focus-visible:outline-nb-focus disabled:cursor-not-allowed disabled:border-dashed disabled:bg-nb-paper disabled:text-nb-muted disabled:shadow-none disabled:[translate:none] shadow-nb transition-[translate,box-shadow] duration-[120ms] hover:[translate:-2px_-2px] hover:shadow-nb-hover active:[translate:var(--nb-press)] active:shadow-none motion-reduce:transition-none size-12 rounded-full bg-nb-surface text-nb-ink" type="button" aria-label="Next track"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-next"/></svg></button>
<label class="relative inline-flex"><input class="peer sr-only" type="checkbox" aria-label="Repeat"><span class="relative grid size-[42px] cursor-pointer place-items-center rounded-nb-sm border-(length:--nb-bw) border-transparent text-nb-ink hover:border-nb-line peer-checked:border-nb-line peer-checked:bg-nb-cyan peer-checked:text-nb-on-fill peer-checked:after:absolute peer-checked:after:bottom-[3px] peer-checked:after:size-[5px] peer-checked:after:rounded-full peer-checked:after:bg-current peer-checked:after:content-[''] peer-focus-visible:outline-3 peer-focus-visible:outline-dashed peer-focus-visible:outline-offset-[3px] peer-focus-visible:outline-nb-focus"><svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-repeat"/></svg></span></label>
</div></article></section>
<section><span class="mb-[18px] block text-[.72rem] font-extrabold tracking-[.12em] text-nb-muted uppercase">Weather</span>
<article class="relative border-(length:--nb-bw) border-nb-line rounded-nb p-[1.4rem] font-nb shadow-nb-lg bg-nb-cyan [--nb-muted:var(--nb-on-fill-muted)] text-nb-on-fill" aria-label="Weather in Lisbon">
<div class="flex items-start justify-between gap-4"><div><p class="m-0 font-extrabold">Lisbon, Portugal</p><p class="m-0 mt-[.2rem] text-[3.6rem] font-nb-display font-black tracking-[-.01em] leading-[1.05]">24°C</p><p class="m-0 mt-[.2rem] font-bold">Sunny, light breeze</p></div><span class="grid size-[84px] flex-none -rotate-8 place-items-center rounded-full border-(length:--nb-bw) border-nb-line bg-nb-lemon text-nb-on-fill shadow-nb"><svg class="size-11 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg></span></div>
<p class="m-0 mt-4 flex flex-wrap gap-x-5 gap-y-[.4rem] text-[.88rem] font-bold"><span class="inline-flex items-center gap-[.3rem]"><svg class="size-4 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-wind"/></svg>Wind 12 km/h</span><span class="inline-flex items-center gap-[.3rem]"><svg class="size-4 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-drop"/></svg>Humidity 48%</span><span class="inline-flex items-center gap-[.3rem]"><svg class="size-4 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg>UV 6</span></p>
<ul class="m-0 mt-[1.2rem] grid list-none grid-cols-4 gap-2 p-0" aria-label="Next hours">
<li class="grid justify-items-center gap-[.3rem] rounded-nb-sm border-2 border-nb-line bg-nb-ink px-[.2rem] py-[.55rem] text-[.85rem] font-bold text-nb-paper" aria-current="time">Now<svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg><span class="sr-only">Sunny,</span><b class="text-[1.05rem]">24°</b></li>
<li class="grid justify-items-center gap-[.3rem] rounded-nb-sm border-2 border-nb-line bg-nb-surface px-[.2rem] py-[.55rem] text-[.85rem] font-bold text-nb-ink">15:00<svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-sun"/></svg><span class="sr-only">Sunny,</span><b class="text-[1.05rem]">25°</b></li>
<li class="grid justify-items-center gap-[.3rem] rounded-nb-sm border-2 border-nb-line bg-nb-surface px-[.2rem] py-[.55rem] text-[.85rem] font-bold text-nb-ink">18:00<svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-cloud"/></svg><span class="sr-only">Cloudy,</span><b class="text-[1.05rem]">22°</b></li>
<li class="grid justify-items-center gap-[.3rem] rounded-nb-sm border-2 border-nb-line bg-nb-surface px-[.2rem] py-[.55rem] text-[.85rem] font-bold text-nb-ink">21:00<svg class="size-5 shrink-0" aria-hidden="true" focusable="false"><use href="#nb-i-moon"/></svg><span class="sr-only">Clear,</span><b class="text-[1.05rem]">19°</b></li>
</ul></article></section>
</div>
<div class="grid grid-cols-1 gap-14 md:grid-cols-2">
<section><span class="mb-[18px] block text-[.72rem] font-extrabold tracking-[.12em] text-nb-muted uppercase">Mini calendar · today and release days are marked in text too</span>
<article class="relative border-(length:--nb-bw) border-nb-line rounded-nb p-[1.4rem] font-nb shadow-nb-lg bg-nb-surface text-nb-ink max-w-[360px]" aria-labelledby="cal-title">
<div class="mb-[.9rem] flex items-center justify-between gap-3"><h3 class="m-0 text-[1.25rem] font-nb-display font-black tracking-[-.01em] leading-[1.05]" id="cal-title">October 2026</h3><span class="rounded-full inline-flex w-max items-center gap-[.35rem] border-(length:--nb-bw) border-nb-line px-[.7rem] py-[.3rem] font-nb text-[.75rem] leading-[1.1] font-extrabold tracking-[.06em] text-nb-on-fill uppercase shadow-nb-sm rotate-[5deg] bg-nb-pink">3 releases</span></div>
<table class="w-full table-fixed border-separate border-spacing-1 text-center"><caption class="sr-only">October 2026, Monday first</caption>
<thead><tr><th class="pb-1 text-[.72rem] font-extrabold tracking-[.06em] text-nb-muted uppercase" scope="col"><abbr title="Monday">Mo</abbr></th><th class="pb-1 text-[.72rem] font-extrabold tracking-[.06em] text-nb-muted uppercase" scope="col"><abbr title="Tuesday">Tu</abbr></th><th class="pb-1 text-[.72rem] font-extrabold tracking-[.06em] text-nb-muted uppercase" scope="col"><abbr title="Wednesday">We</abbr></th><th class="pb-1 text-[.72rem] font-extrabold tracking-[.06em] text-nb-muted uppercase" scope="col"><abbr title="Thursday">Th</abbr></th><th class="pb-1 text-[.72rem] font-extrabold tracking-[.06em] text-nb-muted uppercase" scope="col"><abbr title="Friday">Fr</abbr></th><th class="pb-1 text-[.72rem] font-extrabold tracking-[.06em] text-nb-muted uppercase" scope="col"><abbr title="Saturday">Sa</abbr></th><th class="pb-1 text-[.72rem] font-extrabold tracking-[.06em] text-nb-muted uppercase" scope="col"><abbr title="Sunday">Su</abbr></th></tr></thead>
<tbody>
<tr><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums"></td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums"></td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums"></td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">1</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">2</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">3</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">4</td></tr>
<tr><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">5</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">6</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">7</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">8</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums border-nb-line bg-nb-pink text-nb-on-fill">9<span class="sr-only">, print drop</span></td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">10</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">11</td></tr>
<tr><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">12</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">13</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">14</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">15</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums border-nb-line bg-nb-ink text-nb-paper shadow-nb-sm" aria-current="date">16<span class="sr-only">, today</span></td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">17</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">18</td></tr>
<tr><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">19</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">20</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">21</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">22</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums border-nb-line bg-nb-pink text-nb-on-fill">23<span class="sr-only">, episode 43</span></td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">24</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">25</td></tr>
<tr><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">26</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">27</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">28</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">29</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums border-nb-line bg-nb-pink text-nb-on-fill">30<span class="sr-only">, print drop</span></td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums">31</td><td class="h-[38px] rounded-md border-2 border-transparent p-0 font-bold tabular-nums"></td></tr>
</tbody></table>
<p class="m-0 mt-[.8rem] flex flex-wrap gap-x-4 gap-y-[.4rem] text-[.82rem] font-bold" aria-hidden="true"><span class="inline-flex items-center gap-[.35rem]"><i class="size-3.5 rounded-[3px] border-2 border-nb-line bg-nb-ink"></i>Today</span><span class="inline-flex items-center gap-[.35rem]"><i class="size-3.5 rounded-[3px] border-2 border-nb-line bg-nb-pink"></i>Release day</span></p>
</article></section>
<section><span class="mb-[18px] block text-[.72rem] font-extrabold tracking-[.12em] text-nb-muted uppercase">Progress · labelled bars with the value written out</span>
<article class="relative border-(length:--nb-bw) border-nb-line rounded-nb p-[1.4rem] font-nb shadow-nb-lg bg-nb-surface text-nb-ink grid gap-5" aria-label="Progress">
<div class="grid gap-[.45rem]"><div class="flex justify-between gap-4 font-extrabold [&_span]:tabular-nums"><span id="pr-upload">Uploading episode 43</span><span>72%</span></div><div class="h-6 overflow-hidden rounded-full border-(length:--nb-bw) border-nb-line bg-nb-surface" role="progressbar" aria-labelledby="pr-upload" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><span class="block h-full border-r-(length:--nb-bw) border-nb-line bg-[repeating-linear-gradient(-45deg,transparent_0_8px,rgba(17,17,17,.22)_8px_11px)] w-[72%] bg-nb-lime"></span></div></div>
<div class="grid gap-[.45rem]"><div class="flex justify-between gap-4 font-extrabold [&_span]:tabular-nums"><span id="pr-goal">Members goal</span><span>340 of 500</span></div><div class="h-6 overflow-hidden rounded-full border-(length:--nb-bw) border-nb-line bg-nb-surface" role="progressbar" aria-labelledby="pr-goal" aria-valuenow="340" aria-valuemin="0" aria-valuemax="500" aria-valuetext="340 of 500 members"><span class="block h-full border-r-(length:--nb-bw) border-nb-line bg-[repeating-linear-gradient(-45deg,transparent_0_8px,rgba(17,17,17,.22)_8px_11px)] w-[68%] bg-nb-pink"></span></div></div>
<div class="grid gap-[.45rem]"><div class="flex justify-between gap-4 font-extrabold [&_span]:tabular-nums"><span id="pr-zines">Zines folded</span><span>412 of 500</span></div><div class="h-6 overflow-hidden rounded-full border-(length:--nb-bw) border-nb-line bg-nb-surface" role="progressbar" aria-labelledby="pr-zines" aria-valuenow="412" aria-valuemin="0" aria-valuemax="500" aria-valuetext="412 of 500 zines"><span class="block h-full border-r-(length:--nb-bw) border-nb-line bg-[repeating-linear-gradient(-45deg,transparent_0_8px,rgba(17,17,17,.22)_8px_11px)] w-[82%] bg-nb-cyan"></span></div></div>
<div class="grid gap-[.45rem]"><span class="flex justify-between gap-4 font-extrabold [&_span]:tabular-nums" id="pr-steps">Launch checklist</span><ol class="m-0 grid list-none grid-cols-4 gap-1.5 p-0" aria-labelledby="pr-steps">
<li class="grid gap-[.35rem] text-[.8rem] font-extrabold before:h-3.5 before:rounded-[4px] before:border-(length:--nb-bw) before:border-nb-line before:content-[''] before:bg-nb-lime">Record<span class="sr-only">, done</span></li><li class="grid gap-[.35rem] text-[.8rem] font-extrabold before:h-3.5 before:rounded-[4px] before:border-(length:--nb-bw) before:border-nb-line before:content-[''] before:bg-nb-lime">Edit<span class="sr-only">, done</span></li><li class="grid gap-[.35rem] text-[.8rem] font-extrabold before:h-3.5 before:rounded-[4px] before:border-(length:--nb-bw) before:border-nb-line before:content-[''] before:bg-[repeating-linear-gradient(-45deg,var(--nb-lemon)_0_6px,var(--nb-surface)_6px_10px)]" aria-current="step">Artwork<span class="sr-only">, in progress</span></li><li class="grid gap-[.35rem] text-[.8rem] font-extrabold before:h-3.5 before:rounded-[4px] before:border-(length:--nb-bw) before:border-nb-line before:content-[''] before:bg-nb-surface">Publish</li></ol></div>
</article></section>
</div>

/* ── Neobrutalism UI kit tokens (uiCookies) — identical in every set ─────────────
   Thick ink borders, hard offset shadows and flat saturated fills on cream paper.
   Change a token and the whole kit follows; the border and shadow recipes below are built from them. */
:root{
  --nb-paper:#fff6e0;        /* page background, cream */
  --nb-surface:#ffffff;      /* card, field and button faces */
  --nb-ink:#111111;          /* text, 17.5:1 on paper */
  --nb-muted:#454036;        /* secondary text, 9.6:1 on paper */
  --nb-line:#111111;         /* border colour */
  --nb-bw:3px;               /* border width */
  --nb-shadow-x:4px;         /* hard shadow offset; pressed controls move this far into it */
  --nb-shadow-y:4px;
  --nb-shadow-color:#111111;
  --nb-radius:12px;          /* cards and panels */
  --nb-radius-sm:8px;        /* buttons and fields */
  --nb-focus:#1d4ed8;        /* dashed focus outline, 6.2:1 on paper, never the shadow */
  --nb-on-fill:#111111;      /* text on every palette fill below, 6.8:1 or more */
  --nb-on-fill-muted:#2b2822;/* secondary text on fills, 5.2:1 or more */
  --nb-lemon:#ffe14d;--nb-pink:#ff90d0;--nb-cyan:#62e2e8;--nb-lime:#b6f36a;
  --nb-orange:#ffa94d;--nb-violet:#b9a3ff;--nb-red:#ff6b6b;
  --nb-blue:#2448e0;--nb-on-blue:#ffffff; /* the only fill that takes white text, 6.8:1 */
  --nb-danger:#b42318;       /* destructive text, 6.1:1 on paper */
  --nb-font:"Space Grotesk","Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --nb-font-display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
}
/* Dark brutalism: data-nb="dark" on any wrapper, or a checked .nb-theme-input inside a [data-nb] element.
   :is() is a forgiving list, so browsers without :has() still apply data-nb="dark". Fills keep dark text. */
[data-nb]:is([data-nb="dark"],:has(.nb-theme-input:checked)){
  --nb-paper:#17150f;--nb-surface:#25221b;--nb-ink:#fbf3dc;--nb-muted:#d6ccb2;--nb-line:#fbf3dc;
  --nb-shadow-color:#fbf3dc;--nb-focus:#8db4ff;--nb-danger:#ff9b8f;color-scheme:dark}
/* More contrast requested: secondary text turns full ink */
@media (prefers-contrast:more){:root,[data-nb]:is([data-nb],:has(.nb-theme-input:checked)){--nb-muted:var(--nb-ink);--nb-on-fill-muted:var(--nb-on-fill)}}
:root,[data-nb]{
  --nb-border:var(--nb-bw) solid var(--nb-line);
  --nb-shadow:var(--nb-shadow-x) var(--nb-shadow-y) 0 0 var(--nb-shadow-color);
  --nb-shadow-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5) 0 0 var(--nb-shadow-color);
  --nb-shadow-lg:calc(var(--nb-shadow-x)*1.75) calc(var(--nb-shadow-y)*1.75) 0 0 var(--nb-shadow-color);
  --nb-shadow-hover:calc(var(--nb-shadow-x) + 2px) calc(var(--nb-shadow-y) + 2px) 0 0 var(--nb-shadow-color);
  --nb-press:var(--nb-shadow-x) var(--nb-shadow-y);                       /* translate for a pressed control */
  --nb-press-sm:calc(var(--nb-shadow-x)*.5) calc(var(--nb-shadow-y)*.5);  /* …for one with the small shadow */
}
[data-nb]{background:var(--nb-paper);color:var(--nb-ink);font-family:var(--nb-font)}
/* The tokens above, exposed as Tailwind utilities: bg-nb-paper, bg-nb-lemon, text-nb-ink, border-nb-line,
   shadow-nb, shadow-nb-sm, shadow-nb-lg, rounded-nb, rounded-nb-sm, font-nb, font-nb-display, outline-nb-focus… */
@theme inline {
  --color-nb-paper: var(--nb-paper); --color-nb-surface: var(--nb-surface); --color-nb-ink: var(--nb-ink);
  --color-nb-muted: var(--nb-muted); --color-nb-line: var(--nb-line); --color-nb-focus: var(--nb-focus);
  --color-nb-on-fill: var(--nb-on-fill); --color-nb-on-fill-muted: var(--nb-on-fill-muted);
  --color-nb-lemon: var(--nb-lemon); --color-nb-pink: var(--nb-pink); --color-nb-cyan: var(--nb-cyan); --color-nb-lime: var(--nb-lime);
  --color-nb-orange: var(--nb-orange); --color-nb-violet: var(--nb-violet); --color-nb-red: var(--nb-red);
  --color-nb-blue: var(--nb-blue); --color-nb-on-blue: var(--nb-on-blue); --color-nb-danger: var(--nb-danger);
  --shadow-nb: var(--nb-shadow); --shadow-nb-sm: var(--nb-shadow-sm); --shadow-nb-lg: var(--nb-shadow-lg); --shadow-nb-hover: var(--nb-shadow-hover);
  --radius-nb: var(--nb-radius); --radius-nb-sm: var(--nb-radius-sm);
  --font-nb: var(--nb-font); --font-nb-display: var(--nb-font-display);
}
/* Starburst sticker outline (Tailwind has no clip-path utility) */
@utility clip-nb-burst {
  clip-path: polygon(50% 0%,59.1% 16.1%,75% 6.7%,74.8% 25.2%,93.3% 25%,83.9% 40.9%,100% 50%,83.9% 59.1%,93.3% 75%,74.8% 74.8%,75% 93.3%,59.1% 83.9%,50% 100%,40.9% 83.9%,25% 93.3%,25.2% 74.8%,6.7% 75%,16.1% 59.1%,0% 50%,16.1% 40.9%,6.7% 25%,25.2% 25.2%,25% 6.7%,40.9% 16.1%);
}

// Seek bar: paint the WebKit fill and keep the visible time and aria-valuetext in step
document.querySelectorAll('[data-nb-seek]').forEach(function (r) {
  var now = document.querySelector('[data-nb-elapsed="' + r.id + '"]');
  function mmss(s) { return Math.floor(s / 60) + ':' + String(Math.floor(s % 60)).padStart(2, '0'); }
  function paint() {
    r.style.setProperty('--val', r.value / r.max * 100 + '%');
    r.setAttribute('aria-valuetext', mmss(r.value) + ' of ' + mmss(r.max));
    if (now) now.textContent = mmss(r.value);
  }
  r.addEventListener('input', paint); paint();
});