@charset "UTF-8";
:root {
  --blue:#4255ff;
  --blue-hover:#2d3fe5;
  --ink:#282e47;
  --muted:#6c7287;
  --line:#e8eaf0;
  --canvas:#fff;
  --pale:#f5f6fa;
  --lavender:#f0eeff;
  --green:#167868;
  --danger:#b23c46;
  --radius:16px;
  --rail:236px;
  --header:76px;
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--canvas);
  font-size:15px;
  line-height:1.5
}
button,input,textarea {
  font:inherit
}
button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  color:inherit;
  cursor:pointer
}
button:disabled {
  cursor:default;
  opacity:.5
}
a {
  color:inherit;
  text-decoration:none
}
svg {
  display:block
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-size:32px;
  line-height:1.22;
  letter-spacing:-.9px;
  font-weight:750
}
h2 {
  font-size:23px;
  line-height:1.3;
  letter-spacing:-.45px
}
h3 {
  font-size:18px;
  line-height:1.4;
  letter-spacing:-.2px
}
p {
  color:var(--muted)
}
button {
  border:0;
  background:none
}
.icon {
  width:22px;
  height:22px;
  flex-shrink:0
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid #a5aefe;
  outline-offset:4px
}
input:focus,textarea:focus {
  border-color:var(--blue)
}
input,textarea {
  color:var(--ink);
  background:white;
  border:1.5px solid #d9dce8;
  border-radius:9px;
  padding:13px 15px;
  min-width:0;
  max-width:100%;
  transition:border-color .15s
}
textarea {
  resize:vertical;
  min-height:80px
}
input::placeholder,textarea::placeholder {
  color:#9296a5
}
input[type=radio] {
  accent-color:var(--blue)
}
[hidden] {
  display:none!important
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.skip-link {
  position:fixed;
  left:12px;
  top:-60px;
  z-index:100;
  background:var(--blue);
  color:white;
  padding:10px 16px;
  border-radius:8px
}
.skip-link:focus {
  top:12px
}
.topbar {
  height:var(--header);
  position:fixed;
  inset:0 0 auto;
  z-index:30;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 30px
}
.wordmark {
  width:181px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--blue);
  font-size:31px;
  font-weight:800;
  letter-spacing:-1.8px;
  flex-shrink:0
}
.local-pill {
  font-size:10px;
  letter-spacing:.5px;
  font-weight:700;
  padding:3px 6px;
  background:#f0f0ff;
  border-radius:5px;
  color:#747bba;
  text-transform:uppercase
}
.search-box {
  display:flex;
  align-items:center;
  gap:12px;
  max-width:720px;
  flex:1;
  border-radius:28px;
  background:#f6f7fb;
  padding:0 18px;
  height:45px;
  color:#686f84
}
.search-box input {
  border:0;
  outline:none;
  background:transparent;
  padding:0;
  width:100%;
  height:100%;
  font-size:14px
}
.search-box:focus-within {
  box-shadow:0 0 0 2px #c5cbff
}
.search-box .icon {
  width:20px;
  height:20px
}
.search-box kbd {
  border:1px solid #dfe1e9;
  border-radius:4px;
  padding:0 6px;
  font-size:12px;
  color:#9a9dac
}
.create-top {
  margin-left:auto;
  background:var(--blue);
  color:white;
  border-radius:25px;
  padding:10px 17px;
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:650;
  font-size:14px;
  white-space:nowrap
}
.create-top>span:first-child {
  font-size:24px;
  font-weight:350;
  line-height:20px
}
.avatar {
  width:36px;
  height:36px;
  border:2px solid white;
  box-shadow:0 0 0 1px #e4e7ef;
  border-radius:50%;
  background:#ffe4ba;
  color:#83592d;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:700;
  flex-shrink:0
}
.sidebar {
  position:fixed;
  inset:var(--header) auto 0 0;
  width:var(--rail);
  border-right:1px solid var(--line);
  padding:28px 18px 24px;
  z-index:20;
  background:#fff;
  display:flex;
  flex-direction:column
}
.nav-link {
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:600;
  padding:13px 17px;
  border-radius:8px;
  margin-bottom:6px;
  font-size:14px
}
.nav-link.active {
  background:#efedff;
  color:var(--blue)
}
.nav-link:hover {
  background:#f5f5fc
}
.nav-caption {
  font-size:11px;
  letter-spacing:1.2px;
  color:#9297a8;
  font-weight:700;
  margin:32px 17px 15px;
  text-transform:uppercase
}
.nav-set {
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 17px;
  border-radius:7px;
  font-size:12px;
  font-weight:600;
  overflow:hidden
}
.nav-set span:last-child {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.nav-set:hover {
  background:var(--pale)
}
.nav-dot {
  height:9px;
  width:9px;
  flex-shrink:0;
  border-radius:3px;
  background:#a8b7ec
}
.nav-dot.science {
  background:#90d3c8
}
.nav-dot.language {
  background:#c1acf5
}
.nav-dot.software {
  background:#f2c463
}
.sidebar-bottom {
  margin-top:auto;
  padding:30px 17px 0
}
.sidebar-bottom strong {
  font-size:13px
}
.sidebar-bottom p {
  font-size:12px;
  margin:5px 0 22px;
  line-height:1.7
}
.local-symbol {
  width:29px;
  height:29px;
  margin-bottom:13px;
  border:7px solid #dedaff;
  border-top-color:#7a85ff;
  border-right-color:#7a85ff;
  border-radius:50%;
  transform:rotate(-25deg)
}
.storage-caption {
  display:block;
  font-size:10px;
  color:#9297a8
}
.text-button {
  font-size:12px;
  padding:5px 0;
  color:var(--blue);
  font-weight:650;
  display:inline-flex;
  align-items:center;
  gap:6px
}
.text-button .icon {
  height:16px;
  width:16px
}
#main {
  margin:var(--header) 0 0 var(--rail);
  padding:45px 52px 64px;
  min-height:calc(100vh - var(--header));
  outline:none;
  max-width:1800px
}
.page {
  max-width:1100px;
  margin:0 auto
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:7px;
  color:#787f94;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.35px;
  text-transform:uppercase;
  margin-bottom:12px
}
.eyebrow:before {
  content:"";
  height:5px;
  width:5px;
  border-radius:50%;
  background:#9c90ff
}
.page-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px
}
.page-heading h1 {
  margin-bottom:7px
}
.page-heading p {
  margin-bottom:0;
  font-size:14px
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:34px 0 17px;
  gap:20px
}
.section-heading h2 {
  margin:0
}
.section-link {
  color:var(--blue);
  font-size:13px;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}
.section-link .icon {
  height:16px;
  width:16px
}
.hero {
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:238px;
  background:#f0eeff;
  border:1px solid #e9e5ff;
  border-radius:18px;
  padding:29px 34px
}
.hero-copy {
  position:relative;
  z-index:1;
  min-width:0;
  max-width:60%
}
.hero h2 {
  overflow-wrap:anywhere;
  font-size:26px;
  margin:8px 0 10px;
  max-width:430px;
  letter-spacing:-.7px
}
.hero p {
  font-size:13px;
  margin:0 0 21px;
  color:#71718e
}
.small-label {
  font-size:10px;
  letter-spacing:1.6px;
  font-weight:750;
  color:#7169a4;
  text-transform:uppercase
}
.hero-art {
  position:absolute;
  width:275px;
  height:205px;
  right:15px;
  bottom:12px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:9px;
  font-size:14px;
  font-weight:650;
  padding:12px 20px;
  line-height:1.4;
  min-height:44px;
  transition:background .15s,transform .15s;
  white-space:normal;
  text-align:center
}
.btn .icon {
  height:18px;
  width:18px
}
.btn.primary {
  color:white;
  background:var(--blue)
}
.btn.primary:hover,.create-top:hover {
  background:var(--blue-hover)
}
.btn.secondary {
  border:1.5px solid #dfe2ed;
  background:#fff
}
.btn.secondary:hover {
  background:#f5f6ff;
  border-color:#bcc4ff
}
.btn.soft {
  background:#eeefff;
  color:var(--blue)
}
.btn.soft:hover {
  background:#e3e5ff
}
.btn.success {
  background:#e5f4ef;
  color:#1c7968
}
.btn.learning {
  background:#fff3e5;
  color:#986326
}
.btn.wide {
  width:100%
}
.button-group {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}
.set-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px
}
.set-card {
  border:1.5px solid var(--line);
  border-bottom:4px solid #e8e9f3;
  border-radius:12px;
  padding:20px 20px 14px;
  transition:transform .17s,border-color .17s;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#fff
}
.set-card:hover {
  transform:translateY(-3px);
  border-color:#b4bbff
}
.set-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:19px
}
.set-symbol {
  width:39px;
  height:39px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#ecedff;
  color:#727de0
}
.set-symbol.science {
  background:#e8f6f2;
  color:#428f85
}
.set-symbol.language {
  background:#eee9fe;
  color:#9a70d1
}
.set-symbol.software {
  background:#fff4d9;
  color:#ac8733
}
.term-count {
  font-size:11px;
  font-weight:650;
  background:#f4f5f9;
  padding:4px 9px;
  border-radius:20px;
  color:#777d93
}
.set-card h3 {
  margin:0 0 8px;
  font-size:17px;
  overflow-wrap:anywhere
}
.set-card p {
  font-size:12px;
  line-height:1.6;
  flex:1;
  margin-bottom:24px;
  overflow-wrap:anywhere
}
.set-card-bottom {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:#8a8fa2;
  margin-bottom:14px
}
.mini-avatar {
  height:19px;
  width:19px;
  background:#f8e5c9;
  color:#9d713e;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  font-weight:700;
  font-size:9px
}
.set-card-bottom strong {
  font-weight:600;
  margin-left:auto;
  color:#7b8197
}
.progress-track {
  display:block;
  background:#f0f1f7;
  border-radius:6px;
  height:4px;
  overflow:hidden
}
.progress-track>span {
  display:block;
  height:100%;
  background:#a4adff;
  border-radius:6px
}
.practice-banner {
  margin-top:30px;
  display:flex;
  align-items:center;
  gap:20px;
  background:#f7f9fc;
  border:1px solid #eff1f6;
  border-radius:14px;
  padding:22px 25px
}
.practice-banner .practice-symbol {
  height:51px;
  width:51px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  background:#e6edff;
  color:#6d84cb;
  border-radius:14px;
  transform:rotate(-6deg)
}
.practice-banner h3 {
  margin:0 0 4px;
  font-size:15px
}
.practice-banner p {
  margin:0;
  font-size:12px
}
.practice-banner .section-link {
  margin-left:auto
}
.footer-note {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:11px;
  color:#a0a5b5;
  margin-top:36px
}
.footer-note .icon {
  height:13px;
  width:13px
}
.empty-state {
  border:1px dashed #daddef;
  background:#fafaff;
  border-radius:15px;
  text-align:center;
  padding:52px 24px
}
.empty-state>.icon {
  width:38px;
  height:38px;
  color:#a0a9ef;
  margin:0 auto 18px
}
.empty-state p {
  overflow-wrap:anywhere;
  max-width:400px;
  margin:0 auto 22px;
  font-size:14px
}
.filter-summary {
  overflow-wrap:anywhere;
  font-size:13px;
  color:var(--muted);
  margin-bottom:20px
}
.filter-summary strong {
  color:var(--ink)
}
.library-tools {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  margin:24px 0
}
.tab-label {
  color:var(--blue);
  font-size:14px;
  font-weight:700;
  display:flex;
  gap:9px;
  align-items:center
}
.tab-label span {
  font-size:11px;
  background:#efedff;
  border-radius:20px;
  padding:2px 7px
}
.library-tools .text-button {
  font-size:13px
}
body.compact {
  --rail:80px
}
body.compact .sidebar {
  padding:28px 13px
}
.compact .nav-link {
  justify-content:center;
  padding:15px 10px
}
.compact .nav-link span,.compact .nav-caption,.compact .nav-set,.compact .sidebar-bottom {
  display:none
}
body.compact #main {
  padding-left:52px;
  padding-right:52px
}
.set-page {
  max-width:1040px
}
.set-content {
  max-width:850px
}
.breadcrumb {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:var(--muted);
  margin-bottom:23px
}
.breadcrumb .icon {
  height:15px;
  width:15px
}
.set-heading {
  display:flex;
  gap:24px;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:15px
}
.set-heading h1 {
  min-width:0;
  overflow-wrap:anywhere;
  max-width:750px;
  margin-bottom:12px;
  font-size:31px
}
.set-description {
  max-width:730px;
  overflow-wrap:anywhere;
  margin-bottom:15px;
  font-size:14px
}
.set-meta {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:12px;
  color:var(--muted);
  margin-bottom:27px
}
.set-meta .mini-avatar {
  height:23px;
  width:23px;
  font-size:10px
}
.mode-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:25px
}
.mode-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border:1.5px solid #e7e9f3;
  border-bottom:3px solid #e2e5f4;
  padding:15px 10px;
  border-radius:10px;
  font-weight:650;
  font-size:13px;
  background:#f9faff
}
.mode-button .icon {
  color:var(--blue);
  height:20px;
  width:20px
}
.mode-button:hover {
  background:#eeefff;
  border-color:#b0b9ff
}
.flashcard-wrap {
  position:relative
}
.flashcard {
  width:100%;
  min-height:337px;
  border-radius:20px;
  background:white;
  border:1px solid #e8eaf2;
  box-shadow:0 6px 20px #282e470c;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:58px 55px 55px;
  position:relative;
  overflow-wrap:anywhere;
  text-align:center
}
.flashcard:hover {
  border-color:#c8cef7
}
.flashcard-face {
  position:absolute;
  left:24px;
  top:20px;
  color:#9298ab;
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:650
}
.flashcard-text {
  font-size:30px;
  font-weight:500;
  line-height:1.45;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:100%
}
.flashcard.is-definition .flashcard-text {
  font-size:25px
}
.flashcard-hint {
  position:absolute;
  bottom:20px;
  left:0;
  right:0;
  color:#969db2;
  font-size:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px
}
.flashcard-hint .icon {
  width:14px;
  height:14px
}
.card-star {
  position:absolute;
  right:18px;
  top:15px;
  z-index:2
}
.icon-button {
  width:40px;
  height:40px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  border:1.5px solid #e3e6ef;
  background:white;
  flex-shrink:0;
  color:#646d87
}
.icon-button:hover {
  background:#f4f4ff;
  border-color:#c3c9ff
}
.icon-button.starred {
  color:#c58b13;
  background:#fff8df;
  border-color:#f3d98a
}
.icon-button.starred .icon {
  fill:#f5cf60
}
.card-star.icon-button {
  border:0;
  background:transparent
}
.flash-nav {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:23px;
  margin:20px 0 15px;
  min-height:40px
}
.flash-count {
  font-size:13px;
  font-weight:650;
  min-width:50px;
  text-align:center
}
.shuffle-button {
  position:absolute;
  right:0
}
.shuffle-button.active {
  background:#eeefff;
  color:var(--blue);
  border-color:#b9c1ff
}
.flash-status {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:20px 0 12px
}
.flash-status .btn {
  min-width:150px;
  padding:10px 19px;
  font-size:12px
}
.study-status {
  font-size:11px;
  text-align:center;
  min-height:22px;
  color:var(--muted)
}
.study-status .known {
  color:var(--green)
}
.keyboard-note {
  text-align:center;
  font-size:11px;
  color:#9a9fb0;
  margin:10px 0 0
}
kbd {
  font-family:inherit
}
.keyboard-note kbd {
  border:1px solid #e3e5ed;
  border-radius:4px;
  padding:1px 5px;
  margin:0 3px;
  background:#fafbfc
}
.terms-header {
  margin-top:42px
}
.terms-count {
  font-size:13px;
  font-weight:500;
  color:#9298a8;
  margin-left:8px
}
.progress-summary {
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
  font-size:12px
}
.progress-summary .progress-track {
  width:110px;
  height:6px
}
.progress-summary .progress-track>span {
  background:#6bbdab
}
.term-row {
  display:grid;
  grid-template-columns:minmax(110px,.7fr) minmax(180px,1.6fr) 37px;
  align-items:center;
  gap:24px;
  padding:21px 22px;
  border:1px solid #e9ebf2;
  border-radius:11px;
  margin-bottom:10px;
  background:#fff;
  font-size:14px;
  box-shadow:0 2px 4px #282e4703
}
.term-word {
  font-weight:650;
  overflow-wrap:anywhere
}
.term-definition {
  border-left:1px solid #e5e7ef;
  padding-left:24px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.term-row .icon-button {
  border:0;
  height:34px;
  width:34px
}
.status-dot {
  height:6px;
  width:6px;
  display:inline-block;
  border-radius:50%;
  background:#c1c5d3;
  margin-right:8px
}
.status-dot.known {
  background:#69b9a4
}
.status-dot.learning {
  background:#efb55d
}
.match-promo {
  margin:34px 0;
  display:flex;
  align-items:center;
  gap:20px;
  background:#f3f1ff;
  border-radius:14px;
  padding:25px
}
.match-promo>.icon {
  color:#9b88ed;
  width:44px;
  height:44px
}
.match-promo h3 {
  font-size:16px;
  margin:0 0 4px
}
.match-promo p {
  font-size:12px;
  margin:0
}
.match-promo .btn {
  margin-left:auto
}
.editor-page {
  max-width:1000px
}
.editor-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:28px
}
.editor-header h1 {
  margin:0
}
.editor-meta {
  padding:27px 28px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff
}
.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0
}
.field+.field {
  margin-top:20px
}
.field label,.field-label {
  font-size:11px;
  font-weight:700;
  letter-spacing:.8px;
  color:#777f97;
  text-transform:uppercase
}
.field input {
  width:100%
}
.field-error {
  font-size:12px;
  color:var(--danger);
  margin:0;
  min-height:0
}
.field [aria-invalid=true] {
  border-color:#cc7680;
  background:#fffafb
}
.editor-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:30px 0 18px
}
.editor-tools h2 {
  margin:0;
  font-size:19px
}
.import-panel {
  border:1.5px solid #dfe2fb;
  border-radius:13px;
  padding:24px;
  background:#f8f8ff;
  margin-bottom:22px
}
.import-panel h3 {
  margin-bottom:6px;
  font-size:17px
}
.import-panel p {
  font-size:12px
}
.import-panel textarea {
  width:100%;
  min-height:135px;
  white-space:pre;
  font-family:ui-monospace,monospace;
  font-size:12px;
  margin-bottom:12px
}
.import-preview {
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  padding:14px;
  margin:15px 0;
  max-height:240px;
  overflow:auto
}
.preview-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  font-size:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  overflow-wrap:anywhere
}
.preview-row:last-child {
  border:0
}
.editor-row {
  border:1px solid #e6e8f1;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:18px;
  background:#fff;
  box-shadow:0 2px 5px #282e4703
}
.row-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #eff0f5;
  padding:9px 21px;
  color:#9b9fb0;
  font-size:13px;
  font-weight:650
}
.row-heading .icon-button {
  border:0;
  width:31px;
  height:31px
}
.row-heading .icon {
  width:17px;
  height:17px
}
.editor-row-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  padding:23px
}
.editor-row-fields .field+.field {
  margin:0
}
.editor-row textarea {
  min-height:80px;
  width:100%;
  border-width:0 0 2px;
  border-radius:0;
  padding:6px 0 9px
}
.add-card {
  width:100%;
  border:1.5px dashed #d8ddeb;
  border-radius:12px;
  padding:24px;
  color:var(--blue);
  font-size:14px;
  font-weight:700;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  background:#fafbff
}
.add-card .icon {
  width:18px;
  height:18px
}
.editor-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-top:26px
}
.editor-footer p {
  font-size:12px;
  margin:0
}
.editor-save-state {
  font-size:12px;
  color:#9399ab;
  display:flex;
  gap:6px;
  align-items:center
}
.editor-save-state .icon {
  width:15px;
  height:15px
}
body.focused {
  --rail:0px
}
.focused .sidebar {
  display:none
}
.focused .topbar .search-box {
  visibility:hidden
}
.focused #main {
  padding-top:27px
}
.study-page {
  max-width:1000px
}
.study-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:23px;
  border-bottom:1px solid var(--line);
  margin-bottom:36px
}
.study-mode {
  display:flex;
  align-items:center;
  gap:12px
}
.study-mode>.icon {
  color:var(--blue);
  height:25px;
  width:25px
}
.study-mode h1 {
  font-size:18px;
  letter-spacing:-.3px;
  margin:0
}
.study-mode p {
  font-size:12px;
  margin:2px 0 0;
  max-width:550px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden
}
.study-topline .exit-study {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#7b8298
}
.study-topline .exit-study .icon {
  height:19px;
  width:19px
}
.focused-card {
  max-width:820px;
  margin:0 auto
}
.focused-card .flashcard {
  min-height:390px
}
.session-progress {
  display:flex;
  gap:18px;
  align-items:center;
  margin-bottom:28px;
  font-size:12px;
  color:#7a8197
}
.session-progress .progress-track {
  flex:1;
  height:6px
}
.session-progress .progress-track>span {
  background:#7d8aff
}
.question-card {
  border:1px solid #e3e6ef;
  border-radius:17px;
  background:#fff;
  padding:34px 38px;
  box-shadow:0 4px 18px #282e4706;
  overflow-wrap:anywhere
}
.question-label {
  font-size:11px;
  color:#858da3;
  margin-bottom:24px
}
.question-prompt {
  font-size:28px;
  font-weight:600;
  line-height:1.5;
  margin-bottom:34px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.answer-label {
  font-size:12px;
  color:#7c849c;
  margin-bottom:14px
}
.choices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.choice {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  border:1.5px solid #e1e5ef;
  border-radius:9px;
  padding:17px 16px;
  min-height:85px;
  background:#fff;
  font-size:13px;
  overflow-wrap:anywhere
}
.choice:not(:disabled):hover {
  border-color:#a5affb;
  background:#f7f8ff
}
.choice-letter {
  height:23px;
  width:23px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border:1px solid #e0e3ee;
  border-radius:50%;
  color:#8e96ac;
  font-size:10px
}
.choice.is-correct {
  background:#edf8f3;
  border-color:#6ebea6;
  color:#247565;
  opacity:1
}
.choice.is-wrong {
  background:#fff1f1;
  border-color:#db969c;
  color:#aa414e;
  opacity:1
}
.typed-answer {
  display:flex;
  gap:12px;
  align-items:flex-start
}
.typed-answer .field {
  flex:1
}
.typed-answer input {
  width:100%
}
.feedback {
  margin-top:24px;
  border-radius:10px;
  padding:18px 21px;
  background:#edf8f3;
  color:#247565;
  font-size:13px
}
.feedback.wrong {
  background:#fff1f1;
  color:#ac4450
}
.feedback strong {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  margin-bottom:5px
}
.feedback .icon {
  width:18px;
  height:18px
}
.feedback p {
  color:inherit;
  margin:6px 0 0;
  font-size:12px;
  overflow-wrap:anywhere
}
.question-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-top:24px
}
.question-footer p {
  font-size:11px;
  margin:0;
  color:#9097ab
}
.result-panel {
  text-align:center;
  max-width:660px;
  margin:30px auto;
  padding:35px 40px 38px;
  border:1px solid #e4e6f0;
  border-radius:18px;
  box-shadow:0 8px 25px #282e4705
}
.finish-art {
  width:165px;
  height:120px;
  margin:0 auto 15px
}
.result-panel h2 {
  font-size:28px;
  margin-bottom:12px
}
.result-panel>p {
  font-size:14px;
  line-height:1.7;
  max-width:430px;
  margin:0 auto 25px
}
.result-stats {
  display:flex;
  justify-content:center;
  gap:48px;
  margin:25px 0 30px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.result-stats strong {
  display:block;
  font-size:26px;
  color:var(--blue)
}
.result-stats span {
  font-size:11px;
  color:#8a91a5
}
.result-panel .button-group {
  justify-content:center
}
.test-page {
  max-width:800px;
  margin:auto
}
.test-intro {
  margin-bottom:27px
}
.test-intro h2 {
  font-size:25px;
  margin-bottom:8px
}
.test-intro p {
  font-size:13px
}
.test-question {
  margin-bottom:21px
}
.test-question .question-prompt {
  font-size:21px;
  margin-bottom:22px
}
.test-question .question-label {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  margin-bottom:16px
}
.test-choice {
  display:flex;
  align-items:center;
  gap:11px;
  border:1.5px solid #e1e5ef;
  border-radius:8px;
  padding:13px 15px;
  font-size:12px;
  cursor:pointer;
  overflow-wrap:anywhere
}
.test-choice:has(input:checked) {
  border-color:#7c8aff;
  background:#f3f4ff
}
.test-choice input {
  flex-shrink:0;
  margin:0
}
.test-answer {
  width:100%
}
.test-submit {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:28px;
  gap:20px
}
.test-submit p {
  font-size:12px
}
.corrections {
  max-width:800px;
  margin:36px auto
}
.correction {
  border:1px solid var(--line);
  border-left:4px solid #83c6b3;
  border-radius:10px;
  padding:21px 24px;
  margin-bottom:13px;
  background:#fff
}
.correction.wrong {
  border-left-color:#e1a1a5
}
.correction h3 {
  font-size:16px;
  margin-bottom:12px;
  overflow-wrap:anywhere
}
.correction p {
  font-size:12px;
  margin:6px 0;
  overflow-wrap:anywhere;
  white-space:pre-wrap
}
.correction p strong {
  color:#3f4b66
}
.correct-answer {
  color:#278272
}
.wrong-answer {
  color:#b0525e
}
.match-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px
}
.match-heading h2 {
  font-size:25px;
  margin-bottom:5px
}
.match-heading p {
  font-size:12px;
  margin:0
}
.match-timer {
  background:#f0efff;
  border-radius:12px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--blue);
  font-size:22px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  min-width:112px
}
.match-timer .icon {
  width:19px;
  height:19px
}
.match-board {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px
}
.match-tile {
  min-height:142px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:19px 15px;
  border:1.5px solid #e1e5ef;
  border-bottom:3px solid #dde1ee;
  border-radius:12px;
  overflow-wrap:anywhere;
  background:white;
  font-size:13px;
  line-height:1.5;
  transition:border-color .15s,background .15s
}
.tile-side {
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:1.1px;
  font-weight:650;
  color:#9ba2b5
}
.match-tile:hover:not(:disabled) {
  border-color:#a4affd;
  background:#f9faff
}
.match-tile.selected {
  border-color:#7382ff;
  background:#eeefff;
  color:#3d4bcd
}
.match-tile.mismatch {
  border-color:#dc8b94;
  background:#fff1f1;
  color:#a84250
}
.match-tile.matched {
  visibility:hidden
}
.match-help {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:65px;
  font-size:12px;
  color:#8890a5;
  margin-top:16px;
  text-align:center
}
.match-help .btn {
  font-size:12px;
  min-height:35px;
  padding:8px 15px
}
.match-help.wrong {
  color:#b34e5c
}
.storage-warning {
  margin:var(--header) 0 0 var(--rail);
  background:#fff3dc;
  border-bottom:1px solid #edcf8c;
  padding:15px 35px;
  font-size:12px;
  color:#805c25;
  position:relative;
  z-index:5;
  line-height:1.6
}
.storage-warning:not([hidden])+#main {
  margin-top:0
}
.storage-warning strong {
  display:block;
  font-size:13px
}
.storage-warning .text-button {
  color:#80521e;
  text-decoration:underline;
  margin-right:20px
}
.toast {
  position:fixed;
  bottom:25px;
  left:calc(50% + var(--rail)/2);
  transform:translateX(-50%);
  padding:12px 20px;
  background:#282e47;
  color:white;
  border-radius:10px;
  z-index:60;
  box-shadow:0 6px 20px #282e4730;
  font-size:12px;
  max-width:calc(100vw - 30px);
  text-align:center
}
.error-page {
  max-width:650px;
  margin:70px auto;
  text-align:center
}
.error-page>.icon {
  width:50px;
  height:50px;
  margin:0 auto 25px;
  color:#99a4eb
}
.error-page p {
  margin-bottom:28px
}
.noscript {
  position:fixed;
  top:100px;
  left:260px;
  color:#b23c46
}
@media(min-width:1500px) {
  #main {
    padding:50px 65px 70px
  }
  .hero {
    min-height:260px
  }
  .hero-art {
    right:35px;
    width:310px;
    height:225px
  }
}
@media(max-width:1150px) {
  :root {
    --rail:205px
  }
  .topbar {
    gap:18px;
    padding:0 24px
  }
  .wordmark {
    width:155px
  }
  .sidebar {
    padding-left:13px;
    padding-right:13px
  }
  #main {
    padding:35px 32px 55px
  }
  .hero {
    padding:28px
  }
  .hero-art {
    width:230px;
    right:0
  }
  .hero-copy {
    max-width:63%
  }
  .hero h2 {
    font-size:23px
  }
  .set-grid {
    gap:13px
  }
  .set-card {
    padding:16px 15px 12px
  }
  .set-card p {
    font-size:11px
  }
  .set-card h3 {
    font-size:15px
  }
  .set-card-bottom {
    font-size:9px
  }
  .practice-banner {
    padding:20px
  }
  .practice-banner p {
    max-width:320px
  }
  .nav-set {
    padding-left:16px
  }
  .match-tile {
    font-size:12px
  }
  .focused #main {
    padding-left:35px;
    padding-right:35px
  }
}
@media(max-width:900px) {
  :root {
    --rail:80px
  }
  .sidebar {
    padding:25px 13px
  }
  .nav-link {
    padding:15px 10px;
    justify-content:center
  }
  .nav-link span,.nav-caption,.nav-set,.sidebar-bottom {
    display:none
  }
  .topbar {
    padding:0 22px;
    gap:17px
  }
  .wordmark {
    width:auto;
    margin-right:8px;
    font-size:28px
  }
  .wordmark .local-pill {
    display:none
  }
  #main {
    padding:32px 27px 50px
  }
  .set-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .hero-art {
    width:210px;
    right:-4px
  }
  .hero-copy {
    max-width:64%
  }
  .hero h2 {
    font-size:23px
  }
  .hero {
    min-height:240px
  }
  .set-card h3 {
    font-size:17px
  }
  .set-card p {
    font-size:12px
  }
  .set-card-bottom {
    font-size:10px
  }
  .practice-banner p {
    max-width:260px
  }
  .practice-banner .section-link {
    font-size:0;
    gap:0
  }
  .practice-banner .section-link .icon {
    width:20px;
    height:20px
  }
  .match-board {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .choices {
    gap:10px
  }
  .choice {
    padding:14px;
    font-size:12px
  }
  .focused #main {
    padding-left:28px;
    padding-right:28px
  }
  .question-card {
    padding:28px
  }
  .term-row {
    gap:16px;
    padding:18px
  }
  .term-definition {
    padding-left:16px
  }
}
@media(max-width:600px) {
  :root {
    --header:68px;
    --rail:0px
  }
  body {
    font-size:14px
  }
  .topbar {
    padding:0 18px;
    gap:12px
  }
  .wordmark {
    font-size:27px;
    margin-right:auto;
    letter-spacing:-1.5px
  }
  .topbar .search-box {
    height:36px;
    width:38px;
    flex:0 0 38px;
    padding:0 9px;
    gap:0;
    background:#f1f3fa;
    position:relative;
    order:2;
    overflow:visible
  }
  .search-box input {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer
  }
  .search-box kbd {
    display:none
  }
  .search-box:focus-within {
    position:absolute;
    left:18px;
    right:18px;
    width:auto;
    z-index:3;
    flex:auto;
    gap:10px;
    background:#f5f6fc;
    padding:0 13px;
    height:42px
  }
  .search-box:focus-within input {
    position:static;
    opacity:1;
    cursor:text
  }
  .create-top {
    order:3;
    padding:0;
    border-radius:50%;
    width:36px;
    height:36px;
    justify-content:center;
    margin:0
  }
  .create-label {
    display:none
  }
  .avatar {
    width:32px;
    height:32px;
    order:4;
    font-size:12px
  }
  .sidebar {
    inset:auto 0 0;
    width:100%;
    height:66px;
    border:0;
    border-top:1px solid #e6e8f1;
    padding:0;
    background:#fffffffa;
    backdrop-filter:blur(10px)
  }
  .sidebar nav {
    display:flex;
    justify-content:space-around;
    height:100%;
    align-items:center
  }
  .nav-link {
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:7px 24px;
    border-radius:10px;
    font-size:10px;
    margin:0
  }
  .nav-link .icon {
    width:21px;
    height:21px
  }
  .nav-link span {
    display:block;
    font-weight:600
  }
  .nav-link.active {
    background:transparent;
    color:var(--blue)
  }
  .nav-caption,.nav-set,.sidebar-bottom {
    display:none
  }
  #main,body.compact #main {
    margin-left:0;
    padding:28px 20px 95px
  }
  h1 {
    font-size:27px;
    letter-spacing:-.7px
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.2px;
    margin-bottom:9px
  }
  .page-heading {
    margin-bottom:22px;
    gap:12px
  }
  .page-heading p {
    font-size:12px
  }
  .page-heading h1 {
    margin-bottom:5px
  }
  .hero {
    padding:25px 23px;
    min-height:255px;
    border-radius:16px;
    align-items:flex-start
  }
  .hero-copy {
    max-width:72%
  }
  .hero h2 {
    font-size:23px;
    line-height:1.28;
    margin:9px 0 9px
  }
  .hero p {
    font-size:11px;
    margin-bottom:21px;
    max-width:185px
  }
  .hero .btn {
    font-size:12px;
    padding:10px 15px;
    min-height:39px
  }
  .hero-art {
    width:152px;
    height:140px;
    right:-10px;
    bottom:6px;
    opacity:.93
  }
  .small-label {
    font-size:8px;
    letter-spacing:1.2px
  }
  .section-heading {
    margin-top:29px;
    margin-bottom:16px
  }
  .section-heading h2 {
    font-size:21px
  }
  .section-link {
    font-size:11px
  }
  .set-grid {
    grid-template-columns:1fr;
    gap:14px
  }
  .set-card {
    padding:20px 21px 15px;
    border-bottom-width:3px
  }
  .set-card-top {
    margin-bottom:15px
  }
  .set-card h3 {
    font-size:19px
  }
  .set-card p {
    font-size:12px;
    margin-bottom:18px
  }
  .set-symbol {
    height:37px;
    width:37px;
    border-radius:10px
  }
  .set-card-bottom {
    font-size:10px
  }
  .term-count {
    font-size:10px
  }
  .practice-banner {
    margin-top:24px;
    padding:18px;
    gap:15px
  }
  .practice-banner h3 {
    font-size:13px
  }
  .practice-banner p {
    font-size:11px
  }
  .practice-banner .practice-symbol {
    width:40px;
    height:40px
  }
  .practice-banner .practice-symbol .icon {
    width:21px;
    height:21px
  }
  .practice-banner .section-link {
    display:none
  }
  .footer-note {
    font-size:9px;
    margin-top:28px
  }
  .library-tools {
    margin:22px 0
  }
  .library-tools .text-button {
    font-size:11px
  }
  .page-heading .btn {
    font-size:11px;
    padding:10px 13px;
    min-height:38px
  }
  .page-heading .btn .icon {
    width:15px;
    height:15px
  }
  .empty-state {
    padding:38px 22px
  }
  .empty-state h2 {
    font-size:21px
  }
  .empty-state p {
    font-size:12px
  }
  body.compact {
    --rail:0px
  }
  .compact .sidebar {
    padding:0
  }
  .compact .nav-link {
    padding:7px 24px
  }
  .compact .nav-link span {
    display:block
  }
  .breadcrumb {
    margin-bottom:18px;
    font-size:11px
  }
  .set-heading h1 {
    font-size:26px
  }
  .set-heading {
    gap:10px;
    margin-bottom:12px
  }
  .set-heading>.icon-button {
    width:35px;
    height:35px
  }
  .set-description {
    font-size:12px;
    margin-bottom:12px
  }
  .set-meta {
    font-size:10px;
    gap:9px;
    margin-bottom:23px
  }
  .mode-grid {
    gap:7px;
    margin-bottom:19px;
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .mode-button {
    padding:12px 8px;
    gap:9px;
    font-size:12px
  }
  .mode-button .icon {
    width:18px;
    height:18px
  }
  .flashcard {
    min-height:277px;
    padding:55px 25px;
    border-radius:15px
  }
  .flashcard-text {
    font-size:26px
  }
  .flashcard.is-definition .flashcard-text {
    font-size:20px
  }
  .flashcard-face {
    left:19px;
    top:18px;
    font-size:9px
  }
  .flashcard-hint {
    font-size:9px;
    bottom:18px
  }
  .card-star {
    right:11px;
    top:10px
  }
  .flash-nav {
    gap:17px;
    margin-top:16px
  }
  .flash-count {
    font-size:12px
  }
  .icon-button {
    height:36px;
    width:36px
  }
  .icon-button .icon {
    height:19px;
    width:19px
  }
  .flash-status {
    gap:9px;
    margin-top:16px
  }
  .flash-status .btn {
    min-width:0;
    flex:1;
    font-size:11px;
    padding:11px 9px
  }
  .keyboard-note {
    display:none
  }
  .study-status {
    font-size:10px
  }
  .terms-header {
    margin-top:32px
  }
  .term-row {
    grid-template-columns:1fr 32px;
    gap:9px;
    padding:17px 18px;
    font-size:13px;
    margin-bottom:12px
  }
  .term-word {
    grid-column:1;
    grid-row:1
  }
  .term-row .icon-button {
    grid-column:2;
    grid-row:1
  }
  .term-definition {
    grid-column:1/-1;
    border:0;
    padding:7px 0 0;
    color:#737b90;
    font-size:12px
  }
  .progress-summary {
    font-size:11px;
    gap:10px
  }
  .match-promo {
    padding:20px 18px;
    gap:12px;
    flex-wrap:wrap
  }
  .match-promo>.icon {
    width:30px;
    height:30px
  }
  .match-promo h3 {
    font-size:14px
  }
  .match-promo p {
    font-size:11px
  }
  .match-promo .btn {
    width:100%;
    font-size:12px;
    margin-top:4px
  }
  .editor-header {
    margin-bottom:22px;
    gap:10px
  }
  .editor-header h1 {
    font-size:24px
  }
  .editor-header .btn {
    padding:10px 15px;
    font-size:12px
  }
  .editor-meta {
    padding:21px 18px
  }
  .field label,.field-label {
    font-size:9px
  }
  .field input {
    font-size:13px
  }
  .editor-tools {
    margin-top:25px;
    gap:10px
  }
  .editor-tools h2 {
    font-size:17px
  }
  .editor-tools .text-button {
    font-size:11px
  }
  .editor-row-fields {
    grid-template-columns:1fr;
    padding:18px;
    gap:20px
  }
  .editor-row textarea {
    font-size:13px;
    min-height:65px
  }
  .row-heading {
    padding:7px 17px
  }
  .import-panel {
    padding:20px 17px
  }
  .import-panel h3 {
    font-size:16px
  }
  .import-panel p {
    font-size:11px
  }
  .import-panel textarea {
    font-size:11px;
    min-height:140px
  }
  .editor-footer {
    align-items:flex-start;
    gap:15px;
    flex-direction:column
  }
  .editor-footer>.button-group {
    width:100%;
    justify-content:flex-end
  }
  .editor-footer p {
    font-size:11px
  }
  .add-card {
    padding:21px;
    font-size:12px
  }
  .editor-save-state {
    font-size:10px
  }
  .focused .topbar .search-box {
    display:none
  }
  .focused .sidebar {
    display:none
  }
  .focused #main {
    padding:22px 20px 45px
  }
  .study-topline {
    gap:14px;
    padding-bottom:18px;
    margin-bottom:27px
  }
  .study-mode {
    gap:10px;
    min-width:0
  }
  .study-mode h1 {
    font-size:16px
  }
  .study-mode p {
    font-size:10px;
    max-width:220px
  }
  .study-mode>.icon {
    height:22px;
    width:22px
  }
  .study-topline .exit-study {
    font-size:0;
    gap:0
  }
  .study-topline .exit-study .icon {
    width:22px;
    height:22px
  }
  .focused-card .flashcard {
    min-height:335px
  }
  .session-progress {
    margin-bottom:22px;
    font-size:10px;
    gap:12px
  }
  .question-card {
    padding:25px 21px;
    border-radius:14px
  }
  .question-label {
    font-size:10px;
    margin-bottom:22px
  }
  .question-prompt {
    font-size:24px;
    margin-bottom:25px
  }
  .answer-label {
    font-size:11px
  }
  .choices {
    grid-template-columns:1fr
  }
  .choice {
    min-height:67px;
    font-size:12px;
    padding:14px
  }
  .choice-letter {
    width:21px;
    height:21px
  }
  .typed-answer {
    flex-direction:column;
    align-items:stretch;
    gap:15px
  }
  .typed-answer input {
    font-size:13px
  }
  .feedback {
    padding:17px;
    font-size:12px
  }
  .feedback strong {
    font-size:14px
  }
  .feedback p {
    font-size:11px
  }
  .question-footer {
    align-items:flex-start;
    gap:15px
  }
  .question-footer p {
    font-size:10px;
    max-width:140px
  }
  .question-footer .btn {
    font-size:12px;
    padding:10px 16px
  }
  .result-panel {
    margin-top:20px;
    padding:24px 20px
  }
  .result-panel h2 {
    font-size:25px
  }
  .result-panel>p {
    font-size:12px
  }
  .result-stats {
    gap:38px;
    padding:20px 0
  }
  .result-stats strong {
    font-size:24px
  }
  .result-stats span {
    font-size:10px
  }
  .result-panel .button-group .btn {
    width:100%;
    font-size:12px
  }
  .test-intro h2 {
    font-size:23px
  }
  .test-intro p {
    font-size:12px
  }
  .test-question .question-prompt {
    font-size:19px
  }
  .test-choice {
    font-size:12px
  }
  .test-submit {
    flex-direction:column;
    align-items:stretch;
    gap:5px
  }
  .test-submit p {
    font-size:11px
  }
  .test-submit .btn {
    width:100%;
    font-size:13px
  }
  .correction {
    padding:18px
  }
  .correction h3 {
    font-size:14px
  }
  .correction p {
    font-size:11px
  }
  .match-heading h2 {
    font-size:22px
  }
  .match-heading p {
    font-size:11px;
    max-width:220px
  }
  .match-timer {
    font-size:18px;
    padding:9px 12px;
    min-width:95px;
    gap:6px
  }
  .match-timer .icon {
    height:16px;
    width:16px
  }
  .match-board {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .match-tile {
    min-height:140px;
    padding:16px 12px;
    font-size:11px;
    gap:9px;
    border-radius:10px
  }
  .tile-side {
    font-size:7px;
    letter-spacing:.8px
  }
  .match-help {
    font-size:11px;
    flex-wrap:wrap;
    gap:9px;
    padding:8px 0
  }
  .storage-warning {
    margin-left:0;
    padding:14px 20px;
    font-size:11px
  }
  .storage-warning strong {
    font-size:12px
  }
  .toast {
    bottom:80px;
    font-size:11px;
    width:max-content;
    max-width:calc(100vw - 35px)
  }
  .focused .toast {
    bottom:20px
  }
  .error-page {
    margin:45px auto
  }
  .error-page h1 {
    font-size:26px
  }
  .error-page p {
    font-size:13px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

/* Keep the Home Screen app clear of the notch, home indicator and keyboard. */
body { padding-top:env(safe-area-inset-top); }
.topbar { height:calc(var(--header) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }
.offline-status { position:fixed; top:calc(var(--header) + env(safe-area-inset-top) + 5px); right:max(18px,env(safe-area-inset-right)); z-index:25; margin:0; padding:2px 8px; background:#ffffffed; color:var(--muted); border-radius:8px; font-size:11px; pointer-events:none; }
.library-tools { flex-wrap:wrap; gap:12px; }
.empty-state .btn + .btn { margin-left:12px; }
#restore-dialog { width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:18px; color:var(--ink); box-shadow:0 20px 80px #20254030; }
#restore-dialog::backdrop { background:#1f243b66; }
.restore-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.restore-heading h2 { margin:0; }
#restore-preview { padding:16px; margin:18px 0; background:var(--pale); border-radius:12px; overflow-wrap:anywhere; }
#restore-preview ul { padding-left:20px; }
#restore-preview p { margin-bottom:0; }
#restore-dialog .button-group { flex-wrap:wrap; }
@media(max-width:600px) {
  input,textarea,select,.search-box input,.field input,.field textarea,.answer-input { font-size:16px!important; }
  .topbar { padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right)); }
  .sidebar,body.compact .sidebar { height:calc(66px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); }
  #main,body.compact #main { padding-left:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right)); padding-bottom:calc(95px + env(safe-area-inset-bottom)); }
  body.focused #main { padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
  .icon-button,.create-top,.text-button,.btn { min-height:44px; }
  .icon-button,.create-top { min-width:44px; }
  .empty-state .btn { display:block; margin:12px auto!important; width:fit-content; }
  #restore-dialog { padding:20px; }
}