* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: #f8f1df; font: 16px/1.65 "Microsoft YaHei", "Noto Sans SC", sans-serif; background: linear-gradient(#151b1bc9, #151b1be9), url('/assets/oak-planks.svg?v=4e00d017') repeat; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.guide-wrap { width: min(1100px, calc(100% - 36px)); margin-inline: auto; }
.guide-header { border-bottom: 3px solid #120e0c; background: #1e2525 url('/assets/panel-grid.svg?v=4e00d017') repeat; box-shadow: 0 4px 0 #0006; }
.guide-header-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.guide-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 18px; }
.guide-brand img { width: 34px; height: 34px; image-rendering: pixelated; }
.guide-back { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 7px 16px; border: 3px solid #422605; background: linear-gradient(#ffe5ad, #dba44f); box-shadow: inset 2px 2px #fff4ce, 0 3px #19120b; color: #2d1907; font-size: 17px; font-weight: 900; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.guide-back:hover,.guide-back:focus-visible { background: linear-gradient(#fff0ca, #e8b866); outline: 2px solid #fff1bc; outline-offset: 2px; }
.guide-hero { padding: 46px 0 30px; }
.guide-kicker,.guide-eyebrow { display: block; color: #f5c56d; font-size: 13px; font-weight: 900; letter-spacing: .08em; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin: 8px 0 12px; font-size: clamp(32px, 5vw, 51px); line-height: 1.2; text-shadow: 3px 3px #1b1008; }
.guide-hero > p:not(.guide-kicker) { font-size: 19px; color: #f1e6d1; }
.guide-meta { display: flex; gap: 9px; flex-wrap: wrap; }
.guide-meta span { padding: 5px 12px; border: 1px solid #ad926b; background: #33291f; color: #f7eacc; font-weight: 700; }
.guide-file,.guide-command,.guide-step,.guide-finish,.guide-help { border: 3px solid #130f0b; box-shadow: inset 2px 2px #ffffff2b, 0 6px #0a0c0b; }
.guide-file { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 10px 0 28px; padding: 25px; background: linear-gradient(#ffffff0d,#00000028), url('/assets/oak-planks.svg?v=4e00d017') repeat; }
.guide-file h2,.guide-command h2,.guide-finish h2,.guide-help h2 { margin: 3px 0 6px; font-size: 26px; line-height: 1.3; }
.guide-file p,.guide-command p,.guide-finish p { margin: 0; max-width: 750px; font-size: 17px; }
.guide-primary,#guideCopy { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 9px 18px; border: 3px solid #422605; color: #2d1907; background: linear-gradient(#ffe4a1,#d9a345); box-shadow: inset 2px 2px #fff4ca, 0 4px #20160b; text-decoration: none; font-weight: 900; white-space: nowrap; }
.guide-primary:hover,#guideCopy:hover { filter: brightness(1.09); }
#guideCopy:disabled { opacity: .55; cursor: not-allowed; }
[hidden] { display: none !important; }
.guide-command { padding: 25px; background: #26302e url('/assets/panel-grid.svg?v=4e00d017') repeat; }
.guide-command-head { margin-bottom: 18px; }
.guide-command-actions { display: flex; align-items: stretch; gap: 12px; }
.guide-command code { flex: 1; display: flex; align-items: center; min-width: 0; overflow-x: auto; padding: 10px 16px; border: 2px solid #a89168; background: #121817; color: #fff4d1; font: 700 clamp(17px, 2.5vw, 23px)/1.5 Consolas, monospace; white-space: nowrap; user-select: all; }
.guide-copy-status { min-height: 27px; margin-top: 10px !important; color: #ffe19a; font-weight: 700; }
.guide-steps-section { padding: 38px 0 0; }
.guide-section-head { margin-bottom: 18px; }
.guide-section-head h2 { margin: 3px 0 0; font-size: 30px; }
.guide-steps { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.guide-step { overflow: hidden; padding: 22px; background: #e8dfd0; color: #2e241b; }
.guide-step-heading { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.guide-step-number { flex: none; padding: 5px 10px; min-width: 65px; background: #d5a143; border: 2px solid #4a2c0d; box-shadow: 2px 2px #4a2c0d; text-align: center; font: 900 20px/1.35 Consolas, monospace; }
.guide-step h3 { margin: 0 0 3px; font-size: 22px; }
.guide-step p { margin: 0; font-size: 17px; }
.guide-offset { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 14px; border: 2px solid #856039; background: linear-gradient(#fff9edee, #f4e6cbf0), url('/assets/oak-planks.svg?v=4e00d017') repeat; }
.guide-offset > div { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 1px solid #bba17c; background: #fff9ec; line-height: 1.45; }
.guide-offset b[class^="guide-axis-"] { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid #332820; color: #fff; font: 900 22px/1 Consolas, monospace; }
.guide-axis-x { background: #a9362d; }
.guide-axis-y { background: #327d37; }
.guide-axis-z { background: #2866a6; }
.guide-offset strong { color: #38250e; font-size: 15px; }
.guide-offset > p { grid-column: 1 / -1; padding: 2px 3px; font-weight: 700; }
.guide-step img { display: block; width: 100%; max-height: 650px; object-fit: contain; background: #1d2121; border: 2px solid #59452f; user-select: none; -webkit-user-drag: none; }
.guide-finish { margin: 28px 0; padding: 25px; background: #3b3125 url('/assets/oak-planks.svg?v=4e00d017') repeat; }
.guide-finish img { display: block; width: 100%; max-height: 650px; margin-top: 18px; object-fit: contain; border: 2px solid #c79c5c; background: #192121; user-select: none; -webkit-user-drag: none; }
.guide-help { margin-bottom: 52px; padding: 25px; background: #252e2d url('/assets/panel-grid.svg?v=4e00d017') repeat; }
.guide-help h2 { margin-bottom: 16px; }
.guide-help details { border-top: 1px solid #7f897b; padding: 13px 2px; }
.guide-help summary { cursor: pointer; font-size: 17px; font-weight: 900; }
.guide-help details p { margin: 8px 0 0; color: #f2e9d8; }
.guide-footer { padding: 24px 10px; border-top: 2px solid #0f1413; text-align: center; color: #d7ccb7; }
html.custom-theme body { background: var(--theme-page-background); background-size: var(--theme-block-size); color: var(--theme-ink); }
html.custom-theme .guide-header,html.custom-theme .guide-command,html.custom-theme .guide-help { background: var(--theme-panel-background); background-size: var(--theme-panel-size); color: var(--theme-ink); border-color: var(--theme-edge); }
html.custom-theme .guide-file,html.custom-theme .guide-step,html.custom-theme .guide-finish { background: var(--theme-inset-background); background-size: var(--theme-inset-size); color: var(--theme-ink); border-color: var(--theme-edge); }
html.custom-theme .guide-hero > p:not(.guide-kicker),html.custom-theme .guide-help details p { color: var(--theme-ink); }
html.custom-theme .guide-meta span { background: var(--theme-inset-background); background-size: var(--theme-inset-size); color: var(--theme-ink); border-color: var(--theme-edge); }
html.custom-theme .guide-offset { background: var(--theme-inset-background); background-size: var(--theme-inset-size); color: var(--theme-ink); border-color: var(--theme-edge); }
html.custom-theme .guide-offset > div { background: var(--theme-button-background); color: var(--theme-button-ink); border-color: var(--theme-edge-light); }
html.custom-theme .guide-offset strong { color: var(--theme-button-ink); }
html.custom-theme .guide-brand,html.custom-theme .guide-kicker,html.custom-theme .guide-eyebrow { color: var(--theme-ink); }
html.custom-theme h1 { text-shadow: none; }
@media (max-width: 700px) { .guide-wrap { width: min(100% - 24px, 1100px); } .guide-hero { padding-top: 30px; } .guide-file,.guide-command-actions { flex-direction: column; align-items: stretch; } .guide-file,.guide-command,.guide-step,.guide-finish,.guide-help { padding: 18px; } .guide-step-heading { gap: 10px; } .guide-step-number { min-width: 55px; font-size: 16px; } .guide-step h3 { font-size: 19px; } .guide-step p,.guide-file p,.guide-command p { font-size: 15px; } .guide-offset { grid-template-columns: 1fr; } .guide-offset > p { grid-column: auto; } }

/* Shared Graystone Workshop surfaces for all download guides.
   Theme-specific selectors override each guide's original wooden surfaces. */
html[data-theme="quartz"].custom-theme body {
  background: var(--theme-page-background);
  background-size: auto, var(--theme-block-size);
  color: var(--theme-ink);
  image-rendering: pixelated;
}
html[data-theme="quartz"].custom-theme main img { image-rendering: auto; }

html[data-theme="quartz"].custom-theme .guide-header {
  background: var(--theme-shell-background);
  background-size: auto, 64px 64px;
  border-color: #9c8e73;
  box-shadow: inset 0 2px #8d877c, 0 3px #20212466;
}
html[data-theme="quartz"].custom-theme .guide-brand { color: #eee7d8; }

html[data-theme="quartz"].custom-theme .guide-hero {
  margin: 28px 0 24px;
  padding: 26px;
  border: 2px solid var(--theme-edge);
  background: var(--theme-panel-background);
  box-shadow: inset 2px 2px var(--theme-bevel-light), 0 4px #63533b55;
}
html[data-theme="quartz"].custom-theme :is(h1, h2, h3) {
  color: var(--theme-heading-ink);
  text-shadow: none;
}
html[data-theme="quartz"].custom-theme :is(.guide-kicker, .guide-eyebrow) {
  color: var(--theme-muted-ink);
  font-size: 14px;
}
html[data-theme="quartz"].custom-theme .guide-hero > p:not(.guide-kicker) {
  color: var(--theme-muted-ink);
}
html[data-theme="quartz"].custom-theme .guide-meta span {
  background: var(--theme-inset-background);
  color: var(--theme-ink);
  border-color: var(--theme-edge-light);
}

html[data-theme="quartz"].custom-theme :is(.guide-file, .guide-command,
    .guide-step, .guide-finish, .guide-help, .lite-install-section,
    .lite-folder-guide, .schem-install, .schem-folder, .mod-overview, .mod-controls) {
  background: var(--theme-panel-background);
  background-size: var(--theme-panel-size);
  color: var(--theme-ink);
  border: 2px solid var(--theme-edge);
  box-shadow: inset 2px 2px var(--theme-bevel-light), 0 4px #63533b55;
}
html[data-theme="quartz"].custom-theme .guide-file {
  border-top: 3px solid #c28a3d;
}
html[data-theme="quartz"].custom-theme .guide-section-head {
  padding: 14px 18px;
  border: 1px solid var(--theme-edge-light);
  border-left: 4px solid #c28a3d;
  background: var(--theme-inset-background);
}
html[data-theme="quartz"].custom-theme .guide-section-head p:last-child { margin-bottom: 0; }
html[data-theme="quartz"].custom-theme :is(.lite-jump a, .mod-jump a, .guide-back) {
  min-height: 40px;
  padding: 8px 14px;
  border: 2px solid var(--theme-edge);
  background: var(--theme-button-background);
  color: var(--theme-button-ink);
  box-shadow: inset 1px 1px var(--theme-bevel-light), 0 2px #89693d;
  font-size: 16px;
}
html[data-theme="quartz"].custom-theme :is(.guide-primary, #guideCopy, .schem-command button) {
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--theme-choice-active-border);
  background: var(--theme-choice-active-background);
  color: var(--theme-choice-active-ink);
  box-shadow: inset 1px 1px var(--theme-choice-active-highlight), 0 3px var(--theme-choice-active-shadow);
}
html[data-theme="quartz"].custom-theme :is(.lite-jump a, .mod-jump a, .guide-back,
    .guide-primary, #guideCopy, .schem-command button):is(:hover, :focus-visible) {
  filter: brightness(1.06);
}
html[data-theme="quartz"].custom-theme :is(a, button, summary):focus-visible {
  outline: 3px solid #875f28;
  outline-offset: 3px;
}
html[data-theme="quartz"].custom-theme .guide-step-number {
  background: var(--theme-step-background);
  color: var(--theme-step-ink);
  border-color: var(--theme-step-border);
  box-shadow: inset 1px 1px var(--theme-step-highlight), 0 2px var(--theme-step-shadow);
}
html[data-theme="quartz"].custom-theme :is(.lite-folder-guide pre, .schem-folder pre,
    .mod-folder-tree, .guide-command code, .schem-command code) {
  background: #343638;
  color: #f4e7ca;
  border-color: #927951;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
html[data-theme="quartz"].custom-theme :is(.lite-shot figcaption, .lite-folder-shot figcaption,
    .schem-shot figcaption, .mod-shot figcaption, .mod-step-note,
    .mod-control-grid > div, .guide-offset, .guide-offset > div) {
  background: var(--theme-inset-background);
  color: var(--theme-ink);
  border-color: var(--theme-edge-light);
}
html[data-theme="quartz"].custom-theme :is(.mod-control-grid strong,
    .mod-control-grid p, .mod-step-action > span, .guide-help > p,
    .guide-help details p, .guide-offset strong, .lite-small) {
  color: var(--theme-ink);
}
html[data-theme="quartz"].custom-theme :is(.guide-copy-status, .schem-status) {
  color: #2f4b1b;
}
html[data-theme="quartz"].custom-theme :is(.guide-step code, .guide-help code,
    .lite-folder-guide code, .schem-folder code, .schem-tip code, .mod-overview code, kbd) {
  background: var(--theme-field-background);
  color: #51371d;
  border-color: var(--theme-edge-light);
}
html[data-theme="quartz"].custom-theme .guide-help details {
  border-color: var(--theme-edge-light);
}
html[data-theme="quartz"].custom-theme .guide-footer {
  background: var(--theme-shell-background);
  background-size: auto, 64px 64px;
  border-color: #9c8e73;
  color: #d9cfba;
}

@media (max-width: 700px) {
  html[data-theme="quartz"].custom-theme .guide-hero {
    margin-top: 20px;
    padding: 20px 18px;
  }
  html[data-theme="quartz"].custom-theme .guide-header-inner { gap: 12px; }
  html[data-theme="quartz"].custom-theme .guide-brand { font-size: 16px; }
  html[data-theme="quartz"].custom-theme .guide-back { padding: 8px 10px; font-size: 15px; }
  html[data-theme="quartz"].custom-theme :is(.lite-folder-guide pre,
      .schem-folder pre, .mod-folder-tree) { padding: 12px; font-size: 14px; }
}
