/* The language pages (tools/lang-pages.py): the landing page's palette and window, as the terms page has them. */
@font-face { font-family: "Bowlby One"; src: url(/assets/fonts/bowlbyone.woff2) format("woff2"); font-display: swap; }
:root { --cobalt: #338ed8; --marigold: #efa307; --amber: #f5ba3b; --sunflower: #fdcb5e; --indigo-deep: #2a2566; --night: #17143d; --lilac: #d6d2f8; --splash-yellow: #f7dd1a; --ink: #000; --cyan: #44e4ff;
  --display: "Bowlby One", "Arial Black", Impact, sans-serif; --text: Verdana, Tahoma, "DejaVu Sans", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); color: #fff; font: 15px/1.6 var(--text); -webkit-text-size-adjust: 100%;
  background: var(--cobalt) radial-gradient(circle at 104% 62%, #ffd45e 0 18vmax, var(--amber) 18vmax 25vmax, var(--marigold) 25vmax 32vmax, transparent 32vmax) fixed; }
a { color: inherit; }
.skip { position: absolute; left: 16px; top: -100px; background: var(--sunflower); color: var(--ink); padding: 10px 14px; font-weight: bold; }
.skip:focus { top: 16px; }
.site { max-width: 900px; margin: 24px auto 40px; background: var(--indigo-deep); border: 2px solid; border-color: #8a83e0 #0d0b26 #0d0b26 #8a83e0; outline: 1px solid var(--ink); box-shadow: 10px 10px 0 rgba(0, 0, 0, .35); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 10px 20px; background: var(--night); border-bottom: 2px solid var(--ink); }
.wordmark { font: 22px/1 var(--display); color: var(--splash-yellow); text-decoration: none; }
.wordmark img { display: inline-block; width: 32px; height: 32px; margin-right: 10px; vertical-align: -8px; image-rendering: pixelated; }
.top ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bevel, .play { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; background: #2c2770; color: var(--sunflower); font: bold 13px/1 var(--text); text-decoration: none;
  border: 2px solid; border-color: #5f58c4 #0d0b26 #0d0b26 #5f58c4; outline: 1px solid var(--ink); }
.bevel:hover { background: #3a348a; }
.bevel[aria-current] { background: #8fd3fb; color: var(--ink); border-color: #e1f4ff #2a6f9c #2a6f9c #e1f4ff; }
.play { padding: 0 22px; min-height: 52px; font-size: 17px; background: #8fd3fb; color: var(--ink); border-color: #e1f4ff #2a6f9c #2a6f9c #e1f4ff; }
.play:hover { background: #b5e3fd; }
main { padding: 0 24px 30px; }
h1 { font: 30px/1.1 var(--display); color: var(--ink); margin: 0 -24px 20px; padding: 14px 24px 12px; background: linear-gradient(90deg, var(--cyan) 0, #a6f7ff 32%, #fff27a 68%, var(--sunflower) 100%); }
h2 { font: bold 18px/1.3 var(--text); margin: 26px 0 6px; }
h3 { font: bold 15px/1.4 var(--text); margin: 16px 0 2px; color: var(--sunflower); }
main p, main li, main dd { max-width: 68ch; color: var(--lilac); }
main p { margin: 0 0 10px; }
.lede { font-size: 17px; }
main a:not(.play) { color: var(--sunflower); }
.keys { display: grid; grid-template-columns: minmax(0, max-content) 1fr; gap: 6px 16px; margin: 0; }
.keys dt { font: bold 13px/1.6 "Courier New", Courier, monospace; color: var(--ink); background: var(--sunflower); padding: 0 8px; justify-self: start; overflow-wrap: anywhere; }
.keys dd { margin: 0; }
footer { padding: 18px 24px 22px; border-top: 2px solid var(--ink); background: var(--night); font-size: 12px; color: var(--lilac); }
footer p { margin: 0 0 8px; max-width: 90ch; }
footer .end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 14px; }
footer .end a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
footer .langs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 8px; }      /* the language switcher (tools/lang-pages.py) */
footer .langs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 700px) { .site { margin: 0; border: 0; outline: 0; box-shadow: none; } .top { padding: 10px 16px; } .wordmark { font-size: 18px; } main { padding: 0 16px 26px; } h1 { font-size: 24px; margin: 0 -16px 18px; padding: 12px 16px 10px; } footer { padding: 18px 16px 22px; } .keys { grid-template-columns: 1fr; gap: 2px; } .keys dd { margin: 0 0 10px; } }