:root{--bg:#f7faf8;--ink:#1f2933;--muted:#52606d;--line:#d9e2dc;--card:#fff;--brand:#087458;--accent:#2a6eb7}
    *{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
    .wrap{width:min(1100px,100% - 2rem);margin:0 auto} header{padding:1rem 0;border-bottom:1px solid var(--line);background:#ffffffd9;backdrop-filter:blur(6px);position:sticky;top:0}
    .top{display:flex;justify-content:space-between;align-items:center;gap:1rem} a{color:var(--brand)}
    h1,h2,h3{line-height:1.15} h1{margin:.3rem 0 .6rem} .sub{color:var(--muted);max-width:75ch}
    .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;margin:1rem 0}
    .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem}
    ul{padding-left:1.1rem;margin:.5rem 0} li{margin:.35rem 0}
    .files{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
    .file{display:flex;justify-content:space-between;gap:.8rem;padding:.7rem;border:1px solid var(--line);border-radius:10px;background:#fff}
    .name{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92rem;word-break:break-word}
    .tag{font-size:.75rem;color:#155e4a;background:#e8f5ef;border:1px solid #caeada;border-radius:999px;padding:.12rem .45rem;white-space:nowrap;height:fit-content}
    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
    figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
    figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
    figure.tall{grid-row:span 3;display:flex;flex-direction:column}
    figure.tall img{width:100%;height:100%;object-fit:contain;aspect-ratio:auto;background:#fff}
    figcaption{font-size:.82rem;color:var(--muted);padding:.5rem .6rem}
    .note{background:#eef5ff;border:1px solid #ccdff9;color:#1f3f63;border-radius:10px;padding:.7rem .8rem}
    .btn{display:inline-block;text-decoration:none;background:linear-gradient(120deg,var(--brand),#087458);color:#fff;padding:.6rem .9rem;border-radius:10px;font-weight:700}
    footer{color:var(--muted);padding:1rem 0 1.5rem}
    @media (max-width:900px){.grid,.files,.gallery{grid-template-columns:1fr}}

html{scroll-padding-top:100px}a:focus-visible,summary:focus-visible{outline:3px solid #2a6eb7;outline-offset:4px}
.skip-link{position:absolute;left:1rem;top:-100px;z-index:30;background:#fff;color:#07543f;padding:.75rem;border:2px solid #087458;border-radius:8px}.skip-link:focus{top:1rem}
.lang-switch{display:inline-flex;flex-shrink:0;background:#fff;border:1px solid #dfe6df;border-radius:999px;padding:4px}.lang-switch a{border-radius:999px;padding:.45rem .65rem;text-decoration:none;color:#4a5966;font-weight:700}.lang-switch a.active{background:#087458;color:#fff}
.requirements{padding:1rem;border:1px solid var(--line);border-radius:14px;background:#fff}.requirements li{margin:.5rem 0}
@media(max-width:480px){.topbar-inner{flex-wrap:wrap;justify-content:center;gap:.4rem;padding:.6rem 0}.hero-main{padding:1.2rem}.top{flex-wrap:wrap}.btn{max-width:100%;text-align:center}.hero-main::after{pointer-events:none}h1{overflow-wrap:break-word}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

header{z-index:20}.top .back{margin-left:auto}
