Retro Desktop & Taskbar in CSS, Bootstrap & Tailwind

<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>

/* ── 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}}

// 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); }
})();

<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>

/* ── 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}}

// 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); }
})();

<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>

/* ── 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%);
}

// 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); }
})();