body { margin:0; background:#ececec; color:#222; font-family:Arial,Helvetica,sans-serif; }
    .topbar { background:#222; color:#fff; text-align:center; padding:50px 16px 18px; }
    .topbar .site-title { margin:0 0 8px; font-size:18px; line-height:1.15; font-weight:700; }
    .topbar .site-title a { color:#fff; text-decoration:none; }
    .topbar .site-title a:hover { text-decoration:underline; }
    .topbar h1 { margin:0; font-size:20px; line-height:1.15; font-weight:700; color:#fff; }
    .topbar .mini { margin-top:6px; font-size:14px; line-height:1.2; }
    .topbar .mini a { color:#fff; text-decoration:none; border-bottom:none; }
    .sections-bar { background:#333; color:#fff; padding:10px 16px; font-size:14px; text-align:center; line-height:1.2; }
    .sections-bar a { color:#fff; text-decoration:none; margin:0 8px; white-space:nowrap; display:inline-block; border-bottom:none; }
    .sections-bar a:hover { border-bottom-color:transparent; }
    .sections-bar a.active { font-weight:700; color:#FFD500; border-bottom-color:transparent; }
    .page { max-width:1200px; margin:24px auto 70px; padding:0 12px; text-align:center; }
    .page h2 { margin:0 0 18px; font-size:28px; font-weight:500; line-height:1.2; color:#222; }
    .main { display:inline-flex; align-items:flex-start; justify-content:center; gap:43px; flex-wrap:nowrap; text-align:left; }
    .visual { width:700px; max-width:calc(100vw - 40px); }
    .twentytwenty-container { background:#fff; }
    .twentytwenty-container img { width:100%; height:auto; display:block; }
    .copy { width:278px; max-width:calc(100vw - 40px); font-size:14px; line-height:1.25; color:#222; }
    .copy p { margin:0 0 10px; }
    .copy strong { font-weight:700; }
    .under-row { width:calc(700px + 43px + 278px); max-width:calc(100vw - 40px); margin:12px auto 0; display:grid; grid-template-columns:700px 43px 278px; align-items:center; }
    .slide-hint { grid-column:1; font-size:12px; color:#666; text-align:left; justify-self:start; }
    .under-row .pager { grid-column:3; margin-top:0; justify-self:center; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
    .pager a, .pager span { display:inline-block; border:1px solid #bfbfbf; background:#f4f4f4; color:#222; text-decoration:none; padding:5px 10px; border-radius:3px; font-size:12px; line-height:1.1; }
    .pager span.disabled { color:#888; background:#ececec; border-color:#d6d6d6; }
    .foot { position:fixed; left:0; right:0; bottom:10px; text-align:center; color:#666; font-size:11px; padding:0 10px; pointer-events:none; }
    @media (max-width:1040px) {
      .main { flex-wrap:wrap; gap:14px; }
      .copy { width:700px; max-width:calc(100vw - 40px); font-size:14px; line-height:1.3; }
      .under-row { width:700px; max-width:calc(100vw - 40px); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
      .under-row .pager { justify-self:auto; }
      .page h2 { font-size:24px; }
    }
  
    /* portrait-style: reduce image/container height by scaling image area to ~2/3 */
    body.portrait-style .visual {
      width: 467px;
    }
    body.portrait-style .under-row {
      width: calc(467px + 43px + 278px);
      grid-template-columns: 467px 43px 278px;
    }