/* Kada dev blog. Tokens are the product page's Nordic set (web/public/welcome/index.html). */

@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-latin-opsz-normal.woff2) format("woff2-variations"),url(/fonts/newsreader-latin-opsz-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-latin-opsz-italic.woff2) format("woff2-variations"),url(/fonts/newsreader-latin-opsz-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  color-scheme:light;
  --snow:#F4F5F1;
  --paper:#FEFFFC;
  --slate:#283D48;
  --night:#14232D;
  --fjord:#365E70;
  --frost:#A8CAD1;
  --sage:#A3B8A7;
  --sage-control:#406859;
  --birch:#E7DFD0;
  --copper:#946447;
  --recording:#A94850;
  --ink:var(--slate);
  --ink-2:#526673;
  --line:color-mix(in srgb,var(--fjord) 18%,var(--snow));
  --fill:color-mix(in srgb,var(--frost) 18%,var(--snow));
  --font-ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-text:"Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --measure:40rem;
}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--snow);color:var(--ink);font:400 15px/1.5 var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img,video,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--fjord);outline-offset:3px;border-radius:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:12px;z-index:9;padding:8px 14px;background:var(--paper);border:1px solid var(--line)}

.wrap{max-width:1104px;margin:0 auto;padding:0 40px}
.wrap-text{max-width:calc(var(--measure) + 48px);margin:0 auto;padding:0 24px}

/* Header and footer: the product page's bar, quieter. */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;border-bottom:1px solid var(--line)}
.site-logo{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:500;letter-spacing:-.6px;text-decoration:none}
.site-logo img{width:26px;height:26px;border-radius:7px}
.site-section{font:400 12px/1 var(--font-mono);letter-spacing:.02em;color:var(--ink-2);padding-left:10px;margin-left:2px;border-left:1px solid var(--line);align-self:center}
.site-links{display:flex;align-items:center;gap:22px;font-size:13px}
.site-links a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--fjord);min-height:44px}
.site-links svg{width:14px;height:14px}
.site-links a:hover,.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}

.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding-top:22px;padding-bottom:40px;margin-top:88px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.site-footer a{text-decoration:none}
.maker a{color:var(--fjord)}

/* Masthead */
.eyebrow{font:500 12px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--copper)}
.masthead{padding-top:76px;padding-bottom:40px}
.masthead-title{font:400 clamp(44px,7.4vw,84px)/.98 var(--font-text);font-variation-settings:"opsz" 72;letter-spacing:-.025em;margin-top:18px;max-width:12ch;color:var(--night)}
.masthead-lede{font:400 italic 22px/1.45 var(--font-text);font-variation-settings:"opsz" 18;color:var(--ink);max-width:36rem;margin-top:28px}
.masthead-sign{font:400 13px/1 var(--font-mono);color:var(--ink-2);margin-top:18px}
.masthead-sign::before{content:"";display:inline-block;width:22px;height:1px;background:var(--copper);vertical-align:middle;margin-right:10px}

.ridge{width:100%;height:46px;margin-top:8px}
.ridge-back{fill:color-mix(in srgb,var(--frost) 42%,var(--snow))}
.ridge-front{fill:color-mix(in srgb,var(--fjord) 22%,var(--snow))}

/* Table of contents */
.toc{padding-top:8px}
.toc-h{font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:26px 0 6px}
.toc-list{list-style:none;padding:0}
.toc-item{display:grid;grid-template-columns:120px minmax(0,1fr);gap:28px;padding:30px 0 32px;border-top:1px solid var(--line)}
.toc-item:last-child{border-bottom:1px solid var(--line)}
.toc-date{display:flex;flex-direction:column;gap:4px;font:400 13px/1.2 var(--font-mono);color:var(--ink-2);padding-top:9px}
.toc-date span:first-child{color:var(--ink)}
.toc-title{font:400 34px/1.12 var(--font-text);font-variation-settings:"opsz" 40;letter-spacing:-.012em;color:var(--night);max-width:26ch}
.toc-title a{text-decoration:none;background:linear-gradient(var(--copper),var(--copper)) 0 100%/0 1px no-repeat;transition:background-size .25s ease}
.toc-title a:hover{background-size:100% 1px}
.toc-dek{font:400 18px/1.5 var(--font-text);font-variation-settings:"opsz" 16;color:var(--ink);margin-top:10px;max-width:38rem}
.toc-meta{font:400 12px/1 var(--font-mono);color:var(--ink-2);margin-top:14px}

/* Post */
.post-head{padding-top:44px;padding-bottom:34px}
.back{font-size:13px}
.back a{text-decoration:none;color:var(--fjord)}
.back a:hover{text-decoration:underline;text-underline-offset:4px}
.post-meta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:42px;font:400 12.5px/1.4 var(--font-mono);color:var(--ink-2)}
.post-meta span+span::before{content:"·";padding:0 9px;color:var(--line)}
.post-title{font:400 clamp(38px,6vw,58px)/1.04 var(--font-text);font-variation-settings:"opsz" 60;letter-spacing:-.02em;color:var(--night);margin-top:14px}
.post-dek{font:400 italic 22px/1.45 var(--font-text);font-variation-settings:"opsz" 18;color:var(--ink-2);margin-top:18px}
.post-dek a{color:var(--fjord)}

.post-body{font:400 19.5px/1.62 var(--font-text);font-variation-settings:"opsz" 14;color:var(--ink);padding-top:30px}
.post-body>*+*{margin-top:1.05em}
.post-body h2{font:400 29px/1.2 var(--font-text);font-variation-settings:"opsz" 32;letter-spacing:-.01em;color:var(--night);margin-top:1.9em;position:relative}
.post-body h3{font:600 15px/1.3 var(--font-ui);letter-spacing:.005em;color:var(--night);margin-top:1.8em}
.post-body h2+*,.post-body h3+*{margin-top:.6em}
.anchor{position:absolute;left:-1.1em;width:1em;color:var(--frost);text-decoration:none;opacity:0;transition:opacity .15s}
.post-body h2:hover .anchor,.anchor:focus{opacity:1}
.post-body h3 .anchor{display:none}
.post-body a{color:var(--fjord);text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--fjord) 45%,transparent)}
.post-body a:hover{text-decoration-color:currentColor}
.post-body strong{font-weight:600}
.post-body em{font-style:italic}
.post-body ul,.post-body ol{padding-left:1.25em}
.post-body li+li{margin-top:.4em}
.post-body li::marker{color:var(--copper)}
.post-body ol li::marker{font:400 .8em var(--font-mono)}
.post-body blockquote{border-left:2px solid var(--copper);padding:.1em 0 .1em 1.1em;color:var(--ink-2);font-style:italic}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.post-body code{font:400 .8em/1 var(--font-mono);background:var(--fill);border:1px solid var(--line);border-radius:4px;padding:.12em .36em;overflow-wrap:anywhere}
.post-body pre{font:400 13.5px/1.6 var(--font-mono);background:var(--paper);border:1px solid var(--line);border-left:2px solid var(--fjord);border-radius:4px;padding:16px 18px;overflow-x:auto}
.post-body pre code{font:inherit;background:none;border:0;padding:0;overflow-wrap:normal}
.post-body table{border-collapse:collapse;width:100%;font:400 14px/1.45 var(--font-ui)}
.post-body th,.post-body td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid var(--line)}
.post-body th{font:500 11.5px/1.3 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.post-body td:first-child{white-space:nowrap;font-family:var(--font-mono);font-size:13px;color:var(--ink-2)}
.signoff{font:400 italic 22px/1 var(--font-text);color:var(--ink-2);margin-top:1.6em!important}
.signoff::before{content:"— "}

/* Figures sit wider than the text column when there is room. */
.post-body figure{width:min(52rem,calc(100vw - 40px));position:relative;left:50%;transform:translateX(-50%);margin:2.1em 0}
.post-body figcaption{font:400 13px/1.5 var(--font-ui);color:var(--ink-2);margin-top:12px;max-width:var(--measure);margin-left:auto;margin-right:auto}
.post-body figcaption b{font-weight:500;color:var(--ink)}
.video-frame{background:var(--night);border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.video-frame video{width:100%;height:auto;aspect-ratio:16/9;background:var(--night)}
.chart{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:22px 24px 18px}
.chart svg{width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--font-ui);fill:var(--ink)}
.chart .mono{font-family:var(--font-mono)}
.chart .muted{fill:var(--ink-2)}
.chart .copper{fill:var(--copper)}
.chart .fjord{fill:var(--fjord)}
.chart .night{fill:var(--night)}
.chart .rule{stroke:var(--line);stroke-width:1}
.chart .axis{stroke:color-mix(in srgb,var(--fjord) 40%,var(--snow));stroke-width:1}
.chart .lane{fill:var(--fill)}
.chart .bar-fjord{fill:var(--fjord)}
.chart .bar-frost{fill:var(--frost)}
.chart .bar-sage{fill:var(--sage)}
.chart .bar-copper{fill:var(--copper)}
.chart .bar-recording{fill:var(--recording)}
.chart .stroke-fjord{stroke:var(--fjord);stroke-width:1.5;fill:none}
.chart .stroke-copper{stroke:var(--copper);stroke-width:1.5;fill:none}
.chart .stroke-recording{stroke:var(--recording);stroke-width:1.5;fill:none}
.chart .dash{stroke-dasharray:3 4}
.chart .box{fill:var(--snow);stroke:color-mix(in srgb,var(--fjord) 35%,var(--snow));stroke-width:1}
.chart .box-ok{fill:color-mix(in srgb,var(--sage) 30%,var(--paper));stroke:var(--sage-control);stroke-width:1}
.chart .box-bad{fill:color-mix(in srgb,var(--recording) 10%,var(--paper));stroke:var(--recording);stroke-width:1}
.chart .dot-fjord{fill:var(--fjord)}
.chart .dot-recording{fill:var(--recording)}

.app-card{display:flex;align-items:flex-start;gap:16px;margin-top:56px!important;padding-top:26px;padding-bottom:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 15px/1.55 var(--font-ui);color:var(--ink-2)}
.app-card img{width:44px;height:44px;border-radius:11px;flex:none}
.app-card a{color:var(--fjord)}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.pager a{display:flex;flex-direction:column;gap:6px;text-decoration:none;font:400 19px/1.3 var(--font-text);color:var(--night)}
.pager a span{font:400 11.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pager a:hover{color:var(--fjord)}
.pager-newer{text-align:right;align-items:flex-end}

.missing{padding-top:80px;min-height:50vh}
.missing .post-title{margin-top:18px}

@media (max-width:720px){
  .wrap{padding:0 20px}
  .wrap-text{padding:0 20px}
  .site-header{min-height:56px}
  .site-section{display:none}
  .site-links{gap:16px}
  .masthead{padding-top:48px;padding-bottom:28px}
  .masthead-lede{font-size:19.5px}
  .toc-item{grid-template-columns:1fr;gap:10px;padding:24px 0 26px}
  .toc-date{flex-direction:row;gap:6px;padding-top:0}
  .toc-title{font-size:28px}
  .toc-dek{font-size:17px}
  .post-head{padding-top:28px}
  .post-meta{margin-top:28px}
  .post-dek{font-size:19.5px}
  .post-body{font-size:18px}
  .post-body h2{font-size:25px}
  .anchor{display:none}
  .chart{padding:14px 12px 12px}
  .pager{grid-template-columns:1fr}
  .pager-newer{text-align:left;align-items:flex-start}
  .site-footer{margin-top:64px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}