:root { --bg: #faf8f5; --surface: #ffffff; --ink: #2a2420; --ink-soft: #6b6258; --border: #e4dccf; --danger: #a13b2c; --radius: 10px; --accent-rgb: 122, 74, 47; /* default / home / algebra1 brand color */ } @media (prefers-color-scheme: dark) { :root { --bg: #1b1815; --surface: #262220; --ink: #efe9e1; --ink-soft: #b3a999; --border: #3a332c; --danger: #e08672; --accent-rgb: 217, 160, 102; } } /* --- Per-subject themes --- Each subject page sets so the whole page (header, active nav link, buttons, active tabs) picks up a distinct accent color while sharing the same neutral surface/background. */ html[data-subject="algebra1"] { --accent-rgb: 122, 74, 47; } html[data-subject="algebra2"] { --accent-rgb: 161, 87, 47; } html[data-subject="geometry"] { --accent-rgb: 47, 122, 74; } html[data-subject="trigonometry"] { --accent-rgb: 47, 107, 122; } html[data-subject="precalculus"] { --accent-rgb: 59, 90, 161; } html[data-subject="calculus"] { --accent-rgb: 106, 74, 156; } html[data-subject="physics"] { --accent-rgb: 156, 63, 106; } html[data-subject="ee"] { --accent-rgb: 166, 138, 47; } html[data-subject="statistics"] { --accent-rgb: 63, 122, 106; } @media (prefers-color-scheme: dark) { html[data-subject="algebra1"] { --accent-rgb: 217, 160, 102; } html[data-subject="algebra2"] { --accent-rgb: 224, 150, 106; } html[data-subject="geometry"] { --accent-rgb: 111, 207, 151; } html[data-subject="trigonometry"] { --accent-rgb: 111, 192, 217; } html[data-subject="precalculus"] { --accent-rgb: 125, 159, 224; } html[data-subject="calculus"] { --accent-rgb: 177, 143, 224; } html[data-subject="physics"] { --accent-rgb: 224, 143, 181; } html[data-subject="ee"] { --accent-rgb: 224, 197, 106; } html[data-subject="statistics"] { --accent-rgb: 122, 217, 192; } } :root[data-theme="dark"] { --bg: #1b1815; --surface: #262220; --ink: #efe9e1; --ink-soft: #b3a999; --border: #3a332c; --danger: #e08672; } :root[data-theme="light"] { --bg: #faf8f5; --surface: #ffffff; --ink: #2a2420; --ink-soft: #6b6258; --border: #e4dccf; --danger: #a13b2c; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif; line-height: 1.5; overflow-x: hidden; } a { color: rgb(var(--accent-rgb)); } .accent { color: rgb(var(--accent-rgb)); } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; } /* --- Header & site nav --- */ .site-header { padding: clamp(20px, 4vw, 36px) 0 0; border-bottom: 1px solid var(--border); } .header-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; } .brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); } .brand-mark { font-size: 1.4rem; color: rgb(var(--accent-rgb)); } .brand-name { font-size: 1.25rem; font-weight: 600; } .subject-badge { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.12); border-radius: 999px; padding: 4px 10px; } .site-header h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 4vw, 2rem); } .tagline { margin: 0; color: var(--ink-soft); font-size: clamp(0.9rem, 2vw, 1rem); } .site-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { flex: 0 0 auto; font-size: 0.82rem; text-decoration: none; color: var(--ink-soft); padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .site-nav a:hover { color: var(--ink); background: var(--bg); } .site-nav a.active { color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.12); font-weight: 600; } main { padding: clamp(20px, 4vw, 32px) 0 clamp(32px, 6vw, 60px); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(16px, 3vw, 24px); } /* --- Subject page intro (static, crawlable content above the tool) --- */ .page-intro { margin-bottom: 24px; } .page-intro h1 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); margin: 0 0 10px; } .page-intro > p { color: var(--ink-soft); max-width: 720px; margin: 0 0 14px; font-size: 0.95rem; } .topic-list-static { display: flex; flex-wrap: wrap; gap: 4px 0; padding: 0; margin: 0; list-style: none; font-size: 0.8rem; } .topic-list-static li { display: flex; align-items: center; } .topic-list-static li:not(:last-child)::after { content: "\00b7"; margin: 0 10px; color: var(--border); } .topic-list-static a { color: var(--ink-soft); text-decoration: none; } .topic-list-static a:hover { color: rgb(var(--accent-rgb)); text-decoration: underline; } /* --- Tool tabs --- */ .topic-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .topic-btn { font-family: inherit; font-size: 0.85rem; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--ink); padding: 6px 14px; border-radius: 999px; } .topic-btn.active { background: rgba(var(--accent-rgb), 0.12); border-color: rgb(var(--accent-rgb)); color: rgb(var(--accent-rgb)); } /* --- Layout --- */ .tool-layout { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; align-items: start; } @media (max-width: 800px) { .tool-layout { grid-template-columns: 1fr; } } .tool-panel h2 { margin: 0 0 6px; font-size: 1.1rem; } .tool-hint { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 16px; } .hidden { display: none; } .grid { display: grid; gap: 10px; margin-bottom: 14px; } .grid-1 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } @media (max-width: 480px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; } .field.span-2 { grid-column: 1 / -1; } input, select { font-family: inherit; font-size: 0.95rem; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--ink); width: 100%; } input:focus, select:focus { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 1px; } .primary-btn { font-family: inherit; cursor: pointer; background: rgb(var(--accent-rgb)); color: #fff; border: none; padding: 10px 18px; border-radius: 8px; font-size: 0.9rem; width: 100%; } .status.error { margin-top: 14px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--danger); color: var(--danger); font-size: 0.85rem; } /* --- Graph panel --- */ .graph-panel { display: flex; flex-direction: column; gap: 16px; } #graph-canvas { width: 100%; height: clamp(260px, 42vw, 400px); display: block; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); } #graph-canvas.hidden { display: none; } .table-wrap { overflow-x: auto; } .table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .table-wrap th, .table-wrap td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; } .table-wrap th { background: rgba(var(--accent-rgb), 0.12); color: var(--ink); } .table-wrap td { font-family: "Courier New", monospace; } .result-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .result-summary li { font-family: "Courier New", monospace; font-size: 0.85rem; background: rgba(var(--accent-rgb), 0.1); padding: 8px 12px; border-radius: 6px; overflow-wrap: break-word; } /* --- Home page --- */ .hero { text-align: center; padding: clamp(28px, 6vw, 56px) 0 clamp(20px, 4vw, 32px); } .hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 12px; } .hero p { color: var(--ink-soft); max-width: 620px; margin: 0 auto; font-size: clamp(0.95rem, 2vw, 1.1rem); } .hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; color: var(--ink-soft); font-size: 0.8rem; } .hero-badges span { border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; } .subject-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; } .subject-card { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color 0.15s ease, transform 0.15s ease; } .subject-card:hover { border-color: rgb(var(--subject-rgb, var(--accent-rgb))); transform: translateY(-2px); } .subject-card .subject-icon { font-size: 1.6rem; color: rgb(var(--subject-rgb, var(--accent-rgb))); } .subject-card h2 { font-size: 1.05rem; margin: 10px 0 6px; } .subject-card p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); } .subject-card .topic-count { display: inline-block; margin-top: 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--subject-rgb, var(--accent-rgb))); } .section-heading { text-align: center; margin: 40px 0 8px; font-size: 1.3rem; } .section-sub { text-align: center; color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 20px; } .feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; } .feature-list .card h3 { margin: 0 0 6px; font-size: 1rem; } .feature-list .card p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); } /* --- Ad slot --- */ .ad-slot { max-width: 728px; min-height: 90px; margin: 24px auto; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 8px; color: var(--ink-soft); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; overflow: hidden; } /* --- Static content pages (privacy, etc) --- */ .prose h1 { font-size: clamp(1.5rem, 4vw, 2rem); } .prose h2 { font-size: 1.15rem; margin-top: 28px; } .prose p, .prose li { color: var(--ink-soft); font-size: 0.95rem; } .prose a { color: rgb(var(--accent-rgb)); } .site-footer { padding: 20px 0 40px; color: var(--ink-soft); font-size: 0.8rem; border-top: 1px solid var(--border); } .footer-inner { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; } .footer-links { display: flex; gap: 14px; flex-wrap: wrap; } .footer-links a { color: var(--ink-soft); text-decoration: none; } .footer-links a:hover { color: rgb(var(--accent-rgb)); } @media (max-width: 480px) { .header-top { flex-direction: column; align-items: flex-start; } }