@font-face { font-family: 'Pixelify Sans'; src: url('/site/PixelifySans.ttf') format('truetype'); font-display: swap; }
.public-site {
  --stone: #252b25; --dirt: #463222; --panel: #d5d1c7; --paper: #f1eee5;
  --ink: #20261d; --muted: #48523f; --green: #426b2b; --hover: #4b762e;
  --edge: #172012; --light: #f4f0e5; --accent: #a7d46c;
  margin: 0; color: var(--ink); background: var(--stone) url('/site/stone.svg') repeat; background-size: 128px;
  font: 17px/1.65 'Segoe UI', system-ui, sans-serif; scrollbar-color: #a7b49a var(--stone);
}
.public-site *, .public-site *::before, .public-site *::after { box-sizing: border-box; }
.public-site ::selection { color: var(--light); background: var(--green); }
.public-site :focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.public-site .site-header :focus-visible, .public-site .toc :focus-visible { outline-color: var(--accent); }
.public-site h1, .public-site h2, .public-site h3 { font-family: inherit; line-height: 1.18; font-weight: 700; text-wrap: balance; }
.public-site h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); margin: 0 0 20px; }
.public-site h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 16px; }
.public-site h3 { font-size: 1.65rem; margin: 28px 0 12px; }
.public-site p { margin: 0 0 18px; max-width: 72ch; }
.public-site a { color: #2d511c; text-underline-offset: .2em; }
.public-site img { display: block; max-width: 100%; height: auto; }
.public-site button, .public-site input { font: inherit; }
.public-site .wrap { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.public-site .site-header { border-bottom: 3px solid var(--edge); background: var(--dirt) url('/site/dirt.svg') repeat; background-size: 128px; color: var(--light); }
.public-site .header-inner { display: flex; align-items: center; gap: 28px; padding-block: 16px; flex-wrap: wrap; }
.public-site .brand { font-family: 'Pixelify Sans', Consolas, monospace; line-height: 1.1; font-weight: 600; color: var(--light); text-decoration: none; display: inline-flex; align-items: center; gap: 12px; font-size: 28px; white-space: nowrap; }
.public-site .brand img { width: 52px; height: 52px; }
.public-site .header-nav { display: flex; gap: 20px; margin-left: auto; }
.public-site .header-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--light); font-weight: 600; }
.public-site .header-nav a[aria-current='page'] { color: var(--accent); }
.public-site .languages { display: flex; gap: 4px; }
.public-site .languages button { min-width: 48px; min-height: 44px; padding: 6px 12px; border: 2px solid var(--edge); background: #c2c5b6; color: var(--ink); cursor: pointer; }
.public-site .languages button[aria-pressed='true'] { background: var(--green); color: var(--light); }
.public-site .skip { position: absolute; left: 16px; top: -100px; padding: 12px; background: var(--paper); z-index: 20; }
.public-site .skip:focus { top: 12px; }
.public-site .panel { background: var(--panel); border: 3px solid var(--edge); box-shadow: inset 3px 3px 0 #ece9e0, inset -3px -3px 0 #aaa99e; }
.public-site .intro { padding: 44px 44px 32px; margin-top: 32px; }
.public-site .lead { font-size: 1.18rem; font-weight: 500; color: var(--ink); }
.public-site .platforms { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; border-top: 2px solid #a4a99a; }
.public-site .platform { padding: 28px 28px 0 0; min-width: 0; }
.public-site .platform + .platform { padding: 28px 0 0 28px; border-left: 1px solid #a4a99a; }
.public-site .platform h2 { font-size: 2rem; margin-bottom: 8px; }
.public-site .platform .support { font-weight: 700; font-variant-numeric: tabular-nums; }
.public-site .small { font-size: .875rem; color: var(--muted); }
.public-site .button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px; border: 2px solid var(--edge); background: var(--green); color: var(--light); text-decoration: none; font-weight: 700; box-shadow: inset 2px 2px 0 #6f924f, inset -2px -2px 0 #2b481b; cursor: pointer; }
.public-site .button:hover { background: var(--hover); }
.public-site .button:active { box-shadow: inset 2px 2px 0 #2b481b; }
.public-site .button.secondary { background: #c2c5b6; color: var(--ink); box-shadow: inset 2px 2px 0 #e2e4d8, inset -2px -2px 0 #89977a; }
.public-site .button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; }
.public-site .platform .button { margin: 6px 0 14px; }
.public-site .guide-invite { display: flex; align-items: center; gap: 32px; justify-content: space-between; padding: 26px 44px; border-top: 2px solid var(--edge); background: #c2c5b6; }
.public-site .guide-invite p { margin: 0; }
.public-site .preview { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; margin-block: 52px; color: var(--light); align-items: center; }
.public-site .preview h2 { margin-bottom: 20px; }
.public-site .preview-phone { display: flex; align-items: start; gap: 20px; }
.public-site .preview-phone img { width: 180px; border: 3px solid var(--edge); }
.public-site figure { margin: 0; }
.public-site figcaption { margin-top: 12px; font-size: .875rem; }
.public-site .desktop-screen { border: 3px solid var(--edge); width: 100%; }
.public-site .start-strip { padding: 32px 44px; margin-bottom: 32px; }
.public-site .start-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-left: 24px; }
.public-site .start-steps li { padding-left: 6px; }
.public-site .manual-copy { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-top: 24px; }
.public-site .copy-field { flex: 1; min-width: 200px; }
.public-site .copy-field label { display: block; font-size: .875rem; font-weight: 600; }
.public-site .copy-field input { width: 100%; padding: 10px; height: 48px; color: var(--ink); background: var(--paper); border: 2px solid #59634e; font-size: .875rem; }
.public-site #copy-status { min-height: 28px; margin-top: 12px; }
.public-site .site-footer { color: #d8e1c7; padding: 28px 0; border-top: 1px solid #617150; font-size: .875rem; }
.public-site .site-footer a { color: #d8e1c7; display: inline-flex; align-items: center; min-height: 44px; }
.public-site .guide-section a[href^='https:'] { display: inline-flex; align-items: center; min-height: 44px; }
.public-site .footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.public-site .guide-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; margin-top: 32px; align-items: start; }
.public-site .toc { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; color: var(--light); padding: 20px 16px; border: 2px solid var(--edge); background: var(--dirt) url('/site/dirt.svg') repeat; background-size: 128px; }
.public-site .toc summary { font-family: inherit; font-size: 24px; font-weight: 700; cursor: pointer; min-height: 44px; }
.public-site .toc-title { font-size: 24px; }
.public-site .mobile-contents { display: none; }
.public-site .windows-shot { max-width: 100%; }
.public-site .windows-shot img { width: 100%; }
.public-site .toc ol { margin: 14px 0 0; padding: 0; list-style: none; }
.public-site .toc a { color: var(--light); display: flex; align-items: center; padding: 9px 4px; min-height: 44px; font-size: .875rem; text-decoration-thickness: 1px; }
.public-site .guide-header { padding: 32px; }
.public-site .guide-header h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.public-site .guide-section { padding: 36px 32px; margin-block: 28px; scroll-margin-top: 24px; }
.public-site .section-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; align-items: start; }
.public-site .section-body.wide { grid-template-columns: 1fr; }
.public-site .section-shot img { width: 220px; border: 2px solid var(--edge); }
.public-site .section-shot a { display: block; }
.public-site .section-shot a:focus-visible { outline-offset: 4px; }
.public-site .steps { padding-left: 26px; margin: 22px 0; }
.public-site .steps li { padding-left: 6px; margin-bottom: 14px; }
.public-site .steps li::marker { font-weight: 700; color: var(--green); }
.public-site .note { padding: 16px; border: 1px solid #89977a; background: var(--paper); margin-block: 20px; }
.public-site .note p:last-child { margin: 0; }
.public-site .condition { font-size: .875rem; font-weight: 700; color: #3f4937; margin-bottom: 14px; }
.public-site .subtopic { margin-top: 28px; border-top: 1px solid #a4a99a; padding-top: 22px; }
.public-site .subtopic summary { min-height: 44px; cursor: pointer; font-weight: 700; }
.public-site code { font-family: Consolas, monospace; font-size: .92em; overflow-wrap: anywhere; }
.public-site .back-top { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; }
@media (max-width: 1000px) {
  .public-site .wrap { width: min(1240px, calc(100% - 40px)); }
  .public-site .guide-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 20px; }
  .public-site .section-body { grid-template-columns: 1fr; }
  .public-site .section-shot { max-width: 260px; }
  .public-site .section-shot img { width: 100%; }
  .public-site .preview { gap: 24px; grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .public-site .wrap { width: calc(100% - 28px); }
  .public-site .header-inner { gap: 8px 16px; padding-block: 12px; }
  .public-site .brand { font-size: 24px; gap: 8px; }
  .public-site .brand img { width: 40px; height: 40px; }
  .public-site .languages { margin-left: auto; }
  .public-site .header-nav { order: 3; margin-left: 0; width: 100%; }
  .public-site .intro, .public-site .start-strip { padding: 24px; margin-top: 20px; }
  .public-site .intro h1 { font-size: 2.25rem; }
  .public-site .platforms, .public-site .preview, .public-site .start-steps, .public-site .guide-layout { grid-template-columns: 1fr; }
  .public-site .platform { padding: 24px 0; }
  .public-site .platform + .platform { padding: 24px 0 0; border-left: 0; border-top: 1px solid #a4a99a; }
  .public-site .platform .button { display: flex; }
  .public-site .guide-invite { align-items: start; flex-direction: column; padding: 24px; gap: 16px; }
  .public-site .preview { margin-block: 32px; gap: 32px; }
  .public-site .preview-phone { gap: 16px; }
  .public-site .preview-phone img { width: 150px; }
  .public-site .start-steps { gap: 16px; }
  .public-site .toc { position: static; max-height: none; }
  .public-site .toc-desktop { display: none; }
  .public-site .mobile-contents { display: block; margin-top: 24px; border-top: 1px solid #89977a; padding-top: 12px; }
  .public-site .mobile-contents summary { min-height: 44px; cursor: pointer; font-weight: 700; }
  .public-site .mobile-contents ol { list-style: none; padding: 0; }
  .public-site .mobile-contents a { display: flex; min-height: 44px; align-items: center; }
  .public-site .toc:not([open]) ol { display: none; }
  .public-site .guide-header, .public-site .guide-section { padding: 24px; }
  .public-site .guide-section { scroll-margin-top: 16px; }
  .public-site .guide-layout { margin-top: 20px; }
  .public-site .section-shot { max-width: 290px; margin-inline: auto; }
  .public-site .small, .public-site figcaption { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .public-site *, .public-site *::before, .public-site *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }