.skip-link{position:absolute;right:-9999px;top:8px;z-index:9999;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.skip-link:focus{right:8px}

  --bg:#fff7ec; --panel:#ffffff; --line:#ffd9a0;
  --ink:#3a2a12; --muted:#9a7a4a; --accent:#ff8a3d; --accent2:#ff5fa2;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(255,95,162,.10), transparent),
    radial-gradient(1000px 400px at 0% 0%, rgba(255,138,61,.12), transparent),
    var(--bg);
  color:var(--ink); font-family:'Heebo',system-ui,sans-serif; line-height:1.75;
  -webkit-font-smoothing:antialiased; min-height:100vh; padding:24px 16px 80px;
}
.wrap{max-width:820px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:24px;
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  padding:8px 18px;border-radius:999px;background:rgba(255,138,61,.10)}
.brand .dot{width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2))}
.back{text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));
  padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;box-shadow:0 18px 40px rgba(255,138,61,.10)}
h1{font-family:'Fraunces',serif;font-size:30px;font-weight:600;margin-bottom:6px;line-height:1.2}
.updated{color:var(--muted);font-size:13px;margin-bottom:20px}
h2{font-size:19px;margin:26px 0 8px;color:#7a4a18}
p,li{font-size:15.5px;color:#4a3418}
ul{padding-inline-start:22px;margin:8px 0}
li{margin:4px 0}
a{color:var(--accent2)}
.note{margin-top:26px;padding:14px 16px;border-radius:12px;background:#fff7ec;
  border:1px dashed var(--line);font-size:13.5px;color:var(--muted)}
.navlinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;justify-content:center}
.navlinks a{text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);
  padding:8px 14px;border-radius:999px;font-size:13px}

/* --- a11y floating widget --- */
#a11yFab{position:fixed;bottom:20px;left:20px;z-index:9998;width:56px;height:56px;border-radius:50%;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 8px 22px rgba(255,95,162,.35);transition:transform .2s,box-shadow .2s}
#a11yFab:hover{transform:scale(1.07);box-shadow:0 10px 28px rgba(255,95,162,.45)}
#a11yFab svg{width:30px;height:30px}
#a11yPanel{position:fixed;bottom:88px;left:20px;z-index:9999;width:290px;max-width:calc(100vw - 40px);
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 16px 44px rgba(58,42,18,.22);padding:18px;display:none;
  font-family:'Heebo',sans-serif;color:var(--ink)}
#a11yPanel.on{display:block;animation:a11yIn .2s ease}
@keyframes a11yIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#a11yPanel h2{font-size:16px;font-weight:800;margin-bottom:4px}
#a11yPanel .a11y-sub{font-size:12px;color:var(--muted);margin-bottom:14px}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.a11y-row span{font-size:14px;font-weight:600}
.a11y-steps{display:flex;align-items:center;gap:8px}
.a11y-steps button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:#fff7ec;color:var(--ink);font-size:18px;font-weight:800;cursor:pointer;line-height:1}
.a11y-steps button:hover{border-color:var(--accent);color:var(--accent)}
.a11y-steps b{min-width:42px;text-align:center;font-size:13px;color:var(--muted)}
.a11y-toggle{flex:1;text-align:start;border:1px solid var(--line);background:#fff7ec;
  color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.a11y-toggle.on{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.a11y-reset{width:100%;margin-top:6px;border:none;border-radius:10px;padding:10px;
  background:var(--accent);color:#fff;font:inherit;font-weight:700;cursor:pointer}
body.a11y-contrast{filter:contrast(1.35)}
body.a11y-links a{text-decoration:underline!important}
body.a11y-readable,body.a11y-readable *{font-family:Arial,Helvetica,sans-serif!important;letter-spacing:.3px!important}