/* inside.hoortrend.com — same family as the portfolio: warm dark background, cream text, three typefaces. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --bg:#11110f; --surface:#161613; --surface2:#1c1c18; --line:#2b2a25; --line2:#3d3c35;
  --text:#ebe6da; --muted:#a39e91; --faint:#706c62; --ink:#11110f;
  --ok:#7fc08a; --warn:#e0b050; --bad:#e0705c; --host:#9db4c9; --alt:#d9884a;
  --serif:"Newsreader",Georgia,serif; --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --nav:56px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--text)}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.2}
h2{font:400 26px/1.15 var(--serif);letter-spacing:-.01em}
h3{font:600 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
h4{font:600 12px/1.3 var(--sans);color:var(--muted);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.05em}
.mono{font-family:var(--mono)} .small{font-size:13px} .muted{color:var(--muted)} .dim{color:var(--faint)}
.bad-t{color:var(--bad)} .warn-t{color:var(--warn)}
[hidden]{display:none!important}
.empty{color:var(--muted);font-size:14px;margin:8px 0}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:8px;z-index:99;background:var(--text);color:var(--ink);padding:6px 10px}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3vw,32px)}

/* ------------------------------------------------------------------ navigation */
.nav{position:sticky;top:0;z-index:40;height:var(--nav);display:flex;align-items:center;gap:14px;padding:0 clamp(16px,3vw,32px);background:var(--bg);border-bottom:1px solid var(--line)}
.brand{font:400 21px var(--serif);text-decoration:none;white-space:nowrap}
.brand span{color:var(--faint);margin:0 4px} .brand em{font-style:italic;color:var(--muted)}
.live{display:inline-flex;align-items:center;gap:8px;font:400 12px var(--mono);color:var(--muted);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.live i{width:8px;height:8px;background:var(--faint);flex:none}
.live.on i{background:var(--ok);animation:beat 2s infinite} .live.off i{background:var(--bad)}
@keyframes beat{50%{opacity:.35}}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;gap:6px;background:none;color:var(--text);border:1px solid var(--line2);border-radius:2px;padding:6px 12px;font:500 13px var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover:not(:disabled){background:var(--text);color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.btn.primary{background:var(--text);color:var(--ink);border-color:var(--text)} .btn.primary:hover{background:transparent;color:var(--text)}
.btn.small{padding:3px 9px;font-size:12px}
.lang{font-family:var(--mono)}
@media(max-width:760px){#splitBtn{display:none} .live span{display:none} .btn.primary{padding:6px 10px}}
@media(max-width:420px){.brand em,.brand span{display:none}}

/* ------------------------------------------------------------------ split: the playground on the left */
.layout{display:block}
body.split .layout{display:grid;grid-template-columns:minmax(420px,42%) minmax(0,1fr)}
.outside{position:sticky;top:var(--nav);height:calc(100vh - var(--nav));border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--surface)}
.outside-h{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.outside-h .btn{margin-left:auto}
.outside iframe{flex:1;width:100%;border:0;background:var(--bg)}
.inside{min-width:0;container-type:inline-size}
/* /?embed=1, shown by the portfolio next to its playground: the inside alone (the portfolio sets the language) */
.embed #playLink,.embed #splitBtn,.embed #langBtn,.embed .outside,.embed .kicker,.embed .hero .lead,.embed .foot{display:none!important}
.embed .hero{padding-top:18px}
.embed .hero h1{font-size:30px;max-width:none;margin-bottom:12px}

/* ------------------------------------------------------------------ hero */
.hero{padding-top:clamp(28px,5vw,56px);padding-bottom:8px}
.kicker{font:400 12px var(--mono);color:var(--muted);margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em}
.hero h1{font:400 clamp(32px,5vw,52px)/1.05 var(--serif);letter-spacing:-.02em;max-width:18ch}
.lead{max-width:78ch;color:var(--muted);font-size:16.5px;margin:16px 0 18px}
.latest{border-left:3px solid var(--line2);padding:8px 12px;background:var(--surface);font-size:14px;max-width:78ch}
.latest.open{border-left-color:var(--warn)} .latest a{margin-left:6px}
.sec{padding-top:clamp(24px,4vw,40px)}
.sec-h{margin-bottom:14px} .sec-h p{color:var(--muted);max-width:90ch;margin:6px 0 0}

/* ------------------------------------------------------------------ the machinery */
.machine{position:relative;display:grid;gap:14px;grid-template-columns:200px minmax(0,1fr) 250px;grid-template-areas:"out cp svc" "out node svc";
  padding:14px;border:1px solid var(--line);background:linear-gradient(var(--surface),var(--bg))}
.wires{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:visible}
.zone{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;min-width:0}
.zone>h3{margin-bottom:2px}
.z-out{grid-area:out} .z-cp{grid-area:cp} .z-svc{grid-area:svc} .z-node{grid-area:node;border:1px dashed var(--line2);padding:10px}
.cp-row,.node-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.comp{--ac:var(--text);position:relative;background:var(--surface2);border:1px solid var(--line2);border-radius:3px;padding:8px 10px;min-width:0;transition:box-shadow .3s,border-color .3s}
.comp b{display:block;font:500 13px/1.3 var(--mono);overflow-wrap:break-word}
.comp>span{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.comp.api{border-color:var(--text);text-align:center;padding:12px}
.comp.derived{border-style:dashed}
.comp.hit,.podc.hit{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac),0 0 18px -2px var(--ac)}
.comp.focus{outline:2px solid var(--ac);outline-offset:3px}
.comp.errhit{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad),0 0 16px -2px var(--bad)}
/* what a component just did: its subtitle line speaks for 2.6 s, in its colour (no layout shift) */
.comp>span.say{color:var(--ac);font:500 12px/1.35 var(--mono);animation:say .25s ease-out}
.comp>span.say.bad{color:var(--bad)}
@keyframes say{from{opacity:0;transform:translateY(3px)}}
.podc .pc-say{position:absolute;right:6px;top:-9px;background:var(--ac);color:var(--ink);font:500 10.5px/1.3 var(--mono);padding:1px 6px;border-radius:2px;
  white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s;pointer-events:none}
.podc .pc-say.on{opacity:1} .podc .pc-say.bad{background:var(--bad)}
.eplist{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.ep{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;font-size:11.5px;border-left:3px solid var(--ok);padding-left:6px}
.ep b{flex:none;font-size:12px} .ep span{color:var(--muted);white-space:nowrap} .ep.warn{border-left-color:var(--warn)} .ep.dying{border-left-color:var(--faint);opacity:.7}
.lg{display:inline-block;width:18px;height:2px;margin:0 6px 3px 10px;vertical-align:middle;background:var(--text)}
.lg.dash{background:none;border-top:2px dashed var(--muted)} .lg.dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.legend{margin-top:8px}
/* actor colours: the same in the diagram, the story and the feed */
[data-c="portfolio"],.a-portfolio{--ac:#d9884a} [data-c="visitor"],.a-admin,.a-other{--ac:#a39e91} [data-c="ci"],.a-ci{--ac:#a3a0ff}
[data-c="apiserver"],.a-apiserver{--ac:#ebe6da} [data-c="scheduler"],.a-scheduler{--ac:#c9a0dc}
[data-c="deploy-controller"],.a-deploy-controller{--ac:#9db4c9} [data-c="rs-controller"],.a-rs-controller{--ac:#7fb3c9}
[data-c="eps-controller"],[data-c="endpoints"],.a-eps-controller{--ac:#8fc9b5} [data-c="kubelet"],.a-kubelet{--ac:#e0b050}
[data-c="runtime"],.a-runtime{--ac:#c9b07f} [data-c="kernel"],.a-kernel{--ac:#e0705c} .a-app{--ac:#7fc08a}
[data-c="probe"],[data-c="service"],.a-probe{--ac:#b8c97f} [data-c="prometheus"],.a-prometheus{--ac:#e08a5c} [data-c="kube-proxy"],.a-kube-proxy{--ac:#8fc9b5}
.wire{fill:none;stroke:var(--line2);stroke-width:1.2}
.wire.derived{stroke-dasharray:4 4} .wire.scrape{stroke-dasharray:2 5} .wire.http{stroke:#d9884a66}
.trail{fill:none;stroke:#ebe6da;stroke-width:1.6;opacity:.45;transition:opacity .6s} .trail.fade{opacity:0}
.trail.derived{stroke-dasharray:4 4} .trail.http{stroke:#d9884a} .trail.probe{stroke-width:1;opacity:.25} .trail.err{stroke:var(--bad)}
.spark{fill:#ebe6da;filter:drop-shadow(0 0 4px #ebe6da)} .spark.http{fill:#d9884a} .spark.err{fill:var(--bad)} .spark.probe{filter:none}
/* pods */
.pods{display:flex;flex-wrap:wrap;gap:10px;min-height:96px;align-content:flex-start}
.podc{--pc:var(--ok);--ac:var(--pc);position:relative;flex:0 1 150px;min-width:122px;background:var(--surface2);border:1px solid var(--line2);border-left:4px solid var(--pc);
  border-radius:3px;padding:8px 10px 6px;cursor:pointer;transition:opacity .9s,transform .5s,border-color .3s,box-shadow .3s}
.podc .pc-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.podc .pc-h b{font:500 15px var(--mono)} .podc .tag{font:400 10.5px var(--mono);color:var(--faint)}
.podc .pc-s{font-size:12px;margin-top:2px} .podc .pc-m{font-size:11.5px;color:var(--muted)}
.podc .pc-bar{height:3px;background:var(--line);margin-top:6px} .podc .pc-bar i{display:block;height:100%;width:0;background:var(--pc);transition:width .25s}
.podc .pc-hits{display:flex;gap:3px;height:6px;margin-top:5px;overflow:hidden}
.podc .pc-hits i{width:6px;height:6px;border-radius:50%;background:var(--pc);animation:hitfade 1.6s forwards}
@keyframes hitfade{0%{transform:scale(1.6)}100%{opacity:0}}
.podc.ok .pc-s{color:var(--ok)} .podc.warn .pc-s{color:var(--warn)} .podc.bad{background:#2a1714} .podc.bad .pc-s{color:var(--bad)}
.podc.dying{opacity:.72} .podc.dying .pc-s{color:var(--muted)}
.podc.sel{outline:1px solid var(--text);outline-offset:2px}
.podc.born{animation:born .7s ease-out}
@keyframes born{from{transform:scale(.6);opacity:0}}
.podc.gone{opacity:0;transform:scale(.85)} .podc.gone .pc-h b{text-decoration:line-through}
.podc.warnhit{box-shadow:0 0 0 1px var(--warn),0 0 14px -2px var(--warn)}
@container (max-width:1060px){
  .machine{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"out svc" "cp cp" "node node"}
}
@container (max-width:760px){
  .machine{grid-template-columns:minmax(0,1fr);grid-template-areas:"out" "cp" "node" "svc";padding:10px}
  .wires{display:none} .cp-row,.node-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .z-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .z-out>h3{grid-column:1/-1}
  .z-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .z-svc>h3{grid-column:1/-1} .z-svc .eps{grid-column:1/-1}
  .podc{flex:1 1 130px}
}

/* ------------------------------------------------------------------ cards */
.grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
@container (max-width:980px){.grid2{grid-template-columns:minmax(0,1fr)}}
.col{display:flex;flex-direction:column;gap:18px;min-width:0}
.card{background:var(--surface);border:1px solid var(--line);padding:16px;min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.card-h h2{font-size:22px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
:where(.chip){--ac:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid color-mix(in srgb,var(--ac) 55%,transparent);color:var(--ac);
  background:color-mix(in srgb,var(--ac) 10%,transparent);border-radius:2px;padding:1px 6px;font:500 11px/1.5 var(--mono);white-space:nowrap}
button.chip{cursor:pointer} button.chip:not(.on){opacity:.5}
.sw{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted)} .sw.err{background:var(--bad)}
.badge{font:500 12px var(--mono);padding:2px 8px;border-radius:2px;border:1px solid var(--line2)}
.badge.ok{color:var(--ok);border-color:#7fc08a66} .badge.warn{color:var(--warn);border-color:#e0b05066} .badge.bad{color:var(--bad);border-color:#e0705c66}

/* story */
.st-nav{display:flex;align-items:center;gap:8px}
.st-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:6px}
.st-kind{font:400 20px var(--serif)}
.marks{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.mark{font-size:12.5px;padding:3px 8px;border:1px solid var(--line2);border-radius:2px;background:var(--surface2)}
.mark.ok{border-color:#7fc08a66} .mark.bad{border-color:#e0705c88;color:#f0a090} .mark.warn{border-color:#e0b05066} .mark.muted{color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;max-height:560px;overflow:auto;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:76px auto minmax(0,1fr);gap:10px;align-items:baseline;padding:6px 4px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13.5px;line-height:1.45}
.step:hover,.step.on{background:var(--surface2)} .step.on{box-shadow:inset 3px 0 0 var(--text)}
.step.minor{color:var(--muted);font-size:12.5px} .step.warn .st-x{color:#e9c87a}
.st-t{color:var(--muted);font-size:12px;text-align:right} .times{color:var(--warn);font-family:var(--mono)}
.st-tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:12px}
.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted)}
.st-hist{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.hchip{background:none;border:1px solid var(--line2);color:var(--muted);font:400 12px var(--sans);padding:3px 8px;border-radius:2px;cursor:pointer}
.hchip.on{color:var(--text);border-color:var(--text)} .hchip.open{border-color:var(--warn)} .hchip.unsettled{border-color:var(--bad)}
.newer{margin-bottom:10px;border-color:var(--warn);color:var(--warn)}
.lesson{margin:0 0 12px;padding:8px 12px;border-left:3px solid var(--host);background:var(--surface2);font-size:14px} .lesson b{color:var(--host);font-weight:500}
@media(max-width:560px){.step{grid-template-columns:62px minmax(0,1fr)} .step .chip{grid-column:2;justify-self:start} .step .st-x{grid-column:1/-1}}

/* traffic */
#tCanvas{width:100%;height:120px;display:block;background:var(--bg);border:1px solid var(--line)}
.t-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0;font-size:12.5px}
.tl{display:inline-flex;align-items:center;gap:6px} .tl.bad{color:var(--bad)}

/* pod inspector */
.kv{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);word-break:break-all}
.life{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.life li{border-top:3px solid var(--line2);padding-top:4px;font-size:11px;min-width:0} .life li.done{border-top-color:var(--ok)}
.life b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .life span{color:var(--muted)}
.csm{display:flex;align-items:center;flex-wrap:wrap;gap:6px} .csm i{color:var(--faint);font-style:normal}
.cs{border:1px solid var(--line2);padding:3px 9px;font-size:12.5px;border-radius:2px;color:var(--muted)}
.cs small{display:block;font:400 11px var(--mono)}
.cs.on{color:var(--ink);font-weight:500} .cs.on.running{background:var(--ok)} .cs.on.waiting{background:var(--warn)} .cs.on.terminated{background:var(--bad)}
.ladder{display:flex;gap:4px;flex-wrap:wrap} .ladder span{font:400 12px var(--mono);border:1px solid var(--line2);padding:2px 7px;color:var(--muted)}
.ladder span.on{background:var(--warn);color:var(--ink);border-color:var(--warn)}
.logs{background:var(--bg);border:1px solid var(--line);padding:8px;margin:0;max-height:230px;overflow:auto;font:400 12px/1.5 var(--mono);white-space:pre-wrap;word-break:break-word}
.logs .lt{color:var(--faint)}

/* feed */
.f-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feed{max-height:640px;overflow:auto;border-top:1px solid var(--line)}
.feed ol{list-style:none;margin:0;padding:0}
.fr{display:grid;grid-template-columns:96px 74px auto minmax(0,1fr);gap:8px;align-items:baseline;padding:5px 2px;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.45}
.fr.new{animation:rowin 1.2s} @keyframes rowin{from{background:#ebe6da1a}}
.fr.warn .fx{color:#e9c87a} .fr.bad .fx{color:var(--bad)}
.ft{color:var(--faint);font-size:11.5px} .src{font:400 11px var(--mono);color:var(--muted)}
@media(max-width:620px){.fr{grid-template-columns:84px minmax(0,1fr)} .fr .src{display:none} .fr .chip{justify-self:start} .fr .fx{grid-column:1/-1}}

/* guardrails and monitoring */
.qrow{display:grid;grid-template-columns:120px minmax(0,1fr) 110px;gap:10px;align-items:center;margin:4px 0}
.qbar{height:6px;background:var(--line)} .qbar i{display:block;height:100%;width:0;background:var(--host)}
.btnmap,.rules{list-style:none;margin:0;padding:0}
.btnmap li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px}
.btnmap span{color:var(--muted)}
.rules li{padding:3px 0;font-size:13px;border-bottom:1px solid var(--line)} .rules li .sw{margin-right:6px}
@media(max-width:520px){.btnmap li{grid-template-columns:minmax(0,1fr)} .qrow{grid-template-columns:minmax(0,1fr) 90px} .qbar{grid-column:1/-1;grid-row:2}}

/* how it works */
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.how-c{border:1px solid var(--line);padding:14px;background:var(--surface)} .how-c p{margin:8px 0 0;color:var(--muted);font-size:14px}
.how-c.limits{border-color:#e0b05055}
@container (max-width:900px){.how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:560px){.how-grid{grid-template-columns:minmax(0,1fr)}}
.foot{padding:36px 0 48px;color:var(--muted);font-size:13px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--ink);padding:8px 14px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s}
.toast.on{opacity:1}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important} html{scroll-behavior:auto}}