:root {
  color-scheme: dark;
  --void: #0b0b0b;
  --panel: #1a1a1a;
  --panel-2: #141414;
  --line: #303030;
  --text: #f0f0ed;
  --muted: #a0a09b;
  --crimson: #ff2a2a;
  --green: #39ff14;
  --yellow: #ffd166;
  --radius: 18px;
  font-family: "SFMono-Regular", "Cascadia Code", "Roboto Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--void); }
body { margin: 0; min-width: 320px; color: var(--text); background: radial-gradient(circle at 72% -10%, #311010 0, transparent 31rem), var(--void); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.app-shell { min-height: 100vh; max-width: 1440px; margin: 0 auto; padding: 0 24px 100px; }
.topbar { min-height: 78px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 11px; letter-spacing: .05em; font-size: .9rem; }
.brand em { color: var(--crimson); font-style: normal; }
.brand-mark { width: 35px; height: 35px; border-radius: 10px; display: grid; place-items: center; color: var(--void); font-weight: 900; background: var(--crimson); box-shadow: 0 0 22px #ff2a2a55; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.privacy-pill, .locked-label, .micro-label { border: 1px solid #315d27; color: var(--green); background: #0c1c0a; padding: 6px 9px; border-radius: 999px; font-size: .67rem; letter-spacing: .07em; }
.icon-button { border: 1px solid var(--line); color: var(--text); background: var(--panel); border-radius: 10px; min-width: 42px; min-height: 32px; font-size: .75rem; }
main { padding: 42px 0 20px; }
.view { display: none; animation: reveal .28s ease both; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.section-heading { max-width: 780px; margin-bottom: 28px; }
.split-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; max-width: none; }
.eyebrow { margin: 0 0 9px; color: var(--crimson); font-size: .72rem; font-weight: 800; letter-spacing: .11em; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 760px; margin-bottom: 12px; font-size: clamp(2rem, 4vw, 4.2rem); letter-spacing: -.06em; line-height: .96; }
h2 { font-size: 1.12rem; letter-spacing: -.03em; }
.lede { color: var(--muted); line-height: 1.65; max-width: 610px; }
.body-copy, .field-note { color: var(--muted); line-height: 1.55; font-size: .83rem; }
.panel { border: 1px solid var(--line); background: linear-gradient(145deg, #1d1d1d, #141414); border-radius: var(--radius); padding: 20px; box-shadow: inset 0 1px #ffffff07; }
.coach-grid, .fuel-grid, .metric-grid, .privacy-grid { display: grid; gap: 18px; }
.coach-grid { grid-template-columns: minmax(0, 1.55fr) minmax(250px, .7fr); }
.stack { display: grid; gap: 18px; align-content: start; }
.panel-topline { display: flex; align-items: center; gap: 7px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: .68rem; letter-spacing: .06em; }
.panel-topline .micro-label { margin-left: auto; }
.signal { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.online { background: var(--green); box-shadow: 0 0 12px var(--green); }
.chat-log { min-height: 360px; max-height: 52vh; overflow-y: auto; padding: 20px 0; display: grid; gap: 12px; }
.message { max-width: 88%; padding: 12px 14px; font-size: .84rem; line-height: 1.55; border-radius: 12px; white-space: pre-wrap; }
.message.coach { border: 1px solid var(--line); background: #101010; border-top-left-radius: 2px; }
.message.user { justify-self: end; background: #3c1111; border: 1px solid #743131; border-top-right-radius: 2px; }
.message .message-meta { display: block; margin-bottom: 5px; font-size: .62rem; color: var(--muted); letter-spacing: .08em; }
.chat-form { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; align-items: end; }
textarea, input, select { width: 100%; border: 1px solid var(--line); background: #0d0d0d; color: var(--text); border-radius: 10px; padding: 11px; }
textarea { resize: vertical; min-height: 48px; }
.upload-control { min-height: 44px; border: 1px dashed #555; border-radius: 10px; padding: 0 11px; display: grid; place-items: center; color: var(--muted); font-size: .68rem; }
.upload-control input, .import-button input { display: none; }
.primary-button, .secondary-button, .ghost-button, .import-button { border: 0; min-height: 44px; border-radius: 10px; padding: 0 15px; font-weight: 800; font-size: .73rem; letter-spacing: .04em; }
.primary-button { color: #fff; background: var(--crimson); box-shadow: 0 7px 18px #ff2a2a2b; }
.secondary-button, .import-button { color: var(--green); border: 1px solid #397b2f; background: #111f0f; display: inline-grid; place-items: center; }
.ghost-button { color: var(--muted); border: 1px solid var(--line); background: transparent; }
.persona-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.persona-switch button { min-height: 37px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); background: #101010; font-size: .65rem; }
.persona-switch button.selected { background: var(--crimson); color: white; border-color: var(--crimson); }
.natural-card { border-left: 2px solid var(--green); }
.unit-select, .field-label { display: grid; gap: 7px; color: var(--muted); font-size: .68rem; letter-spacing: .06em; }
.unit-select select { min-width: 200px; }
.protocol-banner { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; color: var(--green); font-size: .76rem; }
.protocol-banner p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.45; max-width: 440px; }
.workout-list { display: grid; gap: 11px; }
.exercise-card { display: grid; grid-template-columns: minmax(170px,1fr) repeat(3, minmax(72px,.5fr)) auto; align-items: center; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #101010; }
.exercise-name { color: var(--text); text-decoration-color: var(--crimson); text-underline-offset: 4px; font-size: .9rem; font-weight: 800; }
.exercise-note { margin: 5px 0 0; color: var(--muted); font-size: .68rem; }
.set-chip { padding: 8px; border: 1px solid #3b3b3b; border-radius: 9px; color: var(--muted); text-align: center; font-size: .68rem; }
.set-chip.done { border-color: #518948; color: var(--green); background: #112110; }
.complete-set { min-height: 36px; padding: 0 10px; background: #1d1d1d; border: 1px solid var(--line); color: var(--text); border-radius: 8px; font-size: .65rem; }
#complete-session { margin-top: 18px; }
.fuel-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.choice-grid { display: grid; gap: 9px; margin-bottom: 12px; }
.choice-card { text-align: left; display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 11px; padding: 13px; color: var(--muted); background: #101010; font-size: .72rem; }
.choice-card strong { color: var(--text); font-size: .75rem; }
.choice-card.selected { border-color: var(--crimson); background: #291212; }
.result-box { min-height: 45px; margin-top: 13px; padding: 11px; border-left: 2px solid var(--green); background: #0c150b; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.timeline-list { display: grid; gap: 7px; margin-bottom: 17px; }
.timeline-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .76rem; }
.timeline-item input { width: 17px; height: 17px; accent-color: var(--green); }
.timeline-item time { color: var(--crimson); font-size: .68rem; }
.travel-panel { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.travel-panel p { color: var(--muted); font-size: .77rem; line-height: 1.5; max-width: 600px; }
.metric-grid { grid-template-columns: minmax(0,1.1fr) minmax(290px,.8fr); }
.mesh-stage { min-height: 390px; position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle, #2b2b2b 0, #141414 68%); border-radius: 13px; }
.yujiro-frame, .baki-frame { position: absolute; width: 150px; height: 310px; clip-path: polygon(35% 0, 65% 0, 75% 10%, 69% 20%, 87% 39%, 74% 46%, 78% 100%, 22% 100%, 26% 46%, 13% 39%, 31% 20%, 25% 10%); }
.yujiro-frame { opacity: .38; background: linear-gradient(90deg, #181818, #898989, #181818); filter: grayscale(1); }
.baki-frame { transform: scale(var(--mesh-scale, 1)); outline: 2px solid var(--green); outline-offset: -9px; background: repeating-linear-gradient(45deg, #39ff1422 0 3px, transparent 3px 12px); box-shadow: 0 0 30px #39ff1470; transition: transform .4s ease; }
.baki-frame span { position: absolute; inset: 40% 0 auto; color: var(--green); text-align: center; font-size: .63rem; font-weight: 900; letter-spacing: .13em; }
.milestone-ticker { margin: 15px 0 0; color: var(--green); line-height: 1.6; font-size: .78rem; }
.metrics-form { display: grid; gap: 11px; margin-bottom: 12px; }
.metrics-form label { display: grid; gap: 7px; color: var(--muted); font-size: .72rem; }
.history-list { margin-top: 15px; display: grid; gap: 7px; }
.history-row { color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; font-size: .7rem; }
.privacy-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 18px; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 13px 0 8px; }
.tabbar { position: fixed; z-index: 10; bottom: 0; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); width: min(650px, calc(100% - 26px)); background: #121212f2; backdrop-filter: blur(12px); border: 1px solid var(--line); border-bottom: 0; border-radius: 15px 15px 0 0; }
.tab { min-height: 63px; color: var(--muted); background: none; border: 0; border-top: 2px solid transparent; font-size: .67rem; letter-spacing: .05em; }
.tab span { display: block; margin-bottom: 4px; font-size: .59rem; color: #6b6b6b; }
.tab.active { border-top-color: var(--crimson); color: var(--text); background: #1a1a1a; }
.checkin-dialog { border: 0; padding: 0; background: transparent; color: var(--text); width: min(440px, calc(100% - 30px)); }
.checkin-dialog::backdrop { background: #000c; }
.checkin-dialog .panel { border-color: #7e2121; }
.checkin-dialog .text-button { margin: 9px auto 0; display: block; background: transparent; color: var(--muted); border: 0; }
@media (max-width: 800px) { .coach-grid, .fuel-grid, .metric-grid, .privacy-grid { grid-template-columns: 1fr; } .exercise-card { grid-template-columns: 1fr repeat(3, minmax(65px,.5fr)); } .exercise-card .complete-set { grid-column: 1 / -1; } .travel-panel, .protocol-banner, .split-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 560px) { .app-shell { padding-inline: 14px; } .topbar { min-height: 65px; } .privacy-pill { display: none; } main { padding-top: 28px; } .chat-form { grid-template-columns: 1fr auto; } .upload-control { grid-row: 1; } .chat-form textarea { grid-column: 1 / -1; grid-row: 1; padding-left: 65px; } .exercise-card { grid-template-columns: repeat(3, 1fr); } .exercise-card > div:first-child { grid-column: 1 / -1; } .unit-select select { min-width: 0; } }