Retro Forms & Login Dialog in CSS, Bootstrap & Tailwind

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="rg-close" viewBox="0 0 10 9"><rect x="0" y="0" width="2" height="1" fill="currentColor"/><rect x="8" y="0" width="2" height="1" fill="currentColor"/><rect x="1" y="1" width="2" height="1" fill="currentColor"/><rect x="7" y="1" width="2" height="1" fill="currentColor"/><rect x="2" y="2" width="2" height="1" fill="currentColor"/><rect x="6" y="2" width="2" height="1" fill="currentColor"/><rect x="3" y="3" width="4" height="1" fill="currentColor"/><rect x="4" y="4" width="2" height="1" fill="currentColor"/><rect x="3" y="5" width="4" height="1" fill="currentColor"/><rect x="2" y="6" width="2" height="1" fill="currentColor"/><rect x="6" y="6" width="2" height="1" fill="currentColor"/><rect x="1" y="7" width="2" height="1" fill="currentColor"/><rect x="7" y="7" width="2" height="1" fill="currentColor"/><rect x="0" y="8" width="2" height="1" fill="currentColor"/><rect x="8" y="8" width="2" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-error" viewBox="0 0 16 16"><rect x="5" y="0" width="6" height="1" fill="#000000"/><rect x="3" y="1" width="2" height="1" fill="#000000"/><rect x="5" y="1" width="6" height="1" fill="#d00000"/><rect x="11" y="1" width="2" height="1" fill="#000000"/><rect x="2" y="2" width="1" height="1" fill="#000000"/><rect x="3" y="2" width="10" height="1" fill="#d00000"/><rect x="13" y="2" width="1" height="1" fill="#000000"/><rect x="1" y="3" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="2" height="1" fill="#d00000"/><rect x="4" y="3" width="2" height="1" fill="#ffffff"/><rect x="6" y="3" width="4" height="1" fill="#d00000"/><rect x="10" y="3" width="2" height="1" fill="#ffffff"/><rect x="12" y="3" width="2" height="1" fill="#d00000"/><rect x="14" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="4" width="2" height="1" fill="#d00000"/><rect x="4" y="4" width="3" height="1" fill="#ffffff"/><rect x="7" y="4" width="2" height="1" fill="#d00000"/><rect x="9" y="4" width="3" height="1" fill="#ffffff"/><rect x="12" y="4" width="2" height="1" fill="#d00000"/><rect x="14" y="4" width="1" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="4" height="1" fill="#d00000"/><rect x="5" y="5" width="6" height="1" fill="#ffffff"/><rect x="11" y="5" width="4" height="1" fill="#d00000"/><rect x="15" y="5" width="1" height="1" fill="#000000"/><rect x="0" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="5" height="1" fill="#d00000"/><rect x="6" y="6" width="4" height="1" fill="#ffffff"/><rect x="10" y="6" width="5" height="1" fill="#d00000"/><rect x="15" y="6" width="1" height="1" fill="#000000"/><rect x="0" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="5" height="1" fill="#d00000"/><rect x="6" y="7" width="4" height="1" fill="#ffffff"/><rect x="10" y="7" width="5" height="1" fill="#d00000"/><rect x="15" y="7" width="1" height="1" fill="#000000"/><rect x="0" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="4" height="1" fill="#d00000"/><rect x="5" y="8" width="6" height="1" fill="#ffffff"/><rect x="11" y="8" width="4" height="1" fill="#d00000"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="2" height="1" fill="#d00000"/><rect x="4" y="9" width="3" height="1" fill="#ffffff"/><rect x="7" y="9" width="2" height="1" fill="#d00000"/><rect x="9" y="9" width="3" height="1" fill="#ffffff"/><rect x="12" y="9" width="2" height="1" fill="#d00000"/><rect x="14" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="2" height="1" fill="#d00000"/><rect x="4" y="10" width="2" height="1" fill="#ffffff"/><rect x="6" y="10" width="4" height="1" fill="#d00000"/><rect x="10" y="10" width="2" height="1" fill="#ffffff"/><rect x="12" y="10" width="2" height="1" fill="#d00000"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="11" width="10" height="1" fill="#d00000"/><rect x="13" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="2" height="1" fill="#000000"/><rect x="5" y="12" width="6" height="1" fill="#d00000"/><rect x="11" y="12" width="2" height="1" fill="#000000"/><rect x="5" y="13" width="6" height="1" fill="#000000"/></symbol>
  <symbol id="ri-globe" viewBox="0 0 16 16"><rect x="4" y="1" width="8" height="1" fill="#000000"/><rect x="3" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="2" width="3" height="1" fill="#1e6fd9"/><rect x="7" y="2" width="2" height="1" fill="#1fa31f"/><rect x="9" y="2" width="3" height="1" fill="#1e6fd9"/><rect x="12" y="2" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="1" height="1" fill="#000000"/><rect x="3" y="3" width="4" height="1" fill="#1e6fd9"/><rect x="7" y="3" width="2" height="1" fill="#1fa31f"/><rect x="9" y="3" width="4" height="1" fill="#1e6fd9"/><rect x="13" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="4" width="1" height="1" fill="#1e6fd9"/><rect x="3" y="4" width="6" height="1" fill="#1fa31f"/><rect x="9" y="4" width="5" height="1" fill="#1e6fd9"/><rect x="14" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="1" height="1" fill="#000000"/><rect x="2" y="5" width="1" height="1" fill="#1e6fd9"/><rect x="3" y="5" width="6" height="1" fill="#1fa31f"/><rect x="9" y="5" width="5" height="1" fill="#1e6fd9"/><rect x="14" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="1" height="1" fill="#000000"/><rect x="2" y="6" width="1" height="1" fill="#1e6fd9"/><rect x="3" y="6" width="6" height="1" fill="#1fa31f"/><rect x="9" y="6" width="5" height="1" fill="#1e6fd9"/><rect x="14" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="1" height="1" fill="#000000"/><rect x="2" y="7" width="12" height="1" fill="#1fa31f"/><rect x="14" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="1" height="1" fill="#000000"/><rect x="2" y="8" width="12" height="1" fill="#1fa31f"/><rect x="14" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="5" height="1" fill="#1e6fd9"/><rect x="7" y="9" width="6" height="1" fill="#1fa31f"/><rect x="13" y="9" width="1" height="1" fill="#1e6fd9"/><rect x="14" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="5" height="1" fill="#1e6fd9"/><rect x="7" y="10" width="6" height="1" fill="#1fa31f"/><rect x="13" y="10" width="1" height="1" fill="#1e6fd9"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="5" height="1" fill="#1e6fd9"/><rect x="7" y="11" width="6" height="1" fill="#1fa31f"/><rect x="13" y="11" width="1" height="1" fill="#1e6fd9"/><rect x="14" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="4" height="1" fill="#1e6fd9"/><rect x="7" y="12" width="6" height="1" fill="#1fa31f"/><rect x="13" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="1" height="1" fill="#000000"/><rect x="4" y="13" width="3" height="1" fill="#1e6fd9"/><rect x="7" y="13" width="2" height="1" fill="#1fa31f"/><rect x="9" y="13" width="3" height="1" fill="#1e6fd9"/><rect x="12" y="13" width="1" height="1" fill="#000000"/><rect x="4" y="14" width="8" height="1" fill="#000000"/></symbol>
  <symbol id="rg-help" viewBox="0 0 7 9"><rect x="1" y="0" width="5" height="1" fill="currentColor"/><rect x="0" y="1" width="2" height="1" fill="currentColor"/><rect x="5" y="1" width="2" height="1" fill="currentColor"/><rect x="5" y="2" width="2" height="1" fill="currentColor"/><rect x="4" y="3" width="2" height="1" fill="currentColor"/><rect x="3" y="4" width="2" height="1" fill="currentColor"/><rect x="3" y="5" width="2" height="1" fill="currentColor"/><rect x="3" y="7" width="2" height="1" fill="currentColor"/><rect x="3" y="8" width="2" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-key" viewBox="0 0 16 16"><rect x="2" y="3" width="4" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="4" width="4" height="1" fill="#ffd84a"/><rect x="6" y="4" width="1" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="2" height="1" fill="#ffd84a"/><rect x="3" y="5" width="2" height="1" fill="#000000"/><rect x="5" y="5" width="2" height="1" fill="#ffd84a"/><rect x="7" y="5" width="1" height="1" fill="#000000"/><rect x="0" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="1" height="1" fill="#ffd84a"/><rect x="2" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="6" width="2" height="1" fill="#ffffff"/><rect x="5" y="6" width="1" height="1" fill="#000000"/><rect x="6" y="6" width="1" height="1" fill="#ffd84a"/><rect x="7" y="6" width="1" height="1" fill="#000000"/><rect x="0" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="1" height="1" fill="#ffd84a"/><rect x="2" y="7" width="1" height="1" fill="#000000"/><rect x="3" y="7" width="2" height="1" fill="#ffffff"/><rect x="5" y="7" width="1" height="1" fill="#000000"/><rect x="6" y="7" width="1" height="1" fill="#ffd84a"/><rect x="7" y="7" width="8" height="1" fill="#000000"/><rect x="0" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="2" height="1" fill="#ffd84a"/><rect x="3" y="8" width="2" height="1" fill="#000000"/><rect x="5" y="8" width="10" height="1" fill="#ffd84a"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="5" height="1" fill="#ffd84a"/><rect x="7" y="9" width="4" height="1" fill="#000000"/><rect x="11" y="9" width="1" height="1" fill="#ffd84a"/><rect x="12" y="9" width="1" height="1" fill="#000000"/><rect x="13" y="9" width="2" height="1" fill="#ffd84a"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="5" height="1" fill="#000000"/><rect x="11" y="10" width="4" height="1" fill="#000000"/></symbol>
  <symbol id="ri-speaker" viewBox="0 0 16 16"><rect x="6" y="1" width="1" height="1" fill="#000000"/><rect x="5" y="2" width="2" height="1" fill="#000000"/><rect x="12" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="3" width="1" height="1" fill="#000000"/><rect x="5" y="3" width="1" height="1" fill="#c0c0c0"/><rect x="6" y="3" width="1" height="1" fill="#000000"/><rect x="9" y="3" width="1" height="1" fill="#000000"/><rect x="13" y="3" width="1" height="1" fill="#000000"/><rect x="0" y="4" width="4" height="1" fill="#000000"/><rect x="4" y="4" width="2" height="1" fill="#c0c0c0"/><rect x="6" y="4" width="1" height="1" fill="#000000"/><rect x="10" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="1" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="5" width="1" height="1" fill="#000000"/><rect x="8" y="5" width="1" height="1" fill="#000000"/><rect x="11" y="5" width="1" height="1" fill="#000000"/><rect x="14" y="5" width="1" height="1" fill="#000000"/><rect x="0" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="6" width="1" height="1" fill="#000000"/><rect x="9" y="6" width="1" height="1" fill="#000000"/><rect x="11" y="6" width="1" height="1" fill="#000000"/><rect x="14" y="6" width="1" height="1" fill="#000000"/><rect x="0" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="7" width="1" height="1" fill="#000000"/><rect x="9" y="7" width="1" height="1" fill="#000000"/><rect x="11" y="7" width="1" height="1" fill="#000000"/><rect x="14" y="7" width="1" height="1" fill="#000000"/><rect x="0" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="8" width="1" height="1" fill="#000000"/><rect x="8" y="8" width="1" height="1" fill="#000000"/><rect x="11" y="8" width="1" height="1" fill="#000000"/><rect x="14" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="4" height="1" fill="#000000"/><rect x="4" y="9" width="2" height="1" fill="#c0c0c0"/><rect x="6" y="9" width="1" height="1" fill="#000000"/><rect x="10" y="9" width="1" height="1" fill="#000000"/><rect x="13" y="9" width="1" height="1" fill="#000000"/><rect x="4" y="10" width="1" height="1" fill="#000000"/><rect x="5" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="6" y="10" width="1" height="1" fill="#000000"/><rect x="9" y="10" width="1" height="1" fill="#000000"/><rect x="13" y="10" width="1" height="1" fill="#000000"/><rect x="5" y="11" width="2" height="1" fill="#000000"/><rect x="12" y="11" width="1" height="1" fill="#000000"/><rect x="6" y="12" width="1" height="1" fill="#000000"/></symbol>
</svg>
<section><span class="lbl">Text fields · sunken wells with labels, hints and an error tied to its field</span>
<section class="retro-window" aria-labelledby="w-reg">
<div class="retro-titlebar">
  <h2 class="retro-titlebar__title" id="w-reg"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-key"/></svg><span>Register Starfall Racer</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Help Register Starfall Racer"><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-help"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Register Starfall Racer"><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="retro-window__body">
<form action="#" class="retro-stack">
<div class="retro-grid">
<div><label class="retro-label" for="f-name">Full name</label><input class="retro-input" id="f-name" type="text" value="Ola Brandt" autocomplete="name">
</div>
<div><label class="retro-label" for="f-mail">Email address</label><input class="retro-input" id="f-mail" type="email" value="[email protected]" aria-describedby="f-mail-hint" autocomplete="email">
<p class="retro-hint" id="f-mail-hint">Your unlock key is sent to this address.</p></div>
<div><label class="retro-label" for="f-serial">Serial number</label><input class="retro-input" id="f-serial" type="text" value="MBY4-77QX-2KP9" aria-describedby="f-serial-err" aria-invalid="true">
<p class="retro-error" id="f-serial-err"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-error"/></svg><span><span class="retro-sr">Error: </span>A serial number has four groups of four characters. This one has three.</span></p></div>
<div><label class="retro-label" for="f-seats">Copies</label><input class="retro-input" id="f-seats" type="number" value="3" aria-describedby="f-seats-hint" min="1" max="50">
<p class="retro-hint" id="f-seats-hint">Up to 50 seats per licence.</p></div>
<div><label class="retro-label" for="f-type">Licence type</label><input class="retro-input" id="f-type" type="text" value="Single studio" disabled>
</div>
<div><label class="retro-label" for="f-country">Country</label><div class="retro-select"><select class="retro-input" id="f-country"><option selected>Norway</option><option>Poland</option><option>Portugal</option><option>Japan</option><option>Canada</option></select></div></div>
</div>
<div class="retro-actions"><button class="retro-btn retro-btn--default" type="submit">Register</button><button class="retro-btn" type="button">Cancel</button></div>
</form>
</div>

</section>
</section>
<div class="cols">
<section><span class="lbl">Select, list box, trackbar and text area</span>
<section class="retro-window" aria-labelledby="w-sound">
<div class="retro-titlebar">
  <h2 class="retro-titlebar__title" id="w-sound"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-speaker"/></svg><span>Sound Settings</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Help Sound Settings"><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-help"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Sound Settings"><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="retro-window__body">
<div class="retro-stack">
<div><label class="retro-label" for="f-card">Sound card</label><div class="retro-select"><select class="retro-input" id="f-card"><option>SoundWave 16 (IRQ 5)</option><option selected>Moonbyte AudioPro 32</option><option>PC speaker only</option><option>No sound</option></select></div></div>
<div><label class="retro-label" for="f-chime">Start-up sound</label><select class="retro-list" id="f-chime" size="5"><option>Chimes</option><option selected>Synth swell</option><option>Modem hello</option><option>Arcade coin</option><option>Silence</option></select></div>
<div><label class="retro-label" for="f-vol">Master volume</label><input class="retro-range" id="f-vol" type="range" min="0" max="100" value="70"><div class="retro-scale" aria-hidden="true"><span>Quiet</span><span>Loud</span></div></div>
<div><label class="retro-label" for="f-notes">Notes for the sound engineer</label><textarea class="retro-input" id="f-notes" rows="3">Bass drops out on track 7 below volume 40. Tested on the AudioPro 32.</textarea></div>
<fieldset class="retro-group"><legend class="retro-group__legend">Output</legend>
<div class="retro-cluster"><label class="retro-check"><input class="retro-check__box" type="radio" checked name="out"><span>Speakers</span></label><label class="retro-check"><input class="retro-check__box" type="radio" name="out"><span>Headphones</span></label><label class="retro-check"><input class="retro-check__box" type="checkbox" checked><span>Surround</span></label></div>
</fieldset>
<div class="retro-actions"><button class="retro-btn retro-btn--default" type="button">OK</button><button class="retro-btn" type="button">Cancel</button></div>
</div>
</div>

</section>
</section>
<section><span class="lbl">Login dialog window</span>
<section class="retro-window" aria-labelledby="w-logon">
<div class="retro-titlebar">
  <h2 class="retro-titlebar__title" id="w-logon"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-key"/></svg><span>Log On to Moonbyte Net</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Help Log On dialog"><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-help"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Log On dialog"><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="retro-window__body">
<form action="#">
<div class="retro-intro"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-globe"/></svg><p>Type a user name and password to log on to Moonbyte Net. Ask your network administrator if you have forgotten them.</p></div>
<div class="retro-formrow">
<label class="retro-label" for="l-user">User name</label><input class="retro-input" id="l-user" type="text" value="dkowalski" autocomplete="username">
<label class="retro-label" for="l-pass">Password</label><input class="retro-input" id="l-pass" type="password" autocomplete="current-password">
<label class="retro-label" for="l-domain">Log on to</label><div class="retro-select"><select class="retro-input" id="l-domain"><option selected>MOONBYTE</option><option>ARCADE-LAN</option><option>This computer</option></select></div>
</div>
<div class="retro-mt"><label class="retro-check"><input class="retro-check__box" type="checkbox"><span>Remember my password on this computer</span></label></div>
<div class="retro-actions retro-mt"><button class="retro-btn retro-btn--default" type="submit">OK</button><button class="retro-btn" type="button">Cancel</button><button class="retro-btn" type="button">Shut Down…</button></div>
</form>
</div>

</section>
</section>
</div>

/* ── Retro UI kit tokens (uiCookies) — identical in every set ─────────────
   A classic desktop OS look: grey bevelled faces, navy title bars, sunken white fields on a dithered teal desktop.
   Bevels are four 1px inset shadows built from --retro-hilite, --retro-light, --retro-shadow and --retro-dark,
   so one change to a token re-colours every button, field and window in the kit. */
:root{
  --retro-desk:#006e6e;        /* desktop behind the windows */
  --retro-desk-text:#ffffff;   /* captions and icon labels on the desktop, 6.1:1 */
  --retro-desk-dither:rgba(0,0,0,.22);
  --retro-face:#c0c0c0;        /* window, button and bar faces */
  --retro-hilite:#ffffff;      /* bevel: outer light edge */
  --retro-light:#dfdfdf;       /* bevel: inner light edge */
  --retro-shadow:#808080;      /* bevel: inner dark edge */
  --retro-dark:#0a0a0a;        /* bevel: outer dark edge */
  --retro-text:#000000;        /* text on faces, 11.5:1 */
  --retro-muted:#3d3d3d;       /* secondary text on faces, 6:1 */
  --retro-field:#ffffff;       /* inputs, lists and document areas */
  --retro-field-text:#000000;
  --retro-title:#000080;       /* active title bar gradient, white text 6.3:1 or more */
  --retro-title-2:#1060b0;
  --retro-title-text:#ffffff;
  --retro-idle:#5a5a5a;        /* inactive title bar gradient, white text 5.3:1 or more */
  --retro-idle-2:#6b6b6b;
  --retro-idle-text:#ffffff;
  --retro-select:#000080;      /* highlighted menu items, rows and dates */
  --retro-select-text:#ffffff;
  --retro-link:#0000cc;        /* 6.2:1 on faces */
  --retro-danger:#8a0000;      /* error text, 5.5:1 on faces */
  --retro-tip:#ffffe1;         /* tooltips and balloons */
  --retro-tip-text:#000000;
  --retro-tip-line:#000000;
  --retro-lcd:#0b1a0b;         /* LCD read-outs */
  --retro-lcd-text:#4dff4d;
  --retro-accent:#000080;      /* progress chunks */
  --retro-disabled:#808080;    /* disabled text, embossed */
  --retro-emboss:#ffffff;
  --retro-dither-a:#ffffff;    /* checkerboard behind a latched toggle */
  --retro-dither-b:#c0c0c0;
  --retro-focus:#000000;       /* dotted focus rectangle */
  --retro-glow:0 0 #0000;      /* the synthwave theme adds a neon glow to windows */
  --retro-neon-pink:#ff3fa4;--retro-neon-cyan:#00e5ff;--retro-sun-1:#ffd23f;--retro-sun-2:#ff3fa4;
  --retro-font:Tahoma,"Microsoft Sans Serif","MS Sans Serif",Geneva,Verdana,"Segoe UI",sans-serif;
  --retro-mono:"VT323","Fixedsys","Lucida Console",Consolas,Menlo,"Courier New",ui-monospace,monospace;
}
/* Synthwave 80s night theme: data-retro="synthwave" on any wrapper, or a checked .retro-theme-input inside a
   [data-retro] element. :is() is a forgiving list, so browsers without :has() still apply the attribute. */
[data-retro]:is([data-retro="synthwave"],:has(.retro-theme-input:checked)){
  --retro-desk:#14062b;--retro-desk-text:#fff1fb;--retro-desk-dither:rgba(255,63,164,.16);
  --retro-face:#261047;--retro-hilite:#ff6ec7;--retro-light:#a05cff;--retro-shadow:#0d0420;--retro-dark:#000000;
  --retro-text:#fff1fb;--retro-muted:#dcc6ff;--retro-field:#0e0322;--retro-field-text:#fff1fb;
  --retro-title:#ff8a3d;--retro-title-2:#ff3fa4;--retro-title-text:#1b0030;
  --retro-idle:#4a2d6e;--retro-idle-2:#5c3a85;--retro-idle-text:#f3e8ff;
  --retro-select:#00e5ff;--retro-select-text:#14062b;--retro-link:#7cf3ff;--retro-danger:#ff8fa3;
  --retro-tip:#2b1352;--retro-tip-text:#fff1fb;--retro-tip-line:#ff6ec7;
  --retro-lcd:#07010f;--retro-lcd-text:#ff5fd2;--retro-accent:#ff3fa4;
  --retro-disabled:#8a72b0;--retro-emboss:transparent;--retro-dither-a:#3d1a6e;--retro-dither-b:#261047;
  --retro-focus:#5ff4ff;--retro-glow:0 0 0 1px rgba(255,63,164,.45),0 0 22px rgba(255,63,164,.35);color-scheme:dark}
/* More contrast requested: secondary text turns full strength and the glow goes */
@media (prefers-contrast:more){:root,[data-retro],[data-retro]:is([data-retro="synthwave"],:has(.retro-theme-input:checked)){--retro-muted:var(--retro-text);--retro-glow:0 0 #0000}}
:root,[data-retro]{
  --retro-out:inset -1px -1px var(--retro-dark),inset 1px 1px var(--retro-hilite),inset -2px -2px var(--retro-shadow),inset 2px 2px var(--retro-light);
  --retro-in:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-dark),inset -2px -2px var(--retro-light),inset 2px 2px var(--retro-shadow);
  --retro-out-default:inset 0 0 0 1px var(--retro-dark),inset -2px -2px var(--retro-dark),inset 2px 2px var(--retro-hilite),inset -3px -3px var(--retro-shadow),inset 3px 3px var(--retro-light);
  --retro-in-default:inset 0 0 0 1px var(--retro-dark),inset 2px 2px var(--retro-shadow),inset -2px -2px var(--retro-shadow);
  --retro-sunken:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-shadow),inset -2px -2px var(--retro-light),inset 2px 2px var(--retro-dark);
  --retro-frame:inset -1px -1px var(--retro-dark),inset 1px 1px var(--retro-light),inset -2px -2px var(--retro-shadow),inset 2px 2px var(--retro-hilite);
  --retro-window:var(--retro-frame),var(--retro-glow);
  --retro-thin-in:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-shadow);
  --retro-thin-out:inset -1px -1px var(--retro-shadow),inset 1px 1px var(--retro-hilite);
  --retro-title-bg:linear-gradient(90deg,var(--retro-title),var(--retro-title-2));
  --retro-idle-bg:linear-gradient(90deg,var(--retro-idle),var(--retro-idle-2));
  --retro-dither:repeating-conic-gradient(var(--retro-dither-a) 0 25%,var(--retro-dither-b) 0 50%) 0 0/2px 2px;
  --retro-wallpaper:radial-gradient(var(--retro-desk-dither) 1px,transparent 1.5px) 0 0/4px 4px,var(--retro-desk);
  --retro-check-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%207'%20shape-rendering='crispEdges'%3E%3Crect%20x='6'%20y='0'%20width='1'%20height='1'%20fill='%23000'/%3E%3Crect%20x='5'%20y='1'%20width='2'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23000'/%3E%3Crect%20x='4'%20y='2'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='3'%20width='2'%20height='1'%20fill='%23000'/%3E%3Crect%20x='3'%20y='3'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='4'%20width='5'%20height='1'%20fill='%23000'/%3E%3Crect%20x='1'%20y='5'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='2'%20y='6'%20width='1'%20height='1'%20fill='%23000'/%3E%3C/svg%3E");
  --retro-arrow-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%204'%20shape-rendering='crispEdges'%3E%3Crect%20x='0'%20y='0'%20width='7'%20height='1'%20fill='%23000'/%3E%3Crect%20x='1'%20y='1'%20width='5'%20height='1'%20fill='%23000'/%3E%3Crect%20x='2'%20y='2'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='3'%20y='3'%20width='1'%20height='1'%20fill='%23000'/%3E%3C/svg%3E");
}
[data-retro]{color:var(--retro-text);font-family:var(--retro-font)}
/* Components */
:where([class*="retro-"]),:where([class*="retro-"])::before,:where([class*="retro-"])::after{box-sizing:border-box}
.retro-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.retro-ico{display:block;flex:none;width:16px;height:16px;shape-rendering:crispEdges}
.retro-ico--md{width:24px;height:24px}
.retro-ico--lg{width:32px;height:32px}
.retro-glyph{display:block;flex:none;shape-rendering:crispEdges}
.retro-link{color:var(--retro-link);text-decoration:underline;text-underline-offset:2px}
.retro-link:hover{color:var(--retro-link);text-decoration-thickness:2px}
.retro-link:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-muted{color:var(--retro-muted)}
.retro-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.retro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:24px;align-items:start}
.retro-stack{display:grid;gap:10px}
/* Push buttons: raised bevel; pressing swaps it for the sunken one. The default button gets an extra dark frame */
.retro-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:88px;min-height:32px;margin:0;padding:5px 14px;border:0;border-radius:0;
  background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-out);font:400 .875rem/1.2 var(--retro-font);text-align:center;text-decoration:none;cursor:pointer}
.retro-btn:hover{color:var(--retro-text)}
.retro-btn:active:not(:disabled){box-shadow:var(--retro-in)}
.retro-btn:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:-6px}
.retro-btn--default{box-shadow:var(--retro-out-default);font-weight:700}
.retro-btn--default:active:not(:disabled){box-shadow:var(--retro-in-default)}
.retro-btn--sm{min-width:0;min-height:26px;padding:3px 10px;font-size:.8125rem}
.retro-btn--lg{min-height:42px;padding:8px 22px;font-size:1rem;font-weight:700}
.retro-btn--block{width:100%}
.retro-btn:disabled{color:var(--retro-disabled);text-shadow:1px 1px 0 var(--retro-emboss);cursor:default}
.retro-btn:disabled .retro-ico{opacity:.5}
/* Checkboxes and radio buttons: real inputs with appearance:none, a sunken white well and a pixel tick or dot.
   Focus draws the classic dotted rectangle round the label text */
.retro-check{display:inline-flex;align-items:center;gap:8px;min-height:24px;margin:0;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font);cursor:pointer}
.retro-check__box{appearance:none;display:grid;place-content:center;flex:none;width:16px;height:16px;margin:0;border:0;border-radius:0;
  background:var(--retro-field);box-shadow:var(--retro-sunken);cursor:pointer}
.retro-check__box::before{content:"";width:10px;height:10px;background:var(--retro-field-text);
  -webkit-mask:var(--retro-check-mask) center/contain no-repeat;mask:var(--retro-check-mask) center/contain no-repeat;scale:0}
.retro-check__box[type="radio"]{border-radius:50%}
.retro-check__box[type="radio"]::before{width:6px;height:6px;border-radius:50%;-webkit-mask:none;mask:none}
.retro-check__box:checked::before{scale:1}
.retro-check__box:focus-visible{outline:0}
.retro-check__box:focus-visible+span{outline:2px dotted var(--retro-focus);outline-offset:1px}
.retro-check__box:disabled{background:var(--retro-face);cursor:default}
.retro-check__box:disabled::before{background:var(--retro-disabled)}
.retro-check__box:disabled+span{color:var(--retro-disabled);text-shadow:1px 1px 0 var(--retro-emboss)}
/* Group box: an etched frame with the legend sitting in the line */
.retro-group{min-width:0;margin:0;padding:10px 12px 12px;border:1px solid var(--retro-shadow);border-radius:0;box-shadow:inset 1px 1px var(--retro-hilite),1px 1px var(--retro-hilite)}
.retro-group__legend{float:none;width:auto;margin:0;padding:0 4px;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font)}
/* Window: a bevelled frame, a gradient title bar with labelled controls, a body and an optional status bar */
.retro-window{display:flex;flex-direction:column;min-width:0;padding:3px;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-window);font:400 .875rem/1.4 var(--retro-font)}
.retro-window :where(h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
.retro-titlebar{display:flex;align-items:center;gap:6px;min-height:28px;padding:2px 3px 2px 5px;background:var(--retro-title-bg);color:var(--retro-title-text)}
.retro-titlebar--idle{background:var(--retro-idle-bg);color:var(--retro-idle-text)}
.retro-titlebar__title{display:flex;align-items:center;gap:6px;flex:1;min-width:0;margin:0;color:inherit;font:700 .875rem/1.2 var(--retro-font)}
.retro-titlebar__title span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retro-titlebar__controls{display:flex;flex:none;gap:2px}
.retro-ctl{display:grid;place-items:center;width:24px;height:22px;margin:0;padding:0;border:0;border-radius:0;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-out);cursor:pointer}
.retro-ctl:active{box-shadow:var(--retro-in)}
.retro-ctl:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:-5px}
.retro-ctl--close{margin-left:2px}
.retro-window__body{padding:12px 10px}
.retro-statusbar{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}
.retro-statusbar>*{flex:1 1 auto;padding:3px 7px;box-shadow:var(--retro-thin-in);font-size:.8125rem}
/* Panel: a window face without a title bar, for grouping controls */
.retro-panel{min-width:0;padding:14px;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-window);font:400 .875rem/1.4 var(--retro-font)}
.retro-panel :where(h2,h3,p,ul,ol){margin:0}
.retro-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.retro-formrow{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);align-items:center;gap:6px 10px}
.retro-formrow .retro-label{margin:0}
@media (max-width:480px){.retro-formrow{grid-template-columns:minmax(0,1fr)}}
/* Fields: sunken wells. Errors add a red frame, an icon and a message tied to the field */
.retro-label{display:block;margin:0 0 4px;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font)}
.retro-input{display:block;width:100%;min-height:30px;margin:0;padding:5px 7px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);
  box-shadow:var(--retro-sunken);font:400 .875rem/1.3 var(--retro-font)}
.retro-input::placeholder{color:var(--retro-muted);opacity:1}
.retro-input:focus{outline:0}
.retro-input:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-input:disabled{background:var(--retro-face);color:var(--retro-disabled)}
.retro-input[aria-invalid="true"]{box-shadow:var(--retro-sunken),0 0 0 2px var(--retro-danger)}
textarea.retro-input{min-height:96px;resize:vertical;scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-hint{margin:4px 0 0;color:var(--retro-muted);font-size:.8125rem}
.retro-error{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;color:var(--retro-danger);font-size:.8125rem;font-weight:700}
.retro-select{position:relative;display:block}
.retro-select select{appearance:none;cursor:pointer;padding-right:34px}
.retro-select::before{content:"";position:absolute;top:2px;right:2px;bottom:2px;width:24px;background:var(--retro-face);box-shadow:var(--retro-out);pointer-events:none}
.retro-select::after{content:"";position:absolute;top:50%;right:10px;width:7px;height:4px;margin-top:-2px;background:var(--retro-text);
  -webkit-mask:var(--retro-arrow-mask) center/contain no-repeat;mask:var(--retro-arrow-mask) center/contain no-repeat;pointer-events:none}
.retro-select option,.retro-list option{background:var(--retro-field);color:var(--retro-field-text)}
.retro-list{display:block;width:100%;margin:0;padding:3px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);
  font:400 .875rem/1.3 var(--retro-font);scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-list option{padding:3px 6px}
.retro-list option:checked{background:var(--retro-select) linear-gradient(var(--retro-select),var(--retro-select));color:var(--retro-select-text)}
.retro-list:focus{outline:0}
.retro-list:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
/* Trackbar: a native range input with a sunken groove and a raised rectangular thumb */
.retro-range{display:block;width:100%;height:28px;margin:0;background:transparent;appearance:none;cursor:pointer}
.retro-range::-webkit-slider-runnable-track{height:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-range::-moz-range-track{height:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-range::-webkit-slider-thumb{width:12px;height:22px;margin-top:-8px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out);appearance:none}
.retro-range::-moz-range-thumb{width:12px;height:22px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out)}
.retro-range:focus{outline:0}
.retro-range:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-scale{display:flex;justify-content:space-between;margin-top:2px;color:var(--retro-muted);font-size:.8125rem}
.retro-intro{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.retro-mt{margin-top:14px}
@media (prefers-reduced-motion:reduce){[class*="retro-"],[class*="retro-"]::before,[class*="retro-"]::after{transition:none!important;animation:none!important}}

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="rg-close" viewBox="0 0 10 9"><rect x="0" y="0" width="2" height="1" fill="currentColor"/><rect x="8" y="0" width="2" height="1" fill="currentColor"/><rect x="1" y="1" width="2" height="1" fill="currentColor"/><rect x="7" y="1" width="2" height="1" fill="currentColor"/><rect x="2" y="2" width="2" height="1" fill="currentColor"/><rect x="6" y="2" width="2" height="1" fill="currentColor"/><rect x="3" y="3" width="4" height="1" fill="currentColor"/><rect x="4" y="4" width="2" height="1" fill="currentColor"/><rect x="3" y="5" width="4" height="1" fill="currentColor"/><rect x="2" y="6" width="2" height="1" fill="currentColor"/><rect x="6" y="6" width="2" height="1" fill="currentColor"/><rect x="1" y="7" width="2" height="1" fill="currentColor"/><rect x="7" y="7" width="2" height="1" fill="currentColor"/><rect x="0" y="8" width="2" height="1" fill="currentColor"/><rect x="8" y="8" width="2" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-error" viewBox="0 0 16 16"><rect x="5" y="0" width="6" height="1" fill="#000000"/><rect x="3" y="1" width="2" height="1" fill="#000000"/><rect x="5" y="1" width="6" height="1" fill="#d00000"/><rect x="11" y="1" width="2" height="1" fill="#000000"/><rect x="2" y="2" width="1" height="1" fill="#000000"/><rect x="3" y="2" width="10" height="1" fill="#d00000"/><rect x="13" y="2" width="1" height="1" fill="#000000"/><rect x="1" y="3" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="2" height="1" fill="#d00000"/><rect x="4" y="3" width="2" height="1" fill="#ffffff"/><rect x="6" y="3" width="4" height="1" fill="#d00000"/><rect x="10" y="3" width="2" height="1" fill="#ffffff"/><rect x="12" y="3" width="2" height="1" fill="#d00000"/><rect x="14" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="4" width="2" height="1" fill="#d00000"/><rect x="4" y="4" width="3" height="1" fill="#ffffff"/><rect x="7" y="4" width="2" height="1" fill="#d00000"/><rect x="9" y="4" width="3" height="1" fill="#ffffff"/><rect x="12" y="4" width="2" height="1" fill="#d00000"/><rect x="14" y="4" width="1" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="4" height="1" fill="#d00000"/><rect x="5" y="5" width="6" height="1" fill="#ffffff"/><rect x="11" y="5" width="4" height="1" fill="#d00000"/><rect x="15" y="5" width="1" height="1" fill="#000000"/><rect x="0" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="5" height="1" fill="#d00000"/><rect x="6" y="6" width="4" height="1" fill="#ffffff"/><rect x="10" y="6" width="5" height="1" fill="#d00000"/><rect x="15" y="6" width="1" height="1" fill="#000000"/><rect x="0" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="5" height="1" fill="#d00000"/><rect x="6" y="7" width="4" height="1" fill="#ffffff"/><rect x="10" y="7" width="5" height="1" fill="#d00000"/><rect x="15" y="7" width="1" height="1" fill="#000000"/><rect x="0" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="4" height="1" fill="#d00000"/><rect x="5" y="8" width="6" height="1" fill="#ffffff"/><rect x="11" y="8" width="4" height="1" fill="#d00000"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="2" height="1" fill="#d00000"/><rect x="4" y="9" width="3" height="1" fill="#ffffff"/><rect x="7" y="9" width="2" height="1" fill="#d00000"/><rect x="9" y="9" width="3" height="1" fill="#ffffff"/><rect x="12" y="9" width="2" height="1" fill="#d00000"/><rect x="14" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="2" height="1" fill="#d00000"/><rect x="4" y="10" width="2" height="1" fill="#ffffff"/><rect x="6" y="10" width="4" height="1" fill="#d00000"/><rect x="10" y="10" width="2" height="1" fill="#ffffff"/><rect x="12" y="10" width="2" height="1" fill="#d00000"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="11" width="10" height="1" fill="#d00000"/><rect x="13" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="2" height="1" fill="#000000"/><rect x="5" y="12" width="6" height="1" fill="#d00000"/><rect x="11" y="12" width="2" height="1" fill="#000000"/><rect x="5" y="13" width="6" height="1" fill="#000000"/></symbol>
  <symbol id="ri-globe" viewBox="0 0 16 16"><rect x="4" y="1" width="8" height="1" fill="#000000"/><rect x="3" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="2" width="3" height="1" fill="#1e6fd9"/><rect x="7" y="2" width="2" height="1" fill="#1fa31f"/><rect x="9" y="2" width="3" height="1" fill="#1e6fd9"/><rect x="12" y="2" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="1" height="1" fill="#000000"/><rect x="3" y="3" width="4" height="1" fill="#1e6fd9"/><rect x="7" y="3" width="2" height="1" fill="#1fa31f"/><rect x="9" y="3" width="4" height="1" fill="#1e6fd9"/><rect x="13" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="4" width="1" height="1" fill="#1e6fd9"/><rect x="3" y="4" width="6" height="1" fill="#1fa31f"/><rect x="9" y="4" width="5" height="1" fill="#1e6fd9"/><rect x="14" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="1" height="1" fill="#000000"/><rect x="2" y="5" width="1" height="1" fill="#1e6fd9"/><rect x="3" y="5" width="6" height="1" fill="#1fa31f"/><rect x="9" y="5" width="5" height="1" fill="#1e6fd9"/><rect x="14" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="1" height="1" fill="#000000"/><rect x="2" y="6" width="1" height="1" fill="#1e6fd9"/><rect x="3" y="6" width="6" height="1" fill="#1fa31f"/><rect x="9" y="6" width="5" height="1" fill="#1e6fd9"/><rect x="14" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="1" height="1" fill="#000000"/><rect x="2" y="7" width="12" height="1" fill="#1fa31f"/><rect x="14" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="1" height="1" fill="#000000"/><rect x="2" y="8" width="12" height="1" fill="#1fa31f"/><rect x="14" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="5" height="1" fill="#1e6fd9"/><rect x="7" y="9" width="6" height="1" fill="#1fa31f"/><rect x="13" y="9" width="1" height="1" fill="#1e6fd9"/><rect x="14" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="5" height="1" fill="#1e6fd9"/><rect x="7" y="10" width="6" height="1" fill="#1fa31f"/><rect x="13" y="10" width="1" height="1" fill="#1e6fd9"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="5" height="1" fill="#1e6fd9"/><rect x="7" y="11" width="6" height="1" fill="#1fa31f"/><rect x="13" y="11" width="1" height="1" fill="#1e6fd9"/><rect x="14" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="4" height="1" fill="#1e6fd9"/><rect x="7" y="12" width="6" height="1" fill="#1fa31f"/><rect x="13" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="1" height="1" fill="#000000"/><rect x="4" y="13" width="3" height="1" fill="#1e6fd9"/><rect x="7" y="13" width="2" height="1" fill="#1fa31f"/><rect x="9" y="13" width="3" height="1" fill="#1e6fd9"/><rect x="12" y="13" width="1" height="1" fill="#000000"/><rect x="4" y="14" width="8" height="1" fill="#000000"/></symbol>
  <symbol id="rg-help" viewBox="0 0 7 9"><rect x="1" y="0" width="5" height="1" fill="currentColor"/><rect x="0" y="1" width="2" height="1" fill="currentColor"/><rect x="5" y="1" width="2" height="1" fill="currentColor"/><rect x="5" y="2" width="2" height="1" fill="currentColor"/><rect x="4" y="3" width="2" height="1" fill="currentColor"/><rect x="3" y="4" width="2" height="1" fill="currentColor"/><rect x="3" y="5" width="2" height="1" fill="currentColor"/><rect x="3" y="7" width="2" height="1" fill="currentColor"/><rect x="3" y="8" width="2" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-key" viewBox="0 0 16 16"><rect x="2" y="3" width="4" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="4" width="4" height="1" fill="#ffd84a"/><rect x="6" y="4" width="1" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="2" height="1" fill="#ffd84a"/><rect x="3" y="5" width="2" height="1" fill="#000000"/><rect x="5" y="5" width="2" height="1" fill="#ffd84a"/><rect x="7" y="5" width="1" height="1" fill="#000000"/><rect x="0" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="1" height="1" fill="#ffd84a"/><rect x="2" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="6" width="2" height="1" fill="#ffffff"/><rect x="5" y="6" width="1" height="1" fill="#000000"/><rect x="6" y="6" width="1" height="1" fill="#ffd84a"/><rect x="7" y="6" width="1" height="1" fill="#000000"/><rect x="0" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="1" height="1" fill="#ffd84a"/><rect x="2" y="7" width="1" height="1" fill="#000000"/><rect x="3" y="7" width="2" height="1" fill="#ffffff"/><rect x="5" y="7" width="1" height="1" fill="#000000"/><rect x="6" y="7" width="1" height="1" fill="#ffd84a"/><rect x="7" y="7" width="8" height="1" fill="#000000"/><rect x="0" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="2" height="1" fill="#ffd84a"/><rect x="3" y="8" width="2" height="1" fill="#000000"/><rect x="5" y="8" width="10" height="1" fill="#ffd84a"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="5" height="1" fill="#ffd84a"/><rect x="7" y="9" width="4" height="1" fill="#000000"/><rect x="11" y="9" width="1" height="1" fill="#ffd84a"/><rect x="12" y="9" width="1" height="1" fill="#000000"/><rect x="13" y="9" width="2" height="1" fill="#ffd84a"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="5" height="1" fill="#000000"/><rect x="11" y="10" width="4" height="1" fill="#000000"/></symbol>
  <symbol id="ri-speaker" viewBox="0 0 16 16"><rect x="6" y="1" width="1" height="1" fill="#000000"/><rect x="5" y="2" width="2" height="1" fill="#000000"/><rect x="12" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="3" width="1" height="1" fill="#000000"/><rect x="5" y="3" width="1" height="1" fill="#c0c0c0"/><rect x="6" y="3" width="1" height="1" fill="#000000"/><rect x="9" y="3" width="1" height="1" fill="#000000"/><rect x="13" y="3" width="1" height="1" fill="#000000"/><rect x="0" y="4" width="4" height="1" fill="#000000"/><rect x="4" y="4" width="2" height="1" fill="#c0c0c0"/><rect x="6" y="4" width="1" height="1" fill="#000000"/><rect x="10" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="1" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="5" width="1" height="1" fill="#000000"/><rect x="8" y="5" width="1" height="1" fill="#000000"/><rect x="11" y="5" width="1" height="1" fill="#000000"/><rect x="14" y="5" width="1" height="1" fill="#000000"/><rect x="0" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="6" width="1" height="1" fill="#000000"/><rect x="9" y="6" width="1" height="1" fill="#000000"/><rect x="11" y="6" width="1" height="1" fill="#000000"/><rect x="14" y="6" width="1" height="1" fill="#000000"/><rect x="0" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="7" width="1" height="1" fill="#000000"/><rect x="9" y="7" width="1" height="1" fill="#000000"/><rect x="11" y="7" width="1" height="1" fill="#000000"/><rect x="14" y="7" width="1" height="1" fill="#000000"/><rect x="0" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="8" width="1" height="1" fill="#000000"/><rect x="8" y="8" width="1" height="1" fill="#000000"/><rect x="11" y="8" width="1" height="1" fill="#000000"/><rect x="14" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="4" height="1" fill="#000000"/><rect x="4" y="9" width="2" height="1" fill="#c0c0c0"/><rect x="6" y="9" width="1" height="1" fill="#000000"/><rect x="10" y="9" width="1" height="1" fill="#000000"/><rect x="13" y="9" width="1" height="1" fill="#000000"/><rect x="4" y="10" width="1" height="1" fill="#000000"/><rect x="5" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="6" y="10" width="1" height="1" fill="#000000"/><rect x="9" y="10" width="1" height="1" fill="#000000"/><rect x="13" y="10" width="1" height="1" fill="#000000"/><rect x="5" y="11" width="2" height="1" fill="#000000"/><rect x="12" y="11" width="1" height="1" fill="#000000"/><rect x="6" y="12" width="1" height="1" fill="#000000"/></symbol>
</svg>
<section><span class="lbl">Text fields · sunken wells with labels, hints and an error tied to its field</span>
<section class="card retro-window" aria-labelledby="w-reg">
<div class="card-header retro-titlebar">
  <h2 class="retro-titlebar__title" id="w-reg"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-key"/></svg><span>Register Starfall Racer</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Help Register Starfall Racer"><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-help"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Register Starfall Racer"><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="card-body retro-window__body">
<form action="#" class="retro-stack">
<div class="retro-grid">
<div><label class="form-label retro-label" for="f-name">Full name</label><input class="form-control retro-input" id="f-name" type="text" value="Ola Brandt" autocomplete="name">
</div>
<div><label class="form-label retro-label" for="f-mail">Email address</label><input class="form-control retro-input" id="f-mail" type="email" value="[email protected]" aria-describedby="f-mail-hint" autocomplete="email">
<p class="retro-hint" id="f-mail-hint">Your unlock key is sent to this address.</p></div>
<div><label class="form-label retro-label" for="f-serial">Serial number</label><input class="form-control retro-input" id="f-serial" type="text" value="MBY4-77QX-2KP9" aria-describedby="f-serial-err" aria-invalid="true">
<p class="retro-error" id="f-serial-err"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-error"/></svg><span><span class="visually-hidden">Error: </span>A serial number has four groups of four characters. This one has three.</span></p></div>
<div><label class="form-label retro-label" for="f-seats">Copies</label><input class="form-control retro-input" id="f-seats" type="number" value="3" aria-describedby="f-seats-hint" min="1" max="50">
<p class="retro-hint" id="f-seats-hint">Up to 50 seats per licence.</p></div>
<div><label class="form-label retro-label" for="f-type">Licence type</label><input class="form-control retro-input" id="f-type" type="text" value="Single studio" disabled>
</div>
<div><label class="form-label retro-label" for="f-country">Country</label><div class="retro-select"><select class="form-select retro-input" id="f-country"><option selected>Norway</option><option>Poland</option><option>Portugal</option><option>Japan</option><option>Canada</option></select></div></div>
</div>
<div class="retro-actions"><button class="btn btn-retro btn-retro-default" type="submit">Register</button><button class="btn btn-retro" type="button">Cancel</button></div>
</form>
</div>

</section>
</section>
<div class="cols">
<section><span class="lbl">Select, list box, trackbar and text area</span>
<section class="card retro-window" aria-labelledby="w-sound">
<div class="card-header retro-titlebar">
  <h2 class="retro-titlebar__title" id="w-sound"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-speaker"/></svg><span>Sound Settings</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Help Sound Settings"><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-help"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Sound Settings"><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="card-body retro-window__body">
<div class="retro-stack">
<div><label class="form-label retro-label" for="f-card">Sound card</label><div class="retro-select"><select class="form-select retro-input" id="f-card"><option>SoundWave 16 (IRQ 5)</option><option selected>Moonbyte AudioPro 32</option><option>PC speaker only</option><option>No sound</option></select></div></div>
<div><label class="form-label retro-label" for="f-chime">Start-up sound</label><select class="form-select retro-list" id="f-chime" size="5"><option>Chimes</option><option selected>Synth swell</option><option>Modem hello</option><option>Arcade coin</option><option>Silence</option></select></div>
<div><label class="form-label retro-label" for="f-vol">Master volume</label><input class="form-range retro-range" id="f-vol" type="range" min="0" max="100" value="70"><div class="retro-scale" aria-hidden="true"><span>Quiet</span><span>Loud</span></div></div>
<div><label class="form-label retro-label" for="f-notes">Notes for the sound engineer</label><textarea class="form-control retro-input" id="f-notes" rows="3">Bass drops out on track 7 below volume 40. Tested on the AudioPro 32.</textarea></div>
<fieldset class="retro-group"><legend class="retro-group__legend">Output</legend>
<div class="retro-cluster"><div class="form-check retro-fc"><input class="form-check-input" type="radio" id="o1" checked name="out"><label class="form-check-label" for="o1">Speakers</label></div><div class="form-check retro-fc"><input class="form-check-input" type="radio" id="o2" name="out"><label class="form-check-label" for="o2">Headphones</label></div><div class="form-check retro-fc"><input class="form-check-input" type="checkbox" id="o3" checked><label class="form-check-label" for="o3">Surround</label></div></div>
</fieldset>
<div class="retro-actions"><button class="btn btn-retro btn-retro-default" type="button">OK</button><button class="btn btn-retro" type="button">Cancel</button></div>
</div>
</div>

</section>
</section>
<section><span class="lbl">Login dialog window</span>
<section class="card retro-window" aria-labelledby="w-logon">
<div class="card-header retro-titlebar">
  <h2 class="retro-titlebar__title" id="w-logon"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-key"/></svg><span>Log On to Moonbyte Net</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Help Log On dialog"><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-help"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Log On dialog"><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="card-body retro-window__body">
<form action="#">
<div class="retro-intro"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-globe"/></svg><p>Type a user name and password to log on to Moonbyte Net. Ask your network administrator if you have forgotten them.</p></div>
<div class="retro-formrow">
<label class="form-label retro-label" for="l-user">User name</label><input class="form-control retro-input" id="l-user" type="text" value="dkowalski" autocomplete="username">
<label class="form-label retro-label" for="l-pass">Password</label><input class="form-control retro-input" id="l-pass" type="password" autocomplete="current-password">
<label class="form-label retro-label" for="l-domain">Log on to</label><div class="retro-select"><select class="form-select retro-input" id="l-domain"><option selected>MOONBYTE</option><option>ARCADE-LAN</option><option>This computer</option></select></div>
</div>
<div class="retro-mt"><div class="form-check retro-fc"><input class="form-check-input" type="checkbox" id="l-keep"><label class="form-check-label" for="l-keep">Remember my password on this computer</label></div></div>
<div class="retro-actions retro-mt"><button class="btn btn-retro btn-retro-default" type="submit">OK</button><button class="btn btn-retro" type="button">Cancel</button><button class="btn btn-retro" type="button">Shut Down…</button></div>
</form>
</div>

</section>
</section>
</div>

/* ── Retro UI kit tokens (uiCookies) — identical in every set ─────────────
   A classic desktop OS look: grey bevelled faces, navy title bars, sunken white fields on a dithered teal desktop.
   Bevels are four 1px inset shadows built from --retro-hilite, --retro-light, --retro-shadow and --retro-dark,
   so one change to a token re-colours every button, field and window in the kit. */
:root{
  --retro-desk:#006e6e;        /* desktop behind the windows */
  --retro-desk-text:#ffffff;   /* captions and icon labels on the desktop, 6.1:1 */
  --retro-desk-dither:rgba(0,0,0,.22);
  --retro-face:#c0c0c0;        /* window, button and bar faces */
  --retro-hilite:#ffffff;      /* bevel: outer light edge */
  --retro-light:#dfdfdf;       /* bevel: inner light edge */
  --retro-shadow:#808080;      /* bevel: inner dark edge */
  --retro-dark:#0a0a0a;        /* bevel: outer dark edge */
  --retro-text:#000000;        /* text on faces, 11.5:1 */
  --retro-muted:#3d3d3d;       /* secondary text on faces, 6:1 */
  --retro-field:#ffffff;       /* inputs, lists and document areas */
  --retro-field-text:#000000;
  --retro-title:#000080;       /* active title bar gradient, white text 6.3:1 or more */
  --retro-title-2:#1060b0;
  --retro-title-text:#ffffff;
  --retro-idle:#5a5a5a;        /* inactive title bar gradient, white text 5.3:1 or more */
  --retro-idle-2:#6b6b6b;
  --retro-idle-text:#ffffff;
  --retro-select:#000080;      /* highlighted menu items, rows and dates */
  --retro-select-text:#ffffff;
  --retro-link:#0000cc;        /* 6.2:1 on faces */
  --retro-danger:#8a0000;      /* error text, 5.5:1 on faces */
  --retro-tip:#ffffe1;         /* tooltips and balloons */
  --retro-tip-text:#000000;
  --retro-tip-line:#000000;
  --retro-lcd:#0b1a0b;         /* LCD read-outs */
  --retro-lcd-text:#4dff4d;
  --retro-accent:#000080;      /* progress chunks */
  --retro-disabled:#808080;    /* disabled text, embossed */
  --retro-emboss:#ffffff;
  --retro-dither-a:#ffffff;    /* checkerboard behind a latched toggle */
  --retro-dither-b:#c0c0c0;
  --retro-focus:#000000;       /* dotted focus rectangle */
  --retro-glow:0 0 #0000;      /* the synthwave theme adds a neon glow to windows */
  --retro-neon-pink:#ff3fa4;--retro-neon-cyan:#00e5ff;--retro-sun-1:#ffd23f;--retro-sun-2:#ff3fa4;
  --retro-font:Tahoma,"Microsoft Sans Serif","MS Sans Serif",Geneva,Verdana,"Segoe UI",sans-serif;
  --retro-mono:"VT323","Fixedsys","Lucida Console",Consolas,Menlo,"Courier New",ui-monospace,monospace;
}
/* Synthwave 80s night theme: data-retro="synthwave" on any wrapper, or a checked .retro-theme-input inside a
   [data-retro] element. :is() is a forgiving list, so browsers without :has() still apply the attribute. */
[data-retro]:is([data-retro="synthwave"],:has(.retro-theme-input:checked)){
  --retro-desk:#14062b;--retro-desk-text:#fff1fb;--retro-desk-dither:rgba(255,63,164,.16);
  --retro-face:#261047;--retro-hilite:#ff6ec7;--retro-light:#a05cff;--retro-shadow:#0d0420;--retro-dark:#000000;
  --retro-text:#fff1fb;--retro-muted:#dcc6ff;--retro-field:#0e0322;--retro-field-text:#fff1fb;
  --retro-title:#ff8a3d;--retro-title-2:#ff3fa4;--retro-title-text:#1b0030;
  --retro-idle:#4a2d6e;--retro-idle-2:#5c3a85;--retro-idle-text:#f3e8ff;
  --retro-select:#00e5ff;--retro-select-text:#14062b;--retro-link:#7cf3ff;--retro-danger:#ff8fa3;
  --retro-tip:#2b1352;--retro-tip-text:#fff1fb;--retro-tip-line:#ff6ec7;
  --retro-lcd:#07010f;--retro-lcd-text:#ff5fd2;--retro-accent:#ff3fa4;
  --retro-disabled:#8a72b0;--retro-emboss:transparent;--retro-dither-a:#3d1a6e;--retro-dither-b:#261047;
  --retro-focus:#5ff4ff;--retro-glow:0 0 0 1px rgba(255,63,164,.45),0 0 22px rgba(255,63,164,.35);color-scheme:dark}
/* More contrast requested: secondary text turns full strength and the glow goes */
@media (prefers-contrast:more){:root,[data-retro],[data-retro]:is([data-retro="synthwave"],:has(.retro-theme-input:checked)){--retro-muted:var(--retro-text);--retro-glow:0 0 #0000}}
:root,[data-retro]{
  --retro-out:inset -1px -1px var(--retro-dark),inset 1px 1px var(--retro-hilite),inset -2px -2px var(--retro-shadow),inset 2px 2px var(--retro-light);
  --retro-in:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-dark),inset -2px -2px var(--retro-light),inset 2px 2px var(--retro-shadow);
  --retro-out-default:inset 0 0 0 1px var(--retro-dark),inset -2px -2px var(--retro-dark),inset 2px 2px var(--retro-hilite),inset -3px -3px var(--retro-shadow),inset 3px 3px var(--retro-light);
  --retro-in-default:inset 0 0 0 1px var(--retro-dark),inset 2px 2px var(--retro-shadow),inset -2px -2px var(--retro-shadow);
  --retro-sunken:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-shadow),inset -2px -2px var(--retro-light),inset 2px 2px var(--retro-dark);
  --retro-frame:inset -1px -1px var(--retro-dark),inset 1px 1px var(--retro-light),inset -2px -2px var(--retro-shadow),inset 2px 2px var(--retro-hilite);
  --retro-window:var(--retro-frame),var(--retro-glow);
  --retro-thin-in:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-shadow);
  --retro-thin-out:inset -1px -1px var(--retro-shadow),inset 1px 1px var(--retro-hilite);
  --retro-title-bg:linear-gradient(90deg,var(--retro-title),var(--retro-title-2));
  --retro-idle-bg:linear-gradient(90deg,var(--retro-idle),var(--retro-idle-2));
  --retro-dither:repeating-conic-gradient(var(--retro-dither-a) 0 25%,var(--retro-dither-b) 0 50%) 0 0/2px 2px;
  --retro-wallpaper:radial-gradient(var(--retro-desk-dither) 1px,transparent 1.5px) 0 0/4px 4px,var(--retro-desk);
  --retro-check-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%207'%20shape-rendering='crispEdges'%3E%3Crect%20x='6'%20y='0'%20width='1'%20height='1'%20fill='%23000'/%3E%3Crect%20x='5'%20y='1'%20width='2'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23000'/%3E%3Crect%20x='4'%20y='2'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='3'%20width='2'%20height='1'%20fill='%23000'/%3E%3Crect%20x='3'%20y='3'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='4'%20width='5'%20height='1'%20fill='%23000'/%3E%3Crect%20x='1'%20y='5'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='2'%20y='6'%20width='1'%20height='1'%20fill='%23000'/%3E%3C/svg%3E");
  --retro-arrow-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%204'%20shape-rendering='crispEdges'%3E%3Crect%20x='0'%20y='0'%20width='7'%20height='1'%20fill='%23000'/%3E%3Crect%20x='1'%20y='1'%20width='5'%20height='1'%20fill='%23000'/%3E%3Crect%20x='2'%20y='2'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='3'%20y='3'%20width='1'%20height='1'%20fill='%23000'/%3E%3C/svg%3E");
}
[data-retro]{color:var(--retro-text);font-family:var(--retro-font)}
/* Bootstrap's own variables mapped onto the kit tokens */
:root,[data-retro]{--bs-body-bg:var(--retro-desk);--bs-body-color:var(--retro-text);--bs-body-font-family:var(--retro-font);--bs-emphasis-color:var(--retro-text);
  --bs-secondary-color:var(--retro-muted);--bs-border-color:var(--retro-shadow);--bs-border-radius:0;--bs-border-radius-sm:0;--bs-border-radius-lg:0;
  --bs-link-color:var(--retro-link);--bs-link-hover-color:var(--retro-link);--bs-focus-ring-color:var(--retro-focus)}
/* Components */
:where([class*="retro-"]),:where([class*="retro-"])::before,:where([class*="retro-"])::after{box-sizing:border-box}
.retro-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.retro-ico{display:block;flex:none;width:16px;height:16px;shape-rendering:crispEdges}
.retro-ico--md{width:24px;height:24px}
.retro-ico--lg{width:32px;height:32px}
.retro-glyph{display:block;flex:none;shape-rendering:crispEdges}
.retro-link{color:var(--retro-link);text-decoration:underline;text-underline-offset:2px}
.retro-link:hover{color:var(--retro-link);text-decoration-thickness:2px}
.retro-link:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-muted{color:var(--retro-muted)}
.retro-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.retro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:24px;align-items:start}
.retro-stack{display:grid;gap:10px}
/* Buttons: Bootstrap .btn with a .btn-retro variant set through --bs-btn-* variables */
.btn-retro{--bs-btn-padding-x:14px;--bs-btn-padding-y:5px;--bs-btn-font-family:var(--retro-font);--bs-btn-font-size:.875rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.2;
  --bs-btn-border-width:0;--bs-btn-border-radius:0;--bs-btn-bg:var(--retro-face);--bs-btn-color:var(--retro-text);--bs-btn-hover-bg:var(--retro-face);--bs-btn-hover-color:var(--retro-text);
  --bs-btn-active-bg:var(--retro-face);--bs-btn-active-color:var(--retro-text);--bs-btn-disabled-bg:var(--retro-face);--bs-btn-disabled-color:var(--retro-disabled);--bs-btn-disabled-opacity:1;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:88px;min-height:32px;box-shadow:var(--retro-out)}
.btn-retro:active,.btn-retro.active,.btn-retro.show,.btn-check:checked+.btn-retro{box-shadow:var(--retro-in)}
.btn-retro:focus-visible,.btn-check:focus-visible+.btn-retro{box-shadow:var(--retro-out);outline:2px dotted var(--retro-focus);outline-offset:-6px}
.btn-check:checked:focus-visible+.btn-retro{box-shadow:var(--retro-in)}
.btn-retro:disabled{text-shadow:1px 1px 0 var(--retro-emboss)}
.btn-retro:disabled .retro-ico{opacity:.5}
.btn-retro-default{--bs-btn-font-weight:700;box-shadow:var(--retro-out-default)}
.btn-retro-default:focus-visible{box-shadow:var(--retro-out-default)}
.btn-retro-default:active{box-shadow:var(--retro-in-default)}
.btn-retro.btn-sm{--bs-btn-padding-x:10px;--bs-btn-padding-y:3px;--bs-btn-font-size:.8125rem;min-width:0;min-height:26px}
.btn-retro.btn-lg{--bs-btn-padding-x:22px;--bs-btn-padding-y:8px;--bs-btn-font-size:1rem;--bs-btn-font-weight:700;min-height:42px}
/* Checkboxes and radios: Bootstrap .form-check, with the input redrawn as a sunken well and a pixel tick */
.form-check.retro-fc{display:flex;align-items:center;gap:8px;min-height:24px;margin:0;padding:0;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font)}
.retro-fc .form-check-input{display:grid;place-content:center;flex:none;float:none;width:16px;height:16px;margin:0;border:0;border-radius:0;background:var(--retro-field);box-shadow:var(--retro-sunken);cursor:pointer}
.retro-fc .form-check-input:checked{background:var(--retro-field);background-image:none}
.retro-fc .form-check-input::before{content:"";width:10px;height:10px;background:var(--retro-field-text);
  -webkit-mask:var(--retro-check-mask) center/contain no-repeat;mask:var(--retro-check-mask) center/contain no-repeat;scale:0}
.retro-fc .form-check-input[type="radio"]{border-radius:50%}
.retro-fc .form-check-input[type="radio"]::before{width:6px;height:6px;border-radius:50%;-webkit-mask:none;mask:none}
.retro-fc .form-check-input:checked::before{scale:1}
.retro-fc .form-check-input:focus{box-shadow:var(--retro-sunken);outline:0}
.retro-fc .form-check-input:focus-visible+.form-check-label{outline:2px dotted var(--retro-focus);outline-offset:1px}
.retro-fc .form-check-label{cursor:pointer}
.retro-fc .form-check-input:disabled{background:var(--retro-face);opacity:1}
.retro-fc .form-check-input:disabled::before{background:var(--retro-disabled)}
.retro-fc .form-check-input:disabled~.form-check-label{color:var(--retro-disabled);text-shadow:1px 1px 0 var(--retro-emboss);opacity:1}
/* Group box: an etched frame with the legend sitting in the line */
.retro-group{min-width:0;margin:0;padding:10px 12px 12px;border:1px solid var(--retro-shadow);border-radius:0;box-shadow:inset 1px 1px var(--retro-hilite),1px 1px var(--retro-hilite)}
.retro-group__legend{float:none;width:auto;margin:0;padding:0 4px;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font)}
/* Window: a bevelled frame, a gradient title bar with labelled controls, a body and an optional status bar */
.retro-window{display:flex;flex-direction:column;min-width:0;padding:3px;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-window);font:400 .875rem/1.4 var(--retro-font)}
.retro-window :where(h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
.retro-titlebar{display:flex;align-items:center;gap:6px;min-height:28px;padding:2px 3px 2px 5px;background:var(--retro-title-bg);color:var(--retro-title-text)}
.retro-titlebar--idle{background:var(--retro-idle-bg);color:var(--retro-idle-text)}
.retro-titlebar__title{display:flex;align-items:center;gap:6px;flex:1;min-width:0;margin:0;color:inherit;font:700 .875rem/1.2 var(--retro-font)}
.retro-titlebar__title span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retro-titlebar__controls{display:flex;flex:none;gap:2px}
.retro-ctl{display:grid;place-items:center;width:24px;height:22px;margin:0;padding:0;border:0;border-radius:0;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-out);cursor:pointer}
.retro-ctl:active{box-shadow:var(--retro-in)}
.retro-ctl:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:-5px}
.retro-ctl--close{margin-left:2px}
.retro-window__body{padding:12px 10px}
.retro-statusbar{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}
.retro-statusbar>*{flex:1 1 auto;padding:3px 7px;box-shadow:var(--retro-thin-in);font-size:.8125rem}
/* Windows: Bootstrap .card with the header as a title bar */
.card.retro-window{--bs-card-bg:var(--retro-face);--bs-card-color:var(--retro-text);--bs-card-border-width:0;--bs-card-border-radius:0;--bs-card-inner-border-radius:0;
  --bs-card-spacer-y:12px;--bs-card-spacer-x:10px;--bs-card-cap-padding-y:2px;--bs-card-cap-padding-x:5px;--bs-card-cap-bg:transparent;--bs-card-cap-color:var(--retro-title-text)}
.card-header.retro-titlebar{border-bottom:0;padding:2px 3px 2px 5px}
.card-header.retro-titlebar:first-child{border-radius:0}
.card-footer.retro-statusbar{padding:0;border-top:0;background:transparent}
.card-footer.retro-statusbar:last-child{border-radius:0}
.card-footer.retro-statusbar{color:var(--retro-text)}
/* Panel: a window face without a title bar, for grouping controls */
.retro-panel{min-width:0;padding:14px;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-window);font:400 .875rem/1.4 var(--retro-font)}
.retro-panel :where(h2,h3,p,ul,ol){margin:0}
.retro-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.retro-formrow{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);align-items:center;gap:6px 10px}
.retro-formrow .retro-label{margin:0}
@media (max-width:480px){.retro-formrow{grid-template-columns:minmax(0,1fr)}}
/* Fields: sunken wells. Errors add a red frame, an icon and a message tied to the field */
.retro-label{display:block;margin:0 0 4px;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font)}
.retro-input{display:block;width:100%;min-height:30px;margin:0;padding:5px 7px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);
  box-shadow:var(--retro-sunken);font:400 .875rem/1.3 var(--retro-font)}
.retro-input::placeholder{color:var(--retro-muted);opacity:1}
.retro-input:focus{outline:0}
.retro-input:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-input:disabled{background:var(--retro-face);color:var(--retro-disabled)}
.retro-input[aria-invalid="true"]{box-shadow:var(--retro-sunken),0 0 0 2px var(--retro-danger)}
textarea.retro-input{min-height:96px;resize:vertical;scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-hint{margin:4px 0 0;color:var(--retro-muted);font-size:.8125rem}
.retro-error{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;color:var(--retro-danger);font-size:.8125rem;font-weight:700}
.retro-select{position:relative;display:block}
.retro-select select{appearance:none;cursor:pointer;padding-right:34px}
.retro-select::before{content:"";position:absolute;top:2px;right:2px;bottom:2px;width:24px;background:var(--retro-face);box-shadow:var(--retro-out);pointer-events:none}
.retro-select::after{content:"";position:absolute;top:50%;right:10px;width:7px;height:4px;margin-top:-2px;background:var(--retro-text);
  -webkit-mask:var(--retro-arrow-mask) center/contain no-repeat;mask:var(--retro-arrow-mask) center/contain no-repeat;pointer-events:none}
.retro-select option,.retro-list option{background:var(--retro-field);color:var(--retro-field-text)}
.retro-list{display:block;width:100%;margin:0;padding:3px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);
  font:400 .875rem/1.3 var(--retro-font);scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-list option{padding:3px 6px}
.retro-list option:checked{background:var(--retro-select) linear-gradient(var(--retro-select),var(--retro-select));color:var(--retro-select-text)}
.retro-list:focus{outline:0}
.retro-list:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
/* Fields: Bootstrap .form-control and .form-select redrawn as sunken wells */
.form-control.retro-input,.form-select.retro-input{min-height:30px;padding:5px 7px;border:0;border-radius:0;background-color:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);font:400 .875rem/1.3 var(--retro-font)}
.form-control.retro-input:focus,.form-select.retro-input:focus{border:0;background-color:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken)}
.form-control.retro-input[aria-invalid="true"]{box-shadow:var(--retro-sunken),0 0 0 2px var(--retro-danger)}
.form-control.retro-input:disabled{background:var(--retro-face);color:var(--retro-disabled)}
.form-select.retro-input{background-image:none;padding-right:34px}
textarea.form-control.retro-input{min-height:96px}
.form-select.retro-list,.form-select.retro-list[size]:not([size="1"]){padding:3px;border:0;border-radius:0;background-image:none;box-shadow:var(--retro-sunken)}
.form-select.retro-list:focus{border:0;box-shadow:var(--retro-sunken)}
.form-label.retro-label{margin-bottom:4px}
/* Trackbar: a native range input with a sunken groove and a raised rectangular thumb */
.retro-range{display:block;width:100%;height:28px;margin:0;background:transparent;appearance:none;cursor:pointer}
.retro-range::-webkit-slider-runnable-track{height:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-range::-moz-range-track{height:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-range::-webkit-slider-thumb{width:12px;height:22px;margin-top:-8px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out);appearance:none}
.retro-range::-moz-range-thumb{width:12px;height:22px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out)}
.retro-range:focus{outline:0}
.retro-range:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-scale{display:flex;justify-content:space-between;margin-top:2px;color:var(--retro-muted);font-size:.8125rem}
.form-range.retro-range{height:28px}
.form-range.retro-range::-webkit-slider-thumb{width:12px;height:22px;margin-top:-8px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out)}
.form-range.retro-range::-moz-range-thumb{width:12px;height:22px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out)}
.form-range.retro-range::-webkit-slider-runnable-track{height:6px;border-radius:0;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.form-range.retro-range::-moz-range-track{height:6px;border-radius:0;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.form-range.retro-range:focus::-webkit-slider-thumb,.form-range.retro-range:focus::-moz-range-thumb{box-shadow:var(--retro-out)}
.retro-intro{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.retro-mt{margin-top:14px}
@media (prefers-reduced-motion:reduce){[class*="retro-"],[class*="retro-"]::before,[class*="retro-"]::after{transition:none!important;animation:none!important}}

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="rg-close" viewBox="0 0 10 9"><rect x="0" y="0" width="2" height="1" fill="currentColor"/><rect x="8" y="0" width="2" height="1" fill="currentColor"/><rect x="1" y="1" width="2" height="1" fill="currentColor"/><rect x="7" y="1" width="2" height="1" fill="currentColor"/><rect x="2" y="2" width="2" height="1" fill="currentColor"/><rect x="6" y="2" width="2" height="1" fill="currentColor"/><rect x="3" y="3" width="4" height="1" fill="currentColor"/><rect x="4" y="4" width="2" height="1" fill="currentColor"/><rect x="3" y="5" width="4" height="1" fill="currentColor"/><rect x="2" y="6" width="2" height="1" fill="currentColor"/><rect x="6" y="6" width="2" height="1" fill="currentColor"/><rect x="1" y="7" width="2" height="1" fill="currentColor"/><rect x="7" y="7" width="2" height="1" fill="currentColor"/><rect x="0" y="8" width="2" height="1" fill="currentColor"/><rect x="8" y="8" width="2" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-error" viewBox="0 0 16 16"><rect x="5" y="0" width="6" height="1" fill="#000000"/><rect x="3" y="1" width="2" height="1" fill="#000000"/><rect x="5" y="1" width="6" height="1" fill="#d00000"/><rect x="11" y="1" width="2" height="1" fill="#000000"/><rect x="2" y="2" width="1" height="1" fill="#000000"/><rect x="3" y="2" width="10" height="1" fill="#d00000"/><rect x="13" y="2" width="1" height="1" fill="#000000"/><rect x="1" y="3" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="2" height="1" fill="#d00000"/><rect x="4" y="3" width="2" height="1" fill="#ffffff"/><rect x="6" y="3" width="4" height="1" fill="#d00000"/><rect x="10" y="3" width="2" height="1" fill="#ffffff"/><rect x="12" y="3" width="2" height="1" fill="#d00000"/><rect x="14" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="4" width="2" height="1" fill="#d00000"/><rect x="4" y="4" width="3" height="1" fill="#ffffff"/><rect x="7" y="4" width="2" height="1" fill="#d00000"/><rect x="9" y="4" width="3" height="1" fill="#ffffff"/><rect x="12" y="4" width="2" height="1" fill="#d00000"/><rect x="14" y="4" width="1" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="4" height="1" fill="#d00000"/><rect x="5" y="5" width="6" height="1" fill="#ffffff"/><rect x="11" y="5" width="4" height="1" fill="#d00000"/><rect x="15" y="5" width="1" height="1" fill="#000000"/><rect x="0" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="5" height="1" fill="#d00000"/><rect x="6" y="6" width="4" height="1" fill="#ffffff"/><rect x="10" y="6" width="5" height="1" fill="#d00000"/><rect x="15" y="6" width="1" height="1" fill="#000000"/><rect x="0" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="5" height="1" fill="#d00000"/><rect x="6" y="7" width="4" height="1" fill="#ffffff"/><rect x="10" y="7" width="5" height="1" fill="#d00000"/><rect x="15" y="7" width="1" height="1" fill="#000000"/><rect x="0" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="4" height="1" fill="#d00000"/><rect x="5" y="8" width="6" height="1" fill="#ffffff"/><rect x="11" y="8" width="4" height="1" fill="#d00000"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="2" height="1" fill="#d00000"/><rect x="4" y="9" width="3" height="1" fill="#ffffff"/><rect x="7" y="9" width="2" height="1" fill="#d00000"/><rect x="9" y="9" width="3" height="1" fill="#ffffff"/><rect x="12" y="9" width="2" height="1" fill="#d00000"/><rect x="14" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="2" height="1" fill="#d00000"/><rect x="4" y="10" width="2" height="1" fill="#ffffff"/><rect x="6" y="10" width="4" height="1" fill="#d00000"/><rect x="10" y="10" width="2" height="1" fill="#ffffff"/><rect x="12" y="10" width="2" height="1" fill="#d00000"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="11" width="10" height="1" fill="#d00000"/><rect x="13" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="2" height="1" fill="#000000"/><rect x="5" y="12" width="6" height="1" fill="#d00000"/><rect x="11" y="12" width="2" height="1" fill="#000000"/><rect x="5" y="13" width="6" height="1" fill="#000000"/></symbol>
  <symbol id="ri-globe" viewBox="0 0 16 16"><rect x="4" y="1" width="8" height="1" fill="#000000"/><rect x="3" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="2" width="3" height="1" fill="#1e6fd9"/><rect x="7" y="2" width="2" height="1" fill="#1fa31f"/><rect x="9" y="2" width="3" height="1" fill="#1e6fd9"/><rect x="12" y="2" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="1" height="1" fill="#000000"/><rect x="3" y="3" width="4" height="1" fill="#1e6fd9"/><rect x="7" y="3" width="2" height="1" fill="#1fa31f"/><rect x="9" y="3" width="4" height="1" fill="#1e6fd9"/><rect x="13" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="4" width="1" height="1" fill="#1e6fd9"/><rect x="3" y="4" width="6" height="1" fill="#1fa31f"/><rect x="9" y="4" width="5" height="1" fill="#1e6fd9"/><rect x="14" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="1" height="1" fill="#000000"/><rect x="2" y="5" width="1" height="1" fill="#1e6fd9"/><rect x="3" y="5" width="6" height="1" fill="#1fa31f"/><rect x="9" y="5" width="5" height="1" fill="#1e6fd9"/><rect x="14" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="1" height="1" fill="#000000"/><rect x="2" y="6" width="1" height="1" fill="#1e6fd9"/><rect x="3" y="6" width="6" height="1" fill="#1fa31f"/><rect x="9" y="6" width="5" height="1" fill="#1e6fd9"/><rect x="14" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="1" height="1" fill="#000000"/><rect x="2" y="7" width="12" height="1" fill="#1fa31f"/><rect x="14" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="1" height="1" fill="#000000"/><rect x="2" y="8" width="12" height="1" fill="#1fa31f"/><rect x="14" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="5" height="1" fill="#1e6fd9"/><rect x="7" y="9" width="6" height="1" fill="#1fa31f"/><rect x="13" y="9" width="1" height="1" fill="#1e6fd9"/><rect x="14" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="5" height="1" fill="#1e6fd9"/><rect x="7" y="10" width="6" height="1" fill="#1fa31f"/><rect x="13" y="10" width="1" height="1" fill="#1e6fd9"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="5" height="1" fill="#1e6fd9"/><rect x="7" y="11" width="6" height="1" fill="#1fa31f"/><rect x="13" y="11" width="1" height="1" fill="#1e6fd9"/><rect x="14" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="4" height="1" fill="#1e6fd9"/><rect x="7" y="12" width="6" height="1" fill="#1fa31f"/><rect x="13" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="1" height="1" fill="#000000"/><rect x="4" y="13" width="3" height="1" fill="#1e6fd9"/><rect x="7" y="13" width="2" height="1" fill="#1fa31f"/><rect x="9" y="13" width="3" height="1" fill="#1e6fd9"/><rect x="12" y="13" width="1" height="1" fill="#000000"/><rect x="4" y="14" width="8" height="1" fill="#000000"/></symbol>
  <symbol id="rg-help" viewBox="0 0 7 9"><rect x="1" y="0" width="5" height="1" fill="currentColor"/><rect x="0" y="1" width="2" height="1" fill="currentColor"/><rect x="5" y="1" width="2" height="1" fill="currentColor"/><rect x="5" y="2" width="2" height="1" fill="currentColor"/><rect x="4" y="3" width="2" height="1" fill="currentColor"/><rect x="3" y="4" width="2" height="1" fill="currentColor"/><rect x="3" y="5" width="2" height="1" fill="currentColor"/><rect x="3" y="7" width="2" height="1" fill="currentColor"/><rect x="3" y="8" width="2" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-key" viewBox="0 0 16 16"><rect x="2" y="3" width="4" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="4" width="4" height="1" fill="#ffd84a"/><rect x="6" y="4" width="1" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="2" height="1" fill="#ffd84a"/><rect x="3" y="5" width="2" height="1" fill="#000000"/><rect x="5" y="5" width="2" height="1" fill="#ffd84a"/><rect x="7" y="5" width="1" height="1" fill="#000000"/><rect x="0" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="1" height="1" fill="#ffd84a"/><rect x="2" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="6" width="2" height="1" fill="#ffffff"/><rect x="5" y="6" width="1" height="1" fill="#000000"/><rect x="6" y="6" width="1" height="1" fill="#ffd84a"/><rect x="7" y="6" width="1" height="1" fill="#000000"/><rect x="0" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="1" height="1" fill="#ffd84a"/><rect x="2" y="7" width="1" height="1" fill="#000000"/><rect x="3" y="7" width="2" height="1" fill="#ffffff"/><rect x="5" y="7" width="1" height="1" fill="#000000"/><rect x="6" y="7" width="1" height="1" fill="#ffd84a"/><rect x="7" y="7" width="8" height="1" fill="#000000"/><rect x="0" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="2" height="1" fill="#ffd84a"/><rect x="3" y="8" width="2" height="1" fill="#000000"/><rect x="5" y="8" width="10" height="1" fill="#ffd84a"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="5" height="1" fill="#ffd84a"/><rect x="7" y="9" width="4" height="1" fill="#000000"/><rect x="11" y="9" width="1" height="1" fill="#ffd84a"/><rect x="12" y="9" width="1" height="1" fill="#000000"/><rect x="13" y="9" width="2" height="1" fill="#ffd84a"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="5" height="1" fill="#000000"/><rect x="11" y="10" width="4" height="1" fill="#000000"/></symbol>
  <symbol id="ri-speaker" viewBox="0 0 16 16"><rect x="6" y="1" width="1" height="1" fill="#000000"/><rect x="5" y="2" width="2" height="1" fill="#000000"/><rect x="12" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="3" width="1" height="1" fill="#000000"/><rect x="5" y="3" width="1" height="1" fill="#c0c0c0"/><rect x="6" y="3" width="1" height="1" fill="#000000"/><rect x="9" y="3" width="1" height="1" fill="#000000"/><rect x="13" y="3" width="1" height="1" fill="#000000"/><rect x="0" y="4" width="4" height="1" fill="#000000"/><rect x="4" y="4" width="2" height="1" fill="#c0c0c0"/><rect x="6" y="4" width="1" height="1" fill="#000000"/><rect x="10" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="1" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="5" width="1" height="1" fill="#000000"/><rect x="8" y="5" width="1" height="1" fill="#000000"/><rect x="11" y="5" width="1" height="1" fill="#000000"/><rect x="14" y="5" width="1" height="1" fill="#000000"/><rect x="0" y="6" width="1" height="1" fill="#000000"/><rect x="1" y="6" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="6" width="1" height="1" fill="#000000"/><rect x="9" y="6" width="1" height="1" fill="#000000"/><rect x="11" y="6" width="1" height="1" fill="#000000"/><rect x="14" y="6" width="1" height="1" fill="#000000"/><rect x="0" y="7" width="1" height="1" fill="#000000"/><rect x="1" y="7" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="7" width="1" height="1" fill="#000000"/><rect x="9" y="7" width="1" height="1" fill="#000000"/><rect x="11" y="7" width="1" height="1" fill="#000000"/><rect x="14" y="7" width="1" height="1" fill="#000000"/><rect x="0" y="8" width="1" height="1" fill="#000000"/><rect x="1" y="8" width="5" height="1" fill="#c0c0c0"/><rect x="6" y="8" width="1" height="1" fill="#000000"/><rect x="8" y="8" width="1" height="1" fill="#000000"/><rect x="11" y="8" width="1" height="1" fill="#000000"/><rect x="14" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="4" height="1" fill="#000000"/><rect x="4" y="9" width="2" height="1" fill="#c0c0c0"/><rect x="6" y="9" width="1" height="1" fill="#000000"/><rect x="10" y="9" width="1" height="1" fill="#000000"/><rect x="13" y="9" width="1" height="1" fill="#000000"/><rect x="4" y="10" width="1" height="1" fill="#000000"/><rect x="5" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="6" y="10" width="1" height="1" fill="#000000"/><rect x="9" y="10" width="1" height="1" fill="#000000"/><rect x="13" y="10" width="1" height="1" fill="#000000"/><rect x="5" y="11" width="2" height="1" fill="#000000"/><rect x="12" y="11" width="1" height="1" fill="#000000"/><rect x="6" y="12" width="1" height="1" fill="#000000"/></symbol>
</svg>
<section><span class="inline-block mb-3.5 px-2 py-[3px] bg-retro-desk text-retro-desk-text font-retro text-xs leading-[1.3] font-bold tracking-[.08em] uppercase">Text fields · sunken wells with labels, hints and an error tied to its field</span>
<section class="flex flex-col min-w-0 p-[3px] bg-retro-face text-retro-text shadow-retro-window font-retro text-sm leading-[1.4]" aria-labelledby="w-reg">
<div class="flex items-center gap-1.5 min-h-7 py-0.5 pr-[3px] pl-[5px] bg-[image:var(--retro-title-bg)] text-retro-title-text">
  <h2 class="flex items-center gap-1.5 flex-1 min-w-0 m-0 text-inherit font-retro text-sm leading-[1.2] font-bold" id="w-reg"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-key"/></svg><span class="min-w-0 truncate">Register Starfall Racer</span></h2>
  <div class="flex shrink-0 gap-0.5"><button class="grid place-items-center w-6 h-[22px] m-0 p-0 border-0 rounded-none bg-retro-face text-retro-text shadow-retro-out cursor-pointer active:shadow-retro-in focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-5px]" type="button" aria-label="Help Register Starfall Racer"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-help"/></svg></button><button class="grid place-items-center w-6 h-[22px] m-0 p-0 border-0 rounded-none bg-retro-face text-retro-text shadow-retro-out cursor-pointer active:shadow-retro-in focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-5px] ml-0.5" type="button" aria-label="Close Register Starfall Racer"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="px-2.5 py-3">
<form action="#" class="grid gap-2.5">
<div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,250px),1fr))] gap-6 items-start">
<div><label class="block m-0 mb-1 text-retro-text font-retro text-sm leading-[1.3]" for="f-name">Full name</label><input class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="f-name" type="text" value="Ola Brandt" autocomplete="name">
</div>
<div><label class="block m-0 mb-1 text-retro-text font-retro text-sm leading-[1.3]" for="f-mail">Email address</label><input class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="f-mail" type="email" value="[email protected]" aria-describedby="f-mail-hint" autocomplete="email">
<p class="mt-1 mb-0 text-retro-muted text-[.8125rem]" id="f-mail-hint">Your unlock key is sent to this address.</p></div>
<div><label class="block m-0 mb-1 text-retro-text font-retro text-sm leading-[1.3]" for="f-serial">Serial number</label><input class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="f-serial" type="text" value="MBY4-77QX-2KP9" aria-describedby="f-serial-err" aria-invalid="true">
<p class="flex items-start gap-1.5 mt-1.5 mb-0 text-retro-danger text-[.8125rem] font-bold" id="f-serial-err"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-error"/></svg><span><span class="sr-only">Error: </span>A serial number has four groups of four characters. This one has three.</span></p></div>
<div><label class="block m-0 mb-1 text-retro-text font-retro text-sm leading-[1.3]" for="f-seats">Copies</label><input class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="f-seats" type="number" value="3" aria-describedby="f-seats-hint" min="1" max="50">
<p class="mt-1 mb-0 text-retro-muted text-[.8125rem]" id="f-seats-hint">Up to 50 seats per licence.</p></div>
<div><label class="block m-0 mb-1 text-retro-text font-retro text-sm leading-[1.3]" for="f-type">Licence type</label><input class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="f-type" type="text" value="Single studio" disabled>
</div>
<div><label class="block m-0 mb-1 text-retro-text font-retro text-sm leading-[1.3]" for="f-country">Country</label><div class="relative block before:content-[''] before:absolute before:top-0.5 before:right-0.5 before:bottom-0.5 before:w-6 before:bg-retro-face before:shadow-retro-out before:pointer-events-none after:content-[''] after:absolute after:top-1/2 after:right-2.5 after:w-[7px] after:h-1 after:-mt-0.5 after:bg-retro-text after:[-webkit-mask:var(--retro-arrow-mask)_center/contain_no-repeat] after:[mask:var(--retro-arrow-mask)_center/contain_no-repeat] after:pointer-events-none"><select class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px] appearance-none cursor-pointer pr-[34px]" id="f-country"><option selected>Norway</option><option>Poland</option><option>Portugal</option><option>Japan</option><option>Canada</option></select></div></div>
</div>
<div class="flex flex-wrap justify-end gap-2"><button class="inline-flex items-center justify-center gap-1.5 m-0 border-0 rounded-none bg-retro-face text-retro-text font-retro leading-[1.2] text-center no-underline cursor-pointer hover:text-retro-text disabled:text-retro-disabled disabled:[text-shadow:1px_1px_0_var(--retro-emboss)] disabled:cursor-default disabled:[&_.retro-i]:opacity-50 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-6px] min-w-[88px] min-h-8 px-3.5 py-[5px] text-sm shadow-retro-default enabled:active:shadow-retro-default-in font-bold" type="submit">Register</button><button class="inline-flex items-center justify-center gap-1.5 m-0 border-0 rounded-none bg-retro-face text-retro-text font-retro leading-[1.2] text-center no-underline cursor-pointer hover:text-retro-text disabled:text-retro-disabled disabled:[text-shadow:1px_1px_0_var(--retro-emboss)] disabled:cursor-default disabled:[&_.retro-i]:opacity-50 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-6px] min-w-[88px] min-h-8 px-3.5 py-[5px] text-sm shadow-retro-out enabled:active:shadow-retro-in font-normal" type="button">Cancel</button></div>
</form>
</div>

</section>
</section>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-start">
<section><span class="inline-block mb-3.5 px-2 py-[3px] bg-retro-desk text-retro-desk-text font-retro text-xs leading-[1.3] font-bold tracking-[.08em] uppercase">Select, list box, trackbar and text area</span>
<section class="flex flex-col min-w-0 p-[3px] bg-retro-face text-retro-text shadow-retro-window font-retro text-sm leading-[1.4]" aria-labelledby="w-sound">
<div class="flex items-center gap-1.5 min-h-7 py-0.5 pr-[3px] pl-[5px] bg-[image:var(--retro-title-bg)] text-retro-title-text">
  <h2 class="flex items-center gap-1.5 flex-1 min-w-0 m-0 text-inherit font-retro text-sm leading-[1.2] font-bold" id="w-sound"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-speaker"/></svg><span class="min-w-0 truncate">Sound Settings</span></h2>
  <div class="flex shrink-0 gap-0.5"><button class="grid place-items-center w-6 h-[22px] m-0 p-0 border-0 rounded-none bg-retro-face text-retro-text shadow-retro-out cursor-pointer active:shadow-retro-in focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-5px]" type="button" aria-label="Help Sound Settings"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-help"/></svg></button><button class="grid place-items-center w-6 h-[22px] m-0 p-0 border-0 rounded-none bg-retro-face text-retro-text shadow-retro-out cursor-pointer active:shadow-retro-in focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-5px] ml-0.5" type="button" aria-label="Close Sound Settings"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="px-2.5 py-3">
<div class="grid gap-2.5">
<div><label class="block m-0 mb-1 text-retro-text font-retro text-sm leading-[1.3]" for="f-card">Sound card</label><div class="relative block before:content-[''] before:absolute before:top-0.5 before:right-0.5 before:bottom-0.5 before:w-6 before:bg-retro-face before:shadow-retro-out before:pointer-events-none after:content-[''] after:absolute after:top-1/2 after:right-2.5 after:w-[7px] after:h-1 after:-mt-0.5 after:bg-retro-text after:[-webkit-mask:var(--retro-arrow-mask)_center/contain_no-repeat] after:[mask:var(--retro-arrow-mask)_center/contain_no-repeat] after:pointer-events-none"><select class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px] appearance-none cursor-pointer pr-[34px]" id="f-card"><option>SoundWave 16 (IRQ 5)</option><option selected>Moonbyte AudioPro 32</option><option>PC speaker only</option><option>No sound</option></select></div></div>
<div><label class="block m-0 mb-1 text-retro-text font-retro text-sm leading-[1.3]" for="f-chime">Start-up sound</label><select class="block w-full m-0 p-[3px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] [scrollbar-color:var(--retro-shadow)_var(--retro-face)] focus:outline-0 [&_option]:px-1.5 [&_option]:py-[3px] [&_option:checked]:bg-retro-select [&_option:checked]:[background-image:linear-gradient(var(--retro-select),var(--retro-select))] [&_option:checked]:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="f-chime" size="5"><option>Chimes</option><option selected>Synth swell</option><option>Modem hello</option><option>Arcade coin</option><option>Silence</option></select></div>
<div><label class="block m-0 mb-1 text-retro-text font-retro text-sm leading-[1.3]" for="f-vol">Master volume</label><input class="block w-full h-7 m-0 bg-transparent appearance-none cursor-pointer focus:outline-0 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px] [&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:bg-retro-field [&::-webkit-slider-runnable-track]:shadow-retro-sunken [&::-moz-range-track]:h-1.5 [&::-moz-range-track]:bg-retro-field [&::-moz-range-track]:shadow-retro-sunken [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-[22px] [&::-webkit-slider-thumb]:-mt-2 [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:rounded-none [&::-webkit-slider-thumb]:bg-retro-face [&::-webkit-slider-thumb]:shadow-retro-out [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-[22px] [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-none [&::-moz-range-thumb]:bg-retro-face [&::-moz-range-thumb]:shadow-retro-out" id="f-vol" type="range" min="0" max="100" value="70"><div class="flex justify-between mt-0.5 text-retro-muted text-[.8125rem]" aria-hidden="true"><span>Quiet</span><span>Loud</span></div></div>
<div><label class="block m-0 mb-1 text-retro-text font-retro text-sm leading-[1.3]" for="f-notes">Notes for the sound engineer</label><textarea class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px] min-h-24! resize-y [scrollbar-color:var(--retro-shadow)_var(--retro-face)]" id="f-notes" rows="3">Bass drops out on track 7 below volume 40. Tested on the AudioPro 32.</textarea></div>
<fieldset class="min-w-0 m-0 pt-2.5 px-3 pb-3 border border-retro-shadow rounded-none shadow-[inset_1px_1px_var(--retro-hilite),1px_1px_var(--retro-hilite)]"><legend class="float-none w-auto m-0 px-1 text-retro-text font-retro text-sm leading-[1.3]">Output</legend>
<div class="flex flex-wrap items-center gap-2.5"><label class="inline-flex items-center gap-2 min-h-6 m-0 text-retro-text font-retro text-sm leading-[1.3] cursor-pointer"><input class="peer appearance-none grid place-content-center shrink-0 size-4 m-0 border-0 bg-retro-field shadow-retro-sunken cursor-pointer focus-visible:outline-0 before:content-[''] checked:before:scale-100 before:scale-0 disabled:bg-retro-face disabled:cursor-default disabled:before:bg-retro-disabled rounded-full before:size-1.5 before:rounded-full before:bg-retro-field-text" type="radio" checked name="out"><span class="peer-focus-visible:outline-2 peer-focus-visible:outline-dotted peer-focus-visible:outline-retro-focus peer-focus-visible:outline-offset-1 peer-disabled:text-retro-disabled peer-disabled:[text-shadow:1px_1px_0_var(--retro-emboss)]">Speakers</span></label><label class="inline-flex items-center gap-2 min-h-6 m-0 text-retro-text font-retro text-sm leading-[1.3] cursor-pointer"><input class="peer appearance-none grid place-content-center shrink-0 size-4 m-0 border-0 bg-retro-field shadow-retro-sunken cursor-pointer focus-visible:outline-0 before:content-[''] checked:before:scale-100 before:scale-0 disabled:bg-retro-face disabled:cursor-default disabled:before:bg-retro-disabled rounded-full before:size-1.5 before:rounded-full before:bg-retro-field-text" type="radio" name="out"><span class="peer-focus-visible:outline-2 peer-focus-visible:outline-dotted peer-focus-visible:outline-retro-focus peer-focus-visible:outline-offset-1 peer-disabled:text-retro-disabled peer-disabled:[text-shadow:1px_1px_0_var(--retro-emboss)]">Headphones</span></label><label class="inline-flex items-center gap-2 min-h-6 m-0 text-retro-text font-retro text-sm leading-[1.3] cursor-pointer"><input class="peer appearance-none grid place-content-center shrink-0 size-4 m-0 border-0 bg-retro-field shadow-retro-sunken cursor-pointer focus-visible:outline-0 before:content-[''] checked:before:scale-100 before:scale-0 disabled:bg-retro-face disabled:cursor-default disabled:before:bg-retro-disabled rounded-none before:size-2.5 before:bg-retro-field-text before:[-webkit-mask:var(--retro-check-mask)_center/contain_no-repeat] before:[mask:var(--retro-check-mask)_center/contain_no-repeat]" type="checkbox" checked><span class="peer-focus-visible:outline-2 peer-focus-visible:outline-dotted peer-focus-visible:outline-retro-focus peer-focus-visible:outline-offset-1 peer-disabled:text-retro-disabled peer-disabled:[text-shadow:1px_1px_0_var(--retro-emboss)]">Surround</span></label></div>
</fieldset>
<div class="flex flex-wrap justify-end gap-2"><button class="inline-flex items-center justify-center gap-1.5 m-0 border-0 rounded-none bg-retro-face text-retro-text font-retro leading-[1.2] text-center no-underline cursor-pointer hover:text-retro-text disabled:text-retro-disabled disabled:[text-shadow:1px_1px_0_var(--retro-emboss)] disabled:cursor-default disabled:[&_.retro-i]:opacity-50 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-6px] min-w-[88px] min-h-8 px-3.5 py-[5px] text-sm shadow-retro-default enabled:active:shadow-retro-default-in font-bold" type="button">OK</button><button class="inline-flex items-center justify-center gap-1.5 m-0 border-0 rounded-none bg-retro-face text-retro-text font-retro leading-[1.2] text-center no-underline cursor-pointer hover:text-retro-text disabled:text-retro-disabled disabled:[text-shadow:1px_1px_0_var(--retro-emboss)] disabled:cursor-default disabled:[&_.retro-i]:opacity-50 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-6px] min-w-[88px] min-h-8 px-3.5 py-[5px] text-sm shadow-retro-out enabled:active:shadow-retro-in font-normal" type="button">Cancel</button></div>
</div>
</div>

</section>
</section>
<section><span class="inline-block mb-3.5 px-2 py-[3px] bg-retro-desk text-retro-desk-text font-retro text-xs leading-[1.3] font-bold tracking-[.08em] uppercase">Login dialog window</span>
<section class="flex flex-col min-w-0 p-[3px] bg-retro-face text-retro-text shadow-retro-window font-retro text-sm leading-[1.4]" aria-labelledby="w-logon">
<div class="flex items-center gap-1.5 min-h-7 py-0.5 pr-[3px] pl-[5px] bg-[image:var(--retro-title-bg)] text-retro-title-text">
  <h2 class="flex items-center gap-1.5 flex-1 min-w-0 m-0 text-inherit font-retro text-sm leading-[1.2] font-bold" id="w-logon"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-key"/></svg><span class="min-w-0 truncate">Log On to Moonbyte Net</span></h2>
  <div class="flex shrink-0 gap-0.5"><button class="grid place-items-center w-6 h-[22px] m-0 p-0 border-0 rounded-none bg-retro-face text-retro-text shadow-retro-out cursor-pointer active:shadow-retro-in focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-5px]" type="button" aria-label="Help Log On dialog"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-help"/></svg></button><button class="grid place-items-center w-6 h-[22px] m-0 p-0 border-0 rounded-none bg-retro-face text-retro-text shadow-retro-out cursor-pointer active:shadow-retro-in focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-5px] ml-0.5" type="button" aria-label="Close Log On dialog"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="px-2.5 py-3">
<form action="#">
<div class="flex items-start gap-3 mb-3.5"><svg class="retro-i block shrink-0 size-8 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-globe"/></svg><p>Type a user name and password to log on to Moonbyte Net. Ask your network administrator if you have forgotten them.</p></div>
<div class="grid grid-cols-[minmax(0,1fr)] min-[481px]:grid-cols-[minmax(96px,auto)_minmax(0,1fr)] items-center gap-x-2.5 gap-y-1.5">
<label class="block m-0 text-retro-text font-retro text-sm leading-[1.3]" for="l-user">User name</label><input class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="l-user" type="text" value="dkowalski" autocomplete="username">
<label class="block m-0 text-retro-text font-retro text-sm leading-[1.3]" for="l-pass">Password</label><input class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="l-pass" type="password" autocomplete="current-password">
<label class="block m-0 text-retro-text font-retro text-sm leading-[1.3]" for="l-domain">Log on to</label><div class="relative block before:content-[''] before:absolute before:top-0.5 before:right-0.5 before:bottom-0.5 before:w-6 before:bg-retro-face before:shadow-retro-out before:pointer-events-none after:content-[''] after:absolute after:top-1/2 after:right-2.5 after:w-[7px] after:h-1 after:-mt-0.5 after:bg-retro-text after:[-webkit-mask:var(--retro-arrow-mask)_center/contain_no-repeat] after:[mask:var(--retro-arrow-mask)_center/contain_no-repeat] after:pointer-events-none"><select class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px] appearance-none cursor-pointer pr-[34px]" id="l-domain"><option selected>MOONBYTE</option><option>ARCADE-LAN</option><option>This computer</option></select></div>
</div>
<div class="mt-3.5"><label class="inline-flex items-center gap-2 min-h-6 m-0 text-retro-text font-retro text-sm leading-[1.3] cursor-pointer"><input class="peer appearance-none grid place-content-center shrink-0 size-4 m-0 border-0 bg-retro-field shadow-retro-sunken cursor-pointer focus-visible:outline-0 before:content-[''] checked:before:scale-100 before:scale-0 disabled:bg-retro-face disabled:cursor-default disabled:before:bg-retro-disabled rounded-none before:size-2.5 before:bg-retro-field-text before:[-webkit-mask:var(--retro-check-mask)_center/contain_no-repeat] before:[mask:var(--retro-check-mask)_center/contain_no-repeat]" type="checkbox"><span class="peer-focus-visible:outline-2 peer-focus-visible:outline-dotted peer-focus-visible:outline-retro-focus peer-focus-visible:outline-offset-1 peer-disabled:text-retro-disabled peer-disabled:[text-shadow:1px_1px_0_var(--retro-emboss)]">Remember my password on this computer</span></label></div>
<div class="flex flex-wrap justify-end gap-2 mt-3.5"><button class="inline-flex items-center justify-center gap-1.5 m-0 border-0 rounded-none bg-retro-face text-retro-text font-retro leading-[1.2] text-center no-underline cursor-pointer hover:text-retro-text disabled:text-retro-disabled disabled:[text-shadow:1px_1px_0_var(--retro-emboss)] disabled:cursor-default disabled:[&_.retro-i]:opacity-50 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-6px] min-w-[88px] min-h-8 px-3.5 py-[5px] text-sm shadow-retro-default enabled:active:shadow-retro-default-in font-bold" type="submit">OK</button><button class="inline-flex items-center justify-center gap-1.5 m-0 border-0 rounded-none bg-retro-face text-retro-text font-retro leading-[1.2] text-center no-underline cursor-pointer hover:text-retro-text disabled:text-retro-disabled disabled:[text-shadow:1px_1px_0_var(--retro-emboss)] disabled:cursor-default disabled:[&_.retro-i]:opacity-50 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-6px] min-w-[88px] min-h-8 px-3.5 py-[5px] text-sm shadow-retro-out enabled:active:shadow-retro-in font-normal" type="button">Cancel</button><button class="inline-flex items-center justify-center gap-1.5 m-0 border-0 rounded-none bg-retro-face text-retro-text font-retro leading-[1.2] text-center no-underline cursor-pointer hover:text-retro-text disabled:text-retro-disabled disabled:[text-shadow:1px_1px_0_var(--retro-emboss)] disabled:cursor-default disabled:[&_.retro-i]:opacity-50 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-6px] min-w-[88px] min-h-8 px-3.5 py-[5px] text-sm shadow-retro-out enabled:active:shadow-retro-in font-normal" type="button">Shut Down…</button></div>
</form>
</div>

</section>
</section>
</div>

/* ── Retro UI kit tokens (uiCookies) — identical in every set ─────────────
   A classic desktop OS look: grey bevelled faces, navy title bars, sunken white fields on a dithered teal desktop.
   Bevels are four 1px inset shadows built from --retro-hilite, --retro-light, --retro-shadow and --retro-dark,
   so one change to a token re-colours every button, field and window in the kit. */
:root{
  --retro-desk:#006e6e;        /* desktop behind the windows */
  --retro-desk-text:#ffffff;   /* captions and icon labels on the desktop, 6.1:1 */
  --retro-desk-dither:rgba(0,0,0,.22);
  --retro-face:#c0c0c0;        /* window, button and bar faces */
  --retro-hilite:#ffffff;      /* bevel: outer light edge */
  --retro-light:#dfdfdf;       /* bevel: inner light edge */
  --retro-shadow:#808080;      /* bevel: inner dark edge */
  --retro-dark:#0a0a0a;        /* bevel: outer dark edge */
  --retro-text:#000000;        /* text on faces, 11.5:1 */
  --retro-muted:#3d3d3d;       /* secondary text on faces, 6:1 */
  --retro-field:#ffffff;       /* inputs, lists and document areas */
  --retro-field-text:#000000;
  --retro-title:#000080;       /* active title bar gradient, white text 6.3:1 or more */
  --retro-title-2:#1060b0;
  --retro-title-text:#ffffff;
  --retro-idle:#5a5a5a;        /* inactive title bar gradient, white text 5.3:1 or more */
  --retro-idle-2:#6b6b6b;
  --retro-idle-text:#ffffff;
  --retro-select:#000080;      /* highlighted menu items, rows and dates */
  --retro-select-text:#ffffff;
  --retro-link:#0000cc;        /* 6.2:1 on faces */
  --retro-danger:#8a0000;      /* error text, 5.5:1 on faces */
  --retro-tip:#ffffe1;         /* tooltips and balloons */
  --retro-tip-text:#000000;
  --retro-tip-line:#000000;
  --retro-lcd:#0b1a0b;         /* LCD read-outs */
  --retro-lcd-text:#4dff4d;
  --retro-accent:#000080;      /* progress chunks */
  --retro-disabled:#808080;    /* disabled text, embossed */
  --retro-emboss:#ffffff;
  --retro-dither-a:#ffffff;    /* checkerboard behind a latched toggle */
  --retro-dither-b:#c0c0c0;
  --retro-focus:#000000;       /* dotted focus rectangle */
  --retro-glow:0 0 #0000;      /* the synthwave theme adds a neon glow to windows */
  --retro-neon-pink:#ff3fa4;--retro-neon-cyan:#00e5ff;--retro-sun-1:#ffd23f;--retro-sun-2:#ff3fa4;
  --retro-font:Tahoma,"Microsoft Sans Serif","MS Sans Serif",Geneva,Verdana,"Segoe UI",sans-serif;
  --retro-mono:"VT323","Fixedsys","Lucida Console",Consolas,Menlo,"Courier New",ui-monospace,monospace;
}
/* Synthwave 80s night theme: data-retro="synthwave" on any wrapper, or a checked .retro-theme-input inside a
   [data-retro] element. :is() is a forgiving list, so browsers without :has() still apply the attribute. */
[data-retro]:is([data-retro="synthwave"],:has(.retro-theme-input:checked)){
  --retro-desk:#14062b;--retro-desk-text:#fff1fb;--retro-desk-dither:rgba(255,63,164,.16);
  --retro-face:#261047;--retro-hilite:#ff6ec7;--retro-light:#a05cff;--retro-shadow:#0d0420;--retro-dark:#000000;
  --retro-text:#fff1fb;--retro-muted:#dcc6ff;--retro-field:#0e0322;--retro-field-text:#fff1fb;
  --retro-title:#ff8a3d;--retro-title-2:#ff3fa4;--retro-title-text:#1b0030;
  --retro-idle:#4a2d6e;--retro-idle-2:#5c3a85;--retro-idle-text:#f3e8ff;
  --retro-select:#00e5ff;--retro-select-text:#14062b;--retro-link:#7cf3ff;--retro-danger:#ff8fa3;
  --retro-tip:#2b1352;--retro-tip-text:#fff1fb;--retro-tip-line:#ff6ec7;
  --retro-lcd:#07010f;--retro-lcd-text:#ff5fd2;--retro-accent:#ff3fa4;
  --retro-disabled:#8a72b0;--retro-emboss:transparent;--retro-dither-a:#3d1a6e;--retro-dither-b:#261047;
  --retro-focus:#5ff4ff;--retro-glow:0 0 0 1px rgba(255,63,164,.45),0 0 22px rgba(255,63,164,.35);color-scheme:dark}
/* More contrast requested: secondary text turns full strength and the glow goes */
@media (prefers-contrast:more){:root,[data-retro],[data-retro]:is([data-retro="synthwave"],:has(.retro-theme-input:checked)){--retro-muted:var(--retro-text);--retro-glow:0 0 #0000}}
:root,[data-retro]{
  --retro-out:inset -1px -1px var(--retro-dark),inset 1px 1px var(--retro-hilite),inset -2px -2px var(--retro-shadow),inset 2px 2px var(--retro-light);
  --retro-in:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-dark),inset -2px -2px var(--retro-light),inset 2px 2px var(--retro-shadow);
  --retro-out-default:inset 0 0 0 1px var(--retro-dark),inset -2px -2px var(--retro-dark),inset 2px 2px var(--retro-hilite),inset -3px -3px var(--retro-shadow),inset 3px 3px var(--retro-light);
  --retro-in-default:inset 0 0 0 1px var(--retro-dark),inset 2px 2px var(--retro-shadow),inset -2px -2px var(--retro-shadow);
  --retro-sunken:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-shadow),inset -2px -2px var(--retro-light),inset 2px 2px var(--retro-dark);
  --retro-frame:inset -1px -1px var(--retro-dark),inset 1px 1px var(--retro-light),inset -2px -2px var(--retro-shadow),inset 2px 2px var(--retro-hilite);
  --retro-window:var(--retro-frame),var(--retro-glow);
  --retro-thin-in:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-shadow);
  --retro-thin-out:inset -1px -1px var(--retro-shadow),inset 1px 1px var(--retro-hilite);
  --retro-title-bg:linear-gradient(90deg,var(--retro-title),var(--retro-title-2));
  --retro-idle-bg:linear-gradient(90deg,var(--retro-idle),var(--retro-idle-2));
  --retro-dither:repeating-conic-gradient(var(--retro-dither-a) 0 25%,var(--retro-dither-b) 0 50%) 0 0/2px 2px;
  --retro-wallpaper:radial-gradient(var(--retro-desk-dither) 1px,transparent 1.5px) 0 0/4px 4px,var(--retro-desk);
  --retro-check-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%207'%20shape-rendering='crispEdges'%3E%3Crect%20x='6'%20y='0'%20width='1'%20height='1'%20fill='%23000'/%3E%3Crect%20x='5'%20y='1'%20width='2'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23000'/%3E%3Crect%20x='4'%20y='2'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='3'%20width='2'%20height='1'%20fill='%23000'/%3E%3Crect%20x='3'%20y='3'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='4'%20width='5'%20height='1'%20fill='%23000'/%3E%3Crect%20x='1'%20y='5'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='2'%20y='6'%20width='1'%20height='1'%20fill='%23000'/%3E%3C/svg%3E");
  --retro-arrow-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%204'%20shape-rendering='crispEdges'%3E%3Crect%20x='0'%20y='0'%20width='7'%20height='1'%20fill='%23000'/%3E%3Crect%20x='1'%20y='1'%20width='5'%20height='1'%20fill='%23000'/%3E%3Crect%20x='2'%20y='2'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='3'%20y='3'%20width='1'%20height='1'%20fill='%23000'/%3E%3C/svg%3E");
}
[data-retro]{color:var(--retro-text);font-family:var(--retro-font)}
/* The tokens above, exposed as Tailwind utilities: bg-retro-face, text-retro-text, shadow-retro-out,
   shadow-retro-in, shadow-retro-sunken, shadow-retro-window, outline-retro-focus, font-retro, font-retro-mono… */
@theme inline {
  --color-retro-desk: var(--retro-desk); --color-retro-desk-text: var(--retro-desk-text); --color-retro-face: var(--retro-face);
  --color-retro-hilite: var(--retro-hilite); --color-retro-light: var(--retro-light); --color-retro-shadow: var(--retro-shadow); --color-retro-dark: var(--retro-dark);
  --color-retro-text: var(--retro-text); --color-retro-muted: var(--retro-muted); --color-retro-field: var(--retro-field); --color-retro-field-text: var(--retro-field-text);
  --color-retro-title-text: var(--retro-title-text); --color-retro-idle-text: var(--retro-idle-text);
  --color-retro-select: var(--retro-select); --color-retro-select-text: var(--retro-select-text); --color-retro-link: var(--retro-link); --color-retro-danger: var(--retro-danger);
  --color-retro-tip: var(--retro-tip); --color-retro-tip-text: var(--retro-tip-text); --color-retro-tip-line: var(--retro-tip-line);
  --color-retro-lcd: var(--retro-lcd); --color-retro-lcd-text: var(--retro-lcd-text); --color-retro-accent: var(--retro-accent);
  --color-retro-disabled: var(--retro-disabled); --color-retro-focus: var(--retro-focus);
  --color-retro-neon-pink: var(--retro-neon-pink); --color-retro-neon-cyan: var(--retro-neon-cyan);
  --shadow-retro-out: var(--retro-out); --shadow-retro-in: var(--retro-in); --shadow-retro-default: var(--retro-out-default); --shadow-retro-default-in: var(--retro-in-default);
  --shadow-retro-sunken: var(--retro-sunken); --shadow-retro-frame: var(--retro-frame); --shadow-retro-window: var(--retro-window);
  --shadow-retro-thin-in: var(--retro-thin-in); --shadow-retro-thin-out: var(--retro-thin-out);
  --font-retro: var(--retro-font); --font-retro-mono: var(--retro-mono);
}