@font-face {
  font-family: Caveat;
  src: url('fonts/caveat/Caveat.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

body.notebook {
  --paper: #fff;
  --work: #f5f8fc;
  --ink: #243442;
  --muted: #576675;
  --line: #d8e3ef;
  --frame: #adc0d3;
  --field: #1467b7;
  --pen: #1467b7;
  --marker: #f3dc62;
  --accent: #1467b7;
  --accent-hover: #10569a;
  --identity: #243442;
  --focus: #1467b7;
  --ok: #1467b7;
  --ok-soft: #f2f7fc;
  --no: #963d32;
  --no-soft: #fff7f5;
  --sketch-paper: #fff;
  --sketch-accent: #1467b7;
  --sketch-soft: #adc0d3;
  background-color: var(--paper);
  background-image: none;
}

.notebook.paper-grid {
  background-image:
    linear-gradient(#e2ecf8 1px, transparent 1px),
    linear-gradient(90deg, #e2ecf8 1px, transparent 1px);
  background-size: 24px 24px;
}
.notebook.paper-grid main.wrap { position: relative; }
.notebook.paper-grid main.wrap::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  width: 1px;
  background: #d5b9b2;
  pointer-events: none;
}

.notebook h1, .notebook h2 {
  font-family: Caveat, 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  color: var(--accent);
}
.notebook h1 { font-size: 38px; }
.notebook h2 { font-size: 30px; }
.notebook .item h2, .notebook .item h3 { font: 600 18px/26px 'IBM Plex Sans', sans-serif; color: var(--ink); }
.notebook .error-summary h2 { font: 600 18px/24px 'IBM Plex Sans', sans-serif; color: inherit; }
.notebook .answer > label, .notebook .answer legend {
  font: 600 24px/24px Caveat, 'IBM Plex Sans', sans-serif;
  color: var(--accent);
}
.notebook .answer .choice { font: 400 16px/24px 'IBM Plex Sans', sans-serif; color: var(--ink); }

.notebook .site-header {
  position: relative;
  z-index: 20;
  background: #fff;
  border: 0;
}
.notebook .main-nav > a, .notebook .account-nav > a { color: var(--pen); }
.notebook .main-nav > a.on, .notebook .account-nav > a.on { text-decoration: none; }
.notebook .main-nav > a.on > span, .notebook .account-nav > a.on > span { position: relative; }
.notebook .main-nav > a.on > span::after, .notebook .account-nav > a.on > span::after {
  content: none;
  position: absolute;
  left: 1px;
  right: 0;
  bottom: -5px;
  height: 5px;
  border-bottom: 2px solid var(--accent);
  border-radius: 30% 50% 40% 45%;
  transform: rotate(-1deg);
  pointer-events: none;
}
.notebook .main-nav .random-link { position: relative; background: transparent; border-radius: 4px; }
.notebook .main-nav .random-link::before {
  content: none;
  position: absolute;
  inset: 1px;
  border: 1px solid var(--accent);
  border-radius: 8px 4px 9px 4px / 4px 8px 4px 8px;
  transform: rotate(-.6deg);
  pointer-events: none;
}
.notebook .main-nav .random-link:hover { background: linear-gradient(transparent 35%,#f3dc6266 35%,#f3dc6266 78%,transparent 78%); text-decoration: none; }
.notebook .main-nav .random-link:active { background: none; }
.notebook .owner-menu > div { border-radius: 3px; box-shadow: 2px 3px 0 #30332f10; }

.notebook .btn { border-radius: 3px 5px 3px 4px; box-shadow: 0 2px 0 #1d2d3926; }
.notebook .btn:active { background: #1d2d39; border-color: #1d2d39; box-shadow: inset 0 1px 2px #00000026; }
.notebook .btn.line { color: var(--accent); background: var(--paper); border-color: var(--field); box-shadow: none; }
.notebook .btn.line:hover { color: var(--accent); background: #e8e7e2; border-color: var(--accent); }
.notebook .btn.line:active { color: #1d2d39; background: #dedfd7; border-color: #1d2d39; }
.notebook .btn.danger { background: var(--no); border-color: var(--no); }
.notebook .btn.danger:hover { background: #87332c; border-color: #87332c; }
.notebook .btn.danger:active { background: #712922; border-color: #712922; }
.notebook .btn:disabled, .notebook .btn:disabled:hover, .notebook .btn:disabled:active {
  background: #edede6;
  color: #82867e;
  border-color: #b3b7ac;
  box-shadow: none;
  opacity: 1;
}

.notebook select, .notebook textarea,
.notebook .form input:not([type=radio]):not([type=checkbox]):not([type=file]),
.notebook .settings-section input:not([type=radio]):not([type=checkbox]):not([type=file]),
.notebook .field, .notebook .password-toggle {
  border-radius: 3px;
  background-color: #fdfcf9;
  box-shadow: inset 0 1px 1px #30332f05;
}
.notebook select:hover, .notebook textarea:hover, .notebook .field:hover { border-color: var(--accent); }
.notebook input[type=checkbox], .notebook input[type=radio] { accent-color: var(--accent); }
.notebook :focus-visible { outline-color: var(--focus); }
.notebook [aria-invalid=true], .notebook .field:has([aria-invalid=true]),
.notebook .field:has([aria-invalid=true]):hover { border-color: var(--no); }
.notebook .field:has([aria-invalid=true]) { background-color: #fdf7f3; }
.notebook :is(.form, .settings-section) input[aria-invalid=true]:not([type=radio]):not([type=checkbox]):not([type=file]),
.notebook select[aria-invalid=true], .notebook textarea[aria-invalid=true] { border-color: var(--no); }
.notebook input:disabled, .notebook select:disabled, .notebook textarea:disabled { background: #edede6; color: #82867e; }
.notebook .password-toggle:hover { background: #e8e7e2; }
.notebook .settings-section > p { overflow-wrap: anywhere; }

.notebook .answer { background: var(--work); box-shadow: inset 3px 0 0 #b2b8ac; }
.notebook .verdict { border-radius: 2px; }
.notebook .verdict.ok { box-shadow: inset 2px 0 0 var(--ok); }
.notebook .verdict.no { box-shadow: inset 2px 0 0 var(--no); }
.notebook .verdict.neutral { box-shadow: inset 2px 0 0 var(--accent); }
.notebook .error-summary { border-left-width: 3px; }
.notebook .messages .msg { border-left-color: var(--accent); }

.notebook .text a, .notebook .source a, .notebook .byline a,
.notebook .hint a, .notebook .crumbs a, .notebook .next-alternatives a,
.notebook .home-catalog a, .notebook .daily-heading > a,
.notebook .login-help a, .notebook .policy-text a { color: #3f5b70; }
.notebook .text a:visited, .notebook .source a:visited, .notebook .byline a:visited,
.notebook .hint a:visited, .notebook .item .num:visited { color: #71564c; }
.notebook .source a, .notebook .hint a { text-decoration-color: currentColor; }
.notebook .sort a.on { text-decoration-color: var(--accent); }
.notebook .item { border-color: var(--frame); border-radius: 2px; background-color: var(--paper); }
.notebook .item .num, .notebook .item .num:visited { color: var(--pen); }
.notebook .chip b { color: var(--ink); }
.notebook .heat .l1, .notebook .legend .l1 { background: #d5d6ce; }
.notebook .heat .l2, .notebook .legend .l2 { background: #a1a59b; }
.notebook .heat .l3, .notebook .legend .l3 { background: #62665f; }
.notebook .heat .l4, .notebook .legend .l4 { background: #30332f; }
.notebook footer { background: #fff; }

@media (width >= 1180px) {
  .notebook .hero, .notebook .problem-page { position: relative; }
  .notebook .hero::after, .notebook .problem-page::after {
    content: '';
    position: absolute;
    top: 58px;
    right: -142px;
    width: 124px;
    height: 110px;
    background: url('identity/pencil-sketch.webp') center / contain no-repeat;
    opacity: .75;
    pointer-events: none;
  }
}

@media (width < 640px) {
  .notebook h1 { font-size: 34px; }
  .notebook h2 { font-size: 28px; }
  .notebook .item h2 { font-size: 16px; }
  .notebook .error-summary h2 { font-size: 18px; }
}

@media (forced-colors: active) {
  .notebook, .notebook.paper-grid, .notebook .site-header { background-image: none; }
  .notebook .main-nav .random-link::before { border-color: ButtonText; }
  .notebook .main-nav > a.on > span::after, .notebook .account-nav > a.on > span::after { border-color: LinkText; }
  .notebook .btn { box-shadow: none; }
}

.notebook .header-random-form { margin: 0; }
.notebook .main-nav .header-random-form .random-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 0; border: 0; border-radius: 0; background: none; color: var(--pen); font: 400 14px/20px 'IBM Plex Sans',sans-serif; white-space: nowrap; cursor: pointer; }
.notebook .main-nav .header-random-form .random-link::before { content: none; }
.notebook .main-nav .header-random-form .random-link:hover { background: linear-gradient(transparent 35%,#f3dc6266 35%,#f3dc6266 78%,transparent 78%); }
.notebook .main-nav .header-random-form .random-link:focus-visible { outline: 0; background: none; box-shadow: 0 3px var(--pen,var(--accent)); }
.notebook .account-nav .user > span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
@media (width < 640px) {
  .main-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .notebook .main-nav > a { min-width: 0; white-space: normal; }
  .notebook .main-nav .header-random-form .random-link { width: 100%; min-height: 44px; gap: 4px; font-size: 13px; line-height: 16px; white-space: normal; text-align: left; }
  .header-random-form span { min-width: 0; }
}