@charset "UTF-8"; /*! kiso.css v1.2.4 | MIT License | https://github.com/tak-dcxi/kiso.css */ /* ====================================================== // MARK: Universal // ====================================================== */ *, ::before, ::after { /* * Includes padding and border in the element's specified dimensions. * It is highly recommended to set box-sizing: border-box; by default, as it makes styling much easier, especially when specifying width: 100%;. */ box-sizing: border-box; } /* ====================================================== // MARK: Document and Body Elements // ====================================================== */ :where(:root) { /* In Safari, if font-family is not specified, a serif font is applied by default, so sans-serif is set as the default here. */ font-family: sans-serif; /* * For accessibility, it is recommended to set the line-height to at least 1.5 times the text size within paragraphs. * @see https://waic.jp/translations/WCAG21/#visual-presentation */ line-height: 1.5; /* Remove space when punctuation marks are adjacent, and also remove leading spaces in a line. */ text-spacing-trim: trim-start; /* Improves readability by inserting a small space between Japanese and alphanumeric characters. */ text-autospace: normal; /* Prevents misreading by applying strict line-breaking rules. */ line-break: strict; /* Wraps English words mid-word. Specifying anywhere also prevents content from overflowing in layouts like flex or grid. */ overflow-wrap: anywhere; /* * Mobile browsers have an algorithm that automatically adjusts font sizes to prevent text from becoming too small. * This controls the auto-adjustment feature to prevent unwanted resizing. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* * Prevents layout shift caused by the appearance or disappearance of the scrollbar. * Starting with Chrome 145, specifying scrollbar-gutter: stable will cause vw to be calculated without considering the scrollbar, which will also prevent horizontal scrolling. */ scrollbar-gutter: stable; /* Suppresses the tap highlight on iOS. */ -webkit-tap-highlight-color: transparent; } :where(body) { /* * When creating a sticky footer, a minimum height is often required. * Setting the min-block-size to the dynamic viewport height ensures enough space for the footer. */ min-block-size: 100dvb; /* The margin specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */ margin: unset; } /* ====================================================== // MARK: Sections // ------------------------------------------------------ */ :where(:is(h1, h2, h3, h4, h5, h6):lang(en)) { /* Prevents the last line of text from ending with a single word, which can look awkward (known as an orphan). */ text-wrap: pretty; } :where(h1) { /* * Adjusts user agent (UA) styles for h1 elements within sectioning content. * This addresses DevTools warnings that appear when h1 elements nested within sectioning content lack font-size and margin properties. * @see https://html.spec.whatwg.org/#sections-and-headings */ margin-block: 0.67em; font-size: 2em; } :where(h2, h3, h4, h5, h6) { /* The margin-block specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */ margin-block: unset; } :where(search) { /* * The element is supported from Safari 17. * This prevents it from being displayed as an inline element in unsupported environments. */ display: block flow; } /* ====================================================== // MARK: Grouping content // ====================================================== */ :where(p, blockquote, figure, pre, address, ul, ol, dl, menu) { /* The margin-block specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */ margin-block: unset; } :where(blockquote, figure) { /* The margin-inline specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */ margin-inline: unset; } :where(p:lang(en)) { /* * In English, a single word on the last line is called a "widow" or "orphan" and is considered something to avoid as it makes the text harder to read. * Therefore, when lang="en", this prevents the last line from ending with a single word. */ text-wrap: pretty; } :where(address:lang(ja)) { /* Italic style is not common in Japanese, so the font-style is reset. */ font-style: unset; } :where(ul, ol, menu) { /* The padding-inline-start specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */ padding-inline-start: unset; /* * In Safari, using list-style: none prevents screen readers from announcing lists. * list-style-type: "" is used to hide markers without affecting accessibility. * @see https://matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */ list-style-type: ""; } :where(dt) { /* It is common to display
elements in bold, so font-weight: bolder; is set by default. */ font-weight: bolder; } :where(dd) { /* The margin-inline-start specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */ margin-inline-start: unset; } :where(pre) { /* * Since text-spacing-trim can affect spacing in 
 elements even with its initial value, the final rendering may depend on the user's font settings.
  * To ensure consistent alignment, space-all is explicitly specified and inheritance is prevented.
  */
  text-spacing-trim: space-all;
  /* Set to no-autospace as it can cause misalignment with monospaced fonts. */
  text-autospace: no-autospace;
}

@media print {
  :where(pre) {
    /* Prevent text wrapping in print media. */
    text-wrap-mode: unset;
  }
}
/* ======================================================
//  MARK: Text-level semantics
// ====================================================== */
:where(em:lang(ja)) {
  /* In Japanese, emphasis is commonly represented by bold text, so font-weight: bolder; is set by default. */
  font-weight: bolder;
}

:where(:is(i, cite, em, dfn):lang(ja)) {
  /* Italic style is not common in Japanese, so the font-style is reset. */
  font-style: unset;
}

:where(u, s, del, ins) {
  /* Set the underline inset to auto and separate only the horizontal lines when underlines are consecutive. */
  text-decoration-inset: auto;
}

:where(code, kbd, samp) {
  /*
  * Set a monospace font family referencing Tailwind.
  * @see https://tailwindcss.com/docs/font-family
  */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Font feature settings can have adverse effects on monospaced fonts, so their values are explicitly set to initial to prevent inheritance. */
  font-feature-settings: initial;
  font-variation-settings: initial;
  /* Resets the font-size specified in the UA stylesheet to allow inheritance. */
  font-size: unset;
  /*
  * Disables font ligatures for programming fonts (like Fira Code)
  * to prevent character combinations like => from being rendered as a single symbol (e.g., ⇒).
  */
  font-variant-ligatures: none;
}

:where(abbr[title]) {
  /*
  * The  element with the title attribute isn't helpful regarding accessibility because support is inconsistent, and it's only accessible to some users.
  * This rule shows a dotted underline on abbreviations in all browsers (there's a bug in Safari) and changes the cursor.
  * @see https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
  */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-inset: auto;
  cursor: help;
}

:where(time) {
  /* Set to no-autospace because date notations in typography do not include spaces. */
  text-autospace: no-autospace;
}

@media (forced-colors: active) {
  :where(mark) {
    /*
    * In forced-colors mode, the color of the mark element may not change, which can be problematic. Use system colors in forced-colors mode.
    * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
    */
    background-color: Highlight;
    color: HighlightText;
  }
}
@media print {
  :where(mark) {
    /*
    * Not all printers support color, and users might print in grayscale.
    * It's worth adding a non-disruptive style that scales with the text, as an alternative to relying only on background color.
    * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkPrint
    */
    border-width: 1px;
    border-style: dotted;
  }
}
/* ======================================================
//  MARK: Links
// ====================================================== */
:where(a) {
  /*
  * The default color from the UA stylesheet is rarely used as is, so it's reset to allow inheritance.
  * In Firefox on iOS, the user agent stylesheet’s text color is applied even when the text is not a link.
  * @see https://github.com/darkreader/darkreader/issues/9836
  */
  color: unset;
}

:where(a:any-link) {
  /*
  * While link underlines can be useful, they are often obstructive.
  * They are disabled by default.
  * If needed, restore them using text-decoration-line: revert;.
  */
  text-decoration-line: unset;
  /* Set the underline thickness to the font's default thickness. */
  text-decoration-thickness: from-font;
  /* Set the underline inset to auto and separate only the horizontal lines when underlines are consecutive. */
  text-decoration-inset: auto;
}

/* ======================================================
//  MARK: Embedded content
// ====================================================== */
:where(img, svg, picture, video, audio, canvas, model, iframe, embed, object) {
  /* Prevents overflow by setting the maximum width to 100%. */
  max-inline-size: 100%;
  /* Prevents extra space from appearing at the bottom of the element. */
  vertical-align: bottom;
}

:where(img, svg, picture, video, canvas, model, iframe, embed, object) {
  /*
  * Automatically adjust block size based on content.
  * Exclude the