/* FaceForge: muscle-red / teal / violet accents on the shared neon theme, plus page styles. */
:root { --accent:#ff6b6b; --accent2:#4fd1c5; --accent3:#b794f4; --glow:rgba(255,107,107,.14);
  --ecc:#4f9dff; --con:#ff6b6b; --iso:#ffd23f; --tra:#7d8aa8; }
button, .btn, .seg button.on { color:#1a0505; }
.mark { border-radius:46% 46% 50% 50% / 40% 40% 60% 60%; }
.door b { color:var(--accent); }
.hero.two { align-items:center; }
.hero figure { margin:0; }
.hero canvas { width:100%; max-width:440px; aspect-ratio:1; display:block; margin:0 auto; }
.hero figcaption, .fig figcaption { font:12px var(--mono); color:var(--mute); text-align:center; }
/* face page */
.facewrap { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; margin-top:12px; }
.facewrap .stage canvas { aspect-ratio:1; cursor:grab; touch-action:none; }
.controls { background:rgba(11,12,26,.92); border:1px solid var(--line); border-radius:6px; padding:6px 16px 16px; }
.controls h3:first-child { margin-top:12px; }
.presets { display:flex; flex-wrap:wrap; gap:4px; } .presets button { margin:0; padding:5px 9px; font-size:11px; }
.presets button.on { box-shadow:0 0 0 2px var(--accent2) inset; }
.ctl label { margin:4px 0 0; } .ctl input[type=range] { margin:0; }
.bars { display:grid; gap:4px; font-size:13px; }
.bar { display:grid; grid-template-columns:minmax(0,1fr) 120px 44px; gap:8px; align-items:center; }
.bar .track { display:block; height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.bar .fill { display:block; height:100%; background:linear-gradient(90deg, #ffd23f, var(--accent)); width:0; }
.bar span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar b { font:12px var(--mono); text-align:right; }
.role { font:10px var(--mono); text-transform:uppercase; padding:0 5px; border-radius:3px; margin-right:4px; }
.role.primary { color:#1a0505; background:var(--accent); } .role.secondary { color:#1a0505; background:var(--iso); }
.role.stabiliser { color:var(--ink); background:#2a3558; }
/* exercises */
.filters { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; align-items:end; }
.excard b { color:var(--accent); } .excard .meta { font:12px var(--mono); color:var(--mute); }
.player { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:18px; align-items:start; }
.transport { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.transport button { margin:0; } .transport input[type=range] { flex:1; min-width:160px; }
.transport .time { font:13px var(--mono); color:var(--mute); min-width:110px; }
.phasebox { border-left:4px solid var(--k, var(--accent)); padding:6px 12px; background:rgba(255,255,255,.03); margin:10px 0; min-height:96px; }
.phasebox .kind { font:11px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--k); }
.phasebox ul { margin:4px 0 0; padding-left:18px; font-size:14px; }
canvas.chart { width:100%; display:block; background:rgba(3,5,10,.85); border:1px solid var(--line); border-radius:4px; }
.legend { display:flex; flex-wrap:wrap; gap:4px 12px; font:12px var(--mono); color:var(--mute); margin-top:4px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px; }
.kinds { display:flex; flex-wrap:wrap; gap:4px 14px; font:12px var(--mono); color:var(--mute); }
ol.src li, ul.plain li { margin:4px 0; overflow-wrap:anywhere; }
table.phases td:first-child { white-space:nowrap; }
/* structures + quiz */
.relations a.out { color:var(--mute); }
.chain { display:flex; flex-wrap:wrap; gap:4px; align-items:center; font-size:14px; }
.chain span.sep { color:var(--mute); }
.q { font-size:19px; margin:6px 0 12px; }
.opts { display:grid; gap:8px; }
.opts button { display:block; width:100%; text-align:left; margin:0; background:rgba(12,16,32,.92); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line);
  text-transform:none; letter-spacing:0; font:15px var(--sans); padding:10px 14px; }
.opts button:hover:not(:disabled) { box-shadow:inset 0 0 0 1px var(--accent); }
.opts button.right { box-shadow:inset 0 0 0 2px var(--good); } .opts button.wrong { box-shadow:inset 0 0 0 2px var(--bad); }
.opts button:disabled { cursor:default; opacity:1; }
.prov { font:12px var(--mono); color:var(--mute); margin:2px 0 6px 12px; overflow-wrap:anywhere; }
.score { font:14px var(--mono); }
@media (max-width:860px) {
  .facewrap, .player { grid-template-columns:1fr; } .filters { grid-template-columns:1fr; }
  .bar { grid-template-columns:minmax(0,1fr) 80px 40px; }
}
.tag.ok { color:var(--good); border-color:color-mix(in srgb, var(--good) 50%, transparent); }