/* Phonon Web visual system. Runtime copies are generated by scripts/sync-web-visual-system.mjs. */
:root {
  color-scheme: light;
  background: var(--phonon-paper);
  color: var(--phonon-ink);
  font-family: var(--phonon-font);
  --phonon-paper: #fffdfb;
  --phonon-surface: #ffffff;
  --phonon-soft: #faf6f2;
  --phonon-ink: #292622;
  --phonon-muted: #6d6862;
  --phonon-faint: #77716b;
  --phonon-line: #ece5de;
  --phonon-line-strong: #d5c9bf;
  --phonon-primary: #ad432f;
  --phonon-primary-hover: #913824;
  /* Text accents and action fills have different contrast requirements. */
  --phonon-action: #f58b70;
  --phonon-action-hover: #ed795d;
  --phonon-on-action: #39231e;
  --phonon-selection: #fff0e9;
  --phonon-success: #4c765d;
  --phonon-success-soft: #edf2ec;
  /* Compatibility aliases for existing product styles, not green branding. */
  --phonon-green: var(--phonon-primary);
  --phonon-green-deep: var(--phonon-primary-hover);
  --phonon-mint: var(--phonon-selection);
  --phonon-orange: var(--phonon-action);
  --phonon-orange-soft: var(--phonon-selection);
  --phonon-blue: #dfe9f5;
  --phonon-blue-ink: #315b7a;
  --phonon-danger: #a33428;
  --phonon-danger-soft: #fcece8;
  --phonon-warning: #855b16;
  --phonon-warning-soft: #fff3db;
  --phonon-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --phonon-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --phonon-radius: 8px;
  --phonon-shadow: 0 2px 8px rgb(41 38 34 / 4%);
  --ink: var(--phonon-ink);
  --muted: var(--phonon-muted);
  --paper: var(--phonon-paper);
  --card: var(--phonon-surface);
  --line: var(--phonon-line);
  --line-strong: var(--phonon-line-strong);
  --green: var(--phonon-green);
  --green-deep: var(--phonon-green-deep);
  --mint: var(--phonon-mint);
  --orange: var(--phonon-orange);
  --orange-soft: var(--phonon-orange-soft);
  --blue: var(--phonon-blue);
  --tag-bg: var(--phonon-soft);
  --soft: var(--phonon-soft);
  --brand: var(--phonon-green);
  --brand-dark: var(--phonon-green-deep);
  --focus: var(--phonon-green);
  --amber: var(--phonon-warning);
  --red: var(--phonon-danger);
  --font-sans: var(--phonon-font);
  --font-mono: var(--phonon-mono);
  --bg-base: var(--phonon-paper);
  --bg-raised: var(--phonon-surface);
  --bg-overlay: var(--phonon-surface);
  --bg-hover: var(--phonon-soft);
  --bg-active: var(--phonon-mint);
  --bg-highlight: var(--phonon-blue);
  --border-subtle: var(--phonon-line);
  --border-default: var(--phonon-line-strong);
  --border-strong: #aaa198;
  --text-primary: var(--phonon-ink);
  --text-secondary: var(--phonon-muted);
  --text-muted: var(--phonon-faint);
  --text-inverse: #ffffff;
  --accent: var(--phonon-green);
  --accent-hover: var(--phonon-green-deep);
  --accent-dim: var(--phonon-green);
  --accent-muted: var(--phonon-mint);
  --accent-subtle: var(--phonon-selection);
  --success: var(--phonon-success);
  --success-muted: var(--phonon-success-soft);
  --warning: var(--phonon-warning);
  --warning-muted: var(--phonon-warning-soft);
  --danger: var(--phonon-danger);
  --danger-bg: var(--phonon-danger-soft);
  --danger-muted: var(--phonon-danger-soft);
  --purple: var(--phonon-blue-ink);
  --purple-muted: var(--phonon-blue);
  --shadow-sm: var(--phonon-shadow);
  --shadow-md: 0 4px 16px rgb(41 38 34 / 6%);
  --shadow-lg: 0 16px 48px rgb(41 38 34 / 14%);
  --shadow-glow: 0 0 0 1px var(--phonon-line);
  --radius-lg: var(--phonon-radius);
  --radius-xl: var(--phonon-radius);
  --bg: var(--phonon-paper);
  --surface: var(--phonon-surface);
  --surface-2: var(--phonon-soft);
  --border: var(--phonon-line);
  --text: var(--phonon-ink);
  --text-dim: var(--phonon-muted);
  --text-faint: var(--phonon-faint);
  --accent-weak: var(--phonon-mint);
  --salient: var(--phonon-warning);
  --salient-weak: var(--phonon-warning-soft);
  --locked: var(--phonon-warning);
  --locked-weak: var(--phonon-warning-soft);
  --draft: var(--phonon-muted);
  --draft-weak: var(--phonon-soft);
  --shadow: var(--phonon-shadow);
}
html { font-family: var(--phonon-font); background: var(--phonon-paper); color: var(--phonon-ink); -webkit-text-size-adjust: 100%; }
body { background: var(--phonon-paper); color: var(--phonon-ink); font-family: var(--phonon-font); font-size: 14px; line-height: 1.6; }
*, *::before, *::after { box-sizing: border-box; letter-spacing: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--phonon-ink); letter-spacing: 0; }
button, input, select, textarea { font-family: var(--phonon-font); letter-spacing: 0; }
button, .button, .btn { border-radius: var(--phonon-radius); }
input, select, textarea { color: var(--phonon-ink); accent-color: var(--phonon-green); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { border-color: var(--phonon-line-strong); border-radius: 6px; background-color: var(--phonon-surface); }
input::placeholder, textarea::placeholder { color: var(--phonon-faint); opacity: 1; }
input[type=checkbox], input[type=radio] { flex-shrink: 0; accent-color: var(--phonon-green); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--phonon-green); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
.brand, .dev-brand, .topbar__brand { color: var(--phonon-ink); font-weight: 800; font-size: 18px; letter-spacing: 0; text-decoration: none; }
.brand b, .brand-mark, .mark, .dev-brand-mark, .topbar__logo {
  display: inline-grid; place-items: center; width: 30px; height: 30px; min-width: 30px;
  background: var(--phonon-action); border: 0; border-radius: 50%; color: var(--phonon-on-action);
  font: italic 700 16px/1 Georgia, serif; flex-shrink: 0;
}
.global-nav, .top > nav, .suite-nav { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; }
.global-nav a, .global-nav strong, .top > nav a, .top > nav strong, .suite-nav a, .suite-nav strong {
  display: inline-flex; align-items: center; padding: 7px 9px; border-radius: 6px;
  color: var(--phonon-muted); background: transparent; font-size: 13px; font-weight: 650; line-height: 1.5;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.global-nav a:hover, .top > nav a:hover, .suite-nav a:hover { background: var(--phonon-soft); color: var(--phonon-ink); }
.global-nav strong, .top > nav strong, .suite-nav strong { color: var(--phonon-green); background: var(--phonon-mint); }
.eyebrow, .pm-eyebrow, .dev-eyebrow { color: var(--phonon-green); font-size: 11px; font-weight: 750; letter-spacing: 0; }
.page-heading h1, .hero h1, .reading h1, .task-heading h1 { font-family: var(--phonon-font); font-size: 30px; font-weight: 750; line-height: 1.25; letter-spacing: 0; overflow-wrap: anywhere; }
.card, .project-card, .stat-card, .auth-card, .dialog, dialog, .empty, .load-error, .loading-panel { border-radius: var(--phonon-radius); box-shadow: var(--phonon-shadow); }
.button.primary, .btn-primary, .btn--primary { background: var(--phonon-action); border-color: var(--phonon-action); color: var(--phonon-on-action); box-shadow: none; }
.button.primary:hover, .btn-primary:hover, .btn--primary:hover { background: var(--phonon-action-hover); border-color: var(--phonon-action-hover); color: var(--phonon-on-action); box-shadow: none; }
.button.secondary, .button.subtle { background: var(--phonon-surface); color: var(--phonon-ink); border: 1px solid var(--phonon-line-strong); }
.button.danger, .btn-danger { color: var(--phonon-danger); background: var(--phonon-danger-soft); border: 1px solid #e6b7af; }
.mono, code { font-family: var(--phonon-mono); }
dialog { color: var(--phonon-ink); background: var(--phonon-surface); max-height: calc(100dvh - 32px); }
dialog::backdrop { background: rgb(41 38 34 / 35%); }
.suite-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-height: 64px; padding: 12px 24px; border-bottom: 1px solid var(--phonon-line); background: var(--phonon-paper); }
.suite-header .suite-nav { margin-left: auto; }
@media (max-width: 820px) {
  .suite-header { padding: 12px 16px; }
  .suite-header .suite-nav { flex-basis: 100%; margin-left: 0; }
  .page-heading h1, .hero h1, .reading h1, .task-heading h1 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:600}
.global-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.global-nav a,.global-nav strong{padding:4px 8px;border-radius:999px;font-size:13px}
.global-nav a{text-decoration:none;color:var(--muted)}
.global-nav strong{background:var(--mint);color:var(--green)}
main{width:min(1080px,calc(100% - 32px));margin:20px auto 40px;display:grid;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
h1,h2{margin:0 0 10px}
p{margin:0;color:var(--muted)}
.notice{margin-top:12px;padding:10px;border-radius:8px;background:var(--success-muted);color:var(--success);border:1px solid var(--line)}
.notice.error{background:var(--danger-muted);color:var(--danger)}
.hidden{display:none}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.grid-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
.grid-form label.full{grid-column:1 / -1}
input,select,textarea,button{font:inherit}
input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:9px;background:white}
button{border:1px solid var(--line);background:white;padding:9px 12px;border-radius:8px;cursor:pointer}
button.primary{background:var(--green);border-color:var(--green);color:white}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
td code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.preview{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px;max-height:340px;overflow:auto}
.preview h3{margin:0 0 8px;font-size:15px}
.preview-note{margin:0;color:var(--muted)}
.preview-code,.preview-meta{margin:0;white-space:pre-wrap;word-break:break-word;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.preview details{margin-top:10px}
.preview summary{cursor:pointer;color:var(--muted)}
@media(max-width:780px){header{padding:14px;align-items:flex-start;flex-direction:column}.global-nav{width:100%}}