:root{--bg:#f1f8e9;--ink:#0a2540;--muted:#5b6b7a;--brand:#4caf50;--brand2:#c8e6c9;--card:#ffffff;--ring:#dfeee5}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg) fixed}
body{font:16px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:var(--ink)}
.main{max-width:900px;margin:24px auto;padding:20px}
.banner{position:relative;border-radius:16px;background:linear-gradient(135deg,#e8f5e9,rgba(255,255,255,.9));padding:20px 20px 24px;border:1px solid var(--ring);box-shadow:0 2px 10px rgba(16,38,73,.06)}
.h{display:flex;align-items:center;gap:12px}
.tag{font-size:13px;color:var(--muted);background:#e8f5e9;border:1px solid var(--ring);padding:4px 10px;border-radius:999px}
.h h1{margin:0;font-size:26px;letter-spacing:.2px}
.banner .h{margin-bottom:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:18px;align-items:stretch}
.theme-header{grid-column:1/-1;margin-top:24px;margin-bottom:12px;padding:12px 16px;background:linear-gradient(135deg,#c8e6c9,#e8f5e9);border:1px solid var(--ring);border-radius:12px;font-weight:600;font-size:18px;color:var(--ink)}
.theme-header:first-of-type{margin-top:0}
.card{position:relative;display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:16px 14px 14px;box-shadow:0 1px 6px rgba(16,38,73,.05);overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
.card:before{content:"";position:absolute;right:-6px;top:-6px;width:110px;height:110px;opacity:.12;background-repeat:no-repeat;background-position:center;background-size:90%}
.card:after{content:"→";position:absolute;right:12px;bottom:10px;font-weight:600;color:var(--brand)}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,38,73,.12)}
.num{display:inline-block;align-self:flex-start;font-weight:700;color:#0a2540;background:linear-gradient(90deg,var(--brand2),#e8f5e9);border:1px solid var(--ring);padding:4px 9px;border-radius:999px;margin-bottom:8px}
.ttl{font-weight:600}
.txt{margin-top:6px;color:var(--muted);font-size:14px}
.footer{margin-top:16px;font-size:12px;color:var(--muted)}
/* Mobile tap highlight to match brand */
a, .card, .back-link, button{
  -webkit-tap-highlight-color: rgba(76, 175, 80, 0.25);
}
/* Lesson content blocks */
.content{background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:24px;margin-top:20px;box-shadow:0 1px 6px rgba(16,38,73,.05)}
.content h2{color:var(--brand);margin-top:0;margin-bottom:16px}
.content p{line-height:1.6;margin-bottom:12px}
.content ul, .content ol{margin:12px 0;padding-left:24px}
.content li{margin-bottom:8px;line-height:1.6}
.back-link{display:inline-block;margin-top:20px;color:var(--brand);text-decoration:none;font-weight:500}
.back-link:hover{text-decoration:underline}
/* іконки-кнопок */
.i21:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><path d='M20 24v-8a12 12 0 0 1 24 0v8'/><rect x='12' y='24' width='40' height='28' rx='6'/><path d='M32 32v12M26 38h12'/></g></svg>")}
.i22:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><path d='M32 8l26 48H6z'/><path d='M32 26v12M32 44h.1'/></g></svg>")}
.i23:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><circle cx='26' cy='26' r='12'/><path d='M34 34l16 16'/><rect x='4' y='48' width='20' height='10' rx='3'/></g></svg>")}
.i24:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><rect x='10' y='22' width='44' height='28' rx='6'/><path d='M18 22v-6h28v6'/><path d='M14 30h36'/><path d='M20 38h24'/></g></svg>")}
.i25:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><circle cx='22' cy='22' r='8'/><path d='M22 30v10M14 40h16'/><rect x='30' y='12' width='24' height='24' rx='6'/><path d='M36 24h12'/></g></svg>")}
.i26:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><rect x='10' y='14' width='44' height='36' rx='6'/><circle cx='22' cy='32' r='7'/><path d='M32 32h16M32 40h12'/></g></svg>")}
.i27:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><circle cx='24' cy='24' r='10'/><path d='M32 32l14 14'/><path d='M40 10l8 8'/></g></svg>")}
.i28:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><circle cx='32' cy='32' r='20'/><path d='M32 16v10M32 38v10M16 32h10M38 32h10'/></g></svg>")}
.i29:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><rect x='6' y='26' width='16' height='12' rx='3'/><rect x='24' y='14' width='16' height='12' rx='3'/><rect x='42' y='26' width='16' height='12' rx='3'/><path d='M22 32h2M40 20h2M40 32h2M32 26v-2M32 38v2'/></g></svg>")}
.i30:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><circle cx='24' cy='24' r='10'/><path d='M32 32l8 8'/><rect x='34' y='12' width='20' height='14' rx='4'/><path d='M44 12v-4'/></g></svg>")}
.i31:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><rect x='10' y='20' width='44' height='28' rx='6'/><path d='M22 28h20'/><path d='M18 40h8M38 40h8'/><path d='M14 20v-6h36v6'/></g></svg>")}
.i32:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%230a2540' stroke-width='3'><path d='M10 18h44v20H10z'/><path d='M14 42h36l-6 8H20z'/><path d='M20 26h24'/></g></svg>")}

/* Accessibility and UX improvements */
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.card:focus-visible{box-shadow:0 0 0 3px var(--brand2), 0 6px 18px rgba(16,38,73,.12);transform:translateY(-2px)}
.card{transition:transform .12s ease, box-shadow .12s ease}
.back-link{transition:color .12s ease}
.back-link:focus-visible{outline:2px solid var(--ring);border-radius:6px}

body.no-card-icons .card:before,
body.no-card-icons .card:after{
  display:none;
}
body.no-banner-icon .banner:before{
  display:none;
}

/* Avoid hover effects on touch-only devices */
@media (hover: none){
  .card:hover{transform:none;box-shadow:0 1px 6px rgba(16,38,73,.05)}
}

/* Mobile responsive tweaks */
@media (max-width: 600px){
  .main{padding:16px}
  .banner{padding:16px}
  .banner:before{display:none}
  .h h1{font-size:22px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
  .theme-header{font-size:16px;padding:10px 14px}
  .card{padding:14px 12px;border-radius:14px}
  .num{padding:3px 8px}
}

/* Reduce animations for users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}

/* Block text selection and discourage copying across the site */
html, body, .main{
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
/* Allow normal interaction in form controls if needed */
input, textarea, select{
  -webkit-user-select:text;
  user-select:text;
}
label, a, button{
  -webkit-user-select:none;
  user-select:none;
}

/* Purple theme only for lesson 10 */
html.theme-10{
  background:#f5f0ff fixed;
}
body.theme-10{
  --bg:#f5f0ff;
  --brand:#7e57c2;
  --brand2:#e6d9ff;
  --ring:#e4d7ff;
  background:#f5f0ff fixed;
}
body.theme-10 .banner{
  background:linear-gradient(135deg,#ede7f6,rgba(255,255,255,.9));
}
body.theme-10 .tag{
  background:#f3e5f5;
}
body.theme-10 .theme-header{
  background:linear-gradient(135deg,#e6d9ff,#f3e5f5);
}
body.theme-10 .num{
  background:linear-gradient(90deg,#e6d9ff,#f3e5f5);
}
body.theme-10 a,
body.theme-10 .card,
body.theme-10 .back-link,
body.theme-10 button{
  -webkit-tap-highlight-color:rgba(126,87,194,0.25);
}

/* Blue theme for class selection index */
html.theme-home{
  background:#e8f3ff fixed;
}
body.theme-home{
  --bg:#e8f3ff;
  --brand:#2196f3;
  --brand2:#bbdefb;
  --ring:#d6e7ff;
  background:#e8f3ff fixed;
}
body.theme-home .banner{
  background:linear-gradient(135deg,#e3f2fd,rgba(255,255,255,.9));
}
body.theme-home .tag{
  background:#e3f2fd;
}
body.theme-home .theme-header{
  background:linear-gradient(135deg,#bbdefb,#e3f2fd);
}
body.theme-home .num{
  background:linear-gradient(90deg,#bbdefb,#e3f2fd);
}
body.theme-home a,
body.theme-home .card,
body.theme-home .back-link,
body.theme-home button{
  -webkit-tap-highlight-color:rgba(33,150,243,0.25);
}