/* Torto — local project presentation */
:root {
  --bg: #fff; --surface: #fff; --text: #202b29; --muted: #596661;
  --lime: #285d4d; --line: #d9dfdc; --dark: #132520; --accent: #bad4c5;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--text); background: var(--bg); font: 16px/1.6 var(--body); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #a6773e; outline-offset: 4px; }
[hidden] { display: none !important; }
header { position: sticky; top: 0; z-index: 20; height: 76px; padding: 0 max(5%, calc((100vw - 1240px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 22px; background: #fffffffa; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 22px; letter-spacing: -.7px; }
.mark { width: 28px; height: 28px; display: grid; place-items: center; background: var(--dark); color: #fff; font: 600 18px/1 var(--body); border-radius: 3px; }
.lab { margin-left: 10px; color: var(--muted); font: 11px/1.5 var(--mono); letter-spacing: .3px; }
nav { display: flex; gap: 24px; font-size: 14px; }
nav a { padding: 6px 0; border-bottom: 1px solid transparent; }
nav a:hover { border-color: var(--lime); }
.small-button { padding: 9px 15px; background: transparent; color: var(--text); border: 1px solid #a7b2ad; border-radius: 4px; font-size: 14px; white-space: nowrap; }
.chapter { padding: 80px max(6%, calc((100vw - 1200px)/2)); border-bottom: 1px solid var(--line); scroll-margin-top: 0; }
#editions, #covers { background: var(--surface); }
.hero { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; min-height: min(820px, calc(100svh - 76px)); padding-top: 60px; padding-bottom: 105px; background: #fff; color: var(--text); }
.eyebrow { font: 12px/1.7 var(--mono); letter-spacing: .8px; margin: 0 0 20px; }
.hero .eyebrow { color: var(--lime); }
.tiny-line { display: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--body); font-weight: 550; }
h1 { font-size: clamp(42px, 4.4vw, 66px); line-height: 1.08; letter-spacing: -2.3px; margin: 20px 0 28px; }
h2 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.17; letter-spacing: -1.3px; max-width: 920px; }
h3 { font-size: 24px; line-height: 1.3; letter-spacing: -.5px; }
h4 { font-size: 20px; line-height: 1.4; letter-spacing: -.3px; }
em { font-style: normal; color: var(--lime); }
.muted { color: var(--muted); }
.lead { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 530px; }
.hero .lead { color: var(--text); font-size: 21px; }
.hero-problem { font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 510px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin: 28px 0 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 4px; padding: 12px 19px; font-size: 15px; font-weight: 550; line-height: 1.5; }
.lime { background: var(--lime); color: white; }
.hero .lime { background: var(--lime); color: #fff; }
.button:hover { filter: brightness(.93); }
.text-link { border-bottom: 1px solid #80978a; padding-bottom: 2px; font-size: 14px; }
.built { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text); }
.built>span { color: var(--muted); font: 10px/1.5 var(--mono); }
.built strong { font-weight: 400; }
.divider { padding: 0 7px; }
.hero-art { position: relative; aspect-ratio: 1; min-width: 0; }
.hero-art img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 3px; }
.art-caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.art-caption>span:first-child { font: 11px/1.6 var(--mono); }
.hero-bottom { position: absolute; bottom: 24px; left: max(6%, calc((100vw - 1200px)/2)); right: max(6%, calc((100vw - 1200px)/2)); display: flex; justify-content: space-between; align-items: center; gap: 20px; color: var(--muted); font: 10px/1.6 var(--mono); border-top: 1px solid var(--line); padding-top: 16px; }
.hero-bottom>span:nth-child(2) { font: 12px/1.5 var(--body); }
.section-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.section-top .eyebrow { margin: 0; color: var(--lime); }
.section-aside { color: var(--muted); font-size: 14px; }
.ability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; margin-top: 44px; }
.ability-grid article { border-top: 2px solid #315d4c; padding-top: 18px; }
.number { display: block; font: 13px/1.5 var(--mono); color: var(--muted); margin-bottom: 30px; }
.signal { display: none; }
article p, .body-copy { color: var(--muted); line-height: 1.7; }
.chip { display: inline-block; color: var(--lime); font: 11px/1.6 var(--mono); letter-spacing: .3px; margin-top: 10px; }
.footnote { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 28px 0 0; max-width: 1000px; }
.footnote a { text-decoration: underline; text-underline-offset: 3px; }
.editions { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 36px; background: #fff; border: 1px solid #c7d1cb; }
.edition { display: flex; flex-direction: column; padding: 32px 36px; border-top: 3px solid #315d4c; }
.edition+.edition { border-left: 1px solid var(--line); }
.edition .eyebrow { color: var(--muted); margin-bottom: 18px; }
.edition h3 { font-size: 31px; }
.edition h3 span { color: var(--lime); }
.edition p { margin: 14px 0; }
.edition ul { padding-left: 19px; line-height: 1.7; margin: 12px 0 28px; }
.edition li { padding: 5px 0; }
.edition li::marker { color: var(--lime); font-size: 12px; }
.edition-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.thermal-bar { height: 5px; max-width: 260px; margin: 18px 0 26px; background: linear-gradient(90deg,#35475c,#7a5074,#c36b61,#d8ab5b); }
.exercise-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.exercise-layout .lead { font-size: 18px; }
.exercise-layout .button { margin-top: 10px; }
.progress-example { display: flex; gap: 48px; border-top: 1px solid var(--line); padding-top: 18px; margin: 25px 0; }
.progress-example div { display: flex; flex-direction: column; gap: 5px; }
.progress-example span { font: 11px/1.6 var(--mono); color: var(--muted); }
.progress-example strong { font-size: 38px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--lime); }
.rest-copy { font-size: 15px; }
.demo-panel { background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 26px; }
.demo-top { display: flex; justify-content: space-between; gap: 12px; font: 11px/1.5 var(--mono); color: var(--muted); }
#phase { color: var(--lime); }
#pose { display: block; width: 100%; height: 300px; margin: 20px 0; }
#pose>g:first-child { stroke: #e1e7e3; }
#pose>g:nth-child(2) { stroke: #285d4d; }
#pose>g:nth-child(3) { fill: #183f31; }
.demo-feedback { border-top: 1px solid var(--line); padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.demo-feedback div { display: flex; flex-direction: column; gap: 8px; }
.demo-feedback span { color: var(--muted); font: 11px/1.6 var(--mono); }
.demo-feedback strong { font-size: 19px; font-weight: 400; }
#reps { font: 500 26px/1 var(--body); color: var(--lime); }
.sensor-demo { margin-top: 44px; border: 1px solid var(--line); padding: 26px; background: #fff; }
.sensor-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.sensor-heading .eyebrow { color: var(--muted); margin: 0 0 7px; font-size: 11px; }
.simulation-label { color: #735326; border: 1px solid #d7c9b1; padding: 6px 9px; font: 10px/1.6 var(--mono); }
.sensor-controls { display: flex; gap: 15px; align-items: center; margin: 24px 0; font-size: 14px; }
.sensor-controls select { max-width: 100%; background: #fff; color: var(--text); border: 1px solid #a8b4ac; padding: 9px 12px; border-radius: 3px; }
.sensor-values { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.sensor-values article { min-width: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.sensor-values article>span { font: 11px/1.5 var(--mono); color: var(--muted); }
.sensor-values strong { display: block; margin-top: 12px; font-size: 34px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sensor-values small { font-size: 14px; font-weight: 400; color: var(--muted); }
.sensor-values p, .sensor-explanation { font-size: 14px; line-height: 1.6; color: var(--muted); }
.sensor-explanation { margin: 22px 0 0; }
.sensor-values .warning, #threshold-error { color: #98551e; }
.sensor-values .unavailable { color: var(--muted); }
.threshold-settings, .prototype-limits details { margin-top: 16px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
summary { color: var(--text); cursor: pointer; font-size: 15px; }
.threshold-fields { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.threshold-fields label { display: flex; flex-direction: column; gap: 8px; }
.threshold-fields input { width: 190px; background: #fff; color: var(--text); border: 1px solid #a8b4ac; border-radius: 3px; padding: 9px; }
.cover-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 36px; }
.cover { display: flex; flex-direction: column; align-items: flex-start; background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 3px; padding: 10px; text-align: left; min-width: 0; }
.cover:hover { border-color: #8eaaa0; }
.cover.selected { border-color: var(--lime); background: #fff; }
.cover-image { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; background: var(--dark); border-radius: 2px; margin-bottom: 20px; }
.cover-name { font-size: 21px; line-height: 1.3; font-weight: 550; letter-spacing: -.4px; }
.cover-joke { color: var(--muted); font-size: 14px; margin: 10px 0 20px; }
.cover-tag { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: auto; }
.cover-response { font-size: 14px; color: var(--lime); margin: 22px 0; }
.build-rules { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 32px; }
.build-rules>div { border-top: 1px solid #bbc8c0; padding-top: 16px; }
.build-rules strong { display: block; font-size: 14px; font-weight: 550; }
.build-rules span { display: block; font-size: 14px; color: var(--muted); margin-top: 8px; }
.roadmap { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; margin: 36px 0 55px; }
.roadmap>div { border-top: 2px solid #315d4c; padding-top: 18px; }
.roadmap span { font: 11px/1.6 var(--mono); color: var(--muted); }
.roadmap h3 { font-size: 20px; margin-top: 18px; }
.roadmap p { font-size: 15px; color: var(--muted); }
.prototype-limits { margin: 0 0 36px; }
.prototype-limits>.eyebrow { color: var(--lime); }
.limits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 28px 0 0; }
.sensor-limit-cards article { padding: 24px 0 0; border-top: 1px solid #aabdb2; }
.sensor-limit-cards .chip { margin: 0 0 16px; }
.sensor-limit-cards h4 { font-size: 22px; }
.sensor-limit-cards ul { padding-left: 18px; color: var(--muted); font-size: 15px; }
.sensor-limit-cards li { margin: 15px 0; }
.sensor-limit-cards li strong { color: var(--text); font-weight: 550; }
.sensor-decision { border-left: 3px solid #90af9e; padding-left: 16px; font-size: 15px; }
.sensor-source { font-size: 12px; color: var(--muted); }
.prototype-limits a { text-decoration: underline; text-underline-offset: 3px; }
.closing-line { border-top: 1px solid var(--line); padding: 24px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; }
.closing-line strong { font-size: 19px; font-weight: 550; }
.closing-line span { font-size: 14px; color: var(--muted); }
footer { padding: 30px max(6%, calc((100vw - 1200px)/2)); display: flex; justify-content: space-between; align-items: center; gap: 24px; color: var(--muted); font-size: 12px; }
.present-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 16px; white-space: nowrap; background: #fff; color: var(--text); border: 1px solid #9aaba1; border-radius: 6px; padding: 8px 12px; box-shadow: 0 4px 24px #15281f26; font-size: 13px; }
.present-bar button { padding: 8px; border: 0; background: none; color: inherit; }
#timer { border-left: 1px solid var(--line); padding-left: 16px; font: 600 15px/1 var(--mono); }
#speaker-notes { position: fixed; bottom: 90px; right: 24px; z-index: 40; max-width: 460px; max-height: 55vh; overflow: auto; border: 1px solid #9aaba1; background: #fff; color: var(--text); padding: 24px; box-shadow: 0 4px 24px #15281f26; }
#notes-text { font-size: 15px; line-height: 1.7; }
.presenting footer { padding-bottom: 110px; }
@media(min-width: 1000px) { .presenting .chapter { min-height: calc(100svh - 76px); } }
@media(max-width: 1100px) { .lab { display:none; } .hero { gap: 32px; } nav { gap: 16px; } .hero-bottom>span:nth-child(2) { display: none; } }
@media(max-width: 850px) {
  header { padding: 0 5%; } nav { display: none; }
  .chapter { padding: 58px 6%; } .hero { padding-bottom: 95px; min-height: auto; }
  .hero-art { align-self: center; } .section-aside { display: none; }
  .exercise-layout { gap: 32px; } .sensor-values { grid-template-columns: 1fr 1fr; }
  .sensor-heading { align-items: flex-start; flex-direction: column; } .editions .edition { padding: 26px; }
  .roadmap { grid-template-columns: 1fr 1fr; } .limits-grid { gap: 26px; }
}
@media(max-width: 650px) {
  html { scroll-padding-top: 72px; } header { height: 72px; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; } h1 { font-size: 44px; letter-spacing: -1.5px; }
  h2 { font-size: 34px; } .hero-art { max-width: 420px; width: 100%; justify-self: center; }
  .hero-bottom { font-size: 9px; } .hero-bottom>a { display: none; }
  .ability-grid,.editions,.exercise-layout,.cover-grid,.build-rules,.limits-grid { grid-template-columns: 1fr; }
  .ability-grid { gap: 30px; } .number { margin-bottom: 16px; }
  .edition+.edition { border-left: none; } .section-top { margin-bottom: 24px; }
  .cover { display: grid; grid-template-columns: minmax(95px,35%) 1fr; column-gap: 18px; align-items: start; }
  .cover-image { grid-row: 1/4; margin: 0; } .cover-name { font-size: 20px; }
  .cover-joke { margin: 7px 0 12px; } .cover-tag { margin-top: 0; }
  .sensor-demo { padding: 20px; } .sensor-controls { flex-direction: column; align-items: stretch; }
  .sensor-controls select { width: 100%; } .sensor-values { gap: 22px 16px; }
  .sensor-values strong { font-size: 29px; } .threshold-fields { flex-direction: column; align-items: stretch; }
  .threshold-fields input { width: 100%; } footer { flex-wrap: wrap; } footer>span { display: none; }
  .present-bar { gap: 4px; max-width: 96vw; padding: 6px; } .present-bar button { padding: 7px; }
  #slide-label { max-width: 110px; white-space: normal; font-size: 11px; } #timer { padding-left: 8px; }
  #speaker-notes { left: 12px; right: 12px; bottom: 82px; max-height: 45vh; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media print {
  header, footer, .present-bar, #speaker-notes, .hero-actions, .hero-bottom, #demo, .threshold-settings { display: none !important; }
  .chapter { padding: 24px 0; break-inside: avoid; } .hero { min-height: 0; background: white; color: #202b29; }
  .hero .lead,.hero-problem,.hero .eyebrow,.built,.built>span,.art-caption { color: #596661; }
  .hero-art { max-width: 280px; } .cover-grid { grid-template-columns: repeat(3,1fr); }
}

/* Session review and export */
.session-preview{margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.report-intro{display:flex;justify-content:space-between;gap:30px;align-items:flex-start}.report-intro>div:first-child{max-width:640px}.report-intro .eyebrow{margin:0 0 10px}.report-intro p{color:var(--muted);font-size:15px}.report-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}.report-actions .button{margin:0;white-space:nowrap}
.review-columns{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px}.thermal-preview{margin:0;min-width:0}.preview-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.preview-heading h4{font-size:19px}.report-tag{font:10px/1.6 var(--mono);color:var(--muted)}
#thermal-map{display:block;width:100%;height:auto;aspect-ratio:4/3;image-rendering:pixelated;border-radius:3px;background:#110f38;touch-action:pan-y}.thermal-scale{margin-top:14px}.thermal-ramp{height:12px;background:linear-gradient(90deg,rgb(17,15,56),rgb(63,39,112),rgb(140,48,107),rgb(222,91,60),rgb(250,185,67),rgb(252,249,184))}.scale-ticks{display:flex;justify-content:space-between;font:12px/1.6 var(--mono);margin-top:6px}.thermal-control{display:grid;grid-template-columns:1fr auto;gap:8px;margin:22px 0 14px;font-size:14px}.thermal-control input{grid-column:1/-1;width:100%;accent-color:var(--lime)}.thermal-control output{grid-column:2;grid-row:1;white-space:nowrap;font:12px/1.6 var(--mono)}.thermal-preview figcaption,.thermal-reading{color:var(--muted);font-size:13px;line-height:1.6}.thermal-preview .footnote{margin-top:12px}.thermal-reading{min-height:22px}.progress-preview{min-width:0}.progress-preview svg{display:block;width:100%;height:auto;background:#fff}.session-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}.session-table caption{text-align:left;font-size:12px;color:var(--muted);padding:12px 0}.session-table th,.session-table td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:left}.session-table thead th{font-size:12px;font-weight:500;color:var(--muted)}.session-table tbody th{font-weight:500}.export-note{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;font-size:14px}.export-note p{color:var(--muted)}.report-stamp{font:11px/1.6 var(--mono)}#export-status{color:var(--lime)}
@media(max-width:1100px){.report-intro{flex-direction:column}.report-actions{flex-shrink:1}}
@media(max-width:720px){.review-columns{grid-template-columns:1fr}.thermal-control{grid-template-columns:1fr}.thermal-control output{grid-column:1;grid-row:auto}}
@media print{
 body.print-session header,body.print-session footer,body.print-session main>.chapter:not(#exercise),body.print-session #exercise>*:not(.sensor-demo){display:none!important}
 body.print-session #exercise{padding:0!important;border:0;break-inside:auto}body.print-session .sensor-demo{margin:0;padding:0;border:0;background:white}
 body.print-session .sensor-controls,body.print-session .report-actions,body.print-session .thermal-control,body.print-session .thermal-reading,body.print-session #export-status{display:none!important}
 body.print-session .sensor-heading{display:flex}body.print-session .sensor-values{grid-template-columns:repeat(4,1fr);gap:14px}body.print-session .sensor-values strong{font-size:24px}body.print-session .sensor-values p{font-size:11px}
 body.print-session .review-columns{grid-template-columns:1fr 1fr;gap:24px;break-inside:avoid}body.print-session .session-preview{break-inside:auto}body.print-session .report-intro{display:block}body.print-session .export-note{break-inside:avoid}body.print-session .thermal-ramp{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}