:root{ --bg: #0f1221; --card: #161a2e; --text: #eaf0ff; --sub: #aeb8d6; --accent: #62e0ff; --accent-2: #ffd166; --border: #273056; } /* THEMES (switch by ) */ html[data-theme="business"] { --bg: #0e1116; --card: #161b22; --text:#e6edf3; --sub:#9fb0c3; --accent:#2ea043; --accent-2:#58a6ff; --border:#2d333b; } html[data-theme="pink"] { --bg:#2a0e1f; --card:#3a152c; --text:#ffe9f6; --sub:#ffcfe6; --accent:#ff8ac2; --accent-2:#ffd6e7; --border:#5a1d40; } html[data-theme="tech"] { --bg:#0b0f10; --card:#13181a; --text:#e3f2f4; --sub:#96a9ad; --accent:#49d6a9; --accent-2:#4da3ff; --border:#1f2b2e; } html[data-theme="sports"] { --bg:#0d1a10; --card:#122317; --text:#eef7f0; --sub:#a9cfb1; --accent:#1ed760; --accent-2:#ffd166; --border:#1e3a27; } html[data-theme="hiphop"] { --bg:#100b0b; --card:#1b1313; --text:#f6efe7; --sub:#c8b8a8; --accent:#f4c430; --accent-2:#ff5f5f; --border:#2a2020; } html[data-theme="music"] { --bg:#0e1020; --card:#171a2f; --text:#eef1ff; --sub:#aeb6e6; --accent:#9d7bff; --accent-2:#62e0ff; --border:#262b52; } html[data-theme="videogame"] { --bg:#0d0d1a; --card:#151533; --text:#e8e9ff; --sub:#a7a9ff; --accent:#7afcff; --accent-2:#b3ff66; --border:#272761; } /* Layout */ * { box-sizing: border-box; } body { margin: 0; font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: radial-gradient(80rem 80rem at 10% -20%, #ffffff10, transparent 60%), var(--bg); } .container { max-width: 1080px; margin: 0 auto; padding: 1rem; } header .subtitle { color: var(--sub); margin-top: -0.5rem; } .controls { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; } button, select { background: var(--accent); border: 1px solid var(--border); color: #0a0a0a; padding: .5rem .75rem; border-radius: .6rem; cursor: pointer; font-weight: 600; } button.secondary { background: var(--accent-2); } .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .card { background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 85%, #000)); border: 1px solid var(--border); border-radius: 1rem; padding: 1rem; box-shadow: 0 10px 30px #0005; } h1 { font-size: 1.8rem; margin: .25rem 0; } h2 { font-size: 1.2rem; margin: 0 0 .75rem; } .hint { color: var(--sub); margin-top: .5rem; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .footnote { color: var(--sub); text-align: center; margin: 1rem auto 2rem; } /* Table */ table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid var(--border); padding: .5rem; text-align: center; } thead th { background: color-mix(in srgb, var(--accent) 25%, var(--card)); color:#0a0a0a; } caption { color: var(--sub); margin-bottom: .25rem; } /* Canvas helpers */ canvas { width: 100%; height: auto; display: block; background: repeating-linear-gradient(45deg, #ffffff06 0 10px, transparent 10px 20px); border-radius: .5rem; border: 1px solid var(--border); } .toggles { display:flex; gap:1rem; margin-top:.5rem; align-items:center; }