/* Readable system UI typography, consistent across every desktop app. */
:root { --system-font:Tahoma,Arial,sans-serif; }
body { font-family:var(--system-font); font-size:14px; }
button,input,select,textarea,option { font-family:var(--system-font); }
.desktop-icon { line-height:1.25; }
.notepad-window textarea { line-height:1.5; }
@media(max-width:680px),(max-width:1000px) and (max-height:500px){
  .desktop-icon span { font-size:11px!important; }
}
/* Caption symbols are pixel shapes, independent of the font's text baseline. */
.window-controls button[data-win] { position:relative; font-size:0; line-height:normal; }
.window-controls button[data-win]::after { content:''; position:absolute; display:block; }
.window-controls [data-win=minimize]::after { width:8px; height:2px; left:3px; bottom:3px; background:#111; }
.window-controls [data-win=maximize]::after { width:9px; height:9px; left:2px; top:2px; border:1px solid #111; border-top-width:2px; }
.window-controls [data-win=close]::after { inset:2px; background:#111; clip-path:polygon(0 0,25% 0,50% 33%,75% 0,100% 0,65% 50%,100% 100%,75% 100%,50% 67%,25% 100%,0 100%,35% 50%); }
.window.maximized .window-controls [data-win=maximize]::after { width:7px; height:7px; left:1px; top:4px; background:var(--gray); }
.window.maximized .window-controls [data-win=maximize]::before { content:''; position:absolute; width:7px; height:7px; left:4px; top:1px; border:1px solid #111; border-top-width:2px; }
@media(max-width:680px),(max-width:1000px) and (max-height:500px){
  .window-controls [data-win=minimize]::after { left:7px; bottom:6px; width:10px; }
  .window-controls [data-win=maximize]::after { left:6px; top:6px; width:12px; height:12px; }
  .window-controls [data-win=close]::after { inset:5px; }
}