/* Lindy Upgrade / shared visual system. Both learning and writing import this file. */
:root {
  color-scheme: light;
  --sky: #00a8e8;
  --teal: #2bbab5;
  --navy: #12356b;
  --cyan: var(--sky);
  --cyan-dark: #087f91;
  --accent: var(--cyan-dark);
  --yellow: #ffbd24;
  --mint: #eaf8f6;
  --mint-strong: #d8f2ee;
  --ink: #203954;
  --muted: #637689;
  --paper: #f6fafb;
  --card: #fff;
  --line: #dce9ed;
  --danger: #a04435;
  --green: var(--cyan-dark);
  --green-dark: var(--navy);
  --lime: var(--yellow);
  --blue: var(--sky);
  --shadow: 0 12px 36px rgba(18, 53, 107, .045);
  --brand-gradient: linear-gradient(110deg, var(--sky), var(--teal));
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
:where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
.app-header { background: #fff; border-bottom: 1px solid var(--line); }
.app-header-inner { max-width: 1240px; min-height: 88px; margin: auto; padding: 12px 32px; display: flex; align-items: center; gap: 44px; }
.app-brand { flex: 0 0 138px; width: 138px; height: 68px; display: block; position: relative; overflow: hidden; }
/* The supplied PNG is untouched. This window removes transparent canvas only. */
.app-brand img { position: absolute; width: 180px; max-width: none; height: 180px; left: -24px; top: -56px; }
.app-nav { display: flex; gap: 8px; align-items: center; }
.app-nav a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.app-nav a:hover { background: var(--paper); color: var(--navy); }
.app-nav a[aria-current="page"] { background: var(--mint); color: var(--cyan-dark); }
.app-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-header-meta { margin-left: auto; display: flex; gap: 20px; align-items: center; white-space: nowrap; }
.app-site-link { color: var(--muted); font-size: 13px; text-decoration: none; padding: 10px 0; }
.app-site-link:hover { color: var(--cyan-dark); }
.app-beta { font-size: 11px; font-weight: 600; color: #816017; background: #fff7df; border: 1px solid #f5e9c5; border-radius: 7px; padding: 4px 8px; }
.app-footer { max-width: 1176px; margin: 0 auto; padding: 22px 0; display: flex; gap: 20px; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.7; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 20; background: white; padding: 12px; border-radius: 8px; color: var(--navy); }
.skip-link:focus { top: 12px; }
@media (max-width: 760px) {
  .app-header-inner { gap: 18px; padding: 10px 20px; flex-wrap: wrap; }
  .app-brand { flex-basis: 118px; width: 118px; height: 58px; }
  .app-brand img { width: 155px; height: 155px; left: -21px; top: -49px; }
  .app-header-meta { gap: 12px; }
  .app-nav { order: 3; width: 100%; padding-top: 4px; border-top: 1px solid #eef4f5; }
  .app-nav a { flex: 1; padding: 8px 12px; }
  .app-footer { margin: 0 20px; flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 520px) {
  .app-nav { gap: 2px; }
  .app-nav a { min-width: 0; gap: 4px; padding: 7px 5px; font-size: 11px; }
  .app-nav svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}