.listening-canvas img {
  width: min(520px, 82vw);
}

@media (max-width: 680px) {
  .listening-canvas img {
    width: min(360px, 94vw);
  }
}

.runtime-status {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 1.5rem 0;
}

.runtime-panel { margin: 1.75rem 0; padding: 1.45rem; color: var(--ink); background: #fbfaf5; border: 1px solid var(--line); border-radius: .75rem; }
.runtime-panel h2 { font: 500 1.55rem/1 Georgia, serif; letter-spacing: -.04em; margin: 0; }
.runtime-actions { display: flex; align-items: center; gap: 1.25rem; }
.runtime-button { border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; padding: .65rem 1rem; font-size: .875rem; font-weight: 700; }
a.runtime-button { display: inline-flex; align-items: center; text-decoration: none; }
.runtime-button:disabled { opacity: .45; cursor: not-allowed; }
.rail-listen { display: grid; place-items: center; gap: 3px; width: 64px; min-height: 58px; margin: 0; padding: .45rem; border-radius: 12px; }
.rail-listen svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-listen span { font-size: 11px; }
.sessions-page { max-width: 31rem; min-height: calc(100vh - 2rem); padding-bottom: 8rem; }
.sessions-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sessions-heading h1 { margin: 0; font: 850 clamp(3rem, 11vw, 4rem)/.9 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.08em; }
.sessions-heading span { padding: .42rem .7rem; color: #fff; background: #50683c; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.sessions-subtitle { max-width: 19rem; margin: 1.35rem 0 1.5rem; color: #787878; font-size: .94rem; }
.sessions-list { display: grid; gap: .7rem; }
.session-card { position: relative; display: grid; gap: .55rem; width: 100%; min-height: 7.4rem; padding: 1.15rem 3rem 1.1rem 1.15rem; color: #111; text-align: left; border: 0; border-radius: 1rem; background: #fff; box-shadow: 0 4px 16px #1010100d; }
.session-card span { font-size: .72rem; font-weight: 750; }.session-card b { font-size: 1rem; }.session-card small { color: #858585; font-size: .78rem; }.session-card i { position: absolute; top: 1.1rem; right: 1.15rem; font-style: normal; }
.session-empty { display: grid; gap: .5rem; padding: 1.25rem; border-radius: 1rem; background: #fff; color: #777; }.session-empty b { color: #111; }
.sessions-start { position: fixed; z-index: 2; bottom: 6.4rem; left: max(1.35rem, calc(50% - 13rem)); width: min(calc(100vw - 2.7rem), 28rem); min-height: 3.5rem; color: #fff; border: 0; border-radius: 999px; background: #111; font-weight: 800; }
@media (min-width: 681px) { .sessions-start { position: static; width: 100%; margin-top: 1.25rem; }.sessions-page { padding-top: 4rem; } }
.recent-sessions { display: grid; gap: .5rem; margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.recent-sessions button { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; width: 100%; padding: .45rem 0; text-align: left; color: var(--ink); border: 0; background: transparent; }
.recent-sessions span { color: var(--muted); font-size: .8rem; }
.listening-cta { margin-top: 1rem; }
.listening-feedback { max-width: 20rem; margin: .8rem 0 0; color: var(--muted); font-size: .82rem; text-align: center; }
.listening-setup { max-width: 31rem; margin: 0 auto 2.5rem; padding: 1.25rem; background: #fbfaf5; border: 1px solid var(--line); border-radius: .75rem; text-align: center; }
.listening-setup h2, .setup-panel h2 { margin: .2rem 0 .45rem; font: 500 1.45rem/1.1 Georgia, serif; letter-spacing: -.03em; }.listening-setup p { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.setup-page { max-width: 48rem; }.setup-panel { margin-top: 3rem; padding: 1.5rem; background: #fbfaf5; border: 1px solid var(--line); border-radius: .75rem; }.setup-panel ol { display: grid; gap: 1rem; padding: 0; margin: 1.5rem 0; list-style: none; }.setup-panel li { display: grid; grid-template-columns: 1.8rem 1fr; gap: .75rem; align-items: start; }.setup-panel li span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; color: #fff; background: var(--moss); border-radius: 50%; font-size: .8rem; font-weight: 700; }.setup-panel li p { margin: .15rem 0 0; color: var(--muted); }.setup-status { min-height: 2.5rem; color: var(--muted); font-size: .85rem; }.setup-back { display: block; margin-top: 1.2rem; }
.runtime-events { padding: 0; margin: 1.4rem 0 0; list-style: none; border-top: 1px solid var(--line); }
.runtime-event { padding: .75rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .125rem; }
.runtime-event strong { font-size: .875rem; }.runtime-event span, .runtime-event.is-empty { color: var(--muted); font-size: .75rem; }
.native-host-note { margin: 1rem 0 1.5rem; padding: 0 0 0 1rem; border-left: 2px solid var(--ochre); }.native-host-note p:last-child { margin: 0; font-size: .875rem; }
.place-actions { display: flex; flex-wrap: wrap; gap: 1.35rem; }

.today-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; min-height: 23rem; margin-top: 2.5rem; padding: 2.5rem; background: #e9eee3; border-radius: 1.25rem; overflow: hidden; }.today-hero h2,.today-section h2 { margin: 0; font: 500 clamp(1.9rem, 4vw, 3rem)/1 Georgia, serif; letter-spacing: -.045em; }.today-hero p:not(.kicker) { max-width: 28rem; color: var(--muted); }.today-hero .waveform { width: 100%; justify-content: flex-start; margin-top: 1.4rem; }.today-hero img { width: 100%; height: 19rem; object-fit: contain; }.today-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 1.25rem 0 4rem; background: var(--line); border: 1px solid var(--line); border-radius: .9rem; overflow: hidden; }.today-stats div { padding: 1.2rem 1.5rem; background: #fbfaf5; }.today-stats strong,.today-stats span { display: block; }.today-stats strong { font: 500 2rem Georgia, serif; }.today-stats span { color: var(--muted); font-size: .78rem; }.today-section { margin: 2.5rem 0; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }.animal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }.animal-card { min-height: 10rem; padding: 1.1rem; background: #fbfaf5; border: 1px solid var(--line); border-radius: .9rem; }.animal-mark { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; margin-bottom: 1.2rem; color: var(--ink); background: #dde8d2; border-radius: 50%; font: 1.5rem Georgia, serif; }.animal-1 { background: #f1dfbe; }.animal-2 { background: #dbe8e2; }.animal-card strong,.animal-card small { display: block; }.animal-card small { margin-top: .2rem; color: var(--muted); font-size: .75rem; }
.day-card small { display: block; margin-top: .65rem; color: var(--moss); font-size: .72rem; }.welcome { min-height: 100dvh; padding: clamp(1.5rem, 4vw, 3.5rem); color: #f8f4e9; background: #123e34; }.welcome-head { display: flex; align-items: center; justify-content: space-between; color: #bdd0bc; font-size: .82rem; }.welcome-head .wordmark { color: #f8f4e9; }.welcome-center { display: grid; min-height: calc(100dvh - 7rem); justify-items: center; align-content: center; text-align: center; }.welcome-center h1 { max-width: 48rem; color: inherit; font-size: clamp(3.2rem, 8vw, 6.5rem); }.welcome-center > p:not(.kicker) { max-width: 33rem; margin: 1.5rem 0 2rem; color: #bdd0bc; }.welcome-center img { width: min(29rem, 74vw); max-height: 32vh; object-fit: contain; margin: .5rem 0 2rem; }.welcome .runtime-button { margin-top: 1rem; color: #123e34; background: #f8f4e9; border-color: #f8f4e9; }.welcome-steps { justify-items: start; text-align: left; }.welcome-steps h1 { max-width: 39rem; }.welcome-steps ol { display: grid; gap: 1.25rem; max-width: 38rem; padding: 0; margin: 2.5rem 0; list-style: none; }.welcome-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; }.welcome-steps li > span { display: grid; width: 2rem; height: 2rem; place-items: center; color: #123e34; background: #e0bf69; border-radius: 50%; font-size: .8rem; font-weight: 700; }.welcome-steps li p { margin: .25rem 0 0; color: #bdd0bc; }.welcome-seal { display: grid; width: 9rem; height: 9rem; place-items: center; margin: 2rem 0; color: #e0bf69; border: 1px solid #e0bf69; border-radius: 50%; box-shadow: 0 0 0 1.1rem #ffffff0a, 0 0 0 2.2rem #ffffff06; font: 4rem Georgia, serif; }

.back-link { appearance: none; border: 0; padding: 0; margin-bottom: 2rem; color: var(--muted); background: transparent; font-size: .85rem; font-weight: 700; }.detail-page h1 { font-size: clamp(3rem, 6vw, 4.9rem); }
.day-summary { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; align-items: center; margin-top: 3rem; padding: 2rem; background: #fbfaf5; border: 1px solid var(--line); border-radius: 1rem; }.summary-wave,.finding-wave { display: flex; align-items: center; gap: 4px; height: 7rem; }.summary-wave { min-width: 0; max-width: 100%; overflow: hidden; }.summary-wave i { flex: 0 1 3px; }.summary-wave i,.finding-wave i { display: block; width: 3px; height: var(--h); min-height: 5px; background: var(--ink); border-radius: 3px; }.summary-wave i:nth-child(5n),.finding-wave i:nth-child(5n) { background: var(--ochre); }.day-summary dl { display: grid; min-width: 0; gap: 1rem; margin: 0; }.day-summary dl div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .65rem; }.day-summary dt { color: var(--muted); }.day-summary dd { min-width: 0; margin: 0; overflow-wrap: anywhere; text-align: right; font: 500 1.2rem Georgia, serif; }.record-section { display: flex; justify-content: space-between; gap: 2rem; align-items: end; padding: 3rem 0; }.record-section h2 { margin: 0; font: 500 2rem Georgia, serif; }.record-section p:not(.kicker) { max-width: 31rem; color: var(--muted); }
.finding-card { max-width: 42rem; margin-top: 3rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1rem; background: #fbfaf5; }.finding-wave { border-bottom: 1px solid var(--line); }.finding-meta { color: var(--muted); font-size: .85rem; }.review-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; }.review-choice { border: 1px solid var(--line); border-radius: 999px; padding: .65rem .9rem; background: transparent; font-size: .85rem; font-weight: 700; }.review-choice:hover { background: #e7eadf; }.review-feedback { min-height: 1.25rem; margin-bottom: 0; color: var(--moss); font-size: .85rem; }
.settings-group { max-width: 42rem; margin-top: 2.5rem; }.settings-group > .kicker { margin-bottom: .6rem; }.settings-list { border-top: 1px solid var(--line); }.settings-list button { display: grid; width: 100%; grid-template-columns: 1fr auto; gap: 2rem; padding: 1.05rem 0; border: 0; border-bottom: 1px solid var(--line); text-align: left; background: transparent; }.settings-list strong,.settings-list small { display: block; }.settings-list small { margin-top: .18rem; color: var(--muted); }.settings-list b { align-self: center; color: var(--ochre); font-size: 1.35rem; font-weight: 400; }.completion-page { display: grid; min-height: calc(100vh - 4rem); align-content: center; justify-items: center; text-align: center; }.completion-page .place-copy { max-width: 28rem; }.completion-orbit { display: grid; width: 10rem; height: 10rem; margin: 3rem 0; place-items: center; color: var(--ink); border: 1px solid var(--moss); border-radius: 50%; box-shadow: 0 0 0 1.4rem #e7eadf, 0 0 0 2.8rem #f0eee5; }.completion-orbit svg { width: 3rem; fill: none; stroke: currentColor; stroke-width: 1.4; }.completion-actions { display: grid; justify-items: center; gap: 1.2rem; }
.microphone-card { display: grid; grid-template-columns: 1.5rem 1fr; gap: .9rem; align-items: start; padding: 1.15rem 0; border-top: 1px solid var(--line); }.microphone-card strong { display: block; }.microphone-card p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }.mic-indicator { width: .8rem; height: .8rem; margin-top: .35rem; border-radius: 50%; background: #b1b6ac; }.mic-indicator.is-ready,.mic-indicator.is-recording { background: #6e8a5c; box-shadow: 0 0 0 .3rem #dce7d5; }.mic-indicator.is-blocked,.mic-indicator.is-unsupported { background: #b68645; }.place-form { border-top: 1px solid var(--line); padding-top: 1rem; }.place-form label { display: block; margin-bottom: .5rem; color: var(--muted); font-size: .82rem; font-weight: 700; }.place-form > div { display: flex; gap: .7rem; }.place-form input { min-width: 0; flex: 1; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .55rem; color: var(--ink); background: #fbfaf5; font: inherit; }.place-form small { display: block; margin-top: .55rem; color: var(--muted); }.input-meter { width: min(15rem, 70vw); height: .35rem; margin: 1.1rem auto .4rem; overflow: hidden; background: #ffffff33; border-radius: 99px; }.input-meter span { display: block; width: 100%; height: 100%; transform: scaleX(.03); transform-origin: left; background: #e0bf69; transition: transform 80ms linear; }.session-proof { margin: 0; color: #bdd0bc; font-size: .78rem; }
.recording-player { display: block; width: min(100%, 28rem); margin-top: 1.25rem; }
.observation-section { align-items: start; }.observation-list { display: grid; gap: .55rem; margin-top: 1rem; }.observation-list div { display: flex; align-items: baseline; gap: .65rem; }.observation-list strong { font: 500 1.35rem Georgia, serif; }.observation-list small { color: var(--muted); }.observation-form { min-width: min(100%, 16rem); }.observation-form label { display: block; margin-bottom: .45rem; color: var(--muted); font-size: .82rem; font-weight: 700; }.observation-form div { display: flex; gap: .6rem; }.observation-form input { min-width: 0; width: 11rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: .55rem; color: var(--ink); background: #fbfaf5; font: inherit; }

.listening-session { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; color: #f8f4e9; background: #123e34; padding: clamp(1.5rem, 4vw, 3.5rem); overflow: hidden; }
.session-head, .session-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.session-head .wordmark { color: inherit; }.session-head p, .session-footer p { margin: 0; color: #bed0bd; font-size: .85rem; }
.session-center { display: grid; align-content: center; justify-items: center; text-align: center; padding-bottom: 7vh; }.session-center .kicker { color: #bed0bd; }.session-center h1 { margin: 1.5rem 0 .35rem; color: inherit; font-size: clamp(3.5rem, 10vw, 7rem); }.session-elapsed { margin: 0; font: 400 clamp(1.5rem, 4vw, 2.25rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }.session-copy { max-width: 20rem; margin: 1.5rem 0 0; color: #bed0bd; }
.session-ripple { position: relative; display: grid; width: min(48vw, 20rem); aspect-ratio: 1; place-items: center; }.session-ripple > span { position: absolute; inset: 0; border: 1px solid rgba(224, 191, 105, .55); border-radius: 50%; animation: session-pulse 3s ease-out infinite; }.session-ripple > span:nth-child(2) { animation-delay: 1s; }.session-ripple > span:nth-child(3) { animation-delay: 2s; }.session-core { position: relative; z-index: 1; display: grid; width: 34%; aspect-ratio: 1; place-items: center; color: #123e34; background: #e0bf69; border-radius: 50%; box-shadow: 0 0 0 14px rgba(224, 191, 105, .11); }.session-core svg { width: 45%; stroke: currentColor; fill: none; stroke-width: 1.75; }
.stop-listening { min-width: 10rem; border: 1px solid #f8f4e9; border-radius: 999px; padding: .9rem 1.25rem; color: #123e34; background: #f8f4e9; font-size: .95rem; font-weight: 800; }
@keyframes session-pulse { 0% { transform: scale(.28); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@media (max-width: 680px) { .listening-session { padding: 1.5rem; }.session-footer { align-items: flex-start; flex-direction: column; }.stop-listening { width: 100%; }.session-ripple { width: min(78vw, 20rem); } }
@media (max-width: 680px) { .day-summary { grid-template-columns: 1fr; padding: 1.35rem; }.record-section { display: grid; align-items: start; padding: 2.3rem 0; }.record-section .runtime-button { width: max-content; }.settings-list div { grid-template-columns: 1fr; gap: .25rem; }.settings-list span { text-align: left; }.finding-card { margin-top: 2rem; padding: 1.35rem; } }
@media (max-width: 680px) { .today-hero { grid-template-columns: 1fr; gap: .5rem; min-height: 0; margin-top: 1.75rem; padding: 1.5rem; }.today-hero img { height: 13rem; order: -1; }.today-stats { margin-bottom: 2.8rem; }.today-stats div { padding: 1rem; }.today-stats strong { font-size: 1.5rem; }.animal-row { grid-template-columns: 1fr; }.animal-card { min-height: 5.5rem; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: .75rem; align-items: center; }.animal-mark { margin: 0; grid-row: span 2; }.animal-card small { margin: 0; }.welcome-center { min-height: calc(100dvh - 5rem); }.welcome-center h1 { font-size: clamp(3rem, 15vw, 4.5rem); }.welcome-center img { width: min(22rem, 90vw); }.welcome-steps ol { margin: 2rem 0; } }

/* Figma product frames: compact neutral surfaces, one olive signal, and direct actions. */
.detail-heading > p,.observation-heading > p { margin:0 0 .55rem; color:#111; font-size:.75rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.detail-heading h1 { margin:0; font:850 clamp(2rem,6vw,3.25rem)/.96 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.07em; }.detail-heading > span { display:block; margin-top:.55rem; color:#7d7d7a; font-size:.82rem; }
.day-summary { display:grid; gap:1rem; margin-top:2rem; padding:1.35rem; background:#141513; border:0; border-radius:1.1rem; }.day-summary .summary-wave { height:5.5rem; }.day-summary .summary-wave i { background:#9aaa70; }.day-summary .summary-wave i:nth-child(4n) { background:#858585; }.day-summary .recording-player { width:100%; margin:0; filter:invert(1) grayscale(1); }
.observation-section { display:grid; gap:1rem; padding:2rem 0 3rem; }.observation-heading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }.observation-heading .text-link { color:#111; font-size:.8rem; }.observation-list { gap:.55rem; margin:0; }.observation-list div { display:grid; grid-template-columns:.6rem 1fr auto; align-items:center; gap:.65rem; padding:.9rem 1rem; background:#fff; border-radius:.75rem; }.observation-list span { width:.5rem; height:.5rem; border-radius:50%; background:#50683c; }.observation-list strong { font:750 .92rem ui-sans-serif,system-ui,sans-serif; }.observation-list small { color:#90908e; font-size:.75rem; }.honest-empty { margin:0; color:#747470; font-size:.9rem; }.observation-form { width:100%; margin-top:.65rem; padding:1rem; border-radius:.85rem; background:#e3eadc; }.observation-form label { color:#111; font-weight:800; }.observation-form input { width:100%; background:#fff; border-radius:999px; }.observation-form .runtime-button { background:#111; border-color:#111; }
.settings-page { max-width:35rem; }.settings-heading h1 { font:850 clamp(3rem,11vw,4rem)/.9 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.08em; }.settings-tile { display:grid; gap:.45rem; margin-top:1rem; padding:1.25rem; color:#111; background:#fff; border-radius:1.1rem; }.settings-tile > p { display:flex; justify-content:space-between; margin:0; font-size:.85rem; font-weight:800; }.settings-tile > strong { font-size:1.55rem; letter-spacing:-.06em; }.settings-tile > small { color:#888; }.settings-tile .text-link { width:max-content; margin-top:.45rem; color:#50683c; font-size:.8rem; }.settings-tile .place-form { padding:0; border:0; }.settings-tile .place-form label { color:#777; }.settings-tile .place-form input { background:#f7f7f5; border:0; }.privacy-setting { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding:1.1rem 1.25rem; color:#111; background:#e3eadc; border-radius:1rem; }.privacy-setting strong,.privacy-setting small { display:block; }.privacy-setting small { margin-top:.2rem; color:#7b7f76; font-size:.75rem; }.privacy-setting > span { width:2.5rem; height:1.45rem; padding:.18rem; border-radius:99px; background:#50683c; }.privacy-setting > span:after { content:""; display:block; width:1.1rem; height:1.1rem; margin-left:auto; border-radius:50%; background:#fff; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }.settings-grid .settings-tile,.settings-grid .privacy-setting { min-height:138px; margin-top:0; }.settings-grid-secondary { margin-top:14px; }.companion-tile > p { display:block; color:#59604f; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }.location-editor { display:none; }
.analysis-screen { min-height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:1.5rem; color:#fff; background:#486137; }.analysis-screen header { align-self:start; font-size:.8rem; font-weight:800; }.analysis-content { align-self:center; width:min(100%,43rem); margin:-2.25rem auto 0; }.analysis-screen h1 { max-width:11ch; margin:0; color:#fff; font:850 clamp(3rem,10.5vw,6.1rem)/.94 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.035em; }.analysis-screen section p { max-width:28rem; margin:1.4rem 0 0; color:#f1f4ed; font-size:1rem; font-weight:500; line-height:1.5; }.analysis-dots { display:flex; align-items:center; justify-content:center; gap:1.05rem; width:100%; margin:clamp(4rem,12vh,8.5rem) auto 0; }.analysis-dots i { width:.38rem; height:.38rem; border-radius:50%; background:#cbd7bd; }.analysis-dots .is-current { width:.72rem; height:.72rem; background:#fff; box-shadow:0 0 0 .22rem #ffffff22; }.analysis-screen footer { display:grid; gap:.65rem; width:min(100%,43rem); margin:0 auto; }.analysis-progress-meta { display:flex; justify-content:space-between; gap:1rem; color:#fff; font-size:.77rem; font-weight:800; }.analysis-progress-meta b { color:#e8ede2; font-weight:650; }.analysis-progress { height:.55rem; overflow:hidden; border:1px solid #e5ebdd; border-radius:99px; background:transparent; }.analysis-screen footer p { margin:0; color:#edf1e8; font-size:.75rem; line-height:1.35; }.analysis-screen footer button { display:none; }
@media (max-width:680px) {
  .mobile-head { display:none; }.app-shell { padding-bottom:4.8rem; }.page { padding:3.5rem 1.35rem 2rem; }.sessions-page { min-height:calc(100dvh - 4.8rem); }
  .mobile-nav { height:4.8rem; padding:0; align-items:stretch; justify-content:stretch; background:#fff; border-color:#e8e8e5; }.mobile-nav .nav-item,.mobile-listen { width:33.333%; min-height:0; height:auto; margin:0; padding:.65rem 0 .35rem; color:#555; border-radius:0; background:transparent; }.mobile-nav .nav-item svg,.mobile-listen svg { width:20px; height:20px; padding:0; color:currentColor; fill:none; stroke:currentColor; stroke-width:1.6; border:0; border-radius:0; box-shadow:none; background:transparent; }.mobile-nav .nav-item span,.mobile-listen span { font-size:.64rem; font-weight:750; }.mobile-nav .nav-item.is-active { color:#111; background:transparent; }.mobile-nav .nav-item.is-active:after { content:""; width:1.3rem; height:2px; margin-top:1px; background:#111; border-radius:99px; }.mobile-listen { display:grid; place-items:center; gap:3px; }
  .sessions-heading h1 { font-size:2.65rem; }.sessions-heading span { padding:.36rem .6rem; font-size:.65rem; }.sessions-subtitle { margin:1rem 0 1.4rem; line-height:1.25; }.sessions-list { gap:.65rem; }.session-card { min-height:6.55rem; padding:.95rem 2.75rem .9rem .95rem; border-radius:1rem; }.sessions-start { position:static; width:100%; margin-top:1rem; min-height:3.25rem; }
  .listening-session { padding:1.5rem; background:#121311; }.session-head { align-items:center; }.listening-chip { display:inline-flex; align-items:center; gap:.42rem; padding:.38rem .65rem; color:#fff; border-radius:99px; background:#2b2c29; font-size:.65rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }.listening-chip i { width:.42rem; height:.42rem; border-radius:50%; background:#e16b5b; }.session-wordmark { font-size:.78rem; font-weight:800; }.session-center { padding:0 0 2rem; }.session-elapsed { margin:0; color:#fff; font:850 3.15rem/.9 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.07em; }.session-place { margin:.6rem 0 4rem; color:#969792; font-size:.88rem; }.session-wave { display:flex; align-items:center; justify-content:center; gap:.38rem; height:4.7rem; }.session-wave i { display:block; width:.43rem; height:var(--h); min-height:.55rem; max-height:4rem; border-radius:99px; background:#fff; }.session-wave i:nth-child(3n) { background:#50683c; }.session-copy { margin:4.1rem 0 0; padding:1rem; color:#bbbcb7; background:#242521; border-radius:1rem; font-size:.78rem; }.session-footer { display:grid; justify-items:center; gap:.6rem; }.stop-listening { display:grid; width:4.8rem; min-width:0; height:4.8rem; place-items:center; padding:0; color:#fff; border:4px solid #fff; border-radius:50%; background:#50683c; }.stop-listening span { width:1.3rem; height:1.3rem; border-radius:50%; background:#50683c; }.session-footer b { font-size:.78rem; }
  .session-footer { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center; width:100%; }
}

/* Figma 2026-09 desktop/mobile alignment.  The shell is intentionally only
   presentational; session data and recording state remain supplied elsewhere. */
@media (min-width:681px) {
  .app-shell { min-height:100dvh; display:grid; grid-template-columns:260px minmax(0,1fr); padding:0; background:#f4f4f2; }
  .rail { position:sticky; top:0; display:flex; width:auto; height:100dvh; padding:30px 22px; flex-direction:column; border-right:1px solid #deded9; background:#f8f8f6; }
  .rail .wordmark { padding:0 12px; color:#10110f; font-size:17px; }
  .rail nav { display:flex; flex:1; flex-direction:column; gap:7px; margin-top:44px; }
  .rail .nav-item,.rail .rail-listen { display:flex; align-items:center; justify-content:flex-start; width:100%; min-height:44px; padding:0 13px; gap:12px; color:#222; border-radius:10px; background:transparent; font-size:14px; font-weight:650; }
  .rail .nav-item svg,.rail .rail-listen svg { width:18px; height:18px; }
  .rail .nav-item.is-active { color:#10110f; background:#e5eadf; }
  .rail .rail-listen { color:#fff; background:#10110f; border:1px solid #10110f; }
  .rail-spacer { flex:1; }
  .main { min-width:0; }
  .page.sessions-page { max-width:none; min-height:100dvh; padding:58px 70px 76px; }
  .sessions-heading { align-items:flex-start; }
  .sessions-title-row { display:flex; align-items:center; gap:18px; }
  .sessions-heading h1,.settings-heading h1,.detail-heading h1 { color:#10110f; font:500 clamp(52px,5vw,72px)/.94 Georgia, 'Times New Roman', serif; letter-spacing:-.065em; }
  .sessions-heading span { padding:8px 13px; background:#50683c; font-size:12px; }
  .sessions-subtitle { max-width:380px; margin:14px 0 0; color:#74746f; font-size:15px; line-height:1.35; }
  .sessions-start { position:static; display:inline-flex; align-items:center; gap:8px; width:auto; min-height:42px; margin:4px 0 0; padding:0 18px; background:#10110f; font-size:13px; }
  .sessions-start svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
  .recent-label { margin:66px 0 18px; color:#73736e; font-size:11px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
  .sessions-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .session-card { min-height:150px; padding:22px 44px 22px 22px; border-radius:16px; box-shadow:0 4px 18px rgba(16,17,15,.08); }
  .session-card span { font-size:12px; }.session-card b { font-size:16px; }.session-card small { font-size:12px; }.session-card i { top:20px; right:22px; }
  .session-empty { grid-column:1/-1; min-height:150px; place-content:center; border-radius:16px; }
  .settings-page { max-width:none; padding:58px 70px; }.settings-page .settings-heading { margin-bottom:4px; }.settings-page .settings-grid { max-width:900px; }.detail-page { max-width:1040px; padding:58px 70px; }
}

@media (max-width:680px) {
  /* Figma uses three equal touch targets.  Grid prevents the inherited desktop
     button width and the former raised-record control from skewing the middle item. */
  .mobile-nav { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; justify-content:initial; }
  .mobile-nav .nav-item,.mobile-nav .mobile-listen { display:flex !important; flex-direction:column; align-items:center; justify-content:center; width:100% !important; min-width:0; position:relative; }
  .mobile-nav .nav-item:nth-child(1) { grid-column:1; }.mobile-nav .mobile-listen { grid-column:2; }.mobile-nav .nav-item:nth-child(3) { grid-column:3; }
  /* The active underline must not become a grid row: it was shifting the
     Sessions icon and label above the other two items. */
  .mobile-nav .nav-item.is-active:after { position:absolute; bottom:5px; left:50%; margin:0; transform:translateX(-50%); }
  .page.sessions-page { padding-top:42px; }
  .sessions-heading { display:block; }
  .sessions-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .sessions-heading h1,.settings-heading h1,.detail-heading h1 { color:#10110f; font-family:Georgia, 'Times New Roman', serif; font-weight:500; letter-spacing:-.065em; }
  .sessions-heading h1 { font-size:46px; }
  .sessions-subtitle { max-width:265px; margin:13px 0 17px; font-size:13px; }
  .recent-label { display:none; }
  .sessions-list { gap:11px; }
  .session-card { min-height:102px; padding:16px 38px 15px 17px; border-radius:15px; }
  .sessions-start { display:flex; align-items:center; justify-content:center; gap:7px; min-height:51px; margin-top:18px; }
  .sessions-start svg { width:16px; height:16px; fill:none; stroke:currentColor; }
  .analysis-screen h1 { font-family:ui-sans-serif,system-ui,sans-serif; letter-spacing:-.055em; }
  .settings-grid { grid-template-columns:1fr; gap:0; margin-top:0; }.settings-grid-secondary,.companion-tile { display:none; }.location-editor { display:grid; }.settings-page { max-width:35rem; }
}