:root {
  --ink-black: #111111;
  --ink-900: #1a1a1a;
  --ink-700: #444444;
  --ink-500: #888888;
  --ink-300: #d6d6d6;
  --ink-200: #ececec;
  --ink-100: #f5f5f3;
  --ink-white: #ffffff;
  --ink-shadow: 0 0.35rem 0 var(--ink-300);
  --ink-border: 2px;
  --ink-radius: 0.5rem;
  --ink-space: 1rem;
  color: var(--ink-black);
  background: var(--ink-100);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 18rem; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.muted { color: var(--ink-500); font-size: .875rem; font-weight: 400; }
.feed-links { font-size: .9rem; }
.topbar { align-items: center; background: var(--ink-black); color: var(--ink-white); display: flex; justify-content: space-between; padding: .9rem max(1rem, 4vw); }
.brand { font-size: 1rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; }
.topnav { display: flex; gap: 1rem; font-size: .9rem; }
.topnav a { text-decoration: none; text-underline-offset: .25em; }
.topnav a:hover, .topnav a:focus-visible { text-decoration: underline; }
.topnav form { margin: 0; }
.mode-switch { display: inline-flex; }
.mode-button { align-items: center; display: inline-flex; font-size: 1.1rem; justify-content: center; line-height: 1; min-width: 1.5rem; }
.mode-auto-icon { display: block; height: 1.15rem; width: 1.15rem; }
.nav-button { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0; }
.shell { margin: 0 auto; max-width: 68rem; padding: clamp(1.25rem, 4vw, 3rem) max(1rem, 4vw) 5rem; }
.eyebrow { color: var(--ink-700); font-size: .75rem; font-weight: 700; letter-spacing: .14em; margin-bottom: .5rem; }
.page-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); letter-spacing: -.04em; line-height: 1.05; margin-bottom: .5rem; }
h2 { font-size: 1.25rem; line-height: 1.2; margin-bottom: .35rem; }
.lede { color: var(--ink-700); font-size: 1.05rem; max-width: 36rem; }
.button { align-items: center; background: var(--ink-white); border: var(--ink-border) solid var(--ink-900); border-radius: 999px; color: var(--ink-black); cursor: pointer; display: inline-flex; font: inherit; font-weight: 700; justify-content: center; min-height: 2.75rem; padding: .55rem 1rem; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.button:hover, .button:focus-visible { background: var(--ink-200); transform: translateY(-1px); }
.button-primary { background: var(--ink-black); color: var(--ink-white); }
.button-primary:hover, .button-primary:focus-visible { background: var(--ink-700); }
.button-secondary { background: var(--ink-white); }
.button-danger { background: var(--ink-200); border-color: var(--ink-700); border-style: dashed; color: var(--ink-900); }
.button-danger:hover, .button-danger:focus-visible { background: var(--ink-300); border-color: var(--ink-black); }
.search { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.bookmark-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
input, select, textarea { background: var(--ink-white); border: var(--ink-border) solid var(--ink-900); border-radius: var(--ink-radius); color: var(--ink-black); font: inherit; min-height: 2.75rem; padding: .7rem .8rem; width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--ink-500); outline-offset: 3px; }
.search input { flex: 1; }
.bookmark-list { border-top: var(--ink-border) solid var(--ink-900); }
.bookmark-card { align-items: start; border-bottom: 1px solid var(--ink-300); display: flex; gap: 1rem; justify-content: space-between; padding: 1.15rem 0; }
.bookmark-main { min-width: 0; }
.bookmark-card h2 a { text-decoration-thickness: .1em; text-underline-offset: .14em; }
.bookmark-url { color: var(--ink-700); display: block; font-size: .9rem; overflow-wrap: anywhere; }
.bookmark-meta { color: var(--ink-500); display: flex; font-size: .72rem; gap: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.tag { border: 1px solid var(--ink-700); border-radius: 999px; font-size: .78rem; padding: .15rem .55rem; }
.status { color: var(--ink-700); font-size: .8rem; white-space: nowrap; }
.panel { background: var(--ink-white); border: var(--ink-border) solid var(--ink-900); border-radius: var(--ink-radius); box-shadow: var(--ink-shadow); padding: clamp(1rem, 3vw, 2rem); }
.section { margin-top: clamp(3rem, 8vw, 5.5rem); }
.section:first-child { margin-top: 0; }
.section-heading { border-bottom: var(--ink-border) solid var(--ink-900); margin: 0 0 1rem; padding: 0 0 .75rem; }
.settings-section { margin-top: 1.5rem; }
.empty { text-align: center; }
.form { display: grid; gap: .55rem; max-width: 42rem; }
.form label, legend { font-weight: 700; }
.form fieldset { border: 0; border-top: 1px solid var(--ink-300); display: grid; gap: .75rem; margin: 1rem 0 0; padding: 1rem 0 0; }
.choice { align-items: start; display: flex; gap: .6rem; font-weight: 400 !important; }
.choice input { margin-top: .3rem; width: auto; }
.choice span { display: grid; }
.choice small { color: var(--ink-700); }
.choice-disabled { color: var(--ink-500); }
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.form-actions form { margin: 0; }
.bookmark-actions { align-items: center; }
.notice { border: var(--ink-border) solid var(--ink-900); margin-bottom: 1rem; padding: .8rem 1rem; }
.notice-error { background: var(--ink-200); }
.bookmark-detail { margin-bottom: 1rem; }
.snapshot { margin-top: 1rem; }
.snapshot-content { font-family: Georgia, 'Times New Roman', serif; font-size: 1.08rem; line-height: 1.75; max-width: 42rem; }
.snapshot-content h1, .snapshot-content h2, .snapshot-content h3, .snapshot-content h4 { font-family: Arial, Helvetica, sans-serif; line-height: 1.2; margin-top: 1.8em; }
.snapshot-content p, .snapshot-content ul, .snapshot-content ol, .snapshot-content pre, .snapshot-content blockquote { margin: 1em 0; }
.snapshot-content ul, .snapshot-content ol { padding-left: 1.5rem; }
.snapshot-content a { text-decoration-thickness: .08em; text-underline-offset: .12em; }
.snapshot-content pre { background: var(--ink-100); border: 1px solid var(--ink-300); overflow-x: auto; padding: .8rem; }
.snapshot-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.snapshot-content blockquote { border-left: 4px solid var(--ink-900); color: var(--ink-700); margin-left: 0; padding-left: 1rem; }
.snapshot-content img { height: auto; max-width: 100%; }
.detail-notes { margin: 1.25rem 0 0; white-space: pre-wrap; }
.danger-action { margin-top: 1rem; }
@media (max-width: 38rem) {
  .topbar { align-items: start; flex-direction: column; gap: .65rem; }
  .topnav { gap: .8rem; }
  .page-heading { flex-direction: column; }
  .page-heading > .button { align-self: start; }
  .search { align-items: stretch; flex-direction: column; }
  .search .button { width: 100%; }
  .bookmark-card { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .button:hover, .button:focus-visible { transform: none; }
}
@media (display-mode: standalone) {
  body { padding-bottom: env(safe-area-inset-bottom); padding-top: env(safe-area-inset-top); }
}