/* ── 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}
/* Toolbar: flat icon buttons that show a thin bevel on hover and sink when pressed or latched */
.retro-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:3px 4px;background:var(--retro-face);box-shadow:var(--retro-thin-out)}
.retro-tool{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:34px;height:32px;margin:0;padding:0 7px;border:0;border-radius:0;
background:transparent;color:var(--retro-text);font:400 .875rem/1 var(--retro-font);cursor:pointer}
.retro-tool:hover{box-shadow:var(--retro-thin-out)}
.retro-tool:active{box-shadow:var(--retro-thin-in)}
.retro-tool:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:-4px}
.retro-tooltog{position:relative;display:inline-flex}
.retro-tooltog .retro-tool{font-size:1rem}
.retro-tooltog input:checked+.retro-tool{box-shadow:var(--retro-thin-in);background:var(--retro-dither)}
.retro-tooltog input:focus-visible+.retro-tool{outline:2px dotted var(--retro-focus);outline-offset:-4px}
.retro-sep{align-self:stretch;width:2px;margin:3px 4px;box-shadow:inset 1px 0 var(--retro-shadow),inset -1px 0 var(--retro-hilite)}
/* Window: a bevelled frame, a gradient title bar with labelled controls, a body and an optional status bar */
.retro-window{display:flex;flex-direction:column;min-width:0;padding:3px;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-window);font:400 .875rem/1.4 var(--retro-font)}
.retro-window :where(h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
.retro-titlebar{display:flex;align-items:center;gap:6px;min-height:28px;padding:2px 3px 2px 5px;background:var(--retro-title-bg);color:var(--retro-title-text)}
.retro-titlebar--idle{background:var(--retro-idle-bg);color:var(--retro-idle-text)}
.retro-titlebar__title{display:flex;align-items:center;gap:6px;flex:1;min-width:0;margin:0;color:inherit;font:700 .875rem/1.2 var(--retro-font)}
.retro-titlebar__title span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retro-titlebar__controls{display:flex;flex:none;gap:2px}
.retro-ctl{display:grid;place-items:center;width:24px;height:22px;margin:0;padding:0;border:0;border-radius:0;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-out);cursor:pointer}
.retro-ctl:active{box-shadow:var(--retro-in)}
.retro-ctl:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:-5px}
.retro-ctl--close{margin-left:2px}
.retro-window__body{padding:12px 10px}
.retro-statusbar{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}
.retro-statusbar>*{flex:1 1 auto;padding:3px 7px;box-shadow:var(--retro-thin-in);font-size:.8125rem}
/* Panel: a window face without a title bar, for grouping controls */
.retro-panel{min-width:0;padding:14px;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-window);font:400 .875rem/1.4 var(--retro-font)}
.retro-panel :where(h2,h3,p,ul,ol){margin:0}
.retro-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.retro-formrow{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);align-items:center;gap:6px 10px}
.retro-formrow .retro-label{margin:0}
@media (max-width:480px){.retro-formrow{grid-template-columns:minmax(0,1fr)}}
/* Fields: sunken wells. Errors add a red frame, an icon and a message tied to the field */
.retro-label{display:block;margin:0 0 4px;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font)}
.retro-input{display:block;width:100%;min-height:30px;margin:0;padding:5px 7px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);
box-shadow:var(--retro-sunken);font:400 .875rem/1.3 var(--retro-font)}
.retro-input::placeholder{color:var(--retro-muted);opacity:1}
.retro-input:focus{outline:0}
.retro-input:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-input:disabled{background:var(--retro-face);color:var(--retro-disabled)}
.retro-input[aria-invalid="true"]{box-shadow:var(--retro-sunken),0 0 0 2px var(--retro-danger)}
textarea.retro-input{min-height:96px;resize:vertical;scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-hint{margin:4px 0 0;color:var(--retro-muted);font-size:.8125rem}
.retro-error{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;color:var(--retro-danger);font-size:.8125rem;font-weight:700}
.retro-select{position:relative;display:block}
.retro-select select{appearance:none;cursor:pointer;padding-right:34px}
.retro-select::before{content:"";position:absolute;top:2px;right:2px;bottom:2px;width:24px;background:var(--retro-face);box-shadow:var(--retro-out);pointer-events:none}
.retro-select::after{content:"";position:absolute;top:50%;right:10px;width:7px;height:4px;margin-top:-2px;background:var(--retro-text);
-webkit-mask:var(--retro-arrow-mask) center/contain no-repeat;mask:var(--retro-arrow-mask) center/contain no-repeat;pointer-events:none}
.retro-select option,.retro-list option{background:var(--retro-field);color:var(--retro-field-text)}
.retro-list{display:block;width:100%;margin:0;padding:3px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);
font:400 .875rem/1.3 var(--retro-font);scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-list option{padding:3px 6px}
.retro-list option:checked{background:var(--retro-select) linear-gradient(var(--retro-select),var(--retro-select));color:var(--retro-select-text)}
.retro-list:focus{outline:0}
.retro-list:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
/* 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}
/* LCD read-out: a sunken black panel with bright monospace digits */
.retro-lcd{display:block;padding:8px 10px;background:var(--retro-lcd);color:var(--retro-lcd-text);box-shadow:var(--retro-sunken);font:400 1.75rem/1 var(--retro-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* Progress: chunked blocks in a sunken well. The marquee variant is for unknown durations */
.retro-progress{position:relative;height:24px;padding:4px;overflow:hidden;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-progress__bar{width:var(--retro-value,0%);height:100%;background:repeating-linear-gradient(90deg,var(--retro-accent) 0 9px,transparent 9px 11px)}
.retro-progress--marquee .retro-progress__bar{width:30%;animation:retro-marquee 2.6s steps(26) infinite}
@keyframes retro-marquee{from{translate:-100% 0}to{translate:340% 0}}
/* 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)}
/* Clock: an analogue face and an LCD read-out */
.retro-clock{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.retro-clock__face{display:block;width:124px;height:124px;padding:4px;border-radius:50%;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-clock__face svg{display:block;width:100%;height:100%}
.retro-clock__hand{transform-box:view-box;transform-origin:50px 50px}
.retro-clock__face .tick{fill:var(--retro-field-text)}
.retro-clock__face .hand{stroke:var(--retro-field-text);stroke-width:4;stroke-linecap:square}
.retro-clock__face .hand--s{stroke:var(--retro-danger);stroke-width:2}
@media (max-width:420px){.retro-clock{grid-template-columns:minmax(0,1fr);justify-items:start}}
/* Month calendar: a real table; today and release days are marked in text too */
.retro-calwrap{padding:3px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-cal{width:100%;border-collapse:collapse;caption-side:top;color:var(--retro-field-text);font:400 .875rem/1 var(--retro-font);text-align:center}
.retro-cal caption{padding:4px 4px 8px;color:var(--retro-field-text);font-weight:700;text-align:left}
.retro-cal th{padding:6px 0;background:var(--retro-select);color:var(--retro-select-text);font-weight:700}
.retro-cal td{padding:7px 0}
.retro-cal abbr{text-decoration:none}
.retro-cal .is-out{color:var(--retro-muted)}
.retro-cal .is-event{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.retro-cal [aria-current="date"]{background:var(--retro-select);color:var(--retro-select-text);outline:2px dotted var(--retro-select-text);outline-offset:-4px;font-weight:700}
/* 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}
.retro-btn--icon{min-width:40px;padding-inline:8px}
.retro-seek{margin-top:10px}
.retro-meter{display:flex;justify-content:space-between;margin:0 0 4px}
.retro-legend{margin:8px 0 0;color:var(--retro-muted);font-size:.8125rem}
@media (prefers-reduced-motion:reduce){[class*="retro-"],[class*="retro-"]::before,[class*="retro-"]::after{transition:none!important;animation:none!important}}
JavaScript
// Player: Play / Pause swaps the button's name and glyph; while playing the seek bar moves once a second.
// The seek bar's time read-out and aria-valuetext follow it as you drag or use the arrow keys.
document.querySelectorAll('[data-retro-player]').forEach(function (p) {
var seek = p.querySelector('[data-seek]'), out = p.querySelector('[data-time]'), play = p.querySelector('[data-play]');
var state = p.querySelector('[data-state]'), timer = null;
function fmt(s) { return String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0'); }
function words(s) { return Math.floor(s / 60) + ' min ' + (s % 60) + ' s'; }
function sync() {
var s = +seek.value;
out.textContent = fmt(s);
seek.setAttribute('aria-valuetext', words(s) + ' of ' + words(+seek.max));
}
function setPlaying(on) {
play.setAttribute('aria-label', on ? 'Pause' : 'Play');
play.querySelector('[data-icon="play"]').hidden = on;
play.querySelector('[data-icon="pause"]').hidden = !on;
if (state) state.textContent = on ? 'Playing' : 'Paused';
clearInterval(timer);
if (on) timer = setInterval(function () { seek.value = Math.min(+seek.value + 1, +seek.max); sync(); if (+seek.value >= +seek.max) setPlaying(false); }, 1000);
}
seek.addEventListener('input', sync);
play.addEventListener('click', function () { setPlaying(play.getAttribute('aria-label') === 'Play'); });
var stop = p.querySelector('[data-stop]');
if (stop) stop.addEventListener('click', function () { setPlaying(false); seek.value = 0; sync(); });
sync();
});
// Clock: set the hands and the read-out from the computer's time, once a second
document.querySelectorAll('[data-retro-clock]').forEach(function (c) {
var h = c.querySelector('[data-hand="h"]'), m = c.querySelector('[data-hand="m"]'), s = c.querySelector('[data-hand="s"]'), out = c.querySelector('[data-clock-text]'), date = c.querySelector('[data-clock-date]');
function tick() {
var d = new Date(), hh = d.getHours(), mm = d.getMinutes(), ss = d.getSeconds();
h.style.transform = 'rotate(' + ((hh % 12) * 30 + mm / 2) + 'deg)';
m.style.transform = 'rotate(' + (mm * 6 + ss / 10) + 'deg)';
s.style.transform = 'rotate(' + ss * 6 + 'deg)';
if (out) out.textContent = String(hh).padStart(2, '0') + ':' + String(mm).padStart(2, '0') + ':' + String(ss).padStart(2, '0');
if (date) date.textContent = d.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
}
tick(); setInterval(tick, 1000);
});
/* ── 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}
/* Toolbar: Bootstrap .btn-toolbar with flat .btn tools; latched toggles are .btn-check checkboxes */
.retro-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:3px 4px;background:var(--retro-face);box-shadow:var(--retro-thin-out)}
.btn.retro-tool{--bs-btn-padding-x:7px;--bs-btn-padding-y:0;--bs-btn-border-width:0;--bs-btn-border-radius:0;--bs-btn-font-family:var(--retro-font);--bs-btn-font-size:.875rem;--bs-btn-line-height:1;
--bs-btn-color:var(--retro-text);--bs-btn-bg:transparent;--bs-btn-hover-color:var(--retro-text);--bs-btn-hover-bg:transparent;--bs-btn-active-color:var(--retro-text);--bs-btn-active-bg:transparent;
display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:34px;height:32px}
.btn.retro-tool:hover{box-shadow:var(--retro-thin-out)}
.btn.retro-tool:active{box-shadow:var(--retro-thin-in)}
.btn.retro-tool:focus-visible,.btn-check:focus-visible+.retro-tool{box-shadow:none;outline:2px dotted var(--retro-focus);outline-offset:-4px}
label.retro-tool{font-size:1rem}
.btn-check:checked+.retro-tool,.btn-check:checked:focus-visible+.retro-tool{box-shadow:var(--retro-thin-in);background:var(--retro-dither)}
.retro-sep{align-self:stretch;width:2px;margin:3px 4px;box-shadow:inset 1px 0 var(--retro-shadow),inset -1px 0 var(--retro-hilite)}
/* Window: a bevelled frame, a gradient title bar with labelled controls, a body and an optional status bar */
.retro-window{display:flex;flex-direction:column;min-width:0;padding:3px;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-window);font:400 .875rem/1.4 var(--retro-font)}
.retro-window :where(h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
.retro-titlebar{display:flex;align-items:center;gap:6px;min-height:28px;padding:2px 3px 2px 5px;background:var(--retro-title-bg);color:var(--retro-title-text)}
.retro-titlebar--idle{background:var(--retro-idle-bg);color:var(--retro-idle-text)}
.retro-titlebar__title{display:flex;align-items:center;gap:6px;flex:1;min-width:0;margin:0;color:inherit;font:700 .875rem/1.2 var(--retro-font)}
.retro-titlebar__title span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retro-titlebar__controls{display:flex;flex:none;gap:2px}
.retro-ctl{display:grid;place-items:center;width:24px;height:22px;margin:0;padding:0;border:0;border-radius:0;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-out);cursor:pointer}
.retro-ctl:active{box-shadow:var(--retro-in)}
.retro-ctl:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:-5px}
.retro-ctl--close{margin-left:2px}
.retro-window__body{padding:12px 10px}
.retro-statusbar{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}
.retro-statusbar>*{flex:1 1 auto;padding:3px 7px;box-shadow:var(--retro-thin-in);font-size:.8125rem}
/* Windows: Bootstrap .card with the header as a title bar */
.card.retro-window{--bs-card-bg:var(--retro-face);--bs-card-color:var(--retro-text);--bs-card-border-width:0;--bs-card-border-radius:0;--bs-card-inner-border-radius:0;
--bs-card-spacer-y:12px;--bs-card-spacer-x:10px;--bs-card-cap-padding-y:2px;--bs-card-cap-padding-x:5px;--bs-card-cap-bg:transparent;--bs-card-cap-color:var(--retro-title-text)}
.card-header.retro-titlebar{border-bottom:0;padding:2px 3px 2px 5px}
.card-header.retro-titlebar:first-child{border-radius:0}
.card-footer.retro-statusbar{padding:0;border-top:0;background:transparent}
.card-footer.retro-statusbar:last-child{border-radius:0}
.card-footer.retro-statusbar{color:var(--retro-text)}
/* Panel: a window face without a title bar, for grouping controls */
.retro-panel{min-width:0;padding:14px;background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-window);font:400 .875rem/1.4 var(--retro-font)}
.retro-panel :where(h2,h3,p,ul,ol){margin:0}
.retro-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.retro-formrow{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);align-items:center;gap:6px 10px}
.retro-formrow .retro-label{margin:0}
@media (max-width:480px){.retro-formrow{grid-template-columns:minmax(0,1fr)}}
/* Fields: sunken wells. Errors add a red frame, an icon and a message tied to the field */
.retro-label{display:block;margin:0 0 4px;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font)}
.retro-input{display:block;width:100%;min-height:30px;margin:0;padding:5px 7px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);
box-shadow:var(--retro-sunken);font:400 .875rem/1.3 var(--retro-font)}
.retro-input::placeholder{color:var(--retro-muted);opacity:1}
.retro-input:focus{outline:0}
.retro-input:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
.retro-input:disabled{background:var(--retro-face);color:var(--retro-disabled)}
.retro-input[aria-invalid="true"]{box-shadow:var(--retro-sunken),0 0 0 2px var(--retro-danger)}
textarea.retro-input{min-height:96px;resize:vertical;scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-hint{margin:4px 0 0;color:var(--retro-muted);font-size:.8125rem}
.retro-error{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;color:var(--retro-danger);font-size:.8125rem;font-weight:700}
.retro-select{position:relative;display:block}
.retro-select select{appearance:none;cursor:pointer;padding-right:34px}
.retro-select::before{content:"";position:absolute;top:2px;right:2px;bottom:2px;width:24px;background:var(--retro-face);box-shadow:var(--retro-out);pointer-events:none}
.retro-select::after{content:"";position:absolute;top:50%;right:10px;width:7px;height:4px;margin-top:-2px;background:var(--retro-text);
-webkit-mask:var(--retro-arrow-mask) center/contain no-repeat;mask:var(--retro-arrow-mask) center/contain no-repeat;pointer-events:none}
.retro-select option,.retro-list option{background:var(--retro-field);color:var(--retro-field-text)}
.retro-list{display:block;width:100%;margin:0;padding:3px;border:0;border-radius:0;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken);
font:400 .875rem/1.3 var(--retro-font);scrollbar-color:var(--retro-shadow) var(--retro-face)}
.retro-list option{padding:3px 6px}
.retro-list option:checked{background:var(--retro-select) linear-gradient(var(--retro-select),var(--retro-select));color:var(--retro-select-text)}
.retro-list:focus{outline:0}
.retro-list:focus-visible{outline:2px dotted var(--retro-focus);outline-offset:2px}
/* 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)}
/* LCD read-out: a sunken black panel with bright monospace digits */
.retro-lcd{display:block;padding:8px 10px;background:var(--retro-lcd);color:var(--retro-lcd-text);box-shadow:var(--retro-sunken);font:400 1.75rem/1 var(--retro-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* Progress: Bootstrap .progress with a chunked bar */
.progress.retro-progress{--bs-progress-height:24px;--bs-progress-bg:var(--retro-field);--bs-progress-border-radius:0;--bs-progress-bar-bg:transparent;--bs-progress-bar-transition:none}
.progress.retro-progress{padding:4px;box-shadow:var(--retro-sunken)}
.retro-progress .progress-bar{background:repeating-linear-gradient(90deg,var(--retro-accent) 0 9px,transparent 9px 11px)}
.retro-progress--marquee .progress-bar{animation:retro-marquee 2.6s steps(26) infinite}
@keyframes retro-marquee{from{translate:-100% 0}to{translate:340% 0}}
/* 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)}
/* Clock: an analogue face and an LCD read-out */
.retro-clock{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.retro-clock__face{display:block;width:124px;height:124px;padding:4px;border-radius:50%;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-clock__face svg{display:block;width:100%;height:100%}
.retro-clock__hand{transform-box:view-box;transform-origin:50px 50px}
.retro-clock__face .tick{fill:var(--retro-field-text)}
.retro-clock__face .hand{stroke:var(--retro-field-text);stroke-width:4;stroke-linecap:square}
.retro-clock__face .hand--s{stroke:var(--retro-danger);stroke-width:2}
@media (max-width:420px){.retro-clock{grid-template-columns:minmax(0,1fr);justify-items:start}}
/* Month calendar: a real table; today and release days are marked in text too */
.retro-calwrap{padding:3px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-cal{width:100%;border-collapse:collapse;caption-side:top;color:var(--retro-field-text);font:400 .875rem/1 var(--retro-font);text-align:center}
.retro-cal caption{padding:4px 4px 8px;color:var(--retro-field-text);font-weight:700;text-align:left}
.retro-cal th{padding:6px 0;background:var(--retro-select);color:var(--retro-select-text);font-weight:700}
.retro-cal td{padding:7px 0}
.retro-cal abbr{text-decoration:none}
.retro-cal .is-out{color:var(--retro-muted)}
.retro-cal .is-event{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.retro-cal [aria-current="date"]{background:var(--retro-select);color:var(--retro-select-text);outline:2px dotted var(--retro-select-text);outline-offset:-4px;font-weight:700}
/* 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}
.btn-retro.retro-btn--icon{--bs-btn-padding-x:8px;min-width:40px}
.retro-seek{margin-top:10px}
.retro-meter{display:flex;justify-content:space-between;margin:0 0 4px}
.retro-legend{margin:8px 0 0;color:var(--retro-muted);font-size:.8125rem}
@media (prefers-reduced-motion:reduce){[class*="retro-"],[class*="retro-"]::before,[class*="retro-"]::after{transition:none!important;animation:none!important}}
JavaScript
// Player: Play / Pause swaps the button's name and glyph; while playing the seek bar moves once a second.
// The seek bar's time read-out and aria-valuetext follow it as you drag or use the arrow keys.
document.querySelectorAll('[data-retro-player]').forEach(function (p) {
var seek = p.querySelector('[data-seek]'), out = p.querySelector('[data-time]'), play = p.querySelector('[data-play]');
var state = p.querySelector('[data-state]'), timer = null;
function fmt(s) { return String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0'); }
function words(s) { return Math.floor(s / 60) + ' min ' + (s % 60) + ' s'; }
function sync() {
var s = +seek.value;
out.textContent = fmt(s);
seek.setAttribute('aria-valuetext', words(s) + ' of ' + words(+seek.max));
}
function setPlaying(on) {
play.setAttribute('aria-label', on ? 'Pause' : 'Play');
play.querySelector('[data-icon="play"]').hidden = on;
play.querySelector('[data-icon="pause"]').hidden = !on;
if (state) state.textContent = on ? 'Playing' : 'Paused';
clearInterval(timer);
if (on) timer = setInterval(function () { seek.value = Math.min(+seek.value + 1, +seek.max); sync(); if (+seek.value >= +seek.max) setPlaying(false); }, 1000);
}
seek.addEventListener('input', sync);
play.addEventListener('click', function () { setPlaying(play.getAttribute('aria-label') === 'Play'); });
var stop = p.querySelector('[data-stop]');
if (stop) stop.addEventListener('click', function () { setPlaying(false); seek.value = 0; sync(); });
sync();
});
// Clock: set the hands and the read-out from the computer's time, once a second
document.querySelectorAll('[data-retro-clock]').forEach(function (c) {
var h = c.querySelector('[data-hand="h"]'), m = c.querySelector('[data-hand="m"]'), s = c.querySelector('[data-hand="s"]'), out = c.querySelector('[data-clock-text]'), date = c.querySelector('[data-clock-date]');
function tick() {
var d = new Date(), hh = d.getHours(), mm = d.getMinutes(), ss = d.getSeconds();
h.style.transform = 'rotate(' + ((hh % 12) * 30 + mm / 2) + 'deg)';
m.style.transform = 'rotate(' + (mm * 6 + ss / 10) + 'deg)';
s.style.transform = 'rotate(' + ss * 6 + 'deg)';
if (out) out.textContent = String(hh).padStart(2, '0') + ':' + String(mm).padStart(2, '0') + ':' + String(ss).padStart(2, '0');
if (date) date.textContent = d.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
}
tick(); setInterval(tick, 1000);
});
/* ── Retro UI kit tokens (uiCookies) — identical in every set ─────────────
A classic desktop OS look: grey bevelled faces, navy title bars, sunken white fields on a dithered teal desktop.
Bevels are four 1px inset shadows built from --retro-hilite, --retro-light, --retro-shadow and --retro-dark,
so one change to a token re-colours every button, field and window in the kit. */
:root{
--retro-desk:#006e6e; /* desktop behind the windows */
--retro-desk-text:#ffffff; /* captions and icon labels on the desktop, 6.1:1 */
--retro-desk-dither:rgba(0,0,0,.22);
--retro-face:#c0c0c0; /* window, button and bar faces */
--retro-hilite:#ffffff; /* bevel: outer light edge */
--retro-light:#dfdfdf; /* bevel: inner light edge */
--retro-shadow:#808080; /* bevel: inner dark edge */
--retro-dark:#0a0a0a; /* bevel: outer dark edge */
--retro-text:#000000; /* text on faces, 11.5:1 */
--retro-muted:#3d3d3d; /* secondary text on faces, 6:1 */
--retro-field:#ffffff; /* inputs, lists and document areas */
--retro-field-text:#000000;
--retro-title:#000080; /* active title bar gradient, white text 6.3:1 or more */
--retro-title-2:#1060b0;
--retro-title-text:#ffffff;
--retro-idle:#5a5a5a; /* inactive title bar gradient, white text 5.3:1 or more */
--retro-idle-2:#6b6b6b;
--retro-idle-text:#ffffff;
--retro-select:#000080; /* highlighted menu items, rows and dates */
--retro-select-text:#ffffff;
--retro-link:#0000cc; /* 6.2:1 on faces */
--retro-danger:#8a0000; /* error text, 5.5:1 on faces */
--retro-tip:#ffffe1; /* tooltips and balloons */
--retro-tip-text:#000000;
--retro-tip-line:#000000;
--retro-lcd:#0b1a0b; /* LCD read-outs */
--retro-lcd-text:#4dff4d;
--retro-accent:#000080; /* progress chunks */
--retro-disabled:#808080; /* disabled text, embossed */
--retro-emboss:#ffffff;
--retro-dither-a:#ffffff; /* checkerboard behind a latched toggle */
--retro-dither-b:#c0c0c0;
--retro-focus:#000000; /* dotted focus rectangle */
--retro-glow:0 0 #0000; /* the synthwave theme adds a neon glow to windows */
--retro-neon-pink:#ff3fa4;--retro-neon-cyan:#00e5ff;--retro-sun-1:#ffd23f;--retro-sun-2:#ff3fa4;
--retro-font:Tahoma,"Microsoft Sans Serif","MS Sans Serif",Geneva,Verdana,"Segoe UI",sans-serif;
--retro-mono:"VT323","Fixedsys","Lucida Console",Consolas,Menlo,"Courier New",ui-monospace,monospace;
}
/* Synthwave 80s night theme: data-retro="synthwave" on any wrapper, or a checked .retro-theme-input inside a
[data-retro] element. :is() is a forgiving list, so browsers without :has() still apply the attribute. */
[data-retro]:is([data-retro="synthwave"],:has(.retro-theme-input:checked)){
--retro-desk:#14062b;--retro-desk-text:#fff1fb;--retro-desk-dither:rgba(255,63,164,.16);
--retro-face:#261047;--retro-hilite:#ff6ec7;--retro-light:#a05cff;--retro-shadow:#0d0420;--retro-dark:#000000;
--retro-text:#fff1fb;--retro-muted:#dcc6ff;--retro-field:#0e0322;--retro-field-text:#fff1fb;
--retro-title:#ff8a3d;--retro-title-2:#ff3fa4;--retro-title-text:#1b0030;
--retro-idle:#4a2d6e;--retro-idle-2:#5c3a85;--retro-idle-text:#f3e8ff;
--retro-select:#00e5ff;--retro-select-text:#14062b;--retro-link:#7cf3ff;--retro-danger:#ff8fa3;
--retro-tip:#2b1352;--retro-tip-text:#fff1fb;--retro-tip-line:#ff6ec7;
--retro-lcd:#07010f;--retro-lcd-text:#ff5fd2;--retro-accent:#ff3fa4;
--retro-disabled:#8a72b0;--retro-emboss:transparent;--retro-dither-a:#3d1a6e;--retro-dither-b:#261047;
--retro-focus:#5ff4ff;--retro-glow:0 0 0 1px rgba(255,63,164,.45),0 0 22px rgba(255,63,164,.35);color-scheme:dark}
/* More contrast requested: secondary text turns full strength and the glow goes */
@media (prefers-contrast:more){:root,[data-retro],[data-retro]:is([data-retro="synthwave"],:has(.retro-theme-input:checked)){--retro-muted:var(--retro-text);--retro-glow:0 0 #0000}}
:root,[data-retro]{
--retro-out:inset -1px -1px var(--retro-dark),inset 1px 1px var(--retro-hilite),inset -2px -2px var(--retro-shadow),inset 2px 2px var(--retro-light);
--retro-in:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-dark),inset -2px -2px var(--retro-light),inset 2px 2px var(--retro-shadow);
--retro-out-default:inset 0 0 0 1px var(--retro-dark),inset -2px -2px var(--retro-dark),inset 2px 2px var(--retro-hilite),inset -3px -3px var(--retro-shadow),inset 3px 3px var(--retro-light);
--retro-in-default:inset 0 0 0 1px var(--retro-dark),inset 2px 2px var(--retro-shadow),inset -2px -2px var(--retro-shadow);
--retro-sunken:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-shadow),inset -2px -2px var(--retro-light),inset 2px 2px var(--retro-dark);
--retro-frame:inset -1px -1px var(--retro-dark),inset 1px 1px var(--retro-light),inset -2px -2px var(--retro-shadow),inset 2px 2px var(--retro-hilite);
--retro-window:var(--retro-frame),var(--retro-glow);
--retro-thin-in:inset -1px -1px var(--retro-hilite),inset 1px 1px var(--retro-shadow);
--retro-thin-out:inset -1px -1px var(--retro-shadow),inset 1px 1px var(--retro-hilite);
--retro-title-bg:linear-gradient(90deg,var(--retro-title),var(--retro-title-2));
--retro-idle-bg:linear-gradient(90deg,var(--retro-idle),var(--retro-idle-2));
--retro-dither:repeating-conic-gradient(var(--retro-dither-a) 0 25%,var(--retro-dither-b) 0 50%) 0 0/2px 2px;
--retro-wallpaper:radial-gradient(var(--retro-desk-dither) 1px,transparent 1.5px) 0 0/4px 4px,var(--retro-desk);
--retro-check-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%207'%20shape-rendering='crispEdges'%3E%3Crect%20x='6'%20y='0'%20width='1'%20height='1'%20fill='%23000'/%3E%3Crect%20x='5'%20y='1'%20width='2'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23000'/%3E%3Crect%20x='4'%20y='2'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='3'%20width='2'%20height='1'%20fill='%23000'/%3E%3Crect%20x='3'%20y='3'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='0'%20y='4'%20width='5'%20height='1'%20fill='%23000'/%3E%3Crect%20x='1'%20y='5'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='2'%20y='6'%20width='1'%20height='1'%20fill='%23000'/%3E%3C/svg%3E");
--retro-arrow-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%204'%20shape-rendering='crispEdges'%3E%3Crect%20x='0'%20y='0'%20width='7'%20height='1'%20fill='%23000'/%3E%3Crect%20x='1'%20y='1'%20width='5'%20height='1'%20fill='%23000'/%3E%3Crect%20x='2'%20y='2'%20width='3'%20height='1'%20fill='%23000'/%3E%3Crect%20x='3'%20y='3'%20width='1'%20height='1'%20fill='%23000'/%3E%3C/svg%3E");
}
[data-retro]{color:var(--retro-text);font-family:var(--retro-font)}
/* The tokens above, exposed as Tailwind utilities: bg-retro-face, text-retro-text, shadow-retro-out,
shadow-retro-in, shadow-retro-sunken, shadow-retro-window, outline-retro-focus, font-retro, font-retro-mono… */
@theme inline {
--color-retro-desk: var(--retro-desk); --color-retro-desk-text: var(--retro-desk-text); --color-retro-face: var(--retro-face);
--color-retro-hilite: var(--retro-hilite); --color-retro-light: var(--retro-light); --color-retro-shadow: var(--retro-shadow); --color-retro-dark: var(--retro-dark);
--color-retro-text: var(--retro-text); --color-retro-muted: var(--retro-muted); --color-retro-field: var(--retro-field); --color-retro-field-text: var(--retro-field-text);
--color-retro-title-text: var(--retro-title-text); --color-retro-idle-text: var(--retro-idle-text);
--color-retro-select: var(--retro-select); --color-retro-select-text: var(--retro-select-text); --color-retro-link: var(--retro-link); --color-retro-danger: var(--retro-danger);
--color-retro-tip: var(--retro-tip); --color-retro-tip-text: var(--retro-tip-text); --color-retro-tip-line: var(--retro-tip-line);
--color-retro-lcd: var(--retro-lcd); --color-retro-lcd-text: var(--retro-lcd-text); --color-retro-accent: var(--retro-accent);
--color-retro-disabled: var(--retro-disabled); --color-retro-focus: var(--retro-focus);
--color-retro-neon-pink: var(--retro-neon-pink); --color-retro-neon-cyan: var(--retro-neon-cyan);
--shadow-retro-out: var(--retro-out); --shadow-retro-in: var(--retro-in); --shadow-retro-default: var(--retro-out-default); --shadow-retro-default-in: var(--retro-in-default);
--shadow-retro-sunken: var(--retro-sunken); --shadow-retro-frame: var(--retro-frame); --shadow-retro-window: var(--retro-window);
--shadow-retro-thin-in: var(--retro-thin-in); --shadow-retro-thin-out: var(--retro-thin-out);
--font-retro: var(--retro-font); --font-retro-mono: var(--retro-mono);
}
JavaScript
// 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();
});
// Clock: set the hands and the read-out from the computer's time, once a second
document.querySelectorAll('[data-retro-clock]').forEach(function (c) {
var h = c.querySelector('[data-hand="h"]'), m = c.querySelector('[data-hand="m"]'), s = c.querySelector('[data-hand="s"]'), out = c.querySelector('[data-clock-text]'), date = c.querySelector('[data-clock-date]');
function tick() {
var d = new Date(), hh = d.getHours(), mm = d.getMinutes(), ss = d.getSeconds();
h.style.transform = 'rotate(' + ((hh % 12) * 30 + mm / 2) + 'deg)';
m.style.transform = 'rotate(' + (mm * 6 + ss / 10) + 'deg)';
s.style.transform = 'rotate(' + ss * 6 + 'deg)';
if (out) out.textContent = String(hh).padStart(2, '0') + ':' + String(mm).padStart(2, '0') + ':' + String(ss).padStart(2, '0');
if (date) date.textContent = d.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
}
tick(); setInterval(tick, 1000);
});
About this set
Desktop accessories for a retro interface. A media player window has a green LCD screen with the track, its state, the elapsed time and a decorative level meter, a seek trackbar, previous, play, stop and next buttons, a volume trackbar and a playlist with the current track highlighted. Play swaps its name and glyph to Pause and moves the seek bar once a second, and the time read-out and aria-valuetext follow the seek bar as you drag it or use the arrow keys. A Date/Time window has an analogue face drawn in SVG and an LCD clock, both set from the computer’s time each second, with today’s date. A month calendar for October 2026 is a real table with abbreviated weekday headers; today is highlighted and marked with hidden text, and event days are underlined and named in hidden text. A resource meter shows three labelled progress bars. The file explorer window pairs a folder tree made of details and summary elements, with plus and minus boxes and dotted guide lines, with a table of files whose rows highlight on hover and focus, under a toolbar and above a status bar.
What’s included
Media player with an LCD screen, seek and volume trackbars and a playlist
Analogue and LCD clock set from the computer's time
Month calendar as a real table with today and events in words
Folder tree from details and summary with plus and minus boxes
File table that highlights the hovered or focused row
Accessibility
Transport buttons have names, Play reports its state through its name, and the seek bar keeps aria-valuetext in words. The clock face is decorative and the time is text; the calendar is a captioned table with today marked by aria-current and hidden text. The folder tree is a labelled nav of native details elements, and the file table has a hidden caption and column headers. Focus is a 2px dotted rectangle.
Customise it
Change --retro-lcd and --retro-lcd-text for the screens, --retro-select for highlighted rows and today, and --retro-field for panes. Bootstrap uses .form-range and .progress with the kit's own player, clock, calendar and explorer rules, and Tailwind uses bg-retro-lcd, text-retro-lcd-text and shadow-retro-sunken.
