/* Techclick interactive lesson shell — gold blog CSS */


:root{--tc-royal:#1E3A8A;--tc-navy:#0F1E4D;--tc-cyan:#6BC6E8;--tc-magenta:#E89BC1;--tc-ink:#0A0A0A;--tc-ink-2:#4B5563;--tc-ink-3:#6B7280;--tc-mist:#F4F6FB;--tc-ok:#10B981;--tc-warn:#F59E0B;--tc-err:#EF4444;--tc-grad:linear-gradient(135deg,#6BC6E8,#E89BC1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;font-size:18px;line-height:1.7;color:var(--tc-ink);background:#fff;-webkit-font-smoothing:antialiased}
.tc-progress{position:fixed;top:0;left:0;right:0;height:4px;background:rgba(30,58,138,.08);z-index:10001}
.tc-progress-bar{height:100%;width:0;background:var(--tc-grad)}
.tc-strip{height:4px;background:var(--tc-grad)}
.tc-header{position:sticky;top:4px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(30,58,138,.08);z-index:10000}
.tc-header-inner{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center}
.tc-logo-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--tc-ink);font:700 17px/1 Poppins,sans-serif}
.tc-logo-mark{width:30px;height:30px;border-radius:8px;background:var(--tc-grad);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
.tc-back-link{font:500 14px/1 Inter,sans-serif;color:var(--tc-royal);text-decoration:none}
.tc-hero{padding:56px 32px 12px;max-width:1200px;margin:0 auto;width:100%}
.tc-context{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(107,198,232,.12);color:var(--tc-royal);border:1px solid rgba(30,58,138,.18);border-radius:999px;font:600 13px/1 Inter,sans-serif;margin-bottom:14px}
.tc-context-dot{width:7px;height:7px;border-radius:50%;background:var(--tc-grad)}
.tc-h1{font:700 clamp(1.8rem,4vw,2.55rem)/1.15 Poppins,sans-serif;letter-spacing:-.025em;margin:0 0 12px}
.tc-h1-grad{background:var(--tc-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tc-lede{font:400 1.12rem/1.6 Inter,sans-serif;color:var(--tc-ink-2);margin:0 0 14px}
.tc-meta-row{display:flex;flex-wrap:wrap;gap:8px 14px;font:500 13.5px/1 Inter,sans-serif;color:var(--tc-ink-3)}
.tc-outcomes{max-width:1200px;margin:16px auto 0;padding:20px 28px;width:100%;background:linear-gradient(180deg,rgba(37,99,235,.06),rgba(37,99,235,.02));border:1px solid rgba(37,99,235,.18);border-radius:14px}
.tc-outcomes h2{margin:0 0 10px;font:700 13px/1 Poppins,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#2563EB}
.tc-outcomes ul{margin:0;padding-left:20px}.tc-outcomes li{margin:0 0 6px;font-size:15.5px}
.tc-toc{max-width:1200px;margin:20px auto;padding:20px 28px;width:100%;background:var(--tc-mist);border:1px solid rgba(30,58,138,.1);border-radius:14px}
.tc-toc h2{font:700 13px/1 Poppins,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--tc-royal);margin:0 0 10px}
.tc-toc ol{margin:0;padding-left:20px}.tc-toc li{margin:0 0 7px;font-size:15px}.tc-toc a{color:var(--tc-ink);text-decoration:none}.tc-toc a:hover{color:var(--tc-royal)}
.tc-body{max-width:1200px;margin:0 auto;padding:8px 32px 80px;width:100%}
.tc-body h2{font:700 clamp(1.3rem,2.6vw,1.65rem)/1.25 Poppins,sans-serif;margin:44px 0 14px;padding-left:14px;position:relative}
.tc-body h2::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:4px;background:var(--tc-grad);border-radius:2px}
.tc-body h3{font:600 1.15rem/1.35 Poppins,sans-serif;margin:26px 0 10px;color:var(--tc-royal)}
.tc-body h4{font:600 1rem/1.35 Poppins,sans-serif;margin:16px 0 8px;color:var(--tc-navy)}
.tc-body p{margin:0 0 14px}.tc-body a{color:var(--tc-royal)}.tc-body ul,.tc-body ol{margin:0 0 14px;padding-left:22px}.tc-body li{margin-bottom:7px}
.tc-body code{background:var(--tc-mist);padding:2px 6px;border-radius:4px;font:500 .9em JetBrains Mono,monospace;color:var(--tc-royal);border:1px solid rgba(30,58,138,.08)}
.tc-code{background:var(--tc-mist);border-left:4px solid var(--tc-royal);border-radius:8px;padding:14px 16px;margin:14px 0 20px;overflow-x:auto}
.tc-code pre{margin:0;font:500 13px/1.55 JetBrains Mono,monospace;white-space:pre}
.tc-code-label{display:block;font:600 11px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--tc-ink-3);margin-bottom:8px}
.tc-qa{margin:8px 0 18px;padding:14px 16px;border:1px solid rgba(37,99,235,.2);border-left:4px solid #2563EB;border-radius:12px;background:linear-gradient(180deg,rgba(37,99,235,.07),rgba(37,99,235,.02))}
.tc-qa-h{margin:0 0 6px;font:700 .72rem/1 Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#2563EB}
.tc-qa-a{margin:0;font-size:1.04rem;line-height:1.6}
.tc-callout{padding:14px 16px;border-radius:12px;margin:16px 0;border:1px solid}
.tc-callout-head{font:700 13px/1 Poppins,sans-serif;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.tc-tip{background:rgba(107,198,232,.1);border-color:rgba(30,58,138,.2)}.tc-tip .tc-callout-head{color:var(--tc-royal)}
.tc-mistake{background:rgba(232,155,193,.14);border-color:rgba(232,155,193,.45)}.tc-mistake .tc-callout-head{color:#9d2a5a}
.tc-verify{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.3)}.tc-verify .tc-callout-head{color:#065f46}
.tc-table-wrap{overflow-x:auto;margin:14px 0 22px;border-radius:10px;border:1px solid rgba(30,58,138,.12)}
.tc-table{width:100%;min-width:0;border-collapse:collapse;font:400 14.5px/1.5 Inter,sans-serif}
.tc-table th{background:var(--tc-royal);color:#fff;text-align:left;padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.tc-table td{padding:10px 12px;border-top:1px solid rgba(30,58,138,.08);vertical-align:top}
.tc-table tr:nth-child(even) td{background:var(--tc-mist)}
.tc-svg-wrap{background:var(--tc-mist);border-radius:14px;padding:22px 16px;margin:24px 0;border:1px solid rgba(30,58,138,.1);width:100%;max-width:100%}
.tc-svg-title{font:600 12px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--tc-ink-3);margin-bottom:10px}
.tc-svg-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.tc-svg-caption{font:400 13.5px/1.5 Inter,sans-serif;color:var(--tc-ink-3);margin-top:10px}
.tc-photo{margin:22px 0;border-radius:14px;overflow:hidden;border:1px solid rgba(30,58,138,.1);background:var(--tc-mist);width:100%;max-width:100%}
.tc-photo-label{font:600 12px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--tc-ink-3);padding:12px 14px 0}
.tc-photo img{display:block;width:100%;max-width:100%;height:auto;object-fit:cover}
.tc-photo figcaption{font:400 13.5px/1.5 Inter,sans-serif;color:var(--tc-ink-3);padding:10px 14px 14px}
.tc-steps{counter-reset:step;list-style:none;padding:0;margin:0 0 18px}
.tc-steps>li{position:relative;padding:14px 14px 14px 58px;margin:0 0 10px;background:#fff;border:1px solid rgba(30,58,138,.12);border-radius:12px}
.tc-steps>li::before{counter-increment:step;content:counter(step);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--tc-royal);color:#fff;font:700 13px/30px Poppins,sans-serif;text-align:center}
.tc-steps h4{margin:0 0 6px}
.tc-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 18px}
@media(max-width:640px){.tc-card-grid{grid-template-columns:1fr}}
.tc-mini{background:#fff;border:1px solid rgba(30,58,138,.12);border-radius:12px;padding:14px}
.tc-mini h4{margin:0 0 6px;font:700 14px/1.3 Poppins,sans-serif;color:var(--tc-royal)}
.tc-mini p{margin:0;font-size:14px;color:var(--tc-ink-2)}
.tc-footer{background:var(--tc-navy);color:#cbd5e1;padding:28px 24px;margin-top:36px}
.tc-footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:13.5px}
.tc-footer a{color:#93c5fd}.tc-tagline{font:700 15px/1.3 Poppins,sans-serif;color:#fff}
.tc-assess{background:linear-gradient(180deg,#fff,var(--tc-mist));border:2px solid var(--tc-royal);border-radius:16px;padding:22px 18px;margin:36px 0 20px}
.tc-assess-head{font:700 1.3rem/1.3 Poppins,sans-serif;color:var(--tc-royal);margin:0 0 6px}
.tc-q{margin-bottom:12px;padding:12px;background:#fff;border-radius:10px;border:1px solid rgba(30,58,138,.1)}
.tc-q-num{display:inline-block;background:var(--tc-royal);color:#fff;padding:3px 8px;border-radius:6px;font:600 12px/1 Inter,sans-serif;margin-bottom:6px}
.tc-opts{display:flex;flex-direction:column;gap:7px}
.tc-opt{display:flex;gap:10px;padding:9px 11px;border:1.5px solid rgba(30,58,138,.15);border-radius:8px;cursor:pointer}
.tc-opt.selected{border-color:var(--tc-royal);background:rgba(30,58,138,.04)}
.tc-opt.correct{border-color:var(--tc-ok);background:rgba(16,185,129,.1)}
.tc-opt.incorrect{border-color:var(--tc-err);background:rgba(239,68,68,.08)}
.tc-reason{display:none;margin-top:8px;padding:10px;background:var(--tc-mist);border-left:4px solid var(--tc-cyan);border-radius:6px;font-size:14px}
.tc-reason.visible{display:block}
.tc-submit-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.tc-btn{border:none;border-radius:10px;padding:11px 16px;font:700 14px/1 Inter,sans-serif;cursor:pointer}
.tc-btn-primary{background:var(--tc-royal);color:#fff}
.tc-btn-sec{background:#fff;color:var(--tc-royal);border:1.5px solid var(--tc-royal)}

/* Desktop full-width layout (not mobile-column look) */
html,body{width:100%;max-width:100%;}
.tc-shell{width:100%;}
@media (min-width:961px){
  .tc-hero{padding:64px 40px 16px;}
  .tc-body{padding:12px 40px 96px;}
  .tc-body p,.tc-qa-a,.tc-lede{max-width:none;}
  .tc-h1{font-size:clamp(2.2rem,3.2vw,2.85rem);}
  .tc-card-grid{grid-template-columns:1fr 1fr;gap:18px;}
  .tc-toc ol{columns:2;column-gap:32px;}
  .tc-svg-scroll svg{min-width:0!important;width:100%!important;height:auto!important;}
  .tc-photo img{min-height:280px;}
  .tc-table-wrap{overflow-x:visible;}
  .tc-assess{padding:28px 28px;}
}
@media (min-width:1280px){
  .tc-header-inner,.tc-hero,.tc-outcomes,.tc-toc,.tc-body,.tc-footer-inner{max-width:1280px;}
  .tc-body{padding-left:48px;padding-right:48px;}
  .tc-hero{padding-left:48px;padding-right:48px;}
}
@media (max-width:960px){
  .tc-hero,.tc-outcomes,.tc-toc,.tc-body{max-width:100%;padding-left:18px;padding-right:18px;}
  .tc-header-inner{padding:12px 16px;}
  .tc-toc ol{columns:1;}
}

@media(max-width:760px){html,body{overflow-x:clip}.tc-svg-scroll svg{min-width:0!important;width:100%!important}img,svg,table{max-width:100%}}