* { box-sizing: border-box; }
html { min-width: 320px; background: #008080; }
body { margin: 0; min-height: 100vh; color: #111; font-family: "MS Sans Serif", Tahoma, Arial, sans-serif; }
.desktop { min-height: 100vh; display: grid; place-items: center; padding: 24px 20px 68px; background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.13) 0 4px, transparent 5px) 0 0/72px 72px, #008080; }
.window { width: min(940px, 100%); padding: 4px; background: #c0c0c0; border: 3px outset #fff; box-shadow: 15px 15px 0 rgba(0,0,0,.3); }
.titlebar { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 5px 4px 8px; color: #fff; background: linear-gradient(90deg, #000080, #1084d0); }
.title-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.title-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.window-buttons { display: flex; gap: 3px; }
.window-buttons i { width: 25px; height: 24px; display: grid; place-items: center; color: #111; font: normal 900 16px Arial, sans-serif; background: #c0c0c0; border: 2px outset #fff; }
.menu { min-height: 31px; display: flex; align-items: center; gap: 24px; padding: 0 10px; font-size: 12px; }
.hero { padding: 28px 22px 23px; color: #fff; text-align: center; background: repeating-linear-gradient(135deg, #7500a3 0 30px, #d30070 30px 60px, #e6b900 60px 90px, #007e91 90px 120px); border: 2px inset #eee; text-shadow: 2px 2px #111; }
.hero .eyebrow { margin: 0 0 5px; font: 900 10px "Courier New", monospace; letter-spacing: .28em; }
.hero h1 { margin: 0; font: 1000 clamp(28px, 7vw, 58px) "Courier New", monospace; letter-spacing: -.08em; }
.hero > p:last-child { margin: 8px 0 0; font-size: 14px; font-weight: 700; }
.program-group { margin: 8px 4px; padding: 10px; background: #fff; border: 2px inset #eee; }
.group-title { width: fit-content; margin: -24px 0 10px 5px; padding: 3px 8px; color: #000080; font-size: 12px; font-weight: 900; background: #fff; }
.program-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.program-card { min-height: 210px; display: grid; grid-template-columns: 130px 1fr; gap: 17px; align-items: center; padding: 18px; color: #111; text-decoration: none; background: #c0c0c0; border: 3px outset #fff; box-shadow: 3px 3px #777; }
.program-card:hover, .program-card:focus-visible { outline: 3px dotted #000; outline-offset: 3px; }
.program-card:active { border-style: inset; transform: translate(2px, 2px); box-shadow: 1px 1px #777; }
.icon-frame { position: relative; width: 126px; height: 126px; display: grid; place-items: center; border: 3px solid #111; box-shadow: inset 6px 6px rgba(255,255,255,.2), inset -6px -6px rgba(0,0,0,.25); }
.tadc-card .icon-frame { background: repeating-conic-gradient(#f6c900 0 25%, #d60075 0 50%, #127e9c 0 75%, #6920aa 0) 0 0/38px 38px; }
.paint-card .icon-frame { background: linear-gradient(135deg, #fff 0 47%, #9b9b9b 48% 52%, #e7e7e7 53%); }
.program-icon { font-size: 66px; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.3)); }
.shortcut { position: absolute; left: 4px; bottom: 4px; width: 28px; height: 28px; display: grid; place-items: center; color: #000080; font: normal 900 19px Arial; background: #fff; border: 2px solid #111; }
.program-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.file-name { color: #555; font: 900 9px "Courier New", monospace; }
.program-copy h2 { margin: 7px 0 8px; color: #000080; font: 900 clamp(19px, 3vw, 28px) "Courier New", monospace; line-height: 1; }
.program-copy p { min-height: 48px; margin: 0 0 14px; font-size: 12px; line-height: 1.45; }
.launch { width: fit-content; padding: 8px 10px; color: #fff; font: 900 10px "Courier New", monospace; background: #000080; border: 2px solid #111; }
.paint-card .launch { background: #007a76; }
.tip { display: flex; align-items: center; gap: 10px; margin: 12px 4px 8px; padding: 10px; background: #ffffc8; border: 2px outset #fff; }
.tip > span { font-size: 25px; }.tip p { margin: 0; font-size: 11px; line-height: 1.5; }.tip p span { font-family: "Courier New", monospace; font-weight: 900; }
.statusbar { display: grid; grid-template-columns: 1fr 150px; gap: 3px; }
.statusbar span { min-height: 26px; display: flex; align-items: center; padding: 4px 7px; font-size: 10px; border: 2px inset #eee; }
.taskbar { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; height: 46px; display: grid; grid-template-columns: auto minmax(170px, 310px) 1fr; gap: 5px; padding: 4px; background: #c0c0c0; border-top: 2px solid #fff; }
.start, .task-app, .clock { min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 12px; border: 2px outset #fff; }
.task-app { background: #ddd; border-style: inset; }.clock { justify-self: end; }
@media (max-width: 760px) { .desktop { display: block; padding: 8px 6px 58px; }.program-grid { grid-template-columns: 1fr; }.program-card { min-height: 170px; }.hero { padding-inline: 9px; } }
@media (max-width: 480px) { .menu { gap: 13px; }.program-card { grid-template-columns: 82px 1fr; gap: 11px; padding: 11px; }.icon-frame { width: 78px; height: 96px; }.program-icon { font-size: 42px; }.program-copy p { min-height: 0; }.taskbar { grid-template-columns: auto 1fr; }.clock { display: none; }.statusbar { grid-template-columns: 1fr auto; } }