/* ── 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)}
/* 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)}
/* Group box: an etched frame with the legend sitting in the line */
.retro-group{min-width:0;margin:0;padding:10px 12px 12px;border:1px solid var(--retro-shadow);border-radius:0;box-shadow:inset 1px 1px var(--retro-hilite),1px 1px var(--retro-hilite)}
.retro-group__legend{float:none;width:auto;margin:0;padding:0 4px;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font)}
/* Option buttons: radios behind raised faces; the chosen face is latched in, with a checkerboard fill */
.retro-seg{display:inline-flex;flex-wrap:wrap}
.retro-seg__opt{position:relative;display:inline-flex}
.retro-seg__face{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:32px;padding:5px 12px;
background:var(--retro-face);color:var(--retro-text);box-shadow:var(--retro-out);font:400 .875rem/1.2 var(--retro-font);cursor:pointer}
.retro-seg__opt input:checked+.retro-seg__face{box-shadow:var(--retro-in);background:var(--retro-dither);font-weight:700}
.retro-seg__opt input:focus-visible+.retro-seg__face{outline:2px dotted var(--retro-focus);outline-offset:-6px}
/* 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)}
/* 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)}}
/* Stat, content, profile and pricing windows */
.retro-stat__label{margin:0 0 6px;color:var(--retro-muted);font-size:.8125rem}
.retro-delta{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:.8125rem}
.retro-figure{display:block;margin:0 0 12px;padding:3px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-figure svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}
.retro-h{margin:0 0 6px;font:700 1.125rem/1.25 var(--retro-font)}
.retro-meta{margin:0 0 8px;color:var(--retro-muted);font-size:.8125rem}
.retro-profile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.retro-avatar{display:block;width:76px;height:76px;padding:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-avatar svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}
.retro-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:12px 0;padding:8px 10px;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken)}
.retro-dl dt{font-weight:700}
.retro-dl dd{margin:0}
.retro-price{display:flex;align-items:baseline;gap:8px;margin:2px 0 12px;font:400 2.75rem/1 var(--retro-mono)}
.retro-price span{color:var(--retro-muted);font:400 .8125rem/1.2 var(--retro-font)}
.retro-feats{display:grid;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.retro-feats li{display:flex;align-items:center;gap:8px}
.retro-badge{display:inline-block;padding:1px 6px;border:1px solid var(--retro-tip-line);background:var(--retro-tip);color:var(--retro-tip-text);font:700 .75rem/1.4 var(--retro-font)}
/* Synthwave scene: night sky, a striped sun and a neon grid floor, all decoration behind the windows */
.retro-synth{position:relative;isolation:isolate;overflow:hidden;padding:44px 28px 64px;color:var(--retro-text);
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)}
.retro-synth::before{content:"";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%)}
.retro-synth__sun{position:absolute;z-index:-1;top:330px;right:6%;width:300px;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%)}
.retro-synth__title{margin:0 0 6px;color:#fff1fb;font:400 clamp(2.4rem,7vw,4.6rem)/.95 var(--retro-mono);letter-spacing:.04em;text-shadow:0 0 18px rgba(255,63,164,.8),3px 3px 0 #7a1fa2}
.retro-synth__tag{margin:0;color:#c9f9ff;font:400 1.25rem/1.3 var(--retro-mono);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:600px){.retro-synth{padding:30px 16px 48px}.retro-synth__sun{width:200px;right:-40px;top:250px}}
/* Optional CRT scanlines: static, faint, and gone under reduced motion or more contrast */
.retro-crt{position:relative}
.retro-crt::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px)}
@media (prefers-reduced-motion:reduce),(prefers-contrast:more){.retro-crt::after{display:none}}
.retro-synth__inner{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.retro-mt{margin-top:14px}
.retro-actions--start{justify-content:flex-start}
.retro-seek{margin-top:10px}
.retro-btn--icon{min-width:40px;padding-inline:8px}
.retro-seg-set{min-width:0;margin:0;padding:0;border:0}
.retro-seg-legend{float:none;width:auto;margin:0 0 6px;padding:0;color:var(--retro-text);font:700 .875rem/1.3 var(--retro-font)}
@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();
});
/* ── 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)}
/* 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}
/* Group box: an etched frame with the legend sitting in the line */
.retro-group{min-width:0;margin:0;padding:10px 12px 12px;border:1px solid var(--retro-shadow);border-radius:0;box-shadow:inset 1px 1px var(--retro-hilite),1px 1px var(--retro-hilite)}
.retro-group__legend{float:none;width:auto;margin:0;padding:0 4px;color:var(--retro-text);font:400 .875rem/1.3 var(--retro-font)}
/* Option buttons: a .btn-group of .btn-check radios; the chosen one is latched in with a checkerboard fill */
.retro-seg .btn-retro{min-width:40px;padding-inline:12px}
.retro-seg>.btn-check:checked+.btn-retro{background:var(--retro-dither);font-weight:700}
/* 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)}
/* 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)}}
/* Stat, content, profile and pricing windows */
.retro-stat__label{margin:0 0 6px;color:var(--retro-muted);font-size:.8125rem}
.retro-delta{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:.8125rem}
.retro-figure{display:block;margin:0 0 12px;padding:3px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-figure svg{display:block;width:100%;height:auto;shape-rendering:crispEdges}
.retro-h{margin:0 0 6px;font:700 1.125rem/1.25 var(--retro-font)}
.retro-meta{margin:0 0 8px;color:var(--retro-muted);font-size:.8125rem}
.retro-profile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.retro-avatar{display:block;width:76px;height:76px;padding:6px;background:var(--retro-field);box-shadow:var(--retro-sunken)}
.retro-avatar svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}
.retro-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:12px 0;padding:8px 10px;background:var(--retro-field);color:var(--retro-field-text);box-shadow:var(--retro-sunken)}
.retro-dl dt{font-weight:700}
.retro-dl dd{margin:0}
.retro-price{display:flex;align-items:baseline;gap:8px;margin:2px 0 12px;font:400 2.75rem/1 var(--retro-mono)}
.retro-price span{color:var(--retro-muted);font:400 .8125rem/1.2 var(--retro-font)}
.retro-feats{display:grid;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.retro-feats li{display:flex;align-items:center;gap:8px}
.retro-badge{display:inline-block;padding:1px 6px;border:1px solid var(--retro-tip-line);background:var(--retro-tip);color:var(--retro-tip-text);font:700 .75rem/1.4 var(--retro-font)}
/* Synthwave scene: night sky, a striped sun and a neon grid floor, all decoration behind the windows */
.retro-synth{position:relative;isolation:isolate;overflow:hidden;padding:44px 28px 64px;color:var(--retro-text);
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)}
.retro-synth::before{content:"";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%)}
.retro-synth__sun{position:absolute;z-index:-1;top:330px;right:6%;width:300px;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%)}
.retro-synth__title{margin:0 0 6px;color:#fff1fb;font:400 clamp(2.4rem,7vw,4.6rem)/.95 var(--retro-mono);letter-spacing:.04em;text-shadow:0 0 18px rgba(255,63,164,.8),3px 3px 0 #7a1fa2}
.retro-synth__tag{margin:0;color:#c9f9ff;font:400 1.25rem/1.3 var(--retro-mono);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:600px){.retro-synth{padding:30px 16px 48px}.retro-synth__sun{width:200px;right:-40px;top:250px}}
/* Optional CRT scanlines: static, faint, and gone under reduced motion or more contrast */
.retro-crt{position:relative}
.retro-crt::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px)}
@media (prefers-reduced-motion:reduce),(prefers-contrast:more){.retro-crt::after{display:none}}
.retro-synth__inner{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.retro-mt{margin-top:14px}
.retro-actions--start{justify-content:flex-start}
.retro-seek{margin-top:10px}
.btn-retro.retro-btn--icon{--bs-btn-padding-x:8px;min-width:40px}
.retro-seg-set{min-width:0;margin:0;padding:0;border:0}
.retro-seg-legend{float:none;width:auto;margin:0 0 6px;padding:0;color:var(--retro-text);font:700 .875rem/1.3 var(--retro-font)}
.retro-synth h2{line-height:.95}
@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();
});
/* ── 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%);
}
@keyframes retro-marquee{from{translate:-100% 0}to{translate:340% 0}}
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();
});
About this set
The night variant of the kit: the same buttons, toolbars, fields, windows and widgets with data-retro=”synthwave” on a wrapper. One attribute swaps every token, so bevels light up in pink and violet, faces turn deep purple, title bars become a sunset gradient from orange to pink with dark text, fields turn into dark wells, LCD read-outs glow pink and keyboard focus becomes a cyan dotted rectangle. Behind the windows sits a decorative scene built only with CSS: a starry gradient sky, a striped sun drawn with a gradient and a mask, and a neon grid floor tilted with a 3D perspective transform. Optional CRT scanlines lie over the scene as a faint static overlay and disappear under reduced motion or when more contrast is requested. The set shows a title window with an arcade call to action, latched effect toggles, a gearbox option group, race option checkboxes and radios, a player setup form, stat windows with LCD read-outs, a loading bar, a small player and a fuel warning. Use it for game sites, music projects and anything that wants the 1980s look without giving up readable text.
What’s included
One attribute, data-retro="synthwave", re-themes every component
Sunset title bars with dark text and neon bevels with a soft glow
CSS-only sky, striped sun and perspective neon grid
Optional static CRT scanlines that switch off under reduced motion
Text on every surface at 5.9:1 or more
Accessibility
Text keeps its contrast in the night palette: light text on purple faces reaches 15:1, dark title text on the sunset gradient 5.9:1 or more, and pink LCD digits 7.6:1. Keyboard focus is a cyan dotted rectangle. The sky, sun, grid and scanlines are decoration behind opaque windows and hidden from assistive technology. Scanlines and the glow switch off when more contrast is requested, and scanlines also under reduced motion.
Customise it
Edit the synthwave block in the token sheet: --retro-face, --retro-hilite, --retro-light, --retro-title, --retro-title-2, --retro-lcd-text and --retro-focus, plus --retro-sun-1, --retro-sun-2 and --retro-neon-pink for the scene. Bootstrap reads the same tokens, and Tailwind adds retro-synth-sky, retro-synth-floor and retro-synth-sun utilities.
