/* Machina Institute, style 01 "Instrument".
   Hairlines, tabular numerals, 8px grid. Light theme. No shadows, no gradients. */
/* tokens */
:root{color-scheme: light;--ground:#FAFAF8;--panel:#F1F0EC;--ink:#14161A;--grey:#5B616E;--accent:#E4572E;--accent-ink:#B03A16;--rule:#D8D5CC;--rule-mid:#8A867C;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
/* reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure,dl{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
/* instrument primitives */
/* all numerals and labels: mono, tabular */
.num,.lbl,.seats-u,.head-nav a,.btn,.chip,.state,.skip,.copybtn,.jump,.tabs a,.wordmark,.mscale,.node-meta,.n-idx,.cmark .k,.cmark .d,.mod .k,.resume .k,.copyb-h .k,.stat-row .k,.cleave .k,.readout .u,.readout .i,.micro,.panel-line,.cstat,.ablocks .bn,.course .cn,.stat-row .v,.seats-n,.who-t .cx,.resume .meta,.foot,.path-legend,.ticks .m,.abar span,.copyb pre,.live,.avatar{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl,.seats-u,.head-nav a,.btn,.chip,.state,.skip,.copybtn,.jump,.tabs a,.wordmark,.mscale,.node-meta,.cmark .k,.mod .k,.resume .k,.copyb-h .k,.stat-row .k,.cleave .k,.readout .u{text-transform:uppercase}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 12px}
.lbl{font-size:12px;line-height:16px;letter-spacing:.14em;color:var(--grey);display:flex;align-items:baseline;gap:8px}
.lbl .idx{color:var(--accent-ink)}
.lbl::after{content:"";flex:1;height:1px;background:var(--rule);transform:translateY(-4px)}
.sec{border-top:1px solid var(--ink);padding:24px 0}
.sec-h{font-size:16px;line-height:1.2;letter-spacing:-.01em;font-weight:650;margin:8px 0 0}
.sec-b{font-size:16px;line-height:1.55;color:var(--grey);margin-top:8px;max-width:62ch}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brk{position:relative;display:inline-block;padding:0 10px}
.brk::before,.brk::after{content:"";position:absolute;top:0;bottom:0;width:4px;border:1px solid var(--rule-mid)}
.brk::before{left:0;border-right:0}
.brk::after{right:0;border-left:0}
/* header */
.site-head{border-bottom:1px solid var(--ink);background:var(--ground)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.wordmark{display:flex;flex-direction:column;justify-content:center;min-height:44px;text-decoration:none;font-weight:700;font-size:12px;line-height:14px;letter-spacing:.1em}
.wordmark span:last-child{color:var(--grey);letter-spacing:.02em}
.head-nav{display:flex;gap:0}
.head-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:12px;letter-spacing:0;color:var(--grey);text-decoration:none}
.head-nav a:hover{color:var(--ink)}
/* hero */
.hero{padding:4px 0 16px}
.hero h1{font-size:19px;line-height:1.21;letter-spacing:-.015em;font-weight:680}
.hero-sub{font-size:16px;line-height:1.4;color:var(--grey);margin-top:8px}
.panel{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-top:4px;padding:6px 0}
.panel-line{font-size:12px;line-height:16px;letter-spacing:.01em}
.panel-line.dim{color:var(--grey)}
.seats{display:flex;align-items:center;gap:8px;height:24px;margin:2px 0}
.seats-n{font-weight:700;font-size:24px;line-height:24px;letter-spacing:-.02em;color:var(--accent-ink)}
.seats-u{font-size:12px;letter-spacing:.12em;color:var(--grey);white-space:nowrap}
/* seat gauge: a ruled scale, 10 divisions of 100 */
.gauge{flex:1;min-width:72px;height:16px;position:relative}
.gauge .scale{position:absolute;left:0;right:0;top:0;height:5px;background-image:linear-gradient(to right,var(--rule-mid) 0 1px,transparent 1px);background-size:10% 100%;background-repeat:repeat-x;border-right:1px solid var(--rule-mid)}
.gauge .track{position:absolute;left:0;right:0;bottom:0;height:9px;border:1px solid var(--rule-mid)}
.gauge .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.gauge .needle{position:absolute;top:0;bottom:0;width:1px;background:var(--ink)}
.form{display:flex;gap:8px;margin-top:8px}
.form input[type=email]{flex:1;min-width:0;height:44px;padding:0 10px;background:#fff;border:1px solid var(--ink);border-radius:0;font-size:14px}
.form input::placeholder{color:#7A7F89}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid var(--ink);border-radius:0;background:var(--accent);color:var(--ink);cursor:pointer;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.btn:hover{background:var(--accent-ink);color:var(--ground)}
.micro{font-size:12px;line-height:16px;letter-spacing:.04em;color:var(--grey);margin-top:8px}
/* readout strip */
.readout{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule)}
.readout li{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);padding:8px 8px 8px 0}
.readout li:nth-child(2n){border-right:0;padding-left:8px}
.readout li:last-child{grid-column:1 / -1;border-right:0;padding-left:0}
.readout .n{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:28px;line-height:32px;font-weight:700;letter-spacing:-.03em}
.readout .u{display:block;font-size:12px;line-height:16px;letter-spacing:.12em;color:var(--grey)}
.readout .i{display:block;font-size:12px;letter-spacing:.1em;color:var(--grey)}
/* anatomy bar */
.abar{display:flex;height:24px;border:1px solid var(--ink);margin-top:16px}
.abar span{border-right:1px solid var(--ink);position:relative;font-size:12px;line-height:22px;text-align:center;color:var(--grey);overflow:hidden}
.abar span:last-child{border-right:0}
.abar .b3{background:var(--accent)}
.abar .b3,.abar .b1{color:var(--ink)}
.abar .b2{background:var(--panel)}
.abar .b5{background:var(--panel)}
.mscale{display:flex;justify-content:space-between;font-size:12px;line-height:14px;letter-spacing:.1em;color:var(--grey)}
.mscale span{position:relative;padding-top:4px}
.mscale span::before{content:"";position:absolute;top:0;width:1px;height:3px;background:var(--rule-mid)}
.mscale span:first-child::before{left:0}
.mscale span:nth-child(2)::before{left:50%}
.mscale span:last-child::before{right:0}
.ablocks{margin-top:16px;border-top:1px solid var(--rule)}
.ablocks li{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--rule)}
.ablocks .bn{font-size:12px;line-height:20px;color:var(--accent-ink);font-weight:700}
.ablocks h3{font-size:16px;line-height:20px;font-weight:650;display:flex;justify-content:space-between;gap:8px}
.ablocks .bmin{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:400;color:var(--grey);white-space:nowrap}
.ablocks p{font-size:16px;line-height:1.45;color:var(--grey);margin-top:4px}
/* courses */
.courses{border-top:1px solid var(--rule);margin-top:16px}
.course{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--rule)}
.course.flag{border-left:2px solid var(--accent);padding-left:8px;grid-template-columns:28px 1fr}
.course .cbody,.course .cside{grid-column:2}
.course .cside{margin-top:2px}
.course .cn{font-size:12px;line-height:20px;font-weight:700;color:var(--grey)}
.course h3{font-size:16px;line-height:20px;font-weight:650}
.chip{border-color:var(--accent-ink);display:inline-block;margin-left:8px;vertical-align:1px;font-size:12px;letter-spacing:.1em;color:var(--accent-ink);border:1px solid var(--accent);padding:0 4px;line-height:14px}
.cstat{font-size:12px;line-height:18px;color:var(--grey);margin-top:4px}
.cstat b{color:var(--ink);font-weight:700}
.pq{white-space:nowrap}
.cleave{font-size:16px;line-height:1.45;margin-top:2px}
.cleave .k{font-size:12px;letter-spacing:.1em;color:var(--grey);margin-right:6px;white-space:nowrap}
.note{font-size:16px;line-height:1.5;color:var(--grey);margin-top:12px;padding-left:12px;border-left:2px solid var(--rule-mid)}
/* certificate / access / audience */
.honesty{border:1px solid var(--ink);padding:12px;margin-top:16px;background:var(--panel)}
.honesty q{display:block;font-family:var(--mono);font-size:16px;line-height:1.35;font-weight:700;quotes:none}
.honesty q::before{content:"";}
.honesty p{font-size:16px;line-height:1.5;color:var(--grey);margin-top:8px}
.ticks{margin-top:16px;border-top:1px solid var(--rule)}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.45}
.ticks .m{font-size:12px;line-height:20px;color:var(--accent-ink)}
.aud{margin-top:8px}
.aud + .aud{margin-top:32px}
/* final + footer */
.final{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:24px 0;margin-top:24px}
.final h2{font-size:20px;line-height:1.25;font-weight:680}
.final .sub{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;line-height:20px;margin-top:8px}
.cond{font-size:16px;line-height:1.5;color:var(--grey);margin-top:12px}
.tabs ~ .foot{padding-bottom:96px}
.foot{padding:16px 0 96px;font-size:12px;line-height:16px;letter-spacing:.04em;color:var(--grey)}
.foot a{color:var(--accent-ink);display:inline-flex;align-items:center;min-height:44px}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--ground);border-top:1px solid var(--ink);padding:8px 12px;display:flex;align-items:center;gap:8px}
.sticky .s-read{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;line-height:14px;color:var(--grey);flex:1;min-width:0}
.sticky .s-read b{display:block;color:var(--ink);font-size:12px}
.sticky .btn{flex:0 0 auto}
/* path page */
.skip{position:absolute;left:8px;top:-64px;z-index:40;background:var(--ink);color:var(--ground);padding:0 12px;min-height:44px;display:inline-flex;align-items:center;font-size:12px;letter-spacing:.08em;text-decoration:none;transition:top .12s linear}
.skip:focus{top:8px}
.who{display:flex;align-items:center;gap:8px;padding:8px 0}
.avatar{flex:0 0 auto;width:36px;height:36px;border:1px solid var(--ink);display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.06em}
.who-t{min-width:0}
.who-t .nm{display:block;font-size:16px;line-height:18px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-t .cx{display:block;font-size:12px;line-height:14px;letter-spacing:.06em;color:var(--grey)}
.stat-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stat-row div{padding:8px 0}
.stat-row div + div{padding-left:12px;border-left:1px solid var(--rule)}
.stat-row .k{font-size:12px;letter-spacing:.12em;color:var(--grey);display:block}
.stat-row .v{font-size:15px;font-weight:700;line-height:22px;display:block}
.cad{display:flex;gap:3px;margin-top:4px;height:8px}
.cad i{flex:1;border:1px solid var(--rule-mid);background:transparent}
.cad i.on{background:var(--accent);border-color:var(--accent-ink)}
.resume{border:1px solid var(--ink);border-top:3px solid var(--accent);padding:12px;margin-top:16px}
.resume .k{font-size:12px;letter-spacing:.14em;color:var(--accent-ink);display:flex;gap:8px;align-items:center}
.resume .tag{border:1px solid var(--accent-ink);padding:1px 5px;font-weight:700}
.resume h2{font-size:16px;line-height:1.25;font-weight:680;margin-top:8px}
.resume .meta{font-size:12px;line-height:18px;color:var(--grey);margin-top:8px}
.resume .meta b{color:var(--ink)}
.steps{display:flex;gap:3px;height:6px;margin-top:8px}
.steps i{flex:1;border:1px solid var(--rule-mid)}
.steps i.on{background:var(--ink);border-color:var(--ink)}
.resume .btn{width:100%;margin-top:12px}
.outcome{font-size:16px;line-height:1.45;margin-top:8px;padding-left:10px;border-left:2px solid var(--rule-mid);color:var(--grey)}
.copyb{border:1px solid var(--ink);margin-top:16px}
.copyb-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 6px 8px;border-bottom:1px solid var(--ink);background:var(--panel)}
.copyb-h .k{font-size:12px;letter-spacing:.1em;color:var(--grey)}
.copybtn{min-height:44px;padding:0 10px;border:1px solid var(--ink);background:var(--ground);font-size:12px;letter-spacing:.08em;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.copybtn[data-state="done"]{background:var(--accent);border-color:var(--accent-ink)}
.copyb pre{margin:0;padding:10px 8px;font-size:16px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.path-legend{font-size:12px;line-height:16px;letter-spacing:.02em;color:var(--grey);margin-top:8px}
.plist{position:relative;margin-top:16px;padding-left:0}
.plist::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:1px;background-image:linear-gradient(to bottom,var(--rule-mid) 0 3px,transparent 3px 7px);background-size:1px 7px}
.node{position:relative;display:grid;grid-template-columns:48px 1fr;gap:8px;padding:8px 0;min-height:72px}
.node + .node{margin-top:8px}
.mark{position:relative;z-index:1;width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;background:var(--ground);display:grid;place-items:center}
.mark svg{width:20px;height:20px;display:block;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.n-idx{position:absolute;left:0;top:56px;width:48px;text-align:center;background:var(--ground);font-size:12px;letter-spacing:.04em;color:var(--grey)}
.node-body{min-width:0;padding-top:2px}
.node-meta{font-size:12px;line-height:14px;letter-spacing:.08em;color:var(--grey);display:flex;gap:8px;flex-wrap:wrap}
.node-title{font-size:16px;line-height:20px;font-weight:600;margin-top:2px}
.node-title a{display:flex;align-items:center;min-height:56px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--grey)}
.node-title a:hover{text-decoration-color:var(--accent)}
.node-title.plain{display:flex;align-items:center;min-height:56px;color:var(--grey);font-weight:600}
.status{display:block;font-size:16px;line-height:18px;color:var(--grey);padding-top:2px}
.state{font-size:12px;line-height:16px;letter-spacing:.12em;border:1px solid var(--rule-mid);padding:0 4px;margin-right:6px;white-space:nowrap;display:inline-block;vertical-align:1px;color:var(--ink)}
/* state marks: shape and fill, never colour alone */
.s-held .mark{background:var(--ink);border-color:var(--ink)}
.s-held .mark svg{stroke:var(--ground)}
.s-done .mark{border-width:1px}
.s-in_progress .mark{border:2px solid var(--accent-ink);background:var(--accent)}
.s-in_progress .state,.s-in_progress .status{color:var(--ink)}
.s-in_progress .state{border-color:var(--accent-ink);background:var(--accent)}
.s-needs_revision .mark{border:2px solid var(--accent-ink)}
.s-needs_revision .state{border-color:var(--accent-ink);color:var(--accent-ink)}
.s-retake .mark{border:2px solid var(--accent-ink)}
.s-retake .state{border-color:var(--accent-ink);color:var(--accent-ink)}
.s-scheduled .mark{border-style:dashed}
.s-skipped .mark{border-color:var(--rule-mid)}
.s-skipped .mark svg{stroke:var(--grey)}
.s-locked .mark{border-style:dashed;border-color:var(--rule-mid);background:var(--panel)}
.s-locked .mark svg{stroke:var(--grey)}
.s-locked .node-meta{color:var(--grey)}
.n-deliverable .mark{border-radius:0}
.n-project .mark{border-radius:0;border-width:2px}
.n-day5 .mark{border-radius:0}
.n-day5 .mark::before{content:"";position:absolute;inset:3px;border:1px solid var(--rule-mid)}
.n-peer_review .mark{border-style:double;border-width:4px}
.n-certificate .mark{border:0;background:none}
.n-certificate .mark svg{width:44px;height:44px;stroke-width:1.4}
.s-locked.n-certificate .mark svg{stroke:var(--grey)}
.n-module{display:block;padding:24px 0 0;min-height:0}
.mod{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);background:var(--panel);padding:8px 12px;margin-left:0}
.mod .k{font-size:12px;letter-spacing:.14em;color:var(--accent-ink);display:block}
.mod h3{font-size:16px;line-height:20px;font-weight:680;margin-top:2px}
.n-cohort{display:block;padding:16px 0;min-height:0}
.cmark{position:relative;border-top:1px dashed var(--accent-ink);padding-top:6px;display:flex;align-items:center;gap:8px}
.cmark .k{font-size:12px;letter-spacing:.12em;color:var(--accent-ink);background:var(--ground);padding-right:8px}
.cmark .d{font-size:12px;color:var(--grey)}
.jump{position:fixed;right:16px;bottom:72px;z-index:25;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;background:var(--ink);color:var(--ground);text-decoration:none;border:1px solid var(--ink);font-size:12px;letter-spacing:.1em}
.jump svg{width:12px;height:12px;fill:none;stroke:var(--ground)}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ground);border-top:1px solid var(--ink);display:flex}
.tabs a{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--grey);font-size:12px;letter-spacing:.08em;border-right:1px solid var(--rule)}
.tabs a:last-child{border-right:0}
.tabs a[aria-current="page"]{color:var(--ink);border-top:2px solid var(--accent);margin-top:-1px}
.tabs svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.live{font-size:12px;color:var(--accent-ink)}
/* wider screens */
@media (min-width:600px){
  .wrap{padding:0 16px}
  .panel{padding:8px 0}.hero h1{font-size:28px;line-height:1.15;max-width:22ch}
  .hero-sub{font-size:15px;line-height:1.5;max-width:66ch}
  .form{max-width:520px}
  .panel-line{font-size:12px;line-height:20px}
  .seats{height:34px}
  .seats-n{font-size:30px;line-height:34px}
  .readout{grid-template-columns:repeat(5,1fr)}
  .readout li,.readout li:nth-child(2n){grid-column:auto;border-right:1px solid var(--rule);padding:12px 12px 12px 0}
  .readout li + li{padding-left:12px}
  .readout li:last-child{border-right:0}
  .sec-h{font-size:26px}
  .abar span{font-size:12px}
  .sticky{display:none}
  .foot{padding-bottom:32px}
}
@media (min-width:900px){.wrap{padding:0 32px}
  .hero{padding:24px 0 32px}
  .hero h1{font-size:38px;letter-spacing:-.02em;max-width:30ch}
  .hero-sub{font-size:16px;max-width:60ch}
  .sec{padding:40px 0}
  .sec-h{font-size:30px}
  .courses{border-top:1px solid var(--rule)}
  .course{grid-template-columns:36px minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:16px}
  .course .cn{font-size:13px}
  .course .cbody{grid-column:2}
  .course .cside{grid-column:3;margin-top:0}
  .cleave{margin-top:0}
  .cleave .k{display:block;margin-right:0}
  .node{grid-template-columns:56px 1fr}
  .mark{width:56px;height:56px}
  .mark svg{width:24px;height:24px}
  .n-certificate .mark svg{width:52px;height:52px}
  .n-idx{width:56px;top:64px}
  .plist::before{left:28px}
  .path-cols{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:32px;align-items:start}
  .path-side{position:sticky;top:16px}
  .foot{padding-bottom:32px}
}
/* motion */
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .skip{transition:none}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}
}
/* print */
@media print{.sticky,.tabs,.jump,.skip{display:none}
  body{background:#fff}
}