Open demo

CSS code

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="ri-bin" viewBox="0 0 16 16"><rect x="5" y="1" width="6" height="1" fill="#000000"/><rect x="2" y="2" width="3" height="1" fill="#000000"/><rect x="5" y="2" width="6" height="1" fill="#ffffff"/><rect x="11" y="2" width="3" height="1" fill="#000000"/><rect x="1" y="3" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="2" height="1" fill="#ffffff"/><rect x="4" y="3" width="8" height="1" fill="#c0c0c0"/><rect x="12" y="3" width="2" height="1" fill="#808080"/><rect x="14" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="14" 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="1" height="1" fill="#c0c0c0"/><rect x="5" y="5" width="1" height="1" fill="#808080"/><rect x="6" y="5" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="5" width="1" height="1" fill="#808080"/><rect x="8" y="5" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="5" width="1" height="1" fill="#808080"/><rect x="10" y="5" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="5" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="5" y="6" width="1" height="1" fill="#808080"/><rect x="6" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="6" width="1" height="1" fill="#808080"/><rect x="8" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="6" width="1" height="1" fill="#808080"/><rect x="10" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="6" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="5" y="7" width="1" height="1" fill="#808080"/><rect x="6" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="7" width="1" height="1" fill="#808080"/><rect x="8" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="7" width="1" height="1" fill="#808080"/><rect x="10" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="7" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="5" y="8" width="1" height="1" fill="#808080"/><rect x="6" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="8" width="1" height="1" fill="#808080"/><rect x="8" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="8" width="1" height="1" fill="#808080"/><rect x="10" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="8" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="5" y="9" width="1" height="1" fill="#808080"/><rect x="6" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="9" width="1" height="1" fill="#808080"/><rect x="8" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="9" width="1" height="1" fill="#808080"/><rect x="10" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="9" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="5" y="10" width="1" height="1" fill="#808080"/><rect x="6" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="10" width="1" height="1" fill="#808080"/><rect x="8" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="10" width="1" height="1" fill="#808080"/><rect x="10" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="10" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="5" y="11" width="1" height="1" fill="#808080"/><rect x="6" y="11" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="11" width="1" height="1" fill="#808080"/><rect x="8" y="11" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="11" width="1" height="1" fill="#808080"/><rect x="10" y="11" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="11" width="2" height="1" fill="#808080"/><rect x="13" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="1" height="1" fill="#000000"/><rect x="4" y="12" width="1" height="1" fill="#ffffff"/><rect x="5" y="12" width="1" height="1" fill="#c0c0c0"/><rect x="6" y="12" width="1" height="1" fill="#808080"/><rect x="7" y="12" width="1" height="1" fill="#c0c0c0"/><rect x="8" y="12" width="1" height="1" fill="#808080"/><rect x="9" y="12" width="1" height="1" fill="#c0c0c0"/><rect x="10" y="12" width="2" height="1" fill="#808080"/><rect x="12" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="10" height="1" fill="#000000"/></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-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-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="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-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="rg-next" viewBox="0 0 9 9"><rect x="0" y="0" width="2" height="1" fill="currentColor"/><rect x="6" y="0" width="2" height="1" fill="currentColor"/><rect x="0" y="1" width="3" height="1" fill="currentColor"/><rect x="6" y="1" width="2" height="1" fill="currentColor"/><rect x="0" y="2" width="4" height="1" fill="currentColor"/><rect x="6" y="2" width="2" height="1" fill="currentColor"/><rect x="0" y="3" width="5" height="1" fill="currentColor"/><rect x="6" y="3" width="2" height="1" fill="currentColor"/><rect x="0" y="4" width="9" height="1" fill="currentColor"/><rect x="0" y="5" width="5" height="1" fill="currentColor"/><rect x="6" y="5" width="2" height="1" fill="currentColor"/><rect x="0" y="6" width="4" height="1" fill="currentColor"/><rect x="6" y="6" width="2" height="1" fill="currentColor"/><rect x="0" y="7" width="3" height="1" fill="currentColor"/><rect x="6" y="7" width="2" height="1" fill="currentColor"/><rect x="0" y="8" width="2" height="1" fill="currentColor"/><rect x="6" y="8" width="2" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-note" viewBox="0 0 16 16"><rect x="5" y="1" width="10" height="1" fill="#000000"/><rect x="5" y="2" width="1" height="1" fill="#000000"/><rect x="6" y="2" width="8" height="1" fill="#7a3cff"/><rect x="14" y="2" width="1" height="1" fill="#000000"/><rect x="5" y="3" width="1" height="1" fill="#000000"/><rect x="6" y="3" width="1" height="1" fill="#7a3cff"/><rect x="7" y="3" width="6" height="1" fill="#000000"/><rect x="13" y="3" width="1" height="1" fill="#7a3cff"/><rect x="14" y="3" width="1" height="1" fill="#000000"/><rect x="5" y="4" width="1" height="1" fill="#000000"/><rect x="6" y="4" width="1" height="1" fill="#7a3cff"/><rect x="7" y="4" width="1" height="1" fill="#000000"/><rect x="12" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="1" height="1" fill="#7a3cff"/><rect x="14" y="4" width="1" height="1" fill="#000000"/><rect x="5" y="5" width="1" height="1" fill="#000000"/><rect x="6" y="5" width="1" height="1" fill="#7a3cff"/><rect x="7" y="5" width="1" height="1" fill="#000000"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="1" height="1" fill="#7a3cff"/><rect x="14" y="5" width="1" height="1" fill="#000000"/><rect x="5" y="6" width="1" height="1" fill="#000000"/><rect x="6" y="6" width="1" height="1" fill="#7a3cff"/><rect x="7" y="6" width="1" height="1" fill="#000000"/><rect x="12" y="6" width="1" height="1" fill="#000000"/><rect x="13" y="6" width="1" height="1" fill="#7a3cff"/><rect x="14" y="6" width="1" height="1" fill="#000000"/><rect x="5" y="7" width="1" height="1" fill="#000000"/><rect x="6" y="7" width="1" height="1" fill="#7a3cff"/><rect x="7" y="7" width="1" height="1" fill="#000000"/><rect x="12" y="7" width="1" height="1" fill="#000000"/><rect x="13" y="7" width="1" height="1" fill="#7a3cff"/><rect x="14" y="7" width="1" height="1" fill="#000000"/><rect x="5" y="8" width="1" height="1" fill="#000000"/><rect x="6" y="8" width="1" height="1" fill="#7a3cff"/><rect x="7" y="8" width="1" height="1" fill="#000000"/><rect x="12" y="8" width="1" height="1" fill="#000000"/><rect x="13" y="8" width="1" height="1" fill="#7a3cff"/><rect x="14" y="8" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="4" height="1" fill="#000000"/><rect x="6" y="9" width="1" height="1" fill="#7a3cff"/><rect x="7" y="9" width="1" height="1" fill="#000000"/><rect x="9" y="9" width="4" height="1" fill="#000000"/><rect x="13" y="9" width="1" height="1" fill="#7a3cff"/><rect x="14" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="5" height="1" fill="#7a3cff"/><rect x="7" y="10" width="1" height="1" fill="#000000"/><rect x="9" y="10" width="1" height="1" fill="#000000"/><rect x="10" y="10" width="4" height="1" fill="#7a3cff"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="5" height="1" fill="#7a3cff"/><rect x="7" y="11" width="1" height="1" fill="#000000"/><rect x="9" y="11" width="1" height="1" fill="#000000"/><rect x="10" y="11" width="4" height="1" fill="#7a3cff"/><rect x="14" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="12" width="5" height="1" fill="#000000"/><rect x="10" y="12" width="4" height="1" fill="#000000"/></symbol>
  <symbol id="rg-pause" viewBox="0 0 8 11"><rect x="0" y="0" width="3" height="1" fill="currentColor"/><rect x="5" y="0" width="3" height="1" fill="currentColor"/><rect x="0" y="1" width="3" height="1" fill="currentColor"/><rect x="5" y="1" width="3" height="1" fill="currentColor"/><rect x="0" y="2" width="3" height="1" fill="currentColor"/><rect x="5" y="2" width="3" height="1" fill="currentColor"/><rect x="0" y="3" width="3" height="1" fill="currentColor"/><rect x="5" y="3" width="3" height="1" fill="currentColor"/><rect x="0" y="4" width="3" height="1" fill="currentColor"/><rect x="5" y="4" width="3" height="1" fill="currentColor"/><rect x="0" y="5" width="3" height="1" fill="currentColor"/><rect x="5" y="5" width="3" height="1" fill="currentColor"/><rect x="0" y="6" width="3" height="1" fill="currentColor"/><rect x="5" y="6" width="3" height="1" fill="currentColor"/><rect x="0" y="7" width="3" height="1" fill="currentColor"/><rect x="5" y="7" width="3" height="1" fill="currentColor"/><rect x="0" y="8" width="3" height="1" fill="currentColor"/><rect x="5" y="8" width="3" height="1" fill="currentColor"/><rect x="0" y="9" width="3" height="1" fill="currentColor"/><rect x="5" y="9" width="3" height="1" fill="currentColor"/><rect x="0" y="10" width="3" height="1" fill="currentColor"/><rect x="5" y="10" width="3" height="1" fill="currentColor"/></symbol>
  <symbol id="rg-play" viewBox="0 0 6 11"><rect x="0" y="0" width="1" height="1" fill="currentColor"/><rect x="0" y="1" width="2" height="1" fill="currentColor"/><rect x="0" y="2" width="3" height="1" fill="currentColor"/><rect x="0" y="3" width="4" height="1" fill="currentColor"/><rect x="0" y="4" width="5" height="1" fill="currentColor"/><rect x="0" y="5" width="6" height="1" fill="currentColor"/><rect x="0" y="6" width="5" height="1" fill="currentColor"/><rect x="0" y="7" width="4" height="1" fill="currentColor"/><rect x="0" y="8" width="3" height="1" fill="currentColor"/><rect x="0" y="9" width="2" height="1" fill="currentColor"/><rect x="0" y="10" width="1" height="1" fill="currentColor"/></symbol>
  <symbol id="rg-prev" viewBox="0 0 9 9"><rect x="0" y="0" width="2" height="1" fill="currentColor"/><rect x="6" y="0" width="2" height="1" fill="currentColor"/><rect x="0" y="1" width="2" height="1" fill="currentColor"/><rect x="5" y="1" width="3" height="1" fill="currentColor"/><rect x="0" y="2" width="2" height="1" fill="currentColor"/><rect x="4" y="2" width="4" height="1" fill="currentColor"/><rect x="0" y="3" width="2" height="1" fill="currentColor"/><rect x="3" y="3" width="5" height="1" fill="currentColor"/><rect x="0" y="4" width="9" height="1" fill="currentColor"/><rect x="0" y="5" width="2" height="1" fill="currentColor"/><rect x="3" y="5" width="5" height="1" fill="currentColor"/><rect x="0" y="6" width="2" height="1" fill="currentColor"/><rect x="4" y="6" width="4" height="1" fill="currentColor"/><rect x="0" y="7" width="2" height="1" fill="currentColor"/><rect x="5" y="7" width="3" height="1" fill="currentColor"/><rect x="0" y="8" width="2" height="1" fill="currentColor"/><rect x="6" y="8" width="2" height="1" fill="currentColor"/></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>
  <symbol id="rg-stop" viewBox="0 0 9 9"><rect x="0" y="0" width="9" height="1" fill="currentColor"/><rect x="0" y="1" width="9" height="1" fill="currentColor"/><rect x="0" y="2" width="9" height="1" fill="currentColor"/><rect x="0" y="3" width="9" height="1" fill="currentColor"/><rect x="0" y="4" width="9" height="1" fill="currentColor"/><rect x="0" y="5" width="9" height="1" fill="currentColor"/><rect x="0" y="6" width="9" height="1" fill="currentColor"/><rect x="0" y="7" width="9" height="1" fill="currentColor"/><rect x="0" y="8" width="9" height="1" fill="currentColor"/></symbol>
</svg>
<section><span class="lbl">Retro desktop · drag a title bar, or focus a window icon and press the arrow keys</span>
<div class="retro-desktop" data-retro="classic" data-retro-desktop>
<p class="retro-sr" id="move-hint">Use the arrow keys to move the window. Hold Shift to move it further.</p>
<div class="retro-desktop__area" data-desk-area>
<span class="retro-desktop__floor" aria-hidden="true"></span>
<span class="retro-desktop__sun" aria-hidden="true"></span>
<ul class="retro-desktop__icons" aria-label="Desktop">
<li><button class="retro-desk-icon" type="button" data-open="win-notes"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span class="">Notes</span></button></li>
<li><button class="retro-desk-icon" type="button" data-open="win-mail"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg><span class="">Inbox</span></button></li>
<li><button class="retro-desk-icon" type="button" data-open="win-radio"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg><span class="">Nightdrive FM</span></button></li>
<li><button class="retro-desk-icon" type="button" data-open="win-bin"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg><span class="">Recycle Bin</span></button></li>
</ul>
<section class="retro-window retro-desk-win" aria-labelledby="win-mail-t" id="win-mail" data-win style="--x:130px;--y:22px;--w:530px">
<div class="retro-titlebar" data-drag data-idle><button class="retro-mover" type="button" data-move aria-label="Move the Inbox window" aria-describedby="move-hint"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg></button>
  <h2 class="retro-titlebar__title" id="win-mail-t"><span>Inbox — 3 unread</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Minimise Inbox" data-min><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-min"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Inbox" data-close><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="retro-pane retro-mailpane"><table class="retro-files"><caption class="retro-sr">Inbox, 3 unread</caption>
<thead><tr><th scope="col" class="">From</th><th scope="col" class="">Subject</th><th scope="col" class="">Received</th></tr></thead>
<tbody><tr style="font-weight:700"><td class="">Ola Brandt</td><td class=""><a class="" href="#mail-1"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Level 7 sprites are ready<span class="retro-sr"> (unread)</span></a></td><td class="">21:04</td></tr>
<tr style="font-weight:700"><td class="">Kasia Lind</td><td class=""><a class="" href="#mail-2"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Final mix of Palm Boulevard<span class="retro-sr"> (unread)</span></a></td><td class="">19:30</td></tr>
<tr style="font-weight:700"><td class="">Moonbyte Net</td><td class=""><a class="" href="#mail-3"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Your Starfall Racer licence key<span class="retro-sr"> (unread)</span></a></td><td class="">18:02</td></tr>
<tr><td class="">Dana Kowalski</td><td class=""><a class="" href="#mail-4"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Re: pixel font for the HUD</a></td><td class="">Yesterday</td></tr>
<tr><td class="">Starfall forum</td><td class=""><a class="" href="#mail-5"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>12 new replies in Track ideas</a></td><td class="">Mon</td></tr></tbody></table></div>
<div class="retro-statusbar"><p>5 messages, 3 unread</p><p>Connected to MOONBYTE</p></div>
</section>
<section class="retro-window retro-desk-win" aria-labelledby="win-notes-t" id="win-notes" data-win style="--x:610px;--y:130px;--w:400px;z-index:3">
<div class="retro-titlebar" data-drag><button class="retro-mover" type="button" data-move aria-label="Move the Notes window" aria-describedby="move-hint"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg></button>
  <h2 class="retro-titlebar__title" id="win-notes-t"><span>ideas.txt — Notepad</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Minimise Notes" data-min><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-min"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Notes" data-close><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">
<label class="retro-sr" for="d-notes">ideas.txt</label><textarea class="retro-input retro-notes" id="d-notes" rows="7">Track ideas for Starfall Racer 2.5
- Harbour loop at dawn, fog on the bridge
- Tunnel with neon arches (ask Dana)
- Ghost car colour: cyan, not pink
- Kasia: slower synth on the coast road</textarea>
</div>

</section>
<section class="retro-window retro-desk-win" aria-labelledby="win-radio-t" id="win-radio" data-win style="--x:250px;--y:370px;--w:360px">
<div class="retro-titlebar" data-drag data-idle><button class="retro-mover" type="button" data-move aria-label="Move the Nightdrive FM window" aria-describedby="move-hint"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg></button>
  <h2 class="retro-titlebar__title" id="win-radio-t"><span>Nightdrive FM</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Minimise Nightdrive FM" data-min><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-min"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Nightdrive FM" data-close><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-screen"><div class="retro-screen__row"><span>Neon Highway</span><span data-state>Paused</span></div><div class="retro-screen__row"><span class="retro-screen__time" data-time>01:24</span><span>Kasia Lind</span></div></div>
<label class="retro-sr" for="d-seek">Seek</label><input class="retro-range retro-seek" id="d-seek" type="range" min="0" max="232" value="84" data-seek>
<div class="retro-transport"><button class="retro-btn retro-btn--icon" type="button" aria-label="Previous track"><svg class="retro-glyph" width="9" height="9" aria-hidden="true" focusable="false"><use href="#rg-prev"/></svg></button><button class="retro-btn retro-btn--icon" type="button" aria-label="Play" data-play><span data-icon="play"><svg class="retro-glyph" width="6" height="11" aria-hidden="true" focusable="false"><use href="#rg-play"/></svg></span><span data-icon="pause" hidden><svg class="retro-glyph" width="8" height="11" aria-hidden="true" focusable="false"><use href="#rg-pause"/></svg></span></button><button class="retro-btn retro-btn--icon" type="button" aria-label="Stop" data-stop><svg class="retro-glyph" width="9" height="9" aria-hidden="true" focusable="false"><use href="#rg-stop"/></svg></button><button class="retro-btn retro-btn--icon" type="button" aria-label="Next track"><svg class="retro-glyph" width="9" height="9" aria-hidden="true" focusable="false"><use href="#rg-next"/></svg></button></div>
</div>

</section>
<section class="retro-window retro-desk-win" aria-labelledby="win-bin-t" id="win-bin" data-win style="--x:640px;--y:360px;--w:340px" hidden>
<div class="retro-titlebar" data-drag data-idle><button class="retro-mover" type="button" data-move aria-label="Move the Recycle Bin window" aria-describedby="move-hint"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg></button>
  <h2 class="retro-titlebar__title" id="win-bin-t"><span>Recycle Bin</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Minimise Recycle Bin" data-min><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-min"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Recycle Bin" data-close><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="retro-msg"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg><div class="retro-msg__text"><p>The Recycle Bin is empty.</p><p>Deleted files stay here until you empty it.</p></div></div>

</section>
</div>
<nav class="retro-taskbar" aria-label="Taskbar">
<div class="retro-startwrap"><button class="retro-btn retro-start" type="button" aria-expanded="false" aria-controls="desk-start" data-retro-menu><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-moon"/></svg>Start</button>
<div class="retro-startmenu" id="desk-start" hidden><span class="retro-startmenu__banner" aria-hidden="true">Moonbyte 98</span><ul class="retro-startmenu__list"><li><a class="retro-menu__item" href="#notes"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>Notes</span></a></li><li><a class="retro-menu__item" href="#inbox"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg><span>Inbox</span></a></li><li><a class="retro-menu__item" href="#radio"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg><span>Nightdrive FM</span></a></li><li><a class="retro-menu__item" href="#starfall"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><span>Starfall Racer</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="false" data-task="win-mail"><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="true" data-task="win-notes"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>ideas.txt — Notepad</span></button></li><li class=""><button class="retro-btn retro-taskbtn" type="button" aria-pressed="false" data-task="win-radio"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg><span>Nightdrive FM</span></button></li><li class="" hidden><button class="retro-btn retro-taskbtn" type="button" aria-pressed="false" data-task="win-bin"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg><span>Recycle Bin</span></button></li></ul>
<div class="retro-tray"><label class="retro-check"><input class="retro-check__box retro-theme-input" type="checkbox"><span>Synthwave</span></label><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-speaker"/></svg><time data-desk-clock datetime="21:20">21:20</time></div>
</nav>
</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)}
/* 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}
/* Fields: sunken wells. Errors add a red frame, an icon and a message tied to the field */
.retro-label{display:block;margin:0 0 4px;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font)}
.retro-input{display:block;width:100%;min-height:30px;margin:0;padding:5px 7px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);
  box-shadow:var(--retro-sunken);font:400 .875rem/1.3 var(--retro-font)}
.retro-input::placeholder{color:var(--retro-muted);opacity:1}
.retro-input:focus{outline:0}
.retro-input:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-input:disabled{background:var(--retro-face);color:var(--retro-disabled)}
.retro-input[aria-invalid="true"]{box-shadow:var(--retro-sunken),0 0 0 2px var(--retro-danger)}
textarea.retro-input{min-height:96px;resize:vertical;scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-hint{margin:4px 0 0;color:var(--retro-muted);font-size:.8125rem}
.retro-error{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;color:var(--retro-danger);font-size:.8125rem;font-weight:700}
.retro-select{position:relative;display:block}
.retro-select select{appearance:none;cursor:pointer;padding-right:34px}
.retro-select::before{content:"";position:absolute;top:2px;right:2px;bottom:2px;width:24px;background:var(--retro-face);box-shadow:var(--retro-out);pointer-events:none}
.retro-select::after{content:"";position:absolute;top:50%;right:10px;width:7px;height:4px;margin-top:-2px;background:var(--retro-text);
  -webkit-mask:var(--retro-arrow-mask) center/contain no-repeat;mask:var(--retro-arrow-mask) center/contain no-repeat;pointer-events:none}
.retro-select option,.retro-list option{background:var(--retro-field);color:var(--retro-field-text)}
.retro-list{display:block;width:100%;margin:0;padding:3px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);
  font:400 .875rem/1.3 var(--retro-font);scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-list option{padding:3px 6px}
.retro-list option:checked{background:var(--retro-select) linear-gradient(var(--retro-select),var(--retro-select));color:var(--retro-select-text)}
.retro-list:focus{outline:0}
.retro-list:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
/* Trackbar: a native range input with a sunken groove and a raised rectangular thumb */
.retro-range{display:block;width:100%;height:28px;margin:0;background:transparent;appearance:none;cursor:pointer}
.retro-range::-webkit-slider-runnable-track{height:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-range::-moz-range-track{height:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-range::-webkit-slider-thumb{width:12px;height:22px;margin-top:-8px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out);appearance:none}
.retro-range::-moz-range-thumb{width:12px;height:22px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out)}
.retro-range:focus{outline:0}
.retro-range:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-scale{display:flex;justify-content:space-between;margin-top:2px;color:var(--retro-muted);font-size:.8125rem}
/* 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)}
/* 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}
/* Media player: an LCD screen, a seek trackbar, transport buttons and a playlist */
.retro-screen{display:grid;gap:6px;padding:10px 12px;background:var(--retro-lcd);color:var(--retro-lcd-text);box-shadow:var(--retro-sunken);font:400 1.2rem/1.1 var(--retro-mono)}
.retro-screen__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.retro-screen__time{font-size:2.2rem;line-height:1;font-variant-numeric:tabular-nums}
.retro-eq{display:flex;align-items:flex-end;gap:3px;height:34px}
.retro-eq i{display:block;width:6px;height:var(--h);background:repeating-linear-gradient(0deg,var(--retro-lcd-text) 0 3px,transparent 3px 5px)}
.retro-transport{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:10px}
.retro-transport .retro-btn,.retro-transport .btn-retro{min-width:40px;padding-inline:8px}
.retro-volume{display:flex;flex:1 1 140px;align-items:center;gap:6px;margin-left:auto;max-width:190px}
.retro-playlist{margin:10px 0 0;padding:3px;list-style:none;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);counter-reset:t}
.retro-playlist li{display:flex;gap:8px;padding:3px 6px;counter-increment:t}
.retro-playlist li::before{content:counter(t,decimal-leading-zero) "."}
.retro-playlist li span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}
.retro-playlist [aria-current]{background:var(--retro-select);color:var(--retro-select-text)}
/* Message boxes: an icon, the message and centred buttons */
.retro-msg{display:flex;align-items:flex-start;gap:14px;padding:16px 14px 8px}
.retro-msg__text{display:grid;gap:6px;padding-top:4px}
.retro-actions--center{justify-content:center;padding:10px 12px 12px}
/* Native <dialog>: focus moves in, Tab stays inside and Escape closes it */
.retro-dialog{width:min(430px,calc(100vw - 32px));max-width:none;margin:auto;padding:0;border:0;background:transparent;color:var(--retro-text);overflow:visible}
.retro-dialog::backdrop{background:rgba(0,0,0,.45)}
.retro-dialog[open]{animation:retro-open .2s steps(4)}
@keyframes retro-open{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0)}}
/* File explorer: a folder tree of <details> and a file table, each in a sunken pane */
.retro-explorer{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:3px}
@media (max-width:640px){.retro-explorer{grid-template-columns:minmax(0,1fr)}}
.retro-pane{min-width:0;overflow:auto;padding:4px;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);font:400 .875rem/1.3 var(--retro-font)}
.retro-tree,.retro-tree ul{margin:0;padding:0;list-style:none}
.retro-tree ul{margin-left:8px;padding-left:10px;border-left:1px dotted var(--retro-muted)}
.retro-tree summary{display:flex;align-items:center;gap:5px;padding:2px 3px;cursor:pointer;list-style:none}
.retro-tree summary::-webkit-details-marker{display:none}
.retro-tree summary::before{content:"+";display:grid;place-items:center;flex:none;width:11px;height:11px;border:1px solid var(--retro-muted);background:var(--retro-field);color:var(--retro-field-text);font:700 11px/1 var(--retro-font)}
.retro-tree details[open]>summary::before{content:"\2212"}
.retro-tree a{display:flex;align-items:center;gap:5px;padding:2px 3px 2px 19px;color:inherit;text-decoration:none}
.retro-tree summary:focus-visible,.retro-tree a:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:-1px}
.retro-tree [aria-current]{background:var(--retro-select);color:var(--retro-select-text)}
.retro-files{width:100%;border-collapse:collapse;color:var(--retro-field-text);font:400 .875rem/1.3 var(--retro-font)}
.retro-files th{padding:4px 8px;background:var(--retro-face);color:var(--retro-text);font-weight:400;text-align:left;box-shadow:var(--retro-out)}
.retro-files td{padding:3px 8px;white-space:nowrap}
.retro-files .num{text-align:right}
.retro-files a{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.retro-files tbody tr:hover td,.retro-files tbody tr:focus-within td{background:var(--retro-select);color:var(--retro-select-text)}
.retro-files a:focus-visible{outline:2px dotted currentColor;outline-offset:1px}
/* Desktop: icons, draggable windows and a taskbar with a classic / synthwave switch */
.retro-desktop{position:relative;display:flex;flex-direction:column;min-height:700px;overflow:hidden;background:var(--retro-wallpaper);box-shadow:var(--retro-window)}
.retro-desktop__area{position:relative;flex:1;min-height:640px;isolation:isolate}
.retro-desktop__icons{position:absolute;top:14px;left:10px;z-index:1;display:grid;gap:12px;margin:0;padding:0;list-style:none}
.retro-desk-icon{display:flex;flex-direction:column;align-items:center;gap:5px;width:86px;margin:0;padding:4px 2px;border:0;background:transparent;color:var(--retro-desk-text);font:400 .8125rem/1.2 var(--retro-font);text-align:center;cursor:pointer}
.retro-desk-icon span{padding:1px 4px;background:var(--retro-desk)}
.retro-desk-icon:hover span,.retro-desk-icon:focus-visible span{background:var(--retro-select);color:var(--retro-select-text)}
.retro-desk-icon:focus-visible{outline:2px dotted var(--retro-desk-text);outline-offset:1px}
.retro-desk-win{position:absolute;left:var(--x);top:var(--y);z-index:2;width:var(--w);max-width:calc(100% - 16px)}
.retro-desk-win[hidden]{display:none}
.retro-titlebar[data-idle]{background:var(--retro-idle-bg);color:var(--retro-idle-text)}
.retro-titlebar[data-drag]{cursor:move;touch-action:none;user-select:none}
.retro-mover{display:grid;place-items:center;width:22px;height:22px;margin:0;padding:0;border:0;background:transparent;color:inherit;cursor:move}
.retro-mover:focus-visible{outline:2px dotted currentColor;outline-offset:-1px}
.retro-desktop .retro-taskbar{position:relative;z-index:5}
.retro-taskbar__apps>li[hidden]{display:none}
.retro-desktop__floor,.retro-desktop__sun{display:none}
[data-retro]:is([data-retro="synthwave"],:has(.retro-theme-input:checked)) :is(.retro-desktop__floor,.retro-desktop__sun){display:block}
.retro-desktop__floor{position:absolute;z-index:-1;left:-60%;right:-60%;top:58%;height:520px;transform:perspective(320px) rotateX(62deg);transform-origin:top;
  background:repeating-linear-gradient(90deg,var(--retro-neon-pink) 0 2px,transparent 2px 64px),repeating-linear-gradient(0deg,var(--retro-neon-pink) 0 2px,transparent 2px 44px);opacity:.45;
  -webkit-mask:linear-gradient(#000,transparent 85%);mask:linear-gradient(#000,transparent 85%)}
.retro-desktop__sun{position:absolute;z-index:-1;right:8%;top:calc(58% - 190px);width:240px;aspect-ratio:1;border-radius:50%;background:linear-gradient(var(--retro-sun-1),var(--retro-sun-2) 75%);box-shadow:0 0 60px rgba(255,63,164,.45);
  -webkit-mask:linear-gradient(#000 50%,transparent 50% 54%,#000 54% 61%,transparent 61% 66%,#000 66% 72%,transparent 72% 78%,#000 78% 84%,transparent 84% 91%,#000 91%);
  mask:linear-gradient(#000 50%,transparent 50% 54%,#000 54% 61%,transparent 61% 66%,#000 66% 72%,transparent 72% 78%,#000 78% 84%,transparent 84% 91%,#000 91%)}
@media (max-width:760px){.retro-desktop{min-height:0}.retro-desktop__area{display:grid;gap:16px;min-height:0;padding:12px}.retro-desktop__icons{position:static;display:flex;flex-wrap:wrap}
  .retro-desk-win{position:static;width:auto;max-width:none}.retro-titlebar[data-drag]{cursor:default}}
.retro-btn--icon{min-width:40px;padding-inline:8px}
.retro-seek{margin-top:10px}
.retro-mailpane{max-height:210px}
.retro-notes{min-height:150px;resize:none}
@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();
    });
  });
})();
// Player: Play / Pause swaps the button's name and glyph; while playing the seek bar moves once a second.
// The seek bar's time read-out and aria-valuetext follow it as you drag or use the arrow keys.
document.querySelectorAll('[data-retro-player]').forEach(function (p) {
  var seek = p.querySelector('[data-seek]'), out = p.querySelector('[data-time]'), play = p.querySelector('[data-play]');
  var state = p.querySelector('[data-state]'), timer = null;
  function fmt(s) { return String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0'); }
  function words(s) { return Math.floor(s / 60) + ' min ' + (s % 60) + ' s'; }
  function sync() {
    var s = +seek.value;
    out.textContent = fmt(s);
    seek.setAttribute('aria-valuetext', words(s) + ' of ' + words(+seek.max));
  }
  function setPlaying(on) {
    play.setAttribute('aria-label', on ? 'Pause' : 'Play');
    play.querySelector('[data-icon="play"]').hidden = on;
    play.querySelector('[data-icon="pause"]').hidden = !on;
    if (state) state.textContent = on ? 'Playing' : 'Paused';
    clearInterval(timer);
    if (on) timer = setInterval(function () { seek.value = Math.min(+seek.value + 1, +seek.max); sync(); if (+seek.value >= +seek.max) setPlaying(false); }, 1000);
  }
  seek.addEventListener('input', sync);
  play.addEventListener('click', function () { setPlaying(play.getAttribute('aria-label') === 'Play'); });
  var stop = p.querySelector('[data-stop]');
  if (stop) stop.addEventListener('click', function () { setPlaying(false); seek.value = 0; sync(); });
  sync();
});
// Desktop: drag a window by its title bar, or focus its icon button and use the arrow keys (Shift moves further).
// Clicking or focusing a window brings it to the front; the taskbar shows which one is active.
(function () {
  var desk = document.querySelector('[data-retro-desktop]'); if (!desk) return;
  var area = desk.querySelector('[data-desk-area]');
  var wins = Array.prototype.slice.call(desk.querySelectorAll('[data-win]'));
  var z = 10;
  function movable() { return window.matchMedia('(min-width: 761px)').matches; }
  function task(win) { return desk.querySelector('[data-task="' + win.id + '"]'); }
  function activate(win) {
    wins.forEach(function (w) {
      var on = w === win;
      w.querySelector('[data-drag]').toggleAttribute('data-idle', !on);
      var t = task(w); if (t) t.setAttribute('aria-pressed', String(on && !w.hidden));
    });
    win.style.zIndex = ++z;
  }
  function show(win) {
    win.hidden = false;
    var t = task(win); if (t) t.parentElement.hidden = false;
    activate(win); win.querySelector('[data-move]').focus();
  }
  function place(win, x, y) {
    x = Math.max(0, Math.min(x, area.clientWidth - win.offsetWidth));
    y = Math.max(0, Math.min(y, area.clientHeight - win.offsetHeight));
    win.style.left = x + 'px'; win.style.top = y + 'px';
  }
  wins.forEach(function (win) {
    var bar = win.querySelector('[data-drag]'), mover = win.querySelector('[data-move]');
    win.addEventListener('pointerdown', function () { activate(win); });
    win.addEventListener('focusin', function () { activate(win); });
    bar.addEventListener('pointerdown', function (e) {
      if (e.button !== 0 || !movable() || e.target.closest('button:not([data-move])')) return;
      var dx = e.clientX - win.offsetLeft, dy = e.clientY - win.offsetTop;
      bar.setPointerCapture(e.pointerId);
      function move(ev) { place(win, ev.clientX - dx, ev.clientY - dy); }
      function up() { bar.removeEventListener('pointermove', move); bar.removeEventListener('pointerup', up); }
      bar.addEventListener('pointermove', move); bar.addEventListener('pointerup', up);
    });
    mover.addEventListener('keydown', function (e) {
      var d = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key];
      if (!d || !movable()) return;
      e.preventDefault();
      var step = e.shiftKey ? 64 : 16;
      place(win, win.offsetLeft + d[0] * step, win.offsetTop + d[1] * step);
    });
    win.querySelector('[data-min]').addEventListener('click', function () {
      win.hidden = true;
      var t = task(win); t.setAttribute('aria-pressed', 'false'); t.focus();
    });
    win.querySelector('[data-close]').addEventListener('click', function () {
      win.hidden = true;
      var t = task(win); if (t) t.parentElement.hidden = true;
      var icon = desk.querySelector('[data-open="' + win.id + '"]'); if (icon) icon.focus();
    });
  });
  desk.querySelectorAll('[data-task]').forEach(function (t) {
    t.addEventListener('click', function () {
      var win = document.getElementById(t.getAttribute('data-task'));
      if (win.hidden) { show(win); return; }
      if (t.getAttribute('aria-pressed') === 'true') { win.hidden = true; t.setAttribute('aria-pressed', 'false'); return; }
      activate(win); win.querySelector('[data-move]').focus();
    });
  });
  desk.querySelectorAll('[data-open]').forEach(function (b) {
    b.addEventListener('click', function () { show(document.getElementById(b.getAttribute('data-open'))); });
  });
  var clock = desk.querySelector('[data-desk-clock]');
  function tick() {
    var d = new Date();
    clock.textContent = d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
    clock.setAttribute('datetime', clock.textContent);
  }
  if (clock) { tick(); setInterval(tick, 15000); }
})();

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="ri-bin" viewBox="0 0 16 16"><rect x="5" y="1" width="6" height="1" fill="#000000"/><rect x="2" y="2" width="3" height="1" fill="#000000"/><rect x="5" y="2" width="6" height="1" fill="#ffffff"/><rect x="11" y="2" width="3" height="1" fill="#000000"/><rect x="1" y="3" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="2" height="1" fill="#ffffff"/><rect x="4" y="3" width="8" height="1" fill="#c0c0c0"/><rect x="12" y="3" width="2" height="1" fill="#808080"/><rect x="14" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="14" 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="1" height="1" fill="#c0c0c0"/><rect x="5" y="5" width="1" height="1" fill="#808080"/><rect x="6" y="5" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="5" width="1" height="1" fill="#808080"/><rect x="8" y="5" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="5" width="1" height="1" fill="#808080"/><rect x="10" y="5" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="5" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="5" y="6" width="1" height="1" fill="#808080"/><rect x="6" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="6" width="1" height="1" fill="#808080"/><rect x="8" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="6" width="1" height="1" fill="#808080"/><rect x="10" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="6" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="5" y="7" width="1" height="1" fill="#808080"/><rect x="6" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="7" width="1" height="1" fill="#808080"/><rect x="8" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="7" width="1" height="1" fill="#808080"/><rect x="10" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="7" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="5" y="8" width="1" height="1" fill="#808080"/><rect x="6" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="8" width="1" height="1" fill="#808080"/><rect x="8" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="8" width="1" height="1" fill="#808080"/><rect x="10" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="8" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="5" y="9" width="1" height="1" fill="#808080"/><rect x="6" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="9" width="1" height="1" fill="#808080"/><rect x="8" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="9" width="1" height="1" fill="#808080"/><rect x="10" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="9" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="5" y="10" width="1" height="1" fill="#808080"/><rect x="6" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="10" width="1" height="1" fill="#808080"/><rect x="8" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="10" width="1" height="1" fill="#808080"/><rect x="10" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="10" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="5" y="11" width="1" height="1" fill="#808080"/><rect x="6" y="11" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="11" width="1" height="1" fill="#808080"/><rect x="8" y="11" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="11" width="1" height="1" fill="#808080"/><rect x="10" y="11" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="11" width="2" height="1" fill="#808080"/><rect x="13" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="1" height="1" fill="#000000"/><rect x="4" y="12" width="1" height="1" fill="#ffffff"/><rect x="5" y="12" width="1" height="1" fill="#c0c0c0"/><rect x="6" y="12" width="1" height="1" fill="#808080"/><rect x="7" y="12" width="1" height="1" fill="#c0c0c0"/><rect x="8" y="12" width="1" height="1" fill="#808080"/><rect x="9" y="12" width="1" height="1" fill="#c0c0c0"/><rect x="10" y="12" width="2" height="1" fill="#808080"/><rect x="12" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="10" height="1" fill="#000000"/></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-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-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="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-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="rg-next" viewBox="0 0 9 9"><rect x="0" y="0" width="2" height="1" fill="currentColor"/><rect x="6" y="0" width="2" height="1" fill="currentColor"/><rect x="0" y="1" width="3" height="1" fill="currentColor"/><rect x="6" y="1" width="2" height="1" fill="currentColor"/><rect x="0" y="2" width="4" height="1" fill="currentColor"/><rect x="6" y="2" width="2" height="1" fill="currentColor"/><rect x="0" y="3" width="5" height="1" fill="currentColor"/><rect x="6" y="3" width="2" height="1" fill="currentColor"/><rect x="0" y="4" width="9" height="1" fill="currentColor"/><rect x="0" y="5" width="5" height="1" fill="currentColor"/><rect x="6" y="5" width="2" height="1" fill="currentColor"/><rect x="0" y="6" width="4" height="1" fill="currentColor"/><rect x="6" y="6" width="2" height="1" fill="currentColor"/><rect x="0" y="7" width="3" height="1" fill="currentColor"/><rect x="6" y="7" width="2" height="1" fill="currentColor"/><rect x="0" y="8" width="2" height="1" fill="currentColor"/><rect x="6" y="8" width="2" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-note" viewBox="0 0 16 16"><rect x="5" y="1" width="10" height="1" fill="#000000"/><rect x="5" y="2" width="1" height="1" fill="#000000"/><rect x="6" y="2" width="8" height="1" fill="#7a3cff"/><rect x="14" y="2" width="1" height="1" fill="#000000"/><rect x="5" y="3" width="1" height="1" fill="#000000"/><rect x="6" y="3" width="1" height="1" fill="#7a3cff"/><rect x="7" y="3" width="6" height="1" fill="#000000"/><rect x="13" y="3" width="1" height="1" fill="#7a3cff"/><rect x="14" y="3" width="1" height="1" fill="#000000"/><rect x="5" y="4" width="1" height="1" fill="#000000"/><rect x="6" y="4" width="1" height="1" fill="#7a3cff"/><rect x="7" y="4" width="1" height="1" fill="#000000"/><rect x="12" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="1" height="1" fill="#7a3cff"/><rect x="14" y="4" width="1" height="1" fill="#000000"/><rect x="5" y="5" width="1" height="1" fill="#000000"/><rect x="6" y="5" width="1" height="1" fill="#7a3cff"/><rect x="7" y="5" width="1" height="1" fill="#000000"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="1" height="1" fill="#7a3cff"/><rect x="14" y="5" width="1" height="1" fill="#000000"/><rect x="5" y="6" width="1" height="1" fill="#000000"/><rect x="6" y="6" width="1" height="1" fill="#7a3cff"/><rect x="7" y="6" width="1" height="1" fill="#000000"/><rect x="12" y="6" width="1" height="1" fill="#000000"/><rect x="13" y="6" width="1" height="1" fill="#7a3cff"/><rect x="14" y="6" width="1" height="1" fill="#000000"/><rect x="5" y="7" width="1" height="1" fill="#000000"/><rect x="6" y="7" width="1" height="1" fill="#7a3cff"/><rect x="7" y="7" width="1" height="1" fill="#000000"/><rect x="12" y="7" width="1" height="1" fill="#000000"/><rect x="13" y="7" width="1" height="1" fill="#7a3cff"/><rect x="14" y="7" width="1" height="1" fill="#000000"/><rect x="5" y="8" width="1" height="1" fill="#000000"/><rect x="6" y="8" width="1" height="1" fill="#7a3cff"/><rect x="7" y="8" width="1" height="1" fill="#000000"/><rect x="12" y="8" width="1" height="1" fill="#000000"/><rect x="13" y="8" width="1" height="1" fill="#7a3cff"/><rect x="14" y="8" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="4" height="1" fill="#000000"/><rect x="6" y="9" width="1" height="1" fill="#7a3cff"/><rect x="7" y="9" width="1" height="1" fill="#000000"/><rect x="9" y="9" width="4" height="1" fill="#000000"/><rect x="13" y="9" width="1" height="1" fill="#7a3cff"/><rect x="14" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="5" height="1" fill="#7a3cff"/><rect x="7" y="10" width="1" height="1" fill="#000000"/><rect x="9" y="10" width="1" height="1" fill="#000000"/><rect x="10" y="10" width="4" height="1" fill="#7a3cff"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="5" height="1" fill="#7a3cff"/><rect x="7" y="11" width="1" height="1" fill="#000000"/><rect x="9" y="11" width="1" height="1" fill="#000000"/><rect x="10" y="11" width="4" height="1" fill="#7a3cff"/><rect x="14" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="12" width="5" height="1" fill="#000000"/><rect x="10" y="12" width="4" height="1" fill="#000000"/></symbol>
  <symbol id="rg-pause" viewBox="0 0 8 11"><rect x="0" y="0" width="3" height="1" fill="currentColor"/><rect x="5" y="0" width="3" height="1" fill="currentColor"/><rect x="0" y="1" width="3" height="1" fill="currentColor"/><rect x="5" y="1" width="3" height="1" fill="currentColor"/><rect x="0" y="2" width="3" height="1" fill="currentColor"/><rect x="5" y="2" width="3" height="1" fill="currentColor"/><rect x="0" y="3" width="3" height="1" fill="currentColor"/><rect x="5" y="3" width="3" height="1" fill="currentColor"/><rect x="0" y="4" width="3" height="1" fill="currentColor"/><rect x="5" y="4" width="3" height="1" fill="currentColor"/><rect x="0" y="5" width="3" height="1" fill="currentColor"/><rect x="5" y="5" width="3" height="1" fill="currentColor"/><rect x="0" y="6" width="3" height="1" fill="currentColor"/><rect x="5" y="6" width="3" height="1" fill="currentColor"/><rect x="0" y="7" width="3" height="1" fill="currentColor"/><rect x="5" y="7" width="3" height="1" fill="currentColor"/><rect x="0" y="8" width="3" height="1" fill="currentColor"/><rect x="5" y="8" width="3" height="1" fill="currentColor"/><rect x="0" y="9" width="3" height="1" fill="currentColor"/><rect x="5" y="9" width="3" height="1" fill="currentColor"/><rect x="0" y="10" width="3" height="1" fill="currentColor"/><rect x="5" y="10" width="3" height="1" fill="currentColor"/></symbol>
  <symbol id="rg-play" viewBox="0 0 6 11"><rect x="0" y="0" width="1" height="1" fill="currentColor"/><rect x="0" y="1" width="2" height="1" fill="currentColor"/><rect x="0" y="2" width="3" height="1" fill="currentColor"/><rect x="0" y="3" width="4" height="1" fill="currentColor"/><rect x="0" y="4" width="5" height="1" fill="currentColor"/><rect x="0" y="5" width="6" height="1" fill="currentColor"/><rect x="0" y="6" width="5" height="1" fill="currentColor"/><rect x="0" y="7" width="4" height="1" fill="currentColor"/><rect x="0" y="8" width="3" height="1" fill="currentColor"/><rect x="0" y="9" width="2" height="1" fill="currentColor"/><rect x="0" y="10" width="1" height="1" fill="currentColor"/></symbol>
  <symbol id="rg-prev" viewBox="0 0 9 9"><rect x="0" y="0" width="2" height="1" fill="currentColor"/><rect x="6" y="0" width="2" height="1" fill="currentColor"/><rect x="0" y="1" width="2" height="1" fill="currentColor"/><rect x="5" y="1" width="3" height="1" fill="currentColor"/><rect x="0" y="2" width="2" height="1" fill="currentColor"/><rect x="4" y="2" width="4" height="1" fill="currentColor"/><rect x="0" y="3" width="2" height="1" fill="currentColor"/><rect x="3" y="3" width="5" height="1" fill="currentColor"/><rect x="0" y="4" width="9" height="1" fill="currentColor"/><rect x="0" y="5" width="2" height="1" fill="currentColor"/><rect x="3" y="5" width="5" height="1" fill="currentColor"/><rect x="0" y="6" width="2" height="1" fill="currentColor"/><rect x="4" y="6" width="4" height="1" fill="currentColor"/><rect x="0" y="7" width="2" height="1" fill="currentColor"/><rect x="5" y="7" width="3" height="1" fill="currentColor"/><rect x="0" y="8" width="2" height="1" fill="currentColor"/><rect x="6" y="8" width="2" height="1" fill="currentColor"/></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>
  <symbol id="rg-stop" viewBox="0 0 9 9"><rect x="0" y="0" width="9" height="1" fill="currentColor"/><rect x="0" y="1" width="9" height="1" fill="currentColor"/><rect x="0" y="2" width="9" height="1" fill="currentColor"/><rect x="0" y="3" width="9" height="1" fill="currentColor"/><rect x="0" y="4" width="9" height="1" fill="currentColor"/><rect x="0" y="5" width="9" height="1" fill="currentColor"/><rect x="0" y="6" width="9" height="1" fill="currentColor"/><rect x="0" y="7" width="9" height="1" fill="currentColor"/><rect x="0" y="8" width="9" height="1" fill="currentColor"/></symbol>
</svg>
<section><span class="lbl">Retro desktop · drag a title bar, or focus a window icon and press the arrow keys</span>
<div class="retro-desktop" data-retro="classic" data-retro-desktop>
<p class="visually-hidden" id="move-hint">Use the arrow keys to move the window. Hold Shift to move it further.</p>
<div class="retro-desktop__area" data-desk-area>
<span class="retro-desktop__floor" aria-hidden="true"></span>
<span class="retro-desktop__sun" aria-hidden="true"></span>
<ul class="retro-desktop__icons" aria-label="Desktop">
<li><button class="retro-desk-icon" type="button" data-open="win-notes"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span class="">Notes</span></button></li>
<li><button class="retro-desk-icon" type="button" data-open="win-mail"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg><span class="">Inbox</span></button></li>
<li><button class="retro-desk-icon" type="button" data-open="win-radio"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg><span class="">Nightdrive FM</span></button></li>
<li><button class="retro-desk-icon" type="button" data-open="win-bin"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg><span class="">Recycle Bin</span></button></li>
</ul>
<section class="card retro-window retro-desk-win" aria-labelledby="win-mail-t" id="win-mail" data-win style="--x:130px;--y:22px;--w:530px">
<div class="card-header retro-titlebar" data-drag data-idle><button class="retro-mover" type="button" data-move aria-label="Move the Inbox window" aria-describedby="move-hint"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg></button>
  <h2 class="retro-titlebar__title" id="win-mail-t"><span>Inbox — 3 unread</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Minimise Inbox" data-min><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-min"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Inbox" data-close><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="retro-pane retro-mailpane"><table class="retro-files"><caption class="visually-hidden">Inbox, 3 unread</caption>
<thead><tr><th scope="col" class="">From</th><th scope="col" class="">Subject</th><th scope="col" class="">Received</th></tr></thead>
<tbody><tr style="font-weight:700"><td class="">Ola Brandt</td><td class=""><a class="" href="#mail-1"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Level 7 sprites are ready<span class="visually-hidden"> (unread)</span></a></td><td class="">21:04</td></tr>
<tr style="font-weight:700"><td class="">Kasia Lind</td><td class=""><a class="" href="#mail-2"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Final mix of Palm Boulevard<span class="visually-hidden"> (unread)</span></a></td><td class="">19:30</td></tr>
<tr style="font-weight:700"><td class="">Moonbyte Net</td><td class=""><a class="" href="#mail-3"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Your Starfall Racer licence key<span class="visually-hidden"> (unread)</span></a></td><td class="">18:02</td></tr>
<tr><td class="">Dana Kowalski</td><td class=""><a class="" href="#mail-4"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Re: pixel font for the HUD</a></td><td class="">Yesterday</td></tr>
<tr><td class="">Starfall forum</td><td class=""><a class="" href="#mail-5"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>12 new replies in Track ideas</a></td><td class="">Mon</td></tr></tbody></table></div>
<div class="card-footer retro-statusbar"><p>5 messages, 3 unread</p><p>Connected to MOONBYTE</p></div>
</section>
<section class="card retro-window retro-desk-win" aria-labelledby="win-notes-t" id="win-notes" data-win style="--x:610px;--y:130px;--w:400px;z-index:3">
<div class="card-header retro-titlebar" data-drag><button class="retro-mover" type="button" data-move aria-label="Move the Notes window" aria-describedby="move-hint"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg></button>
  <h2 class="retro-titlebar__title" id="win-notes-t"><span>ideas.txt — Notepad</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Minimise Notes" data-min><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-min"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Notes" data-close><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">
<label class="visually-hidden" for="d-notes">ideas.txt</label><textarea class="form-control retro-input retro-notes" id="d-notes" rows="7">Track ideas for Starfall Racer 2.5
- Harbour loop at dawn, fog on the bridge
- Tunnel with neon arches (ask Dana)
- Ghost car colour: cyan, not pink
- Kasia: slower synth on the coast road</textarea>
</div>

</section>
<section class="card retro-window retro-desk-win" aria-labelledby="win-radio-t" id="win-radio" data-win style="--x:250px;--y:370px;--w:360px">
<div class="card-header retro-titlebar" data-drag data-idle><button class="retro-mover" type="button" data-move aria-label="Move the Nightdrive FM window" aria-describedby="move-hint"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg></button>
  <h2 class="retro-titlebar__title" id="win-radio-t"><span>Nightdrive FM</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Minimise Nightdrive FM" data-min><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-min"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Nightdrive FM" data-close><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="card-body retro-window__body">
<div class="retro-screen"><div class="retro-screen__row"><span>Neon Highway</span><span data-state>Paused</span></div><div class="retro-screen__row"><span class="retro-screen__time" data-time>01:24</span><span>Kasia Lind</span></div></div>
<label class="visually-hidden" for="d-seek">Seek</label><input class="form-range retro-range retro-seek" id="d-seek" type="range" min="0" max="232" value="84" data-seek>
<div class="retro-transport"><button class="btn btn-retro retro-btn--icon" type="button" aria-label="Previous track"><svg class="retro-glyph" width="9" height="9" aria-hidden="true" focusable="false"><use href="#rg-prev"/></svg></button><button class="btn btn-retro retro-btn--icon" type="button" aria-label="Play" data-play><span data-icon="play"><svg class="retro-glyph" width="6" height="11" aria-hidden="true" focusable="false"><use href="#rg-play"/></svg></span><span data-icon="pause" hidden><svg class="retro-glyph" width="8" height="11" aria-hidden="true" focusable="false"><use href="#rg-pause"/></svg></span></button><button class="btn btn-retro retro-btn--icon" type="button" aria-label="Stop" data-stop><svg class="retro-glyph" width="9" height="9" aria-hidden="true" focusable="false"><use href="#rg-stop"/></svg></button><button class="btn btn-retro retro-btn--icon" type="button" aria-label="Next track"><svg class="retro-glyph" width="9" height="9" aria-hidden="true" focusable="false"><use href="#rg-next"/></svg></button></div>
</div>

</section>
<section class="card retro-window retro-desk-win" aria-labelledby="win-bin-t" id="win-bin" data-win style="--x:640px;--y:360px;--w:340px" hidden>
<div class="card-header retro-titlebar" data-drag data-idle><button class="retro-mover" type="button" data-move aria-label="Move the Recycle Bin window" aria-describedby="move-hint"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg></button>
  <h2 class="retro-titlebar__title" id="win-bin-t"><span>Recycle Bin</span></h2>
  <div class="retro-titlebar__controls"><button class="retro-ctl" type="button" aria-label="Minimise Recycle Bin" data-min><svg class="retro-glyph" width="7" height="9" aria-hidden="true" focusable="false"><use href="#rg-min"/></svg></button><button class="retro-ctl retro-ctl--close" type="button" aria-label="Close Recycle Bin" data-close><svg class="retro-glyph" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="retro-msg"><svg class="retro-ico retro-ico--lg" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg><div class="retro-msg__text"><p>The Recycle Bin is empty.</p><p>Deleted files stay here until you empty it.</p></div></div>

</section>
</div>
<nav class="retro-taskbar" aria-label="Taskbar">
<div class="dropup retro-startwrap"><button class="btn btn-retro retro-start dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-moon"/></svg>Start</button>
<div class="dropdown-menu retro-dd retro-startmenu"><span class="retro-startmenu__banner" aria-hidden="true">Moonbyte 98</span><ul class="retro-startmenu__list"><li><a class="dropdown-item" href="#notes"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>Notes</span></a></li><li><a class="dropdown-item" href="#inbox"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg><span>Inbox</span></a></li><li><a class="dropdown-item" href="#radio"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg><span>Nightdrive FM</span></a></li><li><a class="dropdown-item" href="#starfall"><svg class="retro-ico retro-ico--md" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><span>Starfall Racer</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="false" data-task="win-mail"><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="true" data-task="win-notes"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>ideas.txt — Notepad</span></button></li><li class=""><button class="btn btn-retro retro-taskbtn" type="button" aria-pressed="false" data-task="win-radio"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg><span>Nightdrive FM</span></button></li><li class="" hidden><button class="btn btn-retro retro-taskbtn" type="button" aria-pressed="false" data-task="win-bin"><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg><span>Recycle Bin</span></button></li></ul>
<div class="retro-tray"><div class="form-check retro-fc"><input class="form-check-input retro-theme-input" type="checkbox" id="d-theme"><label class="form-check-label" for="d-theme">Synthwave</label></div><svg class="retro-ico" aria-hidden="true" focusable="false"><use href="#ri-speaker"/></svg><time data-desk-clock datetime="21:20">21:20</time></div>
</nav>
</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}
/* 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)}
/* Fields: sunken wells. Errors add a red frame, an icon and a message tied to the field */
.retro-label{display:block;margin:0 0 4px;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font)}
.retro-input{display:block;width:100%;min-height:30px;margin:0;padding:5px 7px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);
  box-shadow:var(--retro-sunken);font:400 .875rem/1.3 var(--retro-font)}
.retro-input::placeholder{color:var(--retro-muted);opacity:1}
.retro-input:focus{outline:0}
.retro-input:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-input:disabled{background:var(--retro-face);color:var(--retro-disabled)}
.retro-input[aria-invalid="true"]{box-shadow:var(--retro-sunken),0 0 0 2px var(--retro-danger)}
textarea.retro-input{min-height:96px;resize:vertical;scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-hint{margin:4px 0 0;color:var(--retro-muted);font-size:.8125rem}
.retro-error{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;color:var(--retro-danger);font-size:.8125rem;font-weight:700}
.retro-select{position:relative;display:block}
.retro-select select{appearance:none;cursor:pointer;padding-right:34px}
.retro-select::before{content:"";position:absolute;top:2px;right:2px;bottom:2px;width:24px;background:var(--retro-face);box-shadow:var(--retro-out);pointer-events:none}
.retro-select::after{content:"";position:absolute;top:50%;right:10px;width:7px;height:4px;margin-top:-2px;background:var(--retro-text);
  -webkit-mask:var(--retro-arrow-mask) center/contain no-repeat;mask:var(--retro-arrow-mask) center/contain no-repeat;pointer-events:none}
.retro-select option,.retro-list option{background:var(--retro-field);color:var(--retro-field-text)}
.retro-list{display:block;width:100%;margin:0;padding:3px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);
  font:400 .875rem/1.3 var(--retro-font);scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-list option{padding:3px 6px}
.retro-list option:checked{background:var(--retro-select) linear-gradient(var(--retro-select),var(--retro-select));color:var(--retro-select-text)}
.retro-list:focus{outline:0}
.retro-list:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
/* Fields: Bootstrap .form-control and .form-select redrawn as sunken wells */
.form-control.retro-input,.form-select.retro-input{min-height:30px;padding:5px 7px;border:0;border-radius:0;background-color:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);font:400 .875rem/1.3 var(--retro-font)}
.form-control.retro-input:focus,.form-select.retro-input:focus{border:0;background-color:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken)}
.form-control.retro-input[aria-invalid="true"]{box-shadow:var(--retro-sunken),0 0 0 2px var(--retro-danger)}
.form-control.retro-input:disabled{background:var(--retro-face);color:var(--retro-disabled)}
.form-select.retro-input{background-image:none;padding-right:34px}
textarea.form-control.retro-input{min-height:96px}
.form-select.retro-list,.form-select.retro-list[size]:not([size="1"]){padding:3px;border:0;border-radius:0;background-image:none;box-shadow:var(--retro-sunken)}
.form-select.retro-list:focus{border:0;box-shadow:var(--retro-sunken)}
.form-label.retro-label{margin-bottom:4px}
/* Trackbar: a native range input with a sunken groove and a raised rectangular thumb */
.retro-range{display:block;width:100%;height:28px;margin:0;background:transparent;appearance:none;cursor:pointer}
.retro-range::-webkit-slider-runnable-track{height:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-range::-moz-range-track{height:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-range::-webkit-slider-thumb{width:12px;height:22px;margin-top:-8px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out);appearance:none}
.retro-range::-moz-range-thumb{width:12px;height:22px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out)}
.retro-range:focus{outline:0}
.retro-range:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-scale{display:flex;justify-content:space-between;margin-top:2px;color:var(--retro-muted);font-size:.8125rem}
.form-range.retro-range{height:28px}
.form-range.retro-range::-webkit-slider-thumb{width:12px;height:22px;margin-top:-8px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out)}
.form-range.retro-range::-moz-range-thumb{width:12px;height:22px;border:0;border-radius:0;background:var(--retro-face);box-shadow:var(--retro-out)}
.form-range.retro-range::-webkit-slider-runnable-track{height:6px;border-radius:0;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.form-range.retro-range::-moz-range-track{height:6px;border-radius:0;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.form-range.retro-range:focus::-webkit-slider-thumb,.form-range.retro-range:focus::-moz-range-thumb{box-shadow:var(--retro-out)}
/* 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)}
/* 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}
/* Media player: an LCD screen, a seek trackbar, transport buttons and a playlist */
.retro-screen{display:grid;gap:6px;padding:10px 12px;background:var(--retro-lcd);color:var(--retro-lcd-text);box-shadow:var(--retro-sunken);font:400 1.2rem/1.1 var(--retro-mono)}
.retro-screen__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.retro-screen__time{font-size:2.2rem;line-height:1;font-variant-numeric:tabular-nums}
.retro-eq{display:flex;align-items:flex-end;gap:3px;height:34px}
.retro-eq i{display:block;width:6px;height:var(--h);background:repeating-linear-gradient(0deg,var(--retro-lcd-text) 0 3px,transparent 3px 5px)}
.retro-transport{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:10px}
.retro-transport .retro-btn,.retro-transport .btn-retro{min-width:40px;padding-inline:8px}
.retro-volume{display:flex;flex:1 1 140px;align-items:center;gap:6px;margin-left:auto;max-width:190px}
.retro-playlist{margin:10px 0 0;padding:3px;list-style:none;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);counter-reset:t}
.retro-playlist li{display:flex;gap:8px;padding:3px 6px;counter-increment:t}
.retro-playlist li::before{content:counter(t,decimal-leading-zero) "."}
.retro-playlist li span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}
.retro-playlist [aria-current]{background:var(--retro-select);color:var(--retro-select-text)}
/* Message boxes: an icon, the message and centred buttons */
.retro-msg{display:flex;align-items:flex-start;gap:14px;padding:16px 14px 8px}
.retro-msg__text{display:grid;gap:6px;padding-top:4px}
.retro-actions--center{justify-content:center;padding:10px 12px 12px}
/* Native <dialog>: focus moves in, Tab stays inside and Escape closes it */
.retro-dialog{width:min(430px,calc(100vw - 32px));max-width:none;margin:auto;padding:0;border:0;background:transparent;color:var(--retro-text);overflow:visible}
.retro-dialog::backdrop{background:rgba(0,0,0,.45)}
.retro-dialog[open]{animation:retro-open .2s steps(4)}
@keyframes retro-open{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0)}}
/* File explorer: a folder tree of <details> and a file table, each in a sunken pane */
.retro-explorer{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:3px}
@media (max-width:640px){.retro-explorer{grid-template-columns:minmax(0,1fr)}}
.retro-pane{min-width:0;overflow:auto;padding:4px;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);font:400 .875rem/1.3 var(--retro-font)}
.retro-tree,.retro-tree ul{margin:0;padding:0;list-style:none}
.retro-tree ul{margin-left:8px;padding-left:10px;border-left:1px dotted var(--retro-muted)}
.retro-tree summary{display:flex;align-items:center;gap:5px;padding:2px 3px;cursor:pointer;list-style:none}
.retro-tree summary::-webkit-details-marker{display:none}
.retro-tree summary::before{content:"+";display:grid;place-items:center;flex:none;width:11px;height:11px;border:1px solid var(--retro-muted);background:var(--retro-field);color:var(--retro-field-text);font:700 11px/1 var(--retro-font)}
.retro-tree details[open]>summary::before{content:"\2212"}
.retro-tree a{display:flex;align-items:center;gap:5px;padding:2px 3px 2px 19px;color:inherit;text-decoration:none}
.retro-tree summary:focus-visible,.retro-tree a:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:-1px}
.retro-tree [aria-current]{background:var(--retro-select);color:var(--retro-select-text)}
.retro-files{width:100%;border-collapse:collapse;color:var(--retro-field-text);font:400 .875rem/1.3 var(--retro-font)}
.retro-files th{padding:4px 8px;background:var(--retro-face);color:var(--retro-text);font-weight:400;text-align:left;box-shadow:var(--retro-out)}
.retro-files td{padding:3px 8px;white-space:nowrap}
.retro-files .num{text-align:right}
.retro-files a{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.retro-files tbody tr:hover td,.retro-files tbody tr:focus-within td{background:var(--retro-select);color:var(--retro-select-text)}
.retro-files a:focus-visible{outline:2px dotted currentColor;outline-offset:1px}
/* Desktop: icons, draggable windows and a taskbar with a classic / synthwave switch */
.retro-desktop{position:relative;display:flex;flex-direction:column;min-height:700px;overflow:hidden;background:var(--retro-wallpaper);box-shadow:var(--retro-window)}
.retro-desktop__area{position:relative;flex:1;min-height:640px;isolation:isolate}
.retro-desktop__icons{position:absolute;top:14px;left:10px;z-index:1;display:grid;gap:12px;margin:0;padding:0;list-style:none}
.retro-desk-icon{display:flex;flex-direction:column;align-items:center;gap:5px;width:86px;margin:0;padding:4px 2px;border:0;background:transparent;color:var(--retro-desk-text);font:400 .8125rem/1.2 var(--retro-font);text-align:center;cursor:pointer}
.retro-desk-icon span{padding:1px 4px;background:var(--retro-desk)}
.retro-desk-icon:hover span,.retro-desk-icon:focus-visible span{background:var(--retro-select);color:var(--retro-select-text)}
.retro-desk-icon:focus-visible{outline:2px dotted var(--retro-desk-text);outline-offset:1px}
.retro-desk-win{position:absolute;left:var(--x);top:var(--y);z-index:2;width:var(--w);max-width:calc(100% - 16px)}
.retro-desk-win[hidden]{display:none}
.retro-titlebar[data-idle]{background:var(--retro-idle-bg);color:var(--retro-idle-text)}
.retro-titlebar[data-drag]{cursor:move;touch-action:none;user-select:none}
.retro-mover{display:grid;place-items:center;width:22px;height:22px;margin:0;padding:0;border:0;background:transparent;color:inherit;cursor:move}
.retro-mover:focus-visible{outline:2px dotted currentColor;outline-offset:-1px}
.retro-desktop .retro-taskbar{position:relative;z-index:5}
.retro-taskbar__apps>li[hidden]{display:none}
.retro-desktop__floor,.retro-desktop__sun{display:none}
[data-retro]:is([data-retro="synthwave"],:has(.retro-theme-input:checked)) :is(.retro-desktop__floor,.retro-desktop__sun){display:block}
.retro-desktop__floor{position:absolute;z-index:-1;left:-60%;right:-60%;top:58%;height:520px;transform:perspective(320px) rotateX(62deg);transform-origin:top;
  background:repeating-linear-gradient(90deg,var(--retro-neon-pink) 0 2px,transparent 2px 64px),repeating-linear-gradient(0deg,var(--retro-neon-pink) 0 2px,transparent 2px 44px);opacity:.45;
  -webkit-mask:linear-gradient(#000,transparent 85%);mask:linear-gradient(#000,transparent 85%)}
.retro-desktop__sun{position:absolute;z-index:-1;right:8%;top:calc(58% - 190px);width:240px;aspect-ratio:1;border-radius:50%;background:linear-gradient(var(--retro-sun-1),var(--retro-sun-2) 75%);box-shadow:0 0 60px rgba(255,63,164,.45);
  -webkit-mask:linear-gradient(#000 50%,transparent 50% 54%,#000 54% 61%,transparent 61% 66%,#000 66% 72%,transparent 72% 78%,#000 78% 84%,transparent 84% 91%,#000 91%);
  mask:linear-gradient(#000 50%,transparent 50% 54%,#000 54% 61%,transparent 61% 66%,#000 66% 72%,transparent 72% 78%,#000 78% 84%,transparent 84% 91%,#000 91%)}
@media (max-width:760px){.retro-desktop{min-height:0}.retro-desktop__area{display:grid;gap:16px;min-height:0;padding:12px}.retro-desktop__icons{position:static;display:flex;flex-wrap:wrap}
  .retro-desk-win{position:static;width:auto;max-width:none}.retro-titlebar[data-drag]{cursor:default}}
.btn-retro.retro-btn--icon{--bs-btn-padding-x:8px;min-width:40px}
.retro-seek{margin-top:10px}
.retro-mailpane{max-height:210px}
textarea.form-control.retro-notes{min-height:150px;resize:none}
.retro-startmenu.dropdown-menu[data-bs-popper]{margin-bottom:6px}
.retro-tray .form-check.retro-fc{min-height:0}
@media (prefers-reduced-motion:reduce){[class*="retro-"],[class*="retro-"]::before,[class*="retro-"]::after{transition:none!important;animation:none!important}}
JavaScript 
// Player: Play / Pause swaps the button's name and glyph; while playing the seek bar moves once a second.
// The seek bar's time read-out and aria-valuetext follow it as you drag or use the arrow keys.
document.querySelectorAll('[data-retro-player]').forEach(function (p) {
  var seek = p.querySelector('[data-seek]'), out = p.querySelector('[data-time]'), play = p.querySelector('[data-play]');
  var state = p.querySelector('[data-state]'), timer = null;
  function fmt(s) { return String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0'); }
  function words(s) { return Math.floor(s / 60) + ' min ' + (s % 60) + ' s'; }
  function sync() {
    var s = +seek.value;
    out.textContent = fmt(s);
    seek.setAttribute('aria-valuetext', words(s) + ' of ' + words(+seek.max));
  }
  function setPlaying(on) {
    play.setAttribute('aria-label', on ? 'Pause' : 'Play');
    play.querySelector('[data-icon="play"]').hidden = on;
    play.querySelector('[data-icon="pause"]').hidden = !on;
    if (state) state.textContent = on ? 'Playing' : 'Paused';
    clearInterval(timer);
    if (on) timer = setInterval(function () { seek.value = Math.min(+seek.value + 1, +seek.max); sync(); if (+seek.value >= +seek.max) setPlaying(false); }, 1000);
  }
  seek.addEventListener('input', sync);
  play.addEventListener('click', function () { setPlaying(play.getAttribute('aria-label') === 'Play'); });
  var stop = p.querySelector('[data-stop]');
  if (stop) stop.addEventListener('click', function () { setPlaying(false); seek.value = 0; sync(); });
  sync();
});
// Desktop: drag a window by its title bar, or focus its icon button and use the arrow keys (Shift moves further).
// Clicking or focusing a window brings it to the front; the taskbar shows which one is active.
(function () {
  var desk = document.querySelector('[data-retro-desktop]'); if (!desk) return;
  var area = desk.querySelector('[data-desk-area]');
  var wins = Array.prototype.slice.call(desk.querySelectorAll('[data-win]'));
  var z = 10;
  function movable() { return window.matchMedia('(min-width: 761px)').matches; }
  function task(win) { return desk.querySelector('[data-task="' + win.id + '"]'); }
  function activate(win) {
    wins.forEach(function (w) {
      var on = w === win;
      w.querySelector('[data-drag]').toggleAttribute('data-idle', !on);
      var t = task(w); if (t) t.setAttribute('aria-pressed', String(on && !w.hidden));
    });
    win.style.zIndex = ++z;
  }
  function show(win) {
    win.hidden = false;
    var t = task(win); if (t) t.parentElement.hidden = false;
    activate(win); win.querySelector('[data-move]').focus();
  }
  function place(win, x, y) {
    x = Math.max(0, Math.min(x, area.clientWidth - win.offsetWidth));
    y = Math.max(0, Math.min(y, area.clientHeight - win.offsetHeight));
    win.style.left = x + 'px'; win.style.top = y + 'px';
  }
  wins.forEach(function (win) {
    var bar = win.querySelector('[data-drag]'), mover = win.querySelector('[data-move]');
    win.addEventListener('pointerdown', function () { activate(win); });
    win.addEventListener('focusin', function () { activate(win); });
    bar.addEventListener('pointerdown', function (e) {
      if (e.button !== 0 || !movable() || e.target.closest('button:not([data-move])')) return;
      var dx = e.clientX - win.offsetLeft, dy = e.clientY - win.offsetTop;
      bar.setPointerCapture(e.pointerId);
      function move(ev) { place(win, ev.clientX - dx, ev.clientY - dy); }
      function up() { bar.removeEventListener('pointermove', move); bar.removeEventListener('pointerup', up); }
      bar.addEventListener('pointermove', move); bar.addEventListener('pointerup', up);
    });
    mover.addEventListener('keydown', function (e) {
      var d = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key];
      if (!d || !movable()) return;
      e.preventDefault();
      var step = e.shiftKey ? 64 : 16;
      place(win, win.offsetLeft + d[0] * step, win.offsetTop + d[1] * step);
    });
    win.querySelector('[data-min]').addEventListener('click', function () {
      win.hidden = true;
      var t = task(win); t.setAttribute('aria-pressed', 'false'); t.focus();
    });
    win.querySelector('[data-close]').addEventListener('click', function () {
      win.hidden = true;
      var t = task(win); if (t) t.parentElement.hidden = true;
      var icon = desk.querySelector('[data-open="' + win.id + '"]'); if (icon) icon.focus();
    });
  });
  desk.querySelectorAll('[data-task]').forEach(function (t) {
    t.addEventListener('click', function () {
      var win = document.getElementById(t.getAttribute('data-task'));
      if (win.hidden) { show(win); return; }
      if (t.getAttribute('aria-pressed') === 'true') { win.hidden = true; t.setAttribute('aria-pressed', 'false'); return; }
      activate(win); win.querySelector('[data-move]').focus();
    });
  });
  desk.querySelectorAll('[data-open]').forEach(function (b) {
    b.addEventListener('click', function () { show(document.getElementById(b.getAttribute('data-open'))); });
  });
  var clock = desk.querySelector('[data-desk-clock]');
  function tick() {
    var d = new Date();
    clock.textContent = d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
    clock.setAttribute('datetime', clock.textContent);
  }
  if (clock) { tick(); setInterval(tick, 15000); }
})();

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="ri-bin" viewBox="0 0 16 16"><rect x="5" y="1" width="6" height="1" fill="#000000"/><rect x="2" y="2" width="3" height="1" fill="#000000"/><rect x="5" y="2" width="6" height="1" fill="#ffffff"/><rect x="11" y="2" width="3" height="1" fill="#000000"/><rect x="1" y="3" width="1" height="1" fill="#000000"/><rect x="2" y="3" width="2" height="1" fill="#ffffff"/><rect x="4" y="3" width="8" height="1" fill="#c0c0c0"/><rect x="12" y="3" width="2" height="1" fill="#808080"/><rect x="14" y="3" width="1" height="1" fill="#000000"/><rect x="1" y="4" width="14" 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="1" height="1" fill="#c0c0c0"/><rect x="5" y="5" width="1" height="1" fill="#808080"/><rect x="6" y="5" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="5" width="1" height="1" fill="#808080"/><rect x="8" y="5" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="5" width="1" height="1" fill="#808080"/><rect x="10" y="5" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="5" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="5" y="6" width="1" height="1" fill="#808080"/><rect x="6" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="6" width="1" height="1" fill="#808080"/><rect x="8" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="6" width="1" height="1" fill="#808080"/><rect x="10" y="6" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="6" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="5" y="7" width="1" height="1" fill="#808080"/><rect x="6" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="7" width="1" height="1" fill="#808080"/><rect x="8" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="7" width="1" height="1" fill="#808080"/><rect x="10" y="7" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="7" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="5" y="8" width="1" height="1" fill="#808080"/><rect x="6" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="8" width="1" height="1" fill="#808080"/><rect x="8" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="8" width="1" height="1" fill="#808080"/><rect x="10" y="8" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="8" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="5" y="9" width="1" height="1" fill="#808080"/><rect x="6" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="9" width="1" height="1" fill="#808080"/><rect x="8" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="9" width="1" height="1" fill="#808080"/><rect x="10" y="9" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="9" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#ffffff"/><rect x="4" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="5" y="10" width="1" height="1" fill="#808080"/><rect x="6" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="10" width="1" height="1" fill="#808080"/><rect x="8" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="10" width="1" height="1" fill="#808080"/><rect x="10" y="10" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="10" width="2" height="1" fill="#808080"/><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="1" height="1" fill="#c0c0c0"/><rect x="5" y="11" width="1" height="1" fill="#808080"/><rect x="6" y="11" width="1" height="1" fill="#c0c0c0"/><rect x="7" y="11" width="1" height="1" fill="#808080"/><rect x="8" y="11" width="1" height="1" fill="#c0c0c0"/><rect x="9" y="11" width="1" height="1" fill="#808080"/><rect x="10" y="11" width="1" height="1" fill="#c0c0c0"/><rect x="11" y="11" width="2" height="1" fill="#808080"/><rect x="13" y="11" width="1" height="1" fill="#000000"/><rect x="3" y="12" width="1" height="1" fill="#000000"/><rect x="4" y="12" width="1" height="1" fill="#ffffff"/><rect x="5" y="12" width="1" height="1" fill="#c0c0c0"/><rect x="6" y="12" width="1" height="1" fill="#808080"/><rect x="7" y="12" width="1" height="1" fill="#c0c0c0"/><rect x="8" y="12" width="1" height="1" fill="#808080"/><rect x="9" y="12" width="1" height="1" fill="#c0c0c0"/><rect x="10" y="12" width="2" height="1" fill="#808080"/><rect x="12" y="12" width="1" height="1" fill="#000000"/><rect x="3" y="13" width="10" height="1" fill="#000000"/></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-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-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="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-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="rg-next" viewBox="0 0 9 9"><rect x="0" y="0" width="2" height="1" fill="currentColor"/><rect x="6" y="0" width="2" height="1" fill="currentColor"/><rect x="0" y="1" width="3" height="1" fill="currentColor"/><rect x="6" y="1" width="2" height="1" fill="currentColor"/><rect x="0" y="2" width="4" height="1" fill="currentColor"/><rect x="6" y="2" width="2" height="1" fill="currentColor"/><rect x="0" y="3" width="5" height="1" fill="currentColor"/><rect x="6" y="3" width="2" height="1" fill="currentColor"/><rect x="0" y="4" width="9" height="1" fill="currentColor"/><rect x="0" y="5" width="5" height="1" fill="currentColor"/><rect x="6" y="5" width="2" height="1" fill="currentColor"/><rect x="0" y="6" width="4" height="1" fill="currentColor"/><rect x="6" y="6" width="2" height="1" fill="currentColor"/><rect x="0" y="7" width="3" height="1" fill="currentColor"/><rect x="6" y="7" width="2" height="1" fill="currentColor"/><rect x="0" y="8" width="2" height="1" fill="currentColor"/><rect x="6" y="8" width="2" height="1" fill="currentColor"/></symbol>
  <symbol id="ri-note" viewBox="0 0 16 16"><rect x="5" y="1" width="10" height="1" fill="#000000"/><rect x="5" y="2" width="1" height="1" fill="#000000"/><rect x="6" y="2" width="8" height="1" fill="#7a3cff"/><rect x="14" y="2" width="1" height="1" fill="#000000"/><rect x="5" y="3" width="1" height="1" fill="#000000"/><rect x="6" y="3" width="1" height="1" fill="#7a3cff"/><rect x="7" y="3" width="6" height="1" fill="#000000"/><rect x="13" y="3" width="1" height="1" fill="#7a3cff"/><rect x="14" y="3" width="1" height="1" fill="#000000"/><rect x="5" y="4" width="1" height="1" fill="#000000"/><rect x="6" y="4" width="1" height="1" fill="#7a3cff"/><rect x="7" y="4" width="1" height="1" fill="#000000"/><rect x="12" y="4" width="1" height="1" fill="#000000"/><rect x="13" y="4" width="1" height="1" fill="#7a3cff"/><rect x="14" y="4" width="1" height="1" fill="#000000"/><rect x="5" y="5" width="1" height="1" fill="#000000"/><rect x="6" y="5" width="1" height="1" fill="#7a3cff"/><rect x="7" y="5" width="1" height="1" fill="#000000"/><rect x="12" y="5" width="1" height="1" fill="#000000"/><rect x="13" y="5" width="1" height="1" fill="#7a3cff"/><rect x="14" y="5" width="1" height="1" fill="#000000"/><rect x="5" y="6" width="1" height="1" fill="#000000"/><rect x="6" y="6" width="1" height="1" fill="#7a3cff"/><rect x="7" y="6" width="1" height="1" fill="#000000"/><rect x="12" y="6" width="1" height="1" fill="#000000"/><rect x="13" y="6" width="1" height="1" fill="#7a3cff"/><rect x="14" y="6" width="1" height="1" fill="#000000"/><rect x="5" y="7" width="1" height="1" fill="#000000"/><rect x="6" y="7" width="1" height="1" fill="#7a3cff"/><rect x="7" y="7" width="1" height="1" fill="#000000"/><rect x="12" y="7" width="1" height="1" fill="#000000"/><rect x="13" y="7" width="1" height="1" fill="#7a3cff"/><rect x="14" y="7" width="1" height="1" fill="#000000"/><rect x="5" y="8" width="1" height="1" fill="#000000"/><rect x="6" y="8" width="1" height="1" fill="#7a3cff"/><rect x="7" y="8" width="1" height="1" fill="#000000"/><rect x="12" y="8" width="1" height="1" fill="#000000"/><rect x="13" y="8" width="1" height="1" fill="#7a3cff"/><rect x="14" y="8" width="1" height="1" fill="#000000"/><rect x="2" y="9" width="4" height="1" fill="#000000"/><rect x="6" y="9" width="1" height="1" fill="#7a3cff"/><rect x="7" y="9" width="1" height="1" fill="#000000"/><rect x="9" y="9" width="4" height="1" fill="#000000"/><rect x="13" y="9" width="1" height="1" fill="#7a3cff"/><rect x="14" y="9" width="1" height="1" fill="#000000"/><rect x="1" y="10" width="1" height="1" fill="#000000"/><rect x="2" y="10" width="5" height="1" fill="#7a3cff"/><rect x="7" y="10" width="1" height="1" fill="#000000"/><rect x="9" y="10" width="1" height="1" fill="#000000"/><rect x="10" y="10" width="4" height="1" fill="#7a3cff"/><rect x="14" y="10" width="1" height="1" fill="#000000"/><rect x="1" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="11" width="5" height="1" fill="#7a3cff"/><rect x="7" y="11" width="1" height="1" fill="#000000"/><rect x="9" y="11" width="1" height="1" fill="#000000"/><rect x="10" y="11" width="4" height="1" fill="#7a3cff"/><rect x="14" y="11" width="1" height="1" fill="#000000"/><rect x="2" y="12" width="5" height="1" fill="#000000"/><rect x="10" y="12" width="4" height="1" fill="#000000"/></symbol>
  <symbol id="rg-pause" viewBox="0 0 8 11"><rect x="0" y="0" width="3" height="1" fill="currentColor"/><rect x="5" y="0" width="3" height="1" fill="currentColor"/><rect x="0" y="1" width="3" height="1" fill="currentColor"/><rect x="5" y="1" width="3" height="1" fill="currentColor"/><rect x="0" y="2" width="3" height="1" fill="currentColor"/><rect x="5" y="2" width="3" height="1" fill="currentColor"/><rect x="0" y="3" width="3" height="1" fill="currentColor"/><rect x="5" y="3" width="3" height="1" fill="currentColor"/><rect x="0" y="4" width="3" height="1" fill="currentColor"/><rect x="5" y="4" width="3" height="1" fill="currentColor"/><rect x="0" y="5" width="3" height="1" fill="currentColor"/><rect x="5" y="5" width="3" height="1" fill="currentColor"/><rect x="0" y="6" width="3" height="1" fill="currentColor"/><rect x="5" y="6" width="3" height="1" fill="currentColor"/><rect x="0" y="7" width="3" height="1" fill="currentColor"/><rect x="5" y="7" width="3" height="1" fill="currentColor"/><rect x="0" y="8" width="3" height="1" fill="currentColor"/><rect x="5" y="8" width="3" height="1" fill="currentColor"/><rect x="0" y="9" width="3" height="1" fill="currentColor"/><rect x="5" y="9" width="3" height="1" fill="currentColor"/><rect x="0" y="10" width="3" height="1" fill="currentColor"/><rect x="5" y="10" width="3" height="1" fill="currentColor"/></symbol>
  <symbol id="rg-play" viewBox="0 0 6 11"><rect x="0" y="0" width="1" height="1" fill="currentColor"/><rect x="0" y="1" width="2" height="1" fill="currentColor"/><rect x="0" y="2" width="3" height="1" fill="currentColor"/><rect x="0" y="3" width="4" height="1" fill="currentColor"/><rect x="0" y="4" width="5" height="1" fill="currentColor"/><rect x="0" y="5" width="6" height="1" fill="currentColor"/><rect x="0" y="6" width="5" height="1" fill="currentColor"/><rect x="0" y="7" width="4" height="1" fill="currentColor"/><rect x="0" y="8" width="3" height="1" fill="currentColor"/><rect x="0" y="9" width="2" height="1" fill="currentColor"/><rect x="0" y="10" width="1" height="1" fill="currentColor"/></symbol>
  <symbol id="rg-prev" viewBox="0 0 9 9"><rect x="0" y="0" width="2" height="1" fill="currentColor"/><rect x="6" y="0" width="2" height="1" fill="currentColor"/><rect x="0" y="1" width="2" height="1" fill="currentColor"/><rect x="5" y="1" width="3" height="1" fill="currentColor"/><rect x="0" y="2" width="2" height="1" fill="currentColor"/><rect x="4" y="2" width="4" height="1" fill="currentColor"/><rect x="0" y="3" width="2" height="1" fill="currentColor"/><rect x="3" y="3" width="5" height="1" fill="currentColor"/><rect x="0" y="4" width="9" height="1" fill="currentColor"/><rect x="0" y="5" width="2" height="1" fill="currentColor"/><rect x="3" y="5" width="5" height="1" fill="currentColor"/><rect x="0" y="6" width="2" height="1" fill="currentColor"/><rect x="4" y="6" width="4" height="1" fill="currentColor"/><rect x="0" y="7" width="2" height="1" fill="currentColor"/><rect x="5" y="7" width="3" height="1" fill="currentColor"/><rect x="0" y="8" width="2" height="1" fill="currentColor"/><rect x="6" y="8" width="2" height="1" fill="currentColor"/></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>
  <symbol id="rg-stop" viewBox="0 0 9 9"><rect x="0" y="0" width="9" height="1" fill="currentColor"/><rect x="0" y="1" width="9" height="1" fill="currentColor"/><rect x="0" y="2" width="9" height="1" fill="currentColor"/><rect x="0" y="3" width="9" height="1" fill="currentColor"/><rect x="0" y="4" width="9" height="1" fill="currentColor"/><rect x="0" y="5" width="9" height="1" fill="currentColor"/><rect x="0" y="6" width="9" height="1" fill="currentColor"/><rect x="0" y="7" width="9" height="1" fill="currentColor"/><rect x="0" y="8" width="9" height="1" fill="currentColor"/></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">Retro desktop · drag a title bar, or focus a window icon and press the arrow keys</span>
<div class="relative flex flex-col min-h-[700px] max-[760px]:min-h-0 overflow-hidden [background:var(--retro-wallpaper)] shadow-retro-window" data-retro="classic" data-retro-desktop>
<p class="sr-only" id="move-hint">Use the arrow keys to move the window. Hold Shift to move it further.</p>
<div class="relative flex-1 min-h-[640px] isolate max-[760px]:grid max-[760px]:gap-4 max-[760px]:min-h-0 max-[760px]:p-3" data-desk-area>
<span class="hidden [[data-retro]:has(.retro-theme-input:checked)_&]:block retro-synth-floor top-[58%]! h-[520px]! opacity-45!" aria-hidden="true"></span>
<span class="hidden [[data-retro]:has(.retro-theme-input:checked)_&]:block absolute -z-1 right-[8%] top-[calc(58%-190px)] w-60 aspect-square rounded-full retro-synth-sun" aria-hidden="true"></span>
<ul class="absolute top-3.5 left-2.5 z-1 grid gap-3 m-0 p-0 list-none max-[760px]:static max-[760px]:flex max-[760px]:flex-wrap" aria-label="Desktop">
<li><button class="flex flex-col items-center gap-[5px] w-[86px] m-0 px-0.5 py-1 border-0 bg-transparent text-retro-desk-text font-retro text-[.8125rem] leading-[1.2] text-center cursor-pointer group focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-desk-text focus-visible:outline-offset-1" type="button" data-open="win-notes"><svg class="retro-i block shrink-0 size-8 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span class="px-1 py-px bg-retro-desk group-hover:bg-retro-select group-hover:text-retro-select-text group-focus-visible:bg-retro-select group-focus-visible:text-retro-select-text">Notes</span></button></li>
<li><button class="flex flex-col items-center gap-[5px] w-[86px] m-0 px-0.5 py-1 border-0 bg-transparent text-retro-desk-text font-retro text-[.8125rem] leading-[1.2] text-center cursor-pointer group focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-desk-text focus-visible:outline-offset-1" type="button" data-open="win-mail"><svg class="retro-i block shrink-0 size-8 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg><span class="px-1 py-px bg-retro-desk group-hover:bg-retro-select group-hover:text-retro-select-text group-focus-visible:bg-retro-select group-focus-visible:text-retro-select-text">Inbox</span></button></li>
<li><button class="flex flex-col items-center gap-[5px] w-[86px] m-0 px-0.5 py-1 border-0 bg-transparent text-retro-desk-text font-retro text-[.8125rem] leading-[1.2] text-center cursor-pointer group focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-desk-text focus-visible:outline-offset-1" type="button" data-open="win-radio"><svg class="retro-i block shrink-0 size-8 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg><span class="px-1 py-px bg-retro-desk group-hover:bg-retro-select group-hover:text-retro-select-text group-focus-visible:bg-retro-select group-focus-visible:text-retro-select-text">Nightdrive FM</span></button></li>
<li><button class="flex flex-col items-center gap-[5px] w-[86px] m-0 px-0.5 py-1 border-0 bg-transparent text-retro-desk-text font-retro text-[.8125rem] leading-[1.2] text-center cursor-pointer group focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-desk-text focus-visible:outline-offset-1" type="button" data-open="win-bin"><svg class="retro-i block shrink-0 size-8 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg><span class="px-1 py-px bg-retro-desk group-hover:bg-retro-select group-hover:text-retro-select-text group-focus-visible:bg-retro-select group-focus-visible:text-retro-select-text">Recycle Bin</span></button></li>
</ul>
<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] absolute left-[var(--x)] top-[var(--y)] z-2 w-[var(--w)] max-w-[calc(100%-16px)] max-[760px]:static max-[760px]:w-auto max-[760px]:max-w-none" aria-labelledby="win-mail-t" id="win-mail" data-win style="--x:130px;--y:22px;--w:530px">
<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 data-idle:bg-[image:var(--retro-idle-bg)] data-idle:text-retro-idle-text data-drag:cursor-move data-drag:touch-none data-drag:select-none max-[760px]:data-drag:cursor-default" data-drag data-idle><button class="grid place-items-center size-[22px] m-0 p-0 border-0 bg-transparent text-inherit cursor-move focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-current focus-visible:outline-offset-[-1px]" type="button" data-move aria-label="Move the Inbox window" aria-describedby="move-hint"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg></button>
  <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="win-mail-t"><span class="min-w-0 truncate">Inbox — 3 unread</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 Inbox" data-min><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] ml-0.5" type="button" aria-label="Close Inbox" data-close><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="min-w-0 overflow-auto p-1 bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] max-h-[210px]"><table class="w-full border-collapse text-retro-field-text font-retro text-sm leading-[1.3]"><caption class="sr-only">Inbox, 3 unread</caption>
<thead><tr><th scope="col" class="px-2 py-1 bg-retro-face text-retro-text font-normal text-left shadow-retro-out">From</th><th scope="col" class="px-2 py-1 bg-retro-face text-retro-text font-normal text-left shadow-retro-out">Subject</th><th scope="col" class="px-2 py-1 bg-retro-face text-retro-text font-normal text-left shadow-retro-out">Received</th></tr></thead>
<tbody><tr class="hover:[&>td]:bg-retro-select hover:[&>td]:text-retro-select-text focus-within:[&>td]:bg-retro-select focus-within:[&>td]:text-retro-select-text" style="font-weight:700"><td class="px-2 py-[3px] whitespace-nowrap">Ola Brandt</td><td class="px-2 py-[3px] whitespace-nowrap"><a class="inline-flex items-center gap-1.5 text-inherit no-underline focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-current focus-visible:outline-offset-1" href="#mail-1"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Level 7 sprites are ready<span class="sr-only"> (unread)</span></a></td><td class="px-2 py-[3px] whitespace-nowrap">21:04</td></tr>
<tr class="hover:[&>td]:bg-retro-select hover:[&>td]:text-retro-select-text focus-within:[&>td]:bg-retro-select focus-within:[&>td]:text-retro-select-text" style="font-weight:700"><td class="px-2 py-[3px] whitespace-nowrap">Kasia Lind</td><td class="px-2 py-[3px] whitespace-nowrap"><a class="inline-flex items-center gap-1.5 text-inherit no-underline focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-current focus-visible:outline-offset-1" href="#mail-2"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Final mix of Palm Boulevard<span class="sr-only"> (unread)</span></a></td><td class="px-2 py-[3px] whitespace-nowrap">19:30</td></tr>
<tr class="hover:[&>td]:bg-retro-select hover:[&>td]:text-retro-select-text focus-within:[&>td]:bg-retro-select focus-within:[&>td]:text-retro-select-text" style="font-weight:700"><td class="px-2 py-[3px] whitespace-nowrap">Moonbyte Net</td><td class="px-2 py-[3px] whitespace-nowrap"><a class="inline-flex items-center gap-1.5 text-inherit no-underline focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-current focus-visible:outline-offset-1" href="#mail-3"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Your Starfall Racer licence key<span class="sr-only"> (unread)</span></a></td><td class="px-2 py-[3px] whitespace-nowrap">18:02</td></tr>
<tr class="hover:[&>td]:bg-retro-select hover:[&>td]:text-retro-select-text focus-within:[&>td]:bg-retro-select focus-within:[&>td]:text-retro-select-text"><td class="px-2 py-[3px] whitespace-nowrap">Dana Kowalski</td><td class="px-2 py-[3px] whitespace-nowrap"><a class="inline-flex items-center gap-1.5 text-inherit no-underline focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-current focus-visible:outline-offset-1" href="#mail-4"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>Re: pixel font for the HUD</a></td><td class="px-2 py-[3px] whitespace-nowrap">Yesterday</td></tr>
<tr class="hover:[&>td]:bg-retro-select hover:[&>td]:text-retro-select-text focus-within:[&>td]:bg-retro-select focus-within:[&>td]:text-retro-select-text"><td class="px-2 py-[3px] whitespace-nowrap">Starfall forum</td><td class="px-2 py-[3px] whitespace-nowrap"><a class="inline-flex items-center gap-1.5 text-inherit no-underline focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-current focus-visible:outline-offset-1" href="#mail-5"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg>12 new replies in Track ideas</a></td><td class="px-2 py-[3px] whitespace-nowrap">Mon</td></tr></tbody></table></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]">5 messages, 3 unread</p><p class="flex-auto m-0 px-[7px] py-[3px] shadow-retro-thin-in text-[.8125rem]">Connected to MOONBYTE</p></div>
</section>
<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] absolute left-[var(--x)] top-[var(--y)] z-2 w-[var(--w)] max-w-[calc(100%-16px)] max-[760px]:static max-[760px]:w-auto max-[760px]:max-w-none" aria-labelledby="win-notes-t" id="win-notes" data-win style="--x:610px;--y:130px;--w:400px;z-index:3">
<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 data-idle:bg-[image:var(--retro-idle-bg)] data-idle:text-retro-idle-text data-drag:cursor-move data-drag:touch-none data-drag:select-none max-[760px]:data-drag:cursor-default" data-drag><button class="grid place-items-center size-[22px] m-0 p-0 border-0 bg-transparent text-inherit cursor-move focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-current focus-visible:outline-offset-[-1px]" type="button" data-move aria-label="Move the Notes window" aria-describedby="move-hint"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg></button>
  <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="win-notes-t"><span class="min-w-0 truncate">ideas.txt — Notepad</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 Notes" data-min><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] ml-0.5" type="button" aria-label="Close Notes" data-close><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">
<label class="sr-only" for="d-notes">ideas.txt</label><textarea class="block w-full min-h-[30px] m-0 px-[7px] py-[5px] border-0 rounded-none bg-retro-field text-retro-field-text shadow-retro-sunken font-retro text-sm leading-[1.3] placeholder:text-retro-muted placeholder:opacity-100 focus:outline-0 disabled:bg-retro-face disabled:text-retro-disabled aria-invalid:shadow-[var(--retro-sunken),0_0_0_2px_var(--retro-danger)] focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px] min-h-[150px]! resize-none" id="d-notes" rows="7">Track ideas for Starfall Racer 2.5
- Harbour loop at dawn, fog on the bridge
- Tunnel with neon arches (ask Dana)
- Ghost car colour: cyan, not pink
- Kasia: slower synth on the coast road</textarea>
</div>

</section>
<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] absolute left-[var(--x)] top-[var(--y)] z-2 w-[var(--w)] max-w-[calc(100%-16px)] max-[760px]:static max-[760px]:w-auto max-[760px]:max-w-none" aria-labelledby="win-radio-t" id="win-radio" data-win style="--x:250px;--y:370px;--w:360px">
<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 data-idle:bg-[image:var(--retro-idle-bg)] data-idle:text-retro-idle-text data-drag:cursor-move data-drag:touch-none data-drag:select-none max-[760px]:data-drag:cursor-default" data-drag data-idle><button class="grid place-items-center size-[22px] m-0 p-0 border-0 bg-transparent text-inherit cursor-move focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-current focus-visible:outline-offset-[-1px]" type="button" data-move aria-label="Move the Nightdrive FM window" aria-describedby="move-hint"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg></button>
  <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="win-radio-t"><span class="min-w-0 truncate">Nightdrive FM</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 Nightdrive FM" data-min><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] ml-0.5" type="button" aria-label="Close Nightdrive FM" data-close><svg class="block shrink-0 [shape-rendering:crispEdges]" width="10" height="9" aria-hidden="true" focusable="false"><use href="#rg-close"/></svg></button></div>
</div>
<div class="px-2.5 py-3">
<div class="grid gap-1.5 px-3 py-2.5 bg-retro-lcd text-retro-lcd-text shadow-retro-sunken font-retro-mono text-[1.2rem] leading-[1.1]"><div class="flex items-end justify-between gap-3"><span>Neon Highway</span><span data-state>Paused</span></div><div class="flex items-end justify-between gap-3"><span class="text-[2.2rem] leading-none tabular-nums" data-time>01:24</span><span>Kasia Lind</span></div></div>
<label class="sr-only" for="d-seek">Seek</label><input class="block w-full h-7 m-0 bg-transparent appearance-none cursor-pointer focus:outline-0 focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-retro-focus focus-visible:outline-offset-[2px] [&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:bg-retro-field [&::-webkit-slider-runnable-track]:shadow-retro-sunken [&::-moz-range-track]:h-1.5 [&::-moz-range-track]:bg-retro-field [&::-moz-range-track]:shadow-retro-sunken [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-[22px] [&::-webkit-slider-thumb]:-mt-2 [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:rounded-none [&::-webkit-slider-thumb]:bg-retro-face [&::-webkit-slider-thumb]:shadow-retro-out [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-[22px] [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-none [&::-moz-range-thumb]:bg-retro-face [&::-moz-range-thumb]:shadow-retro-out mt-2.5" id="d-seek" type="range" min="0" max="232" value="84" data-seek>
<div class="flex flex-wrap items-center gap-1 mt-2.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-out enabled:active:shadow-retro-in font-normal min-w-10! px-2!" type="button" aria-label="Previous track"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="9" height="9" aria-hidden="true" focusable="false"><use href="#rg-prev"/></svg></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 min-w-10! px-2!" type="button" aria-label="Play" data-play><span data-icon="play"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="6" height="11" aria-hidden="true" focusable="false"><use href="#rg-play"/></svg></span><span data-icon="pause" hidden><svg class="block shrink-0 [shape-rendering:crispEdges]" width="8" height="11" aria-hidden="true" focusable="false"><use href="#rg-pause"/></svg></span></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 min-w-10! px-2!" type="button" aria-label="Stop" data-stop><svg class="block shrink-0 [shape-rendering:crispEdges]" width="9" height="9" aria-hidden="true" focusable="false"><use href="#rg-stop"/></svg></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 min-w-10! px-2!" type="button" aria-label="Next track"><svg class="block shrink-0 [shape-rendering:crispEdges]" width="9" height="9" aria-hidden="true" focusable="false"><use href="#rg-next"/></svg></button></div>
</div>

</section>
<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] absolute left-[var(--x)] top-[var(--y)] z-2 w-[var(--w)] max-w-[calc(100%-16px)] max-[760px]:static max-[760px]:w-auto max-[760px]:max-w-none" aria-labelledby="win-bin-t" id="win-bin" data-win style="--x:640px;--y:360px;--w:340px" hidden>
<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 data-idle:bg-[image:var(--retro-idle-bg)] data-idle:text-retro-idle-text data-drag:cursor-move data-drag:touch-none data-drag:select-none max-[760px]:data-drag:cursor-default" data-drag data-idle><button class="grid place-items-center size-[22px] m-0 p-0 border-0 bg-transparent text-inherit cursor-move focus-visible:outline-2 focus-visible:outline-dotted focus-visible:outline-current focus-visible:outline-offset-[-1px]" type="button" data-move aria-label="Move the Recycle Bin window" aria-describedby="move-hint"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg></button>
  <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="win-bin-t"><span class="min-w-0 truncate">Recycle Bin</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 Recycle Bin" data-min><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] ml-0.5" type="button" aria-label="Close Recycle Bin" data-close><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="flex items-start gap-3.5 px-3.5 pt-4 pb-2"><svg class="retro-i block shrink-0 size-8 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg><div class="grid gap-1.5 pt-1 [&_p]:m-0"><p>The Recycle Bin is empty.</p><p>Deleted files stay here until you empty it.</p></div></div>

</section>
</div>
<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">
<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="false" aria-controls="desk-start" 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="desk-start" hidden><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="#notes"><svg class="retro-i block shrink-0 size-6 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-doc"/></svg><span>Notes</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="#inbox"><svg class="retro-i block shrink-0 size-6 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-mail"/></svg><span>Inbox</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="#radio"><svg class="retro-i block shrink-0 size-6 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg><span>Nightdrive FM</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="#starfall"><svg class="retro-i block shrink-0 size-6 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-game"/></svg><span>Starfall Racer</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="false" data-task="win-mail"><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="true" data-task="win-notes"><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">ideas.txt — Notepad</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" data-task="win-radio"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-note"/></svg><span class="min-w-0 truncate">Nightdrive FM</span></button></li><li class="flex flex-[0_1_180px] min-w-0" hidden><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" data-task="win-bin"><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-bin"/></svg><span class="min-w-0 truncate">Recycle Bin</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"><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] retro-theme-input" 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)]">Synthwave</span></label><svg class="retro-i block shrink-0 size-4 [shape-rendering:crispEdges]" aria-hidden="true" focusable="false"><use href="#ri-speaker"/></svg><time data-desk-clock datetime="21:20">21:20</time></div>
</nav>
</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);
}
/* Synthwave scene: night sky, a striped sun and a neon grid floor (decoration only) */
@utility retro-synth-sky {
  background: radial-gradient(1.5px 1.5px at 12% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 33% 7%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 58% 18%,#ffd6f2 50%,transparent 51%),
    radial-gradient(1px 1px at 81% 9%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 92% 26%,#c9f9ff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 22% 31%,#fff 50%,transparent 51%),
    linear-gradient(180deg,#07001a 0,#1a0638 420px,#3d0b5c 640px,#14062b 640px);
}
@utility retro-synth-floor {
  position: absolute; z-index: -1; top: 640px; left: -60%; right: -60%; height: 900px; transform: perspective(380px) rotateX(62deg); transform-origin: top;
  background: repeating-linear-gradient(90deg,var(--retro-neon-pink) 0 2px,transparent 2px 64px),repeating-linear-gradient(0deg,var(--retro-neon-pink) 0 2px,transparent 2px 44px); opacity: .55;
  -webkit-mask: linear-gradient(#000,transparent 85%); mask: linear-gradient(#000,transparent 85%);
}
@utility retro-synth-sun {
  background: linear-gradient(var(--retro-sun-1),var(--retro-sun-2) 75%); box-shadow: 0 0 60px rgba(255,63,164,.45);
  -webkit-mask: linear-gradient(#000 50%,transparent 50% 54%,#000 54% 61%,transparent 61% 66%,#000 66% 72%,transparent 72% 78%,#000 78% 84%,transparent 84% 91%,#000 91%);
  mask: linear-gradient(#000 50%,transparent 50% 54%,#000 54% 61%,transparent 61% 66%,#000 66% 72%,transparent 72% 78%,#000 78% 84%,transparent 84% 91%,#000 91%);
}
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();
    });
  });
})();
// Player: Play / Pause swaps the button's name and glyph; while playing the seek bar moves once a second.
// The seek bar's time read-out and aria-valuetext follow it as you drag or use the arrow keys.
document.querySelectorAll('[data-retro-player]').forEach(function (p) {
  var seek = p.querySelector('[data-seek]'), out = p.querySelector('[data-time]'), play = p.querySelector('[data-play]');
  var state = p.querySelector('[data-state]'), timer = null;
  function fmt(s) { return String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0'); }
  function words(s) { return Math.floor(s / 60) + ' min ' + (s % 60) + ' s'; }
  function sync() {
    var s = +seek.value;
    out.textContent = fmt(s);
    seek.setAttribute('aria-valuetext', words(s) + ' of ' + words(+seek.max));
  }
  function setPlaying(on) {
    play.setAttribute('aria-label', on ? 'Pause' : 'Play');
    play.querySelector('[data-icon="play"]').hidden = on;
    play.querySelector('[data-icon="pause"]').hidden = !on;
    if (state) state.textContent = on ? 'Playing' : 'Paused';
    clearInterval(timer);
    if (on) timer = setInterval(function () { seek.value = Math.min(+seek.value + 1, +seek.max); sync(); if (+seek.value >= +seek.max) setPlaying(false); }, 1000);
  }
  seek.addEventListener('input', sync);
  play.addEventListener('click', function () { setPlaying(play.getAttribute('aria-label') === 'Play'); });
  var stop = p.querySelector('[data-stop]');
  if (stop) stop.addEventListener('click', function () { setPlaying(false); seek.value = 0; sync(); });
  sync();
});
// Desktop: drag a window by its title bar, or focus its icon button and use the arrow keys (Shift moves further).
// Clicking or focusing a window brings it to the front; the taskbar shows which one is active.
(function () {
  var desk = document.querySelector('[data-retro-desktop]'); if (!desk) return;
  var area = desk.querySelector('[data-desk-area]');
  var wins = Array.prototype.slice.call(desk.querySelectorAll('[data-win]'));
  var z = 10;
  function movable() { return window.matchMedia('(min-width: 761px)').matches; }
  function task(win) { return desk.querySelector('[data-task="' + win.id + '"]'); }
  function activate(win) {
    wins.forEach(function (w) {
      var on = w === win;
      w.querySelector('[data-drag]').toggleAttribute('data-idle', !on);
      var t = task(w); if (t) t.setAttribute('aria-pressed', String(on && !w.hidden));
    });
    win.style.zIndex = ++z;
  }
  function show(win) {
    win.hidden = false;
    var t = task(win); if (t) t.parentElement.hidden = false;
    activate(win); win.querySelector('[data-move]').focus();
  }
  function place(win, x, y) {
    x = Math.max(0, Math.min(x, area.clientWidth - win.offsetWidth));
    y = Math.max(0, Math.min(y, area.clientHeight - win.offsetHeight));
    win.style.left = x + 'px'; win.style.top = y + 'px';
  }
  wins.forEach(function (win) {
    var bar = win.querySelector('[data-drag]'), mover = win.querySelector('[data-move]');
    win.addEventListener('pointerdown', function () { activate(win); });
    win.addEventListener('focusin', function () { activate(win); });
    bar.addEventListener('pointerdown', function (e) {
      if (e.button !== 0 || !movable() || e.target.closest('button:not([data-move])')) return;
      var dx = e.clientX - win.offsetLeft, dy = e.clientY - win.offsetTop;
      bar.setPointerCapture(e.pointerId);
      function move(ev) { place(win, ev.clientX - dx, ev.clientY - dy); }
      function up() { bar.removeEventListener('pointermove', move); bar.removeEventListener('pointerup', up); }
      bar.addEventListener('pointermove', move); bar.addEventListener('pointerup', up);
    });
    mover.addEventListener('keydown', function (e) {
      var d = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key];
      if (!d || !movable()) return;
      e.preventDefault();
      var step = e.shiftKey ? 64 : 16;
      place(win, win.offsetLeft + d[0] * step, win.offsetTop + d[1] * step);
    });
    win.querySelector('[data-min]').addEventListener('click', function () {
      win.hidden = true;
      var t = task(win); t.setAttribute('aria-pressed', 'false'); t.focus();
    });
    win.querySelector('[data-close]').addEventListener('click', function () {
      win.hidden = true;
      var t = task(win); if (t) t.parentElement.hidden = true;
      var icon = desk.querySelector('[data-open="' + win.id + '"]'); if (icon) icon.focus();
    });
  });
  desk.querySelectorAll('[data-task]').forEach(function (t) {
    t.addEventListener('click', function () {
      var win = document.getElementById(t.getAttribute('data-task'));
      if (win.hidden) { show(win); return; }
      if (t.getAttribute('aria-pressed') === 'true') { win.hidden = true; t.setAttribute('aria-pressed', 'false'); return; }
      activate(win); win.querySelector('[data-move]').focus();
    });
  });
  desk.querySelectorAll('[data-open]').forEach(function (b) {
    b.addEventListener('click', function () { show(document.getElementById(b.getAttribute('data-open'))); });
  });
  var clock = desk.querySelector('[data-desk-clock]');
  function tick() {
    var d = new Date();
    clock.textContent = d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
    clock.setAttribute('datetime', clock.textContent);
  }
  if (clock) { tick(); setInterval(tick, 15000); }
})();

About this set

A complete retro desktop built from the kit. Desktop icons for Notes, Inbox, Nightdrive FM and the Recycle Bin open their windows. Each window can be dragged by its title bar with a mouse, pen or finger, and has a keyboard alternative: focus the small icon button at the left of the title bar and press the arrow keys to move it 16 pixels, or 64 with Shift, kept inside the desktop. Clicking or focusing a window brings it to the front, switches its title bar to the active gradient and the others to grey, and latches its taskbar button. Minimise hides a window to the taskbar, the taskbar button restores it, and Close removes it until its desktop icon opens it again. The windows hold an inbox table with unread mail marked in words, a notepad text area and a small music player. The taskbar has a Start menu, window buttons and a tray with the time and a Synthwave checkbox that re-themes the whole desktop through :has() with no JavaScript, adding the neon grid and sun. Under 761 pixels the windows stack in a column and dragging switches off.

What’s included

  • Windows that drag by the title bar and move with the arrow keys
  • Active and inactive title bars that follow focus
  • Minimise to the taskbar, restore and close with focus kept in place
  • Synthwave theme switch through :has() with no script
  • Stacks into one column on small screens

Accessibility

Every window is a section labelled by its title, and the move button is named, for example Move the Notes window, with a hidden hint about the arrow keys. Minimise, close and taskbar buttons have names, taskbar buttons report aria-pressed, and focus moves to the taskbar button or the desktop icon when a window is hidden. Focus is a 2px dotted rectangle. Dragging is never the only way to move a window.

Customise it

Set each window's start position and width with --x, --y and --w in its style attribute, and recolour the desktop with --retro-desk and --retro-desk-dither. Bootstrap uses its dropdown plugin for the Start menu; Tailwind uses data-idle: variants for inactive title bars.