*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image: radial-gradient(900px 480px at 50% -80px, rgba(121, 233, 164, 0.07), transparent 70%);
  background-repeat: no-repeat;
}
main { flex: 1; width: 100%; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, summary { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--mint-2); outline-offset: 3px; border-radius: 10px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--mint); color: #07140d; font-weight: 700; transition: top 0.2s; }
.skip-link:focus { top: 12px; }
.noscript { padding: 24px; text-align: center; color: var(--text-2); }

.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.stack { display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; }
.icon { flex: none; }
.site-footer__nav a[data-buy] { color: var(--mint-2); }

.eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); font-weight: 500; }

/* ---------- buttons ---------- */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: 0.97rem; line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s;
  user-select: none;
}
.btn .icon { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn--lg { --h: 54px; padding: 0 26px; font-size: 1rem; }
.btn--sm { --h: 42px; padding: 0 16px; font-size: 0.9rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--mint); color: #07140d; box-shadow: 0 0 0 0 rgba(121, 233, 164, 0), 0 10px 26px -12px rgba(121, 233, 164, 0.6); }
.btn--outline { border-color: var(--line-2); background: rgba(185, 245, 189, 0.03); color: var(--text); }
.btn--buy { background: linear-gradient(135deg, #b9f5bd, #79e9a4); color: #05130b; font-weight: 750; box-shadow: 0 0 0 1px rgba(185, 245, 189, 0.5), 0 0 22px -2px rgba(121, 233, 164, 0.65); position: relative; }

@media (hover: hover) { .btn--buy:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px #b9f5bd, 0 0 32px 0 rgba(121, 233, 164, 0.9); } .btn--buy:hover .icon { transform: translate(2px, -2px); } }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 120; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 16px; background: #1d2b20; border: 1px solid var(--line-2); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8); font-size: 0.92rem; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.3s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.btn--ghost { color: var(--text-2); }
@media (hover: hover) {
  .btn--primary:hover { background: #cdfbd0; box-shadow: var(--glow); transform: translateY(-1px); }
  .btn--primary:hover .icon { transform: translateX(3px); }
  .btn--outline:hover { border-color: var(--mint-2); background: rgba(121, 233, 164, 0.09); transform: translateY(-1px); }
  .btn--outline:hover .icon { transform: translateX(2px); }
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.btn:disabled, .btn[aria-disabled="true"]:not(.btn--buy) {
  cursor: not-allowed; background: rgba(185, 245, 189, 0.04); color: var(--text-3);
  border: 1px dashed rgba(185, 245, 189, 0.2); box-shadow: none; transform: none;
}
.btn--primary:disabled { background: rgba(185, 245, 189, 0.06); }

.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: rgba(185, 245, 189, 0.04); transition: background 0.2s, border-color 0.2s, transform 0.18s var(--ease); }
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) { .icon-btn:hover { border-color: var(--line-2); background: rgba(185, 245, 189, 0.1); } }

.link-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 4px; font-size: 0.9rem; font-weight: 600; color: var(--mint-2); border-radius: 8px; }
.link-btn .icon { width: 16px; height: 16px; }
.link-btn:disabled { color: var(--text-3); cursor: not-allowed; }
@media (hover: hover) { .link-btn:not(:disabled):hover { color: var(--mint); } }

.badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(121, 233, 164, 0.14); color: var(--mint); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; }

/* ---------- panels ---------- */
.panel { background: linear-gradient(180deg, rgba(23, 34, 25, 0.78), rgba(17, 26, 19, 0.9)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; position: relative; }
.panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; flex-wrap: wrap; }
.panel__title { font-size: clamp(1.45rem, 6.4vw, 2rem); font-weight: 780; letter-spacing: -0.035em; line-height: 1.1; }
.panel__title:focus { outline: none; }
.panel__sub { margin-top: 6px; color: var(--text-2); font-size: 0.95rem; }
@media (min-width: 720px) { .panel { padding: 26px; } .panel__head { margin-bottom: 22px; } }

/* views */
.view { animation: view-in 0.5s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view[data-view="create"], .view[data-view="drafts"] { padding-top: 14px; padding-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}