/* GENERATED by scripts/site_sync_styles.py from frontend/src/styles/{tokens,fonts,app}.css. Do not edit:
   change the app's styles, then run `make site-sync` (make site-check fails when this file is stale). */
:root {
  --bg: #FBF6F1;
  --panel: #FFFFFF;
  --raised: #F6EEE6;
  --hover: #F1E6DB;
  --line: #ECE1D6;
  --text: #2E2622;
  --muted: #6F625A;
  --accent: #BC4C33;
  --accent-ink: #A8432C;
  --on-accent: #FFFFFF;
  --accent-soft: #FCE6DD;
  --note-mel: #E46F52;
  --note-chd: #D9952F;
  --roll-bg: #FCF8F4;
  --roll-bar: #F7EFE7;
  --roll-line: #EEE3D8;
  --good: #26775A;
  --good-bg: #E0F2E9;
  --warn: #8E5B0B;
  --warn-bg: #FBEBCF;
  --bad: #9C4545;
  --bad-bg: #F8E3E1;
  --shadow: 0 1px 2px #2E26220F, 0 6px 20px #2E26220A;
  --swatch: #E46F52;
  color-scheme: light;
}
/* Bundled UI fonts (public/fonts, licences in public/fonts/LICENSES.md): the mock's Adwaita Sans (UI text, one
   variable file) and Ubuntu Nerd Font Propo (headings). Same family names as the mock CSS, so app.css is unchanged. */
@font-face {
  font-family: "Adwaita Sans";
  src: url("/fonts/AdwaitaSans-Regular.subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu Nerd Font Propo";
  src: url("/fonts/UbuntuNerdFontPropo-Regular.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu Nerd Font Propo";
  src: url("/fonts/UbuntuNerdFontPropo-Medium.subset.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu Nerd Font Propo";
  src: url("/fonts/UbuntuNerdFontPropo-Bold.subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* app.css components shared with the public pages (verbatim) */
* { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.fill { fill: currentColor; stroke: none; }
.display { font-family: "Ubuntu Nerd Font Propo", "Adwaita Sans", sans-serif; }
.logo { width: 32px; height: 32px; border-radius: 10px; background: var(--accent); display: grid; place-items: center; }
.logo svg { width: 20px; height: 20px; }
.logo rect { fill: var(--on-accent); }
.nav { display: flex; gap: 4px; padding: 4px; background: var(--raised); border-radius: 999px; }
.spacer { flex: 1; }
h2 { font-size: 20px; font-weight: 500; }
h3 { font-size: 15px; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.prompt { position: relative; }
.prompt textarea { width: 100%; height: 112px; resize: none; border: 2px solid transparent; background: var(--raised); border-radius: 14px; padding: 14px 16px; font-size: 16px; line-height: 1.45; outline: none; transition: border-color .15s, background .15s; }
.prompt textarea::placeholder { color: var(--muted); }
.prompt textarea:focus { border-color: var(--accent); background: var(--panel); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; font-weight: 500; }
.btn.primary { background: var(--accent); color: var(--on-accent); height: 48px; font-size: 15px; border-radius: 14px; width: 100%; transition: filter .15s, transform .1s; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.primary:active { transform: translateY(1px); }
.btn.ghost { background: var(--raised); color: var(--text); }
.btn.ghost:hover { background: var(--hover); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.playbtn { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; transition: transform .1s, background .15s; flex: none; }
.playbtn:hover { transform: scale(1.04); }
.playbtn.on { background: var(--accent); color: var(--on-accent); }
.playbtn svg { width: 18px; height: 18px; }
.playrow { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.playrow .time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.roll { position: relative; border-radius: 14px; overflow: hidden; background: var(--roll-bg); min-height: 0; }
.roll canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.roll .ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); display: none; border-radius: 2px; }
.roll .ph::before { content: ""; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.playing .roll .ph { display: block; }
.ib { width: 44px; height: 44px; border-radius: 12px; color: var(--muted); display: grid; place-items: center; transition: background .15s, color .15s; position: relative; }
.ib:hover { background: var(--raised); color: var(--text); }
.ib[data-tip]:hover::after { content: attr(data-tip); position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--text); color: var(--bg); font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 5; }
.tries { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 560px; margin-top: 8px; }
.try { height: 36px; padding: 0 16px; border-radius: 999px; background: var(--raised); font-weight: 500; color: var(--text); }
.try:hover { background: var(--accent-soft); color: var(--accent-ink); }
.card { background: var(--panel); border-radius: 20px; box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.badge { height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; background: var(--raised); color: var(--muted); white-space: nowrap; }
.badge.acc { background: var(--accent-soft); color: var(--accent-ink); }