@layer reset{
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
}

@layer theme{
:root{
--bg:#f2f5fa;
--surface:#ffffff;
--text:#18202f;
--accent:#4d65ff;
--accent-light:#e7e9ff;
--radius:.9rem;
--shadow:0 6px 18px rgba(0,0,0,.06);
--fast:.25s;
}

@media(prefers-color-scheme:dark){
:root{
--bg:#11141d;
--surface:#1a1f2c;
--text:#e8ecf7;
--accent:#6f79ff;
--accent-light:#2e3350;
--shadow:0 6px 18px rgba(0,0,0,.45);
}}
}

@layer base{
body{background:var(--bg);color:var(--text);font-family:"Nunito Sans",Arial,sans-serif;line-height:1.75;transition:background var(--fast),color var(--fast)}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.85}
h1,h2,h3,h4{font-weight:700;line-height:1.3;color:var(--accent)}
h1{font-size:clamp(1.9rem,2.5vw+1.3rem,2.7rem)}
h2{font-size:clamp(1.45rem,1.6vw+1rem,2rem);margin-top:2.6rem;margin-bottom:1rem}
h3{font-size:1.3rem;margin-top:2rem;margin-bottom:.85rem}
h4{font-size:1.1rem;margin-top:1.6rem;margin-bottom:.6rem}
p,ul,ol,table{margin-bottom:1.25rem}
ul,ol{padding-left:1.4rem}
img{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
}

@layer layout{
.banner{height:4.5rem;background:linear-gradient(90deg,var(--accent) 0,var(--accent-light) 100%)}
.container{max-width:78rem;margin-inline:auto;padding:2rem 1rem}
.article iframe.movie{width:100%;height:360px;border:0;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:2rem}
.article table{width:100%;border-collapse:collapse;box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.article th,.article td{padding:.9rem 1.1rem;text-align:left}
.article th{background:var(--accent);color:#fff}
.article tr:nth-child(odd) td{background:var(--accent-light)}
.footer{text-align:center;padding:1.8rem 1rem;background:var(--surface);color:var(--text);margin-top:4rem}
@media(max-width:700px){
.article iframe.movie{height:240px}
}
}