/* Tacksheet sheet kit 1.8.0 - built-in style Brutal (brutal), on the none kit theme. Link it after the kit stylesheet with body data-tk-theme="none" data-tk-style="brutal". Fonts: /kit/1.8.0/fonts/LICENSES-styles.txt. */ /* Brutal: a Constructivist poster printed on raw web structure. Bauhaus / Lissitzky geometry and primaries, brutalist grids left showing, oversized variable-width type, hard cuts, collage. Knobs (on body unless noted): data-br-palette="primaries" (default) | "mono" (mono = ink + one accent: --br-accent) custom palette: set --br-a (hot, carries light text), --br-b (deep, links/blocks), --br-c (bright, dark text), optionally --br-paper, --br-ink, --br-on-a, --br-on-c data-br-hero="wedge" (default) | "disc" | "bars" | "grid" | "type" the hero composition data-br-geometry="some" (default) | "lots" | "none" how many shapes appear --br-rot: 1 (default; 0 = square, 2 = wild) or data-br-rotate="0|1|2" rotation intensity on a tk-section: data-br-tone="ink" | "a" | "c" turns that section into a printed block */ @font-face{font-family:"Anybody";src:url(/kit/1.8.0/fonts/anybody-100-900.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap} body[data-tk-theme]{ --br-paper:#E9E7E0;--br-sheet:#F6F5F1;--br-ink:#0D0D0D;--br-muted:#4A4843; --br-a:#D41F17;--br-b:#1336B0;--br-c:#FFD200;--br-on-a:#F6F5F1;--br-on-b:#F6F5F1;--br-on-c:#0D0D0D; --br-link:var(--br-b);--br-rot:1; --br-disp:"Anybody","Arial Narrow",Impact,sans-serif;--br-body:"Archivo",system-ui,sans-serif;--br-mono:"IBM Plex Mono",ui-monospace,monospace; --tk-bg:var(--br-paper);--tk-bg-soft:#DDDAD1;--tk-fg:var(--br-ink);--tk-muted:var(--br-muted); --tk-accent:var(--br-link);--tk-accent-2:var(--br-a);--tk-accent-ink:var(--br-on-b);--tk-accent-2-text:var(--br-ink); --tk-card:var(--br-sheet);--tk-border:var(--br-ink);--tk-rule:var(--br-ink);--tk-mark:var(--br-c); --tk-field:var(--br-sheet);--tk-control:var(--br-ink);--tk-positive:var(--br-ink);--tk-negative:var(--br-ink); --tk-note:var(--br-ink);--tk-tip:var(--br-ink);--tk-warning:var(--br-ink);--tk-decision:var(--br-ink);--tk-risk:var(--br-a); --tk-font-head:var(--br-disp);--tk-font-body:var(--br-body);--tk-font-mono:var(--br-mono);--tk-font-data:var(--br-mono);--tk-font-hand:var(--br-body); --tk-head-weight:850;--tk-head-tracking:-.01em;--tk-head-leading:.9; --tk-size-body:1.05rem;--tk-size-h1:clamp(3rem,12.4vw,13.5rem);--tk-size-h2:clamp(1.7rem,1.2rem + 2.2vw,3.2rem);--tk-size-h3:1.2rem; --tk-radius:0px;--tk-chart-radius:0;--tk-grid:rgba(13,13,13,.16);--tk-shadow:none;--tk-lift:none; --tk-code-bg:var(--br-sheet);--tk-code-fg:var(--br-ink);--tk-tok-k:#B3170F;--tk-tok-s:#1336B0;--tk-tok-c:#5E5B54;--tk-tok-n:#B3170F;--tk-tok-f:#0D0D0D; --tk-c1:var(--br-a);--tk-c2:var(--br-ink);--tk-c3:var(--br-b);--tk-c4:#A88A00;--tk-c5:#8C8880;--tk-c6:#E87A5F;--tk-c7:#5E79D6;--tk-c8:#3A3936; --tk-ramp:#F6F5F1,#FFD200,#F08A3A,#D41F17,#0D0D0D; --tk-film:normal;--tk-paper-obj:var(--br-sheet); --tk-page-width:min(max(43rem,86vw),98rem);--tk-measure:40rem; --tk-texture:url("data:image/svg+xml,"); --tk-texture-size:180px 180px; overflow-x:clip;font-variant-numeric:tabular-nums; } /* Mono: ink plus one accent. The accent carries dark text, so it may be any bright colour. */ body[data-tk-theme][data-br-palette="mono"]{--br-paper:#EFEEEA;--br-a:var(--br-accent,#FF4F00);--br-b:var(--br-ink);--br-c:var(--br-accent,#FF4F00); --br-on-a:var(--br-ink);--br-on-b:var(--br-paper);--br-link:var(--br-ink);--tk-c1:var(--br-a);--tk-c3:#77746D;--tk-ramp:#EFEEEA,#c9c6bf,#8a877f,#3c3a36,#0D0D0D} body[data-tk-theme][data-br-rotate="0"]{--br-rot:0} body[data-tk-theme][data-br-rotate="2"]{--br-rot:2.2} body[data-tk-theme] :where(:not(tk-screen *, tk-note *))::selection{background:var(--br-c);color:var(--br-ink)} body[data-tk-theme] :focus-visible:where(:not(tk-screen *, tk-note *)){outline:3px solid var(--br-ink);outline-offset:3px;border-radius:0;box-shadow:0 0 0 6px var(--br-c)} /* The exposed grid: twelve hairline columns over the paper, the raw layout left showing. */ body[data-tk-theme]::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:repeating-linear-gradient(90deg,rgba(13,13,13,.075) 0 1px,transparent 1px calc(100% / 12)); width:min(var(--tk-page-width),100vw);margin:0 auto;left:0;right:0} body[data-tk-theme] tk-page:where(:not(tk-screen *, tk-note *)){position:relative;z-index:1} body[data-tk-theme] tk-progress:where(:not(tk-screen *, tk-note *)){height:10px;background:var(--br-ink);z-index:31} body[data-tk-theme] tk-progress i:where(:not(tk-screen *, tk-note *)){background:var(--br-c)} /* ================= HERO: a poster on the grid ================= */ body[data-tk-theme] tk-hero:where(:not(tk-screen *, tk-note *)){position:relative;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:0;align-content:end; min-height:min(44rem,86vh);padding:clamp(2rem,4vw,3.5rem) 0 0;margin:0 0 4.5rem;border:0;border-bottom:14px solid var(--br-ink);isolation:isolate} body[data-tk-theme] tk-hero:where(:not(tk-screen *, tk-note *))::after{content:"";position:absolute;inset:0 0 0 auto;width:calc(5 / 12 * 100%);z-index:-1;border:0; background:var(--br-art-wedge);transform:none} body[data-tk-theme] tk-hero>*:where(:not(tk-screen *, tk-note *)){grid-column:1;position:relative;z-index:2} /* exposed structure: a measuring rule along the top edge of the poster, registration crosses at its corners */ body[data-tk-theme] tk-hero:where(:not(tk-screen *, tk-note *))::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:2.2rem;pointer-events:none; background:repeating-linear-gradient(90deg,var(--br-ink) 0 1px,transparent 1px calc(100% / 48)) 0 0/100% .45rem no-repeat, repeating-linear-gradient(90deg,var(--br-ink) 0 2px,transparent 2px calc(100% / 12)) 0 0/100% .95rem no-repeat} /* the compositions (layers on the right-hand panel) */ body[data-tk-theme]{ --br-art-wedge: conic-gradient(from 250deg at 60% 40%,transparent 0deg,var(--br-a) 0deg 21deg,transparent 21deg) no-repeat, radial-gradient(circle at 70% 36%,var(--br-sheet) 0 22%,transparent calc(22% + 1px)) no-repeat, linear-gradient(var(--br-ink),var(--br-ink)) 100% 0/62% 100% no-repeat, linear-gradient(var(--br-c),var(--br-c)) 100% 92%/38% 9% no-repeat; --br-art-disc: linear-gradient(-28deg,transparent calc(56% - 18px),var(--br-ink) calc(56% - 18px) calc(56% + 18px),transparent calc(56% + 18px)) no-repeat, radial-gradient(circle at 62% 42%,var(--br-a) 0 34%,transparent calc(34% + 1px)) no-repeat, linear-gradient(var(--br-b),var(--br-b)) 14% 82%/30% 26% no-repeat, linear-gradient(var(--br-c),var(--br-c)) 92% 6%/14% 11% no-repeat; --br-art-bars: repeating-linear-gradient(-62deg,transparent 0 46px,var(--br-ink) 46px 70px,transparent 70px 118px,var(--br-a) 118px 150px,transparent 150px 190px) no-repeat, linear-gradient(var(--br-c),var(--br-c)) 0 100%/100% 22% no-repeat; --br-art-grid: radial-gradient(circle at 70% 30%,transparent 0 21%,var(--br-ink) 21% calc(21% + 3px),transparent calc(21% + 4px)) no-repeat, linear-gradient(var(--br-b),var(--br-b)) 22% 76%/38% 30% no-repeat, linear-gradient(90deg,var(--br-ink) 2px,transparent 2px) 0 0/25% 100%, linear-gradient(var(--br-ink) 2px,transparent 2px) 0 0/100% 16.66%; } body[data-tk-theme][data-br-hero="disc"] tk-hero:where(:not(tk-screen *, tk-note *))::after{background:var(--br-art-disc)} body[data-tk-theme][data-br-hero="bars"] tk-hero:where(:not(tk-screen *, tk-note *))::after{background:var(--br-art-bars)} body[data-tk-theme][data-br-hero="grid"] tk-hero:where(:not(tk-screen *, tk-note *))::after{background:var(--br-art-grid)} body[data-tk-theme][data-br-geometry="lots"] tk-hero:where(:not(tk-screen *, tk-note *))::after{background: radial-gradient(circle at 18% 18%,var(--br-c) 0 7%,transparent calc(7% + 1px)) no-repeat, linear-gradient(90deg,var(--br-a) 0 0) 96% 96%/12% 8% no-repeat,var(--br-art-wedge)} body[data-tk-theme][data-br-geometry="lots"][data-br-hero="disc"] tk-hero:where(:not(tk-screen *, tk-note *))::after{background:radial-gradient(circle at 20% 22%,transparent 0 9%,var(--br-ink) 9% calc(9% + 5px),transparent calc(9% + 6px)) no-repeat,var(--br-art-disc)} body[data-tk-theme][data-br-geometry="lots"][data-br-hero="bars"] tk-hero:where(:not(tk-screen *, tk-note *))::after{background:radial-gradient(circle at 74% 30%,var(--br-b) 0 18%,transparent calc(18% + 1px)) no-repeat,var(--br-art-bars)} body[data-tk-theme][data-br-geometry="lots"][data-br-hero="grid"] tk-hero:where(:not(tk-screen *, tk-note *))::after{background:conic-gradient(from 200deg at 100% 0%,var(--br-a) 0 24deg,transparent 24deg) no-repeat,var(--br-art-grid)} body[data-tk-theme]:is([data-br-hero="type"],[data-br-geometry="none"]) tk-hero:where(:not(tk-screen *, tk-note *)){grid-template-columns:minmax(0,1fr);min-height:0} body[data-tk-theme]:is([data-br-hero="type"],[data-br-geometry="none"]) tk-hero:where(:not(tk-screen *, tk-note *))::after{content:none} /* with no artwork the title takes the whole width */ @media(min-width:821px){body[data-tk-theme]:is([data-br-hero="type"],[data-br-geometry="none"]) tk-hero tk-tape-title>h1:where(:not(tk-screen *, tk-note *)){font-size:clamp(3rem,15.5vw,17rem)} body[data-tk-theme]:is([data-br-hero="type"],[data-br-geometry="none"]) tk-hero tk-tape-title[data-tk-length="medium"]>h1:where(:not(tk-screen *, tk-note *)){font-size:clamp(2.8rem,13vw,14rem)} body[data-tk-theme]:is([data-br-hero="type"],[data-br-geometry="none"]) tk-hero tk-tape-title[data-tk-length="long"]>h1:where(:not(tk-screen *, tk-note *)){font-size:clamp(2.4rem,9vw,10rem)}} /* the title: oversized, condensed, one line knocked out of a bar that runs off the page */ body[data-tk-theme] :is(tk-tape-title>:is(h1,h2,h3),tk-tape-title .tk-tape-line,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:where(:not(tk-screen *, tk-note *)){margin:0 0 1.6rem;--tilt:0deg} /* the turn goes on only after the kit has split the lines (it measures an unturned heading) */ body[data-tk-theme] tk-tape-title>[data-tk-lines]:where(:not(tk-screen *, tk-note *)){transform:rotate(calc(var(--br-rot) * -1.2deg));transform-origin:0 100%} body[data-tk-theme] tk-tape-title>:is(h1,h2,h3):where(:not(tk-screen *, tk-note *)){color:var(--br-ink)!important;padding:0;max-width:none} 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:900 var(--tk-size-h1)/.84 var(--br-disp);font-stretch:58%; letter-spacing:-.015em;text-transform:uppercase;max-width:none} body[data-tk-theme] tk-hero tk-tape-title[data-tk-length="medium"]>h1:where(:not(tk-screen *, tk-note *)){font-size:clamp(2.8rem,10.6vw,11.5rem)} body[data-tk-theme] tk-hero tk-tape-title[data-tk-length="long"]>h1:where(:not(tk-screen *, tk-note *)){font-size:clamp(2.4rem,7.4vw,8rem)} body[data-tk-theme] tk-tape-title .tk-tape-line:where(:not(tk-screen *, tk-note *)){display:table;padding:.04em 0 0;margin:0;max-width:100%} body[data-tk-theme] tk-tape-title .tk-tape-ink:where(:not(tk-screen *, tk-note *)){transform:none} body[data-tk-theme] tk-tape-title .tk-tape-line:nth-child(2):where(:not(tk-screen *, tk-note *)){position:relative;color:var(--br-on-a);padding:.08em .2em 0 0;margin:.04em 0} body[data-tk-theme] tk-tape-title .tk-tape-line:nth-child(2):where(:not(tk-screen *, tk-note *))::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:0;left:-100vw;background:var(--br-a); clip-path:polygon(0 0,100% 0,calc(100% - .32em) 100%,0 100%)} body[data-tk-theme] tk-tape-title .tk-tape-line:nth-child(4):where(:not(tk-screen *, tk-note *)){font-stretch:120%;font-size:.5em;letter-spacing:.01em;margin-top:.12em} body[data-tk-theme] tk-tape-title>.tk-tape-measure:where(:not(tk-screen *, tk-note *)){padding:0 .3em 0 0!important} body[data-tk-theme] tk-tape-title:not([data-tk-dense]) h1:not([data-tk-lines]):where(:not(tk-screen *, tk-note *)){display:block} body[data-tk-theme] tk-hero p.tk-dek:where(:not(tk-screen *, tk-note *)){grid-column:1;margin:0;padding:1.1rem 2rem 1.2rem 0;max-width:34em;border-top:3px solid var(--br-ink); font:500 clamp(1.1rem,.98rem + .45vw,1.42rem)/1.36 var(--br-body);color:var(--br-ink)} body[data-tk-theme] tk-hero .tk-byline:where(:not(tk-screen *, tk-note *)){grid-column:1;margin:0;padding:.55rem 0 .6rem;border-top:1px solid var(--br-ink);display:block; font:500 .78rem/1.3 var(--br-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--br-ink)} body[data-tk-theme] tk-hero .tk-byline:where(:not(tk-screen *, tk-note *))::before{content:"";display:inline-block;width:.8rem;height:.8rem;margin-right:.6rem;vertical-align:-.05em;background:var(--br-a)} /* the stamp: a band slapped across the top corner of the poster, cut by its edge */ body[data-tk-theme] tk-stamp:where(:not(tk-screen *, tk-note *)){--stamp:var(--br-ink)} body[data-tk-theme] :is(tk-section,tk-card,tk-split>div)>tk-stamp:where(:not(tk-screen *, tk-note *)){margin:1.2rem .5rem 1.8rem .3rem} body[data-tk-theme] tk-stamp .tk-stamp-face:where(:not(tk-screen *, tk-note *)){-webkit-mask:none;mask:none;mix-blend-mode:normal;opacity:1;border:0;border-radius:0;background:var(--br-c);color:var(--br-ink); flex-direction:row;gap:.8em;padding:.5em 1.2em .45em;white-space:nowrap;font:900 1.25rem/1 var(--br-disp);font-stretch:130%;letter-spacing:.06em;transform:rotate(calc(var(--br-rot) * -3deg)); box-shadow:inset 0 3px 0 var(--br-ink),inset 0 -3px 0 var(--br-ink)} body[data-tk-theme] tk-stamp .tk-stamp-date:where(:not(tk-screen *, tk-note *)){font:500 .78rem/1 var(--br-mono);letter-spacing:.1em} body[data-tk-theme] tk-hero tk-stamp:where(:not(tk-screen *, tk-note *)){position:absolute;grid-column:auto;top:0;right:0;z-index:4;width:24rem;height:13rem;margin:0;overflow:hidden;pointer-events:none} body[data-tk-theme] tk-hero tk-stamp .tk-stamp-face:where(:not(tk-screen *, tk-note *)){position:absolute;top:3.3rem;right:-3.4rem;width:21rem;justify-content:center;transform:rotate(calc(26deg + var(--br-rot) * 4deg)); animation:br-slap .45s cubic-bezier(.2,.9,.3,1.2) .25s both} @keyframes br-slap{from{translate:40% -40%;opacity:0}to{translate:0 0;opacity:1}} @media(max-width:820px){ body[data-tk-theme] tk-hero:where(:not(tk-screen *, tk-note *)){grid-template-columns:minmax(0,1fr);padding-top:15rem;min-height:0} body[data-tk-theme] tk-hero:where(:not(tk-screen *, tk-note *))::after{inset:0 -1.05rem auto -1.05rem;width:auto;height:13.4rem} body[data-tk-theme]:is([data-br-hero="type"],[data-br-geometry="none"]) tk-hero:where(:not(tk-screen *, tk-note *)){padding-top:2.2rem} body[data-tk-theme] tk-hero tk-stamp:where(:not(tk-screen *, tk-note *)){top:11.6rem;right:auto;left:-.4rem;width:auto;height:auto;overflow:visible} body[data-tk-theme] tk-hero tk-stamp .tk-stamp-face:where(:not(tk-screen *, tk-note *)){position:static;width:auto;font-size:1rem;transform:rotate(calc(var(--br-rot) * -3deg))} 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-size:17vw} 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-hero p.tk-dek:where(:not(tk-screen *, tk-note *)){padding-right:0}} /* ================= SECTIONS: a giant numeral, a wide heading, a cut rule ================= */ body[data-tk-theme] tk-section:where(:not(tk-screen *, tk-note *)){position:relative;margin:0 0 5.5rem} body[data-tk-theme] tk-section>h2:where(:not(tk-screen *, tk-note *)){position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:1.1rem;border:0;margin:0 0 2rem; padding:0 0 .7rem;font:850 var(--tk-size-h2)/.92 var(--br-disp);font-stretch:132%;text-transform:uppercase;letter-spacing:-.01em; background:linear-gradient(var(--br-ink),var(--br-ink)) 0 100%/100% 6px no-repeat} body[data-tk-theme] tk-section>h2:where(:not(tk-screen *, tk-note *))::after{content:"";position:absolute;right:0;bottom:0;width:min(30%,14rem);height:18px;background:var(--br-ink);clip-path:polygon(18px 0,100% 0,100% 100%,0 100%)} body[data-tk-theme] tk-section>h2:where(:not(tk-screen *, tk-note *))::before{content:counter(tk-sec);margin:0 0 -.12em;font:900 2.9em/.78 var(--br-disp);font-stretch:50%;letter-spacing:-.02em;color:var(--br-a); display:block;transform:rotate(calc(var(--br-rot) * -2deg));transform-origin:0 100%} body[data-tk-theme] tk-section:nth-of-type(4n+2)>h2:where(:not(tk-screen *, tk-note *))::before{color:transparent;-webkit-text-stroke:3px var(--br-ink)} body[data-tk-theme] tk-section:nth-of-type(4n+3)>h2:where(:not(tk-screen *, tk-note *))::before{color:var(--br-b)} body[data-tk-theme][data-br-palette="mono"] tk-section:nth-of-type(4n+3)>h2:where(:not(tk-screen *, tk-note *))::before{color:var(--br-ink)} body[data-tk-theme] tk-section:nth-of-type(4n+4)>h2:where(:not(tk-screen *, tk-note *))::before{color:var(--br-ink);background:var(--br-c);padding:.08em .08em 0} body[data-tk-theme] tk-section>h2 .tk-anchor:where(:not(tk-screen *, tk-note *)){font:500 .4em var(--br-mono);color:var(--br-muted);align-self:start} /* phones: a long word (RECOMMENDATION) must fit beside the numeral, so the heading narrows instead of running off the page */ @media(max-width:640px){body[data-tk-theme] tk-section>h2:where(:not(tk-screen *, tk-note *)){font-size:clamp(1.3rem,6.4vw,1.7rem);font-stretch:104%;column-gap:.8rem;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}} 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:800 var(--tk-size-h3)/1.05 var(--br-disp);font-stretch:118%;text-transform:uppercase;letter-spacing:0} body[data-tk-theme] :is(tk-section,tk-split>div)>p:where(:not(tk-screen *, tk-note *)){max-width:var(--tk-measure);line-height:1.6} body[data-tk-theme] strong:where(:not(tk-screen *, tk-note *)){font-weight:750} /* the first paragraph of the sheet sets big, like a poster's standfirst */ body[data-tk-theme] tk-section:first-of-type>h2+p:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-section:first-of-type>h2+tk-slip+p:where(:not(tk-screen *, tk-note *)){font:600 clamp(1.15rem,1rem + .55vw,1.5rem)/1.38 var(--br-body);max-width:36rem} /* raw web links: blue, underlined, inverted under the pointer */ body[data-tk-theme] a:where(:not(tk-screen *, tk-note *)){color:var(--br-link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em;text-decoration-color:currentColor} body[data-tk-theme] a:hover:where(:not(tk-screen *, tk-note *)){background:var(--br-ink);color:var(--br-paper);text-decoration-color:var(--br-c)} body[data-tk-theme] a:visited:where(:not(tk-screen *, tk-note *)){color:color-mix(in srgb,var(--br-link) 70%,#6a0dad)} body[data-tk-theme] tk-toc li a:where(:not(tk-screen *, tk-note *)){text-decoration:none} body[data-tk-theme] tk-toc li a:hover:where(:not(tk-screen *, tk-note *)){text-decoration:underline} body[data-tk-theme] code:not(pre code):where(:not(tk-screen *, tk-note *)){background:var(--br-ink);color:var(--br-paper);border-radius:0;padding:.05em .3em} body[data-tk-theme] tk-mark:is(:not([kind]),[kind="highlight"]):where(:not(tk-screen *, tk-note *)){background:var(--br-c);color:var(--br-ink);padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone} body[data-tk-theme] tk-mark[kind="underline"]:where(:not(tk-screen *, tk-note *)){text-decoration:underline;text-decoration-style:solid;text-decoration-color:var(--br-a);text-decoration-thickness:.24em;text-underline-offset:.08em;text-decoration-skip-ink:none} body[data-tk-theme] tk-mark[kind="circle"]:where(:not(tk-screen *, tk-note *))::after{border-color:var(--br-a);border-radius:50%;-webkit-mask:none;mask:none} body[data-tk-theme] blockquote:where(:not(tk-screen *, tk-note *)){position:relative;margin:2rem 0;padding:.4rem 0 .5rem 4.2rem;border:0;font:800 clamp(1.35rem,1.05rem + 1vw,2rem)/1.08 var(--br-disp);font-stretch:88%;letter-spacing:-.005em} body[data-tk-theme] blockquote:where(:not(tk-screen *, tk-note *))::before{content:"\201C";position:absolute;left:0;top:-.08em;font:900 5.4rem/1 var(--br-disp);font-stretch:60%;color:var(--br-a)} body[data-tk-theme] .tk-note:where(:not(tk-screen *, tk-note *)){color:var(--br-muted);font:500 .82rem/1.45 var(--br-mono);letter-spacing:0;text-transform:none} /* a section can print as a solid block */ body[data-tk-theme] tk-section[data-br-tone]:where(:not(tk-screen *, tk-note *)){padding:clamp(1.4rem,3vw,2.6rem);margin-inline:calc(-1 * clamp(.4rem,1.5vw,1.6rem))} body[data-tk-theme] tk-section[data-br-tone="ink"]:where(:not(tk-screen *, tk-note *)){background:var(--br-ink);color:var(--br-paper);--br-link:var(--br-c)} body[data-tk-theme] tk-section[data-br-tone="ink"]>h2:where(:not(tk-screen *, tk-note *)){background-image:linear-gradient(var(--br-paper),var(--br-paper))} body[data-tk-theme] tk-section[data-br-tone="ink"]>h2:where(:not(tk-screen *, tk-note *))::after{background:var(--br-paper)} body[data-tk-theme] tk-section[data-br-tone="a"]:where(:not(tk-screen *, tk-note *)){background:var(--br-a);color:var(--br-on-a)} body[data-tk-theme] tk-section[data-br-tone="c"]:where(:not(tk-screen *, tk-note *)){background:var(--br-c);color:var(--br-ink)} body[data-tk-theme] tk-section[data-br-tone]>h2:where(:not(tk-screen *, tk-note *))::before{color:inherit;-webkit-text-stroke:0;background:none} /* ================= STATS: a raw table of giant numerals ================= */ body[data-tk-theme] tk-stats:where(:not(tk-screen *, tk-note *)){gap:0;border:3px solid var(--br-ink);background:var(--br-sheet);margin:2.6rem 0;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr))} 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 *)){position:relative;overflow:hidden;padding:1rem 1.1rem 1.15rem;border:0;border-left:3px solid var(--br-ink);margin-left:-3px;isolation:isolate} body[data-tk-theme] tk-stats>tk-stat:first-child:where(:not(tk-screen *, tk-note *)){background:var(--br-ink);color:var(--br-paper)} body[data-tk-theme] tk-stat .tk-value:where(:not(tk-screen *, tk-note *)){font:900 max(2.8rem,min(5.4rem,34cqi))/.82 var(--br-disp);font-stretch:52%;letter-spacing:-.01em;color:inherit;margin:0 0 .7rem} body[data-tk-theme] tk-stat .tk-label:where(:not(tk-screen *, tk-note *)){font:800 .98rem/1.1 var(--br-disp);font-stretch:120%;text-transform:uppercase;color:inherit} body[data-tk-theme] tk-stat .tk-delta:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] tk-stat[data-trend] .tk-delta:where(:not(tk-screen *, tk-note *)){display:inline-block;margin-top:.55rem;padding:.12rem .4rem;background:var(--br-ink);color:var(--br-paper); font:500 .8rem/1.3 var(--br-mono);letter-spacing:.02em} body[data-tk-theme] tk-stats>tk-stat:first-child .tk-delta:where(:not(tk-screen *, tk-note *)){background:var(--br-c);color:var(--br-ink)} body[data-tk-theme] tk-stat:nth-child(3):where(:not(tk-screen *, tk-note *)){background:var(--br-c);color:var(--br-ink)} body[data-tk-theme]:not([data-br-geometry="none"]) tk-stat:nth-child(2):where(:not(tk-screen *, tk-note *))::after{content:"";position:absolute;z-index:-1;right:-2.4rem;top:-2.4rem;width:6rem;height:6rem;border-radius:50%;background:var(--br-a)} body[data-tk-theme]:not([data-br-geometry="none"]) tk-stat:nth-child(4):where(:not(tk-screen *, tk-note *))::after{content:"";position:absolute;z-index:-1;right:0;bottom:0;width:4rem;height:4rem;background:var(--br-b);clip-path:polygon(100% 0,100% 100%,0 100%)} body[data-tk-theme][data-br-geometry="lots"] tk-stats>tk-stat:first-child:where(:not(tk-screen *, tk-note *))::after{content:"";position:absolute;right:.9rem;top:.9rem;width:1.6rem;height:1.6rem;background:var(--br-a);transform:rotate(calc(var(--br-rot) * 14deg))} body[data-tk-theme][data-br-geometry="lots"] tk-stat:nth-child(3):where(:not(tk-screen *, tk-note *))::after{content:"";position:absolute;z-index:-1;right:-1.4rem;bottom:-1.4rem;width:4.6rem;height:4.6rem;border-radius:50%;border:8px solid var(--br-ink)} @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 *)){border-left:3px solid var(--br-ink);border-top:3px solid var(--br-ink);margin:-3px 0 0 -3px;padding:.8rem .8rem .9rem}} /* ================= CARDS + CHARTS: sheets pinned to the grid, one corner cut off ================= */ body[data-tk-theme] tk-grid:where(:not(tk-screen *, tk-note *)){gap:0;border-top:3px solid var(--br-ink)} body[data-tk-theme] tk-card:where(:not(tk-screen *, tk-note *)){position:relative;background:var(--br-sheet);border:0;border-left:3px solid var(--br-ink);border-bottom:3px solid var(--br-ink);padding:1.1rem 1.3rem 1.2rem;margin:0; clip-path:polygon(0 0,calc(100% - 2.2rem) 0,100% 2.2rem,100% 100%,0 100%)} body[data-tk-theme] tk-grid>tk-card:last-child:where(:not(tk-screen *, tk-note *)){border-right:3px solid var(--br-ink)} body[data-tk-theme] tk-grid>tk-card:nth-child(even):where(:not(tk-screen *, tk-note *)){background:var(--br-paper)} body[data-tk-theme] tk-card:where(:not(tk-screen *, tk-note *))::before{content:"";position:absolute;right:0;top:0;width:2.2rem;height:2.2rem;background:linear-gradient(225deg,transparent 50%,var(--br-ink) 50% calc(50% + 2px),transparent calc(50% + 2px))} body[data-tk-theme] tk-card>h3:first-child:where(:not(tk-screen *, tk-note *)){font-size:1.1rem;padding:0 2rem .6rem 0;margin:0 0 .4rem;border-bottom:1px solid var(--br-ink)} body[data-tk-theme] tk-chart .tk-sub:where(:not(tk-screen *, tk-note *)){font:500 .8rem/1.3 var(--br-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--br-muted)} body[data-tk-theme] tk-chart details.tk-fallback summary:where(:not(tk-screen *, tk-note *)){font:500 .8rem var(--br-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--br-ink)} @media(max-width:640px){body[data-tk-theme] tk-grid:where(:not(tk-screen *, tk-note *)){grid-template-columns:minmax(0,1fr)} body[data-tk-theme] tk-card:where(:not(tk-screen *, tk-note *)){border-right:3px solid var(--br-ink)}} /* ================= CALLOUTS ================= */ body[data-tk-theme] tk-callout:where(:not(tk-screen *, tk-note *)){position:relative;border:0;border-radius:0;background:var(--br-sheet);border-left:10px solid var(--br-ink);padding:1.2rem 1.4rem;max-width:48rem;margin:2.2rem 0;font-weight:500} body[data-tk-theme] tk-callout strong.tk-label:where(:not(tk-screen *, tk-note *)){float:none;display:table;margin:0 0 .7rem;background:var(--br-ink);color:var(--br-paper);padding:.25rem .55rem .2rem;opacity:1; font:900 1rem/1 var(--br-disp);font-stretch:130%;letter-spacing:.08em;text-transform:uppercase;transform:rotate(calc(var(--br-rot) * -2deg))} 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} /* decision: a black block with a hard-cut arrow end */ body[data-tk-theme] tk-callout[data-kind="decision"]:where(:not(tk-screen *, tk-note *)){background:var(--br-ink);color:var(--br-paper);border:0;padding:1.5rem clamp(5.5rem,14%,9rem) 1.5rem 1.6rem; clip-path:polygon(0 0,calc(100% - 3.4rem) 0,100% 50%,calc(100% - 3.4rem) 100%,0 100%);font:600 1.12rem/1.45 var(--br-body)} body[data-tk-theme] tk-callout[data-kind="decision"] strong.tk-label:where(:not(tk-screen *, tk-note *)){background:var(--br-a);color:var(--br-on-a)} body[data-tk-theme] tk-callout[data-kind="decision"]:where(:not(tk-screen *, tk-note *))::after{content:"";position:absolute;right:3.4rem;top:0;bottom:0;width:1.4rem;background:var(--br-c);clip-path:polygon(0 0,40% 0,100% 50%,40% 100%,0 100%,60% 50%)} @media(max-width:640px){ body[data-tk-theme] tk-callout[data-kind="decision"]:where(:not(tk-screen *, tk-note *)){padding:1.3rem 3.5rem 1.3rem 1.2rem;font-size:1.02rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)} body[data-tk-theme] tk-callout[data-kind="decision"]:where(:not(tk-screen *, tk-note *))::after{right:2rem;width:1rem}} /* warning: hazard stripes cut on a diagonal */ body[data-tk-theme] tk-callout[data-kind="warning"]:where(:not(tk-screen *, tk-note *)){background:var(--br-c);color:var(--br-ink);border:0;padding-left:4.4rem;clip-path:polygon(0 0,100% 0,100% 100%,1.6rem 100%,0 calc(100% - 1.6rem))} body[data-tk-theme] tk-callout[data-kind="warning"]:where(:not(tk-screen *, tk-note *))::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2.8rem;background:repeating-linear-gradient(-45deg,var(--br-ink) 0 12px,var(--br-c) 12px 24px)} body[data-tk-theme] tk-callout[data-kind="risk"]:where(:not(tk-screen *, tk-note *)){background:var(--br-a);color:var(--br-on-a);border:0} body[data-tk-theme] tk-callout[data-kind="tip"]:where(:not(tk-screen *, tk-note *)){background:var(--br-paper);border-left-color:var(--br-b)} /* ================= TABLE: a raw HTML table, borders on every cell ================= */ body[data-tk-theme] tk-table:where(:not(tk-screen *, tk-note *)){margin:2.4rem 0} body[data-tk-theme] tk-table .tk-wrap:where(:not(tk-screen *, tk-note *)){border:3px solid var(--br-ink);background:var(--br-sheet);padding:3px} body[data-tk-theme] tk-table table:where(:not(tk-screen *, tk-note *)){border-collapse:separate;border-spacing:3px;font:500 .95rem/1.3 var(--br-body)} body[data-tk-theme] tk-table :is(th,td):where(:not(tk-screen *, tk-note *)){border:1px solid var(--br-ink);padding:.5rem .7rem} body[data-tk-theme] tk-table thead th:where(:not(tk-screen *, tk-note *)){background:var(--br-ink);color:var(--br-paper);border-color:var(--br-ink);font:500 .8rem/1.2 var(--br-mono);letter-spacing:.05em;text-transform:uppercase} body[data-tk-theme] tk-table th button:where(:not(tk-screen *, tk-note *)){color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit} body[data-tk-theme] tk-table th[aria-sort]:where(:not(tk-screen *, tk-note *)){background:var(--br-a);color:var(--br-on-a)} body[data-tk-theme] tk-table th button:focus-visible:where(:not(tk-screen *, tk-note *)){outline-color:var(--br-c);box-shadow:none} body[data-tk-theme] tk-table tbody td:first-child:where(:not(tk-screen *, tk-note *)){font:800 1rem/1.2 var(--br-disp);font-stretch:100%;text-transform:none} body[data-tk-theme] tk-table td.tk-num:where(:not(tk-screen *, tk-note *)){font:500 .95rem/1.3 var(--br-mono)} body[data-tk-theme] tk-table tbody tr:hover td:where(:not(tk-screen *, tk-note *)){background:var(--br-c)} /* phones: each stacked row is one heavy card, cells split by thin rules (no box-in-box) */ @media(max-width:640px){ body[data-tk-theme] tk-table[stack] table:where(:not(tk-screen *, tk-note *)){border-spacing:0} body[data-tk-theme] tk-table[stack] tr:where(:not(tk-screen *, tk-note *)){border:3px solid var(--br-ink);padding:.2rem .8rem;background:var(--br-sheet)} body[data-tk-theme] tk-table[stack] td:where(:not(tk-screen *, tk-note *)){border:0;border-bottom:1px solid var(--br-ink);padding:.55rem 0} body[data-tk-theme] tk-table[stack] td:last-child:where(:not(tk-screen *, tk-note *)){border-bottom:0}} /* ================= THE PICTURE: collage, a print over a cut colour block (true colour; data-br-photo="halftone" screens it) ================= */ body[data-tk-theme] tk-taped:where(:not(tk-screen *, tk-note *)){width:auto;max-width:calc(100% - 1.4rem);margin:1.4rem 1.4rem 2.6rem 0;padding:0;isolation:isolate} body[data-tk-theme] tk-taped:where(:not(tk-screen *, tk-note *))::before{content:"";--tilt:0deg;position:absolute;z-index:-1;inset:1.4rem -1.4rem -1.4rem 1.4rem;width:auto;height:auto;margin:0;background:var(--br-a);opacity:1;-webkit-mask:none;mask:none; mix-blend-mode:normal;clip-path:polygon(0 0,100% 0,100% 100%,22% 100%);transform:rotate(calc(var(--br-rot) * 1.5deg))} body[data-tk-theme] tk-taped>.tk-print:where(:not(tk-screen *, tk-note *)){background:var(--br-sheet);padding:0;border:3px solid var(--br-ink);box-shadow:none;transform:rotate(calc(var(--br-rot) * -1.6deg))} body[data-tk-theme] tk-taped>.tk-print:where(:not(tk-screen *, tk-note *))::after{content:none} body[data-tk-theme][data-br-photo="halftone"] tk-taped:not([data-br-photo])>.tk-print:where(:not(tk-screen *, tk-note *))::after,body[data-tk-theme] tk-taped[data-br-photo="halftone"]>.tk-print:where(:not(tk-screen *, tk-note *))::after{content:"";background:radial-gradient(circle,rgba(13,13,13,.55) 0 1px,transparent 1.6px) 0 0/5px 5px;mix-blend-mode:multiply;opacity:.55;inset:0 0 auto;height:calc(100% - 2.6rem)} body[data-tk-theme] :is(tk-taped,tk-image,tk-figure) img:where(:not(tk-screen *, tk-note *)){border-radius:0} body[data-tk-theme][data-br-photo="halftone"] :is(tk-taped,tk-image,tk-figure):not([data-br-photo]) img:where(:not(tk-screen *, tk-note *)),body[data-tk-theme] :is(tk-taped,tk-image,tk-figure)[data-br-photo="halftone"] img:where(:not(tk-screen *, tk-note *)){filter:grayscale(1) contrast(1.5) brightness(1.06)} body[data-tk-theme][data-br-palette="mono"][data-br-photo="halftone"] tk-taped:not([data-br-photo]) img:where(:not(tk-screen *, tk-note *)),body[data-tk-theme][data-br-palette="mono"] tk-taped[data-br-photo="halftone"] img:where(:not(tk-screen *, tk-note *)){filter:grayscale(1) contrast(1.6) brightness(1.08)} 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 *)){display:block;max-width:none;margin:0;padding:.55rem .75rem .5rem;background:var(--br-ink);color:var(--br-paper); font:500 .8rem/1.3 var(--br-mono);letter-spacing:.06em;text-transform:uppercase} /* ================= THE SLIP: a newspaper clipping glued on crooked ================= */ body[data-tk-theme] tk-slip:where(:not(tk-screen *, tk-note *)){max-width:20rem;padding:0;margin:1.4rem 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:rotate(calc(var(--br-rot) * 2.4deg));background:#FBFAF6;color:var(--br-ink);padding:1.3rem 1.2rem 1.1rem 1.2rem; font:700 1.1rem/1.32 var(--br-body);border-top:6px solid var(--br-ink); -webkit-mask:linear-gradient(#000,#000) 0 0/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) 0 100%/14px 8px repeat-x; mask:linear-gradient(#000,#000) 0 0/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) 0 100%/14px 8px repeat-x} body[data-tk-theme] tk-slip .tk-paper:where(:not(tk-screen *, tk-note *))::before{content:"";position:absolute;left:-.6rem;top:-1rem;width:5.2rem;height:1.7rem;background:var(--br-a);transform:rotate(-8deg);mix-blend-mode:multiply} body[data-tk-theme] tk-slip .tk-paper :is(p,li,a,strong):where(:not(tk-screen *, tk-note *)){color:var(--br-ink)} body[data-tk-theme] tk-slip .tk-from:where(:not(tk-screen *, tk-note *)){margin-top:.8rem;text-align:left;color:var(--br-muted);font:500 .8rem/1.2 var(--br-mono);letter-spacing:.06em;text-transform:uppercase} /* ================= CODE, DETAILS ================= */ body[data-tk-theme] tk-code pre:where(:not(tk-screen *, tk-note *)){border:3px solid var(--br-ink);border-radius:0;padding:2.9rem 1.2rem 1.1rem; background:linear-gradient(var(--br-ink),var(--br-ink)) 0 0/100% 2rem no-repeat,repeating-linear-gradient(transparent 0 1.55em,rgba(13,13,13,.05) 1.55em 3.1em) 0 2.9rem,var(--br-sheet)} body[data-tk-theme] tk-code:where(:not(tk-screen *, tk-note *))::before{top:.55rem;left:1.2rem;color:var(--br-c);opacity:1;font:500 .8rem var(--br-mono);letter-spacing:.1em;text-transform:uppercase} body[data-tk-theme] tk-code .tk-copy:where(:not(tk-screen *, tk-note *)){top:3px;right:3px;min-height:2rem;color:var(--br-paper);background:var(--br-a);opacity:1;font:500 .8rem var(--br-mono);letter-spacing:.1em;text-transform:uppercase;border-radius:0} body[data-tk-theme] tk-details:where(:not(tk-screen *, tk-note *)){border-top:3px solid var(--br-ink);border-bottom:0;margin:0} body[data-tk-theme] tk-details+tk-details:where(:not(tk-screen *, tk-note *)){border-top-width:1px} body[data-tk-theme] tk-details:last-of-type:where(:not(tk-screen *, tk-note *)){border-bottom:3px solid var(--br-ink);margin-bottom:2.4rem} body[data-tk-theme] tk-details summary:where(:not(tk-screen *, tk-note *)){font:850 1.15rem/1.15 var(--br-disp);font-stretch:118%;text-transform:uppercase;padding:.9rem 0} body[data-tk-theme] tk-details summary:hover:where(:not(tk-screen *, tk-note *)){background:var(--br-c)} body[data-tk-theme] tk-details details>:is(p,ul,ol):where(:not(tk-screen *, tk-note *)){max-width:var(--tk-measure)} body[data-tk-theme] tk-details summary:where(:not(tk-screen *, tk-note *))::after{content:"+";flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;background:var(--br-ink);color:var(--br-paper);font:500 1.4rem/1 var(--br-mono)} body[data-tk-theme] tk-details details[open]>summary:where(:not(tk-screen *, tk-note *))::after{content:"\2212";background:var(--br-a);color:var(--br-on-a)} /* ================= THE BREAK: a ticker band across the page ================= */ body[data-tk-theme] tk-torn:where(:not(tk-screen *, tk-note *)){margin:4.5rem 0 4.5rem calc(50% - 50vw);width:calc(100vw - 1px);max-width:none;padding:0;min-height:0;-webkit-mask:none;mask:none;background:var(--br-ink);color:var(--br-paper); transform:none;clip-path:polygon(0 calc(var(--br-rot) * 1.1rem),100% 0,100% calc(100% - var(--br-rot) * 1.1rem),0 100%);overflow:hidden;white-space:nowrap;text-align:left;font-size:0;line-height:0;border-block:6px solid var(--br-c)} body[data-tk-theme] tk-torn:where(:not(tk-screen *, tk-note *))::before{content:attr(aria-label) " \2193 " attr(aria-label) " \2193 " attr(aria-label) " \2193 " attr(aria-label) " \2193 " attr(aria-label) " \2193 " attr(aria-label) " \2193 " attr(aria-label) " \2193 " attr(aria-label) " \2193 " attr(aria-label) " \2193 " attr(aria-label) " \2193 "; display:inline-block;white-space:pre;padding:.7rem 0 .55rem;font:900 2.6rem/1 var(--br-disp);font-stretch:140%;letter-spacing:.02em;text-transform:uppercase;animation:br-tick 38s linear infinite} body[data-tk-theme] tk-torn:not([aria-label]):where(:not(tk-screen *, tk-note *))::before{content:none} body[data-tk-theme] tk-torn:not([aria-label]):where(:not(tk-screen *, tk-note *)){min-height:2.2rem;background:repeating-linear-gradient(-45deg,var(--br-ink) 0 14px,var(--br-c) 14px 28px)} @keyframes br-tick{to{transform:translateX(-50%)}} /* ================= CONTROLS: raw form parts ================= */ body[data-tk-theme] .tk-controls:where(:not(tk-screen *, tk-note *)){border-top:6px solid var(--br-ink);border-bottom:3px solid var(--br-ink);gap:1.6rem 2.2rem;padding:1.3rem 0 1.4rem} 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:700 .9rem/1.2 var(--br-mono);text-transform:uppercase;letter-spacing:.08em} body[data-tk-theme] .tk-field output:where(:not(tk-screen *, tk-note *)){top:-.6rem;padding:.1rem .4rem;background:var(--br-ink);color:var(--br-paper);font:900 1.4rem/1 var(--br-disp);font-stretch:60%} body[data-tk-theme] input[type="range"]:where(:not(tk-screen *, tk-note *))::-webkit-slider-runnable-track{height:14px;border-radius:0;border:3px solid var(--br-ink); background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),var(--br-ink) calc(10% - 2px) 10%) 0 0/100% 40% no-repeat,linear-gradient(90deg,var(--br-a) var(--tk-fill),var(--br-sheet) var(--tk-fill))} body[data-tk-theme] input[type="range"]:where(:not(tk-screen *, tk-note *))::-moz-range-track{height:8px;border-radius:0;border:3px solid var(--br-ink);background:var(--br-sheet)} body[data-tk-theme] input[type="range"]:where(:not(tk-screen *, tk-note *))::-moz-range-progress{height:8px;background:var(--br-a)} body[data-tk-theme] input[type="range"]:where(:not(tk-screen *, tk-note *))::-webkit-slider-thumb{width:16px;height:34px;margin-top:-13px;border-radius:0;background:var(--br-ink);border:0;box-shadow:none} body[data-tk-theme] input[type="range"]:where(:not(tk-screen *, tk-note *))::-moz-range-thumb{width:16px;height:30px;border-radius:0;background:var(--br-ink);border:0;box-shadow:none} body[data-tk-theme] input[type="range"]:focus-visible:where(:not(tk-screen *, tk-note *))::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--br-c),0 0 0 6px var(--br-ink)} body[data-tk-theme] :is(tk-select select,tk-search input,tk-number input,tk-date input):where(:not(tk-screen *, tk-note *)){border:3px solid var(--br-ink);border-radius:0;background-color:var(--br-sheet);font:600 1rem var(--br-body);min-height:46px} body[data-tk-theme] tk-select select:where(:not(tk-screen *, tk-note *)){padding-right:3.4rem;background-image:linear-gradient(45deg,transparent 50%,var(--br-paper) 50%),linear-gradient(135deg,var(--br-paper) 50%,transparent 50%),linear-gradient(var(--br-ink),var(--br-ink)); background-position:calc(100% - 1.35rem) 54%,calc(100% - .95rem) 54%,100% 0;background-size:.42rem .42rem,.42rem .42rem,2.6rem 100%;background-repeat:no-repeat} body[data-tk-theme] :is(tk-select select,tk-search input,tk-number input,tk-date input):focus:where(:not(tk-screen *, tk-note *)){border-color:var(--br-ink);outline:0;box-shadow:0 0 0 4px var(--br-c)} body[data-tk-theme] tk-toggle button:where(:not(tk-screen *, tk-note *)){font:500 .8rem var(--br-mono);text-transform:uppercase;letter-spacing:.08em} body[data-tk-theme] tk-toggle .tk-track:where(:not(tk-screen *, tk-note *)){width:4.4rem;height:2rem;border-radius:0;border:3px solid var(--br-ink);background:var(--br-sheet)} body[data-tk-theme] tk-toggle .tk-track:where(:not(tk-screen *, tk-note *))::after{top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);border-radius:0;background:var(--br-ink);box-shadow:none; content:"OFF";display:grid;place-items:center;color:var(--br-paper);font:500 .56rem/1 var(--br-mono);letter-spacing:.04em} body[data-tk-theme] tk-toggle [aria-checked="true"] .tk-track:where(:not(tk-screen *, tk-note *)){background:var(--br-c)} body[data-tk-theme] tk-toggle [aria-checked="true"] .tk-track:where(:not(tk-screen *, tk-note *))::after{content:"ON";transform:translateX(calc(100% - 0px))} 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 *)){border:3px solid var(--br-ink);margin:0 0 0 -3px;border-radius:0; background:var(--br-sheet);font:800 .95rem var(--br-disp);font-stretch:118%;text-transform:uppercase} body[data-tk-theme] tk-radio-group legend+label:where(:not(tk-screen *, tk-note *)){margin-left:0} body[data-tk-theme] tk-radio-group label:hover:where(:not(tk-screen *, tk-note *)){background:var(--br-c)} body[data-tk-theme] tk-radio-group label:has(input:checked):where(:not(tk-screen *, tk-note *)){background:var(--br-ink);color:var(--br-paper);border-color:var(--br-ink)} body[data-tk-theme] tk-text:where(:not(tk-screen *, tk-note *)){font:900 1.15em/1 var(--br-disp);font-stretch:70%;background:var(--br-c);padding:0 .2em} /* ================= REPLY CARD ================= */ body[data-tk-theme] .tk-feedback:where(:not(tk-screen *, tk-note *)){background:var(--br-sheet);border:3px solid var(--br-ink);border-top:14px solid var(--br-ink);border-radius:0;box-shadow:none;padding:1.4rem 1.5rem 1.3rem;margin:2.6rem 0} body[data-tk-theme] .tk-feedback:where(:not(tk-screen *, tk-note *))::after{content:"";position:absolute;right:-3px;top:-14px;width:4.2rem;height:calc(100% + 17px);background:var(--br-a);clip-path:polygon(40% 0,100% 0,100% 100%,0 100%);z-index:0;pointer-events:none} body[data-tk-theme][data-br-geometry="none"] .tk-feedback:where(:not(tk-screen *, tk-note *))::after{content:none} body[data-tk-theme] .tk-feedback>*:where(:not(tk-screen *, tk-note *)){position:relative;z-index:1;margin-right:3rem} 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:850 clamp(1.4rem,1.1rem + 1.2vw,2.1rem)/1 var(--br-disp);font-stretch:125%;text-transform:uppercase} 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:3px solid var(--br-ink);border-top-width:0;border-radius:0;background:var(--br-paper);font-weight:600} body[data-tk-theme] .tk-feedback fieldset>label:first-of-type:where(:not(tk-screen *, tk-note *)){border-top-width:3px} body[data-tk-theme] .tk-feedback fieldset label:has(input:checked):where(:not(tk-screen *, tk-note *)){background:var(--br-c)} body[data-tk-theme] .tk-feedback input[type="radio"]:where(:not(tk-screen *, tk-note *)){border:3px solid var(--br-ink);border-radius:50%;width:1.2rem;height:1.2rem} body[data-tk-theme] .tk-feedback input[type="radio"]:where(:not(tk-screen *, tk-note *))::before{background:var(--br-ink);border-radius:50%} body[data-tk-theme] .tk-feedback :is(fieldset legend,label:not(fieldset label)):where(:not(tk-screen *, tk-note *)){font:800 1rem/1.25 var(--br-body);color:var(--br-ink)} body[data-tk-theme] .tk-feedback input[type="checkbox"]:where(:not(tk-screen *, tk-note *)){border:3px solid var(--br-ink);border-radius:0} body[data-tk-theme] .tk-feedback :is(textarea,input[type="text"],input[type="number"],select):where(:not(tk-screen *, tk-note *)){border:3px solid var(--br-ink);border-radius:0} body[data-tk-theme] .tk-feedback button.tk-submit:where(:not(tk-screen *, tk-note *)){background:var(--br-ink);border:0;border-radius:0;color:var(--br-paper);padding:.75rem 1.6rem .65rem;box-shadow:none; font:900 1.3rem/1 var(--br-disp);font-stretch:130%;text-transform:uppercase;letter-spacing:.02em} body[data-tk-theme] .tk-feedback button.tk-submit:hover:not(:disabled):where(:not(tk-screen *, tk-note *)){background:var(--br-a);color:var(--br-on-a)} body[data-tk-theme] .tk-feedback button.tk-submit:active:not(:disabled):where(:not(tk-screen *, tk-note *)){transform:translateY(2px)} body[data-tk-theme] .tk-feedback button.tk-submit:disabled:where(:not(tk-screen *, tk-note *)){background:repeating-linear-gradient(-45deg,var(--br-paper) 0 8px,#d7d4cc 8px 16px);color:var(--br-muted);border:3px solid var(--br-muted)} body[data-tk-theme] .tk-feedback .tk-scale button:where(:not(tk-screen *, tk-note *)){border:3px solid var(--br-ink);margin-left:-3px;border-radius:0;font-weight:700} body[data-tk-theme] .tk-feedback .tk-scale button[aria-pressed="true"]:where(:not(tk-screen *, tk-note *)){background:var(--br-ink);color:var(--br-paper)} body[data-tk-theme] .tk-feedback>.tk-note:where(:not(tk-screen *, tk-note *)){border-top:1px solid var(--br-ink)} @media(max-width:640px){ body[data-tk-theme] .tk-feedback:where(:not(tk-screen *, tk-note *)){padding:1.2rem 1.1rem 1.2rem} body[data-tk-theme] .tk-feedback:where(:not(tk-screen *, tk-note *))::after{width:1.8rem} body[data-tk-theme] .tk-feedback>*:where(:not(tk-screen *, tk-note *)){margin-right:1.1rem}} /* hard cuts move with the knob, and nothing ticks for people who asked for stillness */ @media(prefers-reduced-motion:reduce){body[data-tk-theme] tk-torn:where(:not(tk-screen *, tk-note *))::before{animation:none}body[data-tk-theme] tk-stamp .tk-stamp-face:where(:not(tk-screen *, tk-note *)){animation:none}} @media print{body[data-tk-theme]::before{display:none}} /* 1.7.0: answers that join a form: bare ruled blocks with Bauhaus marks; the red wedge stays on the form that sends. */ /* A joined question keeps the heavy frame but drops the wedge and half its top bar; its state is a circle (open), a square (answered) or a red triangle on a red slab (missing). Secondary buttons are 3px-ruled slabs; required jumps print in the bright colour; the count runs on a ruled bar in the deep colour. */ body[data-tk-theme] .tk-feedback.tk-joined:where(:not(tk-screen *, tk-note *)){border-top-width:8px;padding:1.1rem 1.3rem 1.1rem;margin:2rem 0} body[data-tk-theme] .tk-feedback.tk-joined:where(:not(tk-screen *, tk-note *))::after{content:none} body[data-tk-theme] .tk-feedback.tk-joined>*:where(:not(tk-screen *, tk-note *)){margin-right:0} body[data-tk-theme] .tk-feedback.tk-joined>h3:where(:not(tk-screen *, tk-note *)){margin-top:0;font-size:clamp(1.25rem,1rem + 1vw,1.75rem)} body[data-tk-theme] .tk-feedback h3>.tk-required:where(:not(tk-screen *, tk-note *)){color:var(--br-muted);font:700 .5em/1 var(--br-mono);font-stretch:100%;letter-spacing:.04em;text-transform:uppercase;vertical-align:.2em} body[data-tk-theme] .tk-feedback.tk-joined[data-tk-answer="missing"]:where(:not(tk-screen *, tk-note *)){outline:0;border-color:var(--br-a)} body[data-tk-theme] .tk-feedback.tk-joined.tk-answer-flash:where(:not(tk-screen *, tk-note *)){box-shadow:8px 8px 0 var(--br-c)} /* the state: mono capitals beside a Bauhaus mark */ body[data-tk-theme] .tk-feedback>.tk-answer-state:where(:not(tk-screen *, tk-note *)){max-width:none;margin-top:1rem;color:var(--br-muted);font:700 .78rem/1.3 var(--br-mono);letter-spacing:.04em;text-transform:uppercase} body[data-tk-theme] .tk-feedback .tk-answer-dot:where(:not(tk-screen *, tk-note *)){width:.9rem;height:.9rem;border:3px solid var(--br-ink)} 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:var(--br-ink)} 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-radius:0;border-color:var(--br-ink);background:var(--br-ink)} body[data-tk-theme] .tk-feedback[data-tk-answer="sent"] .tk-answer-dot:where(:not(tk-screen *, tk-note *)){border-color:var(--br-b);background:var(--br-b);box-shadow:none} body[data-tk-theme] .tk-feedback[data-tk-answer="missing"]>.tk-answer-state:where(:not(tk-screen *, tk-note *)){width:fit-content;max-width:100%;padding:.35rem .7rem .35rem .55rem;background:var(--br-a);color:var(--br-on-a);font-weight:700} body[data-tk-theme] .tk-feedback[data-tk-answer="missing"] .tk-answer-dot:where(:not(tk-screen *, tk-note *)){width:1rem;height:.9rem;border:0;border-radius:0;background:var(--br-on-a);clip-path:polygon(50% 0,100% 100%,0 100%)} /* secondary buttons: ruled slabs; hover and required print in the bright colour */ body[data-tk-theme] :is(.tk-feedback .tk-answer-go,.tk-answers-jump):where(:not(tk-screen *, tk-note *)){border:3px solid var(--br-ink);border-radius:0;background:var(--br-sheet);color:var(--br-ink);text-decoration:none} body[data-tk-theme] .tk-feedback .tk-answer-go:where(:not(tk-screen *, tk-note *)){padding:0 .8rem;font:900 .95rem/1 var(--br-disp);font-stretch:125%;letter-spacing:.02em;text-transform:uppercase} body[data-tk-theme] .tk-answers-jump:where(:not(tk-screen *, tk-note *)){font:700 .92rem/1.25 var(--br-body)} body[data-tk-theme] :is(.tk-feedback .tk-answer-go,.tk-answers-jump):hover:not(:disabled):where(:not(tk-screen *, tk-note *)){background:var(--br-c);color:var(--br-on-c)} body[data-tk-theme] .tk-answers-jump.tk-answers-must:where(:not(tk-screen *, tk-note *)){border-color:var(--br-ink);background:var(--br-c);color:var(--br-on-c)} body[data-tk-theme] .tk-answers-jump.tk-answers-must .tk-answers-req:where(:not(tk-screen *, tk-note *)){color:var(--br-on-c)} body[data-tk-theme] .tk-answers-req:where(:not(tk-screen *, tk-note *)){color:var(--br-muted);font-family:var(--br-mono);font-size:.8em;font-weight:700;text-transform:uppercase} /* the count and its bar */ body[data-tk-theme] .tk-answers-count:where(:not(tk-screen *, tk-note *)){color:var(--br-ink);font:700 .95rem/1.3 var(--br-mono);text-transform:uppercase;letter-spacing:.03em} body[data-tk-theme] .tk-answers-count strong:where(:not(tk-screen *, tk-note *)){font:900 1.7em/1 var(--br-disp);font-stretch:130%;letter-spacing:0} body[data-tk-theme] .tk-answers-bar:where(:not(tk-screen *, tk-note *)){height:1.1rem;border:3px solid var(--br-ink);border-radius:0;background:var(--br-sheet)} body[data-tk-theme] .tk-answers-bar>span:where(:not(tk-screen *, tk-note *)){background:var(--br-b)} body[data-tk-theme] .tk-answers[data-tk-answers="all"] .tk-answers-bar>span:where(:not(tk-screen *, tk-note *)){background:var(--br-ink)} body[data-tk-theme] .tk-answers-open:where(:not(tk-screen *, tk-note *)){color:var(--br-muted);font:700 .78rem/1.3 var(--br-mono);letter-spacing:.04em;text-transform:uppercase} body[data-tk-theme] .tk-feedback .tk-scale button[aria-pressed="true"]:hover:not(:disabled):where(:not(tk-screen *, tk-note *)){background:var(--br-ink);color:var(--br-paper)} @media(max-width:640px){body[data-tk-theme] .tk-feedback.tk-joined:where(:not(tk-screen *, tk-note *)){padding:1rem 1rem 1rem}body[data-tk-theme] .tk-feedback.tk-joined>*:where(:not(tk-screen *, tk-note *)){margin-right:0}} /* 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}}