:root { color-scheme: dark; font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; background: #191a1c; color: #f0f0ed; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
.wrap { width: min(100%, 86rem); margin: auto; padding-inline: clamp(1rem, 3vw, 2.5rem); }
header { position: sticky; top: 0; z-index: 1; background: #191a1c; border-bottom: 1px solid #383a3e; }
.masthead { display: flex; align-items: center; gap: 1.1rem; min-height: 4rem; }
.brand { text-decoration: none; color: #ffe36a; font-weight: 750; }
.brand span, .guide-title { color: #c6c7ca; font-weight: 400; }
.guide-title { padding-left: 1.1rem; border-left: 1px solid #45464b; font-size: .9rem; }
.layout { display: grid; grid-template-columns: clamp(16rem, 23vw, 19rem) minmax(0,1fr); gap: clamp(1.75rem,4vw,3.75rem); }
aside { align-self: start; position: sticky; top: calc(4rem + 1px); max-height: calc(100dvh - 4rem - 1px); overflow-y: auto; padding: 2rem .9rem 1.5rem .35rem; border-right: 1px solid #383a3e; scrollbar-gutter: stable; }
nav h2 { margin: 0 0 1rem; color: #aeb0b3; font-size: .85rem; }
#guide-search { width: 100%; margin-bottom: .75rem; padding: .55rem .65rem; font: inherit; font-size: .9rem; color: #f0f0ed; background: #232427; border: 1px solid #45464b; border-radius: .35rem; }
#guide-search:focus-visible { outline: 2px solid #ffe36a; outline-offset: -2px; }
#search-status { margin: 0 0 .5rem; font-size: .85rem; color: #b1b2b5; }
#search-status:empty, nav [hidden] { display: none; }
summary { cursor: pointer; padding: .48rem .25rem; font-weight: 650; }
nav a { display: block; margin: .12rem 0 .12rem .65rem; padding: .35rem .65rem; border-left: 2px solid transparent; color: #c6c7ca; text-decoration: none; font-size: .94rem; }
nav a[aria-current="page"] { color: #ffe36a; background: #302e25; border-color: #ffe36a; }
nav a:hover, summary:hover { background: #292a2d; }
main { min-width: 0; max-width: 48rem; padding: 2rem 0 4rem; }
.section-name { margin: 0 0 .3rem; color: #b1b2b5; font-size: .9rem; }
h1 { margin: 0; font-size: clamp(1.65rem,3vw,2.4rem); letter-spacing: -.04em; line-height: 1.35; }
#article { border-top: 1px solid #383a3e; margin-top: 1.5rem; color: #c6c7ca; padding-top: .4rem; }
#article h2 { margin: 2rem 0 .65rem; color: #f0f0ed; font-size: clamp(1.15rem,2vw,1.45rem); }
#article strong { color: #f0f0ed; }
#article a { color: #ffe36a; text-underline-offset: .2em; }
#article li + li { margin-top: .55rem; }
.guide-shot { margin: 1.1rem 0; }
.guide-shot figcaption { margin-top: .45rem; font-size: .9rem; color: #b1b2b5; }
.annotated-screen { display: block; margin-block: 2.4rem; }
.screen-photo { display: block; position: relative; }
.screen-photo img { display: block; width: 100%; height: auto; }
.screen-overlay { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgb(106 202 238 / 9%); stroke: #91d5ec; pointer-events: none; }
.screen-overlay > * { vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.screen-label { position: absolute; color: #b6e6f7; font-weight: bold; font-size: .88rem; line-height: 1.5; transform: translateX(-50%); }
.screen-label.above { bottom: 100%; }
.screen-label.below { top: 100%; }
.region-key { padding-left: 1.6rem; }
.region-key li::marker { color: #b6e6f7; font-weight: bold; }
.selection-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.selection-pair figure { margin: 0; min-width: 0; }
.selection-pair img { display: block; width: 100%; }
.capture-inset { display: block; position: relative; overflow: hidden; background: #212123; border: 1px solid #45464b; border-radius: .3rem; }
.capture-inset > img { position: absolute; max-width: none; height: auto; }
.control-example { width: min(100%, 42.5rem); }
.control-example a, .control-example svg { display: block; width: 100%; }
.control-example figcaption { position: relative; padding-top: .65rem; }
.control-example figcaption::before { content: ""; position: absolute; top: 0; left: 50%; height: .55rem; border-left: 1px solid #91d5ec; }
.guide-functions dt { margin-top: 1rem; color: #f0f0ed; font-weight: bold; }
.guide-functions dd { margin: .2rem 0 0; }
.editor-shot img { display: block; width: 100%; height: auto; }
.panel-example a, .panel-example svg { display: block; width: 100%; }
.editor-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.editor-routes figure { min-width: 0; margin: .5rem 0; }
.topic-set { margin-left: .55rem; }
.topic-set:has(a):not(:has(a:not([hidden]))) { display: none; }
.topic-set > p { margin: .7rem .25rem .15rem; color: #b1b2b5; font-weight: 650; font-size: .88rem; }
.library-capture { max-width: 42rem; }
.library-capture.preview { max-width: 23rem; }
.library-capture img { display: block; width: 100%; }
.manual-photo { max-width: 42rem; }
.manual-photo img { display: block; max-width: 100%; height: auto; border-radius: .25rem; }
.manual-pair { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap: .85rem; }
.manual-pair figure { margin: .55rem 0; }
.folder-placement { margin: 1rem 0; }
.folder-placement figcaption { margin-bottom: .5rem; }
.folder-outcomes { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap: .65rem; }
.folder-outcomes > div { padding: .8rem 1rem; background: #242528; border: 1px solid #404246; border-radius: .35rem; }
.folder-outcomes ul { list-style: none; padding-inline-start: .9rem; border-left: 1px solid #83868c; }
.folder-outcomes li::before { content: "─ "; color: #83868c; }
.folder-outcomes p { margin: .5rem 0 0; }
.filter-comparison { max-width: 28rem; }
.tool-sample { display: inline-block; vertical-align: middle; margin-right: .6rem; }
.clipboard-focus { max-width: 21rem; }
@media (max-width: 680px) {
  .editor-routes { grid-template-columns: 1fr; }
  .tool-sample { display: block; margin: 0 0 .25rem; }
}
.guide-diagram .guide-leader { fill: none; stroke: #ffce78; stroke-width: 3; stroke-dasharray: 7 4; stroke-linejoin: round; }
.guide-diagram .guide-head { fill: #ffce78; stroke: #241e17; stroke-width: 1; }
.guide-diagram .resize-pointer { fill: #fff; stroke: #171819; stroke-width: 2.5; stroke-linejoin: round; }
.panel-example a:has(.diagram-key) { text-decoration: none; }
.diagram-key { display: flex; align-items: center; gap: .5rem; background: #282621; padding: .35rem .65rem; color: #ffe0a5; font-size: .9rem; font-weight: 600; }
.diagram-key::before { content: ""; width: 1.25rem; border-top: 2px dashed #ffce78; }
.gesture-demo { display: grid; grid-template-columns: minmax(0, 25rem) auto; align-items: center; gap: 1.25rem; margin: 1rem 0; }
.gesture-demo video { display: block; width: 100%; height: auto; border-radius: .35rem; }
.gesture-demo figcaption { display: flex; align-items: center; gap: .5rem; font-weight: bold; }
.gesture-demo .input-part { fill: #a6adb2; }
.gesture-demo[data-engaged] .input-part { fill: #ffe36a; }
.gesture-demo[data-engaged] .gesture-label { color: #ffe36a; }
@media (max-width: 600px) { .gesture-demo { grid-template-columns: minmax(0, 1fr); gap: .5rem; } .gesture-demo figcaption { justify-content: center; } }
.selection-details svg { display: block; width: 100%; background: #292a2d; }
.input-guide { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .55rem 1rem; margin: 1rem 0; padding: 1rem; background: #222427; border-left: 2px solid #77a8b9; }
.input-guide dt { font-weight: bold; color: #eee; }
.input-guide dd { margin: 0; }
#article kbd { font: inherit; font-size: .9em; white-space: nowrap; padding: .05em .28em; border: 1px solid #575a60; border-radius: .25em; }
@media (max-width: 480px) { .input-guide {grid-template-columns: 1fr; gap: .1rem;} .input-guide dt:not(:first-child) {margin-top: .55rem;} }
@media (max-width: 600px) { .selection-pair { grid-template-columns: 1fr; } }
img, video { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #ffe36a; outline-offset: 2px; }
#toggle { display: none; }
@media (max-width: 880px) {
  header { position: static; }
  .layout { display: block; }
  aside { position: static; max-height: none; border-right: 0; border-bottom: 1px solid #383a3e; padding: .75rem 0; }
  #toggle { display: inline-block; font: inherit; color: #f0f0ed; border: 1px solid #45464b; background: #292a2d; padding: .4rem .85rem; border-radius: .35rem; cursor: pointer; }
  #toggle[aria-expanded="false"] + nav { display: none; }
  nav { padding: 1rem .35rem .35rem; max-height: 55dvh; overflow-y: auto; }
  main { padding-top: 1.5rem; }
}