:root {
  --primary: #9fe870; --primary-active: #cdffad; --primary-pale: #e2f6d5;
  --canvas: #ffffff; --canvas-soft: #e8ebe6;
  --ink: #0e0f0c; --body: #454745; --mute: #868685;
  --positive-deep: #054d28; --warning: #ffd11a; --warning-content: #4a3b1c;
  --negative: #d03238; --negative-deep: #a72027; --negative-bg: #320707;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas-soft); color: var(--ink);
  font: 400 16px/24px Inter, system-ui, sans-serif; font-feature-settings: "calt"; }
a { color: var(--ink); }
code { font-size: 14px; }

header.nav { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 24px;
  padding: 12px 24px; background: var(--canvas); }
.brand { font-weight: 900; font-size: 24px; text-decoration: none; }
.links { display: flex; gap: 16px; flex: 1; }
.links a { font: 600 14px/20px Inter, sans-serif; text-decoration: none; }
.links a:hover { text-decoration: underline; }
.me { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 14px; color: var(--body); }
.me form { margin: 0; }

main { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
h1 { font-weight: 900; font-size: 64px; line-height: 54.4px; margin: 0 0 24px; overflow-wrap: anywhere; }
h2 { font-weight: 600; font-size: 32px; line-height: 38.4px; letter-spacing: -0.96px; margin: 0 0 16px; }
h3 { font-weight: 600; font-size: 24px; line-height: 31.2px; letter-spacing: -0.48px; margin: 0 0 16px; }
.lead { font-size: 20px; line-height: 30px; color: var(--body); margin: 0 0 32px; max-width: 720px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: start; }
.card { background: var(--canvas); border-radius: 24px; padding: 24px; margin: 0; }
.card.dark { background: var(--ink); color: var(--primary); }
.card.dark code { color: var(--canvas-soft); }
.card.narrow { max-width: 520px; margin: 10vh auto; }
.tile { display: block; text-decoration: none; transition: transform .15s; }
.tile:hover { transform: translateY(-2px); }
.tile p { color: var(--body); margin: 0; }
.sub { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--canvas-soft); }

.btn { display: inline-block; padding: 12px 24px; border: 0; border-radius: 24px; cursor: pointer;
  background: var(--primary); color: var(--ink); font: 600 16px/24px Inter, sans-serif; text-decoration: none; }
.btn:hover { background: var(--primary-active); }
.btn.secondary { background: var(--canvas-soft); }
.btn.secondary:hover { background: var(--primary-pale); }
.btn.tertiary { background: var(--canvas); border: 1px solid var(--ink); }
.btn.danger { background: var(--negative); color: #fff; }
.btn.danger:hover { background: var(--negative-deep); }
.btn.sm { padding: 6px 16px; font-size: 14px; line-height: 20px; }
.btn.wide { width: 100%; }

label { display: block; margin: 0 0 16px; font: 600 14px/20px Inter, sans-serif; }
input[type=text], input[type=password], select { display: block; width: 100%; margin-top: 4px; padding: 12px 16px;
  border: 1px solid var(--ink); border-radius: 12px; background: var(--canvas); color: var(--ink); font: 16px/24px Inter, sans-serif; }
input:focus-visible, .btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 8px; }
label.check input { width: 18px; height: 18px; accent-color: var(--ink); }
form .btn { margin-top: 8px; }

.badge { display: inline-block; padding: 4px 12px; border-radius: 9999px; font: 600 14px/20px Inter, sans-serif;
  background: var(--primary-pale); color: var(--positive-deep); white-space: nowrap; }
.badge.warn { background: var(--warning); color: var(--warning-content); }
.badge.neutral { background: var(--canvas-soft); color: var(--ink); }
.error { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: var(--negative-bg); color: #fff; }
code.link { display: block; margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: var(--primary-pale);
  word-break: break-all; user-select: all; }

table { width: 100%; border-collapse: collapse; }
th { padding: 8px 12px 8px 0; text-align: left; font: 600 12px/16px Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .5px; color: var(--mute); }
td { padding: 12px 12px 12px 0; border-top: 1px solid var(--canvas-soft); font-size: 14px; line-height: 20px; }
.card.dark td { border-color: #2a2c27; }

.auth { max-width: 440px; margin: 6vh auto 0; }

/* Lists of items with collapsible settings (snap) */
h2 { margin-top: 48px; }
h1 + .lead + h2, h1 + p + h2 { margin-top: 0; }
.list { display: grid; gap: 12px; }
.item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.item-head .name { font-weight: 600; font-size: 18px; overflow-wrap: anywhere; }
.item-head small { color: var(--mute); font-size: 14px; }
.item-head form { margin: 0 0 0 auto; }
.item-head form .btn { margin: 0; }
details { margin-top: 12px; }
summary { cursor: pointer; font: 600 14px/20px Inter, sans-serif; color: var(--body); }
details[open] summary { margin-bottom: 16px; }
details form { margin-bottom: 12px; }
.inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.inline label { flex: 1 1 200px; margin: 0; }
.inline .btn { margin: 0; }
.narrow-left { max-width: 640px; }

@media (max-width: 767px) {
  h1 { font-size: 40px; line-height: 40px; }
  main { padding: 32px 16px; }
  header.nav { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .links { order: 3; flex-basis: 100%; }
}

/* Debug console device rows */
.device { padding: 12px 0; border-top: 1px solid var(--canvas-soft); }
.device:first-child { border-top: 0; padding-top: 0; }
.device .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.device .name { overflow-wrap: anywhere; font-size: 16px; }
code.mono { font-size: 12px; color: var(--mute); word-break: break-all; }

/* Ideas */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-head h1 { margin: 0; }
.badge.dark { background: var(--ink); color: var(--primary); }
.muted { color: var(--mute); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 24px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; }
.filters input[type=search] { flex: 1 1 240px; padding: 12px 16px; border: 1px solid var(--ink); border-radius: 12px; font: 16px/24px Inter, sans-serif; background: var(--canvas); }
.filters select { width: auto; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-block; padding: 6px 16px; border-radius: 9999px; background: var(--canvas); font: 600 14px/20px Inter, sans-serif; cursor: pointer; }
.chip input:checked + span { background: var(--ink); color: var(--primary); }
.chip input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-bottom: 48px; }
.idea-card { display: flex; gap: 16px; align-items: center; text-decoration: none; padding: 16px; transition: transform .15s; }
.idea-card:hover { transform: translateY(-2px); }
.thumb { flex: none; width: 72px; height: 72px; border-radius: 16px; overflow: hidden; background: var(--primary-pale);
  display: grid; place-items: center; font: 900 32px/1 Inter, sans-serif; color: var(--positive-deep); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.idea-text { min-width: 0; display: grid; gap: 6px; }
.idea-text b { font-size: 18px; overflow-wrap: anywhere; }
.idea-text .meta { margin: 0; gap: 8px; }
.stack { display: grid; gap: 24px; }
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1 { font-size: 32px; line-height: 38px; margin: 24px 0 12px; }
.md h2 { font-size: 24px; line-height: 31px; margin: 24px 0 12px; letter-spacing: -.48px; }
.md pre { background: var(--canvas-soft); padding: 12px 16px; border-radius: 12px; overflow-x: auto; }
.md table { border-collapse: collapse; }
.md th, .md td { border: 1px solid var(--canvas-soft); padding: 6px 10px; }
.md img { max-width: 100%; }
.md blockquote { margin: 0; padding-left: 16px; border-left: 4px solid var(--primary); color: var(--body); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.gallery img { width: 100%; border-radius: 12px; display: block; background: var(--canvas-soft); }
.gallery.edit { margin-bottom: 12px; }
.thumb-edit { display: grid; gap: 8px; justify-items: start; }
.demo-frame { margin: 16px auto 0; width: min(100%, 420px); aspect-ratio: 9 / 19.5; max-height: 80vh; border-radius: 24px; overflow: hidden; background: var(--ink); border: 8px solid var(--ink); }
.demo-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.comment { padding: 12px 0; border-top: 1px solid var(--canvas-soft); }
.comment p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#comments { margin-top: 16px; }
textarea { display: block; width: 100%; margin-top: 4px; padding: 12px 16px; border: 1px solid var(--ink); border-radius: 12px;
  background: var(--canvas); color: var(--ink); font: 16px/24px Inter, sans-serif; resize: vertical; }
textarea:focus-visible, input[type=search]:focus-visible, select:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.stack-form { max-width: 760px; }
fieldset { border: 1px solid var(--canvas-soft); border-radius: 16px; padding: 16px; margin: 0 0 16px; }
legend { font: 600 14px/20px Inter, sans-serif; padding: 0 8px; }
input[type=file] { display: block; margin-top: 4px; font: 14px/20px Inter, sans-serif; max-width: 100%; }

/* Demo drop zone */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.dropzone { display: grid; place-items: center; min-height: 120px; margin: 8px 0; padding: 24px; text-align: center; cursor: pointer;
  border: 2px dashed var(--mute); border-radius: 24px; background: var(--canvas-soft); font: 400 16px/24px Inter, sans-serif; color: var(--body);
  transition: background .15s, border-color .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--ink); background: var(--primary-pale); }
.dropzone:focus-within { outline: 3px solid var(--primary); outline-offset: 2px; }
.linklike { border: 0; padding: 0; background: none; color: var(--ink); font: 600 14px/20px Inter, sans-serif; text-decoration: underline; cursor: pointer; }
.drop-status { margin: 12px 0 0; font-weight: 600; min-height: 24px; }
.drop-status.ok { color: var(--positive-deep); }
.drop-status.bad { color: var(--negative); }
.shares { margin-bottom: 16px; }
.share { padding: 8px 0; }
.share code.link { margin: 0; flex: 1 1 260px; }

/* Today */
.badge.hot { background: var(--negative); color: #fff; }
.saved-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.saved-filters:empty { display: none; }
.saved { display: inline-flex; align-items: center; border-radius: 9999px; background: var(--primary-pale); font: 600 14px/20px Inter, sans-serif; }
.saved.on { background: var(--primary); }
.saved a { padding: 6px 4px 6px 16px; text-decoration: none; }
.saved form { margin: 0; }
.x { border: 0; background: none; padding: 0 6px; font: 600 16px/20px Inter, sans-serif; cursor: pointer; color: var(--body); }
.saved .x { padding: 6px 12px 6px 6px; }
.save-filter { display: flex; gap: 8px; align-items: center; margin: 0; }
.save-filter input { width: 180px; margin: 0; padding: 6px 12px; }
.save-filter .btn { margin: 0; }
.counts { margin: 0 0 48px 8px; font-size: 14px; }
.tasks { list-style: none; margin: 0; padding: 0; border-radius: 24px; background: var(--canvas); }
.task { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 16px; border-top: 1px solid var(--canvas-soft); }
.task:first-child { border-top: 0; border-radius: 24px 24px 0 0; }
.task:last-child { border-radius: 0 0 24px 24px; }
.task:only-child { border-radius: 24px; }
.task form { margin: 0; }
.task form .btn { margin: 0; }
.task.new { background: var(--primary-pale); }
.task.new form { display: flex; align-items: center; gap: 10px; flex: 1; }
.plus { width: 24px; text-align: center; font: 600 20px/24px Inter, sans-serif; color: var(--positive-deep); }
.task.empty { padding: 16px 20px; }
.task.hot { background: #fdf0f0; }
.task.snoozed { color: var(--mute); }
.task.done .title-edit { text-decoration: line-through; color: var(--mute); }
.tick { flex: none; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 50%; background: var(--canvas); cursor: pointer; font-size: 14px; line-height: 18px; padding: 0; }
.task.snoozed .tick { border-color: var(--mute); }
.tick:hover { background: var(--primary); }
.title-form { flex: 1 1 320px; min-width: 0; }
input.title-edit, input.tag-add { margin: 0; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: 400 16px/24px Inter, sans-serif; }
input.title-edit { width: 100%; }
input.title-edit:hover, input.tag-add:hover { background: var(--canvas-soft); }
input.title-edit:focus, input.tag-add:focus { background: var(--canvas); outline: 2px solid var(--primary); outline-offset: 0; }
.task-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tag { display: inline-flex; align-items: center; padding: 0 0 0 10px; border-radius: 9999px; background: var(--primary-pale); font-size: 14px; line-height: 24px; }
.tag a { color: var(--positive-deep); text-decoration: none; }
.tag .x { font-size: 14px; color: var(--positive-deep); }
input.tag-add { width: 72px; font-size: 14px; line-height: 20px; color: var(--mute); }
input.tag-add:focus { width: 120px; color: var(--ink); }
.notes-btn { border: 0; background: none; padding: 2px 6px; border-radius: 8px; cursor: pointer; font: 600 13px/20px Inter, sans-serif; color: var(--mute); }
.notes-btn.has { color: var(--positive-deep); }
.notes-btn:hover, .notes-btn[aria-expanded=true] { background: var(--canvas-soft); }
.task-tools { display: none; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.task-tools form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: relative; }
.task:hover .task-tools, .task:focus-within .task-tools { display: flex; }
.task:not(:hover):not(:focus-within) .notes-btn:not(.has):not([aria-expanded=true]) { visibility: hidden; }
@media (hover: none) { .task-tools { display: flex; } .task .notes-btn { visibility: visible !important; } }
.pick { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.notes-slot { flex-basis: 100%; }
.notes-slot:empty { display: none; }
.notes { padding: 4px 0 8px 34px; }
.notes .md-editor { min-height: 120px; }
.notes .md-editor .milkdown .ProseMirror { min-height: 120px; padding: 12px 40px 16px; }
.notes .btn { margin-top: 8px; }
.group { margin-bottom: 24px; }
.group h3 { display: flex; gap: 8px; align-items: baseline; margin: 0 0 8px 8px; font: 900 18px/24px Inter, sans-serif; }
.group h3 span { font: 600 14px/20px Inter, sans-serif; color: var(--mute); }