/* Short, expressive display lettering. Body copy and article links deliberately
 * keep their reading typeface. Only installed system fonts are requested. */
[data-style="watercolor"] {
  --letter-face:'Noteworthy','Bradley Hand','Kaiti SC','STKaiti','Songti SC',cursive;
  --letter-weight:700;--letter-slant:italic;--letter-space:.035em;
  --letter-tilt:rotate(-2deg);--letter-stroke:.15px;
  --letter-shadow:1px 1.4px 0 #b896bc55;
  --digit-face:'Noteworthy','Bradley Hand','Palatino',serif;
}
[data-style="comic"] {
  --letter-face:Impact,'Arial Black','PingFang SC',sans-serif;
  --letter-weight:900;--letter-slant:italic;--letter-space:-.055em;
  --letter-tilt:skewX(-8deg) rotate(-1.3deg);--letter-stroke:.4px;
  --letter-shadow:1px 1px 0 var(--dm-paper,#f7f0d9),2px 2px 0 var(--dm-ink,#202029);
  --digit-face:Impact,'Arial Black',sans-serif;
}
[data-style="punk"] {
  --letter-face:'Arial Black','Futura','PingFang SC',sans-serif;
  --letter-weight:900;--letter-slant:normal;--letter-space:-.045em;
  --letter-tilt:rotate(-2.8deg);--letter-stroke:.45px;
  --letter-shadow:2px -1px 0 #9e9a4e88;
  --digit-face:'Courier New','Courier',monospace;
}
[data-style="mandala"] {
  --letter-face:'Copperplate','Palatino','Songti SC',serif;
  --letter-weight:700;--letter-slant:normal;--letter-space:.105em;
  --letter-tilt:scaleX(.97);--letter-stroke:.15px;
  --letter-shadow:0 2px 0 var(--dm-paper,#f4edda),0 3px 0 #9f803887;
  --digit-face:'Palatino','Baskerville',serif;
}
[data-style="pop"] {
  --letter-face:'Arial Black',Impact,'PingFang SC',sans-serif;
  --letter-weight:1000;--letter-slant:normal;--letter-space:-.04em;
  --letter-tilt:rotate(1.2deg) skewX(-3deg);--letter-stroke:.45px;
  --letter-shadow:2px 1.5px 0 #e34a72,-1.3px -1px 0 #54b4ca;
  --digit-face:'Arial Black',Impact,sans-serif;
}
[data-style="future"] {
  --letter-face:'Futura','Arial Black','PingFang SC',sans-serif;
  --letter-weight:800;--letter-slant:normal;--letter-space:.075em;
  --letter-tilt:skewX(-7deg) scaleX(.96);--letter-stroke:.1px;
  --letter-shadow:1.1px 0 0 #d26e9b66,-1.1px 0 0 #68c9d666;
  --digit-face:'Futura','Arial Black',sans-serif;
}
[data-style="renaissance"] {
  --letter-face:'Baskerville','Palatino','Songti SC',serif;
  --letter-weight:700;--letter-slant:italic;--letter-space:.055em;
  --letter-tilt:rotate(-1.2deg);--letter-stroke:.12px;
  --letter-shadow:.6px .8px 0 #96753f55;
  --digit-face:'Baskerville','Palatino','Times New Roman',serif;
}
[data-style="ink"] {
  --letter-face:'Chalkduster','Chalkboard SE','Kaiti SC','Songti SC',serif;
  --letter-weight:700;--letter-slant:normal;--letter-space:-.015em;
  --letter-tilt:rotate(-1.4deg);--letter-stroke:.3px;
  --letter-shadow:1px 1px 0 var(--dm-paper,#fafaf7),2px 2px 0 #171717;
  --digit-face:'Chalkduster','Chalkboard SE','Georgia',serif;
}
[data-style="graffiti"] {
  --letter-face:'Marker Felt','Chalkboard SE','Kaiti SC','PingFang SC',sans-serif;
  --letter-weight:900;--letter-slant:italic;--letter-space:-.045em;
  --letter-tilt:rotate(-3deg) skewX(-5deg);--letter-stroke:.5px;
  --letter-shadow:1.2px 1.5px 0 var(--dm-paper,#e8ede5),2.5px 3px 0 #879db1;
  --digit-face:'Marker Felt','Comic Sans MS',cursive;
}
[data-style="offset"] {
  --letter-face:'Futura','Helvetica Neue','PingFang SC',sans-serif;
  --letter-weight:800;--letter-slant:normal;--letter-space:-.025em;
  --letter-tilt:rotate(.7deg);--letter-stroke:.15px;
  --letter-shadow:1.5px .8px 0 #be577680,-1.1px -.5px 0 #3e9da499;
  --digit-face:'Futura','Helvetica Neue',sans-serif;
}

/* Headings can lean and stretch; line boxes and button hit areas stay stable. */
[data-style] :is(.style-caption h1,.dn-reader-header h2,.dw-heading h2,.help-heading h2,.dp-header h2) {
  font-family:var(--letter-face);font-weight:var(--letter-weight);
  font-style:var(--letter-slant);font-synthesis:weight style;
  letter-spacing:var(--letter-space);text-shadow:var(--letter-shadow);
  -webkit-text-stroke:var(--letter-stroke) currentColor;
  transform:var(--letter-tilt);transform-origin:left center;
  line-height:1.35;
}
[data-style] :is(.dn-reader-header h2,.dw-heading h2,.dp-header h2) {font-size:34px}
[data-style] .style-caption h1 {font-size:13px}
[data-style] .wordmark {
  font-family:var(--letter-face);font-weight:var(--letter-weight);
  font-style:var(--letter-slant);font-synthesis:none;
  letter-spacing:0;transform:var(--letter-tilt);
  text-shadow:var(--letter-shadow),0 2px 9px #0009;
}
[data-style] .style-count {
  font-family:var(--digit-face);font-weight:var(--letter-weight);
  font-style:var(--letter-slant);font-synthesis:none;letter-spacing:.015em;
}
[data-style] .view-tools .quiet-button {
  font-family:var(--letter-face);font-weight:var(--letter-weight);
  font-style:var(--letter-slant);font-synthesis:weight style;
  letter-spacing:.035em;-webkit-text-stroke:.12px currentColor;
}
[data-style] .view-tools .help-button {font-size:17px}
[data-style] :is(.dn-screen-tabs,.dn-reader-tabs) .dn-category {
  font-family:var(--letter-face);font-weight:var(--letter-weight);
  font-style:var(--letter-slant);font-synthesis:weight style;
  letter-spacing:var(--letter-space);line-height:1.3;
}
/* At the physical screen's 0.2× projection, strong clean silhouettes are more
 * useful than fine shadows. Five labels remain the only words on this screen. */
[data-style] .dn-screen-tabs .dn-category {
  font-size:24px;-webkit-text-stroke:.35px currentColor;
  text-shadow:none;padding-top:11px;padding-bottom:11px;
}
[data-style] .dn-reader-tabs .dn-category {font-size:14px}
[data-style] :is(.dw-large-time,.dw-hero-temperature,.dw-time,.dw-temperature) {
  font-family:var(--digit-face);font-weight:var(--letter-weight);
  font-style:var(--letter-slant);font-synthesis:none;
  font-variant-numeric:tabular-nums;text-shadow:var(--letter-shadow);
}
[data-style] .dw-time {font-size:61px;letter-spacing:-3px;line-height:1.15}
[data-style] .dw-large-time {letter-spacing:-4px}
[data-style] .dw-large-time span {text-shadow:none;font-style:normal}
[data-style] .dw-hero-temperature {letter-spacing:0;text-shadow:none;-webkit-text-stroke:0;font-synthesis:none}
[data-style] .dw-dialog h3 {
  font-family:var(--letter-face);font-weight:var(--letter-weight);
  font-style:var(--letter-slant);font-synthesis:weight style;letter-spacing:.05em;
}

/* Pooled brush lettering, with a loose baseline in short labels. */
[data-style="watercolor"] .dn-screen-tabs .dn-category:nth-child(odd) {transform:rotate(-2deg)}
[data-style="watercolor"] .dn-screen-tabs .dn-category:nth-child(even) {transform:rotate(1.5deg)}
[data-style="watercolor"] .view-tools .quiet-button {border-radius:42% 27% 36% 32%;border-width:1px 1.5px .8px 1px}
[data-style="watercolor"] .dw-large-time {transform:rotate(-1.5deg);transform-origin:left center;font-weight:700;letter-spacing:-6px}
[data-style="watercolor"] .dw-time {font-weight:700;letter-spacing:-4px;text-shadow:.6px .7px 0 #a382a566}

/* Inked comic display type, and tight black panel labels. */
[data-style="comic"] :is(.dn-reader-header h2,.dw-heading h2) {-webkit-text-stroke:.8px currentColor}
[data-style="comic"] .dn-screen-tabs .dn-category {transform:skewX(-6deg);border-width:3px;font-weight:1000;-webkit-text-stroke:.8px currentColor}
[data-style="comic"] .view-tools .quiet-button {border-radius:3px;box-shadow:2px 2px 0 #080b1599;transform:skewX(-5deg)}
[data-style="comic"] :is(.wordmark,.style-count,.dw-large-time,.dw-time,.dw-hero-temperature,.dw-temperature) {font-weight:400;font-style:normal}
[data-style="comic"] .dw-large-time {transform:skewX(-4deg);transform-origin:left center;-webkit-text-stroke:0;letter-spacing:1px;text-shadow:none}
[data-style="comic"] .dw-time {font-size:63px;letter-spacing:.5px;-webkit-text-stroke:0;text-shadow:none}

/* Alternating pasted labels give punk its broken baseline without displacing
 * the grid. Their outlines and corners echo the scene's torn print texture. */
[data-style="punk"] .dn-screen-tabs .dn-category:nth-child(odd) {transform:rotate(-2.3deg);border-radius:0 2px 0 0;border-style:dashed}
[data-style="punk"] .dn-screen-tabs .dn-category:nth-child(even) {transform:rotate(2deg);box-shadow:3px 3px 0 var(--dn-ink)}
[data-style="punk"] .dn-screen-tabs .dn-category {letter-spacing:-.07em;-webkit-text-stroke:.8px currentColor}
[data-style="punk"] .view-tools .quiet-button {border-radius:0;border-style:dashed;transform:rotate(-1deg)}
[data-style="punk"] .view-tools .quiet-button:nth-child(even) {transform:rotate(2deg)}
[data-style="punk"] :is(.dw-large-time,.dw-hero-temperature) {font-weight:900;font-style:normal;letter-spacing:-7px;text-shadow:2px 1px 0 #a5a42f;transform:rotate(-1.5deg);transform-origin:left center}
[data-style="punk"] .dw-time {font-size:56px;letter-spacing:-5px;font-weight:900;-webkit-text-stroke:.4px currentColor}

/* Incised ornamental caps and book-like numerals. */
[data-style="mandala"] :is(.dn-reader-header h2,.dw-heading h2) {font-weight:900;letter-spacing:.14em;text-decoration-line:underline;text-decoration-style:double;text-decoration-thickness:1px;text-underline-offset:7px}
[data-style="mandala"] .dn-screen-tabs .dn-category {border-width:3px;border-style:double;letter-spacing:.06em}
[data-style="mandala"] .view-tools .quiet-button {border-radius:12px 12px 2px 2px;border-style:double;border-width:3px;padding-block:7px}
[data-style="mandala"] .dw-large-time {letter-spacing:-3px;font-weight:700;-webkit-text-stroke:.4px currentColor}
[data-style="mandala"] .dw-time {font-size:62px;font-weight:700;letter-spacing:-2.5px;text-shadow:0 1px 0 var(--dm-paper),0 2px 0 var(--dm-line)}

/* Heavy sign-painter letters, offset blocks and deliberate print misalignment. */
[data-style="pop"] :is(.dn-reader-header h2,.dw-heading h2) {-webkit-text-stroke:1px currentColor;text-shadow:3px 2px 0 #e34a72,-2px -1px 0 #54b4ca}
[data-style="pop"] .dn-screen-tabs .dn-category {font-weight:1000;letter-spacing:-.06em;box-shadow:3px 3px 0 #e34a72,-2px -2px 0 #54b4ca;-webkit-text-stroke:.7px currentColor}
[data-style="pop"] .view-tools .quiet-button {border-radius:2px;box-shadow:2px 2px 0 #e34a7288,-1px -1px 0 #54b4ca88}
[data-style="pop"] :is(.wordmark,.style-count,.dw-large-time,.dw-time,.dw-hero-temperature,.dw-temperature) {font-weight:400;font-style:normal}
[data-style="pop"] .dw-large-time {font-size:76px;letter-spacing:0;-webkit-text-stroke:0;text-shadow:1px 1px 0 #e34a7255}
[data-style="pop"] .dw-time {font-size:51px;letter-spacing:0;text-shadow:none}

/* Compressed technical lettering, squared controls and a cut-corner accent. */
[data-style="future"] :is(.dn-reader-header h2,.dw-heading h2) {font-weight:800;letter-spacing:.13em;border-left-width:5px;text-shadow:1.5px 0 0 #d46f9b99,-1.5px 0 0 #63d5df80}
[data-style="future"] .dn-screen-tabs .dn-category {font-weight:800;letter-spacing:.065em;transform:skewX(-4deg);border-radius:0 9px 0 0;border-width:1px 1px 3px 3px}
[data-style="future"] .view-tools .quiet-button {border-radius:0 10px 0 0;border-left-width:2px;letter-spacing:.1em}
[data-style="future"] .dw-large-time {font-weight:800;letter-spacing:-7px;transform:skewX(-5deg);transform-origin:left center}
[data-style="future"] .dw-time {font-size:60px;letter-spacing:-3px;font-weight:800;text-shadow:1px 0 #7aafbe99}

/* Engraved, swashed italic print and long pen-stroke numerals. */
[data-style="renaissance"] :is(.dn-reader-header h2,.dw-heading h2) {font-family:'Baskerville','Palatino','Songti SC',serif;font-style:italic;letter-spacing:.1em;-webkit-text-stroke:.2px currentColor;text-decoration-line:underline;text-decoration-style:double;text-decoration-thickness:.6px;text-underline-offset:5px}
[data-style="renaissance"] .dn-screen-tabs .dn-category {font-size:25px;font-style:italic;letter-spacing:.04em;border-width:3px;border-style:double}
[data-style="renaissance"] .view-tools .quiet-button {border-radius:2px 9px 3px 7px;font-weight:700;font-style:italic}
[data-style="renaissance"] .dw-large-time {font-family:'Baskerville','Palatino',serif;font-weight:700;font-style:italic;font-size:94px;letter-spacing:-5px;-webkit-text-stroke:.25px currentColor}
[data-style="renaissance"] .dw-time {font-size:64px;letter-spacing:-2px;font-weight:700;text-shadow:.4px .5px 0 #987c4866}

/* Hand-drawn outline headings and dense charcoal numerals. */
[data-style="ink"] :is(.dn-reader-header h2,.dw-heading h2) {-webkit-text-fill-color:var(--dm-paper,#fafaf7);-webkit-text-stroke:1.15px var(--dm-ink,#171717);text-shadow:2px 2px 0 var(--dm-ink,#171717);text-decoration:none;letter-spacing:.035em}
[data-style="ink"] .dn-screen-tabs .dn-category {font-weight:800;border-radius:2px 6px 2px 5px;border-width:2px;-webkit-text-stroke:.45px currentColor;transform:rotate(-1deg)}
[data-style="ink"] .view-tools .quiet-button {border-radius:3px 10px 4px 9px;border-width:1.5px;transform:rotate(-1deg)}
[data-style="ink"] .dw-large-time {font-weight:700;letter-spacing:-8px;text-shadow:1px 1px 0 var(--dm-paper),2px 2px 0 #171717;-webkit-text-stroke:.4px currentColor;font-size:80px}
[data-style="ink"] .dw-time {font-size:49px;letter-spacing:-5px;text-shadow:none;font-weight:700}

/* Marker lettering: leaning baselines, round-ended dense strokes and outlines. */
[data-style="graffiti"] :is(.dn-reader-header h2,.dw-heading h2) {font-size:37px;-webkit-text-stroke:.8px currentColor;text-decoration-thickness:5px;text-underline-offset:4px}
[data-style="graffiti"] .dn-screen-tabs .dn-category {transform:skewX(-5deg) rotate(-1.5deg);font-size:25px;-webkit-text-stroke:.8px currentColor;border-width:2px;border-radius:18% 30% 17% 26%}
[data-style="graffiti"] .dn-screen-tabs .dn-category:nth-child(even) {transform:skewX(-5deg) rotate(1.5deg)}
[data-style="graffiti"] .view-tools .quiet-button {border-radius:38% 25% 33% 24%;transform:rotate(-1.5deg);font-size:12px}
[data-style="graffiti"] .dw-large-time {font-weight:900;letter-spacing:-4px;transform:rotate(-2deg);transform-origin:left center;-webkit-text-stroke:.6px currentColor}
[data-style="graffiti"] .dw-time {font-size:62px;letter-spacing:-3px;-webkit-text-stroke:.5px currentColor;text-shadow:1px 1px 0 var(--dm-paper),2px 2px 0 #738e9b}

/* Letterpress geometry with cyan/magenta registration slips. */
[data-style="offset"] :is(.dn-reader-header h2,.dw-heading h2) {font-weight:900;letter-spacing:-.045em;text-shadow:2px 1px 0 #a4455d99,-1.5px -1px 0 #348e9b99}
[data-style="offset"] .dn-screen-tabs .dn-category {letter-spacing:-.02em;text-shadow:.8px .5px 0 #a4455d88,-.8px -.5px 0 #348e9b88;font-weight:900}
[data-style="offset"] .view-tools .quiet-button {border-radius:1px;box-shadow:1px 1px 0 #b8597977,-1px -1px 0 #388c9277}
[data-style="offset"] .dw-large-time {font-weight:800;letter-spacing:-6px;text-shadow:2px 1px 0 #a4455d99,-2px -1px 0 #348e9b99}
[data-style="offset"] .dw-time {font-size:60px;letter-spacing:-3px;font-weight:800;text-shadow:1px .5px 0 #a4455d99,-1px -.5px 0 #348e9b99}

/* BOOM remains actual SVG text, but its letterforms now match the medium too. */
[data-style="watercolor"] .desk-boom {--boom-family:'Bradley Hand','Marker Felt','Comic Sans MS',cursive}
[data-style="comic"] .desk-boom {--boom-family:Impact,'Arial Black',sans-serif}
[data-style="punk"] .desk-boom {--boom-family:'Futura','Arial Black',sans-serif}
[data-style="mandala"] .desk-boom {--boom-family:'Copperplate','Palatino',serif}
[data-style="pop"] .desk-boom {--boom-family:'Arial Black','Futura',sans-serif}
[data-style="future"] .desk-boom {--boom-family:'Futura','Arial Black',sans-serif}
[data-style="renaissance"] .desk-boom {--boom-family:'Baskerville','Palatino',serif}
[data-style="ink"] .desk-boom {--boom-family:'Chalkduster','Chalkboard SE',cursive}
[data-style="graffiti"] .desk-boom {--boom-family:'Marker Felt','Chalkboard SE',cursive}
[data-style="offset"] .desk-boom {--boom-family:'Futura','Helvetica Neue',sans-serif}
[data-style] .boom-lettering text {font-synthesis:weight style}
[data-style="watercolor"] .boom-lettering text {font-weight:900;font-size:126px;letter-spacing:-6px}
[data-style="comic"] .boom-lettering text {font-size:126px;letter-spacing:-6px;font-style:italic}
[data-style="punk"] .boom-lettering text {font-size:116px;letter-spacing:-8px;font-weight:1000}
[data-style="mandala"] .boom-lettering text {font-size:126px;letter-spacing:2px;font-weight:900}
[data-style="pop"] .boom-lettering text {font-size:112px;letter-spacing:-7px;font-weight:1000}
[data-style="future"] .boom-lettering text {font-size:122px;letter-spacing:3px;font-weight:900;font-style:italic}
[data-style="renaissance"] .boom-lettering text {font-size:133px;letter-spacing:-2px;font-style:italic;font-weight:900}
[data-style="ink"] .boom-lettering text {font-size:117px;letter-spacing:-5px;font-weight:900}
[data-style="graffiti"] .boom-lettering text {font-size:135px;letter-spacing:-7px;font-weight:1000;font-style:italic}
[data-style="offset"] .boom-lettering text {font-size:119px;letter-spacing:-3px;font-weight:900}

@media(max-width:600px) {
  [data-style] .style-caption h1 {font-size:11px;letter-spacing:0;-webkit-text-stroke:0;transform:none}
  [data-style] .view-tools .quiet-button {font-size:10px;letter-spacing:0;transform:none;padding-inline:7px}
  [data-style] .view-tools .help-button {font-size:15px;padding:0}
  [data-style] .wordmark {font-size:26px;letter-spacing:0;text-shadow:0 2px 8px #0009;transform:none}
  [data-style] .style-count {letter-spacing:.015em;text-shadow:none}
  [data-style] :is(.dn-reader-header h2,.dw-heading h2,.dp-header h2) {font-size:27px;letter-spacing:.035em}
  [data-style] .dn-reader-tabs .dn-category {font-size:12px;letter-spacing:0}
  [data-style] .dw-large-time {font-size:54px;letter-spacing:.5px;transform:none;text-shadow:none;-webkit-text-stroke:0}
  [data-style] .dw-large-time span {font-size:22px;letter-spacing:0;margin-left:6px}
  [data-style] :is(.dw-time,.dw-temperature,.dw-hero-temperature) {text-shadow:none;-webkit-text-stroke:0}
  [data-style="comic"] .dw-large-time {font-weight:400;letter-spacing:1px}
  [data-style="pop"] .dw-large-time {font-size:50px;font-weight:400;letter-spacing:0}
  [data-style="ink"] .dw-large-time {font-size:49px;letter-spacing:0}
  [data-style="renaissance"] .dw-large-time {font-size:59px;letter-spacing:0}
  [data-style="mandala"] .view-tools .quiet-button {padding-block:6px}
}