/* ===== Base: Light & Dark via [data-theme] on ===== */ :root { --bg: #ffffff; --fg: #0f172a; --muted: #64748b; --card: #f1f5f9; --border: #e2e8f0; --brand: #2563eb; } html[data-theme="dark"] { --bg: #0b1220; --fg: #e2e8f0; --muted: #a3b2c6; --card: #101828; --border: #1e293b; --brand: #60a5fa; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Arial; background: var(--bg); color: var(--fg); } /* Layout helpers */ .wrap { width: min(960px, 92%); margin-inline: auto; } .section { padding: 0rem 0; } .section.alt { background: var(--card); } .grid { display: grid; gap: 1rem; } @media (min-width: 720px) { .grid { grid-template-columns: repeat(2, 1fr); } } /* Header */ .site-header { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--border); z-index: 10; } .site-header .wrap { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; } .brand { font-weight: 700; text-decoration: none; color: var(--fg); } .icon-btn { margin-left: auto; border: 1px solid var(--border); background: var(--card); color: var(--fg); padding: .45rem .6rem; border-radius: .5rem; cursor: pointer; } .menu-btn { margin-left: .5rem; } .nav { display: none; gap: .8rem; } .nav a { text-decoration: none; color: var(--fg); padding: .3rem .5rem; border-radius: .4rem; } .nav a:hover { background: var(--card); } /* Show nav on desktop */ @media (min-width: 820px) { .icon-btn.menu-btn { display: none; } .nav { display: flex; margin-left: 1rem; } } /* Mobile open */ .nav.open { display: flex; flex-direction: column; position: absolute; right: 4%; top: 56px; background: var(--bg); border: 1px solid var(--border); padding: .6rem; border-radius: .6rem; } /* Hero */ .hero { padding: 2rem 0 1rem; } .hero h1 { margin: 0 0 .25rem; font-size: clamp(1.4rem, 3.5vw, 2rem); } .hero p { margin: 0; color: var(--muted); } /* Notes */ .note { border: 1px solid var(--border); background: var(--bg); border-radius: .7rem; padding: .9rem; margin-bottom: .8rem; } /* Cards (images & videos) */ .card { border: 1px solid var(--border); background: var(--bg); border-radius: .7rem; overflow: hidden; } .card img { display: block; width: 100%; height: auto; } .card figcaption, .card-title { padding: .6rem .75rem; color: var(--muted); margin: 0; } /* Video iframe */ .video { position: relative; aspect-ratio: 16 / 9; background: #000; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Footer */ .site-footer { border-top: 1px solid var(--border); } .site-footer .wrap { padding: 1rem 0; color: var(--muted); } /* Small polish */ img { max-width: 100%; height: auto; } .note-explain { margin-left: 1rem; } .nav a.active { font-weight: 700; text-decoration: underline; background: #08b9f3} .sub-title { font-weight: bold; color: #2563eb;} .nav a { width: 7rem; word-wrap: break-word; } .red-text { color: #eb2525;}