.ui-icon { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.22em; flex-shrink: 0; color: inherit; }
.game-icon .ui-icon,.w-12 .ui-icon,.w-14 .ui-icon,.home-game > span .ui-icon { width: 30px; height: 30px; }
nav .ui-icon { margin-right: 5px; }
.menu-toggle { display: none; }
.paper-sheet,dialog.note-dialog {
  position: relative; isolation: isolate;
  background-color: #FFF6CC;
  background-image: repeating-linear-gradient(0deg,transparent 0 27px,rgb(138 187 230 / .15) 27px 28px),radial-gradient(rgb(15 23 42 / .055) .6px,transparent .8px);
  background-size: auto,5px 5px;
  border: 2px solid #0F172A; border-radius: 18px 9px 20px 12px;
  box-shadow: 4px 5px 0 #FFFDF5,5px 6px 0 #0F172A,9px 10px 0 #8ABBE6,10px 11px 0 #0F172A;
}
.paper-sheet::before,dialog.note-dialog::before {
  content: ''; position: absolute; right: 24px; top: 12px; width: 15px; height: 42px;
  border: 3px solid #0F172A; border-radius: 12px; transform: rotate(12deg);
  box-shadow: inset 2px 0 0 #FFFDF5,2px 1px 0 rgb(15 23 42 / .12); pointer-events: none;
}
main > header.paper-sheet { padding-top: 64px; margin-bottom: 56px; }
.science-page main > section:not(.paper-sheet) { background: transparent; padding-inline: 0; }
.science-page main .paper-sheet {
  background-color: #FFF6CC;
  border: 2px solid #0F172A;
  border-radius: 18px 9px 20px 12px;
  box-shadow: 4px 5px 0 #FFFDF5,5px 6px 0 #0F172A,9px 10px 0 #8ABBE6,10px 11px 0 #0F172A;
  padding: 64px clamp(18px,3vw,32px) 28px;
}
.science-page .science-visual { align-self: stretch; }
.science-page main > section > .paper-sheet + .paper-sheet { margin-top: 40px; }
.science-page main > section.grid > .paper-sheet + .paper-sheet { margin-top: 0; }
.science-page .paper-sheet .metric-heading { gap: 12px; }
.science-page .font-serif { font-family: var(--font-professional); }
.science-page .fokito-companion.paper-sheet::before { height: 32px; }
.science-page main .fokito-companion.paper-sheet { padding-top: 52px; }
dialog.note-dialog { position: fixed; inset: 0; width: min(560px,calc(100vw - 48px)); max-height: calc(100dvh - 72px); margin: auto; padding: 58px clamp(22px,5vw,36px) 28px; overflow-y: auto; }
dialog.note-dialog h2 { font: 800 clamp(23px,5vw,30px)/1.25 var(--font-brand); margin: 0 0 18px; overflow-wrap: anywhere; }
dialog.note-dialog p { font: 15px/1.7 var(--font-professional); margin: 0; overflow-wrap: anywhere; }
dialog.note-dialog form { margin-top: 22px; }
dialog.note-dialog button { margin: 0; min-height: 46px; padding: 12px 24px; font: 800 16px var(--font-brand); border-radius: 12px 8px 14px 9px; box-shadow: 3px 3px 0 #0F172A; }
@media(max-width: 700px) {
  nav > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  nav > div > a { flex: 1 1 0; gap: 8px; }
  nav .brand-logo { width: clamp(92px,24vw,135px); }
  nav > div > a > div { max-width: 100px; }
  nav > div > a.group > div span.font-sans { font-size: 8px; letter-spacing: .01em; overflow-wrap: normal; word-break: normal; line-height: 1.65; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; width: 52px; min-height: 52px; margin-left: auto; padding: 7px; border: 2px solid #0F172A; border-radius: 12px 8px 13px 9px; background: #2DD4BF; color: #0F172A; font: 700 10px var(--font-professional); cursor: pointer; }
  nav.nav-enhanced > div > div.site-menu { display: none; }
  nav.nav-enhanced.menu-is-open > div > div.site-menu { display: grid; grid-template-columns: minmax(0,1fr); flex-basis: 100%; padding: 14px 0 4px; border-top: 1px dashed #0F172A; }
  nav .site-menu a { justify-content: flex-start; padding: 12px 16px; }
  .menu-is-open .menu-icon { transform: rotate(90deg); }
  .menu-icon { transition: transform 180ms ease-out; }
}
@media(prefers-reduced-motion:reduce) { .menu-icon { transition: none; } }