/* Tacksheet sheet kit 1.8.0 - built-in style Studio (studio), on the none kit theme.
   Link it after the kit stylesheet with body data-tk-theme="none" data-tk-style="studio".
   Fonts: /kit/1.8.0/fonts/LICENSES-styles.txt. */
/* Studio: a design-studio portfolio. Off-white and ink, one acid accent, viewport-wide display type,
   (01) index numbers, a marquee band, case-study covers and metrics, a 12-column grid hint. */
@font-face{font-family:"Bricolage Grotesque";src:url(/kit/1.8.0/fonts/bricolage-grotesque-200-800.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/kit/1.8.0/fonts/instrument-serif-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/kit/1.8.0/fonts/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Geist";src:url(/kit/1.8.0/fonts/geist-100-900.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/kit/1.8.0/fonts/geist-mono-400-600.woff2) format("woff2");font-weight:400 600;font-display:swap}

body[data-tk-theme]{
  --st-paper:#F1EFEA;--st-ink:#0E0E0E;--st-acid:var(--studio-accent,#D7FF00);--st-acid-ink:var(--studio-accent-ink,#0E0E0E);--st-acid-hi:var(--studio-accent-on-dark,var(--st-acid));--st-grey:#5C5B57;--st-hair:rgba(14,14,14,.11);
  --st-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;--st-serif:"Instrument Serif","Times New Roman",serif;
  --st-sans:"Geist","Helvetica Neue",Arial,sans-serif;--st-mono:"Geist Mono",ui-monospace,monospace;
  --st-gut:clamp(.75rem,1.6vw,1.5rem);
  --tk-bg:#F1EFEA;--tk-bg-soft:#E6E3DC;--tk-fg:#0E0E0E;--tk-muted:#5C5B57;
  --tk-accent:#0E0E0E;--tk-accent-2:#0E0E0E;--tk-accent-ink:var(--st-acid-hi);--tk-accent-2-text:#0E0E0E;
  --tk-card:#F1EFEA;--tk-border:rgba(14,14,14,.16);--tk-rule:#0E0E0E;--tk-mark:rgba(14,14,14,.05);
  --tk-field:#F1EFEA;--tk-control:#0E0E0E;--tk-positive:#0E0E0E;--tk-negative:#0E0E0E;
  --tk-note:#0E0E0E;--tk-tip:#0E0E0E;--tk-warning:#0E0E0E;--tk-decision:#0E0E0E;--tk-risk:#0E0E0E;
  --tk-font-head:var(--st-display);--tk-font-body:var(--st-sans);--tk-font-mono:var(--st-mono);--tk-font-data:var(--st-mono);--tk-font-hand:var(--st-serif);
  --tk-head-weight:700;--tk-head-tracking:-.04em;--tk-head-leading:.92;
  --tk-size-body:1.0625rem;--tk-size-h1:clamp(3.4rem,14.4vw,17rem);--tk-size-h2:clamp(2.5rem,6.8vw,8.2rem);--tk-size-h3:1.9rem;
  --tk-radius:0px;--tk-chart-radius:0;--tk-grid:rgba(14,14,14,.09);--tk-shadow:none;--tk-lift:none;
  --tk-code-bg:#0E0E0E;--tk-code-fg:#E9E7E1;--tk-tok-k:var(--st-acid-hi);--tk-tok-s:#C9C6BE;--tk-tok-c:#8A8984;--tk-tok-n:var(--st-acid-hi);--tk-tok-f:#FFFFFF;
  --tk-c1:#0E0E0E;--tk-c2:#9C9A93;--tk-c3:#5C5B57;--tk-c4:#7E9600;--tk-c5:#C9C6BE;--tk-c6:#33332F;--tk-c7:#B3CC1F;--tk-c8:#76746E;
  --tk-ramp:#E6E3DC,#C9C6BE,#9C9A93,#5C5B57,#0E0E0E;
  --tk-film:normal;--tk-paper-obj:#F1EFEA;--tk-kraft:#0E0E0E;
  --tk-page-width:min(96vw,124rem);--tk-measure:40rem;
  overflow-x:clip;font-feature-settings:"ss01","cv11";
}
body[data-tk-theme] :where(:not(tk-screen *, tk-note *))::selection{background:var(--st-acid);color:var(--st-acid-ink)}
body[data-tk-theme] :focus-visible:where(:not(tk-screen *, tk-note *)){outline:2px solid #0E0E0E;outline-offset:3px;border-radius:0}

/* Reading progress: an ink rail with an acid fill. */
body[data-tk-theme] tk-progress:where(:not(tk-screen *, tk-note *)){height:6px;background:#0E0E0E}
body[data-tk-theme] tk-progress i:where(:not(tk-screen *, tk-note *)){background:var(--st-acid);color:var(--st-acid-ink)}

/* The page: a faint 12-column grid you can see, like a layout file left switched on. */
body[data-tk-theme] tk-page:where(:not(tk-screen *, tk-note *)){padding:0 clamp(1rem,2.6vw,2.5rem) 6rem;position:relative;
  background:linear-gradient(90deg,var(--st-hair) 1px,transparent 1px) 0 0/calc(100% / 12) 100% repeat-x content-box,
    linear-gradient(90deg,transparent calc(100% - 1px),var(--st-hair) calc(100% - 1px)) 0 0/100% 100% no-repeat content-box}
@media(max-width:640px){body[data-tk-theme] tk-page:where(:not(tk-screen *, tk-note *)){background-size:25% 100%,100% 100%;padding:0 1rem 4rem}}

/* ---------- Hero: a meta bar, the title at the width of the screen, a spinning badge ---------- */
body[data-tk-theme] tk-hero:where(:not(tk-screen *, tk-note *)){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gut);align-items:start;
  padding:0 0 clamp(2rem,5vw,4.5rem);margin:0 0 clamp(2rem,5vw,5rem);border-bottom:0}
body[data-tk-theme] tk-hero:where(:not(tk-screen *, tk-note *))::after{content:none}
body[data-tk-theme] tk-hero>*:where(:not(tk-screen *, tk-note *)){grid-column:1/-1;min-width:0}
/* The meta bar reads as one line of text (a flex row would scatter its date and code chips across the bar). */
body[data-tk-theme] tk-hero .tk-byline:where(:not(tk-screen *, tk-note *)){order:9;grid-row:4;grid-column:1/-1;display:block;
  margin:clamp(2rem,5vw,4rem) 0 0;padding:1rem 0 0;border-top:1px solid #0E0E0E;max-width:none;
  font:500 .8rem/1.5 var(--st-mono);letter-spacing:.06em;text-transform:uppercase;color:#0E0E0E}
body[data-tk-theme] tk-hero .tk-byline:where(:not(tk-screen *, tk-note *))::before{content:"\25CF";display:inline;width:auto;height:auto;background:none;margin-right:.7em}
body[data-tk-theme] tk-hero .tk-byline:where(:not(tk-screen *, tk-note *))::after{content:none}
body[data-tk-theme] tk-hero h1:where(:not(tk-screen *, tk-note *)){max-width:none}
body[data-tk-theme] tk-tape-title:where(:not(tk-screen *, tk-note *)){margin:clamp(1.5rem,4vw,3.5rem) 0 clamp(1.5rem,4vw,3.5rem);--tilt:0deg}
body[data-tk-theme] :is(tk-tape-title>:is(h1,h2,h3),tk-tape-title .tk-tape-line,tk-taped,tk-slip):where(:not(tk-screen *, tk-note *))::before,body[data-tk-theme] tk-taped:where(:not(tk-screen *, tk-note *))::after{content:none!important}
body[data-tk-theme] tk-tape-title>:is(h1,h2,h3):where(:not(tk-screen *, tk-note *)){color:#0E0E0E!important;padding:0;display:block}
body[data-tk-theme] tk-hero tk-tape-title>h1:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-hero tk-tape-title[data-tk-length]>h1:where(:not(tk-screen *, tk-note *)){font-family:var(--st-display);font-weight:700;font-stretch:88%;
  font-size:var(--tk-size-h1);line-height:.86;letter-spacing:-.055em;max-width:none;font-variation-settings:"opsz" 96}
body[data-tk-theme] tk-hero tk-tape-title[data-tk-length="medium"]>h1:where(:not(tk-screen *, tk-note *)){font-size:clamp(3rem,13.4vw,16rem)}
body[data-tk-theme] tk-hero tk-tape-title[data-tk-length="long"]>h1:where(:not(tk-screen *, tk-note *)){font-size:clamp(2.5rem,9.4vw,11rem)}
body[data-tk-theme] tk-tape-title .tk-tape-line:where(:not(tk-screen *, tk-note *)){display:block;padding:0;margin:0 0 .02em;max-width:none}
body[data-tk-theme] tk-tape-title .tk-tape-ink:where(:not(tk-screen *, tk-note *)){transform:none;display:inline}
/* A last odd line that is not the first runs flush right, so the title spans the full width. */
@media(min-width:761px){body[data-tk-theme] tk-tape-title .tk-tape-line:last-child:nth-child(odd):not(:first-child):where(:not(tk-screen *, tk-note *)){text-align:right}}
/* Every second line switches to the serif italic and steps in two columns. */
body[data-tk-theme] tk-tape-title .tk-tape-line:nth-child(even):where(:not(tk-screen *, tk-note *)){padding-left:calc(100% / 6)}
body[data-tk-theme] tk-tape-title .tk-tape-line:nth-child(even) .tk-tape-ink:where(:not(tk-screen *, tk-note *)){font-family:var(--st-serif);font-style:italic;font-weight:400;letter-spacing:-.03em;font-size:1.06em}
body[data-tk-theme] tk-hero p.tk-dek:where(:not(tk-screen *, tk-note *)){grid-column:6/-1;grid-row:3;margin:0;max-width:30em;color:#0E0E0E;
  font:400 clamp(1.2rem,.9rem + .9vw,1.9rem)/1.22 var(--st-sans);letter-spacing:-.02em}
body[data-tk-theme] tk-hero p.tk-dek:where(:not(tk-screen *, tk-note *))::before{content:"(About)";font:500 .8rem/1 var(--st-mono);letter-spacing:.08em;text-transform:uppercase;
  display:inline-block;width:clamp(3rem,8vw,8rem);vertical-align:.45em;color:#5C5B57}
/* The stamp is the studio's spinning badge: an acid disc with a ring of ticks that turns. */
body[data-tk-theme] tk-hero tk-stamp:where(:not(tk-screen *, tk-note *)){grid-column:1/5;grid-row:3;justify-self:start;margin:0}
body[data-tk-theme] tk-stamp:where(:not(tk-screen *, tk-note *)){--stamp:#0E0E0E;vertical-align:middle;margin:.5rem 0}
body[data-tk-theme] tk-stamp .tk-stamp-face:where(:not(tk-screen *, tk-note *)){position:relative;width:11.5rem;aspect-ratio:1;border:0;border-radius:50%;padding:1.8rem;gap:.4rem;
  background:var(--st-acid);color:var(--st-acid-ink);mix-blend-mode:normal;opacity:1;-webkit-mask:none;mask:none;transform:rotate(var(--tilt,-6deg));animation:none;
  font:700 1.25rem/1 var(--st-display);letter-spacing:-.02em;text-transform:none;outline:0}
body[data-tk-theme] tk-stamp .tk-stamp-face:where(:not(tk-screen *, tk-note *))::before{content:"";position:absolute;inset:.5rem;border-radius:50%;
  background:repeating-conic-gradient(#0E0E0E 0 1.6deg,transparent 1.6deg 7.5deg);
  -webkit-mask:radial-gradient(circle,transparent 61%,#000 62% 70%,transparent 71%);mask:radial-gradient(circle,transparent 61%,#000 62% 70%,transparent 71%);
  animation:st-spin 14s linear infinite}
body[data-tk-theme] tk-stamp .tk-stamp-date:where(:not(tk-screen *, tk-note *)){font:500 .78rem/1 var(--st-mono);letter-spacing:.06em;text-transform:uppercase}
@keyframes st-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){
  body[data-tk-theme] tk-hero p.tk-dek:where(:not(tk-screen *, tk-note *)){grid-column:1/-1;grid-row:auto;text-indent:0}
  body[data-tk-theme] tk-hero p.tk-dek:where(:not(tk-screen *, tk-note *))::before{width:auto;margin-right:.6rem}
  body[data-tk-theme] tk-hero tk-stamp:where(:not(tk-screen *, tk-note *)){grid-column:1/-1;grid-row:auto;justify-self:end;margin-top:1.5rem}
  body[data-tk-theme] tk-stamp .tk-stamp-face:where(:not(tk-screen *, tk-note *)){width:7.5rem;padding:1.2rem;font-size:.85rem}
  body[data-tk-theme] tk-tape-title .tk-tape-line:nth-child(even):where(:not(tk-screen *, tk-note *)){padding-left:12%}
  }

/* ---------- Sections: a sticky (01) in the first three columns, the content in the other nine ---------- */
body[data-tk-theme] tk-section:where(:not(tk-screen *, tk-note *)){margin:0 0 clamp(4rem,10vw,10rem);border-top:1px solid #0E0E0E;padding-top:1.1rem}
body[data-tk-theme] tk-section:has(>h2):where(:not(tk-screen *, tk-note *)){counter-increment:tk-sec}
body[data-tk-theme] tk-section>h2:where(:not(tk-screen *, tk-note *)){counter-increment:none;border:0;padding:0;margin:0 0 clamp(1.5rem,3vw,3rem);
  font-family:var(--st-display);font-weight:700;font-stretch:90%;font-size:var(--tk-size-h2);line-height:.9;letter-spacing:-.05em;max-width:12ch}
/* Below the 12-column layout the (01) sits on its own line above the heading, so a long first word never strands it. */
body[data-tk-theme] tk-section>h2:where(:not(tk-screen *, tk-note *))::before{content:"(" counter(tk-sec,decimal-leading-zero) ")";display:block;margin:0 0 .25em;
  font:italic 400 .5em/1 var(--st-serif);letter-spacing:-.01em;color:#0E0E0E}
body[data-tk-theme] tk-section>h2 .tk-anchor:where(:not(tk-screen *, tk-note *)){font:500 .2em var(--st-mono);color:#5C5B57;vertical-align:super}
@media(min-width:1000px){
  body[data-tk-theme] tk-section:has(>h2):where(:not(tk-screen *, tk-note *)){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gut);align-items:start}
  body[data-tk-theme] tk-section:has(>h2)>*:where(:not(tk-screen *, tk-note *)){grid-column:4/-1}
  body[data-tk-theme] tk-section:has(>h2):where(:not(tk-screen *, tk-note *))::before{content:"(" counter(tk-sec,decimal-leading-zero) ")";grid-column:1/4;grid-row:1/span 40;position:sticky;top:1.4rem;align-self:start;
    font:italic 400 clamp(5rem,9vw,10rem)/.8 var(--st-serif);letter-spacing:-.04em;color:#0E0E0E;padding-top:.4rem}
  body[data-tk-theme] tk-section:has(>h2)>h2:where(:not(tk-screen *, tk-note *))::before{content:none}
  body[data-tk-theme] tk-section:has(>tk-slip)>h2:where(:not(tk-screen *, tk-note *)){grid-column:4/10}
  body[data-tk-theme] tk-section>tk-slip:where(:not(tk-screen *, tk-note *)){grid-column:10/-1;grid-row:1;align-self:start;width:auto;max-width:none;margin:0;float:none}}
body[data-tk-theme] h3:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-section h3:where(:not(tk-screen *, tk-note *)){font-family:var(--st-serif);font-style:italic;font-weight:400;font-size:var(--tk-size-h3);letter-spacing:-.02em;line-height:1.02}
body[data-tk-theme] :is(tk-section,tk-split>div)>p:where(:not(tk-screen *, tk-note *)){font-size:1.12rem;line-height:1.55;letter-spacing:-.005em}
/* Lists read at the paragraph size; numbered lists get the studio's mono index (01, 02...) inside the text column. */
body[data-tk-theme] :is(tk-section,tk-split>div,tk-details details)>:is(ul,ol):where(:not(tk-screen *, tk-note *)){font-size:1.12rem;line-height:1.55;letter-spacing:-.005em}
body[data-tk-theme] :is(tk-section,tk-split>div,tk-card,tk-callout,tk-details details)>:is(ul,ol)>li:where(:not(tk-screen *, tk-note *)){break-inside:avoid}
body[data-tk-theme] :is(tk-section,tk-split>div,tk-card,tk-callout,tk-details details)>ol:where(:not(tk-screen *, tk-note *)){list-style:none;counter-reset:st-li;padding-left:2.4rem}
body[data-tk-theme] :is(tk-section,tk-split>div,tk-card,tk-callout,tk-details details)>ol>li:where(:not(tk-screen *, tk-note *)){counter-increment:st-li;position:relative}
body[data-tk-theme] :is(tk-section,tk-split>div,tk-card,tk-callout,tk-details details)>ol>li:where(:not(tk-screen *, tk-note *))::before{content:counter(st-li,decimal-leading-zero);position:absolute;left:-2.4rem;top:.5em;
  font:500 .8rem/1 var(--st-mono);letter-spacing:.04em;color:#5C5B57}
body[data-tk-theme] tk-callout:is([data-kind="decision"],[data-kind="warning"],[data-kind="risk"])>ol>li:where(:not(tk-screen *, tk-note *))::before{color:inherit}
/* A list that sets its own numbering (start, reversed, value) keeps the browser's numbers, which honour it. */
body[data-tk-theme] :is(tk-section,tk-split>div,tk-card,tk-callout,tk-details details)>ol:is([start],[reversed],:has(>li[value])):where(:not(tk-screen *, tk-note *)){list-style:decimal;padding-left:1.8em}
body[data-tk-theme] :is(tk-section,tk-split>div,tk-card,tk-callout,tk-details details)>ol:is([start],[reversed],:has(>li[value]))>li:where(:not(tk-screen *, tk-note *))::before{content:none}
body[data-tk-theme] :is(tk-section,tk-split>div,tk-card,tk-callout,tk-details details)>ul>li:where(:not(tk-screen *, tk-note *))::marker{color:#0E0E0E}
body[data-tk-theme] tk-callout:is([data-kind="decision"],[data-kind="warning"],[data-kind="risk"])>ul>li:where(:not(tk-screen *, tk-note *))::marker{color:inherit}
body[data-tk-theme] strong:where(:not(tk-screen *, tk-note *)){font-weight:620}
body[data-tk-theme] a:where(:not(tk-screen *, tk-note *)){color:#0E0E0E;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:#0E0E0E;transition:background .2s}
body[data-tk-theme] a:hover:where(:not(tk-screen *, tk-note *)){background:var(--st-acid);text-decoration-color:#0E0E0E;color:var(--st-acid-ink)}
body[data-tk-theme] code:not(pre code):where(:not(tk-screen *, tk-note *)){background:#0E0E0E;color:var(--st-acid-hi);border-radius:0;padding:.1em .38em}
body[data-tk-theme] tk-mark:is(:not([kind]),[kind="highlight"]):where(:not(tk-screen *, tk-note *)){background:var(--st-acid);padding:.02em .2em;margin:0;border-radius:0;color:var(--st-acid-ink)}
body[data-tk-theme] tk-mark[kind="underline"]:where(:not(tk-screen *, tk-note *)){text-decoration-style:solid;text-decoration-color:#0E0E0E;text-decoration-thickness:.14em;text-underline-offset:.16em}
body[data-tk-theme] tk-mark[kind="circle"]:where(:not(tk-screen *, tk-note *))::after{border-color:#0E0E0E;-webkit-mask:none;mask:none;border-radius:50%;border-width:.08em}
body[data-tk-theme] blockquote:where(:not(tk-screen *, tk-note *)){border:0;padding:0;margin:2.2rem 0;font:italic 400 clamp(1.8rem,1.2rem + 1.6vw,2.9rem)/1.02 var(--st-serif);letter-spacing:-.02em;text-indent:-.42em}
body[data-tk-theme] blockquote:where(:not(tk-screen *, tk-note *))::before{content:"\201C"}
body[data-tk-theme] blockquote:where(:not(tk-screen *, tk-note *))::after{content:"\201D"}
body[data-tk-theme] .tk-note:where(:not(tk-screen *, tk-note *)){font:500 .8rem/1.45 var(--st-mono);letter-spacing:.01em;color:#5C5B57}

/* ---------- Metrics: a case study's results ---------- */
body[data-tk-theme] tk-stats:where(:not(tk-screen *, tk-note *)){border-top:1px solid #0E0E0E;border-bottom:1px solid #0E0E0E;margin:clamp(2rem,4vw,3.5rem) 0;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr))}
body[data-tk-theme] tk-stat:where(:not(tk-screen *, tk-note *)){display:flex;flex-direction:column;padding:1rem 1.1rem 1.4rem;border-left:1px solid var(--st-hair)}
body[data-tk-theme] tk-stats>tk-stat:first-child:where(:not(tk-screen *, tk-note *)){padding-left:0}
body[data-tk-theme] tk-stat .tk-label:where(:not(tk-screen *, tk-note *)){order:-1;margin:0 0 2.6rem;font:500 .8rem/1.35 var(--st-mono);letter-spacing:.06em;text-transform:uppercase;color:#5C5B57}
body[data-tk-theme] tk-stat .tk-label:where(:not(tk-screen *, tk-note *))::before{content:"(" counter(st-stat,decimal-leading-zero) ") ";color:#0E0E0E}
body[data-tk-theme] tk-stats:where(:not(tk-screen *, tk-note *)){counter-reset:st-stat}
body[data-tk-theme] tk-stat:where(:not(tk-screen *, tk-note *)){counter-increment:st-stat}
body[data-tk-theme] tk-stat .tk-value:where(:not(tk-screen *, tk-note *)){font-family:var(--st-display);font-weight:600;font-stretch:85%;font-size:max(2.4rem,min(5.4rem,26cqi));line-height:.85;letter-spacing:-.06em;margin:0 0 .9rem}
body[data-tk-theme] tk-stat .tk-delta:where(:not(tk-screen *, tk-note *)){align-self:flex-start;margin:0;padding:.3rem .65rem .28rem;border:1px solid #0E0E0E;border-radius:.95rem;
  font:500 .8rem/1.3 var(--st-mono);letter-spacing:.01em;color:#0E0E0E}
body[data-tk-theme] tk-stat:is([data-trend="up"]:not([good="down"]),[data-trend="down"][good="down"]) .tk-delta:where(:not(tk-screen *, tk-note *)){background:var(--st-acid);color:var(--st-acid-ink)}
body[data-tk-theme] tk-stat[data-trend] .tk-delta:where(:not(tk-screen *, tk-note *))::before{content:"\2197\00a0";font-size:1em}
body[data-tk-theme] tk-stat[data-trend="down"] .tk-delta:where(:not(tk-screen *, tk-note *))::before{content:"\2198\00a0"}
@media(max-width:640px){body[data-tk-theme] tk-stats:where(:not(tk-screen *, tk-note *)){grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-tk-theme] tk-hero tk-tape-title>h1:where(:not(tk-screen *, tk-note *)){font-size:18vw}
  body[data-tk-theme] tk-hero tk-tape-title[data-tk-length="medium"]>h1:where(:not(tk-screen *, tk-note *)){font-size:16.5vw}
  body[data-tk-theme] tk-hero tk-tape-title[data-tk-length="long"]>h1:where(:not(tk-screen *, tk-note *)){font-size:12.5vw}
  body[data-tk-theme] tk-stat:where(:not(tk-screen *, tk-note *)){padding:.9rem .7rem 1.1rem;border-left:1px solid var(--st-hair)}
  body[data-tk-theme] tk-stats>tk-stat:nth-child(odd):where(:not(tk-screen *, tk-note *)){padding-left:0;border-left:0}
  body[data-tk-theme] tk-stats>tk-stat:nth-child(n+3):where(:not(tk-screen *, tk-note *)){border-top:1px solid var(--st-hair)}
  body[data-tk-theme] tk-stat .tk-label:where(:not(tk-screen *, tk-note *)){margin-bottom:1.6rem}}

/* ---------- Cards and charts: project tiles on a hairline ---------- */
body[data-tk-theme] tk-grid:where(:not(tk-screen *, tk-note *)){gap:clamp(2rem,4vw,3.5rem) var(--st-gut);margin:2rem 0}
body[data-tk-theme] tk-card:where(:not(tk-screen *, tk-note *)){background:none;border:0;border-top:1px solid #0E0E0E;border-radius:0;padding:.9rem 0 0;box-shadow:none;margin:1.5rem 0}
body[data-tk-theme] tk-card>h3:first-child:where(:not(tk-screen *, tk-note *)){font-size:1.75rem;margin:0 0 .25rem}
body[data-tk-theme] tk-chart .tk-title:where(:not(tk-screen *, tk-note *)){font-family:var(--st-serif);font-style:italic;font-weight:400;font-size:1.6rem;letter-spacing:-.02em}
body[data-tk-theme] tk-chart .tk-sub:where(:not(tk-screen *, tk-note *)){font:500 .8rem/1.45 var(--st-mono);letter-spacing:.01em;color:#5C5B57;margin-bottom:1rem}
body[data-tk-theme] tk-chart details.tk-fallback summary:where(:not(tk-screen *, tk-note *)){font:500 .8rem var(--st-mono);letter-spacing:.08em;text-transform:uppercase;color:#0E0E0E}
body[data-tk-theme] tk-chart details.tk-fallback summary:where(:not(tk-screen *, tk-note *))::after{content:"\2198"}

/* ---------- Callouts: the decision on acid, the warning on ink ---------- */
body[data-tk-theme] tk-callout:where(:not(tk-screen *, tk-note *)){max-width:60rem;border:0;border-radius:0;padding:clamp(1.25rem,3vw,2.4rem);margin:2.5rem 0;background:#E6E3DC;
  font:500 clamp(1.1rem,.95rem + .5vw,1.45rem)/1.3 var(--st-sans);letter-spacing:-.015em}
body[data-tk-theme] tk-callout[data-kind="decision"]:where(:not(tk-screen *, tk-note *)){background:var(--st-acid);color:var(--st-acid-ink);border:0;box-shadow:none}
body[data-tk-theme] tk-callout:is([data-kind="warning"],[data-kind="risk"]):where(:not(tk-screen *, tk-note *)){background:#0E0E0E;color:#F1EFEA;border:0;box-shadow:none}
body[data-tk-theme] tk-callout:where(:not(tk-screen *, tk-note *)){position:relative}
body[data-tk-theme] tk-callout strong.tk-label:where(:not(tk-screen *, tk-note *)){float:right;display:inline-block;transform:none;opacity:1;margin:-.2rem 0 .8rem 1.2rem;padding:.35rem .7rem .32rem;border:1px solid currentColor;border-radius:99px;
  font:500 .78rem/1 var(--st-mono);letter-spacing:.06em;color:inherit}
body[data-tk-theme] tk-callout strong.tk-label:where(:not(tk-screen *, tk-note *))::before{content:"\25CF\00a0"}
body[data-tk-theme] tk-callout:is([data-kind="warning"],[data-kind="risk"]) strong.tk-label:where(:not(tk-screen *, tk-note *)){color:var(--st-acid-hi)}
/* Inline code keeps a visible chip on the ink callouts. */
body[data-tk-theme] tk-callout:is([data-kind="warning"],[data-kind="risk"]) code:not(pre code):where(:not(tk-screen *, tk-note *)){background:#2E2E2B}
/* On a phone the label pill sits above the text and the decision arrow below it, so the text keeps the full width. */
@media(max-width:640px){
  body[data-tk-theme] tk-callout strong.tk-label:where(:not(tk-screen *, tk-note *)){float:none;display:table;margin:0 0 .8rem}
  body[data-tk-theme] tk-callout[data-kind="decision"]:where(:not(tk-screen *, tk-note *)){padding-right:1.25rem;padding-bottom:4.6rem}}
body[data-tk-theme] tk-callout p:first-of-type strong:first-child:where(:not(tk-screen *, tk-note *)){color:inherit}
body[data-tk-theme] tk-callout a:where(:not(tk-screen *, tk-note *)){color:inherit;text-decoration-color:currentColor}
body[data-tk-theme] tk-callout:is([data-kind="warning"],[data-kind="risk"]) a:hover:where(:not(tk-screen *, tk-note *)){color:#0E0E0E}

/* ---------- Table: the work index; a row turns ink and acid under the pointer ---------- */
body[data-tk-theme] tk-table:where(:not(tk-screen *, tk-note *)){margin:2.5rem 0}
body[data-tk-theme] tk-table table:where(:not(tk-screen *, tk-note *)){font-size:1rem}
body[data-tk-theme] tk-table thead th:where(:not(tk-screen *, tk-note *)){background:#F1EFEA;font:500 .8rem/1.25 var(--st-mono);letter-spacing:.06em;text-transform:uppercase;color:#5C5B57;border-bottom:1px solid #0E0E0E}
body[data-tk-theme] tk-table th button:where(:not(tk-screen *, tk-note *))::after{content:"\2195";opacity:.5}
body[data-tk-theme] tk-table th[aria-sort="ascending"] button:where(:not(tk-screen *, tk-note *))::after{content:"\2191";color:#0E0E0E}
body[data-tk-theme] tk-table th[aria-sort="descending"] button:where(:not(tk-screen *, tk-note *))::after{content:"\2193";color:#0E0E0E}
body[data-tk-theme] tk-table td:where(:not(tk-screen *, tk-note *)){padding:1rem .75rem;border-bottom:1px solid var(--st-hair);vertical-align:baseline;transition:background .2s,color .2s;overflow-wrap:anywhere}
body[data-tk-theme] tk-table tbody td:first-child:where(:not(tk-screen *, tk-note *)){font:600 clamp(1.15rem,1rem + .6vw,1.7rem)/1.1 var(--st-display);letter-spacing:-.035em}
body[data-tk-theme] tk-table td.tk-num:where(:not(tk-screen *, tk-note *)){font-family:var(--st-mono);font-size:.92rem}
body[data-tk-theme] tk-table tbody tr:hover:where(:not(tk-screen *, tk-note *)){background:#0E0E0E}
body[data-tk-theme] tk-table tbody tr:hover td:where(:not(tk-screen *, tk-note *)){color:var(--st-acid-hi)}
/* Phone cards: the kit's stacked spacing, not the wide index's padding. */
@media(max-width:640px){body[data-tk-theme] tk-table[stack] td:where(:not(tk-screen *, tk-note *)){padding:.6rem 0}}

/* ---------- The cover image: no tape, a zoom and a "View" cursor on hover, a meta caption ---------- */
body[data-tk-theme] tk-taped:where(:not(tk-screen *, tk-note *)){width:auto;max-width:100%;margin:1rem 0 2rem;padding:0}
body[data-tk-theme] tk-taped>.tk-print:where(:not(tk-screen *, tk-note *)){transform:none;background:none;padding:0;box-shadow:none;overflow:hidden;position:relative}
body[data-tk-theme] tk-taped img:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-image img:where(:not(tk-screen *, tk-note *)){display:block;width:100%;border-radius:0;transition:transform .9s cubic-bezier(.2,.7,.1,1);filter:contrast(1.05) saturate(.9)}
body[data-tk-theme] tk-taped>.tk-print:hover img:where(:not(tk-screen *, tk-note *)){transform:scale(1.05)}
body[data-tk-theme] tk-taped>.tk-print:where(:not(tk-screen *, tk-note *))::after{content:"\2733";position:absolute;left:50%;top:44%;width:6.5rem;height:6.5rem;margin:-3.25rem 0 0 -3.25rem;border-radius:50%;
  display:grid;place-items:center;background:var(--st-acid);color:var(--st-acid-ink);font:600 1rem var(--st-display);letter-spacing:-.02em;mix-blend-mode:normal;opacity:1;inset:auto;
  transform:scale(0);transition:transform .45s cubic-bezier(.2,.9,.2,1.2);pointer-events:none;z-index:2}
body[data-tk-theme] tk-taped>.tk-print:hover:where(:not(tk-screen *, tk-note *))::after{transform:scale(1)}
body[data-tk-theme] tk-taped figcaption:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-image figcaption:where(:not(tk-screen *, tk-note *)){position:relative;z-index:1;background:#F1EFEA;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:1rem;
  max-width:none;padding:.75rem 0 0;margin:0;border-top:1px solid #0E0E0E;font:500 .8rem/1.45 var(--st-mono);letter-spacing:.01em;color:#0E0E0E}
body[data-tk-theme] tk-taped figcaption:where(:not(tk-screen *, tk-note *))::before,body[data-tk-theme] tk-image figcaption:where(:not(tk-screen *, tk-note *))::before{content:"(Fig.)";letter-spacing:.06em;text-transform:uppercase;color:#5C5B57}
body[data-tk-theme] tk-taped figcaption:where(:not(tk-screen *, tk-note *))::after,body[data-tk-theme] tk-image figcaption:where(:not(tk-screen *, tk-note *))::after{content:none}

/* ---------- The slip: a testimonial bubble ---------- */
body[data-tk-theme] tk-slip:where(:not(tk-screen *, tk-note *)){max-width:26rem;padding:0;margin:1rem 0 2rem}
body[data-tk-theme] tk-slip>.tk-slip-shadow:where(:not(tk-screen *, tk-note *)){filter:none}
body[data-tk-theme] tk-slip .tk-paper:where(:not(tk-screen *, tk-note *)){transform:none;-webkit-mask:none;mask:none;background:#0E0E0E;color:#F1EFEA;border-radius:1.6rem 1.6rem 1.6rem 0;
  padding:1.4rem 1.5rem 1.2rem;font:italic 400 1.5rem/1.12 var(--st-serif);letter-spacing:-.01em}
body[data-tk-theme] tk-slip .tk-paper :is(p,li):where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-slip .tk-paper a:where(:not(tk-screen *, tk-note *)){color:#F1EFEA}
body[data-tk-theme] tk-slip .tk-paper strong:where(:not(tk-screen *, tk-note *)){color:var(--st-acid-hi)}
body[data-tk-theme] tk-slip .tk-from:where(:not(tk-screen *, tk-note *)){margin-top:1rem;text-align:left;font:500 .8rem/1.3 var(--st-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--st-acid-hi)}

/* ---------- Code and details ---------- */
body[data-tk-theme] tk-code pre:where(:not(tk-screen *, tk-note *)){border-radius:0;padding:3rem 1.5rem 1.5rem;font-size:.84rem}
body[data-tk-theme] tk-code:where(:not(tk-screen *, tk-note *))::before{color:var(--st-acid-hi);opacity:1;font:500 .78rem var(--st-mono);letter-spacing:.06em;text-transform:uppercase;top:1.1rem;left:1.5rem}
body[data-tk-theme] tk-code .tk-copy:where(:not(tk-screen *, tk-note *)){color:var(--st-acid-hi);opacity:1;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}
body[data-tk-theme] tk-details:where(:not(tk-screen *, tk-note *)){border-top:1px solid #0E0E0E;border-bottom:0;margin:0}
body[data-tk-theme] tk-details+tk-details:where(:not(tk-screen *, tk-note *)){border-top:1px solid var(--st-hair)}
body[data-tk-theme] tk-details:last-of-type:where(:not(tk-screen *, tk-note *)){border-bottom:1px solid #0E0E0E;margin-bottom:2rem}
body[data-tk-theme] tk-details summary:where(:not(tk-screen *, tk-note *)){min-height:4.4rem;font:600 clamp(1.2rem,1rem + .7vw,1.8rem)/1.1 var(--st-display);letter-spacing:-.035em}
body[data-tk-theme] tk-details summary:where(:not(tk-screen *, tk-note *))::after{content:"+";width:2.4rem;height:2.4rem;border:1px solid #0E0E0E;border-radius:50%;display:grid;place-items:center;
  font:400 1.3rem/1 var(--st-sans);color:#0E0E0E;transition:transform .3s,background .3s}
body[data-tk-theme] tk-details details[open]>summary:where(:not(tk-screen *, tk-note *))::after{content:"+";transform:rotate(45deg);background:var(--st-acid);color:var(--st-acid-ink)}
body[data-tk-theme] tk-details summary:hover:where(:not(tk-screen *, tk-note *))::after{background:var(--st-acid);color:var(--st-acid-ink)}
body[data-tk-theme] tk-details details>p:where(:not(tk-screen *, tk-note *)){max-width:40rem;color:#33332F}

/* ---------- The torn strip is the marquee: the label running across the full width ---------- */
body[data-tk-theme] tk-torn:where(:not(tk-screen *, tk-note *)){position:relative;max-width:none;margin:clamp(3rem,8vw,7rem) calc(50% - 50vw);padding:0;min-height:0;transform:skewY(-2deg);
  -webkit-mask:none;mask:none;background:#0E0E0E;color:transparent;font-size:0;line-height:0;overflow:hidden;white-space:nowrap}
body[data-tk-theme] tk-torn:where(:not(tk-screen *, tk-note *))::before{content:attr(aria-label) "\00a0\2733\00a0" attr(aria-label) "\00a0\2733\00a0" attr(aria-label) "\00a0\2733\00a0" attr(aria-label) "\00a0\2733\00a0" attr(aria-label) "\00a0\2733\00a0" attr(aria-label) "\00a0\2733\00a0" attr(aria-label) "\00a0\2733\00a0" attr(aria-label) "\00a0\2733\00a0" attr(aria-label) "\00a0\2733\00a0" attr(aria-label) "\00a0\2733\00a0" attr(aria-label) "\00a0\2733\00a0" attr(aria-label) "\00a0\2733\00a0";
  display:inline-block;padding:1.1rem 0 .9rem;color:var(--st-acid-hi);font:700 clamp(2.4rem,6vw,6rem)/1 var(--st-display);font-stretch:85%;letter-spacing:-.04em;text-transform:none;
  animation:st-marquee 22s linear infinite}
body[data-tk-theme] tk-torn:not([aria-label]):where(:not(tk-screen *, tk-note *))::before{content:"\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733\00a0\2733"}
/* With no label the strip is a modest divider: a slim ink band with a dashed accent line, no marquee. */
body[data-tk-theme] tk-torn:is(:not([aria-label]),[aria-label=""]):where(:not(tk-screen *, tk-note *)){height:.8rem;margin-top:clamp(2.5rem,6vw,5rem);margin-bottom:clamp(2.5rem,6vw,5rem);transform:skewY(-1deg)}
body[data-tk-theme] tk-torn:is(:not([aria-label]),[aria-label=""]):where(:not(tk-screen *, tk-note *))::before{content:"";display:block;height:100%;padding:0;animation:none;
  background:repeating-linear-gradient(90deg,var(--st-acid) 0 8px,transparent 8px 24px) 0 50%/100% 2px no-repeat}
@keyframes st-marquee{to{transform:translateX(-50%)}}

/* ---------- Controls: pills, hairlines and an acid knob ---------- */
body[data-tk-theme] .tk-controls:where(:not(tk-screen *, tk-note *)){border-top:1px solid #0E0E0E;border-bottom:1px solid #0E0E0E;padding:1.5rem 0;gap:1.5rem 2.5rem}
body[data-tk-theme] .tk-field label:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-radio-group legend:where(:not(tk-screen *, tk-note *)){font:500 .8rem/1.3 var(--st-mono);letter-spacing:.06em;text-transform:uppercase;color:#0E0E0E;margin-bottom:.6rem}
body[data-tk-theme] .tk-field output:where(:not(tk-screen *, tk-note *)){font:700 1.5rem/1 var(--st-display);letter-spacing:-.04em;color:var(--st-acid-ink);background:var(--st-acid);padding:.1rem .35rem;top:-.55rem}
body[data-tk-theme] input[type="range"]:where(:not(tk-screen *, tk-note *))::-webkit-slider-runnable-track{height:2px;border-radius:0;background:linear-gradient(90deg,#0E0E0E var(--tk-fill),rgba(14,14,14,.25) var(--tk-fill))}
body[data-tk-theme] input[type="range"]:where(:not(tk-screen *, tk-note *))::-moz-range-track{height:2px;background:rgba(14,14,14,.25)}
body[data-tk-theme] input[type="range"]:where(:not(tk-screen *, tk-note *))::-moz-range-progress{height:2px;background:#0E0E0E}
body[data-tk-theme] input[type="range"]:where(:not(tk-screen *, tk-note *))::-webkit-slider-thumb{width:26px;height:26px;margin-top:-12px;background:var(--st-acid);border:2px solid #0E0E0E;box-shadow:none;color:var(--st-acid-ink)}
body[data-tk-theme] input[type="range"]:where(:not(tk-screen *, tk-note *))::-moz-range-thumb{width:22px;height:22px;background:var(--st-acid);border:2px solid #0E0E0E;box-shadow:none;color:var(--st-acid-ink)}
body[data-tk-theme] input[type="range"]:focus-visible:where(:not(tk-screen *, tk-note *))::-webkit-slider-thumb{box-shadow:0 0 0 3px #F1EFEA,0 0 0 5px #0E0E0E}
body[data-tk-theme] :is(tk-select select,tk-search input,tk-number input,tk-date input):where(:not(tk-screen *, tk-note *)){border:0;border-bottom:1.5px solid #0E0E0E;border-radius:0;background-color:transparent;padding-left:0;
  font:600 1.3rem/1.2 var(--st-display);letter-spacing:-.03em}
body[data-tk-theme] tk-select select:where(:not(tk-screen *, tk-note *)){background-image:linear-gradient(45deg,transparent 50%,#0E0E0E 50%),linear-gradient(135deg,#0E0E0E 50%,transparent 50%)}
body[data-tk-theme] :is(tk-select select,tk-search input,tk-number input,tk-date input):focus:where(:not(tk-screen *, tk-note *)){box-shadow:0 3px 0 var(--st-acid-hi);border-color:#0E0E0E}
body[data-tk-theme] tk-toggle .tk-track:where(:not(tk-screen *, tk-note *)){width:3.4rem;height:1.9rem;border:1.5px solid #0E0E0E;background:transparent}
body[data-tk-theme] tk-toggle .tk-track:where(:not(tk-screen *, tk-note *))::after{top:.22rem;left:.22rem;width:1.2rem;height:1.2rem;background:#0E0E0E;box-shadow:none}
body[data-tk-theme] tk-toggle [aria-checked="true"] .tk-track:where(:not(tk-screen *, tk-note *)){background:#0E0E0E}
body[data-tk-theme] tk-toggle [aria-checked="true"] .tk-track:where(:not(tk-screen *, tk-note *))::after{background:var(--st-acid);transform:translateX(1.5rem);color:var(--st-acid-ink)}
body[data-tk-theme] tk-toggle button:where(:not(tk-screen *, tk-note *)){font:600 1.1rem var(--st-display);letter-spacing:-.02em}
body[data-tk-theme] tk-radio-group:where(:not(tk-screen *, tk-note *)){flex:1 1 17rem}
body[data-tk-theme] tk-radio-group fieldset:where(:not(tk-screen *, tk-note *)){gap:.45rem}
body[data-tk-theme] tk-radio-group label:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-radio-group legend+label:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-radio-group label:last-child:where(:not(tk-screen *, tk-note *)){margin:0;border:1.5px solid #0E0E0E;border-radius:99px;background:transparent;
  font:600 1rem var(--st-display);letter-spacing:-.02em;padding:.4rem 1.1rem;flex:0 1 auto}
body[data-tk-theme] tk-radio-group label:hover:where(:not(tk-screen *, tk-note *)){background:var(--st-acid);color:var(--st-acid-ink)}
body[data-tk-theme] tk-radio-group label:has(input:checked):where(:not(tk-screen *, tk-note *)){background:#0E0E0E;color:var(--st-acid-hi);border-color:#0E0E0E}
body[data-tk-theme] tk-text:where(:not(tk-screen *, tk-note *)){font-family:var(--st-display);font-weight:700;background:var(--st-acid);padding:0 .2em;color:var(--st-acid-ink)}

/* ---------- The reply: a "start a project" form ---------- */
body[data-tk-theme] .tk-feedback:where(:not(tk-screen *, tk-note *)){background:none;border:0;border-top:1px solid #0E0E0E;border-radius:0;box-shadow:none;padding:1.2rem 0 0;margin:3rem 0}
body[data-tk-theme] .tk-feedback h3:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] .tk-feedback h4:where(:not(tk-screen *, tk-note *)){font:italic 400 clamp(2rem,1.4rem + 2vw,3.4rem)/1 var(--st-serif);letter-spacing:-.03em;margin:0 0 1.6rem}
body[data-tk-theme] .tk-feedback fieldset label:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] .tk-feedback fieldset legend+label:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] .tk-feedback fieldset>label:first-child:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] .tk-feedback fieldset label:last-child:where(:not(tk-screen *, tk-note *)){
  border:0;border-bottom:1px solid var(--st-hair);border-radius:0;background:transparent;padding:.9rem 0;min-height:3.6rem;font:600 clamp(1.15rem,1rem + .6vw,1.6rem)/1.1 var(--st-display);letter-spacing:-.03em}
body[data-tk-theme] .tk-feedback fieldset>label:first-of-type:where(:not(tk-screen *, tk-note *)){border-top:1px solid var(--st-hair)}
/* Each question is a serif italic line, at least as prominent as the answers under it. */
body[data-tk-theme] .tk-feedback :is(fieldset>legend,div>label:not(:has(input,select,textarea))):where(:not(tk-screen *, tk-note *)){font:italic 400 clamp(1.45rem,1.15rem + .9vw,2rem)/1.1 var(--st-serif);letter-spacing:-.02em;color:#0E0E0E;margin:1.8rem 0 .7rem;padding:0}
body[data-tk-theme] .tk-feedback fieldset:first-of-type>legend:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] .tk-feedback>div>label:first-child:where(:not(tk-screen *, tk-note *)){margin-top:0}
body[data-tk-theme] .tk-feedback select:where(:not(tk-screen *, tk-note *)){padding:.55rem 2rem .55rem 0;font:600 clamp(1.15rem,1rem + .6vw,1.6rem)/1.2 var(--st-display);letter-spacing:-.03em;color:#0E0E0E;
  background:linear-gradient(45deg,transparent 50%,#0E0E0E 50%) calc(100% - 14px) 55%/7px 7px no-repeat,linear-gradient(135deg,#0E0E0E 50%,transparent 50%) calc(100% - 7px) 55%/7px 7px no-repeat}
body[data-tk-theme] .tk-feedback fieldset label:where(:not(tk-screen *, tk-note *))::after{content:"\2192";margin-left:auto;font-family:var(--st-sans);font-weight:300;transition:transform .25s}
body[data-tk-theme] .tk-feedback fieldset label:hover:not(:has(input:disabled)):where(:not(tk-screen *, tk-note *))::after{transform:translateX(.4rem)}
body[data-tk-theme] .tk-feedback fieldset label:has(input:checked):where(:not(tk-screen *, tk-note *)){background:var(--st-acid);color:var(--st-acid-ink)}
body[data-tk-theme] .tk-feedback input[type="radio"]:where(:not(tk-screen *, tk-note *)){width:1.2rem;height:1.2rem;border:1.5px solid #0E0E0E;background:transparent}
body[data-tk-theme] .tk-feedback input[type="radio"]:where(:not(tk-screen *, tk-note *))::before{background:#0E0E0E}
body[data-tk-theme] .tk-feedback :is(textarea,input[type="text"],input[type="number"],select):where(:not(tk-screen *, tk-note *)){border:0;border-bottom:1.5px solid #0E0E0E;border-radius:0;background-color:transparent}
body[data-tk-theme] .tk-feedback .tk-actions:where(:not(tk-screen *, tk-note *)){margin-top:1.8rem}
body[data-tk-theme] .tk-feedback button.tk-submit:where(:not(tk-screen *, tk-note *)){border-radius:99px;background:#0E0E0E;border:1.5px solid #0E0E0E;color:#F1EFEA;padding:.95rem 1.8rem;min-height:3.4rem;
  font:600 1.1rem var(--st-display);letter-spacing:-.02em;transition:background .25s,color .25s}
body[data-tk-theme] .tk-feedback button.tk-submit:where(:not(tk-screen *, tk-note *))::after{content:"\00a0\2197"}
body[data-tk-theme] .tk-feedback button.tk-submit:hover:not(:disabled):where(:not(tk-screen *, tk-note *)){background:var(--st-acid);color:var(--st-acid-ink);filter:none}
body[data-tk-theme] .tk-feedback button.tk-submit:disabled:where(:not(tk-screen *, tk-note *)){background:transparent;color:#5C5B57;border:1.5px dashed #5C5B57}
body[data-tk-theme] .tk-feedback>.tk-note:where(:not(tk-screen *, tk-note *)){border-top:0;padding-top:.4rem}
body[data-tk-theme] .tk-feedback .tk-scale button:where(:not(tk-screen *, tk-note *)){border-color:#0E0E0E;font-family:var(--st-display);font-weight:600}
body[data-tk-theme] .tk-feedback .tk-scale button[aria-pressed="true"]:where(:not(tk-screen *, tk-note *)){background:#0E0E0E;color:var(--st-acid-hi)}

/* A closing line after the last section, as a portfolio footer. */
body[data-tk-theme] tk-page:where(:not(tk-screen *, tk-note *))::after{content:"(End) \2014  Thanks for reading";display:block;margin-top:clamp(3rem,8vw,7rem);padding-top:1rem;border-top:1px solid #0E0E0E;
  font:500 .8rem/1.3 var(--st-mono);letter-spacing:.08em;text-transform:uppercase;color:#0E0E0E}
@media print{body[data-tk-theme] tk-page:where(:not(tk-screen *, tk-note *)){background:none}body[data-tk-theme] tk-torn:where(:not(tk-screen *, tk-note *))::before{animation:none}}

/* ============ COMPONENT VARIETY ============ */
/* Metrics as a bento: the first result is a large accent tile, the second an ink tile, the rest paper; value first, label under it. */
body[data-tk-theme] tk-stats:where(:not(tk-screen *, tk-note *)){border:0;gap:var(--st-gut);grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:none}
body[data-tk-theme] tk-stat:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-stats>tk-stat:first-child:where(:not(tk-screen *, tk-note *)){container-type:inline-size;padding:clamp(1rem,1.6vw,1.5rem);border:1px solid #0E0E0E;background:#F1EFEA;min-height:12rem;justify-content:flex-end;counter-increment:none}
body[data-tk-theme] tk-stat .tk-label:where(:not(tk-screen *, tk-note *)){order:0;margin:.2rem 0 .9rem;font:500 .8rem/1.35 var(--st-mono)}
body[data-tk-theme] tk-stat .tk-label:where(:not(tk-screen *, tk-note *))::before{content:none}
body[data-tk-theme] tk-stat .tk-value:where(:not(tk-screen *, tk-note *)){order:-1;font-size:max(2.4rem,min(6.2rem,30cqi));margin:0 0 .3rem}
body[data-tk-theme] tk-stats>tk-stat:first-child:where(:not(tk-screen *, tk-note *)){grid-column:span 2;grid-row:span 2;background:var(--st-acid);color:var(--st-acid-ink);border-color:var(--st-acid)}
body[data-tk-theme] tk-stats>tk-stat:first-child .tk-value:where(:not(tk-screen *, tk-note *)){font-size:max(3.4rem,min(12rem,32cqi))}
body[data-tk-theme] tk-stats>tk-stat:first-child :is(.tk-label,.tk-delta):where(:not(tk-screen *, tk-note *)){color:var(--st-acid-ink);border-color:currentColor}
body[data-tk-theme] tk-stats>tk-stat:nth-child(2):where(:not(tk-screen *, tk-note *)){background:#0E0E0E;color:#F1EFEA}
body[data-tk-theme] tk-stats>tk-stat:nth-child(2) .tk-label:where(:not(tk-screen *, tk-note *)){color:#BEBCB5}
body[data-tk-theme] tk-stats>tk-stat:nth-child(2) .tk-delta:where(:not(tk-screen *, tk-note *)){border-color:#F1EFEA;color:#F1EFEA}
body[data-tk-theme] tk-stats>tk-stat:nth-child(2):is([data-trend="up"]:not([good="down"]),[data-trend="down"][good="down"]) .tk-delta:where(:not(tk-screen *, tk-note *)){color:var(--st-acid-ink);border-color:var(--st-acid)}
body[data-tk-theme] tk-stats>tk-stat:nth-child(4):where(:not(tk-screen *, tk-note *)){background:repeating-linear-gradient(-45deg,transparent 0 9px,var(--st-hair) 9px 10px),#F1EFEA}
body[data-tk-theme] tk-stats>tk-stat:first-child:is([data-trend="up"]:not([good="down"]),[data-trend="down"][good="down"]) .tk-delta:where(:not(tk-screen *, tk-note *)){background:#0E0E0E;color:var(--st-acid-hi)}
@media(max-width:640px){
  body[data-tk-theme] tk-stats:where(:not(tk-screen *, tk-note *)){grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-tk-theme] tk-stat:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-stats>tk-stat:nth-child(n):where(:not(tk-screen *, tk-note *)){min-height:9rem;padding:.9rem;border:1px solid #0E0E0E}
  body[data-tk-theme] tk-stats>tk-stat:first-child:where(:not(tk-screen *, tk-note *)){grid-row:auto;min-height:11rem}
  /* The first tile spans the row, so an even-numbered last tile would sit alone beside a gap: it spans too. */
  body[data-tk-theme] tk-stats>tk-stat:last-child:nth-child(even):where(:not(tk-screen *, tk-note *)){grid-column:1/-1;min-height:7rem}}
/* Cards are project tiles: a warm-grey plate, an arrow disc in the corner that turns on hover. */
body[data-tk-theme] tk-card:where(:not(tk-screen *, tk-note *)){position:relative;background:#E6E3DC;border:0;padding:clamp(1rem,2vw,1.6rem);margin:0;transition:background .3s}
body[data-tk-theme] tk-card:where(:not(tk-screen *, tk-note *))::after{content:"\2197";position:absolute;top:clamp(.8rem,1.6vw,1.3rem);right:clamp(.8rem,1.6vw,1.3rem);width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;
  background:#0E0E0E;color:var(--st-acid-hi);font:400 1.1rem/1 var(--st-sans);transition:transform .35s cubic-bezier(.2,.9,.2,1.2)}
body[data-tk-theme] tk-card:hover:where(:not(tk-screen *, tk-note *))::after{transform:rotate(45deg)}
body[data-tk-theme] tk-card>h3:first-child:where(:not(tk-screen *, tk-note *)){padding-right:3rem}
body[data-tk-theme] tk-card tk-chart .tk-canvas:where(:not(tk-screen *, tk-note *)){background:transparent}
/* Quotes get a giant accent mark hung in the margin. */
body[data-tk-theme] blockquote:where(:not(tk-screen *, tk-note *)){position:relative;padding-top:2.6rem}
body[data-tk-theme] blockquote:where(:not(tk-screen *, tk-note *))::before{content:"\201C";position:absolute;top:-.5rem;left:.35em;font:400 6rem/1 var(--st-serif);color:#0E0E0E;background:var(--st-acid);width:3.4rem;height:3.4rem;border-radius:50%;
  display:grid;place-items:center;padding-top:2.2rem;text-indent:0;overflow:hidden}
/* Warnings carry a hazard edge; decisions an arrow. */
body[data-tk-theme] tk-callout:is([data-kind="warning"],[data-kind="risk"]):where(:not(tk-screen *, tk-note *)){border-left:14px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--st-acid) 0 8px,#0E0E0E 8px 16px) 14}
body[data-tk-theme] tk-callout[data-kind="decision"]:where(:not(tk-screen *, tk-note *))::after{content:"\2192";position:absolute;right:clamp(1rem,2.4vw,2rem);bottom:clamp(.6rem,1.6vw,1.2rem);font:300 clamp(2.6rem,5vw,4.6rem)/1 var(--st-sans);color:var(--st-acid-ink)}
body[data-tk-theme] tk-callout[data-kind="decision"]:where(:not(tk-screen *, tk-note *)){padding-right:clamp(4rem,9vw,8rem)}
/* Code sits in a window frame with three dots. */
body[data-tk-theme] tk-code:where(:not(tk-screen *, tk-note *)){border-top:2.2rem solid #1F1F1D;position:relative}
body[data-tk-theme] tk-code:where(:not(tk-screen *, tk-note *))::after{content:"";position:absolute;top:-1.45rem;left:1rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--st-acid);box-shadow:1.1rem 0 0 #5C5B57,2.2rem 0 0 #5C5B57}
body[data-tk-theme] tk-code:where(:not(tk-screen *, tk-note *))::before{top:-1.55rem;left:4.6rem}
body[data-tk-theme] tk-code .tk-copy:where(:not(tk-screen *, tk-note *)){top:-1.9rem}

/* ============ KNOBS ============
   --studio-accent (+ --studio-accent-ink for text on it, --studio-accent-on-dark for accent text on ink), or data-accent presets.
   data-density="tight|regular|spacious". data-grid="off" hides the 12-column grid lines. data-title="screen|large". */
body[data-tk-theme][data-accent="orange"]{--st-acid:var(--studio-accent,#FF5B1F)}
body[data-tk-theme][data-accent="pink"]{--st-acid:var(--studio-accent,#FF8FC8)}
body[data-tk-theme][data-accent="mint"]{--st-acid:var(--studio-accent,#46F0A8)}
body[data-tk-theme][data-accent="cobalt"]{--st-acid:var(--studio-accent,#3048F0);--st-acid-ink:var(--studio-accent-ink,#FFFFFF);--st-acid-hi:var(--studio-accent-on-dark,#AEBBFF)}
body[data-tk-theme][data-grid="off"] tk-page:where(:not(tk-screen *, tk-note *)){background:none}
body[data-tk-theme][data-title="large"]{--tk-size-h1:clamp(3rem,9vw,10rem);--tk-size-h2:clamp(2.3rem,4.6vw,5.4rem)}
body[data-tk-theme][data-density="tight"] tk-section:where(:not(tk-screen *, tk-note *)){margin-bottom:clamp(2.5rem,5vw,4.5rem)}
body[data-tk-theme][data-density="tight"] tk-hero:where(:not(tk-screen *, tk-note *)){padding-bottom:1.5rem;margin-bottom:1.5rem}
body[data-tk-theme][data-density="tight"] tk-stat:where(:not(tk-screen *, tk-note *)){min-height:8rem}
body[data-tk-theme][data-density="spacious"] tk-section:where(:not(tk-screen *, tk-note *)){margin-bottom:clamp(6rem,14vw,14rem)}
body[data-tk-theme][data-density="spacious"] :is(tk-grid,tk-table,tk-callout,tk-stats):where(:not(tk-screen *, tk-note *)){margin-top:clamp(3rem,6vw,6rem);margin-bottom:clamp(3rem,6vw,6rem)}
/* Bento shapes by count, so no tile is left hanging. */
@media(min-width:641px){
  body[data-tk-theme] tk-stats>tk-stat:first-child:nth-last-child(2):where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-stats>tk-stat:first-child:nth-last-child(2)~tk-stat:where(:not(tk-screen *, tk-note *)){grid-column:span 2;grid-row:auto}
  body[data-tk-theme] tk-stats>tk-stat:first-child:nth-last-child(3)~tk-stat:where(:not(tk-screen *, tk-note *)){grid-column:span 2}
  body[data-tk-theme] tk-stats>tk-stat:first-child:nth-last-child(4)~tk-stat:last-child:where(:not(tk-screen *, tk-note *)){grid-column:span 2}
  body[data-tk-theme] tk-stats>tk-stat:first-child:nth-last-child(n+6):where(:not(tk-screen *, tk-note *)){grid-row:auto}
  body[data-tk-theme] tk-stats>tk-stat:only-child:where(:not(tk-screen *, tk-note *)){grid-column:1/-1;grid-row:auto}
}
body[data-tk-theme] tk-hero:where(:not(tk-screen *, tk-note *)){padding-bottom:0}
body[data-tk-theme] blockquote:where(:not(tk-screen *, tk-note *)){padding-top:4rem;text-indent:0}
body[data-tk-theme] blockquote:where(:not(tk-screen *, tk-note *))::before{top:0;left:0;display:block;padding:0;text-align:center;font-size:4.6rem;line-height:5.5rem;width:3.4rem;height:3.4rem}

/* The full-bleed marquee band reaches the page edges but never makes the window scroll sideways. */
body[data-tk-theme] tk-page:where(:not(tk-screen *, tk-note *)){overflow-x:clip}
/* 1.7.0: answers that join a form: smaller serif questions; a missing answer gets a heavy rule and an acid label. */
/* A joined question keeps the open, ruled layout with a smaller italic title; its state is a mono caption (hollow dot:
   open, ink dot: answered); missing thickens the rule above it and sets its line in ink on the acid accent, the style's
   one highlight. Go to Send and the open answers are outlined pills that fill with acid under the pointer; the count
   is a display numeral over a square ink bar. */
body[data-tk-theme] .tk-feedback.tk-joined:where(:not(tk-screen *, tk-note *)){margin:2.4rem 0}
body[data-tk-theme] .tk-feedback.tk-joined>h3:where(:not(tk-screen *, tk-note *)){font-size:clamp(1.65rem,1.2rem + 1.4vw,2.5rem);margin-bottom:1.1rem}
body[data-tk-theme] .tk-feedback h3>.tk-required:where(:not(tk-screen *, tk-note *)){color:#5C5B57;font:500 .8rem/1 var(--st-mono);letter-spacing:.02em;text-transform:uppercase;vertical-align:.45em}
body[data-tk-theme] .tk-feedback.tk-joined[data-tk-answer="missing"]:where(:not(tk-screen *, tk-note *)){outline:0;box-shadow:inset 0 4px 0 #0E0E0E}
body[data-tk-theme] .tk-feedback.tk-joined.tk-answer-flash:where(:not(tk-screen *, tk-note *)){box-shadow:inset 0 4px 0 var(--st-acid),0 -1px 0 #0E0E0E}
body[data-tk-theme] .tk-feedback[data-tk-answer="missing"] [aria-invalid="true"]:where(:not(tk-screen *, tk-note *)){outline:2px solid #0E0E0E;outline-offset:3px}
/* the state: a mono caption */
body[data-tk-theme] .tk-feedback>.tk-answer-state:where(:not(tk-screen *, tk-note *)){max-width:none;margin-top:1.1rem;color:#5C5B57;font:500 .8rem/1.4 var(--st-mono);letter-spacing:.01em}
body[data-tk-theme] .tk-feedback .tk-answer-dot:where(:not(tk-screen *, tk-note *)){width:.7rem;height:.7rem;border:1.5px solid currentColor}
body[data-tk-theme] .tk-feedback:is([data-tk-answer="answered"],[data-tk-answer="sent"])>.tk-answer-state:where(:not(tk-screen *, tk-note *)){color:#0E0E0E}
body[data-tk-theme] .tk-feedback:is([data-tk-answer="answered"],[data-tk-answer="sent"]) .tk-answer-dot:where(:not(tk-screen *, tk-note *)){border-color:#0E0E0E;background:#0E0E0E}
body[data-tk-theme] .tk-feedback[data-tk-answer="sent"] .tk-answer-dot:where(:not(tk-screen *, tk-note *)){background:var(--st-acid);box-shadow:none}
body[data-tk-theme] .tk-feedback[data-tk-answer="missing"]>.tk-answer-state:where(:not(tk-screen *, tk-note *)){color:#0E0E0E;font-weight:600}
body[data-tk-theme] .tk-feedback[data-tk-answer="missing"] .tk-answer-text:where(:not(tk-screen *, tk-note *)){padding:.3rem .65rem;border-radius:99px;background:var(--st-acid);color:var(--st-acid-ink)}
body[data-tk-theme] .tk-feedback[data-tk-answer="missing"] .tk-answer-dot:where(:not(tk-screen *, tk-note *)){border-color:#0E0E0E;background:#0E0E0E}
/* secondary buttons: outlined pills that fill with acid */
body[data-tk-theme] :is(.tk-feedback .tk-answer-go,.tk-answers-jump):where(:not(tk-screen *, tk-note *)){border:1.5px solid #0E0E0E;border-radius:99px;background:transparent;color:#0E0E0E;font-family:var(--st-sans);font-weight:600;text-decoration:none}
body[data-tk-theme] .tk-feedback .tk-answer-go:where(:not(tk-screen *, tk-note *)){padding:0 1.15rem;font-size:.9rem}
body[data-tk-theme] .tk-answers-jump:where(:not(tk-screen *, tk-note *)){padding:.45rem 1.05rem;font-size:.92rem}
body[data-tk-theme] :is(.tk-feedback .tk-answer-go,.tk-answers-jump):hover:not(:disabled):where(:not(tk-screen *, tk-note *)){background:var(--st-acid);color:var(--st-acid-ink)}
body[data-tk-theme] .tk-answers-jump:hover:not(:disabled) .tk-answers-req:where(:not(tk-screen *, tk-note *)){color:var(--st-acid-ink)}
body[data-tk-theme] .tk-answers-jump.tk-answers-must:where(:not(tk-screen *, tk-note *)){background:#0E0E0E;color:#F1EFEA}
body[data-tk-theme] .tk-answers-jump.tk-answers-must .tk-answers-req:where(:not(tk-screen *, tk-note *)){color:#C9C6BE}
body[data-tk-theme] .tk-answers-req:where(:not(tk-screen *, tk-note *)){color:#5C5B57;font-weight:500}
/* the count and the bar */
body[data-tk-theme] .tk-answers-count:where(:not(tk-screen *, tk-note *)){color:#5C5B57;font:500 .8rem/1.4 var(--st-mono);letter-spacing:.01em}
body[data-tk-theme] .tk-answers-count strong:where(:not(tk-screen *, tk-note *)){margin-right:.35em;color:#0E0E0E;font:700 clamp(2.2rem,1.6rem + 2vw,3.4rem)/1 var(--st-display);letter-spacing:-.05em;vertical-align:-.12em}
body[data-tk-theme] .tk-answers-bar:where(:not(tk-screen *, tk-note *)){height:.45rem;border:0;border-radius:0;background:var(--st-hair)}
body[data-tk-theme] .tk-answers-bar>span:where(:not(tk-screen *, tk-note *)){background:#0E0E0E}
body[data-tk-theme] .tk-answers[data-tk-answers="all"] .tk-answers-bar>span:where(:not(tk-screen *, tk-note *)){background:#0E0E0E}
body[data-tk-theme] .tk-answers-open:where(:not(tk-screen *, tk-note *)){color:#5C5B57;font:500 .8rem/1.4 var(--st-mono)}
body[data-tk-theme] .tk-feedback .tk-scale button[aria-pressed="true"]:hover:not(:disabled):where(:not(tk-screen *, tk-note *)){background:#0E0E0E;color:var(--st-acid-hi)}
@media(forced-colors:active){body[data-tk-theme] .tk-feedback[data-tk-answer="missing"] .tk-answer-text:where(:not(tk-screen *, tk-note *)){background:Canvas;color:CanvasText}}
body[data-tk-theme] .tk-answers-count:where(:not(tk-screen *, tk-note *)){display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .2rem}
/* forced colours: open dots stay hollow, answered and missing fill, the bar and buttons keep their edges */
@media(forced-colors:active){body[data-tk-theme] .tk-feedback .tk-answer-dot:where(:not(tk-screen *, tk-note *)){forced-color-adjust:none;border-color:CanvasText;background:Canvas;box-shadow:none;clip-path:none;border-radius:50%}
  body[data-tk-theme] .tk-feedback:is([data-tk-answer="answered"],[data-tk-answer="sent"],[data-tk-answer="missing"]) .tk-answer-dot:where(:not(tk-screen *, tk-note *)){background:CanvasText}
  body[data-tk-theme] .tk-feedback.tk-joined[data-tk-answer="missing"]:where(:not(tk-screen *, tk-note *)){outline:2px solid Mark;outline-offset:3px}
  body[data-tk-theme] .tk-answers-bar>span:where(:not(tk-screen *, tk-note *)){forced-color-adjust:none;background:CanvasText}
  body[data-tk-theme] :is(.tk-feedback .tk-answer-go,.tk-answers-jump):where(:not(tk-screen *, tk-note *)){border:1px solid ButtonText}}