/* Hermetic Networks training site - Present mode slide engine, styles.
   Pairs with present.js. Uses hermetic.css tokens only (no raw hex), so light and dark both work.
   Sizing: --du is one hundredth of the screen width, or of 16:9 height on short screens, so a
   1920x1080 TV gives 19.2px per unit and everything scales down together on a laptop.
   Body text is 1.5 units (28.8px at 1080p). Slide content stays inside the outer 5% of the screen. */

html.hn-present{--du:max(min(1vw,1.7778vh),6px)}
html.hn-present,html.hn-present body{height:100%; margin:0; overflow:hidden}
html.hn-present body{overscroll-behavior:none}

.deck{
  position:fixed; inset:0; z-index:1; margin:0; padding:0;
  font-family:var(--v2-font,"Inter",system-ui,-apple-system,"Segoe UI",sans-serif);
  font-size:calc(var(--du)*1.5); line-height:1.4; color:var(--ink); letter-spacing:-.006em;
}

/* ---------- one slide at a time ---------- */
.deck .slide{
  --u:calc(var(--du)*var(--fit,1));
  position:absolute; inset:0; display:none; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:calc(var(--u)*1.8); margin:0; padding:9vh 6vw 11vh; overflow:hidden;
  font-size:calc(var(--u)*1.5); line-height:1.4; scroll-margin:0;
}
.deck:not(.is-ready) .slide:first-child{display:flex}
.deck .slide.is-active{display:flex; animation:prIn .4s cubic-bezier(.2,.7,.2,1)}
@keyframes prIn{from{opacity:.4; transform:translateY(calc(var(--u)*.9))} to{opacity:1; transform:none}}

.deck .slide > *{margin:0; max-width:none}
.deck .slide h1,.deck .slide h2{font-family:var(--v2-head,"Inter Tight","Inter",system-ui,sans-serif); color:var(--heading); font-weight:600; margin:0}
.deck .slide h1{font-size:calc(var(--u)*5.8); line-height:1.04; letter-spacing:-.032em; max-width:19em}
.deck .slide h2{font-size:calc(var(--u)*3.3); line-height:1.1; letter-spacing:-.022em; max-width:22em}
.deck .slide p{font-size:calc(var(--u)*1.5)}
.deck .slide .eyebrow{display:flex; align-items:center; gap:calc(var(--u)*.7); margin:0; font:600 calc(var(--u)*1.5)/1.2 var(--v2-font,"Inter",system-ui,sans-serif); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.deck .slide .eyebrow::before{content:""; width:calc(var(--u)*.55); height:calc(var(--u)*.55); border-radius:50%; background:var(--a); box-shadow:0 0 calc(var(--u)*.8) var(--a)}
.deck .slide .lede{font-size:calc(var(--u)*2.1); line-height:1.38; color:var(--muted); max-width:30em; letter-spacing:-.012em}
.deck .slide .caption{font-size:calc(var(--u)*1.5); color:var(--muted); max-width:44em}
.deck ul,.deck ol{padding:0; margin:0; max-width:none}
.deck li{margin:0}

/* ---------- title ---------- */
.deck .slide[data-type="title"]{gap:calc(var(--u)*2.2)}
.deck .slide[data-type="title"]{background:radial-gradient(48vw 48vw at 92% 112%, color-mix(in srgb,var(--a) 20%,transparent), transparent 72%)}
.deck .slide[data-type="title"] h1{max-width:15em}

/* ---------- scene ---------- */
.deck .slide[data-type="scene"] > p{
  font-size:calc(var(--u)*2.2); line-height:1.42; letter-spacing:-.012em; color:var(--ink); max-width:34em;
  background:var(--surface); border:1px solid var(--line); border-left:calc(var(--u)*.4) solid var(--a);
  border-radius:calc(var(--u)*1.2); padding:calc(var(--u)*2) calc(var(--u)*2.6);
}

/* ---------- idea ---------- */
.deck .slide[data-type="idea"] > p{font-size:calc(var(--u)*2.7); line-height:1.3; letter-spacing:-.02em; font-weight:500; color:var(--ink); max-width:24em}
.deck .slide[data-type="idea"] > ul{list-style:none; display:grid; gap:calc(var(--u)*1.1); max-width:28em}
.deck .slide[data-type="idea"] > ul > li{position:relative; padding-left:calc(var(--u)*2.2); font-size:calc(var(--u)*2.4); line-height:1.3; letter-spacing:-.018em; font-weight:500}
.deck .slide[data-type="idea"] > ul > li::before{content:""; position:absolute; left:0; top:.5em; width:calc(var(--u)*.9); height:calc(var(--u)*.9); border-radius:calc(var(--u)*.25); background:var(--a)}

/* ---------- compare ---------- */
.deck .slide table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:calc(var(--u)*1.65); line-height:1.3;
  background:var(--surface); border:1px solid var(--line-2); border-radius:calc(var(--u)*1.2); overflow:hidden;
}
.deck .slide th,.deck .slide td{padding:calc(var(--u)*.85) calc(var(--u)*1.5); text-align:left; vertical-align:top; border:0; border-top:1px solid var(--line)}
.deck .slide thead th,.deck .slide tr:first-child > th{border-top:0}
body:not(#v2) .deck .slide thead th{background:var(--surface-2); color:var(--heading); font:600 1em/1.3 var(--v2-font,"Inter",system-ui,sans-serif); letter-spacing:-.006em; text-transform:none; white-space:normal}
.deck .slide tbody th,.deck .slide td:first-child{color:var(--heading); font-weight:600}
.deck .slide td{color:var(--ink)}
.deck .slide tbody tr:nth-child(even) td,.deck .slide tbody tr:nth-child(even) th{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}

/* ---------- diagram ---------- */
.deck .slide[data-type="diagram"] svg{flex:0 1 auto; min-height:0; width:100%; max-width:100%; height:auto; display:block}
.deck .slide svg .d-box{fill:var(--surface); stroke:var(--line-2); stroke-width:2}
.deck .slide svg .d-box-a{fill:color-mix(in srgb,var(--a) 12%,var(--surface)); stroke:var(--a); stroke-width:2}
.deck .slide svg .d-box-ok{fill:var(--ok-tint); stroke:var(--ok); stroke-width:2}
.deck .slide svg .d-box-warn{fill:var(--warn-tint); stroke:var(--warn); stroke-width:2}
.deck .slide svg .d-line{stroke:var(--muted); stroke-width:3; fill:none}
.deck .slide svg .d-arrow{fill:var(--muted)}
.deck .slide svg .d-text{fill:var(--heading); font-family:var(--v2-head,"Inter Tight","Inter",system-ui,sans-serif); font-weight:600; font-size:32px}
.deck .slide svg .d-sub{fill:var(--muted); font-family:var(--v2-font,"Inter",system-ui,sans-serif); font-weight:500; font-size:28px}

/* ---------- quiz ---------- */
.deck .slide[data-type="quiz"]{gap:calc(var(--u)*1.7)}
.deck .slide .q-stem{font-size:calc(var(--u)*2.7); line-height:1.18; letter-spacing:-.02em; max-width:26em}
.deck .opts{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--u)*1.1); width:100%; align-items:stretch}
.deck .opts > li{
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:calc(var(--u)*1.1); align-content:start;
  background:var(--surface); border:1px solid var(--line-2); border-radius:calc(var(--u)*1.1);
  padding:calc(var(--u)*1.1) calc(var(--u)*1.4); font-size:calc(var(--u)*1.55); line-height:1.3;
  transition:opacity .35s ease, background-color .35s ease, border-color .35s ease;
}
.deck .opts .ltr{
  grid-row:1; width:calc(var(--u)*2.3); height:calc(var(--u)*2.3); border-radius:50%; display:grid; place-items:center;
  background:var(--surface-3); color:var(--muted); font:600 calc(var(--u)*1.2)/1 var(--v2-font,"Inter",system-ui,sans-serif); letter-spacing:0;
}
.deck .opts .otxt{grid-row:1; align-self:center; color:var(--heading); font-weight:500}
.deck .opts .why{grid-column:2; margin-top:calc(var(--u)*.6); color:var(--ink); font-size:calc(var(--u)*1.5); line-height:1.3}
.deck .opts .why b{font-weight:700; margin-right:.35em}
.deck .opts li.is-correct{background:var(--ok-tint); border-color:var(--ok)}
.deck .opts li.is-correct .ltr{background:var(--ok); color:var(--on-a)}
.deck .opts li.is-correct .why b{color:var(--ok)}
.deck .opts li.is-wrong{opacity:.6}
.deck .opts li.is-wrong .why b{color:var(--muted)}

/* ---------- cards ---------- */
.deck .slide[data-type="cards"] .cards{
  flex:1 1 auto; min-height:0; width:100%; margin:0; display:grid; gap:calc(var(--u)*1.2);
  grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); perspective:calc(var(--u)*90);
  max-height:calc(var(--u)*40);
}
.deck .cards[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.deck .fc{
  position:relative; display:block; cursor:pointer; min-height:0; transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.3,.7,.2,1); border-radius:calc(var(--u)*1.2);
}
.deck .fc.flipped{transform:rotateY(180deg)}
.deck .fc .front,.deck .fc .back{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border-radius:calc(var(--u)*1.2); padding:calc(var(--u)*1.2) calc(var(--u)*1.5); border:1px solid var(--line-2);
}
.deck .fc .front{
  align-items:center; text-align:center; background:var(--surface); color:var(--heading);
  font:600 calc(var(--u)*2.3)/1.12 var(--v2-head,"Inter Tight","Inter",system-ui,sans-serif); letter-spacing:-.025em;
}
.deck .fc .front::after{content:"\21BB"; position:absolute; right:calc(var(--u)*1); bottom:calc(var(--u)*.6); font:400 calc(var(--u)*1.3)/1 var(--v2-font,"Inter",system-ui,sans-serif); color:var(--faint)}
.deck .fc .back{
  transform:rotateY(180deg); align-items:flex-start; text-align:left; font-size:calc(var(--u)*1.5); line-height:1.3; color:var(--ink);
  background:color-mix(in srgb,var(--a) 9%,var(--surface)); border-color:var(--a-line);
}
.deck .fc:hover .front{border-color:var(--a-line)}

/* ---------- recap ---------- */
.deck .remember{list-style:none; counter-reset:rm; display:grid; gap:calc(var(--u)*1.1); width:100%; max-width:34em}
.deck .remember > li{
  counter-increment:rm; display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:calc(var(--u)*1.5);
  background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--u)*1.2); padding:calc(var(--u)*1.2) calc(var(--u)*1.6);
  font-size:calc(var(--u)*2); line-height:1.3; letter-spacing:-.015em; font-weight:500; color:var(--heading);
}
.deck .remember > li::before{
  content:counter(rm); width:calc(var(--u)*2.8); height:calc(var(--u)*2.8); border-radius:50%; display:grid; place-items:center;
  background:var(--a); color:var(--on-a); font:600 calc(var(--u)*1.4)/1 var(--v2-font,"Inter",system-ui,sans-serif); letter-spacing:0;
}

/* ---------- link on the last slide ---------- */
.deck .pr-next{
  display:inline-flex; align-items:center; gap:calc(var(--u)*.8); margin-top:calc(var(--u)*.6);
  background:var(--a); color:var(--on-a); text-decoration:none; font:600 calc(var(--u)*1.8)/1 var(--v2-head,"Inter Tight","Inter",system-ui,sans-serif);
  padding:calc(var(--u)*1.1) calc(var(--u)*2); border-radius:calc(var(--u)*.9); letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-a) 30%,transparent), 0 0 calc(var(--u)*2) color-mix(in srgb,var(--a) 28%,transparent);
  transition:filter .15s, transform .15s;
}
.deck .pr-next:hover{filter:brightness(1.08); transform:translateY(-1px)}
.deck .pr-next svg{width:calc(var(--u)*1.5); height:calc(var(--u)*1.5); fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.deck .pr-next.is-home{background:var(--btn,var(--surface-2)); color:var(--btn-ink,var(--ink)); box-shadow:inset 0 1px 0 var(--btn-hi,transparent); border:1px solid var(--btn-edge,var(--line-2))}

/* ---------- focus ---------- */
.deck .fc:focus-visible,.deck a:focus-visible,.pr-top :focus-visible,.pr-bot :focus-visible{outline:3px solid var(--a); outline-offset:3px; border-radius:calc(var(--du)*1)}
.deck .fc:focus-visible{outline-offset:4px}

/* ---------- chrome (top bar, bottom bar, keys popover) ---------- */
.pr-top,.pr-bot{
  --cs:max(calc(var(--du)*1.05),13px);
  position:fixed; left:0; right:0; z-index:5; display:flex; align-items:center; gap:calc(var(--du)*1);
  height:max(5vh,40px); padding:0 2.6vw; margin:0; background:none; border:0; font:500 var(--cs)/1.2 var(--v2-font,"Inter",system-ui,sans-serif); color:var(--muted);
  transition:opacity .35s ease;
}
.pr-top{top:0; justify-content:space-between}
.pr-bot{bottom:0}
.pr-brand{display:flex; align-items:center; gap:calc(var(--du)*.9); min-width:0; flex:1 1 auto}
.pr-top .pr-brand img{max-width:none; height:max(calc(var(--du)*1.9),22px); width:auto}
.pr-brand img.logo-light,.pr-brand img.logo-dark{display:block}
.pr-brand img.logo-dark{display:none}
:root[data-theme="dark"] .pr-brand img.logo-dark{display:block}
:root[data-theme="dark"] .pr-brand img.logo-light{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pr-brand img.logo-dark{display:block}
  :root:not([data-theme="light"]) .pr-brand img.logo-light{display:none}
}
.pr-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-weight:500}
.pr-links{display:flex; align-items:center; gap:calc(var(--du)*.7); flex:0 0 auto}

.pr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:max(calc(var(--du)*2.3),30px); padding:0 .9em;
  background:var(--btn,var(--surface-2)); color:var(--btn-ink,var(--ink)); border:1px solid var(--btn-edge,var(--line-2)); border-radius:8px;
  box-shadow:inset 0 1px 0 var(--btn-hi,transparent), var(--btn-shadow,none); font:500 var(--cs)/1 var(--v2-font,"Inter",system-ui,sans-serif);
  cursor:pointer; text-decoration:none; white-space:nowrap; transition:filter .15s;
}
.pr-btn:hover{filter:brightness(1.08); color:var(--btn-ink,var(--ink))}
.pr-btn:active{filter:brightness(.94)}
.pr-btn[disabled]{opacity:.4; cursor:default; filter:none}
.pr-btn.icon{padding:0; width:max(calc(var(--du)*2.3),30px)}
.pr-btn svg{width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}

.pr-count{font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; min-width:4.6em; text-align:center}
.pr-progress{flex:1 1 auto; height:max(.7vh,6px); background:var(--well,var(--surface-2)); border:1px solid var(--line); border-radius:999px; overflow:hidden}
.pr-bar{height:100%; width:0; background:var(--a); border-radius:999px; transition:width .35s ease}
.pr-timer{font-variant-numeric:tabular-nums; color:var(--muted); min-width:9.2em; text-align:right; white-space:nowrap}
.pr-timer[hidden]{display:block; visibility:hidden}
.pr-timer .pr-t-el{color:var(--ink); font-weight:600}
.pr-timer.is-over .pr-t-el{color:var(--warn)}

.pr-keys{
  position:fixed; right:2.6vw; bottom:max(6.6vh,52px); z-index:6; width:min(32em,92vw); font-size:var(--cs,14px);
  --cs:max(calc(var(--du)*1.05),13px); font-family:var(--v2-font,"Inter",system-ui,sans-serif);
  background:var(--surface); color:var(--ink); border:1px solid var(--line-2); border-radius:14px; padding:1.1em 1.3em 1.2em;
  box-shadow:0 18px 50px color-mix(in srgb,var(--heading) 22%,transparent);
}
.pr-keys[hidden]{display:none}
.pr-keys h2{margin:0 0 .7em; font:600 .8em/1 var(--v2-font,"Inter",system-ui,sans-serif); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.pr-keys dl{display:grid; grid-template-columns:auto 1fr; gap:.55em 1.2em; margin:0}
.pr-keys dt{margin:0; display:flex; gap:.35em; flex-wrap:wrap}
.pr-keys dd{margin:0; color:var(--muted)}
.pr-keys kbd{font:600 .85em/1 var(--v2-font,"Inter",system-ui,sans-serif); background:var(--surface-2); color:var(--heading); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px; padding:.3em .55em}

.pr-live{position:fixed; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Chrome that is not a slide hides itself in full screen after a few idle seconds. */
html.pr-fs.pr-idle .pr-top,html.pr-fs.pr-idle .pr-bot{opacity:0; pointer-events:none}
html.pr-fs.pr-idle,html.pr-fs.pr-idle .deck{cursor:none}
html.pr-fs.pr-idle .pr-keys{display:none}

@media (max-width:760px){
  .pr-title,.pr-timer .pr-t-tot,.pr-btn .lbl{display:none}
  .pr-timer{min-width:3.4em}
}
@media (prefers-reduced-motion:reduce){
  .deck,.deck *,.pr-top,.pr-top *,.pr-bot,.pr-bot *,.pr-keys{animation:none!important; transition:none!important}
}