html {
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

a,
p,
li,
h1,
h2,
h3,
h4,
div,
span,
button {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.kw-drop-menu {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  max-width: min(320px, calc(100vw - 32px));
  white-space: normal;
}

.kw-drop.kw-open .kw-drop-menu {
  display: block !important;
}

.kw-drop-menu a {
  white-space: normal !important;
  overflow-wrap: normal;
}

.modal-overlay {
  padding: 16px !important;
}

.modal {
  max-width: min(440px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

#toast {
  max-width: calc(100vw - 32px);
  white-space: normal !important;
  text-align: center;
}

#tab-bar {
  scrollbar-width: thin;
}

#tab-bar > div {
  width: max-content;
  min-width: 100%;
}

#notebook-panel {
  max-width: 100vw;
}

@media (max-width: 1024px) {
  body > div[style*="position:sticky"][style*="height:64px"],
  body > div > div[style*="position:sticky"][style*="height:64px"] {
    height: auto !important;
    min-height: 64px;
    padding: 10px 24px !important;
    gap: 10px 18px !important;
    flex-wrap: wrap !important;
  }

  body > div[style*="position:sticky"][style*="height:62px"] {
    padding: 8px 20px !important;
  }

  div[style*="padding:88px 56px 72px"] {
    padding: 72px 32px 64px !important;
  }

  div[style*="padding:72px 32px 96px"],
  div[style*="padding:72px 56px"],
  div[style*="padding:80px 56px"],
  div[style*="padding:56px 32px 0"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  div[style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1.4fr 1fr 1fr !important;
  }

  div[style*="grid-template-columns:1fr 1fr;gap:60px"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

@media (max-width: 820px) {
  body > div[style*="position:sticky"][style*="height:64px"] > div,
  body > div > div[style*="position:sticky"][style*="height:64px"] > div {
    gap: 14px !important;
  }

  div[style*="max-width:1080px"][style*="display:grid"],
  div[style*="max-width:900px"][style*="display:grid"],
  div[style*="grid-template-columns:repeat(auto-fit,minmax(230px,1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #how div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #how .howcard {
    padding: 24px 22px !important;
  }

  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns:110px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 3px 0 !important;
  }

  div[style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  div[style*="display:grid"][style*="gap:44px"] {
    gap: 28px !important;
  }

  div[style*="padding:40px 44px"] {
    padding: 32px 28px !important;
  }

  div[style*="padding:64px 24px"],
  div[style*="padding:64px 32px"],
  div[style*="padding:56px 32px"] {
    padding-top: 48px !important;
    padding-bottom: 72px !important;
  }
}

@media (max-width: 640px) {
  body {
    line-height: 1.65;
  }

  body > div[style*="position:sticky"][style*="height:64px"],
  body > div > div[style*="position:sticky"][style*="height:64px"] {
    align-items: flex-start !important;
    padding: 10px 14px 12px !important;
  }

  body > div[style*="position:sticky"][style*="height:64px"] > a,
  body > div > div[style*="position:sticky"][style*="height:64px"] > a {
    width: 100%;
  }

  body > div[style*="position:sticky"][style*="height:64px"] > div,
  body > div > div[style*="position:sticky"][style*="height:64px"] > div {
    width: 100%;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 2px;
    gap: 14px !important;
  }

  body > div[style*="position:sticky"][style*="height:62px"] {
    height: auto !important;
    min-height: 62px;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    padding: 8px 12px !important;
  }

  body > div[style*="position:sticky"][style*="height:62px"] > div:first-child {
    width: 100%;
    white-space: normal !important;
    line-height: 1.35;
  }

  body > div[style*="position:sticky"][style*="height:62px"] > div:last-child {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  #tab-bar {
    top: 96px !important;
  }

  .tab-btn {
    min-width: 78px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
  }

  .kw-drop-menu {
    display: none !important;
    position: fixed !important;
    top: 96px !important;
    left: auto !important;
    right: 12px !important;
    transform: none;
    width: min(300px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: min(72dvh, 420px);
    overflow-y: auto;
    margin-top: 0 !important;
    padding: 8px !important;
    border: 1px solid #3a2a1c !important;
    border-radius: 6px !important;
    background: #241a12 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.5) !important;
    z-index: 1000;
  }

  .kw-drop {
    display: inline-block;
    position: static !important;
    outline: none;
    -webkit-tap-highlight-color: rgba(201,162,74,.18);
    cursor: pointer;
    width: auto;
    min-width: 0;
  }

  .kw-drop > span {
    display: inline-block;
    width: auto;
    padding: 4px 0;
  }

  .kw-drop:hover .kw-drop-menu,
  .kw-drop:active .kw-drop-menu,
  .kw-drop:focus .kw-drop-menu,
  .kw-drop:focus-within .kw-drop-menu,
  .kw-drop.kw-open .kw-drop-menu {
    display: block !important;
  }

  .kw-drop-menu a {
    display: block !important;
    padding: 10px 12px !important;
    border: 0;
    border-radius: 4px;
    background: transparent;
    line-height: 1.35;
  }

  div[style*="padding:88px 56px 72px"] {
    padding: 56px 18px 52px !important;
  }

  #how {
    padding: 60px 18px !important;
  }

  #how h2 {
    max-width: 100% !important;
    margin-bottom: 16px !important;
    font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    line-height: 1.25 !important;
  }

  #how p {
    max-width: 100% !important;
    margin-bottom: 34px !important;
    line-height: 1.65 !important;
  }

  #how .howcard {
    width: 100%;
    padding: 22px 20px !important;
  }

  #how .howcard h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  #how .howcard p {
    margin-bottom: 0 !important;
    line-height: 1.65 !important;
  }

  div[style*="max-width:1080px"][style*="display:grid"][style*="gap:60px"][style*="align-items:center"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  div[style*="max-width:1080px"][style*="display:grid"][style*="gap:60px"][style*="align-items:center"] > div:first-child,
  div[style*="max-width:1080px"][style*="display:grid"][style*="gap:60px"][style*="align-items:center"] > div:last-child {
    width: 100%;
  }

  div[style*="max-width:1080px"][style*="display:grid"][style*="gap:60px"][style*="align-items:center"] h2 {
    font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
    line-height: 1.25 !important;
  }

  div[style*="padding:72px 32px 96px"],
  div[style*="padding:72px 56px"],
  div[style*="padding:80px 56px"],
  div[style*="padding:56px 32px 0"],
  div[style*="padding:40px 24px 100px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  div[style*="padding:40px 44px"],
  div[style*="padding:40px"] {
    padding: 24px 18px !important;
  }

  div[style*="padding:32px"],
  div[style*="padding:30px"],
  div[style*="padding:28px"],
  div[style*="padding:26px"] {
    padding: 20px !important;
  }

  div[style*="padding:24px"] {
    padding: 18px !important;
  }

  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(auto-fit,minmax(230px,1fr))"],
  div[style*="grid-template-columns:2fr 1fr 1fr 1fr"],
  div[style*="grid-template-columns:1.4fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="display:flex"][style*="background:#1a1209"][style*="overflow:hidden"][style*="margin-bottom:32px"] {
    flex-direction: column !important;
  }

  div[style*="display:flex"][style*="background:#1a1209"][style*="overflow:hidden"][style*="margin-bottom:32px"] > div {
    border-right: 0 !important;
    border-bottom: 1px solid #3a2a1c;
  }

  div[style*="display:flex"][style*="background:#1a1209"][style*="overflow:hidden"][style*="margin-bottom:32px"] > div:last-child {
    border-bottom: 0 !important;
  }

  div[style*="display:flex"][style*="gap:14px"],
  div[style*="display:flex"][style*="gap:16px"],
  div[style*="display:flex"][style*="gap:20px"] {
    flex-wrap: wrap;
  }

  .suspect-pick {
    align-items: flex-start !important;
    padding: 14px !important;
  }

  .ev-word {
    padding: 9px 11px !important;
  }

  .proof-pick {
    padding: 14px !important;
  }

  .casecard-inner {
    height: auto !important;
    min-height: 210px;
  }

  .modal {
    padding: 28px 20px !important;
  }

  #notebook-panel {
    width: min(100vw, 360px) !important;
    left: auto;
  }

  #ed-segments,
  #scene-text {
    line-height: 1.85 !important;
  }

  form button[type="submit"],
  a[style*="padding:13px 24px"],
  a[style*="padding:14px 28px"],
  button[style*="padding:14px 28px"],
  button[style*="padding:17px 32px"] {
    display: flex !important;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  h1 {
    line-height: 1.25 !important;
  }
}

@media (max-width: 430px) {
  body > div[style*="position:sticky"][style*="height:64px"],
  body > div > div[style*="position:sticky"][style*="height:64px"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  div[style*="padding:72px 32px 96px"],
  div[style*="padding:72px 56px"],
  div[style*="padding:80px 56px"],
  div[style*="padding:56px 32px 0"],
  div[style*="padding:40px 24px 100px"],
  div[style*="max-width:760px"][style*="padding:64px 24px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  div[style*="letter-spacing:3px"] {
    letter-spacing: 2px !important;
  }

  div[style*="font-size:1.35rem"],
  div[style*="font-size:1.3rem"] {
    font-size: 1.12rem !important;
  }

  div[style*="font-size:1.2rem"] {
    font-size: 1.05rem !important;
  }

  #nb-toggle {
    padding: 7px 10px !important;
  }
}

@media (max-width: 375px) {
  body > div[style*="position:sticky"][style*="height:62px"] > div:last-child {
    gap: 8px !important;
  }

  .tab-btn {
    min-width: 72px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  div[style*="padding:40px 44px"],
  div[style*="padding:32px"],
  div[style*="padding:30px"],
  div[style*="padding:28px"],
  div[style*="padding:26px"],
  div[style*="padding:24px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .modal {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}