*,*::before,*::after{box-sizing:border-box}
:root{--eng-bg:#f5f7fa;--eng-surface:#fff;--eng-surface-2:#eef2f6;--eng-text:#17202a;--eng-muted:#52616f;--eng-border:rgba(23,32,42,.16);--eng-orange:#f28c28;--eng-orange-dark:#c86c13;--eng-shadow:0 14px 30px rgba(15,23,42,.10);--eng-radius:20px}
@media (prefers-color-scheme: dark){:root{--eng-bg:#111820;--eng-surface:#18212b;--eng-surface-2:#22303d;--eng-text:#f4f7fb;--eng-muted:#b9c4d0;--eng-border:rgba(255,255,255,.18);--eng-shadow:0 16px 34px rgba(0,0,0,.35)}}
html,body{max-width:100%}
body{margin:0;font-family:"Trebuchet MS",Arial,sans-serif;background:var(--eng-bg);color:var(--eng-text);overflow-x:hidden;line-height:1.5}
img{max-width:100%;display:block}
.container{width:min(1100px,92vw);margin:0 auto;padding:14px 0 calc(22px + env(safe-area-inset-bottom))}
.banner{width:100%;height:clamp(170px,24vh,300px);object-fit:cover;object-position:center;border-radius:20px;box-shadow:var(--eng-shadow);margin:6px 0 14px}
.intro,.card,details{background:var(--eng-surface);border:1px solid var(--eng-border);border-radius:var(--eng-radius);padding:18px;box-shadow:var(--eng-shadow)}
.grid,.topic-grid{display:grid;gap:14px}.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.stack-gap{margin-top:14px}.menu-label{margin-top:10px}
.card{transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease;text-decoration:none;color:inherit;min-height:74px}
.card:hover,.card:focus-visible{transform:translateY(-2px);border-color:rgba(242,140,40,.5);box-shadow:0 16px 36px rgba(15,23,42,.16)}
.card:active{transform:translateY(0)}
.card-featured{border:2px solid var(--eng-orange);box-shadow:0 18px 40px rgba(242,140,40,.22),var(--eng-shadow)}
.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--eng-orange);color:#111;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:800;border:2px solid transparent;min-height:48px}
.cta:hover{background:var(--eng-orange-dark);color:#fff;transform:translateY(-1px)}
.cta:focus-visible{outline:3px solid var(--eng-orange);outline-offset:2px}
.cta:active{transform:translateY(0)}
.cta.soon,[aria-disabled="true"].cta{background:var(--eng-surface-2);color:var(--eng-muted);border-color:var(--eng-border);pointer-events:none;cursor:not-allowed;opacity:.95}
.muted,.meta-text{color:var(--eng-muted);font-size:.95rem}.back-link{display:inline-block;margin-top:14px}
details{margin-top:14px} details summary{font-weight:800;cursor:pointer}
:focus-visible{outline:3px solid var(--eng-orange);outline-offset:2px}