Open demo

CSS code

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="rg-check" viewBox="0 0 7 7"><rect x="6" y="0" width="1" height="1" fill="currentColor"/><rect x="5" y="1" width="2" height="1" fill="currentColor"/><rect x="0" y="2" width="1" height="1" fill="currentColor"/><rect x="4" y="2" width="3" height="1" fill="currentColor"/><rect x="0" y="3" width="2" height="1" fill="currentColor"/><rect x="3" y="3" width="3" height="1" fill="currentColor"/><rect x="0" y="4" width="5" height="1" fill="currentColor"/><rect x="1" y="5" width="3" height="1" fill="currentColor"/><rect x="2" y="6" width="1" height="1" fill="currentColor"/></symbol>
  <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-computer" viewBox="0 0 16 16"><rect x="1" y="0" width="14" height="1" fill="#000000"/><rect x="1" y="1" width="1" height="1" fill="#000000"/><rect x="2" y="1" width="1" height="1" fill="#ffffff"/><rect x="3" y="1" width="10" height="1" fill="#c0c0c0"/><rect x="13" y="1" width="1" height="1" fill="#808080"/><rect x="14" y="1" width="1" height="1" fill="#000000"/><rect x="1" y="2" width="1" height="1" fill="#000000"/><rect x="2" y="2" width="1" height="1" fill="#c0c0c0"/><rect x="3" y="2" width="10" height="1" fill="#000000"/><rect x="13" y="2" width="1" height="1" fill="#808080"/><rect x="14" 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="1" height="1" fill="#c0c0c0"/><rect x="3" y="3" width="1" height="1" fill="#000000"/><rect x="4" y="3" width="8" height="1" fill="#008080"/><rect x="12" y="3" width="1" height="1" fill="#000000"/><rect x="13" y="3" width="1" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="4" width="1" height="1" fill="#000000"/><rect x="4" y="4" width="1" height="1" fill="#008080"/><rect x="5" y="4" width="1" height="1" fill="#3fd0d4"/><rect x="6" y="4" width="6" height="1" fill="#008080"/><rect x="12" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="1" height="1" fill="#808080"/><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="#c0c0c0"/><rect x="3" y="5" width="1" height="1" fill="#000000"/><rect x="4" y="5" width="8" height="1" fill="#008080"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="1" height="1" fill="#808080"/><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="#c0c0c0"/><rect x="3" y="6" width="1" height="1" fill="#000000"/><rect x="4" y="6" width="8" height="1" fill="#008080"/><rect x="12" y="6" width="1" height="1" fill="#000000"/><rect x="13" y="6" width="1" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="7" width="1" height="1" fill="#000000"/><rect x="4" y="7" width="8" height="1" fill="#008080"/><rect x="12" y="7" width="1" height="1" fill="#000000"/><rect x="13" y="7" width="1" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="8" width="10" height="1" fill="#000000"/><rect x="13" y="8" width="1" height="1" fill="#808080"/><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="9" height="1" fill="#c0c0c0"/><rect x="11" y="9" width="1" height="1" fill="#1fa31f"/><rect x="12" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="13" y="9" width="1" height="1" fill="#808080"/><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="12" height="1" fill="#808080"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="14" height="1" fill="#000000"/><rect x="5" y="12" width="1" height="1" fill="#000000"/><rect x="6" y="12" width="4" height="1" fill="#c0c0c0"/><rect x="10" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="10" height="1" fill="#000000"/><rect x="3" y="14" width="1" height="1" fill="#000000"/><rect x="4" y="14" width="1" height="1" fill="#ffffff"/><rect x="5" y="14" width="6" height="1" fill="#c0c0c0"/><rect x="11" y="14" width="1" height="1" fill="#808080"/><rect x="12" y="14" width="1" height="1" fill="#000000"/><rect x="3" y="15" width="10" height="1" fill="#000000"/></symbol>
  <symbol id="ri-doc" viewBox="0 0 16 16"><rect x="2" y="0" width="9" height="1" fill="#000000"/><rect x="2" y="1" width="1" height="1" fill="#000000"/><rect x="3" y="1" width="7" height="1" fill="#ffffff"/><rect x="10" 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="7" height="1" fill="#ffffff"/><rect x="10" y="2" width="1" height="1" fill="#000000"/><rect x="11" y="2" width="1" height="1" fill="#ffffff"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="3" width="4" height="1" fill="#808080"/><rect x="8" y="3" width="2" height="1" fill="#ffffff"/><rect x="10" y="3" width="4" height="1" fill="#000000"/><rect x="2" y="4" width="1" height="1" fill="#000000"/><rect x="3" y="4" width="10" height="1" fill="#ffffff"/><rect x="13" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="5" width="1" height="1" fill="#000000"/><rect x="3" y="5" width="1" height="1" fill="#ffffff"/><rect x="4" y="5" width="8" height="1" fill="#808080"/><rect x="12" y="5" width="1" height="1" fill="#ffffff"/><rect x="13" y="5" width="1" height="1" fill="#000000"/><rect x="2" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="6" width="10" height="1" fill="#ffffff"/><rect x="13" y="6" width="1" height="1" fill="#000000"/><rect x="2" y="7" width="1" height="1" fill="#000000"/><rect x="3" y="7" width="1" height="1" fill="#ffffff"/><rect x="4" y="7" width="8" height="1" fill="#808080"/><rect x="12" y="7" width="1" height="1" fill="#ffffff"/><rect x="13" y="7" width="1" height="1" fill="#000000"/><rect x="2" y="8" width="1" height="1" fill="#000000"/><rect x="3" y="8" width="10" height="1" fill="#ffffff"/><rect x="13" y="8" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="1" height="1" fill="#000000"/><rect x="3" y="9" width="1" height="1" fill="#ffffff"/><rect x="4" y="9" width="6" height="1" fill="#808080"/><rect x="10" y="9" width="3" height="1" fill="#ffffff"/><rect x="13" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="1" height="1" fill="#000000"/><rect x="3" y="10" width="10" height="1" fill="#ffffff"/><rect x="13" 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="1" height="1" fill="#ffffff"/><rect x="4" y="11" width="8" height="1" fill="#808080"/><rect x="12" y="11" width="1" height="1" fill="#ffffff"/><rect x="13" 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="10" height="1" fill="#ffffff"/><rect x="13" y="12" width="1" height="1" fill="#000000"/><rect x="2" y="13" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="10" height="1" fill="#ffffff"/><rect x="13" y="13" width="1" height="1" fill="#000000"/><rect x="2" y="14" width="12" height="1" fill="#000000"/></symbol>
  <symbol id="ri-floppy" viewBox="0 0 16 16"><rect x="0" y="0" width="15" height="1" fill="#000000"/><rect x="0" y="1" width="1" height="1" fill="#000000"/><rect x="1" y="1" width="2" height="1" fill="#000080"/><rect x="3" y="1" width="1" height="1" fill="#000000"/><rect x="4" y="1" width="8" height="1" fill="#ffffff"/><rect x="12" y="1" width="1" height="1" fill="#000000"/><rect x="13" y="1" width="1" height="1" fill="#000080"/><rect x="14" y="1" width="2" height="1" fill="#000000"/><rect x="0" y="2" width="1" height="1" fill="#000000"/><rect x="1" y="2" width="2" height="1" fill="#000080"/><rect x="3" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="2" width="8" height="1" fill="#ffffff"/><rect x="12" y="2" width="1" height="1" fill="#000000"/><rect x="13" y="2" width="2" height="1" fill="#000080"/><rect x="15" y="2" width="1" height="1" fill="#000000"/><rect x="0" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="3" width="2" height="1" fill="#000080"/><rect x="3" y="3" width="1" height="1" fill="#000000"/><rect x="4" y="3" width="1" height="1" fill="#ffffff"/><rect x="5" y="3" width="6" height="1" fill="#808080"/><rect x="11" y="3" width="1" height="1" fill="#ffffff"/><rect x="12" y="3" width="1" height="1" fill="#000000"/><rect x="13" y="3" width="2" height="1" fill="#000080"/><rect x="15" y="3" width="1" height="1" fill="#000000"/><rect x="0" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="2" height="1" fill="#000080"/><rect x="3" y="4" width="1" height="1" fill="#000000"/><rect x="4" y="4" width="8" height="1" fill="#ffffff"/><rect x="12" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="2" height="1" fill="#000080"/><rect x="15" 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="#000080"/><rect x="3" y="5" width="1" height="1" fill="#000000"/><rect x="4" y="5" width="1" height="1" fill="#ffffff"/><rect x="5" y="5" width="6" height="1" fill="#808080"/><rect x="11" y="5" width="1" height="1" fill="#ffffff"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="2" height="1" fill="#000080"/><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="2" height="1" fill="#000080"/><rect x="3" y="6" width="1" height="1" fill="#000000"/><rect x="4" y="6" width="8" height="1" fill="#ffffff"/><rect x="12" y="6" width="1" height="1" fill="#000000"/><rect x="13" y="6" width="2" height="1" fill="#000080"/><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="3" height="1" fill="#000080"/><rect x="4" y="7" width="8" height="1" fill="#000000"/><rect x="12" y="7" width="3" height="1" fill="#000080"/><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="14" height="1" fill="#000080"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="2" height="1" fill="#000080"/><rect x="3" y="9" width="10" height="1" fill="#c0c0c0"/><rect x="13" y="9" width="2" height="1" fill="#000080"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="0" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="2" height="1" fill="#000080"/><rect x="3" y="10" width="2" height="1" fill="#c0c0c0"/><rect x="5" y="10" width="2" height="1" fill="#000000"/><rect x="7" y="10" width="6" height="1" fill="#c0c0c0"/><rect x="13" y="10" width="2" height="1" fill="#000080"/><rect x="15" y="10" width="1" height="1" fill="#000000"/><rect x="0" y="11" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="2" height="1" fill="#000080"/><rect x="3" y="11" width="2" height="1" fill="#c0c0c0"/><rect x="5" y="11" width="2" height="1" fill="#000000"/><rect x="7" y="11" width="6" height="1" fill="#c0c0c0"/><rect x="13" y="11" width="2" height="1" fill="#000080"/><rect x="15" y="11" width="1" height="1" fill="#000000"/><rect x="0" y="12" width="1" height="1" fill="#000000"/><rect x="1" y="12" width="2" height="1" fill="#000080"/><rect x="3" y="12" width="2" height="1" fill="#c0c0c0"/><rect x="5" y="12" width="2" height="1" fill="#000000"/><rect x="7" y="12" width="6" height="1" fill="#c0c0c0"/><rect x="13" y="12" width="2" height="1" fill="#000080"/><rect x="15" y="12" width="1" height="1" fill="#000000"/><rect x="0" y="13" width="1" height="1" fill="#000000"/><rect x="1" y="13" width="2" height="1" fill="#000080"/><rect x="3" y="13" width="10" height="1" fill="#c0c0c0"/><rect x="13" y="13" width="2" height="1" fill="#000080"/><rect x="15" y="13" width="1" height="1" fill="#000000"/><rect x="0" y="14" width="16" height="1" fill="#000000"/></symbol>
  <symbol id="ri-folder" viewBox="0 0 16 16"><rect x="2" y="2" width="4" height="1" fill="#000000"/><rect x="1" y="3" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="4" height="1" fill="#ffd84a"/><rect x="6" y="3" width="1" height="1" fill="#000000"/><rect x="0" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="6" height="1" fill="#ffd84a"/><rect x="7" y="4" width="8" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="1" height="1" fill="#ffd84a"/><rect x="2" y="5" width="12" height="1" fill="#ffffff"/><rect x="14" y="5" width="1" height="1" fill="#ffd84a"/><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="1" height="1" fill="#ffd84a"/><rect x="2" y="6" width="1" height="1" fill="#ffffff"/><rect x="3" y="6" width="11" height="1" fill="#ffd84a"/><rect x="14" y="6" width="1" height="1" fill="#b88a00"/><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="1" height="1" fill="#ffd84a"/><rect x="2" y="7" width="1" height="1" fill="#ffffff"/><rect x="3" y="7" width="11" height="1" fill="#ffd84a"/><rect x="14" y="7" width="1" height="1" fill="#b88a00"/><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="1" height="1" fill="#ffd84a"/><rect x="2" y="8" width="1" height="1" fill="#ffffff"/><rect x="3" y="8" width="11" height="1" fill="#ffd84a"/><rect x="14" y="8" width="1" height="1" fill="#b88a00"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#ffd84a"/><rect x="2" y="9" width="1" height="1" fill="#ffffff"/><rect x="3" y="9" width="11" height="1" fill="#ffd84a"/><rect x="14" y="9" width="1" height="1" fill="#b88a00"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="0" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#ffd84a"/><rect x="2" y="10" width="1" height="1" fill="#ffffff"/><rect x="3" y="10" width="11" height="1" fill="#ffd84a"/><rect x="14" y="10" width="1" height="1" fill="#b88a00"/><rect x="15" y="10" width="1" height="1" fill="#000000"/><rect x="0" y="11" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#ffd84a"/><rect x="2" y="11" width="1" height="1" fill="#ffffff"/><rect x="3" y="11" width="11" height="1" fill="#ffd84a"/><rect x="14" y="11" width="1" height="1" fill="#b88a00"/><rect x="15" y="11" width="1" height="1" fill="#000000"/><rect x="0" y="12" width="1" height="1" fill="#000000"/><rect x="1" y="12" width="1" height="1" fill="#ffd84a"/><rect x="2" y="12" width="13" height="1" fill="#b88a00"/><rect x="15" y="12" width="1" height="1" fill="#000000"/><rect x="0" y="13" width="16" height="1" fill="#000000"/></symbol>
  <symbol id="ri-game" viewBox="0 0 16 16"><rect x="3" y="4" width="10" height="1" fill="#000000"/><rect x="2" y="5" width="1" height="1" fill="#000000"/><rect x="3" y="5" width="10" height="1" fill="#c0c0c0"/><rect x="13" 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="2" height="1" fill="#c0c0c0"/><rect x="4" y="6" width="1" height="1" fill="#000000"/><rect x="5" y="6" width="6" height="1" fill="#c0c0c0"/><rect x="11" y="6" width="1" height="1" fill="#d00000"/><rect x="12" y="6" width="2" height="1" fill="#c0c0c0"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="7" width="3" height="1" fill="#000000"/><rect x="6" y="7" width="4" height="1" fill="#c0c0c0"/><rect x="10" y="7" width="1" height="1" fill="#d00000"/><rect x="11" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="12" y="7" width="1" height="1" fill="#d00000"/><rect x="13" y="7" width="1" height="1" fill="#c0c0c0"/><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="2" height="1" fill="#c0c0c0"/><rect x="4" y="8" width="1" height="1" fill="#000000"/><rect x="5" y="8" width="6" height="1" fill="#c0c0c0"/><rect x="11" y="8" width="1" height="1" fill="#d00000"/><rect x="12" y="8" width="2" height="1" fill="#c0c0c0"/><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="12" height="1" fill="#c0c0c0"/><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="3" height="1" fill="#c0c0c0"/><rect x="5" y="10" width="6" height="1" fill="#000000"/><rect x="11" y="10" width="3" height="1" fill="#c0c0c0"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="3" height="1" fill="#000000"/><rect x="11" y="11" width="3" 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-mail" viewBox="0 0 16 16"><rect x="0" y="2" width="16" height="1" fill="#000000"/><rect x="0" y="3" width="2" height="1" fill="#000000"/><rect x="2" y="3" width="12" height="1" fill="#ffffff"/><rect x="14" y="3" width="2" height="1" fill="#000000"/><rect x="0" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#ffffff"/><rect x="2" y="4" width="1" height="1" fill="#000000"/><rect x="3" y="4" width="10" height="1" fill="#ffffff"/><rect x="13" y="4" width="1" height="1" fill="#000000"/><rect x="14" y="4" width="1" height="1" fill="#ffffff"/><rect x="15" 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="#ffffff"/><rect x="3" y="5" width="1" height="1" fill="#000000"/><rect x="4" y="5" width="8" height="1" fill="#ffffff"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="2" height="1" fill="#ffffff"/><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="3" height="1" fill="#ffffff"/><rect x="4" y="6" width="1" height="1" fill="#000000"/><rect x="5" y="6" width="6" height="1" fill="#ffffff"/><rect x="11" y="6" width="1" height="1" fill="#000000"/><rect x="12" y="6" width="3" height="1" fill="#ffffff"/><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="4" height="1" fill="#ffffff"/><rect x="5" y="7" width="2" height="1" fill="#000000"/><rect x="7" y="7" width="2" height="1" fill="#ffffff"/><rect x="9" y="7" width="2" height="1" fill="#000000"/><rect x="11" y="7" width="4" height="1" fill="#ffffff"/><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="#ffffff"/><rect x="5" y="8" width="1" height="1" fill="#000000"/><rect x="6" y="8" width="1" height="1" fill="#ffffff"/><rect x="7" y="8" width="2" height="1" fill="#000000"/><rect x="9" y="8" width="1" height="1" fill="#ffffff"/><rect x="10" y="8" width="1" height="1" fill="#000000"/><rect x="11" y="8" width="4" height="1" fill="#ffffff"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="3" height="1" fill="#ffffff"/><rect x="4" y="9" width="1" height="1" fill="#000000"/><rect x="5" y="9" width="6" height="1" fill="#ffffff"/><rect x="11" y="9" width="1" height="1" fill="#000000"/><rect x="12" y="9" width="3" height="1" fill="#ffffff"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="0" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="2" height="1" fill="#ffffff"/><rect x="3" y="10" width="1" height="1" fill="#000000"/><rect x="4" y="10" width="8" height="1" fill="#ffffff"/><rect x="12" y="10" width="1" height="1" fill="#000000"/><rect x="13" y="10" width="2" height="1" fill="#ffffff"/><rect x="15" y="10" width="1" height="1" fill="#000000"/><rect x="0" y="11" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#ffffff"/><rect x="2" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="11" width="10" height="1" fill="#ffffff"/><rect x="13" y="11" width="1" height="1" fill="#000000"/><rect x="14" y="11" width="1" height="1" fill="#ffffff"/><rect x="15" y="11" width="1" height="1" fill="#000000"/><rect x="0" y="12" width="16" height="1" fill="#000000"/></symbol>
  <symbol id="rg-max" viewBox="0 0 10 9"><rect x="0" y="0" width="10" height="1" fill="currentColor"/><rect x="0" y="1" width="10" height="1" fill="currentColor"/><rect x="0" y="2" width="1" height="1" fill="currentColor"/><rect x="9" y="2" width="1" height="1" fill="currentColor"/><rect x="0" y="3" width="1" height="1" fill="currentColor"/><rect x="9" y="3" width="1" height="1" fill="currentColor"/><rect x="0" y="4" width="1" height="1" fill="currentColor"/><rect x="9" y="4" width="1" height="1" fill="currentColor"/><rect x="0" y="5" width="1" height="1" fill="currentColor"/><rect x="9" y="5" width="1" height="1" fill="currentColor"/><rect x="0" y="6" width="1" height="1" fill="currentColor"/><rect x="9" y="6" width="1" height="1" fill="currentColor"/><rect x="0" y="7" width="1" height="1" fill="currentColor"/><rect x="9" y="7" width="1" height="1" fill="currentColor"/><rect x="0" y="8" width="10" height="1" fill="currentColor"/></symbol>
  <symbol id="rg-min" viewBox="0 0 7 9"><rect x="0" y="7" width="7" height="1" fill="currentColor"/><rect x="0" y="8" width="7" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-moon" viewBox="0 0 16 16"><rect x="4" y="1" width="3" height="1" fill="#000000"/><rect x="3" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="2" width="1" height="1" fill="#b88a00"/><rect x="5" 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="1" height="1" fill="#b88a00"/><rect x="4" 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="#b88a00"/><rect x="4" 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="2" height="1" fill="#b88a00"/><rect x="4" 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="2" height="1" fill="#b88a00"/><rect x="3" y="6" width="1" height="1" fill="#ffd84a"/><rect x="4" 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="#b88a00"/><rect x="2" y="7" width="2" height="1" fill="#ffd84a"/><rect x="4" 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="#ffd84a"/><rect x="5" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="5" height="1" fill="#ffd84a"/><rect x="6" 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="#ffd84a"/><rect x="7" 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="6" height="1" fill="#ffd84a"/><rect x="8" y="11" width="6" height="1" fill="#000000"/><rect x="2" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="9" height="1" fill="#ffd84a"/><rect x="12" 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="7" height="1" fill="#ffd84a"/><rect x="11" y="13" width="1" height="1" fill="#000000"/><rect x="4" y="14" width="7" height="1" fill="#000000"/></symbol>
  <symbol id="ri-question" 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="#1e6fd9"/><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="3" height="1" fill="#1e6fd9"/><rect x="6" y="2" width="4" height="1" fill="#ffffff"/><rect x="10" y="2" width="3" height="1" fill="#1e6fd9"/><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="3" height="1" fill="#1e6fd9"/><rect x="5" y="3" width="2" height="1" fill="#ffffff"/><rect x="7" y="3" width="2" height="1" fill="#1e6fd9"/><rect x="9" y="3" width="2" height="1" fill="#ffffff"/><rect x="11" y="3" width="3" height="1" fill="#1e6fd9"/><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="7" height="1" fill="#1e6fd9"/><rect x="9" y="4" width="2" height="1" fill="#ffffff"/><rect x="11" y="4" width="3" height="1" fill="#1e6fd9"/><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="7" height="1" fill="#1e6fd9"/><rect x="8" y="5" width="2" height="1" fill="#ffffff"/><rect x="10" y="5" width="5" height="1" fill="#1e6fd9"/><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="6" height="1" fill="#1e6fd9"/><rect x="7" y="6" width="2" height="1" fill="#ffffff"/><rect x="9" y="6" width="6" height="1" fill="#1e6fd9"/><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="6" height="1" fill="#1e6fd9"/><rect x="7" y="7" width="2" height="1" fill="#ffffff"/><rect x="9" y="7" width="6" height="1" fill="#1e6fd9"/><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="14" height="1" fill="#1e6fd9"/><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="6" height="1" fill="#1e6fd9"/><rect x="8" y="9" width="2" height="1" fill="#ffffff"/><rect x="10" y="9" width="4" 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="6" height="1" fill="#1e6fd9"/><rect x="8" y="10" width="2" height="1" fill="#ffffff"/><rect x="10" y="10" width="4" height="1" fill="#1e6fd9"/><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="#1e6fd9"/><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="#1e6fd9"/><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-search" viewBox="0 0 16 16"><rect x="3" y="0" width="5" height="1" fill="#000000"/><rect x="2" y="1" width="1" height="1" fill="#000000"/><rect x="3" y="1" width="5" height="1" fill="#ffffff"/><rect x="8" y="1" width="1" height="1" fill="#000000"/><rect x="1" y="2" width="1" height="1" fill="#000000"/><rect x="2" y="2" width="1" height="1" fill="#ffffff"/><rect x="3" y="2" width="1" height="1" fill="#3fd0d4"/><rect x="4" y="2" width="5" height="1" fill="#ffffff"/><rect x="9" 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="1" height="1" fill="#ffffff"/><rect x="3" y="3" width="1" height="1" fill="#3fd0d4"/><rect x="4" y="3" width="5" height="1" fill="#ffffff"/><rect x="9" 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="7" height="1" fill="#ffffff"/><rect x="9" 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="7" height="1" fill="#ffffff"/><rect x="9" y="5" width="1" height="1" fill="#000000"/><rect x="2" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="6" width="5" height="1" fill="#ffffff"/><rect x="8" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="7" width="7" height="1" fill="#000000"/><rect x="8" y="8" width="3" height="1" fill="#000000"/><rect x="9" y="9" width="3" height="1" fill="#000000"/><rect x="10" y="10" width="3" height="1" fill="#000000"/><rect x="11" y="11" width="2" 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">Menu bar · drop-down menus with shortcuts and ticks</span>
<section class="retro-window" aria-labelledby="w-menu">
<div class="retro-titlebar">
  <h2 class="retro-titlebar__title" id="w-menu"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>chapter-3.txt — Moonbyte Write</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Minimise Moonbyte Write"><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-min"/></svg></button><button class="retro-ctl" type="button" aria-label="Maximise Moonbyte Write"><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-max"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Moonbyte Write"><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<nav aria-label="Moonbyte Write"><ul class="retro-menubar"><li class=""><button class="retro-menubar__btn" type="button" aria-expanded="false" aria-controls="m-file" data-retro-menu><u>F</u>ile</button>
<ul class="retro-menu" id="m-file" hidden><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>New</span><span class="retro-menu__key">Ctrl+N</span></button></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Open…</span><span class="retro-menu__key">Ctrl+O</span></button></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Save</span><span class="retro-menu__key">Ctrl+S</span></button></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Save As…</span></button></li><li class="retro-menu__sep" aria-hidden="true"></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Print…</span><span class="retro-menu__key">Ctrl+P</span></button></li><li class="retro-menu__sep" aria-hidden="true"></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Exit</span></button></li></ul></li><li class=""><button class="retro-menubar__btn" type="button" aria-expanded="false" aria-controls="m-edit" data-retro-menu><u>E</u>dit</button>
<ul class="retro-menu" id="m-edit" hidden><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Undo typing</span><span class="retro-menu__key">Ctrl+Z</span></button></li><li class="retro-menu__sep" aria-hidden="true"></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Cut</span><span class="retro-menu__key">Ctrl+X</span></button></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Copy</span><span class="retro-menu__key">Ctrl+C</span></button></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Paste</span><span class="retro-menu__key">Ctrl+V</span></button></li><li class="retro-menu__sep" aria-hidden="true"></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Find…</span><span class="retro-menu__key">Ctrl+F</span></button></li></ul></li><li class=""><button class="retro-menubar__btn" type="button" aria-expanded="false" aria-controls="m-view" data-retro-menu><u>V</u>iew</button>
<ul class="retro-menu" id="m-view" hidden><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"><svg class="retro-glyph" width="7" height="7" aria-hidden="true" focusable="false"><use href="#rg-check"/></svg><span class="retro-sr"> (on)</span></span><span>Toolbar</span></button></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"><svg class="retro-glyph" width="7" height="7" aria-hidden="true" focusable="false"><use href="#rg-check"/></svg><span class="retro-sr"> (on)</span></span><span>Status bar</span></button></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Word wrap</span></button></li><li class="retro-menu__sep" aria-hidden="true"></li><li><button class="retro-menu__item" type="button"><span class="retro-menu__mark"></span><span>Zoom 100%</span></button></li></ul></li><li class=""><button class="retro-menubar__btn" type="button" aria-expanded="false" aria-controls="m-help" data-retro-menu><u>H</u>elp</button>
<ul class="retro-menu" id="m-help" hidden><li><a class="retro-menu__item" href="#help"><span class="retro-menu__mark"></span><span>Help topics</span><span class="retro-menu__key">F1</span></a></li><li><a class="retro-menu__item" href="#about"><span class="retro-menu__mark"></span><span>About Moonbyte Write</span></a></li></ul></li></ul></nav><div class="retro-window__body">
<p class="retro-input" style="min-height:120px">Chapter 3. The night train to Port Kessel left at 23:40. Open the File, Edit, View or Help menu with a click, or with Tab and Enter; Escape closes it.</p>
</div>
<div class="retro-statusbar"><p>For help, press F1</p><p>Ln 12, Col 40</p></div>
</section>
</section>
<div class="cols">
<section><span class="lbl">Address bar · the path as a breadcrumb</span>
<div class="retro-panel retro-pad"><div class="retro-address"><span id="addr-lbl">Address</span><nav class="retro-address__nav" aria-labelledby="addr-lbl"><ol class="retro-crumbs"><li><a href="#my-computer"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-computer"/></svg>My Computer</a></li><li><a href="#c"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-floppy"/></svg>(C:)</a></li><li><a href="#games"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-folder"/></svg>Games</a></li><li><span aria-current="page"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-folder"/></svg>Starfall Racer</span></li></ol></nav></div></div>
</section>
<section><span class="lbl">Pagination · the current page is latched in</span>
<div class="retro-panel"><nav aria-label="Saved games pages"><ul class="retro-pager"><li><a class="retro-btn retro-page" href="#saves-2">« Back</a></li><li><a class="retro-btn retro-page" href="#saves-1" aria-label="Page 1">1</a></li><li><a class="retro-btn retro-page" href="#saves-2" aria-label="Page 2">2</a></li><li><a class="retro-btn retro-page" href="#saves-3" aria-current="page" aria-label="Page 3">3</a></li><li><a class="retro-btn retro-page" href="#saves-4" aria-label="Page 4">4</a></li><li class="retro-pager__gap" aria-hidden="true">…</li><li><a class="retro-btn retro-page" href="#saves-12" aria-label="Page 12">12</a></li><li><a class="retro-btn retro-page" href="#saves-4">Next »</a></li></ul></nav></div>
</section>
</div>
<section><span class="lbl">Property sheet tabs · arrow keys move between tabs</span>
<section class="retro-window" aria-labelledby="w-props">
<div class="retro-titlebar">
  <h2 class="retro-titlebar__title" id="w-props"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><span>Starfall Racer Properties</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Help Properties"><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 Properties"><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-tabs" role="tablist" aria-label="Starfall Racer properties"><button class="retro-tab" id="tab-general" type="button" role="tab" aria-selected="true" aria-controls="panel-general">General</button><button class="retro-tab" id="tab-compat" type="button" role="tab" aria-selected="false" aria-controls="panel-compat" tabindex="-1">Compatibility</button><button class="retro-tab" id="tab-sharing" type="button" role="tab" aria-selected="false" aria-controls="panel-sharing" tabindex="-1">Sharing</button><button class="retro-tab" id="tab-details" type="button" role="tab" aria-selected="false" aria-controls="panel-details" tabindex="-1">Details</button></div>
<div class="retro-tabpanel" id="panel-general" role="tabpanel" aria-labelledby="tab-general" tabindex="0"><div class="retro-cluster"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><p class=""><b>Starfall Racer</b><br>Application</p></div>
<dl class="retro-dl"><dt>Location</dt><dd>C:\Games\Starfall Racer</dd><dt>Size</dt><dd>18.6 MB (19,512,320 bytes)</dd><dt>Created</dt><dd>2 September 2026, 14:05</dd><dt>Opened</dt><dd>Today, 21:12</dd></dl></div>
<div class="retro-tabpanel" id="panel-compat" role="tabpanel" aria-labelledby="tab-compat" tabindex="0" hidden><fieldset class="retro-group"><legend class="retro-group__legend">Display settings</legend>
<div class="retro-stack"><label class="retro-check"><input class="retro-check__box" type="checkbox"><span>Run in 256 colours</span></label><label class="retro-check"><input class="retro-check__box" type="checkbox" checked><span>Run in 640 × 480 screen resolution</span></label><label class="retro-check"><input class="retro-check__box" type="checkbox"><span>Turn off visual themes</span></label></div>
</fieldset></div>
<div class="retro-tabpanel" id="panel-sharing" role="tabpanel" aria-labelledby="tab-sharing" tabindex="0" hidden><fieldset class="retro-group"><legend class="retro-group__legend">Network</legend>
<div class="retro-stack"><label class="retro-check"><input class="retro-check__box" type="radio" checked name="share"><span>Do not share this folder</span></label><label class="retro-check"><input class="retro-check__box" type="radio" name="share"><span>Share it on ARCADE-LAN as STARFALL</span></label></div>
</fieldset></div>
<div class="retro-tabpanel" id="panel-details" role="tabpanel" aria-labelledby="tab-details" tabindex="0" hidden><dl class="retro-dl"><dt>Version</dt><dd>2.4.0</dd><dt>Publisher</dt><dd>Moonbyte Games</dd><dt>Copyright</dt><dd>© 2026 Moonbyte Games</dd><dt>Language</dt><dd>English (United Kingdom)</dd></dl></div>
<div class="retro-actions retro-mt"><button class="retro-btn retro-btn--default" type="button">OK</button><button class="retro-btn" type="button">Cancel</button><button class="retro-btn" type="button">Apply</button></div>
</div>

</section>
</section>
<section><span class="lbl">Taskbar and Start menu · window buttons latch in, the tray shows the time</span>
<div class="retro-panel retro-pad"><div class="retro-screen-demo">
<nav class="retro-taskbar" aria-label="Taskbar" data-retro-taskbar>
<div class="retro-startwrap"><button class="retro-btn retro-start" type="button" aria-expanded="true" aria-controls="start-menu" data-retro-menu><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-moon"/></svg>Start</button>
<div class="retro-startmenu" id="start-menu"><span class="retro-startmenu__banner" aria-hidden="true">Moonbyte 98</span><ul class="retro-startmenu__list"><li><a class="retro-menu__item" href="#programs"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-folder"/></svg><span>Programs</span></a></li><li><a class="retro-menu__item" href="#documents"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>Documents</span></a></li><li><a class="retro-menu__item" href="#settings"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-computer"/></svg><span>Settings</span></a></li><li><a class="retro-menu__item" href="#find"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-search"/></svg><span>Find</span></a></li><li><a class="retro-menu__item" href="#help"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-question"/></svg><span>Help</span></a></li><li class="retro-menu__sep" aria-hidden="true"></li><li><a class="retro-menu__item" href="#shut-down"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-moon"/></svg><span>Shut Down…</span></a></li></ul></div></div>
<ul class="retro-taskbar__apps"><li class=""><button class="retro-btn retro-taskbtn" type="button" aria-pressed="true"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>chapter-3.txt — Moonbyte Write</span></button></li><li class=""><button class="retro-btn retro-taskbtn" type="button" aria-pressed="false"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg><span>Inbox (3 unread)</span></button></li><li class=""><button class="retro-btn retro-taskbtn" type="button" aria-pressed="false"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><span>Starfall Racer</span></button></li></ul>
<div class="retro-tray"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-speaker"/></svg><time datetime="21:20">9:20 PM</time></div>
</nav>
</div></div>
</section>
CSS 
/* ── 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}
/* Menu bar and drop-down menus (disclosure buttons and lists of links or buttons) */
.retro-menubar{display:flex;flex-wrap:wrap;margin:0;padding:1px 0;list-style:none}
.retro-menubar>li{position:relative}
.retro-menubar__btn{display:block;margin:0;padding:4px 9px;border:0;border-radius:0;background:transparent;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font);cursor:pointer}
.retro-menubar__btn:hover,.retro-menubar__btn[aria-expanded="true"],.retro-menubar__btn:focus-visible{background:var(--retro-select);color:var(--retro-select-text)}
.retro-menubar__btn:focus-visible{outline:2px dotted var(--retro-select-text);outline-offset:-3px}
.retro-menu{position:absolute;top:100%;left:0;z-index:20;min-width:210px;margin:0;padding:3px;list-style:none;background:var(--retro-face);box-shadow:var(--retro-frame),2px 2px 0 rgba(0,0,0,.4)}
.retro-menu[hidden]{display:none}
.retro-menu__item{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:5px 12px 5px 8px;border:0;border-radius:0;background:transparent;color:var(--retro-text);
  font:400 .875rem/1.3 var(--retro-font);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
.retro-menu__item:hover,.retro-menu__item:focus-visible{background:var(--retro-select);color:var(--retro-select-text)}
.retro-menu__item:focus-visible{outline:2px dotted var(--retro-select-text);outline-offset:-3px}
.retro-menu__mark{display:grid;place-items:center;width:14px;flex:none}
.retro-menu__key{margin-left:auto;padding-left:22px}
.retro-menu__sep{height:2px;margin:3px 2px;box-shadow:inset 0 1px var(--retro-shadow),inset 0 -1px var(--retro-hilite)}
/* Property-sheet tabs: the selected tab stands taller and joins the panel */
.retro-tabs{display:flex;flex-wrap:wrap;margin:0;padding:0 0 0 2px;list-style:none}
.retro-tab{position:relative;margin:2px 0 0;padding:4px 14px 5px;border:0;border-radius:0;background:var(--retro-face);color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font);cursor:pointer;
  box-shadow:inset 1px 1px var(--retro-hilite),inset -1px 0 var(--retro-dark),inset 2px 2px var(--retro-light),inset -2px 0 var(--retro-shadow)}
.retro-tab[aria-selected="true"]{z-index:2;margin:0 -2px -2px;padding:6px 16px 7px;font-weight:700}
.retro-tab:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:-5px}
.retro-tabpanel{position:relative;z-index:1;padding:14px;background:var(--retro-face);box-shadow:var(--retro-frame)}
.retro-tabpanel[hidden]{display:none}
.retro-tabpanel:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
/* Taskbar: Start button, window buttons (the active one is latched in) and a sunken tray */
.retro-taskbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px;background:var(--retro-face);box-shadow:inset 0 1px var(--retro-light),inset 0 2px var(--retro-hilite)}
.retro-start{min-width:0;padding:4px 10px 4px 6px;font-weight:700}
.retro-start[aria-expanded="true"]{box-shadow:var(--retro-in)}
.retro-taskbar__apps{display:flex;flex:1 1 220px;gap:4px;min-width:0;margin:0;padding:0;list-style:none}
.retro-taskbar__apps>li{display:flex;flex:0 1 180px;min-width:0}
.retro-taskbtn{justify-content:flex-start;width:100%;min-width:0}
.retro-taskbtn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retro-taskbtn[aria-pressed="true"]{box-shadow:var(--retro-in);background:var(--retro-dither);font-weight:700}
.retro-tray{display:flex;align-items:center;gap:8px;min-height:32px;margin-left:auto;padding:3px 10px;box-shadow:var(--retro-thin-in);font:400 .8125rem/1 var(--retro-font);white-space:nowrap}

/* Start menu: opens upwards from the Start button, with a vertical banner */
.retro-startwrap{position:relative}
.retro-startmenu{position:absolute;bottom:calc(100% + 6px);left:0;z-index:30;display:flex;min-width:240px;padding:3px;background:var(--retro-face);box-shadow:var(--retro-frame),2px 2px 0 rgba(0,0,0,.4)}
.retro-startmenu[hidden]{display:none}
.retro-startmenu__banner{display:flex;align-items:flex-end;padding:8px 5px;background:linear-gradient(0deg,var(--retro-title),var(--retro-title-2));color:var(--retro-title-text);
  font:700 1.05rem/1 var(--retro-font);letter-spacing:.06em;writing-mode:vertical-rl;rotate:180deg}
.retro-startmenu__list{flex:1;margin:0;padding:0;list-style:none}
.retro-startmenu__list .retro-menu__item{gap:10px;padding:6px 14px 6px 8px}
/* Pagination: raised page buttons; the current page is latched in */
.retro-pager{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.retro-page{min-width:36px;padding:5px 9px}
.retro-page[aria-current="page"]{box-shadow:var(--retro-in);background:var(--retro-dither);font-weight:700}
.retro-pager__gap{padding:0 4px}
/* Address bar: the path as a breadcrumb in a sunken field */
.retro-address{display:flex;align-items:center;gap:8px;padding:4px}
.retro-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;flex:1;min-width:0;margin:0;padding:5px 8px;list-style:none;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken)}
.retro-crumbs li{display:inline-flex;align-items:center;gap:6px}
.retro-crumbs li+li::before{content:"\\";color:var(--retro-muted)}
.retro-crumbs a,.retro-crumbs [aria-current]{display:inline-flex;align-items:center;gap:6px}
.retro-crumbs a{color:var(--retro-link);text-decoration:underline;text-underline-offset:2px}
.retro-crumbs a:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:1px}
.retro-crumbs [aria-current]{font-weight:700}
/* Stat, content, profile and pricing windows */
.retro-stat__label{margin:0 0 6px;color:var(--retro-muted);font-size:.8125rem}
.retro-delta{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:.8125rem}
.retro-figure{display:block;margin:0 0 12px;padding:3px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-figure svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}
.retro-h{margin:0 0 6px;font:700 1.125rem/1.25 var(--retro-font)}
.retro-meta{margin:0 0 8px;color:var(--retro-muted);font-size:.8125rem}
.retro-profile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.retro-avatar{display:block;width:76px;height:76px;padding:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-avatar svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}
.retro-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:12px 0;padding:8px 10px;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken)}
.retro-dl dt{font-weight:700}
.retro-dl dd{margin:0}
.retro-price{display:flex;align-items:baseline;gap:8px;margin:2px 0 12px;font:400 2.75rem/1 var(--retro-mono)}
.retro-price span{color:var(--retro-muted);font:400 .8125rem/1.2 var(--retro-font)}
.retro-feats{display:grid;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.retro-feats li{display:flex;align-items:center;gap:8px}
.retro-badge{display:inline-block;padding:1px 6px;border:1px solid var(--retro-tip-line);background:var(--retro-tip);color:var(--retro-tip-text);font:700 .75rem/1.4 var(--retro-font)}
.retro-mt{margin-top:14px}
.retro-pad{padding:6px}
.retro-address__nav{flex:1;min-width:0}
.retro-screen-demo{display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;padding:2px;background:var(--retro-wallpaper);box-shadow:var(--retro-sunken)}
@media (prefers-reduced-motion:reduce){[class*="retro-"],[class*="retro-"]::before,[class*="retro-"]::after{transition:none!important;animation:none!important}}
JavaScript 
// Menus: a button opens its list; Escape, a click outside or opening another menu closes it.
// Arrow Down on a menu button opens it and focuses the first item; Arrow Up and Down move through the items.
(function () {
  var toggles = Array.prototype.slice.call(document.querySelectorAll('[data-retro-menu]'));
  function menuOf(b) { return document.getElementById(b.getAttribute('aria-controls')); }
  function set(b, open) { b.setAttribute('aria-expanded', String(open)); menuOf(b).hidden = !open; }
  function only(b, open) { toggles.forEach(function (o) { set(o, o === b ? open : false); }); }
  toggles.forEach(function (b) {
    var menu = menuOf(b);
    b.addEventListener('click', function () { only(b, b.getAttribute('aria-expanded') !== 'true'); });
    b.addEventListener('keydown', function (e) {
      if (e.key !== 'ArrowDown') return;
      e.preventDefault(); only(b, true);
      var first = menu.querySelector('a, button'); if (first) first.focus();
    });
    menu.addEventListener('keydown', function (e) {
      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
      e.preventDefault();
      var items = Array.prototype.slice.call(menu.querySelectorAll('a, button'));
      var i = items.indexOf(document.activeElement) + (e.key === 'ArrowDown' ? 1 : -1);
      items[(i + items.length) % items.length].focus();
    });
    menu.addEventListener('click', function (e) { if (e.target.closest('a, button')) { set(b, false); b.focus(); } });
  });
  document.addEventListener('click', function (e) {
    toggles.forEach(function (b) { if (!b.contains(e.target) && !menuOf(b).contains(e.target)) set(b, false); });
  });
  document.addEventListener('keydown', function (e) {
    if (e.key !== 'Escape') return;
    toggles.forEach(function (b) {
      if (b.getAttribute('aria-expanded') !== 'true') return;
      var inside = menuOf(b).contains(document.activeElement);
      set(b, false); if (inside) b.focus();
    });
  });
})();
// Tabs: click or Arrow keys / Home / End select a tab; only the selected tab is in the Tab order
document.querySelectorAll('[role="tablist"]').forEach(function (list) {
  var tabs = Array.prototype.slice.call(list.querySelectorAll('[role="tab"]'));
  function select(tab, focus) {
    tabs.forEach(function (t) {
      var on = t === tab;
      t.setAttribute('aria-selected', String(on));
      t.tabIndex = on ? 0 : -1;
      document.getElementById(t.getAttribute('aria-controls')).hidden = !on;
    });
    if (focus) tab.focus();
  }
  tabs.forEach(function (t, i) {
    t.addEventListener('click', function () { select(t); });
    t.addEventListener('keydown', function (e) {
      var n = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[e.key];
      if (n === undefined) return;
      e.preventDefault();
      select(tabs[(n + tabs.length) % tabs.length], true);
    });
  });
});
// Taskbar: the window button you press stays latched in (aria-pressed), the others pop out
document.querySelectorAll('[data-retro-taskbar]').forEach(function (bar) {
  var btns = Array.prototype.slice.call(bar.querySelectorAll('[aria-pressed]'));
  btns.forEach(function (b) {
    b.addEventListener('click', function () { btns.forEach(function (o) { o.setAttribute('aria-pressed', String(o === b)); }); });
  });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="rg-check" viewBox="0 0 7 7"><rect x="6" y="0" width="1" height="1" fill="currentColor"/><rect x="5" y="1" width="2" height="1" fill="currentColor"/><rect x="0" y="2" width="1" height="1" fill="currentColor"/><rect x="4" y="2" width="3" height="1" fill="currentColor"/><rect x="0" y="3" width="2" height="1" fill="currentColor"/><rect x="3" y="3" width="3" height="1" fill="currentColor"/><rect x="0" y="4" width="5" height="1" fill="currentColor"/><rect x="1" y="5" width="3" height="1" fill="currentColor"/><rect x="2" y="6" width="1" height="1" fill="currentColor"/></symbol>
  <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-computer" viewBox="0 0 16 16"><rect x="1" y="0" width="14" height="1" fill="#000000"/><rect x="1" y="1" width="1" height="1" fill="#000000"/><rect x="2" y="1" width="1" height="1" fill="#ffffff"/><rect x="3" y="1" width="10" height="1" fill="#c0c0c0"/><rect x="13" y="1" width="1" height="1" fill="#808080"/><rect x="14" y="1" width="1" height="1" fill="#000000"/><rect x="1" y="2" width="1" height="1" fill="#000000"/><rect x="2" y="2" width="1" height="1" fill="#c0c0c0"/><rect x="3" y="2" width="10" height="1" fill="#000000"/><rect x="13" y="2" width="1" height="1" fill="#808080"/><rect x="14" 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="1" height="1" fill="#c0c0c0"/><rect x="3" y="3" width="1" height="1" fill="#000000"/><rect x="4" y="3" width="8" height="1" fill="#008080"/><rect x="12" y="3" width="1" height="1" fill="#000000"/><rect x="13" y="3" width="1" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="4" width="1" height="1" fill="#000000"/><rect x="4" y="4" width="1" height="1" fill="#008080"/><rect x="5" y="4" width="1" height="1" fill="#3fd0d4"/><rect x="6" y="4" width="6" height="1" fill="#008080"/><rect x="12" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="1" height="1" fill="#808080"/><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="#c0c0c0"/><rect x="3" y="5" width="1" height="1" fill="#000000"/><rect x="4" y="5" width="8" height="1" fill="#008080"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="1" height="1" fill="#808080"/><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="#c0c0c0"/><rect x="3" y="6" width="1" height="1" fill="#000000"/><rect x="4" y="6" width="8" height="1" fill="#008080"/><rect x="12" y="6" width="1" height="1" fill="#000000"/><rect x="13" y="6" width="1" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="7" width="1" height="1" fill="#000000"/><rect x="4" y="7" width="8" height="1" fill="#008080"/><rect x="12" y="7" width="1" height="1" fill="#000000"/><rect x="13" y="7" width="1" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="8" width="10" height="1" fill="#000000"/><rect x="13" y="8" width="1" height="1" fill="#808080"/><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="9" height="1" fill="#c0c0c0"/><rect x="11" y="9" width="1" height="1" fill="#1fa31f"/><rect x="12" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="13" y="9" width="1" height="1" fill="#808080"/><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="12" height="1" fill="#808080"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="14" height="1" fill="#000000"/><rect x="5" y="12" width="1" height="1" fill="#000000"/><rect x="6" y="12" width="4" height="1" fill="#c0c0c0"/><rect x="10" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="10" height="1" fill="#000000"/><rect x="3" y="14" width="1" height="1" fill="#000000"/><rect x="4" y="14" width="1" height="1" fill="#ffffff"/><rect x="5" y="14" width="6" height="1" fill="#c0c0c0"/><rect x="11" y="14" width="1" height="1" fill="#808080"/><rect x="12" y="14" width="1" height="1" fill="#000000"/><rect x="3" y="15" width="10" height="1" fill="#000000"/></symbol>
  <symbol id="ri-doc" viewBox="0 0 16 16"><rect x="2" y="0" width="9" height="1" fill="#000000"/><rect x="2" y="1" width="1" height="1" fill="#000000"/><rect x="3" y="1" width="7" height="1" fill="#ffffff"/><rect x="10" 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="7" height="1" fill="#ffffff"/><rect x="10" y="2" width="1" height="1" fill="#000000"/><rect x="11" y="2" width="1" height="1" fill="#ffffff"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="3" width="4" height="1" fill="#808080"/><rect x="8" y="3" width="2" height="1" fill="#ffffff"/><rect x="10" y="3" width="4" height="1" fill="#000000"/><rect x="2" y="4" width="1" height="1" fill="#000000"/><rect x="3" y="4" width="10" height="1" fill="#ffffff"/><rect x="13" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="5" width="1" height="1" fill="#000000"/><rect x="3" y="5" width="1" height="1" fill="#ffffff"/><rect x="4" y="5" width="8" height="1" fill="#808080"/><rect x="12" y="5" width="1" height="1" fill="#ffffff"/><rect x="13" y="5" width="1" height="1" fill="#000000"/><rect x="2" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="6" width="10" height="1" fill="#ffffff"/><rect x="13" y="6" width="1" height="1" fill="#000000"/><rect x="2" y="7" width="1" height="1" fill="#000000"/><rect x="3" y="7" width="1" height="1" fill="#ffffff"/><rect x="4" y="7" width="8" height="1" fill="#808080"/><rect x="12" y="7" width="1" height="1" fill="#ffffff"/><rect x="13" y="7" width="1" height="1" fill="#000000"/><rect x="2" y="8" width="1" height="1" fill="#000000"/><rect x="3" y="8" width="10" height="1" fill="#ffffff"/><rect x="13" y="8" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="1" height="1" fill="#000000"/><rect x="3" y="9" width="1" height="1" fill="#ffffff"/><rect x="4" y="9" width="6" height="1" fill="#808080"/><rect x="10" y="9" width="3" height="1" fill="#ffffff"/><rect x="13" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="1" height="1" fill="#000000"/><rect x="3" y="10" width="10" height="1" fill="#ffffff"/><rect x="13" 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="1" height="1" fill="#ffffff"/><rect x="4" y="11" width="8" height="1" fill="#808080"/><rect x="12" y="11" width="1" height="1" fill="#ffffff"/><rect x="13" 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="10" height="1" fill="#ffffff"/><rect x="13" y="12" width="1" height="1" fill="#000000"/><rect x="2" y="13" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="10" height="1" fill="#ffffff"/><rect x="13" y="13" width="1" height="1" fill="#000000"/><rect x="2" y="14" width="12" height="1" fill="#000000"/></symbol>
  <symbol id="ri-floppy" viewBox="0 0 16 16"><rect x="0" y="0" width="15" height="1" fill="#000000"/><rect x="0" y="1" width="1" height="1" fill="#000000"/><rect x="1" y="1" width="2" height="1" fill="#000080"/><rect x="3" y="1" width="1" height="1" fill="#000000"/><rect x="4" y="1" width="8" height="1" fill="#ffffff"/><rect x="12" y="1" width="1" height="1" fill="#000000"/><rect x="13" y="1" width="1" height="1" fill="#000080"/><rect x="14" y="1" width="2" height="1" fill="#000000"/><rect x="0" y="2" width="1" height="1" fill="#000000"/><rect x="1" y="2" width="2" height="1" fill="#000080"/><rect x="3" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="2" width="8" height="1" fill="#ffffff"/><rect x="12" y="2" width="1" height="1" fill="#000000"/><rect x="13" y="2" width="2" height="1" fill="#000080"/><rect x="15" y="2" width="1" height="1" fill="#000000"/><rect x="0" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="3" width="2" height="1" fill="#000080"/><rect x="3" y="3" width="1" height="1" fill="#000000"/><rect x="4" y="3" width="1" height="1" fill="#ffffff"/><rect x="5" y="3" width="6" height="1" fill="#808080"/><rect x="11" y="3" width="1" height="1" fill="#ffffff"/><rect x="12" y="3" width="1" height="1" fill="#000000"/><rect x="13" y="3" width="2" height="1" fill="#000080"/><rect x="15" y="3" width="1" height="1" fill="#000000"/><rect x="0" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="2" height="1" fill="#000080"/><rect x="3" y="4" width="1" height="1" fill="#000000"/><rect x="4" y="4" width="8" height="1" fill="#ffffff"/><rect x="12" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="2" height="1" fill="#000080"/><rect x="15" 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="#000080"/><rect x="3" y="5" width="1" height="1" fill="#000000"/><rect x="4" y="5" width="1" height="1" fill="#ffffff"/><rect x="5" y="5" width="6" height="1" fill="#808080"/><rect x="11" y="5" width="1" height="1" fill="#ffffff"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="2" height="1" fill="#000080"/><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="2" height="1" fill="#000080"/><rect x="3" y="6" width="1" height="1" fill="#000000"/><rect x="4" y="6" width="8" height="1" fill="#ffffff"/><rect x="12" y="6" width="1" height="1" fill="#000000"/><rect x="13" y="6" width="2" height="1" fill="#000080"/><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="3" height="1" fill="#000080"/><rect x="4" y="7" width="8" height="1" fill="#000000"/><rect x="12" y="7" width="3" height="1" fill="#000080"/><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="14" height="1" fill="#000080"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="2" height="1" fill="#000080"/><rect x="3" y="9" width="10" height="1" fill="#c0c0c0"/><rect x="13" y="9" width="2" height="1" fill="#000080"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="0" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="2" height="1" fill="#000080"/><rect x="3" y="10" width="2" height="1" fill="#c0c0c0"/><rect x="5" y="10" width="2" height="1" fill="#000000"/><rect x="7" y="10" width="6" height="1" fill="#c0c0c0"/><rect x="13" y="10" width="2" height="1" fill="#000080"/><rect x="15" y="10" width="1" height="1" fill="#000000"/><rect x="0" y="11" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="2" height="1" fill="#000080"/><rect x="3" y="11" width="2" height="1" fill="#c0c0c0"/><rect x="5" y="11" width="2" height="1" fill="#000000"/><rect x="7" y="11" width="6" height="1" fill="#c0c0c0"/><rect x="13" y="11" width="2" height="1" fill="#000080"/><rect x="15" y="11" width="1" height="1" fill="#000000"/><rect x="0" y="12" width="1" height="1" fill="#000000"/><rect x="1" y="12" width="2" height="1" fill="#000080"/><rect x="3" y="12" width="2" height="1" fill="#c0c0c0"/><rect x="5" y="12" width="2" height="1" fill="#000000"/><rect x="7" y="12" width="6" height="1" fill="#c0c0c0"/><rect x="13" y="12" width="2" height="1" fill="#000080"/><rect x="15" y="12" width="1" height="1" fill="#000000"/><rect x="0" y="13" width="1" height="1" fill="#000000"/><rect x="1" y="13" width="2" height="1" fill="#000080"/><rect x="3" y="13" width="10" height="1" fill="#c0c0c0"/><rect x="13" y="13" width="2" height="1" fill="#000080"/><rect x="15" y="13" width="1" height="1" fill="#000000"/><rect x="0" y="14" width="16" height="1" fill="#000000"/></symbol>
  <symbol id="ri-folder" viewBox="0 0 16 16"><rect x="2" y="2" width="4" height="1" fill="#000000"/><rect x="1" y="3" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="4" height="1" fill="#ffd84a"/><rect x="6" y="3" width="1" height="1" fill="#000000"/><rect x="0" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="6" height="1" fill="#ffd84a"/><rect x="7" y="4" width="8" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="1" height="1" fill="#ffd84a"/><rect x="2" y="5" width="12" height="1" fill="#ffffff"/><rect x="14" y="5" width="1" height="1" fill="#ffd84a"/><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="1" height="1" fill="#ffd84a"/><rect x="2" y="6" width="1" height="1" fill="#ffffff"/><rect x="3" y="6" width="11" height="1" fill="#ffd84a"/><rect x="14" y="6" width="1" height="1" fill="#b88a00"/><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="1" height="1" fill="#ffd84a"/><rect x="2" y="7" width="1" height="1" fill="#ffffff"/><rect x="3" y="7" width="11" height="1" fill="#ffd84a"/><rect x="14" y="7" width="1" height="1" fill="#b88a00"/><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="1" height="1" fill="#ffd84a"/><rect x="2" y="8" width="1" height="1" fill="#ffffff"/><rect x="3" y="8" width="11" height="1" fill="#ffd84a"/><rect x="14" y="8" width="1" height="1" fill="#b88a00"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#ffd84a"/><rect x="2" y="9" width="1" height="1" fill="#ffffff"/><rect x="3" y="9" width="11" height="1" fill="#ffd84a"/><rect x="14" y="9" width="1" height="1" fill="#b88a00"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="0" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#ffd84a"/><rect x="2" y="10" width="1" height="1" fill="#ffffff"/><rect x="3" y="10" width="11" height="1" fill="#ffd84a"/><rect x="14" y="10" width="1" height="1" fill="#b88a00"/><rect x="15" y="10" width="1" height="1" fill="#000000"/><rect x="0" y="11" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#ffd84a"/><rect x="2" y="11" width="1" height="1" fill="#ffffff"/><rect x="3" y="11" width="11" height="1" fill="#ffd84a"/><rect x="14" y="11" width="1" height="1" fill="#b88a00"/><rect x="15" y="11" width="1" height="1" fill="#000000"/><rect x="0" y="12" width="1" height="1" fill="#000000"/><rect x="1" y="12" width="1" height="1" fill="#ffd84a"/><rect x="2" y="12" width="13" height="1" fill="#b88a00"/><rect x="15" y="12" width="1" height="1" fill="#000000"/><rect x="0" y="13" width="16" height="1" fill="#000000"/></symbol>
  <symbol id="ri-game" viewBox="0 0 16 16"><rect x="3" y="4" width="10" height="1" fill="#000000"/><rect x="2" y="5" width="1" height="1" fill="#000000"/><rect x="3" y="5" width="10" height="1" fill="#c0c0c0"/><rect x="13" 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="2" height="1" fill="#c0c0c0"/><rect x="4" y="6" width="1" height="1" fill="#000000"/><rect x="5" y="6" width="6" height="1" fill="#c0c0c0"/><rect x="11" y="6" width="1" height="1" fill="#d00000"/><rect x="12" y="6" width="2" height="1" fill="#c0c0c0"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="7" width="3" height="1" fill="#000000"/><rect x="6" y="7" width="4" height="1" fill="#c0c0c0"/><rect x="10" y="7" width="1" height="1" fill="#d00000"/><rect x="11" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="12" y="7" width="1" height="1" fill="#d00000"/><rect x="13" y="7" width="1" height="1" fill="#c0c0c0"/><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="2" height="1" fill="#c0c0c0"/><rect x="4" y="8" width="1" height="1" fill="#000000"/><rect x="5" y="8" width="6" height="1" fill="#c0c0c0"/><rect x="11" y="8" width="1" height="1" fill="#d00000"/><rect x="12" y="8" width="2" height="1" fill="#c0c0c0"/><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="12" height="1" fill="#c0c0c0"/><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="3" height="1" fill="#c0c0c0"/><rect x="5" y="10" width="6" height="1" fill="#000000"/><rect x="11" y="10" width="3" height="1" fill="#c0c0c0"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="3" height="1" fill="#000000"/><rect x="11" y="11" width="3" 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-mail" viewBox="0 0 16 16"><rect x="0" y="2" width="16" height="1" fill="#000000"/><rect x="0" y="3" width="2" height="1" fill="#000000"/><rect x="2" y="3" width="12" height="1" fill="#ffffff"/><rect x="14" y="3" width="2" height="1" fill="#000000"/><rect x="0" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#ffffff"/><rect x="2" y="4" width="1" height="1" fill="#000000"/><rect x="3" y="4" width="10" height="1" fill="#ffffff"/><rect x="13" y="4" width="1" height="1" fill="#000000"/><rect x="14" y="4" width="1" height="1" fill="#ffffff"/><rect x="15" 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="#ffffff"/><rect x="3" y="5" width="1" height="1" fill="#000000"/><rect x="4" y="5" width="8" height="1" fill="#ffffff"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="2" height="1" fill="#ffffff"/><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="3" height="1" fill="#ffffff"/><rect x="4" y="6" width="1" height="1" fill="#000000"/><rect x="5" y="6" width="6" height="1" fill="#ffffff"/><rect x="11" y="6" width="1" height="1" fill="#000000"/><rect x="12" y="6" width="3" height="1" fill="#ffffff"/><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="4" height="1" fill="#ffffff"/><rect x="5" y="7" width="2" height="1" fill="#000000"/><rect x="7" y="7" width="2" height="1" fill="#ffffff"/><rect x="9" y="7" width="2" height="1" fill="#000000"/><rect x="11" y="7" width="4" height="1" fill="#ffffff"/><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="#ffffff"/><rect x="5" y="8" width="1" height="1" fill="#000000"/><rect x="6" y="8" width="1" height="1" fill="#ffffff"/><rect x="7" y="8" width="2" height="1" fill="#000000"/><rect x="9" y="8" width="1" height="1" fill="#ffffff"/><rect x="10" y="8" width="1" height="1" fill="#000000"/><rect x="11" y="8" width="4" height="1" fill="#ffffff"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="3" height="1" fill="#ffffff"/><rect x="4" y="9" width="1" height="1" fill="#000000"/><rect x="5" y="9" width="6" height="1" fill="#ffffff"/><rect x="11" y="9" width="1" height="1" fill="#000000"/><rect x="12" y="9" width="3" height="1" fill="#ffffff"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="0" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="2" height="1" fill="#ffffff"/><rect x="3" y="10" width="1" height="1" fill="#000000"/><rect x="4" y="10" width="8" height="1" fill="#ffffff"/><rect x="12" y="10" width="1" height="1" fill="#000000"/><rect x="13" y="10" width="2" height="1" fill="#ffffff"/><rect x="15" y="10" width="1" height="1" fill="#000000"/><rect x="0" y="11" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#ffffff"/><rect x="2" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="11" width="10" height="1" fill="#ffffff"/><rect x="13" y="11" width="1" height="1" fill="#000000"/><rect x="14" y="11" width="1" height="1" fill="#ffffff"/><rect x="15" y="11" width="1" height="1" fill="#000000"/><rect x="0" y="12" width="16" height="1" fill="#000000"/></symbol>
  <symbol id="rg-max" viewBox="0 0 10 9"><rect x="0" y="0" width="10" height="1" fill="currentColor"/><rect x="0" y="1" width="10" height="1" fill="currentColor"/><rect x="0" y="2" width="1" height="1" fill="currentColor"/><rect x="9" y="2" width="1" height="1" fill="currentColor"/><rect x="0" y="3" width="1" height="1" fill="currentColor"/><rect x="9" y="3" width="1" height="1" fill="currentColor"/><rect x="0" y="4" width="1" height="1" fill="currentColor"/><rect x="9" y="4" width="1" height="1" fill="currentColor"/><rect x="0" y="5" width="1" height="1" fill="currentColor"/><rect x="9" y="5" width="1" height="1" fill="currentColor"/><rect x="0" y="6" width="1" height="1" fill="currentColor"/><rect x="9" y="6" width="1" height="1" fill="currentColor"/><rect x="0" y="7" width="1" height="1" fill="currentColor"/><rect x="9" y="7" width="1" height="1" fill="currentColor"/><rect x="0" y="8" width="10" height="1" fill="currentColor"/></symbol>
  <symbol id="rg-min" viewBox="0 0 7 9"><rect x="0" y="7" width="7" height="1" fill="currentColor"/><rect x="0" y="8" width="7" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-moon" viewBox="0 0 16 16"><rect x="4" y="1" width="3" height="1" fill="#000000"/><rect x="3" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="2" width="1" height="1" fill="#b88a00"/><rect x="5" 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="1" height="1" fill="#b88a00"/><rect x="4" 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="#b88a00"/><rect x="4" 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="2" height="1" fill="#b88a00"/><rect x="4" 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="2" height="1" fill="#b88a00"/><rect x="3" y="6" width="1" height="1" fill="#ffd84a"/><rect x="4" 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="#b88a00"/><rect x="2" y="7" width="2" height="1" fill="#ffd84a"/><rect x="4" 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="#ffd84a"/><rect x="5" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="5" height="1" fill="#ffd84a"/><rect x="6" 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="#ffd84a"/><rect x="7" 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="6" height="1" fill="#ffd84a"/><rect x="8" y="11" width="6" height="1" fill="#000000"/><rect x="2" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="9" height="1" fill="#ffd84a"/><rect x="12" 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="7" height="1" fill="#ffd84a"/><rect x="11" y="13" width="1" height="1" fill="#000000"/><rect x="4" y="14" width="7" height="1" fill="#000000"/></symbol>
  <symbol id="ri-question" 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="#1e6fd9"/><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="3" height="1" fill="#1e6fd9"/><rect x="6" y="2" width="4" height="1" fill="#ffffff"/><rect x="10" y="2" width="3" height="1" fill="#1e6fd9"/><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="3" height="1" fill="#1e6fd9"/><rect x="5" y="3" width="2" height="1" fill="#ffffff"/><rect x="7" y="3" width="2" height="1" fill="#1e6fd9"/><rect x="9" y="3" width="2" height="1" fill="#ffffff"/><rect x="11" y="3" width="3" height="1" fill="#1e6fd9"/><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="7" height="1" fill="#1e6fd9"/><rect x="9" y="4" width="2" height="1" fill="#ffffff"/><rect x="11" y="4" width="3" height="1" fill="#1e6fd9"/><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="7" height="1" fill="#1e6fd9"/><rect x="8" y="5" width="2" height="1" fill="#ffffff"/><rect x="10" y="5" width="5" height="1" fill="#1e6fd9"/><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="6" height="1" fill="#1e6fd9"/><rect x="7" y="6" width="2" height="1" fill="#ffffff"/><rect x="9" y="6" width="6" height="1" fill="#1e6fd9"/><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="6" height="1" fill="#1e6fd9"/><rect x="7" y="7" width="2" height="1" fill="#ffffff"/><rect x="9" y="7" width="6" height="1" fill="#1e6fd9"/><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="14" height="1" fill="#1e6fd9"/><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="6" height="1" fill="#1e6fd9"/><rect x="8" y="9" width="2" height="1" fill="#ffffff"/><rect x="10" y="9" width="4" 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="6" height="1" fill="#1e6fd9"/><rect x="8" y="10" width="2" height="1" fill="#ffffff"/><rect x="10" y="10" width="4" height="1" fill="#1e6fd9"/><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="#1e6fd9"/><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="#1e6fd9"/><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-search" viewBox="0 0 16 16"><rect x="3" y="0" width="5" height="1" fill="#000000"/><rect x="2" y="1" width="1" height="1" fill="#000000"/><rect x="3" y="1" width="5" height="1" fill="#ffffff"/><rect x="8" y="1" width="1" height="1" fill="#000000"/><rect x="1" y="2" width="1" height="1" fill="#000000"/><rect x="2" y="2" width="1" height="1" fill="#ffffff"/><rect x="3" y="2" width="1" height="1" fill="#3fd0d4"/><rect x="4" y="2" width="5" height="1" fill="#ffffff"/><rect x="9" 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="1" height="1" fill="#ffffff"/><rect x="3" y="3" width="1" height="1" fill="#3fd0d4"/><rect x="4" y="3" width="5" height="1" fill="#ffffff"/><rect x="9" 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="7" height="1" fill="#ffffff"/><rect x="9" 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="7" height="1" fill="#ffffff"/><rect x="9" y="5" width="1" height="1" fill="#000000"/><rect x="2" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="6" width="5" height="1" fill="#ffffff"/><rect x="8" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="7" width="7" height="1" fill="#000000"/><rect x="8" y="8" width="3" height="1" fill="#000000"/><rect x="9" y="9" width="3" height="1" fill="#000000"/><rect x="10" y="10" width="3" height="1" fill="#000000"/><rect x="11" y="11" width="2" 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">Menu bar · drop-down menus with shortcuts and ticks</span>
<section class="card retro-window" aria-labelledby="w-menu">
<div class="card-header retro-titlebar">
  <h2 class="retro-titlebar__title" id="w-menu"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>chapter-3.txt — Moonbyte Write</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Minimise Moonbyte Write"><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-min"/></svg></button><button class="retro-ctl" type="button" aria-label="Maximise Moonbyte Write"><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-max"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Moonbyte Write"><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<nav aria-label="Moonbyte Write"><ul class="nav retro-menubar"><li class="dropdown"><button class="retro-menubar__btn dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"><u>F</u>ile</button>
<ul class="dropdown-menu retro-dd"><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>New</span><span class="retro-menu__key">Ctrl+N</span></button></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Open…</span><span class="retro-menu__key">Ctrl+O</span></button></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Save</span><span class="retro-menu__key">Ctrl+S</span></button></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Save As…</span></button></li><li><hr class="dropdown-divider"></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Print…</span><span class="retro-menu__key">Ctrl+P</span></button></li><li><hr class="dropdown-divider"></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Exit</span></button></li></ul></li><li class="dropdown"><button class="retro-menubar__btn dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"><u>E</u>dit</button>
<ul class="dropdown-menu retro-dd"><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Undo typing</span><span class="retro-menu__key">Ctrl+Z</span></button></li><li><hr class="dropdown-divider"></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Cut</span><span class="retro-menu__key">Ctrl+X</span></button></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Copy</span><span class="retro-menu__key">Ctrl+C</span></button></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Paste</span><span class="retro-menu__key">Ctrl+V</span></button></li><li><hr class="dropdown-divider"></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Find…</span><span class="retro-menu__key">Ctrl+F</span></button></li></ul></li><li class="dropdown"><button class="retro-menubar__btn dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"><u>V</u>iew</button>
<ul class="dropdown-menu retro-dd"><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"><svg class="retro-glyph" width="7" height="7" aria-hidden="true" focusable="false"><use href="#rg-check"/></svg><span class="visually-hidden"> (on)</span></span><span>Toolbar</span></button></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"><svg class="retro-glyph" width="7" height="7" aria-hidden="true" focusable="false"><use href="#rg-check"/></svg><span class="visually-hidden"> (on)</span></span><span>Status bar</span></button></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Word wrap</span></button></li><li><hr class="dropdown-divider"></li><li><button class="dropdown-item" type="button"><span class="retro-menu__mark"></span><span>Zoom 100%</span></button></li></ul></li><li class="dropdown"><button class="retro-menubar__btn dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"><u>H</u>elp</button>
<ul class="dropdown-menu retro-dd"><li><a class="dropdown-item" href="#help"><span class="retro-menu__mark"></span><span>Help topics</span><span class="retro-menu__key">F1</span></a></li><li><a class="dropdown-item" href="#about"><span class="retro-menu__mark"></span><span>About Moonbyte Write</span></a></li></ul></li></ul></nav><div class="card-body retro-window__body">
<p class="form-control retro-input" style="min-height:120px">Chapter 3. The night train to Port Kessel left at 23:40. Open the File, Edit, View or Help menu with a click, or with Tab and Enter; Escape closes it.</p>
</div>
<div class="card-footer retro-statusbar"><p>For help, press F1</p><p>Ln 12, Col 40</p></div>
</section>
</section>
<div class="cols">
<section><span class="lbl">Address bar · the path as a breadcrumb</span>
<div class="retro-panel retro-pad"><div class="retro-address"><span id="addr-lbl">Address</span><nav class="flex-grow-1" style="min-width:0" aria-labelledby="addr-lbl"><ol class="breadcrumb retro-crumbs"><li class="breadcrumb-item"><a href="#my-computer"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-computer"/></svg>My Computer</a></li><li class="breadcrumb-item"><a href="#c"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-floppy"/></svg>(C:)</a></li><li class="breadcrumb-item"><a href="#games"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-folder"/></svg>Games</a></li><li class="breadcrumb-item active" aria-current="page"><span><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-folder"/></svg>Starfall Racer</span></li></ol></nav></div></div>
</section>
<section><span class="lbl">Pagination · the current page is latched in</span>
<div class="retro-panel"><nav aria-label="Saved games pages"><ul class="pagination retro-pager"><li class="page-item"><a class="page-link" href="#saves-2">« Back</a></li><li class="page-item"><a class="page-link" href="#saves-1" aria-label="Page 1">1</a></li><li class="page-item"><a class="page-link" href="#saves-2" aria-label="Page 2">2</a></li><li class="page-item active"><a class="page-link" href="#saves-3" aria-current="page" aria-label="Page 3">3</a></li><li class="page-item"><a class="page-link" href="#saves-4" aria-label="Page 4">4</a></li><li class="retro-pager__gap" aria-hidden="true">…</li><li class="page-item"><a class="page-link" href="#saves-12" aria-label="Page 12">12</a></li><li class="page-item"><a class="page-link" href="#saves-4">Next »</a></li></ul></nav></div>
</section>
</div>
<section><span class="lbl">Property sheet tabs · arrow keys move between tabs</span>
<section class="card retro-window" aria-labelledby="w-props">
<div class="card-header retro-titlebar">
  <h2 class="retro-titlebar__title" id="w-props"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><span>Starfall Racer Properties</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Help Properties"><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 Properties"><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">
<ul class="nav nav-tabs retro-tabs" role="tablist" aria-label="Starfall Racer properties"><li class="nav-item" role="presentation"><button class="nav-link active" id="tab-general" data-bs-toggle="tab" data-bs-target="#panel-general" type="button" role="tab" aria-controls="panel-general" aria-selected="true">General</button></li><li class="nav-item" role="presentation"><button class="nav-link" id="tab-compat" data-bs-toggle="tab" data-bs-target="#panel-compat" type="button" role="tab" aria-controls="panel-compat" aria-selected="false" tabindex="-1">Compatibility</button></li><li class="nav-item" role="presentation"><button class="nav-link" id="tab-sharing" data-bs-toggle="tab" data-bs-target="#panel-sharing" type="button" role="tab" aria-controls="panel-sharing" aria-selected="false" tabindex="-1">Sharing</button></li><li class="nav-item" role="presentation"><button class="nav-link" id="tab-details" data-bs-toggle="tab" data-bs-target="#panel-details" type="button" role="tab" aria-controls="panel-details" aria-selected="false" tabindex="-1">Details</button></li></ul>
<div class="tab-content retro-tabpanel"><div class="tab-pane active" id="panel-general" role="tabpanel" aria-labelledby="tab-general" tabindex="0"><div class="retro-cluster"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><p class=""><b>Starfall Racer</b><br>Application</p></div>
<dl class="retro-dl"><dt>Location</dt><dd>C:\Games\Starfall Racer</dd><dt>Size</dt><dd>18.6 MB (19,512,320 bytes)</dd><dt>Created</dt><dd>2 September 2026, 14:05</dd><dt>Opened</dt><dd>Today, 21:12</dd></dl></div>
<div class="tab-pane" id="panel-compat" role="tabpanel" aria-labelledby="tab-compat" tabindex="0"><fieldset class="retro-group"><legend class="retro-group__legend">Display settings</legend>
<div class="retro-stack"><div class="form-check retro-fc"><input class="form-check-input" type="checkbox" id="k1"><label class="form-check-label" for="k1">Run in 256 colours</label></div><div class="form-check retro-fc"><input class="form-check-input" type="checkbox" id="k2" checked><label class="form-check-label" for="k2">Run in 640 × 480 screen resolution</label></div><div class="form-check retro-fc"><input class="form-check-input" type="checkbox" id="k3"><label class="form-check-label" for="k3">Turn off visual themes</label></div></div>
</fieldset></div>
<div class="tab-pane" id="panel-sharing" role="tabpanel" aria-labelledby="tab-sharing" tabindex="0"><fieldset class="retro-group"><legend class="retro-group__legend">Network</legend>
<div class="retro-stack"><div class="form-check retro-fc"><input class="form-check-input" type="radio" id="n1" checked name="share"><label class="form-check-label" for="n1">Do not share this folder</label></div><div class="form-check retro-fc"><input class="form-check-input" type="radio" id="n2" name="share"><label class="form-check-label" for="n2">Share it on ARCADE-LAN as STARFALL</label></div></div>
</fieldset></div>
<div class="tab-pane" id="panel-details" role="tabpanel" aria-labelledby="tab-details" tabindex="0"><dl class="retro-dl"><dt>Version</dt><dd>2.4.0</dd><dt>Publisher</dt><dd>Moonbyte Games</dd><dt>Copyright</dt><dd>© 2026 Moonbyte Games</dd><dt>Language</dt><dd>English (United Kingdom)</dd></dl></div></div>
<div class="retro-actions retro-mt"><button class="btn btn-retro btn-retro-default" type="button">OK</button><button class="btn btn-retro" type="button">Cancel</button><button class="btn btn-retro" type="button">Apply</button></div>
</div>

</section>
</section>
<section><span class="lbl">Taskbar and Start menu · window buttons latch in, the tray shows the time</span>
<div class="retro-panel retro-pad"><div class="retro-screen-demo">
<nav class="retro-taskbar" aria-label="Taskbar" data-retro-taskbar>
<div class="dropup retro-startwrap"><button class="btn btn-retro retro-start dropdown-toggle show" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="true"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-moon"/></svg>Start</button>
<div class="dropdown-menu retro-dd retro-startmenu show" data-bs-popper="static"><span class="retro-startmenu__banner" aria-hidden="true">Moonbyte 98</span><ul class="retro-startmenu__list"><li><a class="dropdown-item" href="#programs"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-folder"/></svg><span>Programs</span></a></li><li><a class="dropdown-item" href="#documents"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>Documents</span></a></li><li><a class="dropdown-item" href="#settings"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-computer"/></svg><span>Settings</span></a></li><li><a class="dropdown-item" href="#find"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-search"/></svg><span>Find</span></a></li><li><a class="dropdown-item" href="#help"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-question"/></svg><span>Help</span></a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#shut-down"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-moon"/></svg><span>Shut Down…</span></a></li></ul></div></div>
<ul class="retro-taskbar__apps"><li class=""><button class="btn btn-retro retro-taskbtn" type="button" aria-pressed="true"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>chapter-3.txt — Moonbyte Write</span></button></li><li class=""><button class="btn btn-retro retro-taskbtn" type="button" aria-pressed="false"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg><span>Inbox (3 unread)</span></button></li><li class=""><button class="btn btn-retro retro-taskbtn" type="button" aria-pressed="false"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><span>Starfall Racer</span></button></li></ul>
<div class="retro-tray"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-speaker"/></svg><time datetime="21:20">9:20 PM</time></div>
</nav>
</div></div>
</section>
CSS 
/* ── 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}
/* Drop-down menus: Bootstrap .dropdown-menu restyled through --bs-dropdown-* variables */
.retro-dd.dropdown-menu{--bs-dropdown-bg:var(--retro-face);--bs-dropdown-color:var(--retro-text);--bs-dropdown-border-width:0;--bs-dropdown-border-radius:0;--bs-dropdown-padding-x:3px;--bs-dropdown-padding-y:3px;
  --bs-dropdown-spacer:0;--bs-dropdown-min-width:210px;--bs-dropdown-font-size:.875rem;--bs-dropdown-link-color:var(--retro-text);--bs-dropdown-link-hover-color:var(--retro-select-text);--bs-dropdown-link-hover-bg:var(--retro-select);
  --bs-dropdown-link-active-color:var(--retro-select-text);--bs-dropdown-link-active-bg:var(--retro-select);--bs-dropdown-item-padding-x:8px;--bs-dropdown-item-padding-y:5px;--bs-dropdown-item-border-radius:0;
  --bs-dropdown-divider-bg:transparent;--bs-dropdown-header-color:var(--retro-muted);--bs-dropdown-divider-margin-y:3px;box-shadow:var(--retro-frame),2px 2px 0 rgba(0,0,0,.4);font-family:var(--retro-font)}
.retro-dd .dropdown-item{display:flex;align-items:center;gap:8px;padding-right:12px;line-height:1.3}
.retro-dd .dropdown-item:focus-visible{background:var(--retro-select);color:var(--retro-select-text);outline:2px dotted var(--retro-select-text);outline-offset:-3px}
.retro-dd .dropdown-divider{height:2px;margin:3px 2px;border:0;opacity:1;box-shadow:inset 0 1px var(--retro-shadow),inset 0 -1px var(--retro-hilite)}
/* Menu bar and drop-down menus (disclosure buttons and lists of links or buttons) */
.retro-menubar{display:flex;flex-wrap:wrap;margin:0;padding:1px 0;list-style:none}
.retro-menubar>li{position:relative}
.retro-menubar__btn{display:block;margin:0;padding:4px 9px;border:0;border-radius:0;background:transparent;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font);cursor:pointer}
.retro-menubar__btn:hover,.retro-menubar__btn[aria-expanded="true"],.retro-menubar__btn:focus-visible{background:var(--retro-select);color:var(--retro-select-text)}
.retro-menubar__btn:focus-visible{outline:2px dotted var(--retro-select-text);outline-offset:-3px}
.retro-menu{position:absolute;top:100%;left:0;z-index:20;min-width:210px;margin:0;padding:3px;list-style:none;background:var(--retro-face);box-shadow:var(--retro-frame),2px 2px 0 rgba(0,0,0,.4)}
.retro-menu[hidden]{display:none}
.retro-menu__item{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:5px 12px 5px 8px;border:0;border-radius:0;background:transparent;color:var(--retro-text);
  font:400 .875rem/1.3 var(--retro-font);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
.retro-menu__item:hover,.retro-menu__item:focus-visible{background:var(--retro-select);color:var(--retro-select-text)}
.retro-menu__item:focus-visible{outline:2px dotted var(--retro-select-text);outline-offset:-3px}
.retro-menu__mark{display:grid;place-items:center;width:14px;flex:none}
.retro-menu__key{margin-left:auto;padding-left:22px}
.retro-menu__sep{height:2px;margin:3px 2px;box-shadow:inset 0 1px var(--retro-shadow),inset 0 -1px var(--retro-hilite)}
/* Property-sheet tabs: the selected tab stands taller and joins the panel */
.retro-tabs{display:flex;flex-wrap:wrap;margin:0;padding:0 0 0 2px;list-style:none}
.retro-tab{position:relative;margin:2px 0 0;padding:4px 14px 5px;border:0;border-radius:0;background:var(--retro-face);color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font);cursor:pointer;
  box-shadow:inset 1px 1px var(--retro-hilite),inset -1px 0 var(--retro-dark),inset 2px 2px var(--retro-light),inset -2px 0 var(--retro-shadow)}
.retro-tab[aria-selected="true"]{z-index:2;margin:0 -2px -2px;padding:6px 16px 7px;font-weight:700}
.retro-tab:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:-5px}
.retro-tabpanel{position:relative;z-index:1;padding:14px;background:var(--retro-face);box-shadow:var(--retro-frame)}
.retro-tabpanel[hidden]{display:none}
.retro-tabpanel:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
/* Tabs: Bootstrap .nav-tabs and the tab plugin, drawn as property-sheet tabs */
.nav-tabs.retro-tabs{--bs-nav-tabs-border-width:0;--bs-nav-tabs-border-radius:0;--bs-nav-link-padding-x:14px;--bs-nav-link-padding-y:4px;--bs-nav-link-font-size:.875rem;--bs-nav-link-color:var(--retro-text);
  --bs-nav-link-hover-color:var(--retro-text);--bs-nav-tabs-link-active-color:var(--retro-text);--bs-nav-tabs-link-active-bg:var(--retro-face);border:0;padding-left:2px}
.retro-tabs .nav-link{position:relative;margin:2px 0 0;padding-bottom:5px;background:var(--retro-face);font:400 .875rem/1.3 var(--retro-font);
  box-shadow:inset 1px 1px var(--retro-hilite),inset -1px 0 var(--retro-dark),inset 2px 2px var(--retro-light),inset -2px 0 var(--retro-shadow)}
.retro-tabs .nav-link.active{z-index:2;margin:0 -2px -2px;padding:6px 16px 7px;font-weight:700}
.retro-tabs .nav-link:focus-visible{box-shadow:inset 1px 1px var(--retro-hilite),inset -1px 0 var(--retro-dark),inset 2px 2px var(--retro-light),inset -2px 0 var(--retro-shadow);outline:2px dotted var(--retro-focus);outline-offset:-5px}
.tab-content.retro-tabpanel>.tab-pane{padding:0}
.tab-content.retro-tabpanel>.tab-pane:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:6px}
/* Taskbar: Start button, window buttons (the active one is latched in) and a sunken tray */
.retro-taskbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px;background:var(--retro-face);box-shadow:inset 0 1px var(--retro-light),inset 0 2px var(--retro-hilite)}
.retro-start{min-width:0;padding:4px 10px 4px 6px;font-weight:700}
.retro-start[aria-expanded="true"]{box-shadow:var(--retro-in)}
.retro-taskbar__apps{display:flex;flex:1 1 220px;gap:4px;min-width:0;margin:0;padding:0;list-style:none}
.retro-taskbar__apps>li{display:flex;flex:0 1 180px;min-width:0}
.retro-taskbtn{justify-content:flex-start;width:100%;min-width:0}
.retro-taskbtn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retro-taskbtn[aria-pressed="true"]{box-shadow:var(--retro-in);background:var(--retro-dither);font-weight:700}
.retro-tray{display:flex;align-items:center;gap:8px;min-height:32px;margin-left:auto;padding:3px 10px;box-shadow:var(--retro-thin-in);font:400 .8125rem/1 var(--retro-font);white-space:nowrap}

/* Start menu: a Bootstrap dropup with a vertical banner */
.retro-start.dropdown-toggle::after,.retro-menubar__btn.dropdown-toggle::after{display:none}
.dropdown-menu.retro-startmenu.show{display:flex}
.retro-startmenu.dropdown-menu{padding:3px;min-width:240px}
.retro-startmenu__banner{display:flex;align-items:flex-end;padding:8px 5px;background:linear-gradient(0deg,var(--retro-title),var(--retro-title-2));color:var(--retro-title-text);
  font:700 1.05rem/1 var(--retro-font);letter-spacing:.06em;writing-mode:vertical-rl;rotate:180deg}
.retro-startmenu__list{flex:1;margin:0;padding:0;list-style:none}
.retro-startmenu__list .dropdown-item{gap:10px;padding:6px 14px 6px 8px}
/* Pagination: Bootstrap .pagination restyled through --bs-pagination-* variables */
.pagination.retro-pager{--bs-pagination-padding-x:9px;--bs-pagination-padding-y:5px;--bs-pagination-font-size:.875rem;--bs-pagination-color:var(--retro-text);--bs-pagination-bg:var(--retro-face);--bs-pagination-border-width:0;
  --bs-pagination-border-radius:0;--bs-pagination-hover-color:var(--retro-text);--bs-pagination-hover-bg:var(--retro-face);--bs-pagination-focus-color:var(--retro-text);--bs-pagination-focus-bg:var(--retro-face);
  --bs-pagination-focus-box-shadow:var(--retro-out);--bs-pagination-active-color:var(--retro-text);--bs-pagination-active-bg:var(--retro-face);flex-wrap:wrap;gap:4px;margin:0}
.retro-pager .page-link{display:flex;align-items:center;justify-content:center;gap:6px;min-width:36px;min-height:32px;margin:0!important;box-shadow:var(--retro-out);font-family:var(--retro-font);line-height:1.2;text-decoration:none}
.retro-pager .page-link:active{box-shadow:var(--retro-in)}
.retro-pager .page-link:focus-visible{box-shadow:var(--retro-out);outline:2px dotted var(--retro-focus);outline-offset:-6px}
.retro-pager .active>.page-link{box-shadow:var(--retro-in);background:var(--retro-dither);font-weight:700}
.retro-pager .retro-pager__gap{display:flex;align-items:center;padding:0 4px}
/* Address bar: Bootstrap .breadcrumb inside a sunken field */
.retro-address{display:flex;align-items:center;gap:8px;padding:4px}
.breadcrumb.retro-crumbs{--bs-breadcrumb-margin-bottom:0;--bs-breadcrumb-item-padding-x:6px;--bs-breadcrumb-divider-color:var(--retro-muted);--bs-breadcrumb-item-active-color:var(--retro-field-text);--bs-breadcrumb-divider:"\\";
  flex:1;min-width:0;align-items:center;row-gap:2px;padding:5px 8px;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);font:400 .875rem/1.4 var(--retro-font)}
.retro-crumbs .breadcrumb-item{display:inline-flex;align-items:center}
.retro-crumbs .breadcrumb-item>*{display:inline-flex;align-items:center;gap:6px}
.retro-crumbs a{color:var(--retro-link);text-underline-offset:2px}
.retro-crumbs a:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:1px}
.retro-crumbs .active{font-weight:700}
/* Stat, content, profile and pricing windows */
.retro-stat__label{margin:0 0 6px;color:var(--retro-muted);font-size:.8125rem}
.retro-delta{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:.8125rem}
.retro-figure{display:block;margin:0 0 12px;padding:3px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-figure svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}
.retro-h{margin:0 0 6px;font:700 1.125rem/1.25 var(--retro-font)}
.retro-meta{margin:0 0 8px;color:var(--retro-muted);font-size:.8125rem}
.retro-profile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.retro-avatar{display:block;width:76px;height:76px;padding:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-avatar svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}
.retro-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:12px 0;padding:8px 10px;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken)}
.retro-dl dt{font-weight:700}
.retro-dl dd{margin:0}
.retro-price{display:flex;align-items:baseline;gap:8px;margin:2px 0 12px;font:400 2.75rem/1 var(--retro-mono)}
.retro-price span{color:var(--retro-muted);font:400 .8125rem/1.2 var(--retro-font)}
.retro-feats{display:grid;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.retro-feats li{display:flex;align-items:center;gap:8px}
.retro-badge{display:inline-block;padding:1px 6px;border:1px solid var(--retro-tip-line);background:var(--retro-tip);color:var(--retro-tip-text);font:700 .75rem/1.4 var(--retro-font)}
.retro-mt{margin-top:14px}
.retro-pad{padding:6px}
.retro-screen-demo{display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;padding:2px;background:var(--retro-wallpaper);box-shadow:var(--retro-sunken)}
.retro-startmenu.dropdown-menu[data-bs-popper]{margin-bottom:6px}
@media (prefers-reduced-motion:reduce){[class*="retro-"],[class*="retro-"]::before,[class*="retro-"]::after{transition:none!important;animation:none!important}}
JavaScript 
// Menus open with Bootstrap's dropdown plugin. The Start menu starts open, so create its instance now
// to let a click outside or Escape close it.
document.querySelectorAll('[data-bs-toggle="dropdown"].show').forEach(function (t) { bootstrap.Dropdown.getOrCreateInstance(t); });
// Taskbar: the window button you press stays latched in (aria-pressed), the others pop out
document.querySelectorAll('[data-retro-taskbar]').forEach(function (bar) {
  var btns = Array.prototype.slice.call(bar.querySelectorAll('[aria-pressed]'));
  btns.forEach(function (b) {
    b.addEventListener('click', function () { btns.forEach(function (o) { o.setAttribute('aria-pressed', String(o === b)); }); });
  });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="rg-check" viewBox="0 0 7 7"><rect x="6" y="0" width="1" height="1" fill="currentColor"/><rect x="5" y="1" width="2" height="1" fill="currentColor"/><rect x="0" y="2" width="1" height="1" fill="currentColor"/><rect x="4" y="2" width="3" height="1" fill="currentColor"/><rect x="0" y="3" width="2" height="1" fill="currentColor"/><rect x="3" y="3" width="3" height="1" fill="currentColor"/><rect x="0" y="4" width="5" height="1" fill="currentColor"/><rect x="1" y="5" width="3" height="1" fill="currentColor"/><rect x="2" y="6" width="1" height="1" fill="currentColor"/></symbol>
  <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-computer" viewBox="0 0 16 16"><rect x="1" y="0" width="14" height="1" fill="#000000"/><rect x="1" y="1" width="1" height="1" fill="#000000"/><rect x="2" y="1" width="1" height="1" fill="#ffffff"/><rect x="3" y="1" width="10" height="1" fill="#c0c0c0"/><rect x="13" y="1" width="1" height="1" fill="#808080"/><rect x="14" y="1" width="1" height="1" fill="#000000"/><rect x="1" y="2" width="1" height="1" fill="#000000"/><rect x="2" y="2" width="1" height="1" fill="#c0c0c0"/><rect x="3" y="2" width="10" height="1" fill="#000000"/><rect x="13" y="2" width="1" height="1" fill="#808080"/><rect x="14" 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="1" height="1" fill="#c0c0c0"/><rect x="3" y="3" width="1" height="1" fill="#000000"/><rect x="4" y="3" width="8" height="1" fill="#008080"/><rect x="12" y="3" width="1" height="1" fill="#000000"/><rect x="13" y="3" width="1" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="4" width="1" height="1" fill="#000000"/><rect x="4" y="4" width="1" height="1" fill="#008080"/><rect x="5" y="4" width="1" height="1" fill="#3fd0d4"/><rect x="6" y="4" width="6" height="1" fill="#008080"/><rect x="12" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="1" height="1" fill="#808080"/><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="#c0c0c0"/><rect x="3" y="5" width="1" height="1" fill="#000000"/><rect x="4" y="5" width="8" height="1" fill="#008080"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="1" height="1" fill="#808080"/><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="#c0c0c0"/><rect x="3" y="6" width="1" height="1" fill="#000000"/><rect x="4" y="6" width="8" height="1" fill="#008080"/><rect x="12" y="6" width="1" height="1" fill="#000000"/><rect x="13" y="6" width="1" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="7" width="1" height="1" fill="#000000"/><rect x="4" y="7" width="8" height="1" fill="#008080"/><rect x="12" y="7" width="1" height="1" fill="#000000"/><rect x="13" y="7" width="1" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="8" width="10" height="1" fill="#000000"/><rect x="13" y="8" width="1" height="1" fill="#808080"/><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="9" height="1" fill="#c0c0c0"/><rect x="11" y="9" width="1" height="1" fill="#1fa31f"/><rect x="12" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="13" y="9" width="1" height="1" fill="#808080"/><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="12" height="1" fill="#808080"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="14" height="1" fill="#000000"/><rect x="5" y="12" width="1" height="1" fill="#000000"/><rect x="6" y="12" width="4" height="1" fill="#c0c0c0"/><rect x="10" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="10" height="1" fill="#000000"/><rect x="3" y="14" width="1" height="1" fill="#000000"/><rect x="4" y="14" width="1" height="1" fill="#ffffff"/><rect x="5" y="14" width="6" height="1" fill="#c0c0c0"/><rect x="11" y="14" width="1" height="1" fill="#808080"/><rect x="12" y="14" width="1" height="1" fill="#000000"/><rect x="3" y="15" width="10" height="1" fill="#000000"/></symbol>
  <symbol id="ri-doc" viewBox="0 0 16 16"><rect x="2" y="0" width="9" height="1" fill="#000000"/><rect x="2" y="1" width="1" height="1" fill="#000000"/><rect x="3" y="1" width="7" height="1" fill="#ffffff"/><rect x="10" 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="7" height="1" fill="#ffffff"/><rect x="10" y="2" width="1" height="1" fill="#000000"/><rect x="11" y="2" width="1" height="1" fill="#ffffff"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="3" width="4" height="1" fill="#808080"/><rect x="8" y="3" width="2" height="1" fill="#ffffff"/><rect x="10" y="3" width="4" height="1" fill="#000000"/><rect x="2" y="4" width="1" height="1" fill="#000000"/><rect x="3" y="4" width="10" height="1" fill="#ffffff"/><rect x="13" y="4" width="1" height="1" fill="#000000"/><rect x="2" y="5" width="1" height="1" fill="#000000"/><rect x="3" y="5" width="1" height="1" fill="#ffffff"/><rect x="4" y="5" width="8" height="1" fill="#808080"/><rect x="12" y="5" width="1" height="1" fill="#ffffff"/><rect x="13" y="5" width="1" height="1" fill="#000000"/><rect x="2" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="6" width="10" height="1" fill="#ffffff"/><rect x="13" y="6" width="1" height="1" fill="#000000"/><rect x="2" y="7" width="1" height="1" fill="#000000"/><rect x="3" y="7" width="1" height="1" fill="#ffffff"/><rect x="4" y="7" width="8" height="1" fill="#808080"/><rect x="12" y="7" width="1" height="1" fill="#ffffff"/><rect x="13" y="7" width="1" height="1" fill="#000000"/><rect x="2" y="8" width="1" height="1" fill="#000000"/><rect x="3" y="8" width="10" height="1" fill="#ffffff"/><rect x="13" y="8" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="1" height="1" fill="#000000"/><rect x="3" y="9" width="1" height="1" fill="#ffffff"/><rect x="4" y="9" width="6" height="1" fill="#808080"/><rect x="10" y="9" width="3" height="1" fill="#ffffff"/><rect x="13" y="9" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="1" height="1" fill="#000000"/><rect x="3" y="10" width="10" height="1" fill="#ffffff"/><rect x="13" 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="1" height="1" fill="#ffffff"/><rect x="4" y="11" width="8" height="1" fill="#808080"/><rect x="12" y="11" width="1" height="1" fill="#ffffff"/><rect x="13" 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="10" height="1" fill="#ffffff"/><rect x="13" y="12" width="1" height="1" fill="#000000"/><rect x="2" y="13" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="10" height="1" fill="#ffffff"/><rect x="13" y="13" width="1" height="1" fill="#000000"/><rect x="2" y="14" width="12" height="1" fill="#000000"/></symbol>
  <symbol id="ri-floppy" viewBox="0 0 16 16"><rect x="0" y="0" width="15" height="1" fill="#000000"/><rect x="0" y="1" width="1" height="1" fill="#000000"/><rect x="1" y="1" width="2" height="1" fill="#000080"/><rect x="3" y="1" width="1" height="1" fill="#000000"/><rect x="4" y="1" width="8" height="1" fill="#ffffff"/><rect x="12" y="1" width="1" height="1" fill="#000000"/><rect x="13" y="1" width="1" height="1" fill="#000080"/><rect x="14" y="1" width="2" height="1" fill="#000000"/><rect x="0" y="2" width="1" height="1" fill="#000000"/><rect x="1" y="2" width="2" height="1" fill="#000080"/><rect x="3" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="2" width="8" height="1" fill="#ffffff"/><rect x="12" y="2" width="1" height="1" fill="#000000"/><rect x="13" y="2" width="2" height="1" fill="#000080"/><rect x="15" y="2" width="1" height="1" fill="#000000"/><rect x="0" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="3" width="2" height="1" fill="#000080"/><rect x="3" y="3" width="1" height="1" fill="#000000"/><rect x="4" y="3" width="1" height="1" fill="#ffffff"/><rect x="5" y="3" width="6" height="1" fill="#808080"/><rect x="11" y="3" width="1" height="1" fill="#ffffff"/><rect x="12" y="3" width="1" height="1" fill="#000000"/><rect x="13" y="3" width="2" height="1" fill="#000080"/><rect x="15" y="3" width="1" height="1" fill="#000000"/><rect x="0" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="2" height="1" fill="#000080"/><rect x="3" y="4" width="1" height="1" fill="#000000"/><rect x="4" y="4" width="8" height="1" fill="#ffffff"/><rect x="12" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="2" height="1" fill="#000080"/><rect x="15" 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="#000080"/><rect x="3" y="5" width="1" height="1" fill="#000000"/><rect x="4" y="5" width="1" height="1" fill="#ffffff"/><rect x="5" y="5" width="6" height="1" fill="#808080"/><rect x="11" y="5" width="1" height="1" fill="#ffffff"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="2" height="1" fill="#000080"/><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="2" height="1" fill="#000080"/><rect x="3" y="6" width="1" height="1" fill="#000000"/><rect x="4" y="6" width="8" height="1" fill="#ffffff"/><rect x="12" y="6" width="1" height="1" fill="#000000"/><rect x="13" y="6" width="2" height="1" fill="#000080"/><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="3" height="1" fill="#000080"/><rect x="4" y="7" width="8" height="1" fill="#000000"/><rect x="12" y="7" width="3" height="1" fill="#000080"/><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="14" height="1" fill="#000080"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="2" height="1" fill="#000080"/><rect x="3" y="9" width="10" height="1" fill="#c0c0c0"/><rect x="13" y="9" width="2" height="1" fill="#000080"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="0" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="2" height="1" fill="#000080"/><rect x="3" y="10" width="2" height="1" fill="#c0c0c0"/><rect x="5" y="10" width="2" height="1" fill="#000000"/><rect x="7" y="10" width="6" height="1" fill="#c0c0c0"/><rect x="13" y="10" width="2" height="1" fill="#000080"/><rect x="15" y="10" width="1" height="1" fill="#000000"/><rect x="0" y="11" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="2" height="1" fill="#000080"/><rect x="3" y="11" width="2" height="1" fill="#c0c0c0"/><rect x="5" y="11" width="2" height="1" fill="#000000"/><rect x="7" y="11" width="6" height="1" fill="#c0c0c0"/><rect x="13" y="11" width="2" height="1" fill="#000080"/><rect x="15" y="11" width="1" height="1" fill="#000000"/><rect x="0" y="12" width="1" height="1" fill="#000000"/><rect x="1" y="12" width="2" height="1" fill="#000080"/><rect x="3" y="12" width="2" height="1" fill="#c0c0c0"/><rect x="5" y="12" width="2" height="1" fill="#000000"/><rect x="7" y="12" width="6" height="1" fill="#c0c0c0"/><rect x="13" y="12" width="2" height="1" fill="#000080"/><rect x="15" y="12" width="1" height="1" fill="#000000"/><rect x="0" y="13" width="1" height="1" fill="#000000"/><rect x="1" y="13" width="2" height="1" fill="#000080"/><rect x="3" y="13" width="10" height="1" fill="#c0c0c0"/><rect x="13" y="13" width="2" height="1" fill="#000080"/><rect x="15" y="13" width="1" height="1" fill="#000000"/><rect x="0" y="14" width="16" height="1" fill="#000000"/></symbol>
  <symbol id="ri-folder" viewBox="0 0 16 16"><rect x="2" y="2" width="4" height="1" fill="#000000"/><rect x="1" y="3" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="4" height="1" fill="#ffd84a"/><rect x="6" y="3" width="1" height="1" fill="#000000"/><rect x="0" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="6" height="1" fill="#ffd84a"/><rect x="7" y="4" width="8" height="1" fill="#000000"/><rect x="0" y="5" width="1" height="1" fill="#000000"/><rect x="1" y="5" width="1" height="1" fill="#ffd84a"/><rect x="2" y="5" width="12" height="1" fill="#ffffff"/><rect x="14" y="5" width="1" height="1" fill="#ffd84a"/><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="1" height="1" fill="#ffd84a"/><rect x="2" y="6" width="1" height="1" fill="#ffffff"/><rect x="3" y="6" width="11" height="1" fill="#ffd84a"/><rect x="14" y="6" width="1" height="1" fill="#b88a00"/><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="1" height="1" fill="#ffd84a"/><rect x="2" y="7" width="1" height="1" fill="#ffffff"/><rect x="3" y="7" width="11" height="1" fill="#ffd84a"/><rect x="14" y="7" width="1" height="1" fill="#b88a00"/><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="1" height="1" fill="#ffd84a"/><rect x="2" y="8" width="1" height="1" fill="#ffffff"/><rect x="3" y="8" width="11" height="1" fill="#ffd84a"/><rect x="14" y="8" width="1" height="1" fill="#b88a00"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="1" height="1" fill="#ffd84a"/><rect x="2" y="9" width="1" height="1" fill="#ffffff"/><rect x="3" y="9" width="11" height="1" fill="#ffd84a"/><rect x="14" y="9" width="1" height="1" fill="#b88a00"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="0" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#ffd84a"/><rect x="2" y="10" width="1" height="1" fill="#ffffff"/><rect x="3" y="10" width="11" height="1" fill="#ffd84a"/><rect x="14" y="10" width="1" height="1" fill="#b88a00"/><rect x="15" y="10" width="1" height="1" fill="#000000"/><rect x="0" y="11" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#ffd84a"/><rect x="2" y="11" width="1" height="1" fill="#ffffff"/><rect x="3" y="11" width="11" height="1" fill="#ffd84a"/><rect x="14" y="11" width="1" height="1" fill="#b88a00"/><rect x="15" y="11" width="1" height="1" fill="#000000"/><rect x="0" y="12" width="1" height="1" fill="#000000"/><rect x="1" y="12" width="1" height="1" fill="#ffd84a"/><rect x="2" y="12" width="13" height="1" fill="#b88a00"/><rect x="15" y="12" width="1" height="1" fill="#000000"/><rect x="0" y="13" width="16" height="1" fill="#000000"/></symbol>
  <symbol id="ri-game" viewBox="0 0 16 16"><rect x="3" y="4" width="10" height="1" fill="#000000"/><rect x="2" y="5" width="1" height="1" fill="#000000"/><rect x="3" y="5" width="10" height="1" fill="#c0c0c0"/><rect x="13" 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="2" height="1" fill="#c0c0c0"/><rect x="4" y="6" width="1" height="1" fill="#000000"/><rect x="5" y="6" width="6" height="1" fill="#c0c0c0"/><rect x="11" y="6" width="1" height="1" fill="#d00000"/><rect x="12" y="6" width="2" height="1" fill="#c0c0c0"/><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="1" height="1" fill="#c0c0c0"/><rect x="3" y="7" width="3" height="1" fill="#000000"/><rect x="6" y="7" width="4" height="1" fill="#c0c0c0"/><rect x="10" y="7" width="1" height="1" fill="#d00000"/><rect x="11" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="12" y="7" width="1" height="1" fill="#d00000"/><rect x="13" y="7" width="1" height="1" fill="#c0c0c0"/><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="2" height="1" fill="#c0c0c0"/><rect x="4" y="8" width="1" height="1" fill="#000000"/><rect x="5" y="8" width="6" height="1" fill="#c0c0c0"/><rect x="11" y="8" width="1" height="1" fill="#d00000"/><rect x="12" y="8" width="2" height="1" fill="#c0c0c0"/><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="12" height="1" fill="#c0c0c0"/><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="3" height="1" fill="#c0c0c0"/><rect x="5" y="10" width="6" height="1" fill="#000000"/><rect x="11" y="10" width="3" height="1" fill="#c0c0c0"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="3" height="1" fill="#000000"/><rect x="11" y="11" width="3" 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-mail" viewBox="0 0 16 16"><rect x="0" y="2" width="16" height="1" fill="#000000"/><rect x="0" y="3" width="2" height="1" fill="#000000"/><rect x="2" y="3" width="12" height="1" fill="#ffffff"/><rect x="14" y="3" width="2" height="1" fill="#000000"/><rect x="0" y="4" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="1" height="1" fill="#ffffff"/><rect x="2" y="4" width="1" height="1" fill="#000000"/><rect x="3" y="4" width="10" height="1" fill="#ffffff"/><rect x="13" y="4" width="1" height="1" fill="#000000"/><rect x="14" y="4" width="1" height="1" fill="#ffffff"/><rect x="15" 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="#ffffff"/><rect x="3" y="5" width="1" height="1" fill="#000000"/><rect x="4" y="5" width="8" height="1" fill="#ffffff"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="2" height="1" fill="#ffffff"/><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="3" height="1" fill="#ffffff"/><rect x="4" y="6" width="1" height="1" fill="#000000"/><rect x="5" y="6" width="6" height="1" fill="#ffffff"/><rect x="11" y="6" width="1" height="1" fill="#000000"/><rect x="12" y="6" width="3" height="1" fill="#ffffff"/><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="4" height="1" fill="#ffffff"/><rect x="5" y="7" width="2" height="1" fill="#000000"/><rect x="7" y="7" width="2" height="1" fill="#ffffff"/><rect x="9" y="7" width="2" height="1" fill="#000000"/><rect x="11" y="7" width="4" height="1" fill="#ffffff"/><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="#ffffff"/><rect x="5" y="8" width="1" height="1" fill="#000000"/><rect x="6" y="8" width="1" height="1" fill="#ffffff"/><rect x="7" y="8" width="2" height="1" fill="#000000"/><rect x="9" y="8" width="1" height="1" fill="#ffffff"/><rect x="10" y="8" width="1" height="1" fill="#000000"/><rect x="11" y="8" width="4" height="1" fill="#ffffff"/><rect x="15" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="3" height="1" fill="#ffffff"/><rect x="4" y="9" width="1" height="1" fill="#000000"/><rect x="5" y="9" width="6" height="1" fill="#ffffff"/><rect x="11" y="9" width="1" height="1" fill="#000000"/><rect x="12" y="9" width="3" height="1" fill="#ffffff"/><rect x="15" y="9" width="1" height="1" fill="#000000"/><rect x="0" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="2" height="1" fill="#ffffff"/><rect x="3" y="10" width="1" height="1" fill="#000000"/><rect x="4" y="10" width="8" height="1" fill="#ffffff"/><rect x="12" y="10" width="1" height="1" fill="#000000"/><rect x="13" y="10" width="2" height="1" fill="#ffffff"/><rect x="15" y="10" width="1" height="1" fill="#000000"/><rect x="0" y="11" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#ffffff"/><rect x="2" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="11" width="10" height="1" fill="#ffffff"/><rect x="13" y="11" width="1" height="1" fill="#000000"/><rect x="14" y="11" width="1" height="1" fill="#ffffff"/><rect x="15" y="11" width="1" height="1" fill="#000000"/><rect x="0" y="12" width="16" height="1" fill="#000000"/></symbol>
  <symbol id="rg-max" viewBox="0 0 10 9"><rect x="0" y="0" width="10" height="1" fill="currentColor"/><rect x="0" y="1" width="10" height="1" fill="currentColor"/><rect x="0" y="2" width="1" height="1" fill="currentColor"/><rect x="9" y="2" width="1" height="1" fill="currentColor"/><rect x="0" y="3" width="1" height="1" fill="currentColor"/><rect x="9" y="3" width="1" height="1" fill="currentColor"/><rect x="0" y="4" width="1" height="1" fill="currentColor"/><rect x="9" y="4" width="1" height="1" fill="currentColor"/><rect x="0" y="5" width="1" height="1" fill="currentColor"/><rect x="9" y="5" width="1" height="1" fill="currentColor"/><rect x="0" y="6" width="1" height="1" fill="currentColor"/><rect x="9" y="6" width="1" height="1" fill="currentColor"/><rect x="0" y="7" width="1" height="1" fill="currentColor"/><rect x="9" y="7" width="1" height="1" fill="currentColor"/><rect x="0" y="8" width="10" height="1" fill="currentColor"/></symbol>
  <symbol id="rg-min" viewBox="0 0 7 9"><rect x="0" y="7" width="7" height="1" fill="currentColor"/><rect x="0" y="8" width="7" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-moon" viewBox="0 0 16 16"><rect x="4" y="1" width="3" height="1" fill="#000000"/><rect x="3" y="2" width="1" height="1" fill="#000000"/><rect x="4" y="2" width="1" height="1" fill="#b88a00"/><rect x="5" 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="1" height="1" fill="#b88a00"/><rect x="4" 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="#b88a00"/><rect x="4" 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="2" height="1" fill="#b88a00"/><rect x="4" 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="2" height="1" fill="#b88a00"/><rect x="3" y="6" width="1" height="1" fill="#ffd84a"/><rect x="4" 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="#b88a00"/><rect x="2" y="7" width="2" height="1" fill="#ffd84a"/><rect x="4" 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="#ffd84a"/><rect x="5" y="8" width="1" height="1" fill="#000000"/><rect x="0" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="9" width="5" height="1" fill="#ffd84a"/><rect x="6" 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="#ffd84a"/><rect x="7" 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="6" height="1" fill="#ffd84a"/><rect x="8" y="11" width="6" height="1" fill="#000000"/><rect x="2" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="9" height="1" fill="#ffd84a"/><rect x="12" 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="7" height="1" fill="#ffd84a"/><rect x="11" y="13" width="1" height="1" fill="#000000"/><rect x="4" y="14" width="7" height="1" fill="#000000"/></symbol>
  <symbol id="ri-question" 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="#1e6fd9"/><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="3" height="1" fill="#1e6fd9"/><rect x="6" y="2" width="4" height="1" fill="#ffffff"/><rect x="10" y="2" width="3" height="1" fill="#1e6fd9"/><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="3" height="1" fill="#1e6fd9"/><rect x="5" y="3" width="2" height="1" fill="#ffffff"/><rect x="7" y="3" width="2" height="1" fill="#1e6fd9"/><rect x="9" y="3" width="2" height="1" fill="#ffffff"/><rect x="11" y="3" width="3" height="1" fill="#1e6fd9"/><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="7" height="1" fill="#1e6fd9"/><rect x="9" y="4" width="2" height="1" fill="#ffffff"/><rect x="11" y="4" width="3" height="1" fill="#1e6fd9"/><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="7" height="1" fill="#1e6fd9"/><rect x="8" y="5" width="2" height="1" fill="#ffffff"/><rect x="10" y="5" width="5" height="1" fill="#1e6fd9"/><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="6" height="1" fill="#1e6fd9"/><rect x="7" y="6" width="2" height="1" fill="#ffffff"/><rect x="9" y="6" width="6" height="1" fill="#1e6fd9"/><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="6" height="1" fill="#1e6fd9"/><rect x="7" y="7" width="2" height="1" fill="#ffffff"/><rect x="9" y="7" width="6" height="1" fill="#1e6fd9"/><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="14" height="1" fill="#1e6fd9"/><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="6" height="1" fill="#1e6fd9"/><rect x="8" y="9" width="2" height="1" fill="#ffffff"/><rect x="10" y="9" width="4" 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="6" height="1" fill="#1e6fd9"/><rect x="8" y="10" width="2" height="1" fill="#ffffff"/><rect x="10" y="10" width="4" height="1" fill="#1e6fd9"/><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="#1e6fd9"/><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="#1e6fd9"/><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-search" viewBox="0 0 16 16"><rect x="3" y="0" width="5" height="1" fill="#000000"/><rect x="2" y="1" width="1" height="1" fill="#000000"/><rect x="3" y="1" width="5" height="1" fill="#ffffff"/><rect x="8" y="1" width="1" height="1" fill="#000000"/><rect x="1" y="2" width="1" height="1" fill="#000000"/><rect x="2" y="2" width="1" height="1" fill="#ffffff"/><rect x="3" y="2" width="1" height="1" fill="#3fd0d4"/><rect x="4" y="2" width="5" height="1" fill="#ffffff"/><rect x="9" 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="1" height="1" fill="#ffffff"/><rect x="3" y="3" width="1" height="1" fill="#3fd0d4"/><rect x="4" y="3" width="5" height="1" fill="#ffffff"/><rect x="9" 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="7" height="1" fill="#ffffff"/><rect x="9" 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="7" height="1" fill="#ffffff"/><rect x="9" y="5" width="1" height="1" fill="#000000"/><rect x="2" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="6" width="5" height="1" fill="#ffffff"/><rect x="8" y="6" width="1" height="1" fill="#000000"/><rect x="3" y="7" width="7" height="1" fill="#000000"/><rect x="8" y="8" width="3" height="1" fill="#000000"/><rect x="9" y="9" width="3" height="1" fill="#000000"/><rect x="10" y="10" width="3" height="1" fill="#000000"/><rect x="11" y="11" width="2" 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">Menu bar · drop-down menus with shortcuts and ticks</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-menu">
<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-menu"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span class="min-w-0 truncate">chapter-3.txt — Moonbyte Write</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="Minimise Moonbyte Write"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-min"/></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]" type="button" aria-label="Maximise Moonbyte Write"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-max"/></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 Moonbyte Write"><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>
<nav aria-label="Moonbyte Write"><ul class="flex flex-wrap m-0 py-px px-0 list-none"><li class="relative"><button class="block m-0 px-[9px] py-1 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] cursor-pointer hover:bg-retro-select hover:text-retro-select-text aria-expanded:bg-retro-select aria-expanded:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button" aria-expanded="false" aria-controls="m-file" data-retro-menu><u>F</u>ile</button>
<ul class="absolute top-full left-0 z-20 min-w-[210px] m-0 p-[3px] list-none bg-retro-face shadow-[var(--retro-frame),2px_2px_0_rgba(0,0,0,.4)]" id="m-file" hidden><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>New</span><span class="ml-auto pl-[22px]">Ctrl+N</span></button></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Open…</span><span class="ml-auto pl-[22px]">Ctrl+O</span></button></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Save</span><span class="ml-auto pl-[22px]">Ctrl+S</span></button></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Save As…</span></button></li><li class="h-0.5 mx-0.5 my-[3px] shadow-[inset_0_1px_var(--retro-shadow),inset_0_-1px_var(--retro-hilite)]" aria-hidden="true"></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Print…</span><span class="ml-auto pl-[22px]">Ctrl+P</span></button></li><li class="h-0.5 mx-0.5 my-[3px] shadow-[inset_0_1px_var(--retro-shadow),inset_0_-1px_var(--retro-hilite)]" aria-hidden="true"></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Exit</span></button></li></ul></li><li class="relative"><button class="block m-0 px-[9px] py-1 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] cursor-pointer hover:bg-retro-select hover:text-retro-select-text aria-expanded:bg-retro-select aria-expanded:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button" aria-expanded="false" aria-controls="m-edit" data-retro-menu><u>E</u>dit</button>
<ul class="absolute top-full left-0 z-20 min-w-[210px] m-0 p-[3px] list-none bg-retro-face shadow-[var(--retro-frame),2px_2px_0_rgba(0,0,0,.4)]" id="m-edit" hidden><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Undo typing</span><span class="ml-auto pl-[22px]">Ctrl+Z</span></button></li><li class="h-0.5 mx-0.5 my-[3px] shadow-[inset_0_1px_var(--retro-shadow),inset_0_-1px_var(--retro-hilite)]" aria-hidden="true"></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Cut</span><span class="ml-auto pl-[22px]">Ctrl+X</span></button></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Copy</span><span class="ml-auto pl-[22px]">Ctrl+C</span></button></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Paste</span><span class="ml-auto pl-[22px]">Ctrl+V</span></button></li><li class="h-0.5 mx-0.5 my-[3px] shadow-[inset_0_1px_var(--retro-shadow),inset_0_-1px_var(--retro-hilite)]" aria-hidden="true"></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Find…</span><span class="ml-auto pl-[22px]">Ctrl+F</span></button></li></ul></li><li class="relative"><button class="block m-0 px-[9px] py-1 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] cursor-pointer hover:bg-retro-select hover:text-retro-select-text aria-expanded:bg-retro-select aria-expanded:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button" aria-expanded="false" aria-controls="m-view" data-retro-menu><u>V</u>iew</button>
<ul class="absolute top-full left-0 z-20 min-w-[210px] m-0 p-[3px] list-none bg-retro-face shadow-[var(--retro-frame),2px_2px_0_rgba(0,0,0,.4)]" id="m-view" hidden><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="7" height="7" aria-hidden="true" focusable="false"><use href="#rg-check"/></svg><span class="sr-only"> (on)</span></span><span>Toolbar</span></button></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="7" height="7" aria-hidden="true" focusable="false"><use href="#rg-check"/></svg><span class="sr-only"> (on)</span></span><span>Status bar</span></button></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Word wrap</span></button></li><li class="h-0.5 mx-0.5 my-[3px] shadow-[inset_0_1px_var(--retro-shadow),inset_0_-1px_var(--retro-hilite)]" aria-hidden="true"></li><li><button class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Zoom 100%</span></button></li></ul></li><li class="relative"><button class="block m-0 px-[9px] py-1 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] cursor-pointer hover:bg-retro-select hover:text-retro-select-text aria-expanded:bg-retro-select aria-expanded:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" type="button" aria-expanded="false" aria-controls="m-help" data-retro-menu><u>H</u>elp</button>
<ul class="absolute top-full left-0 z-20 min-w-[210px] m-0 p-[3px] list-none bg-retro-face shadow-[var(--retro-frame),2px_2px_0_rgba(0,0,0,.4)]" id="m-help" hidden><li><a class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" href="#help"><span class="grid place-items-center w-3.5 shrink-0"></span><span>Help topics</span><span class="ml-auto pl-[22px]">F1</span></a></li><li><a class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px]" href="#about"><span class="grid place-items-center w-3.5 shrink-0"></span><span>About Moonbyte Write</span></a></li></ul></li></ul></nav><div class="px-2.5 py-3">
<p class="block w-full 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.5]" style="min-height:120px">Chapter 3. The night train to Port Kessel left at 23:40. Open the File, Edit, View or Help menu with a click, or with Tab and Enter; Escape closes it.</p>
</div>
<div class="flex flex-wrap gap-0.5 mt-0.5"><p class="flex-auto m-0 px-[7px] py-[3px] shadow-retro-thin-in text-[.8125rem]">For help, press F1</p><p class="flex-auto m-0 px-[7px] py-[3px] shadow-retro-thin-in text-[.8125rem]">Ln 12, Col 40</p></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">Address bar · the path as a breadcrumb</span>
<div class="min-w-0 p-3.5 bg-retro-face text-retro-text shadow-retro-window font-retro text-sm leading-[1.4] p-1.5!"><div class="flex items-center gap-2 p-1"><span id="addr-lbl">Address</span><nav class="flex-1 min-w-0" aria-labelledby="addr-lbl"><ol class="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 flex-1 min-w-0 m-0 px-2 py-[5px] list-none bg-retro-field text-retro-field-text shadow-retro-sunken"><li class="inline-flex items-center gap-1.5"><a class="inline-flex items-center gap-1.5 text-retro-link underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[1px]" href="#my-computer"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-computer"/></svg>My Computer</a></li><li class="inline-flex items-center gap-1.5"><span class="text-retro-muted" aria-hidden="true">\</span><a class="inline-flex items-center gap-1.5 text-retro-link underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[1px]" href="#c"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-floppy"/></svg>(C:)</a></li><li class="inline-flex items-center gap-1.5"><span class="text-retro-muted" aria-hidden="true">\</span><a class="inline-flex items-center gap-1.5 text-retro-link underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[1px]" href="#games"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-folder"/></svg>Games</a></li><li class="inline-flex items-center gap-1.5"><span class="text-retro-muted" aria-hidden="true">\</span><span class="inline-flex items-center gap-1.5 font-bold" aria-current="page"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-folder"/></svg>Starfall Racer</span></li></ol></nav></div></div>
</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">Pagination · the current page is latched in</span>
<div class="min-w-0 p-3.5 bg-retro-face text-retro-text shadow-retro-window font-retro text-sm leading-[1.4]"><nav aria-label="Saved games pages"><ul class="flex flex-wrap items-center gap-1 m-0 p-0 list-none"><li><a 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 min-w-9! px-[9px]! aria-[current=page]:shadow-retro-in aria-[current=page]:[background:var(--retro-dither)] aria-[current=page]:font-bold" href="#saves-2">« Back</a></li><li><a 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 min-w-9! px-[9px]! aria-[current=page]:shadow-retro-in aria-[current=page]:[background:var(--retro-dither)] aria-[current=page]:font-bold" href="#saves-1" aria-label="Page 1">1</a></li><li><a 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 min-w-9! px-[9px]! aria-[current=page]:shadow-retro-in aria-[current=page]:[background:var(--retro-dither)] aria-[current=page]:font-bold" href="#saves-2" aria-label="Page 2">2</a></li><li><a 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 min-w-9! px-[9px]! aria-[current=page]:shadow-retro-in aria-[current=page]:[background:var(--retro-dither)] aria-[current=page]:font-bold" href="#saves-3" aria-current="page" aria-label="Page 3">3</a></li><li><a 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 min-w-9! px-[9px]! aria-[current=page]:shadow-retro-in aria-[current=page]:[background:var(--retro-dither)] aria-[current=page]:font-bold" href="#saves-4" aria-label="Page 4">4</a></li><li class="px-1" aria-hidden="true">…</li><li><a 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 min-w-9! px-[9px]! aria-[current=page]:shadow-retro-in aria-[current=page]:[background:var(--retro-dither)] aria-[current=page]:font-bold" href="#saves-12" aria-label="Page 12">12</a></li><li><a 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 min-w-9! px-[9px]! aria-[current=page]:shadow-retro-in aria-[current=page]:[background:var(--retro-dither)] aria-[current=page]:font-bold" href="#saves-4">Next »</a></li></ul></nav></div>
</section>
</div>
<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">Property sheet tabs · arrow keys move between tabs</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-props">
<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-props"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><span class="min-w-0 truncate">Starfall Racer Properties</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 Properties"><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 Properties"><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="flex flex-wrap m-0 pl-0.5" role="tablist" aria-label="Starfall Racer properties"><button class="relative mt-0.5 mb-0 mx-0 px-3.5 pt-1 pb-[5px] border-0 rounded-none bg-retro-face text-retro-text font-retro text-sm leading-[1.3] cursor-pointer shadow-[inset_1px_1px_var(--retro-hilite),inset_-1px_0_var(--retro-dark),inset_2px_2px_var(--retro-light),inset_-2px_0_var(--retro-shadow)] aria-selected:z-2 aria-selected:-mx-0.5 aria-selected:mt-0 aria-selected:-mb-0.5 aria-selected:px-4 aria-selected:pt-1.5 aria-selected:pb-[7px] aria-selected:font-bold focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-5px]" id="tab-general" type="button" role="tab" aria-selected="true" aria-controls="panel-general">General</button><button class="relative mt-0.5 mb-0 mx-0 px-3.5 pt-1 pb-[5px] border-0 rounded-none bg-retro-face text-retro-text font-retro text-sm leading-[1.3] cursor-pointer shadow-[inset_1px_1px_var(--retro-hilite),inset_-1px_0_var(--retro-dark),inset_2px_2px_var(--retro-light),inset_-2px_0_var(--retro-shadow)] aria-selected:z-2 aria-selected:-mx-0.5 aria-selected:mt-0 aria-selected:-mb-0.5 aria-selected:px-4 aria-selected:pt-1.5 aria-selected:pb-[7px] aria-selected:font-bold focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-5px]" id="tab-compat" type="button" role="tab" aria-selected="false" aria-controls="panel-compat" tabindex="-1">Compatibility</button><button class="relative mt-0.5 mb-0 mx-0 px-3.5 pt-1 pb-[5px] border-0 rounded-none bg-retro-face text-retro-text font-retro text-sm leading-[1.3] cursor-pointer shadow-[inset_1px_1px_var(--retro-hilite),inset_-1px_0_var(--retro-dark),inset_2px_2px_var(--retro-light),inset_-2px_0_var(--retro-shadow)] aria-selected:z-2 aria-selected:-mx-0.5 aria-selected:mt-0 aria-selected:-mb-0.5 aria-selected:px-4 aria-selected:pt-1.5 aria-selected:pb-[7px] aria-selected:font-bold focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-5px]" id="tab-sharing" type="button" role="tab" aria-selected="false" aria-controls="panel-sharing" tabindex="-1">Sharing</button><button class="relative mt-0.5 mb-0 mx-0 px-3.5 pt-1 pb-[5px] border-0 rounded-none bg-retro-face text-retro-text font-retro text-sm leading-[1.3] cursor-pointer shadow-[inset_1px_1px_var(--retro-hilite),inset_-1px_0_var(--retro-dark),inset_2px_2px_var(--retro-light),inset_-2px_0_var(--retro-shadow)] aria-selected:z-2 aria-selected:-mx-0.5 aria-selected:mt-0 aria-selected:-mb-0.5 aria-selected:px-4 aria-selected:pt-1.5 aria-selected:pb-[7px] aria-selected:font-bold focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[-5px]" id="tab-details" type="button" role="tab" aria-selected="false" aria-controls="panel-details" tabindex="-1">Details</button></div>
<div class="relative z-1 p-3.5 bg-retro-face shadow-retro-frame focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="panel-general" role="tabpanel" aria-labelledby="tab-general" tabindex="0"><div class="flex flex-wrap items-center gap-2.5"><svg class="retro-i block shrink-0 size-8 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><p class="m-0"><b>Starfall Racer</b><br>Application</p></div>
<dl class="grid grid-cols-[auto_minmax(0,1fr)] gap-x-3.5 gap-y-1 my-3 mx-0 px-2.5 py-2 bg-retro-field text-retro-field-text shadow-retro-sunken [&_dt]:font-bold [&_dd]:m-0"><dt>Location</dt><dd>C:\Games\Starfall Racer</dd><dt>Size</dt><dd>18.6 MB (19,512,320 bytes)</dd><dt>Created</dt><dd>2 September 2026, 14:05</dd><dt>Opened</dt><dd>Today, 21:12</dd></dl></div>
<div class="relative z-1 p-3.5 bg-retro-face shadow-retro-frame focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="panel-compat" role="tabpanel" aria-labelledby="tab-compat" tabindex="0" hidden><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]">Display settings</legend>
<div class="grid 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-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)]">Run in 256 colours</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)]">Run in 640 × 480 screen resolution</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"><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)]">Turn off visual themes</span></label></div>
</fieldset></div>
<div class="relative z-1 p-3.5 bg-retro-face shadow-retro-frame focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="panel-sharing" role="tabpanel" aria-labelledby="tab-sharing" tabindex="0" hidden><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]">Network</legend>
<div class="grid 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="share"><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)]">Do not share this folder</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="share"><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)]">Share it on ARCADE-LAN as STARFALL</span></label></div>
</fieldset></div>
<div class="relative z-1 p-3.5 bg-retro-face shadow-retro-frame focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px]" id="panel-details" role="tabpanel" aria-labelledby="tab-details" tabindex="0" hidden><dl class="grid grid-cols-[auto_minmax(0,1fr)] gap-x-3.5 gap-y-1 my-3 mx-0 px-2.5 py-2 bg-retro-field text-retro-field-text shadow-retro-sunken [&_dt]:font-bold [&_dd]:m-0"><dt>Version</dt><dd>2.4.0</dd><dt>Publisher</dt><dd>Moonbyte Games</dd><dt>Copyright</dt><dd>© 2026 Moonbyte Games</dd><dt>Language</dt><dd>English (United Kingdom)</dd></dl></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="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><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">Apply</button></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">Taskbar and Start menu · window buttons latch in, the tray shows the time</span>
<div class="min-w-0 p-3.5 bg-retro-face text-retro-text shadow-retro-window font-retro text-sm leading-[1.4] p-1.5!"><div class="flex flex-col justify-end min-h-[380px] [background:var(--retro-wallpaper)] shadow-retro-sunken p-0.5">
<nav class="relative flex flex-wrap items-center gap-1 p-1 bg-retro-face shadow-[inset_0_1px_var(--retro-light),inset_0_2px_var(--retro-hilite)]" aria-label="Taskbar" data-retro-taskbar>
<div class="relative"><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 min-w-0! pl-1.5! pr-2.5! font-bold aria-expanded:shadow-retro-in" type="button" aria-expanded="true" aria-controls="start-menu" data-retro-menu><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-moon"/></svg>Start</button>
<div class="absolute bottom-[calc(100%+6px)] left-0 z-30 flex min-w-60 p-[3px] bg-retro-face shadow-[var(--retro-frame),2px_2px_0_rgba(0,0,0,.4)]" id="start-menu"><span class="flex items-end px-[5px] py-2 bg-[linear-gradient(0deg,var(--retro-title),var(--retro-title-2))] text-retro-title-text font-retro text-[1.05rem] leading-none font-bold tracking-[.06em] [writing-mode:vertical-rl] rotate-180" aria-hidden="true">Moonbyte 98</span><ul class="flex-1 m-0 p-0 list-none"><li><a class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px] gap-2.5! py-1.5! pr-3.5!" href="#programs"><svg class="retro-i block shrink-0 size-6 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-folder"/></svg><span>Programs</span></a></li><li><a class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px] gap-2.5! py-1.5! pr-3.5!" href="#documents"><svg class="retro-i block shrink-0 size-6 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>Documents</span></a></li><li><a class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px] gap-2.5! py-1.5! pr-3.5!" href="#settings"><svg class="retro-i block shrink-0 size-6 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-computer"/></svg><span>Settings</span></a></li><li><a class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px] gap-2.5! py-1.5! pr-3.5!" href="#find"><svg class="retro-i block shrink-0 size-6 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-search"/></svg><span>Find</span></a></li><li><a class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px] gap-2.5! py-1.5! pr-3.5!" href="#help"><svg class="retro-i block shrink-0 size-6 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-question"/></svg><span>Help</span></a></li><li class="h-0.5 mx-0.5 my-[3px] shadow-[inset_0_1px_var(--retro-shadow),inset_0_-1px_var(--retro-hilite)]" aria-hidden="true"></li><li><a class="flex items-center gap-2 w-full m-0 py-[5px] pr-3 pl-2 border-0 rounded-none bg-transparent text-retro-text font-retro text-sm leading-[1.3] text-left no-underline whitespace-nowrap cursor-pointer hover:bg-retro-select hover:text-retro-select-text focus-visible:bg-retro-select focus-visible:text-retro-select-text focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-select-text focus-visible:outline-offset-[-3px] gap-2.5! py-1.5! pr-3.5!" href="#shut-down"><svg class="retro-i block shrink-0 size-6 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-moon"/></svg><span>Shut Down…</span></a></li></ul></div></div>
<ul class="flex flex-[1_1_220px] gap-1 min-w-0 m-0 p-0 list-none"><li class="flex flex-[0_1_180px] min-w-0"><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 justify-start! w-full min-w-0! aria-pressed:shadow-retro-in aria-pressed:[background:var(--retro-dither)] aria-pressed:font-bold" type="button" aria-pressed="true"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span class="min-w-0 truncate">chapter-3.txt — Moonbyte Write</span></button></li><li class="flex flex-[0_1_180px] min-w-0"><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 justify-start! w-full min-w-0! aria-pressed:shadow-retro-in aria-pressed:[background:var(--retro-dither)] aria-pressed:font-bold" type="button" aria-pressed="false"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg><span class="min-w-0 truncate">Inbox (3 unread)</span></button></li><li class="flex flex-[0_1_180px] min-w-0"><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 justify-start! w-full min-w-0! aria-pressed:shadow-retro-in aria-pressed:[background:var(--retro-dither)] aria-pressed:font-bold" type="button" aria-pressed="false"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><span class="min-w-0 truncate">Starfall Racer</span></button></li></ul>
<div class="flex items-center gap-2 min-h-8 ml-auto px-2.5 py-[3px] shadow-retro-thin-in font-retro text-[.8125rem] leading-none whitespace-nowrap"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-speaker"/></svg><time datetime="21:20">9:20 PM</time></div>
</nav>
</div></div>
</section>
CSS 
/* ── 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);
}
JavaScript 
// Menus: a button opens its list; Escape, a click outside or opening another menu closes it.
// Arrow Down on a menu button opens it and focuses the first item; Arrow Up and Down move through the items.
(function () {
  var toggles = Array.prototype.slice.call(document.querySelectorAll('[data-retro-menu]'));
  function menuOf(b) { return document.getElementById(b.getAttribute('aria-controls')); }
  function set(b, open) { b.setAttribute('aria-expanded', String(open)); menuOf(b).hidden = !open; }
  function only(b, open) { toggles.forEach(function (o) { set(o, o === b ? open : false); }); }
  toggles.forEach(function (b) {
    var menu = menuOf(b);
    b.addEventListener('click', function () { only(b, b.getAttribute('aria-expanded') !== 'true'); });
    b.addEventListener('keydown', function (e) {
      if (e.key !== 'ArrowDown') return;
      e.preventDefault(); only(b, true);
      var first = menu.querySelector('a, button'); if (first) first.focus();
    });
    menu.addEventListener('keydown', function (e) {
      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
      e.preventDefault();
      var items = Array.prototype.slice.call(menu.querySelectorAll('a, button'));
      var i = items.indexOf(document.activeElement) + (e.key === 'ArrowDown' ? 1 : -1);
      items[(i + items.length) % items.length].focus();
    });
    menu.addEventListener('click', function (e) { if (e.target.closest('a, button')) { set(b, false); b.focus(); } });
  });
  document.addEventListener('click', function (e) {
    toggles.forEach(function (b) { if (!b.contains(e.target) && !menuOf(b).contains(e.target)) set(b, false); });
  });
  document.addEventListener('keydown', function (e) {
    if (e.key !== 'Escape') return;
    toggles.forEach(function (b) {
      if (b.getAttribute('aria-expanded') !== 'true') return;
      var inside = menuOf(b).contains(document.activeElement);
      set(b, false); if (inside) b.focus();
    });
  });
})();
// Tabs: click or Arrow keys / Home / End select a tab; only the selected tab is in the Tab order
document.querySelectorAll('[role="tablist"]').forEach(function (list) {
  var tabs = Array.prototype.slice.call(list.querySelectorAll('[role="tab"]'));
  function select(tab, focus) {
    tabs.forEach(function (t) {
      var on = t === tab;
      t.setAttribute('aria-selected', String(on));
      t.tabIndex = on ? 0 : -1;
      document.getElementById(t.getAttribute('aria-controls')).hidden = !on;
    });
    if (focus) tab.focus();
  }
  tabs.forEach(function (t, i) {
    t.addEventListener('click', function () { select(t); });
    t.addEventListener('keydown', function (e) {
      var n = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[e.key];
      if (n === undefined) return;
      e.preventDefault();
      select(tabs[(n + tabs.length) % tabs.length], true);
    });
  });
});
// Taskbar: the window button you press stays latched in (aria-pressed), the others pop out
document.querySelectorAll('[data-retro-taskbar]').forEach(function (bar) {
  var btns = Array.prototype.slice.call(bar.querySelectorAll('[aria-pressed]'));
  btns.forEach(function (b) {
    b.addEventListener('click', function () { btns.forEach(function (o) { o.setAttribute('aria-pressed', String(o === b)); }); });
  });
});

About this set

Navigation patterns from the classic desktop. A word processor window has a menu bar with File, Edit, View and Help menus; each is a disclosure button that opens a list of commands with shortcuts, separators and ticks for options that are on. A click or Enter opens a menu, Arrow Down moves into it, Arrow Up and Down move through the items, and Escape or a click outside closes it. An address bar shows the path from My Computer to a game folder as a breadcrumb in a sunken field, with backslash separators and aria-current on the last item. Pagination uses raised page buttons and latches the current page in. A property sheet has four tabs that follow the ARIA tabs pattern with arrow keys, Home and End, with the selected tab standing taller and joining its panel. The set ends with a taskbar: a Start button that opens a Start menu with a vertical banner, window buttons that latch in when pressed, and a sunken tray with the time. A short script runs the menus, tabs and taskbar buttons in the plain and Tailwind versions; Bootstrap uses its own dropdown and tab plugins.

What’s included

  • Menu bar of disclosure menus with shortcuts, separators and ticks
  • Address bar breadcrumb in a sunken field
  • Property sheet tabs with arrow keys, Home and End
  • Taskbar with a Start menu, latched window buttons and a tray
  • Bootstrap version on .dropdown, .nav-tabs, .breadcrumb and .pagination

Accessibility

Menu buttons report aria-expanded and control their lists, the tabs use tablist, tab and tabpanel roles with roving focus, the breadcrumb and pagination are labelled nav regions with aria-current, and taskbar buttons report aria-pressed. Focus is a 2px dotted rectangle; highlighted menu items switch to navy with white text and a white dotted outline. Nothing animates.

Customise it

Change --retro-select and --retro-select-text for highlighted menu items, --retro-dither-a and --retro-dither-b for the latched checkerboard, and --retro-title for the Start menu banner. Bootstrap maps them onto --bs-dropdown-*, --bs-pagination-* and --bs-nav-tabs-* variables; Tailwind uses aria-expanded:, aria-selected: and aria-pressed: variants.