/* Primitives */

* {
  box-sizing: border-box;
}

*::selection {
  background: rgba(45, 170, 219, 0.3);
}

:root {
  --color-text-default: #1f2937; /* gray-800 */
  --color-text-default-light: #4b5563; /* gray-600 */
  --color-text-gray: #6b7280; /* gray-500 */
  --color-text-brown: #92400e;
  --color-text-orange: #b45309;
  --color-text-yellow: #b45309;
  --color-text-green: #047857;
  --color-text-blue: #1d4ed8;
  --color-text-purple: #6d28d9;
  --color-text-pink: #be185d;
  --color-text-red: #070707;

  --color-bg-default: #ffffff;
  --color-bg-gray: #f3f4f6;
  --color-bg-gray-light: #f9fafb;
  --color-bg-brown: #fef3c7;
  --color-bg-orange: #ffedd5;
  --color-bg-yellow: #fef9c3;
  --color-bg-green: #d1fae5;
  --color-bg-blue: #dbeafe;
  --color-bg-purple: #ede9fe;
  --color-bg-pink: #fce7f3;
  --color-bg-red: #fee2e2;

  --color-primary: #2563eb;
  --color-border: #e5e7eb;
  --color-hover: #f3f4f6;

  --max-width: 960px;
  --header-height: 64px;
}

body {
  color: var(--color-text-default);
  background-color: #f8f9fa;
  fill: currentColor;
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.Container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Responsive Container */
@media only screen and (max-width: 768px) {
  .Container {
    padding: 0 16px;
  }
}

@media only screen and (max-width: 390px) {
  .Container {
    padding: 0 12px;
  }
}

.GlobalLayout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

code {
  /* Use monospace before Courier so font looks better on Android Chrome. */
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace,
    Courier;
}

p {
  margin: 0;
}

/* Anchor */

.Anchor {
  color: inherit;
  text-decoration: none;
  padding-right: 4px;
  margin-left: -20px;
  visibility: hidden;
}

/* Audio */

.Audio {
  width: 100%;
}

/* Bookmark */

.Bookmark {
  margin: 4px 0;
  border: 1px solid rgba(55, 53, 47, 0.16);
  border-radius: 5px;
  padding: 12px 14px 14px;
  transition: background 120ms ease-in 0s;
}

.Bookmark:hover {
  background: var(--color-ui-hover-bg);
}

.Bookmark > a {
  color: inherit;
  text-decoration: none;
}

.Bookmark__Title {
  margin: 0;
  margin-bottom: 2px;
  font-size: 0.875rem;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Bookmark__Desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  opacity: 0.6;
  height: 2rem;
  overflow: hidden;
}

.Bookmark__Link {
  margin: 0;
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* BulletedList */

.BulletedListWrapper {
  margin: 2px 0;
  padding-left: calc(1.5em + 4px);
  line-height: 1.5;
  list-style-type: disc;
}

.BulletedList {
  margin: 2px 0;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Callout */

.Callout {
  display: block;
  position: relative;
  align-items: flex-start;
  border-radius: 8px;
  padding: 16px 20px;
  padding-left: 56px; /* 20px padding + 24px icon + 12px gap */
  margin: 16px 0;
  /* Default background if no color selected, but ColorfulBlock usually handles this */
  transition: transform 0.2s ease;
  border: 1px solid transparent; /* Prepare for border */
}

/* Add a subtle border to colored callouts for better definition */
.Callout[class*="--Bg"] {
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.Callout__Icon {
  position: absolute;
  left: 20px;
  top: 16px;
  width: 24px;
  height: 24px;
  line-height: 1.6;
  font-size: 24px;
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.Callout__Content {
  display: block;
  margin: 0; /* Remove all paragraph margins */
  line-height: 1.6;
  padding-top: 0; /* Remove padding for better alignment */
  min-width: 0; /* Prevent overflow */
  word-wrap: break-word;
}

/* Mobile optimization for Callout */
@media only screen and (max-width: 680px) {
  .Callout {
    padding: 12px 16px;
    padding-left: 46px; /* 16px + 20px icon + 10px gap */
    margin: 12px 0;
  }
  
  .Callout__Icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
    left: 16px;
    top: 12px;
  }
}

/* Fix "highlighted text" issue by ensuring inner blocks don't have their own backgrounds */
.Callout__Content .ColorfulBlock,
.Callout__Content .SemanticString span[class*="SemanticString__Fragment--Bg"],
.Callout__Content .SemanticString,
.Callout .ColorfulBlock--BgGray,
.Callout .ColorfulBlock--BgBlue,
.Callout .ColorfulBlock--BgBrown,
.Callout .ColorfulBlock--BgOrange,
.Callout .ColorfulBlock--BgYellow,
.Callout .ColorfulBlock--BgGreen,
.Callout .ColorfulBlock--BgPurple,
.Callout .ColorfulBlock--BgPink,
.Callout .ColorfulBlock--BgRed,
.Callout .ColorfulBlock--BgDefault {
  background-color: transparent !important;
  background: transparent !important;
}

/* Handle ejected content due to invalid p > div structure */
.Callout > .Text,
.Callout > .ColorfulBlock {
  display: block;
  margin-bottom: 0.5em;
}

.Callout > .Text:last-child,
.Callout > .ColorfulBlock:last-child {
  margin-bottom: 0;
}

/* Re-allow background ONLY for inline code blocks inside Callout */
.Callout__Content .SemanticString .SemanticString__Fragment--Code {
  background-color: rgba(135, 131, 120, 0.15) !important;
}

/* Optional: Make Callout content color slightly softer */
.Callout__Content {
  color: var(--color-text-default);
}

/* Remove extra padding/margin from text inside Callout */
.Callout .Text__Content {
  padding: 0;
  margin: 0;
}

.Callout .Text {
  margin: 0;
  display: inline;
}


/* Code */

/* Code */

pre.Code {
  border-radius: 8px;
  background-color: #1e1e1e; /* Darker modern background */
  margin: 16px 0;
  padding: 24px;
  overflow: auto;
  color: #d4d4d4; /* Default light text */
}

pre.Code code {
  background-color: transparent;
  color: inherit;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em;
  line-height: 1.6;
  padding: 0;
  word-wrap: break-word;
}

/* Ensure ALL text inside Code blocks has transparent background by default */
pre.Code .SemanticString,
pre.Code span[class*="SemanticString__Fragment--Bg"],
pre.Code .token {
  background-color: transparent !important;
}

/* Allow comments to keep their specific coloring but no background */
pre.Code .SemanticString__Fragment--Commented {
  background: transparent;
  border-bottom: none;
}

.Code.Code--NoWrap .SemanticString {
  white-space: pre;
}


/* Collection */

.CollectionInline > h3 {
  line-height: 1.75;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 1px;
  padding: 3px 2px;
}

.CollectionInline > h3:hover > .Anchor {
  visibility: visible;
}

.Table {
  overflow-x: auto;
}

.Table > table {
  width: 100%;
  font-size: 0.875rem;
  /* No double border */
  border-collapse: collapse;
  /* Force the table respects widths set on <th> */
  table-layout: fixed;
  /* Make space between table and scrollbar */
  margin-bottom: 10px;
}

.Table > table td,
.Table > table th {
  /* For <th> and unknown <td> */
  padding: 0 8px;
  height: 2rem;
  border: 1px solid rgba(55, 53, 47, 0.09);
  overflow: hidden;
  word-break: break-word;
}

.Table > table td:first-child,
.Table > table th:first-child {
  border-left: none;
}

.Table > table td:last-child,
.Table > table th:last-child {
  border-right: none;
}

.Table > table th {
  text-align: left;
  font-weight: normal;
  color: var(--color-text-default-light);
  /* Default width, which may be overridden by inline style attr. */
  width: 200px;
}

.Table__CellTitle > a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid hsl(45, 8%, 85%);
}

.Table__CellTitle > a:hover {
  border-bottom: 2px solid hsl(45, 8%, 55%);
}

.Table__CellText {
  padding: 6px 8px;
  line-height: 1.5;
}

.Table__CellSelect {
  /* 3px + 3px (margin of span) = 6px (desired) */
  padding: 3px 8px;
}

.Table__CellCheckbox {
  padding: 6px 8px;
}

.Table__CellCheckbox > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}

.Table__CellCheckbox--No svg {
  width: 100%;
  height: 100%;
  display: block;
  flex-shrink: 0;
  backface-visibility: hidden;
}

.Table__CellCheckbox--Yes svg {
  width: 12px;
  height: 12px;
  display: block;
  fill: white;
  flex-shrink: 0;
  backface-visibility: hidden;
}

.Gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  border-top: 1px solid rgba(55, 53, 47, 0.16);
  padding-top: 16px;
  padding-bottom: 4px;
}

.Gallery__Item {
  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
    rgba(15, 15, 15, 0.1) 0px 2px 4px;
  border-radius: 5px;
  transition: background 120ms ease-in 0s;
  position: relative;
  /* 10:7 */
  /* padding-top: 70%; */
}

.Gallery__Item:hover {
  background: rgba(55, 53, 47, 0.03);
}

.Gallery__Item > a {
  color: inherit;
  text-decoration: none;
}

/* .Gallery__Item>a>div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
} */

/* This is the key to make the layout robust. */

/* .Gallery__Item>a>div>div {
  grid-item-title has padding-top 8px, padding-bottom 10px, and its line-height.
     Since we can not get line-height with CSS, so just assign a large enough value. 
  height: calc(100% - 18px - 2rem);
} */

.Gallery__Item__Cover {
  box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px 0px inset;
  height: 200px;
}

.Gallery__Item__Cover > img {
  width: 100%;
  height: 100%;
  max-height: 200px;
  border-radius: 5px 5px 0 0;
  object-fit: cover;
  object-position: center 50%;
  padding-bottom: 1px;
}

.Gallery__Item__Cover--Contain > img {
  object-fit: contain;
}

.Gallery__Item__Title {
  padding: 8px 10px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Gallery__Item__Title .SemanticString {
  white-space: nowrap;
}

.Gallery__Item__Property {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  padding: 0px 10px;
}

.Gallery__Item__Property:last-child {
  margin-bottom: 10px;
}

.Gallery__Item__PropertyText .SemanticString {
  white-space: nowrap;
}

@supports not (display: grid) {
  .Gallery__Item {
    margin-top: 16px;
  }
}

/* ColorfulBlock */

.ColorfulBlock--ColorDefault {
  color: var(--color-text-default);
}

.ColorfulBlock--ColorGray {
  color: var(--color-text-gray);
}

.ColorfulBlock--ColorBrown {
  color: var(--color-text-brown);
}

.ColorfulBlock--ColorOrange {
  color: var(--color-text-orange);
}

.ColorfulBlock--ColorYellow {
  color: var(--color-text-yellow);
}

.ColorfulBlock--ColorGreen {
  color: var(--color-text-green);
}

.ColorfulBlock--ColorBlue {
  color: var(--color-text-blue);
}

.ColorfulBlock--ColorPurple {
  color: var(--color-text-purple);
}

.ColorfulBlock--ColorPink {
  color: var(--color-text-pink);
}

.ColorfulBlock--ColorRed {
  color: var(--color-text-red);
}

.ColorfulBlock--BgDefault {
  background: var(--color-bg-default);
}

.ColorfulBlock--BgGray {
  background: var(--color-bg-gray);
}

.ColorfulBlock--BgBrown {
  background: var(--color-bg-brown);
}

.ColorfulBlock--BgOrange {
  background: var(--color-bg-orange);
}

.ColorfulBlock--BgYellow {
  background: var(--color-bg-yellow);
}

.ColorfulBlock--BgGreen {
  background: var(--color-bg-green);
}

.ColorfulBlock--BgBlue {
  background: var(--color-bg-blue);
}

.ColorfulBlock--BgPurple {
  background: var(--color-bg-purple);
}

.ColorfulBlock--BgPink {
  background: var(--color-bg-pink);
}

.ColorfulBlock--BgRed {
  background: var(--color-bg-red);
}

/* ColumnList */

.ColumnList {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* Modern gap property for better spacing */
}

.Column {
  padding: 12px;
  word-break: break-word;
  min-width: 0; /* Prevent flex items from overflowing */
  flex: 1;
  box-sizing: border-box;
}

.Column:not(:first-child) {
  margin-left: 0; /* Remove old margin, using gap instead */
}

/* Tablet */
@media only screen and (max-width: 1024px) {
  .ColumnList {
    gap: 12px;
  }
  
  .Column {
    flex: 1 1 calc(50% - 12px); /* 2 columns on tablet */
    min-width: calc(50% - 12px);
  }
}

/* Mobile */
@media only screen and (max-width: 680px) {
  .ColumnList {
    flex-direction: column;
    gap: 16px;
  }
  
  .Column {
    width: 100% !important;
    margin-left: 0 !important;
    flex: 1 1 100%;
    min-width: 100%;
  }
}

/* Divider */

.Divider {
  width: 100%;
  border: 1px solid rgba(55, 53, 47, 0.09);
}

.Divider2 {
  width: 100%;
  height: calc(1.5rem + 10px);
  color: #1f2225;
  background-image: linear-gradient(
    to right,
    rgb(31, 34, 37) 25%,
    rgb(255, 255, 255) 0%
  );
  background-position: left center;
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

/* Embed */

.Embed__Content {
  display: flex;
}

.Embed__Caption {
  padding: 6px 2px;
  color: var(--color-text-default-light);
  font-size: 0.875em;
}

.Embed__ResponsiveContainer {
  position: relative;
  min-height: 100px;
  height: 0;
  margin: 0 auto;
}

.Embed__ResponsiveContainer > iframe {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 1px;
  pointer-events: auto;
  background-color: rgb(247, 246, 245);
}

/* Equation */

.Equation {
  margin: 4px 0;
  padding: 4px 8px;
}

/* File */

.File {
  color: inherit;
  text-decoration: none;
}

.File > div {
  display: flex;
  padding: 5px 0;
  margin: 2px 0;
  border-radius: 5px;
  transition: background 120ms ease-in 0s;
}

.File > div:hover {
  background: var(--color-ui-hover-bg);
}

.File__Icon {
  margin-left: 2px;
  margin-right: 4px;
  width: 1.5em;
  text-align: center;
}

.File__Title {
  line-height: 1.5;
}

.File__Size {
  margin-left: 6px;
  color: var(--color-text-default-light);
  font-size: 0.75em;
}

/* Heading */

.Heading {
  margin-bottom: 1px;
  padding: 3px 2px;
}

/* Font-related CSS should be applied on ".SemanticString". */
.Heading .SemanticString {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.Heading:hover > .Anchor {
  visibility: visible;
}

.Heading--1 .SemanticString {
  font-size: 2.0625rem;
  line-height: 1.515;
}

.Heading--2 {
  margin-top: 1rem;
}

.Heading--2 .SemanticString {
  font-size: 1.625rem;
  line-height: 1.538;
}

.Heading--3 {
  margin-top: 0.5rem;
}

.Heading--3 .SemanticString {
  font-size: 1.25rem;
  line-height: 1.55;
}

.Heading--4 .SemanticString {
  font-size: 1rem;
  line-height: 1.563;
}

.Heading--5 .SemanticString {
  font-size: 0.8125rem;
  line-height: 1.615;
  color: #888;
}

.Column > .Heading:first-child {
  margin-top: 2px;
}

/* Icon */

.Icon {
  /* For emoji */
  text-align: center;
  /* For image */
  border-radius: 3px;
}

/* Image */

.Image {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  align-self: center;
}

.Image--FullWidth {
  width: calc(100vw - 15px);
}

.Image--Normal,
.Image--PageWidth {
  max-width: 100%;
}

.Image--Normal {
  text-align: center;
}

.Image--PageWidth {
  width: 100%;
}

.Image > figure {
  margin: 0;
}

.Image > figure > figcaption {
  color: var(--color-text-default-light);
  font-size: 0.875rem;
  text-align: left;
}

.Image--FullWidth > figure img {
  /* 15px is scrollbar */
  width: 100%;
  max-width: 100vw;
  height: auto;
  object-fit: contain;
}

.Image--FullWidth > figure > figcaption {
  padding: 6px 26px;
}

.Image--Normal > figure img,
.Image--PageWidth > figure img {
  max-width: 100%;
  object-fit: contain;
}

.Image--Normal > figure > figcaption,
.Image--PageWidth > figure > figcaption {
  padding: 6px 2px;
}

/* NumberedList */

.NumberedListWrapper {
  margin: 2px 0;
  padding-left: calc(1.5em + 4px);
  line-height: 1.5;
}

.NumberedList {
  margin: 2px 0;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Page */

.PageRoot {
  display: flex;
  flex-direction: column;
}

.PageRoot--FullWidth {
  width: 100%;
}

.Page {
  color: inherit;
  text-decoration: none;
}

.Page > div {
  display: flex;
  padding: 3px 0;
  margin: 2px 0;
  border-radius: 5px;
  transition: background 120ms ease-in 0s;
}

.Page > div:hover {
  background: var(--color-ui-hover-bg);
}

.Page__Icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  margin-left: 2px;
  margin-right: 4px;
}

.Page__Title .SemanticStringArray {
  border-bottom: 1px solid rgba(55, 53, 47, 0.16);
}

/* PDF */

.PDF__Content {
  text-align: center;
}

.PDF__Content > embed {
  max-width: 100%;
}

.PDF__Caption {
  padding: 6px 2px;
  color: var(--color-text-default-light);
  font-size: 0.875em;
}

/* Pill */

.Pill {
  padding: 0 6px;
  border-radius: 3px;
  white-space: nowrap;
  display: inline-block;
  /* margin of inline-block does not collapse */
  margin: 3px 0;
  margin-right: 6px;
}

.Pill--ColorDefault {
  background: var(--color-pill-default);
}

.Pill--ColorGray {
  background: var(--color-pill-gray);
}

.Pill--ColorBrown {
  background: var(--color-pill-brown);
}

.Pill--ColorOrange {
  background: var(--color-pill-orange);
}

.Pill--ColorYellow {
  background: var(--color-pill-yellow);
}

.Pill--ColorGreen {
  background: var(--color-pill-green);
}

.Pill--ColorBlue {
  background: var(--color-pill-blue);
}

.Pill--ColorPurple {
  background: var(--color-pill-purple);
}

.Pill--ColorPink {
  background: var(--color-pill-pink);
}

.Pill--ColorRed {
  background: var(--color-pill-red);
}

/* Quote */

/* Quote */

.Quote {
  position: relative;
  background: transparent;
  border-left: 3px solid var(--color-text-default); /* Thinner border per request */
  border-radius: 0;
  margin: 2rem 0;
  padding: 4px 0 4px 20px;
  font-size: 1.15rem; /* Slightly reduced size for better balance */
  line-height: 1.7;
  font-style: normal; /* Removed italic for Chinese text */
  color: var(--color-text-default);
}

/* Quote */

.Quote {
  position: relative;
  background: transparent;
  border-left: 3px solid var(--color-text-default);
  border-radius: 0;
  margin: 2rem 0;
  padding: 4px 0 4px 20px;
  font-size: 1.15rem;
  line-height: 1.7;
  font-style: normal;
  color: var(--color-text-default);
}

/* Removed quote mark decoration per request */


/* SemanticStringArray */

.SemanticString {
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.SemanticString__Fragment--Link,
.SemanticString__Fragment--Resource > a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid hsl(45, 8%, 85%);
}

.SemanticString__Fragment--Link:hover,
.SemanticString__Fragment--Resource > a:hover {
  border-bottom: 2px solid hsl(45, 8%, 55%);
}

.SemanticString__Fragment--Code {
  border-radius: 5px;
  background-color: rgba(135, 131, 120, 0.15);
  font-size: 0.9em;
  padding: 0.2em 0.4em;
  word-break: break-word;
}

.SemanticString__Fragment--HighlightedBg,
.SemanticString__Fragment--HighlightedColor {
  background-color: inherit;
}

/* Code in highlighted should use the highlight background or color. */

.SemanticString__Fragment--HighlightedBg .SemanticString__Fragment--Code {
  background-color: inherit;
}

.SemanticString__Fragment--HighlightedColor .SemanticString__Fragment--Code {
  color: inherit;
}

.SemanticString__Fragment--ColorDefault {
  color: var(--color-text-default);
}

.SemanticString__Fragment--ColorGray {
  color: var(--color-text-gray);
}

.SemanticString__Fragment--ColorBrown {
  color: var(--color-text-brown);
}

.SemanticString__Fragment--ColorOrange {
  color: var(--color-text-orange);
}

.SemanticString__Fragment--ColorYellow {
  color: var(--color-text-yellow);
}

.SemanticString__Fragment--ColorGreen {
  color: var(--color-text-green);
}

.SemanticString__Fragment--ColorBlue {
  color: var(--color-text-blue);
}

.SemanticString__Fragment--ColorPurple {
  color: var(--color-text-purple);
}

.SemanticString__Fragment--ColorPink {
  color: var(--color-text-pink);
}

.SemanticString__Fragment--ColorRed {
  color: var(--color-text-red);
}

.SemanticString__Fragment--BgDefault {
  background: var(--color-bg-default);
}

.SemanticString__Fragment--BgGray {
  background: var(--color-bg-gray);
}

.SemanticString__Fragment--BgBrown {
  background: var(--color-bg-brown);
}

.SemanticString__Fragment--BgOrange {
  background: var(--color-bg-orange);
}

.SemanticString__Fragment--BgYellow {
  background: var(--color-bg-yellow);
}

.SemanticString__Fragment--BgGreen {
  background: var(--color-bg-green);
}

.SemanticString__Fragment--BgBlue {
  background: var(--color-bg-blue);
}

.SemanticString__Fragment--BgPurple {
  background: var(--color-bg-purple);
}

.SemanticString__Fragment--BgPink {
  background: var(--color-bg-pink);
}

.SemanticString__Fragment--BgRed {
  background: var(--color-bg-red);
}

.SemanticString__Fragment--Commented {
  background: rgba(255, 212, 0, 0.14);
  border-bottom: 2px solid rgb(255, 212, 0);
}

.SemanticString__Fragment--Individual,
.SemanticString__Fragment--Resource,
.SemanticString__Fragment--Date {
  color: var(--color-text-default-light);
}

/* TableOfContents */

.TableOfContents {
  margin: 4px 0;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.875rem;
}

.TableOfContents__Item {
  list-style-type: none;
  transition: background 120ms ease-in 0s;
  border-radius: 5px;
}

.TableOfContents__Item:hover {
  background: var(--color-ui-hover-bg);
}

.TableOfContents__Item > a {
  color: inherit;
  text-decoration: none;
}

.TableOfContents__Item > a > div {
  padding: 4.5px 2px;
}

.TableOfContents__Item .SemanticStringArray {
  border-bottom: 1px solid rgba(55, 53, 47, 0.16);
}

/* Text */

.Text {
  margin-top: 0;
  margin-bottom: 0.5em; /* Tighter spacing as requested */
}

.Text:last-child {
  margin-bottom: 0;
}

.Text__Content {
  padding: 0 2px;
  margin: 0;
}

.Text__Children {
  margin-left: 1.5em;
}

/* ToDo */

.ToDo__Content {
  display: flex;
  padding: 3px 0;
  margin: 2px 0;
  line-height: 1.5;
}

.ToDo__Icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5em;
  width: 1.5em;
  margin-left: 2px;
  margin-right: 4px;
  flex-shrink: 0;
}

.ToDo__Title--done {
  opacity: 0.375;
}

.ToDo__Children {
  margin-left: calc(1.5em + 6px);
}

.IconCheckboxChecked {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  background: rgb(46, 170, 220);
}

.IconCheckboxChecked > svg {
  width: 0.75em;
  height: 0.75em;
  fill: white;
}

.IconCheckboxUnchecked {
  display: flex;
}

.IconCheckboxUnchecked > svg {
  width: 1em;
  height: 1em;
  fill: inherit;
}

/**
 * Toggle
 * Ref. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
 */

.Toggle {
  margin: 2px 0;
}

.Toggle__Summary {
  padding: 3px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
}

.Toggle__Summary::-webkit-details-marker {
  display: none;
}

.Toggle__Summary:focus {
  outline: none;
}

.Toggle__Summary::before {
  /* If we don't specify "content", this element doesn't show. */
  content: '';
  /* Prevent this element shrink when content is long. */
  flex: 0 0 1.25rem;
  border-radius: 0.25rem;
  margin: 0.125rem 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.8 9.30718C14.1938 9.53454 14.3907 9.64822 14.4568 9.79663C14.5144 9.92609 14.5144 10.0739 11.4568 10.2034C14.3907 10.3518 14.1938 10.4655 13.8 10.6928L8.7 13.6373C8.3062 13.8647 8.10931 13.9783 7.94774 13.9614C7.80681 13.9466 7.67878 13.8726 7.59549 13.758C7.5 13.6266 7.5 13.3992 7.5 12.9445L7.5 7.05551C7.5 6.6008 7.5 6.37344 7.59549 6.24201C7.67878 6.12736 7.80681 6.05345 7.94774 6.03864C8.10931 6.02166 8.3062 6.13533 8.7 6.36269L13.8 9.30718Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  transition: background-image 0.1s ease-in-out, transform 0.2s ease-in-out;
}

.Toggle--Empty > .Toggle__Summary::before {
  opacity: 0.5;
}

.Toggle[open] > .Toggle__Summary::before {
  transform: rotate(90deg);
}

.Toggle__Summary:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='5' fill='%2337352F' fill-opacity='0.08'/%3E%3Cpath d='M13.8 9.30718C14.1938 9.53454 14.3907 9.64822 14.4568 9.79663C14.5144 9.92608 14.5144 10.0739 14.4568 10.2034C14.3907 10.3518 14.1938 10.4655 13.8 10.6928L8.7 13.6373C8.3062 13.8647 8.10931 13.9783 7.94774 13.9614C7.80681 13.9466 7.67878 13.8726 7.59549 13.758C7.5 13.6266 7.5 13.3992 7.5 12.9445L7.5 7.05551C7.5 6.6008 7.5 6.37344 7.59549 6.24201C7.67878 6.12736 7.80681 6.05345 7.94774 6.03864C8.10931 6.02166 8.3062 6.13533 8.7 6.36269L13.8 9.30718Z' fill='black'/%3E%3C/svg%3E");
}

.Toggle__Content {
  padding-left: calc(1.5em + 4px);
}

/* Video */

.Video {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  align-self: center;
}

.Video__Content > video {
  max-width: 100%;
}

.Video__Caption {
  padding: 6px 2px;
  color: var(--color-text-default-light);
  font-size: 0.875em;
}

/* Works page full-width overrides */
.Works .PageRoot,
.Works .CollectionInline,
.Works .Table {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: visible !important;
}