/* Components: tokens only; one block per component; variants and states in docs/<name>.md. */

/* Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; -webkit-tap-highlight-color: transparent; }
em, i, cite, dfn, address { font-style: normal; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-voice);
  font-weight: var(--weight-voice);
  font-size: var(--text-body);
  line-height: var(--leading-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
button { font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; text-align: start; cursor: pointer; }
button, a, input, label { touch-action: manipulation; }
button, label { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:focus-visible, [data-force~="focus"] { outline: var(--ring) solid var(--ink); outline-offset: var(--ring-gap); border-radius: var(--radius); }
.c-job__title[tabindex="-1"]:focus-visible { outline-color: transparent; } 
p { text-wrap: pretty; }
::selection { background: var(--rule); color: var(--ink); }
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The pen face */
.c-penline, .c-role, .c-statement, .c-quote blockquote {
  font-family: var(--font-pen); font-weight: var(--weight-pen); color: var(--pen); letter-spacing: 0;
}

/* c-name */
.c-name {
  font-family: var(--font-voice); font-weight: var(--weight-name);
  font-size: var(--text-name); line-height: var(--leading-name); letter-spacing: var(--track-name);
  font-kerning: normal; text-wrap: balance;
}
.c-name__button { transition: color var(--dur-micro) var(--ease-hover), scale var(--dur-press) var(--ease-out); }
.c-name__button:active, .c-name__button[data-force~="active"] { color: var(--faded); scale: var(--press-scale); }

/* c-penline */
.c-penline {
  display: inline-block; line-height: var(--leading-display);
  text-decoration: underline var(--stroke-pen) var(--pen-none); text-underline-offset: var(--space-1); text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--dur-micro) var(--ease-hover), scale var(--dur-press) var(--ease-out);
}
.c-penline[data-size="mark"] { font-size: var(--pen-mark); }
.c-penline[data-size="text"] { font-size: var(--pen-text); }
.c-penline[aria-expanded="true"], .c-penline[data-force~="hover"] { text-decoration-color: var(--pen); }
.c-penline:active, .c-penline[data-force~="active"] { scale: var(--press-scale); }

/* c-headline */
.c-headline {
  font-family: var(--font-voice); font-weight: var(--weight-voice-strong); color: var(--ink);
  font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--track-headline);
  font-kerning: normal; text-wrap: balance;
}

/* c-tile */
.c-tile {
  --tile-size: var(--tile);
  --stroke-harmonya: clamp(1px, calc(var(--tile-size) * var(--harmonya-stroke-share)), 2px);
  --tile-ground: var(--faded);
  --tile-ring: var(--tile-ground);
  --brand-w: calc(var(--tile-size) - 2 * var(--mark-inset));
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--tile-size); height: var(--tile-size); border-radius: var(--radius);
  background: var(--tile-ground); box-shadow: inset 0 0 0 var(--stroke-print) var(--tile-ring); color: var(--paper);
  transition: background-color var(--dur-micro) var(--ease-hover), box-shadow var(--dur-micro) var(--ease-hover), color var(--dur-micro) var(--ease-hover), scale var(--dur-press) var(--ease-out);
}
.c-tile[data-size="large"] { --tile-size: var(--tile-large); border-radius: var(--radius-large); }
.c-tile[data-tone="start"] { --tile-ground: var(--ink); }
.c-tile[data-tone="faded"] { --tile-ground: var(--faded); }
.c-tile[data-tone="outline"] { --tile-ground: var(--paper); --tile-ring: var(--faded); color: var(--faded); }
.c-tile[data-tone="brand"] { --tile-ground: var(--paper); --tile-ring: var(--paper); --brand-w: var(--tile-size); background: none; box-shadow: none; }
.c-tile[data-tone="brand"] .c-tile__mark:not(.c-tile__brand) { width: var(--brand-w); height: var(--brand-w); }
.c-tile__mark { width: calc(var(--tile-size) - 2 * var(--mark-inset)); height: calc(var(--tile-size) - 2 * var(--mark-inset)); fill: currentColor; transition: opacity var(--dur-micro) var(--ease-hover); }
.c-tile__brand { position: absolute; inset: calc((var(--tile-size) - var(--brand-w)) / 2); width: var(--brand-w); height: var(--brand-w); opacity: 0; }
.c-tile[data-tone="brand"] .c-tile__brand { opacity: 1; }
.c-tile[data-tone="brand"] .c-tile__mark:not(.c-tile__brand) { opacity: 0; }
/* A linked tile: the desktop hit floor */
a.c-tile::after { content: ""; position: absolute; inset: calc((var(--tile-size) - max(var(--tile-size), var(--hit-pointer))) / 2); }
a.c-tile:active, a.c-tile[data-force~="active"] { scale: var(--press-scale); }

/* c-list and c-row */
.c-list {
  list-style: none; position: relative; padding: var(--step-in); padding-inline-end: 0; /* room for the box line */
  display: grid; grid-template-columns: var(--tile) max-content minmax(0, max-content) auto;
  column-gap: var(--space-3); align-items: baseline;
}
.c-row {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline;
  grid-row: calc(var(--i, 0) + 1); padding-block: var(--space-1); position: relative;
}
.c-row:has(> .c-role) { padding-block: 0; }
/* A row's brand mark inks the tile's box */
.c-row > .c-tile { align-self: center; --tile-size: var(--tile-row); }
.c-list .c-row > .c-tile { --brand-w: calc(var(--tile-size) / var(--ink-share, 1)); }
.c-year {
  font-family: var(--font-print); font-weight: var(--weight-print); font-size: var(--text-body); line-height: var(--leading-display);
  font-variant-numeric: tabular-nums; color: var(--faded); white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-hover);
}
.c-row .c-role { margin-inline-start: var(--step-out); justify-self: start; }
.c-row[data-open] .c-year, .c-row[data-force~="hover"] .c-year,
.c-row[data-open] .c-title, .c-row[data-force~="hover"] .c-title { color: var(--ink); }
.c-row[data-open] .c-role:is(button) .c-role__word, .c-row[data-force~="hover"] .c-role:is(button) .c-role__word { text-decoration-color: var(--pen); }
.c-row:active .c-role:is(button), .c-row[data-force~="active"] .c-role:is(button) { scale: var(--press-scale); }

/* c-title */
.c-title {
  position: relative; justify-self: start;
  font-family: var(--font-print); font-weight: var(--weight-print); font-size: var(--text-title);
  line-height: var(--leading-display); letter-spacing: var(--track-title); color: var(--faded); text-wrap: balance;
  transition: color var(--dur-micro) var(--ease-hover), scale var(--dur-press) var(--ease-out);
}
.c-title[data-size="display"] { font-size: var(--text-display); letter-spacing: var(--track-display); color: var(--ink); }
.c-title[data-state="current"] { font-weight: var(--weight-print-strong); color: var(--ink); }
.c-title:is(button):active, .c-title[data-force~="active"] { scale: var(--press-scale); }
.c-title__strike { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; user-select: none; }
.c-title__strike path { fill: none; stroke: var(--pen); stroke-width: var(--stroke-pen); stroke-linecap: round; stroke-linejoin: round; }
.c-title[data-typing="wait"] .c-title__text { visibility: hidden; }

/* c-role */
.c-role { display: inline-block; text-align: start; line-height: var(--leading-display); }
.c-role__first { font-size: var(--pen-mark); white-space: nowrap; }
.c-role__phrase, .c-title__phrase { white-space: nowrap; }
.c-role__rest { font-size: var(--pen-text); }
.c-role[data-rest="hidden"] :is(.c-role__rest, .c-role__comma) { display: none; }
.c-role[data-size="large"] { display: block; text-wrap: balance; }
.c-role[data-size="large"] .c-role__first { font-size: var(--pen-display); white-space: nowrap; }
.c-role[data-size="large"] .c-role__rest { font-size: var(--pen-mark); }
/* Only a button role is a control */
.c-role:is(button) { transition: scale var(--dur-press) var(--ease-out); }
.c-role:is(button) .c-role__word {
  text-decoration: underline var(--stroke-pen) var(--pen-none); text-underline-offset: var(--space-1); text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--dur-micro) var(--ease-hover);
}
.c-role:is(button)[aria-expanded="true"] .c-role__word, .c-role[data-force~="hover"] .c-role__word { text-decoration-color: var(--pen); }
.c-role:is(button):active, .c-role[data-force~="active"] { scale: var(--press-scale); }

/* c-box */
.c-box { position: relative; pointer-events: none; }
.c-box__line { position: absolute; inset: calc(-1 * var(--step-in)); width: calc(100% + 2 * var(--step-in)); height: calc(100% + 2 * var(--step-in)); overflow: visible; pointer-events: none; user-select: none; }
.c-box__line path { fill: none; stroke: var(--ink); stroke-width: var(--stroke-pen); stroke-linecap: round; stroke-linejoin: round; }
.c-list > .c-box { grid-column: 1 / 4; grid-row: 1 / span var(--rows, 9); align-self: stretch; }
.c-box--wrap { display: inline-block; pointer-events: auto; padding: var(--space-1) var(--space-2); }

/* c-note */
.c-note { display: grid; max-width: var(--measure); }
.c-note__item {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--step-in);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-exit) var(--ease-exit), visibility 0s linear var(--dur-exit);
}
.c-note__item[data-shown] { opacity: 1; visibility: visible; transition: opacity var(--dur-ui) var(--ease-out) var(--dur-exit), visibility 0s; }
.c-note__head { display: flex; flex-wrap: wrap; column-gap: var(--space-2); align-items: baseline; }
.c-note__first { font-weight: var(--weight-voice-strong); }
.c-note__place { color: var(--faded); }
.c-note__body { max-width: var(--measure); text-wrap: wrap; }
[data-pending] { color: var(--faded); outline: var(--hairline) dashed var(--faded); outline-offset: var(--space-1); border-radius: var(--radius); }

/* c-tools, c-tool */
.c-tools { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* A long name overhangs the tile, centered */
.c-tool {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1);
  width: var(--tile-large); border-radius: var(--radius-large);
  transition: scale var(--dur-press) var(--ease-out);
}
.c-tool .c-tile { --tile-ground: var(--paper); --tile-ring: var(--rule); color: var(--faded); }
.c-tool:is([data-state="lit"], [data-state="gained"]) .c-tile { --tile-ground: var(--ink); --tile-ring: var(--ink); color: var(--paper); }
.c-tool[data-state="gained"] .c-tool__name { font-weight: var(--weight-voice-strong); color: var(--ink); }
.c-tool[aria-pressed="true"] .c-tile { outline: var(--ring) solid var(--pen); outline-offset: var(--ring-gap); }
.c-tool__name { font-size: var(--text-caption); line-height: var(--leading-display); color: var(--faded); max-width: calc(var(--tile-large) + var(--step-in)); text-align: center; text-wrap: balance; }
.c-tool[aria-pressed="true"] .c-tool__name { color: var(--ink); }
.c-tools[data-names="hidden"] .c-tool__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.c-tool:active, .c-tool[data-force~="active"] { scale: var(--press-scale); }
.c-tool[data-force~="hover"] .c-tile { --tile-ring: var(--ink); }

/* c-statement */
.c-statement { max-width: var(--measure); text-wrap: balance; }
.c-statement[data-size="caption"] { font-size: var(--pen-caption); line-height: var(--leading-display); }
.c-statement[data-size="display"] { font-size: var(--pen-display); line-height: var(--leading-display); }
.c-statement[data-size="mark"] { font-size: var(--pen-mark); line-height: var(--leading-display); }
.c-statement[data-size="text"] { font-size: var(--pen-text); line-height: var(--leading-display); }
.c-label { font-family: var(--font-voice); font-weight: var(--weight-voice); font-size: var(--text-body); line-height: var(--leading-display); color: var(--faded); }

/* c-quote */
.c-quote { display: flex; flex-direction: column; gap: var(--step-in); }
.c-quote blockquote { font-size: var(--pen-text); line-height: var(--leading-display); }
.c-quote blockquote p { text-wrap: balance; }
.c-quote figcaption { font-family: var(--font-voice); font-weight: var(--weight-voice); font-size: var(--text-caption); line-height: var(--leading-display); color: var(--faded); }
.c-quote cite { font-style: normal; }

/* c-link */
.c-link {
  position: relative; display: inline-flex; align-items: baseline; gap: var(--space-2);
  font-weight: var(--weight-voice); color: var(--ink); text-decoration: none;
  transition: scale var(--dur-press) var(--ease-out);
}
.c-link::after { content: ""; position: absolute; inset-inline: 0; inset-block: calc((var(--line) - max(var(--line), var(--hit))) / 2); }
.c-link__mark { flex: none; width: var(--icon-text-box); height: var(--icon-text-box); fill: currentColor; translate: 0 calc((var(--icon-text) - var(--cap)) / 2); }
.c-link__word {
  text-decoration: underline var(--stroke-print) var(--pen-none); text-underline-offset: var(--space-1); text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--dur-micro) var(--ease-hover);
}
.c-link:focus-visible .c-link__word { text-decoration-color: var(--pen); transition: none; }
.c-link__text { display: inline-grid; }
.c-link__text > * { grid-area: 1 / 1; }
.c-link__copied { opacity: 0; transition: opacity var(--dur-exit) var(--ease-exit); pointer-events: none; }
.c-link__copied[data-shown] { opacity: 1; transition: opacity var(--dur-ui) var(--ease-out); }
.c-link:has(.c-link__copied[data-shown]) .c-link__word { visibility: hidden; }
.c-link[data-force~="hover"] .c-link__word { text-decoration-color: var(--pen); }
.c-link:active, .c-link[data-force~="active"] { scale: var(--press-scale); }

/* c-penpick */
.c-penpick { display: inline-flex; align-items: center; gap: var(--space-3); user-select: none; -webkit-user-select: none; }
.c-penpick__pens { display: inline-flex; align-items: center; gap: calc(max(var(--hit), var(--icon) + var(--space-3)) - var(--icon)); }
.c-penpick__pen {
  position: relative; display: inline-grid; place-items: center; cursor: pointer; border-radius: 50%;
  width: var(--icon); height: var(--icon);
  transition: scale var(--dur-press) var(--ease-out);
}
.c-penpick__pen input { position: absolute; inset: calc((var(--icon) - max(var(--hit), var(--icon))) / 2); width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; border-radius: 50%; }
.c-penpick__pen::before { content: ""; width: var(--icon); height: var(--icon); border-radius: 50%; background: var(--swatch); transition: box-shadow var(--dur-micro) var(--ease-hover); }
.c-penpick__pen[data-pen="red"] { --swatch: var(--pen-red); }
.c-penpick__pen[data-pen="blue"] { --swatch: var(--pen-blue); }
.c-penpick__pen[data-pen="green"] { --swatch: var(--pen-green); }
.c-penpick__pen:has(:checked)::before { box-shadow: inset 0 0 0 var(--stroke-print) var(--ink); outline: var(--stroke-pen) solid var(--paper); outline-offset: calc(-1 * (var(--stroke-print) + var(--stroke-pen))); }
.c-penpick__pen:has(:focus-visible) { outline: var(--ring) solid var(--ink); outline-offset: var(--ring-gap); }
.c-penpick__pen:active { scale: var(--press-scale); }

/* c-job */
.c-job { display: flex; flex-direction: column; gap: var(--step-out); min-width: 0; }
.c-job__lead { display: flex; flex-direction: column; align-items: flex-start; gap: var(--step-in); min-width: 0; }
.c-job__head { align-self: stretch; display: grid; grid-template-columns: var(--tile-large) minmax(0, 1fr); column-gap: var(--step-out); align-items: center; }
/* Back sits on the place's first baseline */
.c-job__meta { display: flex; align-items: first baseline; justify-content: space-between; column-gap: var(--step-out); min-width: 0; }
.c-job__place { color: var(--faded); min-width: 0; }
.c-job__title { font: inherit; margin: 0; max-width: 100%; }
.c-job__title .c-box--wrap { margin: var(--step-in); display: block; }
.c-job__title .c-title { display: block; }
.c-job__tools { display: flex; flex-direction: column; align-items: flex-start; gap: var(--step-in); }
.c-job__tools .c-label { text-wrap: balance; }
/* One fixed column pitch */
.c-job__tools .c-tools { display: grid; grid-template-columns: repeat(var(--tool-cols, 6), var(--tile-large)); column-gap: var(--step-out); row-gap: var(--step-in); justify-items: center; }
.c-job__note { max-width: var(--measure); }
/* The way back: a link to the list */
.c-job__back {
  position: relative; flex: none; font-weight: var(--weight-voice); white-space: nowrap; color: var(--ink);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  text-decoration: underline var(--stroke-print) var(--faded); text-underline-offset: var(--space-1); text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--dur-micro) var(--ease-hover), scale var(--dur-press) var(--ease-out);
}
.c-job__back::after { content: ""; position: absolute; inset-inline: 0; inset-block: calc((var(--line) - max(var(--line), var(--hit))) / 2); }
.c-job__back:active { scale: var(--press-scale); }

/* c-quote slots: every quote in one cell, so the spot keeps one size. */
.c-quotes { display: grid; align-items: start; }
.c-quote__slot { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--dur-exit) var(--ease-exit), visibility 0s linear var(--dur-exit); }
.c-quote__slot[data-shown] { opacity: 1; visibility: visible; transition: opacity var(--dur-ui) var(--ease-out) var(--dur-exit), visibility 0s linear var(--dur-exit); }

/* First visit: hide what the pen will draw */
[data-pen-wait] :is(.c-box__line, .c-title__strike) path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
[data-pen-wait] .c-pen-wait { visibility: hidden; }

/* Labels hold one line where it fits the reader's text size */
@media (min-width: 20rem) {
  .c-penline, .c-penpick__label, .c-link { white-space: nowrap; }
}

/* Hover: fine pointers only. */
@media (hover: hover) and (pointer: fine) {
  .c-penline:hover { text-decoration-color: var(--pen); }
  .c-row:hover .c-year, .c-row:hover .c-title, .c-title:is(button):hover { color: var(--ink); }
  .c-row:hover .c-role:is(button) .c-role__word, .c-role:is(button):hover .c-role__word { text-decoration-color: var(--pen); }
  .c-tool:hover .c-tile { --tile-ring: var(--ink); }
  .c-tool:is([data-state="lit"], [data-state="gained"]):hover .c-tile { --tile-ground: var(--faded); } /* a lit tool answers the pointer too */
  .c-link:hover .c-link__word { text-decoration-color: var(--pen); }
  .c-job__back:hover { text-decoration-color: var(--pen); }
  .c-penpick__pen:not(:has(:checked)):hover::before { box-shadow: inset 0 0 0 var(--stroke-print) var(--faded); }
  .c-name__button:hover { color: var(--faded); }
  
  .c-row > a.c-tile:hover { background-color: transparent; box-shadow: none; }
  .c-row > a.c-tile:hover .c-tile__brand { opacity: 1; }
  .c-row > a.c-tile:hover .c-tile__mark:not(.c-tile__brand) { opacity: 0; }
  .c-job__head > a.c-tile:hover { color: var(--ink); }
  .c-job__head > a.c-tile:hover .c-tile__brand { opacity: 0; }
  .c-job__head > a.c-tile:hover .c-tile__mark:not(.c-tile__brand) { opacity: 1; }
}

/* Touch and phone: 44px taps */
@media (pointer: coarse), (max-width: 47.99rem), (max-height: 31.24rem) {
  .c-penline, .c-job__back { min-height: var(--hit); }
  .c-job__back { display: inline-flex; align-items: center; }
  .c-tool { min-height: var(--hit); justify-content: center; }
}

/* Narrow phones: the name one step down */
@media (max-width: 25.49rem) { .c-name { font-size: var(--text-name-narrow); } }
@media (max-width: 20.49rem) { .c-name { letter-spacing: var(--track-name-tight); } }

/* Phone */
@media (max-width: 47.99rem), (max-height: 31.24rem) {
  .c-list { grid-template-columns: var(--tile) minmax(0, 1fr) minmax(0, 1fr); }
  .c-row { grid-template-rows: auto auto; }
  .c-row > .c-tile { grid-column: 1; grid-row: 1; }
  .c-row > .c-year { grid-column: 2; grid-row: 1; }
  .c-row > .c-title { grid-column: 1 / 3; grid-row: 2; }
  .c-row > .c-role { grid-column: 3; grid-row: 1 / span 2; align-self: center; flex-direction: column; align-items: flex-start; margin-inline-start: var(--step-out); }
  .c-row .c-role__first { white-space: normal; }
  .c-list > .c-box { grid-column: 1 / 3; }
  .c-note__item:not([data-shown]) { display: none; }
  .c-job__tools .c-tools { grid-template-columns: repeat(4, var(--tile-large)); justify-content: space-between; align-self: stretch; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .c-name__button, .c-penline, .c-tile, .c-tile__mark, .c-tile__brand, .c-year, .c-title, .c-role, .c-role__first, .c-note__item,
  .c-tool, .c-link, .c-link__word, .c-link__copied, .c-penpick__pen, .c-penpick__pen::before, .c-job__back, .c-quote__slot, .c-role__word, .c-title__strike path, .c-box__line path {
    animation: none; transition: none;
  }
  .c-title[data-typing] .c-title__text { visibility: visible; }
  [data-pen-wait] :is(.c-box__line, .c-title__strike) path { stroke-dasharray: none; stroke-dashoffset: 0; }
  [data-pen-wait] .c-pen-wait { visibility: visible; }
}

.c-note__item:not([data-key="job"]) .c-note__body { text-wrap: pretty; }
.p-copied, .c-role__comma, .c-role__sep { user-select: none; -webkit-user-select: none; }

/* c-mark: the BG mark, drawn live; the G follows the pen */
.c-mark { position: relative; display: block; flex: none; width: var(--mark-width); height: var(--mark-size); font-size: var(--mark-size); line-height: 1; }
.c-mark svg { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--mark-size); height: var(--mark-size); fill: none; stroke: var(--ink); stroke-width: var(--mark-line); stroke-linecap: round; stroke-linejoin: round; }
.c-mark__b, .c-mark__g { position: absolute; display: block; line-height: 1; }
.c-mark__b { inset-inline-start: var(--mark-b-x); inset-block-start: var(--mark-b-y); font-family: var(--font-voice); font-weight: var(--weight-name); font-size: var(--mark-b); color: var(--ink); }
.c-mark__g { inset-inline-start: var(--mark-g-x); inset-block-start: var(--mark-g-y); font-family: var(--font-pen); font-weight: var(--weight-pen); font-size: var(--mark-g); color: var(--pen); rotate: var(--mark-g-tilt); }

/* quotation marks; a pen stroke before the credit */
.c-quote blockquote p::before { content: "\201C"; }
.c-quote blockquote p::after { content: "\201D"; }
.c-quote figcaption:not(:empty)::before { content: ""; display: inline-block; vertical-align: middle; width: var(--space-4); height: var(--stroke-pen); margin-inline-end: var(--space-2); border-radius: var(--radius); background: var(--pen); rotate: var(--mark-g-tilt); }
/* tool note: one line under the tiles */
.c-job__toolnote { align-self: stretch; order: 1; margin-block-start: var(--step-in); max-width: none; }
.c-job__toolnote .c-note__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.c-job__toolnote .c-note__item { gap: 0; }
@media (min-width: 48rem) and (min-height: 31.25rem) {
  .c-job__toolnote { margin-block-start: var(--space-2); }
  .c-job__toolnote .c-note__body { max-width: none; font-size: var(--text-caption); line-height: var(--leading-display); }
}
.c-toolhint { margin-inline-start: var(--space-3); line-height: 0; white-space: nowrap; }
[data-tooled] .c-toolhint { visibility: hidden; }
:root:not([data-keys]) :focus-visible, :root:not([data-keys]) .c-penpick__pen:has(:focus-visible) { outline-color: transparent; }