/* Chaos Mode — every tag, all at once. Reduced-motion stops the moving parts; nothing stops the colors. */
:root { --bg: #000; --a: #ff00ff; --b: #00ffff; --c: #ffff00; --d: #00ff00; --ink: #fff; --box: #1a0033; }
html[data-scheme="acid"] { --bg: #0a1a00; --a: #a6ff00; --b: #ff5e00; --c: #ffffff; --d: #00ffcc; --box: #1e3300; }
html[data-scheme="candy"] { --bg: #ff9ad5; --a: #ffffff; --b: #7a00ff; --c: #ffe600; --d: #00c2ff; --ink: #2a0040; --box: #ffd6ee; }
body { margin: 0; padding: 12px; background: var(--bg) repeating-conic-gradient(from 0deg, transparent 0 20deg, rgba(255,255,255,.04) 20deg 40deg); color: var(--ink); font: 16px/1.4 "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive, sans-serif; overflow-x: hidden; }
.warning { text-align: center; font-weight: bold; color: var(--c); background: var(--a); padding: 4px; letter-spacing: .1em; }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
h1.rainbow { text-align: center; font-size: 44px; margin: 10px 0 0; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); -webkit-background-clip: text; background-clip: text; color: transparent; animation: hue 4s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.tag { text-align: center; font-size: 20px; color: var(--c); text-shadow: 2px 2px var(--a); margin: 4px 0 10px; }
.marquee { overflow: hidden; white-space: nowrap; background: var(--b); color: #000; font-weight: bold; padding: 4px; border: 4px dotted var(--a); }
.marquee span { display: inline-block; padding-left: 100%; animation: mq 12s linear infinite; }
@keyframes mq { to { transform: translateX(-100%); } }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 16px 0; }
.box { background: var(--box); border: 5px solid var(--b); box-shadow: 8px 8px 0 var(--a), 16px 16px 0 var(--c); padding: 12px; }
.box.wide { grid-column: 1 / -1; }
.tilt-l { transform: rotate(-1.5deg); } .tilt-r { transform: rotate(1.2deg); }
.sec { background: var(--box); border: 5px double var(--d); padding: 12px; transform: rotate(.8deg); box-shadow: -8px 8px 0 var(--b); }
h2 { font-size: 24px; margin: 0 0 8px; color: var(--c); text-shadow: 3px 3px 0 var(--a); letter-spacing: .05em; }
.construction { display: inline-block; margin-top: 8px; padding: 4px 10px; background: var(--c); color: #000; font-weight: bold; border: 3px dashed var(--a); animation: blink 1.4s steps(2) infinite; }
.links { list-style: "★ "; padding-left: 26px; font-size: 18px; } .links a { color: var(--d); text-decoration: underline wavy var(--a); }
a { color: var(--d); }
.pics { display: flex; flex-wrap: wrap; gap: 12px; } .pics figure { margin: 0; width: 180px; transform: rotate(-3deg); } .pics img { width: 100%; height: auto; border: 6px ridge var(--c); } .pics figcaption { color: var(--c); font-size: 13px; }
.gb iframe { width: 100%; height: 300px; border: 5px groove var(--a); }
.ring { margin: 12px auto; width: fit-content; max-width: 100%; padding: 8px 14px; border: 4px dashed var(--d); background: var(--box); font-weight: bold; }
.ftr { text-align: center; font-size: 14px; color: var(--c); }
.counter { display: inline-block; vertical-align: middle; width: 110px; height: 24px; border: 0; }
audio { width: 100%; }
@media (prefers-reduced-motion: reduce) { .blink, .construction, h1.rainbow { animation: none; } .marquee span { animation: none; padding-left: 0; } .tilt-l, .tilt-r, .sec, .pics figure { transform: none; } }