/* Roberin The New — 4-7-8 breathing guide, 2026-07-22. */
.tn-b478-page {
  --b478-paper: #faf6ee;
  --b478-ink: #1a1208;
  --b478-muted: #5a4a30;
  --b478-line: #b8a888;
  --b478-soft: #ddd4be;
  --b478-surface: #fffaf1;
  --b478-wash: #f5efdf;
  --b478-accent: #c44a00;
  --b478-primary: #1a1208;
  --b478-primary-ink: #faf6ee;
  --b478-secondary: #ede6d4;
  --b478-inhale: #c44a00;
  --b478-hold: #8a5a1d;
  --b478-exhale: #2f7d54;
  color: var(--b478-ink);
}
.tn-b478-page *, .tn-b478-page *::before, .tn-b478-page *::after { box-sizing: border-box; }
.tn-b478-tool ul, .tn-b478-tool ol, .tn-b478-tool li, .tn-b478-tool dl, .tn-b478-tool dd { margin: 0; padding: 0; list-style: none; }
.tn-b478-tool p { margin: 0; }
.tn-b478-tool { margin: 0 auto; max-width: 1180px; border-top: 1px solid var(--b478-line); border-bottom: 1px solid var(--b478-line); background: var(--b478-paper); }
.tn-b478-instrument { display: grid; gap: 18px; padding: 24px; }
.tn-b478-visual { display: grid; justify-items: center; gap: 14px; }
.tn-b478-orbit { position: relative; display: grid; width: min(100%, 334px); aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px solid var(--b478-line); border-radius: 50%; background: radial-gradient(circle, var(--b478-surface) 0 39%, var(--b478-wash) 40% 100%); }
.tn-b478-orbit::before, .tn-b478-orbit::after { position: absolute; content: ''; background: var(--b478-soft); }
.tn-b478-orbit::before { width: 1px; height: 100%; }
.tn-b478-orbit::after { width: 100%; height: 1px; }
.tn-b478-ring { position: relative; z-index: 1; width: 46%; aspect-ratio: 1; border: 1px solid var(--b478-accent); border-radius: 50%; background: var(--b478-surface); transform: scale(.72); transition: transform .2s linear, border-color .2s linear, background .2s linear; }
.tn-b478-ring__core { position: absolute; inset: 17%; border: 1px solid var(--b478-soft); border-radius: 50%; }
.tn-b478-readout { position: relative; z-index: 2; display: grid; gap: 4px; width: 76%; text-align: center; pointer-events: none; }
.tn-b478-readout__phase, .tn-b478-state, .tn-b478-stage span { color: var(--b478-muted); font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.tn-b478-readout strong { font: 700 clamp(28px, 5vw, 40px)/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.tn-b478-readout > span:last-child { min-height: 16px; color: var(--b478-muted); font-size: 13px; line-height: 1.35; }
.tn-b478-instruction { width: min(100%, 460px); padding: 10px 12px; border: 1px solid var(--b478-soft); background: var(--b478-surface); color: var(--b478-muted); text-align: center; font-size: 14px; line-height: 1.45; }
.tn-b478-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tn-b478-stage { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--b478-soft); background: var(--b478-surface); }
.tn-b478-stage b { font: 700 18px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.tn-b478-stage i { display: block; height: 4px; overflow: hidden; background: var(--b478-soft); }
.tn-b478-stage em { display: block; width: 0; height: 100%; background: var(--b478-accent); }
.tn-b478-stage.is-active { border-color: var(--b478-accent); background: var(--b478-wash); }
.tn-b478-stage.is-active em { width: var(--b478-progress, 0%); }
.tn-b478-stage[data-stage="hold"].is-active em { background: var(--b478-hold); }
.tn-b478-stage[data-stage="exhale"].is-active em { background: var(--b478-exhale); }
.tn-b478-command { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--b478-soft); }
.tn-b478-actions { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 6px; }
.tn-b478-actions button { min-height: 38px; border: 1px solid var(--b478-line); border-radius: 0; background: var(--b478-secondary); color: var(--b478-ink); -webkit-text-fill-color: var(--b478-ink); cursor: pointer; font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tn-b478-actions .tn-b478-primary { border-color: var(--b478-primary); background: var(--b478-primary); color: var(--b478-primary-ink); -webkit-text-fill-color: var(--b478-primary-ink); }
.tn-b478-actions button:hover:not(:disabled) { border-color: var(--b478-accent); background: var(--b478-accent); color: var(--b478-primary-ink); -webkit-text-fill-color: var(--b478-primary-ink); }
.tn-b478-actions button:disabled { opacity: .5; cursor: not-allowed; }
.tn-b478-actions button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--b478-accent); outline-offset: -1px; }
.tn-b478-state { display: flex; justify-content: center; gap: 7px; min-height: 16px; text-align: center; }
.tn-b478-state strong { color: var(--b478-ink); }
.tn-b478-tool[data-breathing-phase="inhale"] .tn-b478-ring { border-color: var(--b478-inhale); background: var(--b478-wash); }
.tn-b478-tool[data-breathing-phase="hold"] .tn-b478-ring { border-color: var(--b478-hold); background: var(--b478-secondary); }
.tn-b478-tool[data-breathing-phase="exhale"] .tn-b478-ring { border-color: var(--b478-exhale); background: #e5efe2; }
@media (prefers-reduced-motion: reduce) { .tn-b478-ring { transition: none; } }
@media (min-width: 761px) { .tn-b478-instrument { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); align-items: center; padding: 30px; } .tn-b478-visual { grid-row: span 2; } .tn-b478-command { align-self: start; } }
@media (max-width: 480px) { .tn-b478-instrument { gap: 14px; padding: 14px 8px; } .tn-b478-orbit { width: min(100%, 286px); } .tn-b478-timeline { gap: 4px; } .tn-b478-stage { padding: 8px 6px; } .tn-b478-stage span { font-size: 10px; } .tn-b478-actions { grid-template-columns: 1fr; } .tn-b478-state { font-size: 11px; } }
@media (prefers-color-scheme: dark) { html[data-scheme="auto"] .tn-b478-page, html:not([data-scheme]) .tn-b478-page { --b478-paper: #241d12; --b478-ink: #efe6d2; --b478-muted: #c3b492; --b478-line: #6f6047; --b478-soft: #574a37; --b478-surface: #322a1a; --b478-wash: #241d12; --b478-accent: #e8823f; --b478-primary: #e8823f; --b478-primary-ink: #241206; --b478-secondary: #2c2517; --b478-inhale: #e8823f; --b478-hold: #d9b576; --b478-exhale: #7fb68b; } }
html[data-scheme="dark"] .tn-b478-page { --b478-paper: #241d12; --b478-ink: #efe6d2; --b478-muted: #c3b492; --b478-line: #6f6047; --b478-soft: #574a37; --b478-surface: #322a1a; --b478-wash: #241d12; --b478-accent: #e8823f; --b478-primary: #e8823f; --b478-primary-ink: #241206; --b478-secondary: #2c2517; --b478-inhale: #e8823f; --b478-hold: #d9b576; --b478-exhale: #7fb68b; }
html[data-scheme="dark"] .tn-b478-tool[data-breathing-phase="exhale"] .tn-b478-ring { background: #2c2517; }

/* 20260722b: auto-dark exhale, compact mobile action row, reduced-motion visual lock. */
.tn-b478-page{--b478-exhale-surface:#e5efe2}
.tn-b478-tool[data-breathing-phase="exhale"] .tn-b478-ring{background:var(--b478-exhale-surface)}
html:is([data-scheme="dark"],[data-scheme="inverse"],[data-d="dark"],[data-d="inverse"]) .tn-b478-page,body:is([data-scheme="dark"],[data-scheme="inverse"],[data-d="dark"],[data-d="inverse"]) .tn-b478-page{--b478-exhale-surface:#2c2517}
@media(prefers-color-scheme:dark){html[data-scheme="auto"] .tn-b478-page,html[data-d="auto"] .tn-b478-page,html:not([data-scheme]) .tn-b478-page{--b478-exhale-surface:#2c2517}}
@media(max-width:480px){.tn-b478-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.tn-b478-actions button{min-width:0;padding-inline:6px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.tn-b478-ring,.tn-b478-stage i em{transition:none!important;animation:none!important}}