/* The owner's design system underneath: this :root block is copied verbatim from
   design-kit/returned/meridian-ds/tokens.css (root commit 12448c5). The layout below
   follows his Claude Design return for these pages (root commit 6908cad). */
:root{
  /* brand (the mark) */
  --brand-gold:#C6A86B;--brand-near-black:#0B0B0B;
  /* surfaces */
  --bg:#0A0A0C;--s1:#111114;--s2:#17171B;--s3:#1F1F25;
  /* lines */
  --l1:#2B2B33;--l2:#40404A;--tile-edge:#4E4E5A;
  /* text */
  --t1:#F3F2EE;--body:#C9C8C3;--t2:#A3A2AA;--ink:#08080A;
  /* lit accent (one lit action; new, unread, presence, yours) */
  --neon:#7AFF58;--neon:oklch(90% 0.24 140);
  --neon-dim:#7AFF5824;--neon-dim:oklch(90% 0.24 140 / 0.14);
  --neon-glow:#7AFF5873;--neon-glow:oklch(90% 0.24 140 / 0.45);
  /* gold accent (money, wins, trainings, tools, AI) */
  --gold:#E6BC4A;--gold-dim:rgba(230,188,74,0.16);--gold-glow:rgba(230,188,74,0.5);
  /* overlays */
  --header-scrim:rgba(10,10,12,0.9);--header-blur:14px;
  --menu-shadow:0 30px 80px rgba(0,0,0,0.6);
  --tile-gradient:linear-gradient(160deg,#2C2C34,#1C1C22);--tile-highlight:inset 0 1px 0 rgba(255,255,255,0.06);
  /* type */
  --disp:'Chakra Petch',sans-serif;--text:'IBM Plex Sans',sans-serif;
  /* motion */
  --spring:cubic-bezier(0.22,1.4,0.36,1);
  --d-color:120ms;--d-press:200ms;--d-button:220ms;--d-menu:320ms;--d-underline:380ms;--d-fill:1400ms;
  /* space */
  --gutter:clamp(16px,3vw,40px);--header-h:60px;
  /* chamfers */
  --ch-3:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);
  --ch-4:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
  --ch-5:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
  --ch-6:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
  --ch-7:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  --ch-8:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}

/* The two faces, self-hosted from their upstream releases; OFL texts beside them. */
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ChakraPetch-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/ChakraPetch-Bold.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/IBMPlexSans-Regular.woff2) format('woff2'); }

html, body { margin: 0; background: var(--bg); color: var(--t1); font-family: var(--text); -webkit-font-smoothing: antialiased; }
button, input { font-family: inherit; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

.card { box-sizing: border-box; max-width: 480px; margin: 0 auto; padding: 48px 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.wordmark img { display: block; height: 60px; width: auto; }

/* The panel: square, one defined border, the lit edge on its left. */
.panel { position: relative; box-sizing: border-box; width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 20px; padding: 24px 26px; background: var(--s1); border: 1px solid var(--l2); }
.panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--neon); box-shadow: 0 0 18px var(--neon-glow); }

form { display: flex; flex-direction: column; gap: 16px; }
h1, .lead { margin: 0 0 4px; font: 700 28px/1.05 var(--disp); letter-spacing: -0.01em; color: var(--t1); text-wrap: pretty; }
.fields { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
label { font: 600 12px/1.2 var(--disp); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t2); }
input { box-sizing: border-box; width: 100%; min-height: 46px; padding: 0 16px; border: 1px solid var(--l2); border-radius: 0; background: var(--bg); color: var(--t1); font: 400 15px/1.4 var(--text); outline-offset: 0; transition: border-color var(--d-color); }
input:focus { border-color: var(--neon); }

/* The one lit action on each page. */
form button { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; margin-top: 4px; padding: 0 20px; border: 1px solid var(--neon); background: var(--neon); color: var(--ink); font: 700 13px/1 var(--disp); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; clip-path: var(--ch-8); cursor: pointer; transition: transform var(--d-button) var(--spring), border-color var(--d-color), background var(--d-press), color var(--d-color); }
form button:active { transform: scale(0.93); }

/* One message at a time, the same place and the same look for every answer. */
.status { margin: 0; padding: 10px 12px; background: var(--s2); border: 1px solid var(--l2); color: var(--t1); font: 400 14px/1.5 var(--text); text-wrap: pretty; animation: rise var(--d-button) var(--spring) both; }
.status:empty { display: none; }
.status[data-kind="saved"] { border-color: var(--gold); }

/* Everything else is quieter. */
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.links a { color: var(--t2); font: 700 12px/1 var(--disp); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: color var(--d-color); }
.links a:hover { color: var(--neon); }
.links a.back::before { content: "\2190"; margin-right: 0.5em; }
.aside { margin: 0; padding-top: 14px; border-top: 1px dashed var(--l2); color: var(--t2); font: 400 13px/1.45 var(--text); text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }