/* Generated by build.py. One token set per decade; a page picks its
   set with <html data-decade="...">, and any element inside a page can
   carry the attribute too. Nothing else changes between decades.

   :root first: the neutral set for a page that is no decade (the site
   listing). A record-shop divider card: grey board, ink, one blue. */
:root {
	color-scheme: light;
	--bg: #F1EFEA; --bg-2: #E4E0D6; --tx: #1C1B19; --tx-2: #55524B;
	--primary: #1F4FA3; --accent: #1C1B19; --accent-ink: #F1EFEA; --decor: #1F4FA3;
	--ui: #C5BFB0; --ui-strong: #1C1B19; --focus: #1F4FA3; --danger: #9E1B1B;
	--font-display: Georgia, 'Times New Roman', serif;
	--font-body: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-utility: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	--display-weight: 400; --display-tracking: 0;
	--radius: 0; --radius-btn: 0; --rule-width: 2px; --shadow: none;
	/* The same neutral colours under stable names, for an element that
	   borrows a decade's face and accent but keeps the page's own text
	   colours (a decade group on the listing). */
	--neutral-bg: #F1EFEA; --neutral-bg-2: #E4E0D6; --neutral-tx: #1C1B19; --neutral-tx-2: #55524B;
	--neutral-primary: #1F4FA3; --neutral-ui: #C5BFB0;
}

/* 1960s: Pop art and the psychedelic poster: a fat display face, a Swiss grotesque for the reading, and hot magenta, orange and acid green on cream. */
[data-decade="60s"] {
	color-scheme: light;
	--bg: #FFF4D6;
	--bg-2: #FFE3A0;
	--tx: #1F1A3D;
	--tx-2: #5C5478;
	--primary: #A8105F;
	--accent: #FF6A13;
	--accent-ink: #1F1A3D;
	--decor: #7CB518;
	--ui: #E6B6D8;
	--ui-strong: #1F1A3D;
	--focus: #1F1A3D;
	--danger: #B3001B;
	--font-display: 'Bowlby One', 'Arial Black', Impact, sans-serif;
	--font-body: Archivo, Helvetica, Arial, sans-serif;
	--font-utility: Archivo, Helvetica, Arial, sans-serif;
	--display-weight: 400;
	--display-tracking: 0;
	--radius: 1.5rem;
	--radius-btn: 999px;
	--rule-width: 3px;
	--shadow: none;
	--tv-cabinet: linear-gradient(rgba(255,255,255,0.08), rgba(0,0,0,0.2)), repeating-linear-gradient(90deg, #6B4423 0 7px, #7A5030 7px 11px, #5C3A1E 11px 16px);
	--tv-bezel: 6%; --tv-radius: 1.25rem 1.25rem 0.5rem 0.5rem; --tv-shadow: 0 12px 24px rgba(0,0,0,0.25);
	--tv-aspect: 4 / 3; --tv-screen: radial-gradient(ellipse at center, #3A3A3A, #0C0C0C 75%); --tv-screen-radius: 14% / 18%;
	--tv-glass: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.22), transparent 55%);
	--tv-scanlines: repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 3px);
	--tv-ident-tx: #F2F2F2; --tv-ident-font: var(--font-body);
	--tv-knob: radial-gradient(circle at 35% 35%, #D9CFBF, #8A7A63 70%);
	--tv-stand: #3B2412; --tv-stand-width: 72%; --tv-stand-height: 2.4rem;
	--tv-stand-clip: polygon(6% 0, 94% 0, 100% 100%, 90% 100%, 85% 16%, 15% 16%, 10% 100%, 0 100%);
}
[data-decade="60s"] .btn { border-width: 3px; }
[data-decade="60s"] .btn-primary { box-shadow: 4px 4px 0 var(--decor); }
[data-decade="60s"] .btn-primary:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--decor); }
[data-decade="60s"] { --rule-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 24'%3E%3Cpath d='M0 12 Q20 0 40 12 T80 12' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); --rule-mask-size: 80px 24px; --rule-height: 2.6rem; --rule-span-height: 24px; --rule-span-width: 100%; --rule-left-2: 0; --rule-left-3: 0; --rule-shift-2: 20px, 9px; --rule-shift-3: 40px, 18px; }
[data-decade="60s"] .deco-a { right: -7rem; top: -6rem; width: 26rem; height: 26rem; border-radius: 50%; background: repeating-radial-gradient(circle, var(--accent) 0 2.2rem, var(--bg) 2.2rem 3.1rem, var(--decor) 3.1rem 5.2rem, var(--bg) 5.2rem 6.1rem, var(--primary) 6.1rem 8.2rem, var(--bg) 8.2rem 9.1rem); }
[data-decade="60s"] .deco-b { right: 5rem; bottom: -7rem; width: 15rem; height: 15rem; border-radius: 50%; background: var(--primary); }
[data-decade="60s"] .deco-c { right: 19rem; top: 1rem; width: 4rem; height: 4rem; border-radius: 50%; background: var(--decor); }


/* 1970s: Earth tones and disco geometry: harvest gold, avocado and burnt orange on parchment, a rounded geometric display face and a soft rounded body face. */
[data-decade="70s"] {
	color-scheme: light;
	--bg: #F4E8CC;
	--bg-2: #E9D59F;
	--tx: #3A2211;
	--tx-2: #6B4A28;
	--primary: #8F3409;
	--accent: #D89A1D;
	--accent-ink: #3A2211;
	--decor: #5F6E2B;
	--ui: #C9A96A;
	--ui-strong: #3A2211;
	--focus: #3A2211;
	--danger: #9E1B1B;
	--font-display: Righteous, 'Trebuchet MS', sans-serif;
	--font-body: Nunito, 'Segoe UI', Verdana, sans-serif;
	--font-utility: Nunito, 'Segoe UI', Verdana, sans-serif;
	--display-weight: 400;
	--display-tracking: 0.01em;
	--radius: 0.75rem;
	--radius-btn: 999px;
	--rule-width: 2px;
	--shadow: none;
	--tv-cabinet: linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.22)), repeating-linear-gradient(0deg, #8B5A2B 0 5px, #9C6A36 5px 8px, #7A4B22 8px 13px);
	--tv-bezel: 5%; --tv-radius: 0.75rem; --tv-shadow: 0 0 0 6px #D8D4C8, 0 0 0 7px #8F8B80, 0 14px 24px rgba(0,0,0,0.25);
	--tv-aspect: 4 / 3; --tv-screen: radial-gradient(ellipse at center, #1B1B1B, #000 80%); --tv-screen-radius: 10% / 13%;
	--tv-glass: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.16), transparent 55%);
	--tv-scanlines: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
	--tv-ident-tx: #FFF6DD; --tv-ident-bg: linear-gradient(transparent 50%, rgba(0,0,0,0.65));
	--tv-knob: radial-gradient(circle at 35% 35%, #F0EAD6, #A89E86 70%);
	--tv-stand: #5B3A1E; --tv-stand-width: 84%; --tv-stand-height: 1.5rem;
}
[data-decade="70s"] .tv-ident::before { content: ""; position: absolute; inset: 0 0 45% 0; background: repeating-linear-gradient(90deg, #C0C0C0 0 12.5%, #C0C000 0 25%, #00C0C0 0 37.5%, #00C000 0 50%, #C000C0 0 62.5%, #C00000 0 75%, #0000C0 0 87.5%, #101010 0 100%); z-index: -1; }
[data-decade="70s"] .btn { border-color: var(--tx); color: var(--tx); }
[data-decade="70s"] .btn-primary { background: linear-gradient(rgba(255,255,255,0.3), rgba(0,0,0,0.06)), var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 0 rgba(0,0,0,0.25); }
[data-decade="70s"] { --rule-height: 1.7rem; --rule-span-height: 0.5rem; --rule-radius: 999px; --rule-span-width: 100%; --rule-left-2: 0; --rule-left-3: 0; --rule-shift-2: 0, 0.6rem; --rule-shift-3: 0, 1.2rem; }
[data-decade="70s"] .rule3 span:nth-child(2) { width: 86%; }
[data-decade="70s"] .rule3 span:nth-child(3) { width: 72%; }
[data-decade="70s"] .deco-a { right: -12rem; top: -9rem; width: 34rem; height: 34rem; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 7rem, var(--accent) 7rem 9rem, var(--decor) 9rem 11rem, var(--primary) 11rem 13rem, transparent 13rem 17rem); }
[data-decade="70s"] .deco-b { right: -14rem; bottom: 2rem; width: 36rem; height: 2.4rem; border-radius: 999px; background: var(--accent); transform: rotate(-22deg); transform-origin: right center; }
[data-decade="70s"] .deco-c { right: 18rem; bottom: 1rem; width: 5rem; height: 5rem; border-radius: 50%; background: var(--decor); }


/* 1980s: Neon and Memphis: a dark indigo ground, cyan, hot pink and yellow, a neon-tube display face, a geometric sans and hard square shadows. */
[data-decade="80s"] {
	color-scheme: dark;
	--bg: #120A2E;
	--bg-2: #211449;
	--tx: #F4EEFF;
	--tx-2: #C3B7E6;
	--primary: #5CE6FF;
	--accent: #FF4FA6;
	--accent-ink: #120A2E;
	--decor: #FFE14D;
	--ui: #4D3B94;
	--ui-strong: #C3B7E6;
	--focus: #FFE14D;
	--danger: #FF7B7B;
	--font-display: Monoton, 'Arial Black', sans-serif;
	--font-body: Montserrat, 'Century Gothic', 'Avant Garde', Arial, sans-serif;
	--font-utility: Montserrat, 'Century Gothic', Arial, sans-serif;
	--display-weight: 400;
	--display-tracking: 0.04em;
	--radius: 0;
	--radius-btn: 0;
	--rule-width: 2px;
	--shadow: 6px 6px 0 var(--decor);
	--tv-cabinet: linear-gradient(#2A2A2E, #141416);
	--tv-bezel: 5%; --tv-radius: 0.4rem; --tv-shadow: 0 0 0 2px #8F8F98, 10px 10px 0 var(--decor);
	--tv-aspect: 4 / 3; --tv-screen: linear-gradient(#1E1EB8, #0B0B6E); --tv-screen-radius: 4% / 5%;
	--tv-glass: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.1), transparent 55%);
	--tv-scanlines: repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0 2px, transparent 2px 4px);
	--tv-ident-tx: #FFFFFF; --tv-ident-font: ui-monospace, 'Courier New', Courier, monospace;
	--tv-knob: linear-gradient(#4A4A50, #222226); --tv-knob-radius: 2px;
	--tv-stand-display: none;
}
[data-decade="80s"] .tv-knob { width: 55%; aspect-ratio: 1.6; }
[data-decade="80s"] .tv-knob::after { display: none; }
[data-decade="80s"] .tv-controls::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #FF2A2A; box-shadow: 0 0 8px #FF2A2A; }
[data-decade="80s"] .tv-ident-title::before { content: "PLAY \25B6  "; font-family: ui-monospace, 'Courier New', monospace; font-size: 1rem; display: block; margin-bottom: 0.5rem; }
[data-decade="80s"] .btn { letter-spacing: 0.06em; box-shadow: 5px 5px 0 var(--decor); }
[data-decade="80s"] .btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--decor); filter: none; }
[data-decade="80s"] { --rule-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 16 L10 4 L20 16 L30 4 L40 16' fill='none' stroke='black' stroke-width='5' stroke-linejoin='miter'/%3E%3C/svg%3E"); --rule-mask-size: 40px 20px; --rule-height: 3rem; --rule-span-height: 20px; --rule-span-width: 100%; --rule-left-2: 0; --rule-left-3: 0; --rule-shift-2: 0, 0.75rem; --rule-shift-3: 0, 1.5rem; }
[data-decade="80s"] .deco-a { right: 4rem; top: -1rem; width: 14rem; height: 12rem; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--accent); }
[data-decade="80s"] .deco-b { right: -4rem; bottom: -2rem; width: 22rem; height: 12rem; background: radial-gradient(circle, var(--primary) 2px, transparent 2.6px); background-size: 14px 14px; }
[data-decade="80s"] .deco-c { right: 5rem; bottom: 2rem; width: 12rem; height: 2.5rem; background: var(--decor); -webkit-mask-image: var(--rule-mask); mask-image: var(--rule-mask); -webkit-mask-size: 40px 20px; mask-size: 40px 20px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; transform: rotate(-14deg); }


/* 1990s: The photocopied zine: Impact-style headlines, a serif body that ships with every computer, typewriter captions, and plum, mustard and olive on grey paper. */
[data-decade="90s"] {
	color-scheme: light;
	--bg: #ECE9DF;
	--bg-2: #DBD6C5;
	--tx: #151515;
	--tx-2: #4E4A43;
	--primary: #6E1C47;
	--accent: #C9A227;
	--accent-ink: #151515;
	--decor: #556B2F;
	--ui: #B5AE9E;
	--ui-strong: #151515;
	--focus: #6E1C47;
	--danger: #9E1B1B;
	--font-display: Anton, Impact, 'Arial Narrow', sans-serif;
	--font-body: Georgia, 'Times New Roman', Times, serif;
	--font-utility: 'Courier Prime', 'Courier New', Courier, monospace;
	--display-weight: 400;
	--display-tracking: 0.01em;
	--radius: 0;
	--radius-btn: 0;
	--rule-width: 3px;
	--shadow: none;
	--tv-cabinet: linear-gradient(#D2D2CC, #A6A69F);
	--tv-bezel: 6%; --tv-radius: 1.5rem 1.5rem 0.6rem 0.6rem; --tv-shadow: 0 10px 20px rgba(0,0,0,0.25), inset 0 -6px 0 rgba(0,0,0,0.15);
	--tv-aspect: 4 / 3; --tv-screen: radial-gradient(ellipse at center, #2B2B2B, #050505 85%); --tv-screen-radius: 9% / 12%;
	--tv-glass: radial-gradient(ellipse at 25% 15%, rgba(255,255,255,0.18), transparent 50%);
	--tv-scanlines: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
	--tv-ident-tx: #9CFF9C; --tv-ident-font: ui-monospace, 'Courier New', Courier, monospace;
	--tv-knob: radial-gradient(circle at 35% 35%, #E6E6E0, #8E8E88 70%); --tv-controls-width: 12%;
	--tv-stand: #2B2B2B; --tv-stand-width: 100%; --tv-stand-height: 2rem;
}
[data-decade="90s"] .tv-stand { border-radius: 0 0 0.6rem 0.6rem; position: relative; }
[data-decade="90s"] .tv-stand::after { content: ""; position: absolute; left: 8%; top: 40%; width: 50%; height: 14%; background: #0A0A0A; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
[data-decade="90s"] .tv-ident-title::before { content: "VIDEO 1"; display: block; font-size: 1rem; margin-bottom: 0.5rem; }
[data-decade="90s"] .tv-ident::after { content: ""; position: absolute; left: 0; right: 0; top: 18%; height: 3%; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 5px); }
[data-decade="90s"] .btn { border: 3px solid var(--tx); color: var(--tx); box-shadow: 4px 4px 0 var(--tx); }
[data-decade="90s"] .btn:hover { background: var(--tx); color: var(--bg); filter: none; }
[data-decade="90s"] { --rule-mask: repeating-linear-gradient(90deg, black 0 18px, transparent 18px 27px); --rule-height: 1.9rem; --rule-span-height: 0.45rem; --rule-span-width: 100%; --rule-left-2: 0; --rule-left-3: 0; --rule-shift-2: 0.4rem, 0.65rem; --rule-shift-3: -0.3rem, 1.3rem; }
[data-decade="90s"] .rule3 span:nth-child(1) { transform: rotate(-0.5deg); }
[data-decade="90s"] .rule3 span:nth-child(2) { transform: translate(var(--rule-shift-2)) rotate(0.4deg); }
[data-decade="90s"] .rule3 span:nth-child(3) { transform: translate(var(--rule-shift-3)) rotate(-0.3deg); }
[data-decade="90s"] .deco-a { right: 5rem; top: -1rem; width: 12rem; height: 12rem; background: var(--accent); clip-path: polygon(50% 0, 61% 20%, 82% 10%, 78% 33%, 100% 40%, 82% 55%, 95% 75%, 72% 72%, 70% 95%, 50% 80%, 30% 95%, 28% 72%, 5% 75%, 18% 55%, 0 40%, 22% 33%, 18% 10%, 39% 20%); filter: drop-shadow(3px 3px 0 var(--tx)); }
[data-decade="90s"] .deco-b { right: -3rem; bottom: -1rem; width: 24rem; height: 5rem; background: var(--decor); clip-path: polygon(0 24%, 8% 0, 20% 18%, 35% 3%, 50% 20%, 65% 5%, 80% 18%, 92% 4%, 100% 22%, 100% 100%, 0 100%); }
[data-decade="90s"] .deco-c { right: 8rem; bottom: -3rem; width: 12rem; height: 11rem; background: radial-gradient(circle, var(--tx) 1.5px, transparent 2px); background-size: 9px 9px; opacity: 0.22; }


/* 2000s: The white iPod and the blue iMac: cool white, one hard blue, lime and orange, a techno display face and Verdana, the screen face of the decade. */
[data-decade="2000s"] {
	color-scheme: light;
	--bg: #F3F6FA;
	--bg-2: #DFE7F2;
	--tx: #16213A;
	--tx-2: #4A5570;
	--primary: #1A5BC9;
	--accent: #A8D81A;
	--accent-ink: #16213A;
	--decor: #FF7A00;
	--ui: #BFC9D9;
	--ui-strong: #16213A;
	--focus: #1A5BC9;
	--danger: #B3001B;
	--font-display: Audiowide, 'Trebuchet MS', Verdana, sans-serif;
	--font-body: Verdana, Geneva, 'DejaVu Sans', sans-serif;
	--font-utility: Verdana, Geneva, 'DejaVu Sans', sans-serif;
	--display-weight: 400;
	--display-tracking: 0.02em;
	--radius: 0.6rem;
	--radius-btn: 0.6rem;
	--rule-width: 1px;
	--shadow: 0 2px 8px rgba(22, 33, 58, 0.15);
	--tv-cabinet: linear-gradient(#F4F4F6, #B8BCC4);
	--tv-bezel: 3.5%; --tv-radius: 0.6rem; --tv-shadow: 0 8px 16px rgba(0,0,0,0.2), inset 0 1px 0 #FFFFFF;
	--tv-aspect: 16 / 9; --tv-screen: linear-gradient(135deg, #0B1B3A, #1F4F9C); --tv-screen-radius: 0.3rem;
	--tv-glass: linear-gradient(170deg, rgba(255,255,255,0.35), transparent 45%);
	--tv-ident-tx: #FFFFFF; --tv-controls-display: none;
	--tv-stand: linear-gradient(#D8DBE1, #9AA0AB); --tv-stand-width: 26%; --tv-stand-height: 1.6rem;
	--tv-stand-clip: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}
[data-decade="2000s"] .btn { background: linear-gradient(#FFFFFF 0%, #E6EDF7 50%, #D2DCEC 51%, #E9EFF8 100%); border: 1px solid var(--ui); box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
[data-decade="2000s"] .btn-primary { background: linear-gradient(rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0.06) 51%, rgba(255,255,255,0.1) 100%), var(--accent); border-color: var(--decor); }
[data-decade="2000s"] { --rule-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 36 C120 36 220 4 400 4' fill='none' stroke='black' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E"); --rule-mask-size: 100% 100%; --rule-mask-repeat: no-repeat; --rule-height: 3.4rem; --rule-span-height: 2.2rem; --rule-span-width: 100%; --rule-left-2: 0; --rule-left-3: 0; --rule-shift-2: 0, 0.6rem; --rule-shift-3: 0, 1.2rem; }
[data-decade="2000s"] .deco-a { right: 0; top: -3rem; width: 18rem; height: 18rem; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.9), rgba(255,255,255,0.15) 38%, transparent 40%), var(--primary); }
[data-decade="2000s"] .deco-b { right: -8rem; bottom: -0.5rem; width: 30rem; height: 4rem; background: var(--accent); -webkit-mask-image: var(--rule-mask); mask-image: var(--rule-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
[data-decade="2000s"] .deco-c { right: 11rem; bottom: 2rem; width: 6rem; height: 6rem; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.9), rgba(255,255,255,0.15) 38%, transparent 40%), var(--decor); }


/* 2010s: Flat design: pure white, midnight blue text, a thin geometric display face, flat teal and orange, nothing glossy, nothing shadowed. */
[data-decade="2010s"] {
	color-scheme: light;
	--bg: #FFFFFF;
	--bg-2: #EEF1F4;
	--tx: #2C3E50;
	--tx-2: #5A6B7C;
	--primary: #1A6E86;
	--accent: #F39C12;
	--accent-ink: #2C3E50;
	--decor: #27AE60;
	--ui: #D5DBE1;
	--ui-strong: #2C3E50;
	--focus: #1A6E86;
	--danger: #C0392B;
	--font-display: Raleway, 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'Open Sans', 'Segoe UI', Arial, sans-serif;
	--font-utility: 'Open Sans', 'Segoe UI', Arial, sans-serif;
	--display-weight: 300;
	--display-tracking: 0;
	--radius: 4px;
	--radius-btn: 4px;
	--rule-width: 1px;
	--shadow: none;
	--tv-cabinet: #111111;
	--tv-bezel: 1.8%; --tv-radius: 0.25rem; --tv-shadow: 0 6px 14px rgba(0,0,0,0.25);
	--tv-aspect: 16 / 9; --tv-screen: linear-gradient(135deg, #1A6E86, #2C3E50); --tv-screen-radius: 0; --tv-glass: none;
	--tv-ident-tx: #FFFFFF; --tv-controls-display: none;
	--tv-stand: #111111; --tv-stand-width: 36%; --tv-stand-height: 1.2rem;
	--tv-stand-clip: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
}
[data-decade="2010s"] .btn { border-width: 2px; }
[data-decade="2010s"] .btn-primary { border: 0; }
[data-decade="2010s"] { --rule-height: 0.6rem; --rule-span-width: 32.5%; --rule-left-2: 33.75%; --rule-left-3: 67.5%; }
[data-decade="2010s"] .deco-a { right: 0; top: 0; width: 13rem; height: 13rem; clip-path: polygon(100% 0, 100% 100%, 0 100%); background: var(--primary); }
[data-decade="2010s"] .deco-b { right: 12rem; bottom: -2rem; width: 8rem; height: 8rem; border-radius: 50%; background: var(--accent); }
[data-decade="2010s"] .deco-c { right: 14rem; top: 2rem; width: 10rem; height: 0.9rem; background: var(--decor); transform: rotate(-45deg); transform-origin: right center; }


/* 2020s: Digital lavender and viva magenta on a soft off-white, a heavy contemporary display face, large radii and long soft shadows. */
[data-decade="2020s"] {
	color-scheme: light;
	--bg: #FBF8FF;
	--bg-2: #EEE7FA;
	--tx: #1E1533;
	--tx-2: #5B4F78;
	--primary: #6B22C9;
	--accent: #B8234F;
	--accent-ink: #FFF5F8;
	--decor: #2FB596;
	--ui: #CFC4E6;
	--ui-strong: #1E1533;
	--focus: #6B22C9;
	--danger: #B3001B;
	--font-display: Syne, 'Arial Black', sans-serif;
	--font-body: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-utility: Manrope, system-ui, sans-serif;
	--display-weight: 800;
	--display-tracking: -0.02em;
	--radius: 1rem;
	--radius-btn: 999px;
	--rule-width: 1px;
	--shadow: 0 10px 30px rgba(30, 21, 51, 0.10);
	--tv-cabinet: #0B0A0F;
	--tv-bezel: 0.7%; --tv-radius: 0.5rem; --tv-shadow: 0 0 60px rgba(107,34,201,0.35), 0 20px 40px rgba(0,0,0,0.3);
	--tv-aspect: 16 / 9; --tv-screen: radial-gradient(ellipse at 70% 30%, #3A1F7A, #0B0A0F 70%); --tv-screen-radius: 0.3rem;
	--tv-glass: none; --tv-ident-tx: #FFFFFF; --tv-controls-display: none; --tv-stand-display: none;
}
[data-decade="2020s"] .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); border: 0; box-shadow: var(--shadow); }
[data-decade="2020s"] .btn-primary:hover { transform: translateY(-2px); filter: none; }
[data-decade="2020s"] { --rule-height: 0.5rem; --rule-span-width: 100%; --rule-radius: 999px; }
[data-decade="2020s"] .rule3 span:nth-child(1) { background: linear-gradient(90deg, var(--primary), var(--accent), var(--decor)); box-shadow: 0 8px 24px -6px var(--accent); }
[data-decade="2020s"] .rule3 span:nth-child(2), [data-decade="2020s"] .rule3 span:nth-child(3) { display: none; }
[data-decade="2020s"] .deco-a { right: -6rem; top: -8rem; width: 28rem; height: 24rem; border-radius: 45% 55% 60% 40% / 50% 40% 60% 50%; background: var(--primary); filter: blur(44px); opacity: 0.32; }
[data-decade="2020s"] .deco-b { right: 2rem; bottom: -10rem; width: 22rem; height: 18rem; border-radius: 60% 40% 45% 55% / 40% 60% 50% 50%; background: var(--accent); filter: blur(40px); opacity: 0.28; }
[data-decade="2020s"] .deco-c { right: 9rem; bottom: 1rem; width: 9rem; height: 9rem; border-radius: 50%; border: 1rem solid var(--decor); opacity: 0.85; }



/* Motion, per decade. Keyframes are in base.css; the one
   prefers-reduced-motion rule there cancels every one of these. Slow,
   decorative, never on reading text, never moving content.
   60s: the waves drift and the pop-art target breathes.
   70s: the rainbow arcs turn, once every two minutes.
   80s: the neon title flickers, the zigzags scroll, the VCR's PLAY blinks.
   90s: the tracking band jitters like a worn tape; the sticker throbs.
   2000s: the glossy bubbles float.
   2010s: flat design did not move; only the hover transitions.
   2020s: the blobs morph and drift. */
[data-decade="60s"] .rule3 span:nth-child(1) { animation: drift-x 7s linear infinite; }
[data-decade="60s"] .rule3 span:nth-child(2) { animation: drift-x 9s linear infinite reverse; }
[data-decade="60s"] .rule3 span:nth-child(3) { animation: drift-x 11s linear infinite; }
[data-decade="60s"] .deco-a { animation: breathe 8s ease-in-out infinite; }
[data-decade="60s"] .deco-c { animation: float 6s ease-in-out infinite; }
[data-decade="70s"] .deco-a { animation: spin 120s linear infinite; }
[data-decade="70s"] .deco-c { animation: float 7s ease-in-out infinite; }
[data-decade="80s"] h1 { animation: flicker 7s linear infinite; }
[data-decade="80s"] .rule3 span:nth-child(1) { animation: drift-x 4s linear infinite; }
[data-decade="80s"] .rule3 span:nth-child(2) { animation: drift-x 4s linear infinite reverse; }
[data-decade="80s"] .rule3 span:nth-child(3) { animation: drift-x 4s linear infinite; }
[data-decade="80s"] .tv-ident-title::before { animation: blink 1.2s steps(1) infinite; }
[data-decade="80s"] .deco-c { animation: drift-x 3s linear infinite; }
[data-decade="90s"] .tv-ident::after { animation: jitter 0.7s steps(2) infinite; }
[data-decade="90s"] .deco-a { animation: breathe 3s ease-in-out infinite; }
[data-decade="2000s"] .deco-a { animation: float 7s ease-in-out infinite; }
[data-decade="2000s"] .deco-c { animation: float 5s ease-in-out infinite 1s; }
[data-decade="2020s"] .deco-a { animation: morph 14s ease-in-out infinite; }
[data-decade="2020s"] .deco-b { animation: morph 18s ease-in-out infinite 3s, float 12s ease-in-out infinite; }
[data-decade="2020s"] .rule3 span:nth-child(1) { background-size: 300% 100%; animation: shimmer 16s linear infinite; }