first commit

This commit is contained in:
Thiemo Tiziani committed 2026-10-18 20:05:42 +02:00
commit f931ca0423
20 files changed
+822

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 812 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 800 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 947 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

+231
View File
@@ -0,0 +1,231 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CDJ-900NXS Mods Docs</title>
<meta name="description" content="How to install the CDJ-900NXS mods and how each one works, including the hot cue keys: play, gate, set and delete.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header class="top">
<div class="wrap">
<a class="brand" href="index.html"><span class="disc" aria-hidden="true"></span><span>CDJ-900NXS Mods</span></a>
<nav class="tabs" aria-label="Sections">
<a href="index.html">Mods</a>
<a href="docs.html" aria-current="page">Docs</a>
</nav>
<button class="theme-btn" type="button" aria-label="Switch light / dark">☀</button>
</div>
</header>
<main class="wrap docs">
<nav class="toc" aria-label="On this page">
<div class="h">Start</div>
<a href="#install">Install</a>
<a href="#stock">Back to stock</a>
<div class="h">Mods</div>
<a href="#code">code</a>
<a href="#utility">utility</a>
<a href="#overview">overview</a>
<a href="#cuecolours">cuecolours</a>
<a href="#hotcuekeys">hotcuekeys</a>
<a href="#beatjump">beatjump</a>
<div class="h">Hot cue keys</div>
<a href="#hk-mode">The hot key mode</a>
<a href="#hk-play">Play a hot cue</a>
<a href="#hk-gate">Gate</a>
<a href="#hk-set">Set a hot cue</a>
<a href="#hk-delete">Delete a hot cue</a>
<a href="#hk-leds">The LEDs</a>
<a href="#hk-limits">Good to know</a>
<div class="h">More</div>
<a href="#status">Test status</a>
<a href="#faq">FAQ</a>
</nav>
<article class="prose">
<div class="eyebrow">Documentation</div>
<h1>Using the mods</h1>
<p>Everything you need to build the update, put it on your CDJ-900NXS and use each mod. The player must run the official firmware <strong>1.31</strong>; the patcher only accepts that update.</p>
<!-- ===================== install ===================== -->
<h2 id="install">Install</h2>
<ol>
<li>Get the official <code>C900NXS.UPD</code> for firmware 1.31 from Pioneer DJ. The patcher checks its SHA-256 and refuses any other file.</li>
<li>Run the patcher with Python 3. Tick the mods with the arrow keys and <kbd>Space</kbd>, build with <kbd>Enter</kbd>.
<div class="term"><span class="p">$</span> python cdj900nxs_patcher.py C900NXS.UPD</div>
Ticking a mod also ticks what it needs (<code>utility</code> needs <code>code</code>, <code>hotcuekeys</code> needs <code>cuecolours</code>); unticking one unticks what depends on it (<code>beatjump</code> needs <code>hotcuekeys</code>). <code>credit</code> (ticked at the start) makes the boot screen say <em>Pionope Mods by Givou</em> where it said <em>Ver 1.31</em>; untick it to keep the stock text.
</li>
<li>Read the disclaimer and type <code>yes</code> to accept it. Nothing is built without it.</li>
<li>The new file is written to <code>out/&lt;date&gt;-&lt;mods&gt;/C900NXS.UPD</code>, with a <code>report.txt</code> listing every check.</li>
<li>Copy <code>C900NXS.UPD</code> to the root of a FAT32 USB stick and run the update from the player as you would for an official update.</li>
</ol>
<div class="callout"><strong>What the patcher guarantees.</strong> Only the main application is replaced. The boot loader and recovery loader (flash 0x0–0x3FFFF), the S-record header and entry record, and the DRIV and PANL sections are copied from the original byte for byte and checked again on the finished file. The file is labelled 1.32 so that the player does not skip it as the version it already has; the player still reports 1.31.</div>
<p>Without a terminal that can read single keys, name the mods instead and accept the disclaimer with <code>--accept</code>:</p>
<div class="term"><span class="p">$</span> python cdj900nxs_patcher.py C900NXS.UPD --mods code,utility,overview,cuecolours,hotcuekeys --accept</div>
<h2 id="stock">Back to stock</h2>
<p>Build the original application, relabelled so the player accepts it, and update as above:</p>
<div class="term"><span class="p">$</span> python cdj900nxs_patcher.py C900NXS.UPD --stock</div>
<p>Keep this file on a stick before you try any mod.</p>
<!-- ===================== mods ===================== -->
<h2 id="code">code <span class="badge author">arnoldasr</span></h2>
<p>Three display changes tested together as one build: the detail waveform in RGB colours, the BPM shown with two decimals (stacked beside the tempo) and a two-line phase meter.</p>
<figure class="shot"><img src="assets/detail-mods.png" alt="RGB detail waveform"><figcaption>RGB detail waveform.</figcaption></figure>
<h2 id="utility">utility <span class="badge author">arnoldasr</span></h2>
<p>UTILITY › SLIP FLASHING becomes <strong>PHASE METER</strong>; its value chooses which phase meter is shown. Needs <code>code</code>.</p>
<figure class="shot"><img src="assets/utility-phase.png" alt="UTILITY with PHASE METER"><figcaption>UTILITY › PHASE METER.</figcaption></figure>
<h2 id="overview">overview <span class="badge author">arnoldasr</span></h2>
<p>The overview waveform's colour table becomes a red-to-white gradient. Data only, no code.</p>
<h2 id="cuecolours">cuecolours <span class="badge author">ours</span></h2>
<p>When a track is loaded the player asks its database for the cues. This mod also asks for the extended cue list (the one newer players read from rekordbox's export), which carries the colours and the hot cues.</p>
<ul>
<li><strong>Memory cues</strong> are drawn in the colour set in rekordbox, on the overview and on the detail waveform. A memory cue without a colour, or one stored on the player, stays red.</li>
<li><strong>Hot cues A–H</strong> are drawn as small boxes with their letter, in their rekordbox colour (green when none was set).</li>
</ul>
<figure class="shot"><img src="assets/hotcue-overview.png" alt="Overview with coloured memory cues and hot cues A to F"><figcaption>Coloured memory cues and hot cues A–F on the overview.</figcaption></figure>
<!-- ===================== hot cue keys ===================== -->
<h2 id="hotcuekeys">hotcuekeys <span class="badge author">ours</span></h2>
<p>The CDJ-900NXS has no hot cue pads. This mod lends it three: the top three <strong>BEAT DIVIDE</strong> keys left of the jog. It needs <code>cuecolours</code>, which reads the hot cues from your USB.</p>
<figure class="shot"><img src="assets/utility-hotcue.png" alt="UTILITY with HOT CUE KEYS"><figcaption>UTILITY › HOT CUE KEYS, the new last item.</figcaption></figure>
<h3 id="hk-mode">The hot key mode</h3>
<ol>
<li>Open <strong>UTILITY</strong> (hold <kbd>MENU</kbd>) and set <strong>HOT CUE KEYS</strong> to <strong>ON</strong>. The player remembers it.</li>
<li>Press <kbd>QUANTIZE</kbd> <strong>briefly</strong>: the hot key mode switches on, and a red <strong>HOT KEYS</strong> box appears beside the QUANTIZE label. Press briefly again to switch it off (the box turns grey).</li>
<li><strong>Hold</strong> <kbd>QUANTIZE</kbd> for about a second to switch quantize as usual.</li>
</ol>
<figure class="shot"><img src="assets/display-mods.png" alt="HOT KEYS box beside QUANTIZE"><figcaption>Hot key mode on: the red HOT KEYS box.</figcaption></figure>
<p>In the mode the BEAT DIVIDE keys are hot cues, top to bottom:</p>
<div class="keys">
<div><div class="b">A</div><div class="f">3/4</div></div>
<div><div class="b">B</div><div class="f">1/3</div></div>
<div><div class="b">C</div><div class="f">1/2</div></div>
<div><div class="b">–</div><div class="f">1/4</div></div>
<div><div class="b">–</div><div class="f">1/8</div></div>
</div>
<p>1/4 and 1/8 do nothing in the mode and stay dark: the player has three hot cue buffers, and A–C keep them, so each of the three starts at once.</p>
<p>With the mode off, or HOT CUE KEYS set to OFF, the keys do what they always did.</p>
<h3 id="hk-play">Play a hot cue</h3>
<p>Press the key <strong>briefly</strong>. The deck jumps to the hot cue and plays — also when it was paused.</p>
<h3 id="hk-gate">Gate</h3>
<p>Press the key and <strong>keep holding it</strong>. The deck jumps and starts playing at once, exactly as with a short press; nothing waits. When you let go:</p>
<ul>
<li>held <strong>less than 0.5 s</strong>: it simply plays on (a normal hot cue);</li>
<li>held <strong>0.5 s or longer</strong>: it jumps back to the hot cue and stands there, ready to go again.</li>
</ul>
<h3 id="hk-set">Set a hot cue</h3>
<p>On a key <strong>without</strong> a hot cue (LED off):</p>
<ol>
<li>Pause the deck at the place you want.</li>
<li>Hold the key for <strong>0.8 s</strong>. The hot cue is set there in green, its LED blinks twice and then stays dim, and the box appears on the waveforms.</li>
</ol>
<p>Keys that already have a hot cue are not overwritten — delete the old one first.</p>
<h3 id="hk-delete">Delete a hot cue</h3>
<ol>
<li><strong>Hold</strong> <kbd>DELETE</kbd> (beside MEMORY under the screen).</li>
<li>While holding it, <strong>press the hot cue key</strong>. Its LED blinks twice and goes off, and the box disappears from the waveforms. You can delete several keys while holding DELETE.</li>
<li>Let go of DELETE.</li>
</ol>
<div class="callout">While DELETE is held in the hot key mode, the deck does not see it, so no memory cue is lost. If you let go of DELETE <strong>without</strong> pressing a hot cue key, the press is passed on and DELETE deletes the called memory cue as always.</div>
<h3 id="hk-leds">The LEDs</h3>
<p>In the hot key mode the LEDs of 3/4, 1/3 and 1/2 show hot cues A–C; 1/4 and 1/8 are off (SLIP no longer changes them):</p>
<div class="leds">
<span class="led"><i></i> off — no hot cue</span>
<span class="led"><i class="dim"></i> dim — hot cue there</span>
<span class="led"><i class="blink"></i> two bright blinks — pressed, set or deleted</span>
</div>
<h3 id="hk-limits">Good to know</h3>
<ul>
<li><strong>Set and deleted hot cues are saved on the USB stick</strong>, in the track's rekordbox analysis files, the same way MEMORY and DELETE keep memory cues. Like MEMORY, this works once the track has settled, a few seconds after loading.</li>
<li><strong>A–C start at once.</strong> After a track is loaded, once the deck stands at its CUE point for a second in the hot key mode, hot cues A, B and C are loaded silently into the player's three hot cue buffers (about three seconds) and the deck goes back to its CUE point. If you press PLAY or CUE meanwhile, it waits for that (PLAY then plays); a hot cue key pressed meanwhile cuts it short and plays.</li>
<li>A hot cue you set later loads into its own buffer on its first press (about a second) and starts at once after that.</li>
<li>Hot cues D–H from rekordbox are shown on the waveforms but have no key.</li>
<li>A hot cue played from a buffer leaves the <strong>CUE point</strong> where it is. A gate's release stands at the hot cue; PLAY then plays from there.</li>
<li>A key pressed while a hot cue is still loading waits for it (the last key pressed wins).</li>
<li>No slip hot cues yet: with SLIP on, a hot cue plays as without SLIP.</li>
</ul>
<h2 id="beatjump">beatjump <span class="badge emu">emulator only</span></h2>
<p>With UTILITY › BEAT JUMP set to 1, 2, 4 or 8 (the item replaces SCREEN SAVER; the screen saver stays on), TRACK SEARCH <kbd>⏮</kbd> <kbd>⏭</kbd> jumps that many beats back or forward along the beat grid, keeping the position within the beat. OFF restores TRACK SEARCH.</p>
<ul>
<li><strong>While playing</strong>, the jump target is loaded into a buffer of the player that only beat jumps use, so hot cues A–C stay ready. There is a short silence while it loads, but the deck comes back <strong>in phase</strong>, as if it had played on through the jump: the load time is measured on every jump and allowed for, at the deck's tempo. The CUE point stays.</li>
<li><strong>Paused</strong>, the jump is a CALL: the deck and its CUE point move by that many beats.</li>
<li>A press while a jump or a hot cue is still loading is ignored, so loads never overlap.</li>
<li>A jump while a loop plays ends the loop; LOOP IN / OUT work again right after a jump.</li>
<li>Needs <code>hotcuekeys</code> (its engine makes the jumps); the HOT CUE KEYS item may stay OFF.</li>
</ul>
<div class="callout">Rebuilt: the first version jumped off the grid on a player and, after quick presses, reported a corrupted file. The new one has only run in the emulator so far; please report how it behaves on a player.</div>
<!-- ===================== status ===================== -->
<h2 id="ledsaver">ledsaver <span class="badge emu">emulator only</span></h2>
<p>UTILITY › <strong>LED ANIMATION</strong> (the last item) is <strong>ON</strong> from the first start; set it to OFF to switch it off (the player keeps the choice). When the player's own screen saver dims the display (5 minutes without a track loaded, or 100 minutes paused or at the cue), the LEDs play a loop of about three seconds:</p>
<ul>
<li>the BEAT DIVIDE keys fade in a wave from top to bottom and back up,</li>
<li>SYNC and MASTER, MASTER TEMPO and DISC EJECT fade in and out against each other,</li>
<li>CUE, PLAY, REV, SLIP, the SLIP LOOP bar and RELOOP/EXIT light one after another,</li>
<li>the jog's three rings light in turn: inner, middle, outer, middle, inner …</li>
</ul>
<p>Any key ends it, as it ends the screen saver. The keys without levels (CUE, PLAY …) can only switch on and off; the rings too.</p>
<h2 id="status">Test status</h2>
<div class="table-wrap">
<table>
<thead><tr><th>Mod</th><th>By</th><th>Status</th></tr></thead>
<tbody>
<tr><td><code>code</code></td><td>arnoldasr</td><td><span class="badge ok">ran on a player</span></td></tr>
<tr><td><code>utility</code></td><td>arnoldasr</td><td><span class="badge ok">ran on a player</span></td></tr>
<tr><td><code>overview</code></td><td>arnoldasr</td><td><span class="badge ok">ran on a player</span></td></tr>
<tr><td><code>cuecolours</code></td><td>ours</td><td><span class="badge ok">ran on a player</span></td></tr>
<tr><td><code>hotcuekeys</code></td><td>ours</td><td><span class="badge warn">partly tested</span> mode, HOT KEYS box and LEDs on a player; the hot cue buffers (A–C at once), gate, set and delete in the emulator</td></tr>
<tr><td><code>beatjump</code></td><td>ours</td><td><span class="badge emu">emulator only</span> rebuilt on the hot cue engine</td></tr>
<tr><td><code>ledsaver</code></td><td>ours</td><td><span class="badge emu">emulator only</span> LED map from the LED tests on a player</td></tr>
<tr><td><code>credit</code></td><td>ours</td><td><span class="badge emu">emulator only</span> boot screen text (ticked at the start, can be unticked)</td></tr>
</tbody>
</table>
</div>
<h2 id="faq">FAQ</h2>
<h3>Does this touch the boot loader?</h3>
<p>No. The patcher copies the boot loader and recovery loader from the official file byte for byte and checks them again before writing. Only the main application changes.</p>
<h3>Can I go back?</h3>
<p>Yes, build <code>--stock</code> and run the update. Keep that file ready before flashing mods.</p>
<h3>Do I need rekordbox?</h3>
<p>Cue colours and hot cues come from a USB stick exported with rekordbox. Without them the mods show what the stock player shows.</p>
<h3>Why is the version still 1.31?</h3>
<p>The update file says 1.32 so the player installs it; the application inside still reports 1.31 (in UTILITY and on the LINK screen). Only the boot screen says <em>Pionope Mods by Givou</em> instead of <em>Ver 1.31</em>.</p>
</article>
</main>
<footer>
<div class="wrap cols">
<div>
<div class="ai"><span class="dot"></span>Made with Claude Code · Claude Opus 5.5</div>
<p>This website, the mods <code>beatjump</code>, <code>cuecolours</code> and <code>hotcuekeys</code>, and the patcher were developed with Claude Code (Anthropic's AI coding assistant, model Claude Opus 5.5), by reverse engineering the firmware in an emulator. The mods <code>code</code>, <code>utility</code> and <code>overview</code> are by <a href="https://github.com/arnoldasr/cdj900nxs">arnoldasr</a>.</p>
</div>
<div>
<h4>Disclaimer</h4>
<p>Unofficial. Not affiliated with or endorsed by Pioneer DJ or AlphaTheta; CDJ and rekordbox are their trademarks. Flashing modified firmware can leave your player unusable. Everything here is provided as is, without warranty, and used at your own risk.</p>
</div>
</div>
</footer>
</body>
</html>
+250
View File
@@ -0,0 +1,250 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CDJ-900NXS Mods</title>
<meta name="description" content="Firmware mods for the Pioneer CDJ-900NXS (firmware 1.31): RGB waveform, cue colours, hot cues on the beat divide keys and more — compared with stock.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header class="top">
<div class="wrap">
<a class="brand" href="index.html"><span class="disc" aria-hidden="true"></span><span>CDJ-900NXS Mods</span></a>
<nav class="tabs" aria-label="Sections">
<a href="index.html" aria-current="page">Mods</a>
<a href="docs.html">Docs</a>
</nav>
<button class="theme-btn" type="button" aria-label="Switch light / dark">☀</button>
</div>
</header>
<main>
<div class="hero">
<div class="wrap">
<div class="eyebrow">Pioneer CDJ-900NXS · firmware 1.31</div>
<h1>New tricks for an <span class="grad">old favourite</span>.</h1>
<p class="lead">
A set of firmware mods that bring features of newer players to the CDJ-900NXS:
an RGB waveform, rekordbox cue colours, visible hot cues and
<strong>hot cues you can play from the deck itself</strong>. Built into the player's own
update file by a patcher that leaves the boot loader untouched.
</p>
<div class="cta">
<a class="btn primary" href="#mods">See the mods</a>
<a class="btn" href="docs.html#install">How to install</a>
<a class="btn" href="docs.html#hotcuekeys">Hot cue guide</a>
</div>
<div class="compare" style="--pos:50%">
<img src="assets/stock-full.png" alt="Stock CDJ-900NXS screen: blue waveform, red memory cues, no hot cues">
<img class="after" src="assets/mods-full.png" alt="Modded screen: RGB waveform, coloured cues, hot cues A to F, HOT KEYS box">
<span class="tag l">Stock 1.31</span>
<span class="tag r">Modded</span>
<span class="handle" aria-hidden="true"></span>
<input type="range" min="0" max="100" value="50" aria-label="Drag to compare stock and modded screen">
</div>
<div class="caption">Same track, same position (2:13 into “Webra – Jumbled”). Drag to compare. Screens taken in the CDJ-900NXS emulator the mods were developed in.</div>
</div>
</div>
<section>
<div class="wrap">
<div class="strip">
<div class="tile"><div class="n">6</div><div class="t">mods, pick the ones you want</div></div>
<div class="tile"><div class="n">A–C</div><div class="t">hot cues on the BEAT DIVIDE keys, at once</div></div>
<div class="tile"><div class="n">0 bytes</div><div class="t">changed in the boot loader and recovery</div></div>
<div class="tile"><div class="n">1 file</div><div class="t">a normal <code>C900NXS.UPD</code> for the player's USB update</div></div>
</div>
</div>
</section>
<section id="mods">
<div class="wrap">
<h2 class="section-title">The mods</h2>
<p class="section-sub">Each one compared with stock. Three are by <a href="https://github.com/arnoldasr/cdj900nxs">arnoldasr</a>, three are ours. Choose any combination in the patcher.</p>
<div class="legend">
<span class="badge ok">ran on a player</span>
<span class="badge emu">emulator only</span>
<span class="badge warn">partly tested</span>
<span class="badge bad">known faults</span>
</div>
<div class="grid">
<!-- code -->
<article class="card">
<div class="card-head">
<div class="icon" aria-hidden="true">🌈</div>
<div>
<h3>RGB waveform, BPM &amp; phase meter <code>code</code></h3>
<div class="by">by arnoldasr</div>
</div>
<div class="badges"><span class="badge ok">ran on a player</span></div>
</div>
<p>The detail waveform in RGB colours, as on newer Pioneer players, instead of plain blue. Plus the BPM with two decimals and a two-line phase meter.</p>
<div class="vs">
<figure><img src="assets/detail-stock.png" alt="Stock blue detail waveform"><figcaption>Stock</figcaption></figure>
<figure class="mod"><img src="assets/detail-mods.png" alt="RGB detail waveform"><figcaption>Modded</figcaption></figure>
</div>
<div class="vs">
<figure><img src="assets/bpm-stock.png" alt="Stock BPM 145.0"><figcaption>BPM · stock</figcaption></figure>
<figure class="mod"><img src="assets/bpm-mods.png" alt="BPM with two decimals"><figcaption>BPM · two decimals</figcaption></figure>
</div>
<ul class="diff">
<li><span class="k">Stock</span><span>Blue waveform, BPM to one decimal, phase meter as four boxes.</span></li>
<li><span class="k new">Modded</span><span>RGB waveform, BPM to two decimals (stacked), phase meter on two lines.</span></li>
</ul>
</article>
<!-- utility -->
<article class="card">
<div class="card-head">
<div class="icon" aria-hidden="true">🎚️</div>
<div>
<h3>Phase meter switch <code>utility</code></h3>
<div class="by">by arnoldasr · needs <code>code</code></div>
</div>
<div class="badges"><span class="badge ok">ran on a player</span></div>
</div>
<p>Choose the phase meter in UTILITY. The rarely used SLIP FLASHING item becomes PHASE METER.</p>
<div class="vs">
<figure><img src="assets/phase-stock.png" alt="Stock phase meter: four boxes"><figcaption>Phase meter · stock</figcaption></figure>
<figure class="mod"><img src="assets/phase-mods.png" alt="Two-line phase meter"><figcaption>Phase meter · two lines</figcaption></figure>
</div>
<div class="vs stack">
<figure class="mod"><img src="assets/utility-phase.png" alt="UTILITY menu with PHASE METER item"><figcaption>UTILITY › PHASE METER</figcaption></figure>
</div>
<ul class="diff">
<li><span class="k">Stock</span><span>UTILITY › SLIP FLASHING.</span></li>
<li><span class="k new">Modded</span><span>UTILITY › PHASE METER picks the meter.</span></li>
</ul>
</article>
<!-- overview -->
<article class="card">
<div class="card-head">
<div class="icon" aria-hidden="true">🔥</div>
<div>
<h3>Overview colour gradient <code>overview</code></h3>
<div class="by">by arnoldasr</div>
</div>
<div class="badges"><span class="badge ok">ran on a player</span></div>
</div>
<p>The whole-track overview at the bottom of the screen gets a warm red-to-white colour gradient instead of flat blue, so drops and breaks stand out.</p>
<div class="vs stack">
<figure><img src="assets/overview-stock.png" alt="Stock blue overview waveform"><figcaption>Stock</figcaption></figure>
<figure class="mod"><img src="assets/overview-mods.png" alt="Gradient overview waveform with coloured cues and hot cues"><figcaption>Modded (with cue colours and hot cues)</figcaption></figure>
</div>
<ul class="diff">
<li><span class="k">Stock</span><span>Flat blue overview.</span></li>
<li><span class="k new">Modded</span><span>Red-to-white gradient.</span></li>
</ul>
</article>
<!-- cuecolours -->
<article class="card">
<div class="card-head">
<div class="icon" aria-hidden="true">🎯</div>
<div>
<h3>Cue colours &amp; hot cues shown <code>cuecolours</code></h3>
<div class="by">ours · made with Claude Code</div>
</div>
<div class="badges"><span class="badge ok">ran on a player</span></div>
</div>
<p>Memory cues take the colour you gave them in rekordbox. The hot cues stored on the USB (A–H) appear as lettered boxes in their rekordbox colour on the overview and the detail waveform — the stock 900NXS ignores them completely.</p>
<div class="vs">
<figure><img src="assets/detail-stock.png" alt="Stock: red memory triangles only"><figcaption>Stock</figcaption></figure>
<figure class="mod"><img src="assets/hotcue-detail.png" alt="Hot cue A box on the detail waveform"><figcaption>Hot cue A on the waveform</figcaption></figure>
</div>
<ul class="diff">
<li><span class="k">Stock</span><span>Every memory cue a red triangle; hot cues not shown.</span></li>
<li><span class="k new">Modded</span><span>Memory cues in rekordbox colours; hot cues as coloured A–H boxes.</span></li>
</ul>
<a class="more" href="docs.html#cuecolours">Read more →</a>
</article>
<!-- hotcuekeys -->
<article class="card">
<div class="card-head">
<div class="icon" aria-hidden="true">⚡</div>
<div>
<h3>Hot cue keys <code>hotcuekeys</code></h3>
<div class="by">ours · made with Claude Code · needs <code>cuecolours</code></div>
</div>
<div class="badges"><span class="badge warn">partly tested</span></div>
</div>
<p>Play your rekordbox hot cues on the deck. A short press of QUANTIZE switches the hot key mode; the top three BEAT DIVIDE keys become hot cues A–C, ready to start at once. Press to jump and play, hold for a gate, set new ones while paused and delete them with DELETE. The key LEDs show which hot cues exist.</p>
<div class="vs">
<figure><img src="assets/display-stock.png" alt="Stock: QUANTIZE label only"><figcaption>Stock</figcaption></figure>
<figure class="mod"><img src="assets/display-mods.png" alt="HOT KEYS box beside QUANTIZE"><figcaption>HOT KEYS mode on</figcaption></figure>
</div>
<div class="vs stack">
<figure class="mod"><img src="assets/utility-hotcue.png" alt="UTILITY menu with BEAT JUMP and HOT CUE KEYS items"><figcaption>UTILITY › HOT CUE KEYS</figcaption></figure>
</div>
<ul class="diff">
<li><span class="k">Stock</span><span>No hot cues on the 900NXS; BEAT DIVIDE keys only for loops.</span></li>
<li><span class="k new">Modded</span><span>Hot cue mode: play, gate, set, delete on the BEAT DIVIDE keys; QUANTIZE still works when held.</span></li>
</ul>
<a class="more" href="docs.html#hotcuekeys">Hot cue guide →</a>
</article>
<!-- beatjump -->
<article class="card">
<div class="card-head">
<div class="icon" aria-hidden="true">⏭️</div>
<div>
<h3>Beat jump <code>beatjump</code></h3>
<div class="by">ours · made with Claude Code</div>
</div>
<div class="badges"><span class="badge emu">emulator only</span></div>
</div>
<p>TRACK SEARCH jumps 1, 2, 4 or 8 beats along the beat grid instead of changing the track, set in UTILITY › BEAT JUMP (which replaces SCREEN SAVER).</p>
<ul class="diff">
<li><span class="k">Stock</span><span>TRACK SEARCH changes the track; UTILITY › SCREEN SAVER.</span></li>
<li><span class="k new">Modded</span><span>TRACK SEARCH jumps beats; UTILITY › BEAT JUMP OFF / 1 / 2 / 4 / 8.</span></li>
</ul>
<div class="callout" style="margin:0"><strong>Rebuilt.</strong> Jumps while playing go through a buffer of their own and come back in phase; the CUE point and hot cues A–C stay. Needs <code>hotcuekeys</code>. Tested in the emulator only.</div>
</article>
</div>
</div>
</section>
<section id="patcher">
<div class="wrap">
<h2 class="section-title">One patcher, your choice</h2>
<p class="section-sub">The patcher takes the official 1.31 update, adds the mods you tick and writes a new <code>C900NXS.UPD</code>. Only the main application changes; the boot loader, the recovery loader and the other sections are copied byte for byte and checked again before the file is written.</p>
<div class="term"><span class="c"># pick the mods in a list</span>
<span class="p">$</span> python cdj900nxs_patcher.py C900NXS.UPD
<span class="c"># or name them</span>
<span class="p">$</span> python cdj900nxs_patcher.py C900NXS.UPD --mods code,utility,overview,cuecolours,hotcuekeys
<span class="c"># back to stock</span>
<span class="p">$</span> python cdj900nxs_patcher.py C900NXS.UPD --stock</div>
<p class="caption">Before it builds, the patcher shows a disclaimer that you must accept. <a href="docs.html#install">Full install guide →</a></p>
</div>
</section>
</main>
<footer>
<div class="wrap cols">
<div>
<div class="ai"><span class="dot"></span>Made with Claude Code · Claude Opus 5.5</div>
<p>This website, the mods <code>beatjump</code>, <code>cuecolours</code> and <code>hotcuekeys</code>, and the patcher were developed with Claude Code (Anthropic's AI coding assistant, model Claude Opus 5.5), by reverse engineering the firmware in an emulator. The mods <code>code</code>, <code>utility</code> and <code>overview</code> are by <a href="https://github.com/arnoldasr/cdj900nxs">arnoldasr</a>.</p>
</div>
<div>
<h4>Disclaimer</h4>
<p>Unofficial. Not affiliated with or endorsed by Pioneer DJ or AlphaTheta; CDJ and rekordbox are their trademarks. Flashing modified firmware can leave your player unusable. Everything here is provided as is, without warranty, and used at your own risk.</p>
</div>
</div>
</footer>
</body>
</html>
+52
View File
@@ -0,0 +1,52 @@
// CDJ-900NXS Mods — small helpers: theme toggle, before/after slider, docs TOC highlight.
(function () {
var root = document.documentElement;
function storedTheme() {
try { return localStorage.getItem('theme'); } catch (e) { return null; }
}
var t = storedTheme();
if (t === 'light' || t === 'dark') root.setAttribute('data-theme', t);
document.addEventListener('DOMContentLoaded', function () {
var btn = document.querySelector('.theme-btn');
function label() {
if (btn) btn.textContent = root.getAttribute('data-theme') === 'light' ? '☾' : '☀';
}
label();
if (btn) btn.addEventListener('click', function () {
var next = root.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
root.setAttribute('data-theme', next);
try { localStorage.setItem('theme', next); } catch (e) { /* private mode */ }
label();
});
// before / after
document.querySelectorAll('.compare').forEach(function (box) {
var range = box.querySelector('input[type="range"]');
if (!range) return;
function set() { box.style.setProperty('--pos', range.value + '%'); }
range.addEventListener('input', set);
set();
});
// docs: highlight the section in view
var links = Array.prototype.slice.call(document.querySelectorAll('.toc a[href^="#"]'));
if (links.length && 'IntersectionObserver' in window) {
var byId = {};
links.forEach(function (a) { byId[a.getAttribute('href').slice(1)] = a; });
var obs = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting && byId[e.target.id]) {
links.forEach(function (a) { a.classList.remove('active'); });
byId[e.target.id].classList.add('active');
}
});
}, { rootMargin: '-80px 0px -70% 0px' });
Object.keys(byId).forEach(function (id) {
var el = document.getElementById(id);
if (el) obs.observe(el);
});
}
});
})();
+289
View File
@@ -0,0 +1,289 @@
/* CDJ-900NXS Mods — shared styles */
:root {
--bg: #0b0d12;
--bg-2: #11141b;
--card: #151922;
--card-2: #1b2030;
--line: #262c3b;
--text: #e8ebf2;
--muted: #98a1b6;
--faint: #6b7489;
--accent: #ff5a1f; /* the deck's orange */
--accent-2: #2fd3ff; /* the deck's cyan */
--ok: #3ddc84;
--warn: #ffb020;
--bad: #ff4d5e;
--radius: 16px;
--shadow: 0 10px 40px rgba(0, 0, 0, .35);
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
color-scheme: dark;
}
:root[data-theme="light"] {
--bg: #f5f6fa;
--bg-2: #eceef4;
--card: #ffffff;
--card-2: #f3f4f8;
--line: #dde1ea;
--text: #141821;
--muted: #545d70;
--faint: #7c8598;
--shadow: 0 10px 30px rgba(20, 24, 33, .08);
color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 16px/1.6 var(--sans);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd { font-family: var(--mono); font-size: .88em; }
code { background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; padding: .08em .4em; }
kbd {
display: inline-block; min-width: 1.6em; text-align: center;
background: var(--card-2); border: 1px solid var(--line); border-bottom-width: 3px;
border-radius: 7px; padding: .05em .45em; font-weight: 600;
}
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
/* ---- header ---- */
.top {
position: sticky; top: 0; z-index: 20;
backdrop-filter: blur(14px);
background: color-mix(in srgb, var(--bg) 80%, transparent);
border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand .disc {
width: 30px; height: 30px; border-radius: 50%;
background: conic-gradient(from 0deg, var(--accent), #ffb020, var(--accent-2), #7a5cff, var(--accent));
box-shadow: inset 0 0 0 7px var(--bg), inset 0 0 0 9px var(--line);
}
.tabs { display: flex; gap: 4px; margin-left: auto; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.tabs a {
color: var(--muted); padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: .95rem;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current="page"] { background: var(--accent); color: #fff; }
.theme-btn {
border: 1px solid var(--line); background: var(--card); color: var(--muted);
width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1rem;
}
.theme-btn:hover { color: var(--text); }
/* ---- hero ---- */
.hero { padding: 72px 0 40px; position: relative; overflow: hidden; }
.hero::before {
content: ""; position: absolute; inset: -40% -10% auto; height: 520px; z-index: -1;
background:
radial-gradient(closest-side at 25% 50%, color-mix(in srgb, var(--accent) 28%, transparent), transparent),
radial-gradient(closest-side at 75% 40%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent);
filter: blur(20px);
}
.eyebrow { font: 600 .8rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.05; letter-spacing: -.03em; margin: 14px 0 16px; }
.hero h1 .grad {
background: linear-gradient(90deg, var(--accent), #ffb020 45%, var(--accent-2));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 1.15rem; color: var(--muted); max-width: 720px; margin: 0 0 24px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 12px;
font-weight: 700; border: 1px solid var(--line); color: var(--text); background: var(--card);
}
.btn:hover { text-decoration: none; border-color: var(--faint); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
/* ---- before / after slider ---- */
.compare {
margin-top: 40px; position: relative; border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--line); box-shadow: var(--shadow); background: #000;
aspect-ratio: 800 / 480; user-select: none; touch-action: pan-y;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.compare .after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare .handle {
position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff;
transform: translateX(-1px); pointer-events: none;
}
.compare .handle::after {
content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
background: #fff; color: #111; font: 700 .8rem/1 var(--sans); padding: 9px 10px; border-radius: 999px;
box-shadow: 0 4px 16px rgba(0,0,0,.4); white-space: nowrap;
}
.compare .tag {
position: absolute; top: 12px; font: 700 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
padding: 6px 9px; border-radius: 8px; background: rgba(0,0,0,.65); color: #fff; pointer-events: none;
}
.compare .tag.l { left: 12px; }
.compare .tag.r { right: 12px; background: var(--accent); }
.compare input[type="range"] {
position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0;
}
.caption { color: var(--faint); font-size: .85rem; margin-top: 10px; }
/* ---- sections ---- */
section { padding: 56px 0; }
h2.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; margin: 0 0 8px; }
p.section-sub { color: var(--muted); margin: 0 0 32px; max-width: 760px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
/* ---- mod cards ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 22px; }
.card {
background: linear-gradient(180deg, var(--card), var(--bg-2));
border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px;
transition: transform .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card-head { display: flex; align-items: flex-start; gap: 14px; }
.card-head .icon {
flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem;
background: color-mix(in srgb, var(--accent) 16%, var(--card-2)); border: 1px solid var(--line);
}
.card h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.01em; }
.card h3 code { font-size: .8rem; margin-left: 6px; vertical-align: middle; color: var(--muted); }
.card .by { color: var(--faint); font-size: .85rem; margin-top: 2px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; justify-content: flex-end; }
.badge {
font: 700 .68rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
padding: 6px 8px; border-radius: 7px; border: 1px solid currentColor; white-space: nowrap;
}
.badge.ok { color: var(--ok); }
.badge.emu { color: var(--accent-2); }
.badge.warn { color: var(--warn); }
.badge.bad { color: var(--bad); }
.badge.author { color: var(--muted); }
.card p { margin: 0; color: var(--muted); }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vs.stack { grid-template-columns: 1fr; }
.vs figure { margin: 0; background: #000; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.vs figure img { width: 100%; image-rendering: pixelated; }
.vs figcaption {
font: 700 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
padding: 8px 10px; color: #c9cfdb; background: #0d1017; border-top: 1px solid #1f2533;
}
.vs figure.mod figcaption { color: #fff; background: color-mix(in srgb, var(--accent) 70%, #000); }
.diff { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.diff li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: baseline; font-size: .95rem; }
.diff .k { font: 700 .68rem/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.diff .k.new { color: var(--accent); }
.card .more { margin-top: auto; font-weight: 700; font-size: .92rem; }
/* ---- feature strip ---- */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.tile .n { font: 800 1.8rem/1 var(--sans); letter-spacing: -.02em; }
.tile .t { color: var(--muted); font-size: .92rem; margin-top: 6px; }
/* ---- terminal ---- */
.term {
background: #07090d; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
font: 14px/1.7 var(--mono); color: #d7deea; overflow-x: auto; white-space: pre;
}
.term .c { color: #6b7489; }
.term .p { color: var(--accent); }
/* ---- docs layout ---- */
.docs { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding: 40px 0 72px; }
.toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; }
.toc .h { font: 700 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }
.toc a { display: block; color: var(--muted); padding: 5px 12px; border-left: 2px solid var(--line); font-size: .93rem; }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.active { color: var(--text); border-left-color: var(--accent); }
.prose { min-width: 0; }
.prose h1 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.03em; margin: 0 0 10px; }
.prose h2 {
font-size: 1.6rem; letter-spacing: -.02em; margin: 56px 0 12px; padding-top: 8px;
scroll-margin-top: 84px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.prose h3 { font-size: 1.15rem; margin: 30px 0 8px; scroll-margin-top: 84px; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 4px 0; }
.prose .shot { margin: 18px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #000; }
.prose .shot img { width: 100%; image-rendering: pixelated; }
.prose .shot figcaption { font-size: .82rem; color: var(--faint); padding: 8px 12px; background: var(--card); border-top: 1px solid var(--line); }
.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .94rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 700 .72rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); background: var(--card); }
tr:last-child td { border-bottom: 0; }
td { color: var(--muted); }
td:first-child { color: var(--text); white-space: nowrap; }
.callout {
border: 1px solid var(--line); border-left: 4px solid var(--accent-2); background: var(--card);
border-radius: 12px; padding: 14px 16px; margin: 18px 0; color: var(--muted);
}
.callout.warn { border-left-color: var(--warn); }
.callout.bad { border-left-color: var(--bad); }
.callout strong { color: var(--text); }
.keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 16px 0; max-width: 520px; }
.keys > div {
background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px; text-align: center;
}
.keys .b { font: 800 1.4rem/1 var(--sans); color: var(--accent); }
.keys .f { font: 600 .78rem/1 var(--mono); color: var(--faint); margin-top: 6px; }
.leds { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0; }
.led { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .92rem; }
.led i { width: 26px; height: 12px; border-radius: 4px; background: #2a2f3a; border: 1px solid #3a4150; display: inline-block; }
.led i.dim { background: #6b3a12; box-shadow: 0 0 6px rgba(255, 120, 30, .25); }
.led i.bright { background: #ff8a2a; box-shadow: 0 0 14px rgba(255, 138, 42, .8); }
.led i.blink { animation: blink 1.2s steps(1) infinite; }
@keyframes blink {
0%, 16% { background: #ff8a2a; box-shadow: 0 0 14px rgba(255,138,42,.8); }
17%, 33% { background: #6b3a12; box-shadow: none; }
34%, 50% { background: #ff8a2a; box-shadow: 0 0 14px rgba(255,138,42,.8); }
51%, 100% { background: #6b3a12; box-shadow: none; }
}
/* ---- footer ---- */
footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 36px 0 44px; margin-top: 20px; }
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; }
footer h4 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-family: var(--mono); }
footer p { margin: 0 0 10px; color: var(--muted); font-size: .9rem; }
footer .ai {
display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text);
border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; margin-bottom: 12px; background: var(--card);
}
footer .ai .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (max-width: 860px) {
.docs { grid-template-columns: 1fr; gap: 10px; }
.toc { position: static; max-height: none; display: none; }
footer .cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.top .wrap { gap: 10px; }
.brand span:not(.disc) { display: none; }
.tabs a { padding: 6px 12px; }
.hero { padding: 44px 0 24px; }
.vs { grid-template-columns: 1fr; }
.card-head { flex-wrap: wrap; }
.badges { margin-left: 0; justify-content: flex-start; width: 100%; }
.keys { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.keys .b { font-size: 1.1rem; }
.diff li { grid-template-columns: 1fr; gap: 0; }
}