/* ===== style ===== */

:root.folia-document {
  --blue:#3e7486;
  --logo-teal:#568c9b;
  --logo-purple:#9b9ed0;
  --brand-gradient:linear-gradient(120deg,#467d8e 0%,#646a9d 100%);
  --ink:#202b36;
  --muted:#526375;
  --line:#dce3e9;
  --paper:#f5f8f9;
  --light-blue:#edf1f8
}
:where(.folia-site) * {
  box-sizing:border-box
}
html.folia-document {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body.folia-site {
  margin:0;
  color:var(--ink);

  background:#fff
}
:where(.folia-site) a {
  color:inherit;
  text-decoration:none
}
:where(.folia-site) button {
  color:inherit;
  cursor:pointer
}
:where(.folia-site) button, :where(.folia-site) a {
  -webkit-tap-highlight-color:transparent
}
:where(.folia-site) button:focus-visible, :where(.folia-site) a:focus-visible, :where(.folia-site) summary:focus-visible {
  outline:3px solid #889cc1;
  outline-offset:5px
}
:where(.folia-site) img {
  display:block;
  max-width:100%;
  height:auto
}
:where(.folia-site) button {
  border:0
}
:where(.folia-site) h1, :where(.folia-site) h2, :where(.folia-site) h3, :where(.folia-site) p, :where(.folia-site) figure {
  margin:0
}
.folia-wrap {
  width:min(1200px,calc(100% - 80px));
  margin-inline:auto
}
.folia-skip-link {
  position:fixed;
  top:-70px;
  left:16px;
  padding:12px;
  background:#fff;
  z-index:100
}
.folia-skip-link:focus {
  top:8px
}
.folia-masthead {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e9edf3
}
.folia-navigation {
  height:80px;
  display:flex;
  align-items:center;
  gap:36px
}
.folia-brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.folia-brand img {
  border-radius:9px
}
.folia-brand-note {
  display:block;

  margin-top:5px;
  color:var(--muted);
}
:where(.folia-site) nav {
  margin-left:auto;
  display:flex;
  gap:27px;
}
:where(.folia-site) nav a:hover, .folia-text-action:hover {
  color:var(--blue)
}
.folia-home-link {
  display:block
}
.folia-download-top {
  padding:10px 17px;
  background:var(--brand-gradient);
  color:white;
  border-radius:6px
}
.folia-download-top i {
  margin-left:10px
}
.folia-menu-toggle {
  display:none;
  background:none;
  font-size:22px
}
.folia-opening {
  background:linear-gradient(135deg,#f0f7f6 0%,#f5f7fa 48%,#f1eef9 100%);
  padding-top:32px;
  overflow:hidden
}
.folia-opening-copy {
  text-align:center
}
.folia-eyebrow {
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px
}
.folia-eyebrow span {
  width:5px;
  height:5px;
  background:var(--brand-gradient);
  border-radius:50%
}
:where(.folia-site) h1 {
  margin:10px 0 3px
}
.folia-opening-line em {
  color:var(--blue)
}
.folia-opening-description {
  color:var(--muted);
  margin-top:13px
}
.folia-opening-actions {
  display:flex;
  gap:28px;
  align-items:center;
  justify-content:center;
  margin:20px 0 27px
}
.folia-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 26px;
  color:white;
  background:var(--brand-gradient);
  border-radius:7px;

  transition:background .2s,transform .2s
}
.folia-action:hover, .folia-download-top:hover {
  background:linear-gradient(120deg,#376b7c,#565b8b)
}
.folia-action:hover {
  transform:translateY(-2px)
}
.folia-text-action {
  display:inline-flex;
  align-items:center;
  gap:14px
}
.folia-stage-wrap {
  position:relative;
  padding:0 115px
}
.folia-main-stage {
  max-width:800px;
  margin-inline:auto;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 14px 42px #1426401a;
  background:#fff;
  border:1px solid #dce2eb
}
.folia-stage-top {
  display:flex;
  align-items:center;
  justify-content:space-between;

  color:#7a8492;
  padding:10px 17px
}
.folia-stage-top>span:first-child {
  display:flex;
  align-items:center;
  gap:7px;
  color:#454e5f
}
.folia-tiny-disc {
  height:9px;
  width:9px;
  border:3px solid #839bc0;
  border-radius:50%
}
.folia-image-zoom {
  display:block;
  background:none;
  padding:0;
  width:100%;
  cursor:zoom-in
}
.folia-hero-zoom {
  background:#343637
}
.folia-hero-zoom img {
  width:100%;
  height:auto
}
.folia-stage-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  gap:8px
}
.folia-stage-tabs {
  display:flex;
  gap:5px
}
.folia-stage-tabs button {
  padding:5px 13px;

  background:transparent;
  border-radius:4px;
  color:var(--muted)
}
.folia-stage-tabs button.folia-selected {
  background:var(--light-blue);
  color:var(--blue)
}
:where(.folia-site) #stage-caption {
  color:var(--muted)
}
.folia-stage-margin {
  position:absolute;
  left:22px;
  top:34%;
  writing-mode:vertical-rl;

  color:#63778a
}
.folia-stage-index {
  position:absolute;
  right:10px;
  bottom:15%;

  color:#63778a;
  writing-mode:vertical-rl;
}
.folia-opening-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px 0;

  color:#617286
}
.folia-opening-foot a {
  display:flex;
  align-items:center;
  gap:12px
}
.folia-chapter-number {
  color:var(--blue);

  margin-bottom:12px
}
.folia-lyric-chapter {
  padding-block:70px 55px
}
.folia-chapter-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:32px
}
.folia-chapter-heading>p {
  color:var(--muted)
}
.folia-lyric-layout {
  display:grid;
  grid-template-columns:1fr 1.8fr;
  gap:65px
}
.folia-lyric-notes {
  padding-top:17px
}
.folia-lyric-notes>p {
  color:var(--muted);
  margin-top:14px;
}
.folia-mode-list {
  list-style:none;
  margin:25px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:25px
}
.folia-mode-list li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.folia-mode-list i {
  color:var(--blue);
  font-size:19px
}
.folia-lyric-notes .folia-small-note {
  color:#647586;
  margin-top:20px
}
.folia-lyric-exhibit {
  display:grid;
  grid-template-columns:240px 1fr;
  background:linear-gradient(135deg,#ecf3f4,#eeedf6);
  border-radius:10px;
  overflow:hidden;
  align-items:center;
  min-width:0
}
.folia-lyric-exhibit img {
  width:240px
}
.folia-lyric-exhibit figcaption {
  padding:28px
}
.folia-exhibit-label {
  color:var(--muted)
}
.folia-lyric-exhibit strong {
  display:block;

  margin:23px 0;
}
.folia-exhibit-detail {
  color:var(--muted);
}
.folia-listening-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  border-top:1px solid var(--line);
  margin-top:35px;
  padding-top:28px
}
.folia-listening-pair article {
  display:flex;
  align-items:start;
  gap:18px
}
.folia-listening-pair article>i {
  font-size:25px;
  color:var(--blue);
}
.folia-listening-pair p {
  color:var(--muted);
  margin-top:8px
}
.folia-music-library {
  background:var(--paper);
  padding-block:65px
}
.folia-library-grid {
  display:grid;
  grid-template-columns:1fr 1.22fr;
  gap:75px;
  align-items:center
}
.folia-section-description {
  color:var(--muted);
  margin-top:16px
}
.folia-source-list {
  margin:22px 0 0
}
.folia-source-list>div {
  padding:17px 0;
  border-top:1px solid var(--line)
}
.folia-source-list dt {
  display:flex;
  align-items:center;
  gap:12px
}
.folia-source-list dt i {
  font-size:19px;
  color:var(--blue);
}
.folia-source-list dd {
  margin:6px 0 0 31px;

  color:var(--muted)
}
.folia-collection-display {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:22px
}
.folia-collection-desktop {
  grid-column:1/-1;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line)
}
.folia-collection-desktop figcaption {
  padding:10px 15px;

  color:var(--muted)
}
.folia-collection-mobile {
  width:148px;
  justify-self:center;
  border:5px solid #fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 20px #253b5a0c
}
.folia-collection-note {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:13px
}
.folia-collection-note i {
  color:var(--blue);
  font-size:24px
}
.folia-collection-note>span {
  color:var(--muted)
}
.folia-personal-listening {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:95px;
  align-items:center;
  padding-block:70px
}
.folia-settings-picture {
  position:relative;
  background:linear-gradient(145deg,#eaf3f3,#f0eef8);
  border-radius:10px;
  padding:38px 30px 22px;
  display:flex;
  justify-content:center
}
.folia-settings-picture figure {
  width:230px
}
.folia-settings-picture img {
  border-radius:8px
}
.folia-settings-picture figcaption {
  color:var(--muted);
  text-align:center;
  margin-top:20px
}
.folia-setting-stamp {
  position:absolute;
  left:19px;
  top:23px;

  color:#536f85
}
.folia-setting-list {
  padding:0;
  list-style:none;
  margin:18px 0
}
.folia-setting-list li {
  padding:16px 0;
  display:flex;
  gap:18px;
  border-bottom:1px solid var(--line)
}
.folia-setting-list li>span {
  color:#8998ac;
}
.folia-setting-list p {
  color:var(--muted);
  margin-top:6px
}
.folia-media-control {
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:start
}
.folia-media-control i {
  font-size:19px
}
.folia-download-area {
  padding-block:55px 30px;
  background:linear-gradient(115deg,#e7f1f1,#edf0f8 60%,#eeeaf7);
  border-block:1px solid #dce6f5
}
.folia-download-heading {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.folia-download-heading>div>p:last-child {
  color:var(--muted);
  margin-top:14px
}
.folia-download-heading>img {
  border-radius:24px;
  transform:rotate(-7deg);
  margin-right:24px;
  box-shadow:0 12px 25px #2f6ad014
}
.folia-download-groups {
  display:grid;
  grid-template-columns:2fr 3fr;
  gap:28px;
  margin-top:35px
}
.folia-download-groups h3 {
  margin-bottom:12px
}
.folia-download-groups h3 span {
  color:var(--muted);
  margin-left:10px
}
.folia-platform-list {
  display:flex;
  gap:10px
}
.folia-platform-list a {
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:19px 12px;
  background:#fff;
  border:1px solid #dfe7f4;
  border-radius:7px;
  position:relative;
  transition:border-color .2s,transform .2s
}
.folia-platform-list a:hover {
  border-color:var(--blue);
  transform:translateY(-3px)
}
.folia-platform-list a>i:first-child {
  font-size:25px;

  color:#374f75
}
.folia-platform-list a>i:last-child {
  font-size:18px;
  color:var(--blue);
  margin-left:auto
}
.folia-platform-list strong {
  display:block
}
.folia-platform-list small {
  display:block;

  color:var(--muted);
  white-space:nowrap
}
.folia-platform-list .folia-recommended {
  border-color:var(--blue)
}
.folia-recommend-tag {
  position:absolute;
  top:-10px;
  right:9px;
  color:#fff!important;
  background:var(--brand-gradient);
  border-radius:3px;
  padding:1px 5px;
}
.folia-web-note {
  display:flex;
  justify-content:center;
  gap:9px;
  color:var(--muted);

  padding-top:24px
}
.folia-questions {
  padding-block:65px;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px
}
.folia-faq-intro>p:not(.folia-chapter-number) {
  color:var(--muted);
  margin:13px 0 24px
}
.folia-answer-list details {
  border-bottom:1px solid var(--line)
}
.folia-answer-list details:first-child {
  border-top:1px solid var(--line)
}
:where(.folia-site) summary {
  padding:20px 0;

  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  list-style:none
}
:where(.folia-site) summary::-webkit-details-marker {
  display:none
}
:where(.folia-site) summary i {
  font-size:20px;
  color:#8894a7;
  transition:transform .2s;
  flex-shrink:0
}
:where(.folia-site) details[open] summary {
  color:var(--blue)
}
:where(.folia-site) details[open] summary i {
  transform:rotate(45deg);
  color:var(--blue)
}
:where(.folia-site) details>p {
  color:var(--muted);
  padding:0 25px 20px 0;

  overflow-wrap:anywhere
}
.folia-footer {
  background:var(--paper);
  border-top:1px solid #e9edf3
}
.folia-copyright-notice {
  padding-block: 0 22px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.folia-footer-main {
  display:flex;
  align-items:center;
  gap:25px;
  padding-block:30px
}
.folia-footer-main>p {
  color:var(--muted)
}
.folia-footer-main>a:not(.folia-brand) {
  margin-left:auto;
}
.folia-back-top {
  background:none;

  color:var(--muted)
}
.folia-footer-bottom {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  padding-block:16px;

  color:#667486
}
.folia-image-viewer {
  max-width:94vw;
  max-height:94dvh;
  width:max-content;
  padding:50px 15px 15px;
  border:0;
  border-radius:10px;
  background:#f4f6f9;
  color:var(--ink)
}
.folia-image-viewer::backdrop {
  background:#111c30d9
}
.folia-image-viewer>img {
  max-height:76dvh;
  max-width:85vw;
  width:auto;
  object-fit:contain;
  margin:auto
}
.folia-image-viewer>p {
  text-align:center;
  padding-top:10px
}
.folia-viewer-close {
  position:absolute;
  right:14px;
  top:9px;
  padding:3px 8px;
  background:#e4e9f0;
  display:flex;
  align-items:center;
  gap:5px;
  border-radius:4px;
}
.folia-viewer-close i {
  font-size:20px
}
body.folia-viewer-open {
  overflow:hidden
}
@media(min-width:1500px) {
.folia-stage-wrap {
    padding-inline:150px
  }
}
@media(max-width:1100px) {
.folia-wrap {
    width:calc(100% - 56px)
  }
.folia-navigation {
    gap:22px
  }
:where(.folia-site) nav {
    gap:20px
  }
.folia-stage-wrap {
    padding-inline:75px
  }
.folia-lyric-layout {
    gap:35px;
    grid-template-columns:1fr 1.55fr
  }
.folia-lyric-exhibit {
    grid-template-columns:200px 1fr
  }
.folia-lyric-exhibit img {
    width:200px
  }
.folia-lyric-exhibit figcaption {
    padding:22px
  }
.folia-library-grid {
    gap:40px
  }
.folia-personal-listening {
    gap:55px
  }
.folia-download-groups {
    grid-template-columns:1fr;
    gap:24px
  }
.folia-platform-list a {
    padding:18px 20px
  }
.folia-stage-margin {
    left:7px
  }
.folia-stage-index {
    right:0
  }
.folia-download-heading img {
    width:86px
  }
}
@media(max-width:800px) {
html.folia-document {
    scroll-padding-top:85px
  }
.folia-wrap {
    width:calc(100% - 40px)
  }
.folia-navigation {
    height:68px;
    gap:14px
  }
.folia-brand img {
    width:32px
  }
.folia-download-top {
    margin-left:auto
  }
.folia-menu-toggle {
    display:block;
    padding:6px
  }
:where(.folia-site) nav {
    display:flex;
    position:absolute;
    left:0;
    right:0;
    top:68px;
    padding:17px 20px;
    gap:20px;
    background:#fff;
    border-bottom:1px solid var(--line);
    flex-wrap:wrap
  }
body.folia-js-ready nav {
    display:none
  }
body.folia-js-ready nav.folia-open {
    display:flex
  }
.folia-home-link {
    display:block
  }
body:not(.folia-js-ready) .folia-masthead {
    margin-bottom:65px
  }
.folia-opening {
    padding-top:35px
  }
.folia-stage-wrap {
    padding-inline:30px
  }
.folia-stage-margin {
    left:0;
}
.folia-stage-index {
    display:none
  }
.folia-stage-controls {
    padding:9px 10px
  }
.folia-stage-tabs button {
    padding:5px 9px
  }
.folia-chapter-heading {
    align-items:start;
    flex-direction:column;
    gap:14px
  }
.folia-lyric-layout {
    grid-template-columns:1fr 1.25fr;
    gap:28px
  }
.folia-lyric-exhibit {
    display:block;
    position:relative;
    background:#17191c
  }
.folia-lyric-exhibit .folia-image-zoom {
    width:100%
  }
.folia-lyric-exhibit img {
    width:100%
  }
.folia-lyric-exhibit figcaption {
    padding:13px;
    color:#fff;
    background:#24262b
  }
.folia-exhibit-label {
    color:#b6bdc7
  }
.folia-lyric-exhibit strong {
    margin:6px 0
  }
.folia-lyric-exhibit strong br {
    display:none
  }
.folia-exhibit-detail {
    display:none
  }
.folia-lyric-notes {
    padding-top:0
  }
.folia-mode-list {
    column-gap:15px
  }
.folia-listening-pair {
    gap:24px
  }
.folia-listening-pair article {
    gap:12px
  }
.folia-library-grid {
    grid-template-columns:1fr;
    gap:28px
  }
.folia-library-intro h2 br {
    display:none
  }
.folia-collection-display {
    grid-template-columns:2fr 1fr;
    gap:24px;
    align-items:start
  }
.folia-collection-desktop {
    grid-column:auto
  }
.folia-collection-mobile {
    width:125px;
    grid-row:span 2
  }
.folia-collection-note {
    display:none
  }
.folia-personal-listening {
    gap:35px;
    grid-template-columns:1fr 1.2fr
  }
.folia-settings-picture {
    padding:35px 15px 18px
  }
.folia-setting-stamp {
    display:none
  }
.folia-settings-copy h2 br {
    display:none
  }
.folia-settings-picture figure {
    width:100%
  }
.folia-questions {
    grid-template-columns:1fr;
    gap:25px
  }
.folia-faq-intro>p:not(.folia-chapter-number) {
    margin-bottom:14px
  }
.folia-faq-intro>p br {
    display:none
  }
.folia-footer-main {
    gap:15px;
    flex-wrap:wrap
  }
.folia-footer-main>a:not(.folia-brand) {
    margin-left:auto
  }
}
@media(max-width:600px) {
.folia-wrap {
    width:calc(100% - 36px)
  }
.folia-masthead .folia-brand-note {
    display:none
  }
.folia-navigation {
    gap:8px;
    height:64px
  }
.folia-download-top {
    padding:8px 12px
  }
.folia-download-top i {
    margin-left:5px
  }
.folia-menu-toggle {
    font-size:20px
  }
:where(.folia-site) nav {
    top:64px;

    gap:18px
  }
:where(.folia-site) h1 {
    margin-top:12px;
}
.folia-opening {
    padding-top:29px
  }
.folia-opening-line {
    margin-top:8px
  }
.folia-opening-line em {
    display:block
  }
.folia-opening-description {
    margin-top:12px
  }
.folia-desktop-break {
    display:none
  }
.folia-opening-actions {
    gap:22px;
    margin:21px 0 25px
  }
.folia-action {
    padding:10px 21px;
}
.folia-text-action {
    gap:8px
  }
.folia-stage-wrap {
    width:calc(100% - 56px);
    padding:0 20px
  }
.folia-main-stage {
    max-width:310px;
    margin:auto;
    border-radius:10px
  }
.folia-hero-zoom img {
    width:100%;
    max-height:none
  }
.folia-stage-top {
    padding:9px 11px;
}
.folia-stage-controls {
    display:block;
    padding:9px 7px
  }
.folia-stage-tabs {
    justify-content:center
  }
.folia-stage-tabs button {
    padding:4px 9px
  }
:where(.folia-site) #stage-caption {
    display:block;

    text-align:center;
    margin-top:7px
  }
.folia-stage-margin {
    left:-8px;
    top:30%
  }
.folia-opening-foot {
    padding-block:21px;

    gap:14px
  }
.folia-opening-foot a {
    gap:6px;
    white-space:nowrap
  }
.folia-lyric-chapter {
    padding-block:43px 36px
  }
.folia-chapter-number {
    margin-bottom:10px;
}
.folia-chapter-heading {
    gap:12px;
    margin-bottom:25px
  }
.folia-chapter-heading>p br {
    display:none
  }
.folia-lyric-layout {
    grid-template-columns:1fr;
    gap:23px
  }
.folia-lyric-notes>p {
    margin-top:10px
  }
.folia-mode-list {
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:15px
  }
.folia-mode-list li {
    gap:5px;
    padding:10px 0
  }
.folia-mode-list i {
    font-size:17px
  }
.folia-lyric-notes .folia-small-note {
    margin-top:12px
  }
.folia-small-note br {
    display:none
  }
.folia-lyric-exhibit {
    display:grid;
    grid-template-columns:48% 1fr;
    background:linear-gradient(135deg,#ecf3f4,#eeedf6);
    align-items:center
  }
.folia-lyric-exhibit figcaption {
    background:none;
    color:var(--ink);
    padding:18px
  }
.folia-lyric-exhibit strong {
    margin:17px 0
  }
.folia-lyric-exhibit strong br {
    display:block
  }
.folia-exhibit-label {
    color:var(--muted)
  }
.folia-exhibit-detail {
    display:block;
}
.folia-listening-pair {
    grid-template-columns:1fr;
    gap:21px;
    margin-top:24px;
    padding-top:23px
  }
.folia-listening-pair article>i {
    font-size:22px
  }
.folia-music-library {
    padding-block:43px
  }
.folia-section-description {
    margin-top:12px
  }
.folia-source-list>div {
    padding:15px 0
  }
.folia-library-grid {
    gap:22px
  }
.folia-collection-display {
    gap:15px;
    grid-template-columns:1.8fr 1fr;
    align-items:center
  }
.folia-collection-mobile {
    width:100%;
    max-width:110px;
    grid-row:auto;
    border-width:3px;
    border-radius:9px
  }
.folia-collection-desktop figcaption {
    padding:9px 10px
  }
.folia-personal-listening {
    padding-block:43px;
    grid-template-columns:1fr;
    gap:25px
  }
.folia-settings-copy {
    grid-row:1
  }
.folia-settings-picture {
    padding:24px 20px 18px
  }
.folia-settings-picture figure {
    width:180px
  }
.folia-setting-stamp {
    display:block;
    top:25px;
    left:23px;
}
.folia-setting-list li {
    padding-block:13px
  }
.folia-download-area {
    padding-block:38px 23px
  }
.folia-download-heading>img {
    width:58px;
    margin-right:3px;
    border-radius:14px
  }
.folia-download-heading {
    gap:15px
  }
.folia-download-groups {
    margin-top:25px;
    gap:23px
  }
.folia-platform-list {
    flex-direction:column;
    gap:9px
  }
.folia-platform-list a {
    padding:14px 17px;
    gap:15px
  }
.folia-platform-list a>span:not(.folia-recommend-tag) {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    flex:1;
    justify-content:center;
    gap:2px
  }
.folia-platform-list a>i:last-child {
    margin-left:8px
  }
.folia-platform-list a>i:first-child {
    font-size:24px
  }
.folia-platform-list .folia-recommend-tag {
    top:-8px;
    right:10px
  }
.folia-web-note {
    align-items:start;
    justify-content:start;
    padding-top:20px
  }
.folia-questions {
    padding-block:40px;
    gap:22px
  }
.folia-faq-intro>p:not(.folia-chapter-number) {
    margin-block:10px
  }
:where(.folia-site) summary {
    padding-block:17px;
}
:where(.folia-site) details>p {
    padding-right:10px
  }
.folia-footer-main {
    padding-block:22px;
    gap:14px
  }
.folia-footer-main .folia-brand img {
    width:27px
  }
.folia-footer-main>a:not(.folia-brand) {
    margin-left:0;
}
.folia-back-top {
    margin-left:auto
  }
.folia-footer-bottom {
    padding-block:13px
  }
.folia-footer {
    padding-bottom:0
  }
.folia-image-viewer {
    padding:45px 8px 10px
  }
.folia-image-viewer>img {
    max-width:88vw;
    max-height:75dvh
  }
.folia-image-viewer>p {
    max-width:85vw
  }
}
@media(prefers-reduced-motion:reduce) {
html.folia-document {
    scroll-behavior:auto
  }
:where(.folia-site) *, :where(.folia-site) *::before, :where(.folia-site) *::after {
    animation:none!important;
    transition:none!important
  }
}
.folia-opening-line em { background:linear-gradient(110deg,#3d7886,#7574a6);background-clip:text;-webkit-background-clip:text;color:transparent; }
@media(max-width:600px) {
.folia-stage-tabs button { padding:5px 7px; }
.folia-opening-foot { flex-wrap:wrap; }
}

/* ===== typography ===== */
/* User-selected font stack; type sizes follow the approved reference. */
body.folia-site {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "HarmonyOS Sans SC", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans SC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
}
:where(.folia-site) button { font: inherit; }
:where(.folia-site) h1, :where(.folia-site) h2, :where(.folia-site) h3 { line-height: 1.3; }
:where(.folia-site) h1 { font-size: clamp(36px, 4vw, 56px); font-weight: 750; letter-spacing: -2px; }
:where(.folia-site) h2 { font-size: 36px; font-weight: 700; letter-spacing: -1px; }
:where(.folia-site) h3 { font-size: 23px; font-weight: 700; }
.folia-brand { line-height: 1.7; }
.folia-brand > span { font-size: 26px; font-weight: 700; letter-spacing: -1px; }
.folia-brand-note { font-size: 13px; font-weight: 400; letter-spacing: 1px; }
:where(.folia-site) nav { font-size: 16px; font-weight: 600; }
.folia-download-top { font-size: 14px; font-weight: 600; }
.folia-eyebrow, .folia-chapter-number { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; }
.folia-opening .folia-eyebrow { letter-spacing: 1px; }
.folia-opening-line { font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -1px; }
.folia-opening-line em { font-style: normal; font-weight: inherit; }
.folia-opening-description { font-size: 17px; font-weight: 400; line-height: 1.9; }
.folia-action { font-size: 15px; font-weight: 600; }
.folia-text-action { font-size: 13px; font-weight: 600; }
.folia-stage-top { font-size: 11px; }
.folia-stage-tabs button { font-size: 13px; font-weight: 600; }
:where(.folia-site) #stage-caption { font-size: 11px; }
.folia-stage-margin { font-size: 11px; letter-spacing: 1px; }
.folia-stage-index { font-size: 10px; letter-spacing: 1px; }
.folia-opening-foot { font-size: 12px; }
.folia-chapter-heading > p { font-size: 14px; }
.folia-lyric-notes > p { font-size: 14px; line-height: 1.7; }
.folia-mode-list li { font-size: 15px; }
.folia-lyric-notes .folia-small-note { font-size: 11px; }
.folia-exhibit-label { font-size: 11px; letter-spacing: 1px; }
.folia-lyric-exhibit strong { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -1px; }
.folia-exhibit-detail { font-size: 12px; line-height: 1.7; }
.folia-listening-pair h3 { font-size: 18px; }
.folia-listening-pair p { font-size: 13px; font-weight: 400; }
.folia-section-description { font-size: 14px; font-weight: 400; }
.folia-source-list dt { font-size: 15px; font-weight: 600; }
.folia-source-list dd { font-size: 14px; font-weight: 400; }
.folia-collection-desktop figcaption { font-size: 11px; }
.folia-collection-note strong { font-size: 20px; font-weight: 700; }
.folia-collection-note > span { font-size: 13px; }
.folia-settings-picture figcaption { font-size: 11px; }
.folia-setting-stamp { font-size: 11px; line-height: 1.7; letter-spacing: 1px; }
.folia-setting-list li > span { font-size: 11px; line-height: 2.5; }
.folia-setting-list h3 { font-size: 20px; }
.folia-setting-list p { font-size: 14px; font-weight: 400; }
.folia-media-control { font-size: 12px; }
.folia-download-heading h2 { font-size: 28px; }
.folia-download-heading > div > p:last-child { font-size: 14px; }
.folia-download-groups h3 { font-size: 20px; font-weight: 700; }
.folia-download-groups h3 span { font-size: 11px; font-weight: 400; }
.folia-platform-list strong { font-size: 15px; font-weight: 600; }
.folia-platform-list small { font-size: 12px; }
.folia-recommend-tag { font-size: 10px !important; font-weight: 600; }
.folia-web-note { font-size: 12px; }
.folia-faq-intro h2 { font-size: 30px; }
.folia-faq-intro > p:not(.folia-chapter-number) { font-size: 14px; }
:where(.folia-site) summary { font-size: 15px; font-weight: 600; }
:where(.folia-site) details > p { font-size: 14px; font-weight: 400; line-height: 1.9; }
.folia-footer-main .folia-brand > span { font-size: 22px; }
.folia-footer-main > p, .folia-footer-main > a:not(.folia-brand), .folia-back-top { font-size: 12px; }
.folia-footer-bottom { font-size: 10px; }
.folia-image-viewer > p { font-size: 11px; }
.folia-viewer-close { font-size: 12px; }

@media (max-width: 1100px) {
:where(.folia-site) h1 { font-size: 40px; }
.folia-opening-description { font-size: 15px; }
.folia-footer-bottom { font-size: 9px; }
}
@media (max-width: 760px) {
:where(.folia-site) h1 { font-size: clamp(30px, 7.9vw, 46px); letter-spacing: -1px; }
:where(.folia-site) h2 { font-size: 28px; letter-spacing: -.5px; }
.folia-brand > span { font-size: 24px; }
.folia-brand-note { font-size: 11px; }
.folia-download-top { font-size: 12px; }
.folia-eyebrow, .folia-chapter-number { font-size: 11px; }
.folia-opening-line { font-size: 25px; }
.folia-opening-description { font-size: 15px; }
.folia-action { font-size: 13px; }
.folia-stage-top, .folia-stage-top > span:last-child { font-size: 9px; }
.folia-stage-tabs button { font-size: 12px; }
:where(.folia-site) #stage-caption { font-size: 10px; }
.folia-stage-margin { font-size: 10px; }
.folia-opening-foot { font-size: 10px; }
.folia-chapter-heading > p { font-size: 13px; }
.folia-lyric-notes h3 { font-size: 22px; }
.folia-lyric-notes > p { font-size: 13px; }
.folia-lyric-exhibit strong { font-size: 25px; }
.folia-listening-pair h3 { font-size: 17px; }
.folia-listening-pair p { font-size: 12px; }
.folia-section-description, .folia-source-list dd { font-size: 13px; }
.folia-setting-list h3 { font-size: 19px; }
.folia-setting-list p { font-size: 13px; }
.folia-download-heading h2 { font-size: 25px; }
.folia-download-heading > div > p:last-child { font-size: 13px; }
.folia-download-groups h3 { font-size: 19px; }
.folia-platform-list strong { font-size: 15px; }
.folia-platform-list small { font-size: 11px; }
.folia-faq-intro h2 { font-size: 27px; }
.folia-faq-intro > p:not(.folia-chapter-number) { font-size: 13px; }
:where(.folia-site) summary { font-size: 14px; }
:where(.folia-site) details > p { font-size: 13px; }
.folia-footer-bottom { font-size: 9px; line-height: 1.8; }
}

/* ===== header ===== */
/* Header proportions and navigation rhythm follow the DiPlay reference. */
@media (min-width: 801px) {
  .folia-masthead .folia-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .folia-masthead .folia-navigation > .folia-brand { justify-self: start; }
  .folia-masthead .folia-navigation > nav { margin-left: 0; justify-self: center; }
  .folia-masthead .folia-navigation > .folia-download-top { margin-left: 0; justify-self: end; }
}
.folia-masthead {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.folia-masthead .folia-navigation {
  height: 88px;
  gap: 24px;
  justify-content: space-between;
}
.folia-masthead .folia-brand { gap: 10px; white-space: nowrap; }
.folia-masthead .folia-brand img { width: 36px; height: 36px; border-radius: 10px; }
.folia-masthead .folia-brand strong { font-size: 26px; font-weight: 700; letter-spacing: -1px; }
.folia-masthead .folia-brand-note {
  display: inline-block;
  border-left: 1px solid var(--line);
  margin: 0 0 0 4px;
  padding-left: 15px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
}
.folia-masthead nav {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  gap: 32px;
  padding: 0;
  margin-left: 24px;
  border: 0;
  background: transparent;
  font-size: 16px;
}
.folia-masthead nav a {
  display: flex;
  position: relative;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  transition: color .2s;
}
.folia-masthead nav a:hover, .folia-masthead nav a[aria-current] { color: var(--blue); }
.folia-masthead nav a[aria-current]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 18px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 2px 2px 0 0;
  background: var(--brand-gradient);
}
.folia-masthead .folia-download-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  margin-left: auto;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.folia-masthead .folia-download-top i { margin: 0; font-size: 17px; line-height: 1; }
.folia-masthead .folia-menu-toggle { display: none; }
@media (max-width: 1100px) {
.folia-masthead .folia-brand-note { display: none; }
.folia-masthead nav { gap: 22px; }
.folia-masthead .folia-download-top { margin-left: auto; }
}
@media (max-width: 800px) {
html.folia-document { scroll-padding-top: 90px; }
.folia-masthead .folia-navigation { height: 70px; gap: 14px; justify-content: flex-start; }
.folia-masthead .folia-brand img { width: 31px; height: 31px; }
.folia-masthead .folia-brand strong { font-size: 24px; }
.folia-masthead .folia-download-top { margin-left: auto; padding: 8px 13px; gap: 7px; font-size: 12px; }
.folia-masthead .folia-download-top i { font-size: 15px; }
.folia-masthead .folia-menu-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 23px;
    line-height: 1;
  }
.folia-masthead .folia-menu-toggle:hover { background: var(--paper); }
.folia-masthead nav, body.folia-js-ready .folia-masthead nav.folia-open {
    position: absolute;
    margin-left: 0;
    top: 70px;
    left: 0;
    right: 0;
    height: auto;
    padding: 12px 24px 20px;
    display: grid;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 15px 25px #2637460a;
  }
body.folia-js-ready .folia-masthead nav:not(.folia-open) { display: none; }
.folia-masthead nav a { height: auto; padding: 12px 0; }
.folia-masthead nav a[aria-current]::after { display: none; }
.folia-masthead nav a[aria-current] { font-weight: 600; }
body:not(.folia-js-ready) .folia-masthead { margin-bottom: 330px; }
}

/* ===== reviews ===== */

.folia-reviews { padding: 60px 0; background: var(--paper); border-top: 1px solid var(--line); }
.folia-reviews-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.folia-reviews-heading > p { font-size: 14px; color: var(--muted); }
.folia-review-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; }
.folia-review { padding: 23px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.folia-review-person { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.folia-review-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #e4f0f0, #ece9f6); color: var(--blue); flex-shrink: 0; }
.folia-review-avatar i { font-size: 18px; }
.folia-review-name { display: block; font-size: 14px; font-weight: 600; }
.folia-review-region { display: block; color: var(--muted); font-size: 12px; }
.folia-review-score { display: flex; align-items: center; gap: 2px; color: var(--blue); margin-left: auto; font-size: 12px; white-space: nowrap; }
.folia-review-score > span { color: var(--muted); margin-left: 5px; font-size: 11px; }
.folia-review-content { margin: 17px 0 16px; font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.folia-review time { display: block; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
.folia-review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
.folia-reviews { padding: 42px 0; }
.folia-reviews-heading { display: block; margin-bottom: 22px; }
.folia-reviews-heading > p { font-size: 13px; margin-top: 12px; }
.folia-review-list { grid-template-columns: minmax(0, 1fr); gap: 15px; }
.folia-review { padding: 20px; }
.folia-review-content { font-size: 14px; }
}

/* ===== download ===== */

.folia-download-groups > div > h3 { text-align: center; }
.folia-platform-list a { justify-content: center; text-align: center; }
.folia-platform-list a > span:not(.folia-recommend-tag) { flex: 0 1 auto; }
.folia-platform-list a > i:first-child { margin: 0; }
.folia-download-dialog {
  position: fixed;
  width: min(440px, calc(100vw - 36px));
  max-height: 90dvh;
  overflow-y: auto;
  padding: 34px 28px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 25px 90px #172b4a30;
}
.folia-download-dialog::backdrop { background: #17253680; backdrop-filter: blur(3px); }
.folia-download-close { position: absolute; right: 12px; top: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; background: transparent; border-radius: 6px; font-size: 23px; }
.folia-download-close:hover { background: var(--paper); }
.folia-download-kicker { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.folia-download-dialog .folia-download-title { font-size: 25px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.folia-download-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 22px 0 17px; }
.folia-download-choices button { padding: 5px 8px; font-size: 12px; background: var(--paper); border-radius: 5px; }
.folia-download-choices button[aria-pressed="true"] { background: var(--brand-gradient); color: #fff; }
.folia-download-qr { display: block; width: 264px; height: auto; max-width: 100%; margin: 0 auto; }
.folia-download-caption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.folia-download-direct { display: inline-flex; align-items: center; gap: 7px; margin-top: 17px; font-size: 13px; font-weight: 600; color: var(--blue); }
body.folia-download-open { overflow: hidden; }
@media (max-width: 600px) {
.folia-platform-list a > span:not(.folia-recommend-tag) { align-items: center; }
.folia-footer { padding-bottom: 0; }
}