/* PurlShift web manual — layout, reading aids, figures. */
.manual-page{--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;--calc:#9a4a2c;--calc-bg:#f8ece6;--diag:#4d5d67;--diag-bg:#e9eef0;--real-bg:#e2f0f1;--panel:#fbfcfb;--uiL:#1aa9bd;--uiR:#e3623f}
.manual-layout{display:grid;grid-template-columns:225px minmax(0,1fr);gap:70px;padding-top:54px;padding-bottom:90px;max-width:1264px}
.read-progress{position:sticky;top:76px;z-index:19;height:2px;margin-top:-2px;pointer-events:none}.read-progress i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.manual-sidebar{min-width:0;position:relative}.manual-toc{position:sticky;top:106px;max-height:calc(100dvh - 130px);overflow:auto;scrollbar-width:thin}.manual-toc>summary{display:none}.toc-product{font-weight:600;font-size:16px;margin:0 0 22px;display:flex;align-items:baseline;gap:8px}.toc-product span{font-size:11px;font-weight:500;color:var(--sub);font-variant-numeric:tabular-nums}.manual-toc ol{list-style:none;padding:0;margin:0}.manual-toc li+li{margin-top:3px}.manual-toc nav>ol>li>a{position:relative;display:flex;gap:13px;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--body);border-left:2px solid transparent;overflow:hidden}.manual-toc nav a span{font-size:10px;padding-top:3px;opacity:.65;font-variant-numeric:tabular-nums}.manual-toc nav a:hover{color:var(--accent);background:var(--alt)}.manual-toc nav>ol>li>a[aria-current]{border-color:var(--accent);background:var(--alt);color:var(--accent);font-weight:600}
.toc-meter{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);opacity:.35;transform-origin:0 50%;transform:scaleX(var(--m,0));transition:transform .25s}
.toc-sub{display:none;padding:2px 0 8px 37px!important}.manual-toc li.is-current>.toc-sub{display:block}.toc-sub li+li{margin-top:0!important}.toc-sub a{display:block;padding:5px 8px;font-size:12px;line-height:1.5;color:var(--sub);border-radius:3px}.toc-sub a[aria-current]{color:var(--ink);font-weight:600}.toc-sub a[aria-current]::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin:0 7px 2px -12px}
.toc-back{display:inline-block;margin:25px 14px 0;font-size:12px;color:var(--sub)}
.manual-content{min-width:0;max-width:820px}.manual-header{padding-bottom:46px;border-bottom:1px solid var(--line)}.manual-header h1{font-size:clamp(36px,4vw,52px);margin:16px 0}.manual-lead{font-size:18px;color:var(--body);max-width:34em}.manual-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;color:var(--sub);margin-top:24px}.manual-meta>span{display:flex;align-items:center;gap:10px}.draft-label{font-size:10px;border:1px solid var(--line);padding:2px 7px;border-radius:3px}.print-button{font-size:12px;padding:10px 0}.print-button:hover{color:var(--accent)}
.fig-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-size:12px;color:var(--sub)}.fig-legend li{display:flex;align-items:center;gap:8px}
.manual-search{position:relative;margin-top:28px}.manual-search>label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;margin-bottom:8px}kbd{font:600 10px/1 var(--mono);padding:3px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:white;color:var(--body)}.search-field{display:flex;align-items:center;gap:12px;border:1px solid #b8c6c8;background:white;border-radius:5px;padding:0 14px;min-height:52px}.search-field:focus-within{outline:2px solid var(--accent);outline-offset:2px}.search-field svg{flex-shrink:0;color:var(--sub)}.search-field input{width:100%;min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:14px;color:var(--ink);padding:14px 0}.search-field input::-webkit-search-cancel-button{display:none}.search-clear{flex-shrink:0;width:32px;height:40px;font-size:22px;color:var(--sub)}.search-status:empty{display:none}.search-status{font-size:12px;margin-top:10px;color:var(--sub)}#search-results{margin-top:12px;border:1px solid var(--line);border-radius:5px;background:white;max-height:400px;overflow:auto}#search-results li+li{border-top:1px solid var(--line)}#search-results a{display:block;padding:15px 18px}#search-results a:hover,#search-results a:focus-visible{background:var(--alt)}#search-results strong{font-size:14px;display:block}#search-results span{display:block;margin-top:5px;font-size:12px;color:var(--body);line-height:1.65}#search-results mark{background:#d8eef0;color:inherit;border-radius:2px}
.manual-chapter{position:relative;padding:48px 0;border-bottom:1px solid var(--line)}.chapter-number{font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.08em;margin-bottom:10px!important}.manual-chapter h2{font-size:29px;line-height:1.4;margin-bottom:22px;scroll-margin-top:24px}.heading-link{font-size:20px;margin-left:12px;color:#80969e;opacity:0}.manual-chapter h2:hover .heading-link,.manual-chapter h3:hover .heading-link,.heading-link:focus-visible{opacity:1}.manual-chapter h3 .heading-link{font-size:16px;margin-left:10px}.manual-chapter h3{font-size:20px;line-height:1.5;margin:38px 0 14px;scroll-margin-top:24px}.manual-chapter p{font-size:16px;color:var(--body);line-height:1.9;margin:14px 0}.manual-chapter strong{font-weight:600;color:var(--ink)}.manual-chapter ol,.manual-chapter ul{padding-left:25px;margin:18px 0}.manual-chapter ul{list-style:disc}.manual-chapter ol li,.manual-chapter ul li{font-size:16px;line-height:1.85;padding:5px 0 5px 6px;color:var(--body)}.manual-chapter ol li::marker{color:var(--accent);font-weight:600}.manual-chapter code{font:13px/1.7 var(--mono);background:#eaf0ef;padding:3px 5px;border-radius:3px;overflow-wrap:anywhere}.manual-chapter pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:20px 0;padding:18px 20px;background:#eaf0ef;border-left:2px solid var(--accent)}.manual-chapter pre code{padding:0;background:none}
.manual-table{overflow-x:auto;margin:22px 0;overscroll-behavior-x:contain}.manual-table table{border-collapse:collapse;width:100%;text-align:left;font-size:14px;line-height:1.65}.manual-table th,.manual-table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}.manual-table th{background:var(--alt);font-weight:600;color:var(--ink)}.manual-table td{color:var(--body)}.manual-table td:first-child{color:var(--ink);font-weight:500}.manual-table th:first-child,.manual-table td:first-child{padding-left:12px;min-width:110px}
.manual-table td.yes,.manual-table td.no{white-space:nowrap}.manual-table td.yes::before,.manual-table td.no::before{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:7px;border-radius:50%;font-size:11px;font-weight:700;vertical-align:1px}.manual-table td.yes::before{content:"✓";background:var(--real-bg);color:var(--accent)}.manual-table td.no::before{content:"–";background:#eef0ef;color:var(--sub)}.manual-table td.no{color:var(--sub)}
.manual-end{display:flex;justify-content:space-between;gap:24px;padding-top:30px;font-size:12px;color:var(--sub)}.manual-end a{white-space:nowrap;color:var(--accent)}

/* callouts */
.callout{position:relative;margin:24px 0;padding:16px 20px 16px 52px;border-radius:6px;background:var(--real-bg);color:var(--body)}.callout p{margin:0!important;font-size:15px!important;line-height:1.8!important}.callout p+p{margin-top:8px!important}.callout::before{position:absolute;left:18px;top:17px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 12px/1 var(--sans);color:white;background:var(--accent);content:"i"}.callout .callout-label{font-size:12px!important;font-weight:700;letter-spacing:.04em;color:var(--accent);margin-bottom:2px!important}
.callout.tip::before{content:"✓"}.callout.warn{background:var(--calc-bg)}.callout.warn::before{content:"!";background:var(--calc)}.callout.warn .callout-label{color:var(--calc)}.callout.note{background:var(--diag-bg)}.callout.note::before{background:var(--diag)}.callout.note .callout-label{color:var(--diag)}

/* figure shell */
.fig{margin:30px 0 34px;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.fig-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:13px 16px;border-bottom:1px solid var(--line);background:white}.fig-title{margin:0!important;font-size:14px!important;font-weight:600;color:var(--ink)!important;line-height:1.5!important}.fig-tools{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}.fig-body{position:relative;padding:18px}.fig>figcaption,.fig .fig-note{padding:12px 18px 15px;border-top:1px solid var(--line);font-size:12px;line-height:1.7;color:var(--sub);background:white}
.fig-more{margin-top:6px}.fig-more>summary{display:inline-flex;align-items:center;gap:5px;width:fit-content;font-size:11px;font-weight:600;color:var(--sub);list-style:none}.fig-more>summary::-webkit-details-marker{display:none}.fig-more>summary::before{content:"▸";font-size:10px;transition:transform .2s}.fig-more[open]>summary::before{transform:rotate(90deg)}.fig-more>summary:hover{color:var(--accent)}.fig-more[open]{padding:8px 10px;border-radius:5px;background:var(--paper)}.fig-more[open]>summary{margin-bottom:4px}
.fig-kind{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:11px;font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap}.fig-kind::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.fig-kind.real{background:var(--real-bg);color:var(--accent)}.fig-kind.diagram{background:var(--diag-bg);color:var(--diag)}.fig-kind.calc{background:var(--calc-bg);color:var(--calc)}
.fig-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid #cdd8db;border-radius:5px;background:white;font-size:12px;font-weight:500;color:var(--body);white-space:nowrap}.fig-btn:hover{border-color:var(--accent);color:var(--accent)}.fig-btn[aria-pressed=true]{background:var(--real-bg);border-color:#9fcbd0;color:var(--accent)}
.seg{display:inline-flex;padding:2px;border:1px solid #cdd8db;border-radius:6px;background:#eef3f3}.seg button{height:28px;padding:0 13px;border-radius:4px;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--sub)}.seg button[aria-pressed=true]{background:white;color:var(--accent);box-shadow:0 1px 2px rgba(25,47,60,.14)}.seg button:hover{color:var(--accent)}
.fig .zoom img,.fig-shot{width:100%;height:auto;border-radius:6px}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}.reveal.is-in{opacity:1;transform:none}

/* hotspot map (real screenshots) */
.map-stage{position:relative;border-radius:8px;overflow:hidden;isolation:isolate;container-type:inline-size}.map-stage>img{display:block;width:100%;height:auto;transition:opacity .45s}.map-stage>img.map-alt{position:absolute;inset:0;opacity:0}.map-stage[data-view=alt]>img.map-alt{opacity:1}
.hot{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);border-radius:8px;cursor:pointer;transition:box-shadow .35s,background-color .35s;z-index:1}.hot>span{position:absolute;left:-7px;top:-7px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:white;font:600 11px/1 var(--sans);box-shadow:0 0 0 2px white;transition:transform .3s,background-color .3s}.hot[data-pin=br]>span{left:auto;top:auto;right:-7px;bottom:-7px}.hot[data-pin=tr]>span{left:auto;right:-7px}.hot[data-pin=none]>span{display:none}
.map-stage[data-active] .hot>span{background:#7e8f96}.hot.is-active{z-index:2;box-shadow:0 0 0 3px var(--accent),0 0 0 3000px rgba(16,34,45,.5)}.hot.is-active>span{background:var(--accent);transform:scale(1.18)}.hot.is-active::after{content:"";position:absolute;inset:-3px;border-radius:10px;border:3px solid var(--accent);animation:hot-pulse 1.6s ease-out infinite}
.map-stage[data-glow]::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--accent);pointer-events:none}
@keyframes hot-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
.hot:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent),0 0 0 3000px rgba(16,34,45,.4)}
.map-legend{counter-reset:none;list-style:none!important;padding:0!important;margin:16px 0 0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}.map-legend li{padding:0!important}.map-legend button{display:grid;grid-template-columns:22px 1fr;gap:2px 10px;width:100%;padding:10px 12px;border-radius:6px;text-align:left;border:1px solid transparent}.map-legend button:hover,.map-legend button.is-active{background:white;border-color:var(--line)}.map-legend button.is-active{border-color:#9fcbd0;box-shadow:0 1px 3px rgba(25,47,60,.08)}.map-legend .n{grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:white;font-size:11px;font-weight:600;margin-top:1px}.map-legend button.is-active .n{background:var(--accent)}.map-legend b{font-size:13px;font-weight:600;color:var(--ink);line-height:1.6}.map-legend small{font-size:12px;line-height:1.6;color:var(--body)}
.map-detail{min-height:46px;margin-top:12px;padding:12px 14px;border-radius:6px;background:white;border:1px solid var(--line);font-size:13px;line-height:1.7;color:var(--body)}.map-detail b{color:var(--ink);margin-right:8px}
.has-steps>li{cursor:pointer;border-radius:6px;transition:background-color .3s}.has-steps>li.is-step{background:var(--real-bg)}.has-steps>li.is-step::marker{color:var(--ink)}.step-progress{display:flex;gap:4px;margin-top:12px}.step-progress i{flex:1;height:3px;border-radius:2px;background:#d6e0e0;overflow:hidden}.step-progress i.done{background:var(--accent)}.step-progress i.now::before{content:"";display:block;height:100%;background:var(--accent);animation:step-fill var(--dur,3s) linear forwards}@keyframes step-fill{from{width:0}to{width:100%}}

/* live capture */
.live-stage{position:relative}.live-stage .zoom{display:block}.live-badge{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:12px;background:rgba(25,47,60,.82);color:white;font-size:11px;font-weight:600;pointer-events:none}.live-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff6b4a;animation:live-blink 1.4s steps(2,start) infinite}.live-stage.is-paused .live-badge::before{background:#9fb0b6;animation:none}@keyframes live-blink{to{visibility:hidden}}

/* calculators — 여러 그림이 같이 쓴다 (pitch · sync · lfo-clock · echoes · bind-map · chain) */
.calc-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}.calc-row+.calc-row{margin-top:12px}.calc-label{font-size:12px;font-weight:600;color:var(--sub);min-width:56px}.calc input[type=number]{width:96px;height:34px;padding:0 10px;border:1px solid #b8c6c8;border-radius:5px;background:white;font:600 14px var(--mono);color:var(--ink)}.calc input[type=range]{flex:1;min-width:160px;accent-color:var(--accent)}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{height:28px;padding:0 10px;border:1px solid #cdd8db;border-radius:14px;background:white;font:600 12px var(--mono);color:var(--body)}.chip:hover{border-color:var(--accent);color:var(--accent)}.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:white}
.calc-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:16px}.calc-out div{padding:12px 14px;border-radius:7px;background:white;border:1px solid var(--line)}.calc-out dt{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--sub)}.calc-out dd{margin:4px 0 0;font:600 18px/1.35 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}.calc-out dd small{display:block;font:500 12px/1.5 var(--sans);color:var(--body);margin-top:2px}
.out-big dd{font-size:22px}
/* plots — echoes 와 lfo-clock 이 같이 쓴다 (echoes 전용 하위 규칙은 echoes.css) */
.plot{display:block;width:100%;height:auto;margin-top:14px;background:white;border:1px solid var(--line);border-radius:8px}.plot .grid{stroke:#e3e9ea;stroke-width:1}.plot .zero{stroke:#b7c4c8;stroke-width:1}

@media(max-width:1000px){.manual-layout{grid-template-columns:195px minmax(0,1fr);gap:32px}.manual-toc nav>ol>li>a{padding-left:8px;padding-right:4px;font-size:12px;gap:10px}.toc-sub{padding-left:30px!important}}
@media(max-width:800px){html{scroll-padding-top:150px}.read-progress{top:68px}.manual-layout{display:block;padding-top:0;padding-bottom:56px}.manual-sidebar{position:sticky;top:68px;z-index:10;margin:0 -24px 34px;background:var(--paper);border-bottom:1px solid var(--line)}.manual-toc{position:static;max-height:calc(100dvh - 90px);overflow:auto}.manual-toc>summary{display:flex;align-items:center;gap:10px;padding:14px 24px;list-style:none;font-size:13px;font-weight:600}.toc-summary-current{flex:1;min-width:0;font-weight:500;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.manual-toc>summary::-webkit-details-marker{display:none}.manual-toc[open]>summary .toc-caret{transform:rotate(180deg)}.toc-inner{padding:0 18px 18px}.toc-product,.toc-back{display:none}.manual-toc nav>ol>li>a{padding:10px;font-size:14px}.manual-toc nav>ol{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px}.manual-toc li.is-current>.toc-sub{display:none}.manual-content{max-width:none}.manual-header{padding-bottom:34px}.manual-header h1{font-size:38px}.manual-lead{font-size:16px}.manual-chapter{padding:36px 0}.manual-chapter h2{font-size:26px}.heading-link{opacity:.6}.manual-chapter h3{font-size:20px}.manual-chapter p,.manual-chapter ol li,.manual-chapter ul li{font-size:15px}.manual-table th,.manual-table td{padding:11px 10px}.manual-table table{font-size:13px}.manual-end{display:block}.manual-end a{display:inline-block;margin-top:16px;padding:8px 0}.fig-body{padding:14px}}
@media(max-width:520px){.read-progress{top:64px}.manual-sidebar{top:64px;margin-left:-22px;margin-right:-22px}.manual-toc>summary{padding-left:22px;padding-right:22px}.manual-toc nav>ol{display:block}.manual-search input{font-size:16px}.manual-search input::placeholder{font-size:12px}.manual-table table{min-width:410px}.manual-meta{gap:8px}.manual-header h1{font-size:36px}.fig{margin-left:-6px;margin-right:-6px}.fig-body{padding:10px}.fig-head{padding:11px 12px}.map-legend{grid-template-columns:1fr}.hot>span{width:18px;height:18px;font-size:10px;left:-5px;top:-5px}.hot[data-pin=br]>span{right:-5px;bottom:-5px}.calc input[type=range]{min-width:120px}.callout{padding-left:46px}.callout::before{left:14px}}
@media print{html{scroll-padding-top:0}.fig-more{display:none!important}body{background:white;font-size:11pt}.nav,.site-footer,.manual-sidebar,.manual-search,.print-button,.skip,.heading-link,.manual-end,.image-dialog,.read-progress,.fig-tools,.fig-legend,.calc-row,.map-detail,.step-progress,.live-badge{display:none!important}.manual-layout{display:block;padding:0;max-width:none}.manual-content{max-width:none}.manual-chapter{padding:22px 0;break-before:auto}.manual-chapter h2,.manual-chapter h3{break-after:avoid}.manual-chapter p,.manual-chapter li{font-size:10pt}.manual-table{overflow:visible}.manual-table table{min-width:0;font-size:9pt}.manual-table tr{break-inside:avoid}.fig{break-inside:avoid;max-width:560px;border-color:#ccc}.hot.is-active{box-shadow:none}.hot.is-active::after{display:none}.reveal{opacity:1;transform:none}.manual-header{padding-bottom:20px}.manual-header h1{font-size:28pt}[data-print=hide]{display:none!important}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}