Editing R&R CRDD

<div class="faction-skipper">
<html>
<!-- HEADER SECTION (Inside HTML for the image) -->
<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
    <!-- FIXED IMAGE: Added width constraint in style so it can't blow up -->
    <img src="https://files.catbox.moe/8gs8n5.png" 
         style="width: 100px; height: auto; filter: drop-shadow(0 0 5px #21b0cd);">
    
    <div>
        <h1 style="margin: 0; color: #21b0cd; font-family: monospace; font-size: 1.8em; line-height: 1.2;">Rescue & Removal Corps’ Rating Detection Device</h1>
        <small style="color: #888; font-size: 0.8em;">CORPS RATING DETECTION DEVICE // V.1.0.4</small>
    </div>
</div>
</html>

Welcome! So, it’s your first time out there on the field, and you really need to figure out the up’s and down’s of a Seam. Not only that, your teammates are relying on you to do it right (and not break anything)! There’s so many things to keep track of, how’s one to do it all by their lonesome?! Fear not, fellow Surveyor, we at the R&R Corps worked hard with the rest of the W.S.G. to make everyone’s jobs easier with… the R&RC RDD! Or… the R&R CRDD…? Just call it the CRDD! Unsure what that stands for? Look at the header of this entry…

== What is the CRDD? ==
Our Corps’ Rating Detection Device is a nifty little machine that combines the permanence skills of the Stills with the contract-magic (and money) of the Dealers and the secret know-how of us Skippers! It’s designed to… think of it like a calculator that does the hard part of CORRECTLY rating a Seam for you! All you have to do is put in the numbers, scan the stuff, and send it over to the others. Easy, right?

Everyone’s supposed to be issued one, but so far only the R&R have it, all the more reason to stick together, eh? Seriously, don’t lose this.

== How does the CRDD work? ==

Glad you asked! Not really, it’s a little complicated, so our best guys dumbed it down so even the new recruits (from any faction!) can get it, if they tried. Basically, the device’ll ask you a bunch of questions about the Stables—Subjects we mean, we call ‘em Stables—in a Seam, and then questions about the Items, and then about the Seam itself! That’s it! As it calculates, it’ll update in real time, telling you what it thinks the Rating is so far.

Afterwards, it’ll calculate the rest to tell you the estimated Rating of the Seam you’re in. Isn’t that neat? You can also use it to get the individual estimates of Items and Subjects too, since that’s kinda baked in too.

Don’t know what a Subject or Seam is? You’re in the wrong place. But if you do, great, give it a go! As homework away from home, go somewhere and figure out its Stability Rating. We believe in you!

We even added sliders, it’s really intuitive. Revolutionary stuff. 

== CRDD Calculator ==
<html>
<!-- CALCULATOR START -->
<div id="crdd-interface">
    <div class="crdd-header">
        SYSTEM ONLINE // CONNECTED<br>
        USER: GUEST SURVEYOR
    </div>

    <!-- SECTION 1: SUBJECT -->
    <div class="crdd-section">
        <div class="crdd-section-title">1 / 3 SUBJECT INFO</div>
        <label class="crdd-skip-label"><input type="checkbox" id="skip-subject"> SKIP THIS SECTION (Data will be excluded)</label>

        <div class="crdd-input-group"><label>Strength</label><input type="range" class="crdd-range" id="s-strength" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Durability</label><input type="range" class="crdd-range" id="s-durability" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Mobility</label><input type="range" class="crdd-range" id="s-mobility" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Intelligence</label><input type="range" class="crdd-range" id="s-intel" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Stamina</label><input type="range" class="crdd-range" id="s-stamina" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label style="color: #ff4500;">THREAT INDEX</label><input type="range" class="crdd-range" id="s-threat" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Swarm Qty</label><input type="range" class="crdd-range" id="s-swarm" max="33" value="0"><span class="crdd-value-display">0</span></div>
        
        <div style="text-align: right; margin-top: 10px; border-top: 1px solid #333; padding-top: 5px;">
            ESTIMATED BEHAVIOR: <span id="result-subject" style="color:#fff; font-weight:bold;">0.0 (DOCILE)</span>
        </div>
    </div>

    <!-- SECTION 2: ITEM -->
    <div class="crdd-section">
        <div class="crdd-section-title">2 / 3 ITEM INFO</div>
        <label class="crdd-skip-label"><input type="checkbox" id="skip-item"> SKIP THIS SECTION</label>

        <div class="crdd-input-group"><label>Entropy</label><input type="range" class="crdd-range" id="i-entropy" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Instability</label><input type="range" class="crdd-range" id="i-instability" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Radiation</label><input type="range" class="crdd-range" id="i-radiation" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Corruptivity</label><input type="range" class="crdd-range" id="i-corrupt" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Volatility</label><input type="range" class="crdd-range" id="i-volatility" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Unportability</label><input type="range" class="crdd-range" id="i-unport" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label style="color: #ff4500;">ANOMALOUS PROP.</label><input type="range" class="crdd-range" id="i-anomalous" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Quantity</label><input type="range" class="crdd-range" id="i-qty" max="33" value="0"><span class="crdd-value-display">0</span></div>

        <div style="text-align: right; margin-top: 10px; border-top: 1px solid #333; padding-top: 5px;">
            ESTIMATED UTILITY: <span id="result-item" style="color:#fff; font-weight:bold;">0.0 (FUNCTIONAL)</span>
        </div>
    </div>

    <!-- SECTION 3: SEAM -->
    <div class="crdd-section">
        <div class="crdd-section-title">3 / 3 SEAM INFO</div>
        <label class="crdd-skip-label"><input type="checkbox" id="skip-seam"> SKIP THIS SECTION</label>

        <div class="crdd-input-group"><label>Instability</label><input type="range" class="crdd-range" id="m-instability" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Leakage</label><input type="range" class="crdd-range" id="m-leakage" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label style="color: #ff4500;">GEOMETRIC VIOL.</label><input type="range" class="crdd-range" id="m-geo" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label style="color: #ff4500;">TOXICITY</label><input type="range" class="crdd-range" id="m-atmo" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label>Topo Hazards</label><input type="range" class="crdd-range" id="m-topo" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label style="color: #ff4500;">DEAD ENDS</label><input type="range" class="crdd-range" id="m-dead" max="33" value="0"><span class="crdd-value-display">0</span></div>
        <div class="crdd-input-group"><label style="color: #ff4500;">BROKEN LAWS</label><input type="range" class="crdd-range" id="m-laws" max="33" value="0"><span class="crdd-value-display">0</span></div>

        <div style="text-align: right; margin-top: 10px; border-top: 1px solid #333; padding-top: 5px;">
            ESTIMATED STABILITY: <span id="result-seam" style="color:#fff; font-weight:bold;">0.0 (ANCHORED)</span>
        </div>
    </div>

    <!-- RESULT -->
    <div id="crdd-final-result">
        <div id="crdd-final-label" style="font-size: 0.6em; margin-bottom: 10px;">STAND BY...</div>
        <div id="crdd-final-output">ANCHORED (0.0%)</div>
    </div>
</div>
<!-- END OF HTML (Closing the tag before going back to Wiki Text) -->
</html>

== P.S. ==
It won’t tell you purple Ratings. :)

—the Rescue and Removal Corps.
</div>