:root {
  color-scheme: light;
  --paper: #f4eee2;
  --ink: #34271e;
  --muted: #665747;
  --brown: #765039;
  --line: rgba(100, 75, 47, .22);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Yu Gothic", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.8;
  overflow-wrap: break-word;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 8% 0%, #e6d8bd 0%, transparent 48%), linear-gradient(135deg, #f5efe3, #ede5d6); }
a { color: #68452f; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: #392719; }
a:focus-visible { outline: 3px solid #8a5736; outline-offset: 4px; border-radius: 4px; }
.skip-link { position: absolute; left: 1rem; top: -6rem; z-index: 10; padding: .6rem 1rem; background: #fffaf0; }
.skip-link:focus { top: .6rem; }
.site-header, main, .site-footer { width: min(100% - 2rem, 65rem); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.2rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; color: var(--brown); font-weight: 650; text-decoration: none; }
.brand img { display: block; width: 44px; height: 44px; }
.language-nav { display: flex; flex-wrap: wrap; gap: .15rem; }
.language-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem .7rem; border-radius: .8rem; font-size: .9rem; }
.language-nav a[aria-current="page"] { background: rgba(118, 80, 57, .10); color: #4b3224; font-weight: 650; text-decoration: none; }
.breadcrumb { margin: .25rem 0 1.3rem; color: var(--muted); font-size: .85rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: #8f7b63; }
.glass { border: 1px solid rgba(255, 255, 255, .78); border-radius: 1.7rem; background: linear-gradient(135deg, rgba(255, 252, 244, .78), rgba(255, 250, 239, .52)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(74, 50, 26, .06); }
.hero { padding: clamp(1.5rem, 5vw, 3.3rem); }
.eyebrow { color: var(--brown); font-size: .82rem; font-weight: 650; letter-spacing: .06em; margin: 0 0 .65rem; }
h1, h2 { font-family: Georgia, "Batang", "Yu Mincho", serif; font-weight: 500; line-height: 1.4; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin: 0 0 1rem; }
h2 { font-size: 1.35rem; margin: 0 0 .85rem; }
p { margin: .65rem 0 0; }
.lead { max-width: 49rem; color: #554536; font-size: 1.05rem; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.6rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .55rem 1.1rem; border: 1px solid var(--line); border-radius: .9rem; background: rgba(255, 252, 244, .50); font-size: .95rem; font-weight: 600; text-decoration: none; }
.button.primary { color: #fff9ed; background: #795039; border-color: #795039; }
.button.primary:hover { background: #5f3e2b; }
.section-nav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 1.25rem 0; }
.section-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .93rem; }
.sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sections section { padding: 1.5rem; border: 1px solid var(--line); border-radius: 1.25rem; background: rgba(255, 252, 244, .48); scroll-margin-top: 1rem; }
.sections .wide { grid-column: 1 / -1; }
ul, ol { padding-left: 1.3rem; margin: .6rem 0 0; }
li + li { margin-top: .4rem; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.8rem; }
.quiet { color: var(--muted); font-size: .92rem; }
.track-list { padding-left: 1.4rem; }
.site-footer { border-top: 1px solid var(--line); margin-top: 2rem; padding: 1.4rem 0 2rem; color: var(--muted); font-size: .9rem; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 40rem) {
  .site-header, main, .site-footer { width: min(100% - 1.5rem, 65rem); }
  .site-header { gap: .5rem; padding-block: .8rem; }
  .language-nav a { padding-inline: .55rem; }
  .sections, .steps { grid-template-columns: 1fr; }
  .sections section { padding: 1.25rem; }
  .actions .button { flex: 1 1 12rem; }
}