* { box-sizing: border-box; }
:root { color-scheme: dark; --ink: #08131c; --panel: #0e1c27; --panel-light: #132735; --line: #284452; --text: #edf5f4; --muted: #9db1b7; --cyan: #8ae6dc; --orange: #ff896f; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at top right, #153642, var(--ink) 48%); font-family: Verdana, Arial, sans-serif; }
a { color: var(--cyan); } button { font: inherit; cursor: pointer; } .k-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px clamp(20px,5vw,70px); background:var(--panel); border-bottom:1px solid var(--line); } .brand { color:var(--cyan); font-size:1.25rem; font-weight:700; letter-spacing:.16em; text-decoration:none; } .k-header nav { display:flex; gap:18px; font-size:.78rem; }
.k-shell { width:min(100% - 36px, 1240px); margin:auto; padding:42px 0 70px; } .k-hero { padding:34px; background:linear-gradient(135deg,#102936,#0e1c27); border:1px solid var(--line); } .eyebrow { margin:0 0 10px; color:var(--cyan); font-size:.7rem; font-weight:700; letter-spacing:.15em; } h1 { margin:0; font-size:clamp(2.5rem,7vw,5.4rem); line-height:.95; } h1 span { color:var(--orange); } h2 { margin:0; } .k-hero p:not(.eyebrow) { color:var(--muted); line-height:1.6; } .k-summary { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin-top:24px; color:var(--muted); } .k-summary strong { color:var(--orange); font-size:1.8rem; }
.category-tabs { display:flex; gap:8px; overflow-x:auto; padding:22px 0 10px; } .category-tab, .secondary-button, .activity-card button, .dialog-actions button { padding:10px 14px; color:var(--ink); background:var(--cyan); border:1px solid var(--cyan); font-size:.72rem; font-weight:700; } .category-tab { flex:0 0 auto; color:var(--muted); background:var(--panel); border-color:var(--line); } .category-tab[aria-selected=true] { color:var(--ink); background:var(--cyan); border-color:var(--cyan); } .secondary-button { color:var(--cyan); background:transparent; }
.k-panel { padding:24px; background:var(--panel); border:1px solid var(--line); } .panel-heading, .dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; } .feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px; } .activity-card { display:grid; gap:10px; min-height:180px; padding:16px; background:var(--panel-light); border:1px solid var(--line); } .activity-card .number { color:var(--orange); font: .78rem monospace; } .activity-card h3 { margin:0; font-size:.94rem; } .activity-card p { margin:0; color:var(--muted); font-size:.77rem; line-height:1.5; } .activity-card button { align-self:end; } .activity-card.done { border-color:var(--cyan); } .activity-card.done button { color:var(--cyan); background:transparent; }
.activity-dialog { width:min(92vw,680px); color:var(--text); background:var(--panel); border:1px solid var(--cyan); box-shadow:0 20px 60px #0008; } .activity-dialog::backdrop { background:#0009; } .activity-dialog > p { color:var(--muted); line-height:1.6; } .icon-button { color:var(--cyan); background:transparent; border:1px solid var(--line); padding:8px 11px; } .activity-stage { min-height:150px; padding:18px; background:var(--panel-light); border:1px solid var(--line); } .activity-stage button, .activity-stage input { margin:5px; padding:12px; } .choice { color:var(--text); background:var(--ink); border:1px solid var(--line); } .choice.correct { color:var(--ink); background:var(--cyan); } .choice.wrong { color:#fff; background:#9b443b; } .stage-message { min-height:24px; color:var(--orange); } .draw-pad { display:block; width:100%; height:190px; background:#f7fbf9; cursor:crosshair; touch-action:none; } .timer { font-size:2.5rem; color:var(--cyan); } .dialog-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
@media (max-width:800px) { .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px) { .k-header { align-items:flex-start; flex-direction:column; } .k-hero,.k-panel { padding:18px; } .feature-grid { grid-template-columns:1fr; } .panel-heading { flex-direction:column; } }