@font-face{font-family:GuideMono;src:url('assets/fonts/ibm-plex-mono-regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:GuideDisplay;src:url('assets/fonts/space-grotesk-variable.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;--paper:#f7f8f5;--surface:#fff;--ink:#262e2a;--muted:#616b64;--accent:#a3442d;--accent-soft:#f9eee7;--line:#dce1d9;--green:#396450;--green-soft:#eef4ed;--mono:GuideMono,monospace;--head:GuideDisplay,system-ui,sans-serif;font-family:system-ui,-apple-system,'Noto Sans JP',sans-serif;color:var(--ink);background:var(--paper);scroll-padding-top:94px}
*{box-sizing:border-box}body{margin:0;font-size:16px;line-height:1.85}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}a{color:var(--accent);text-underline-offset:4px}a:hover{text-decoration-thickness:2px}button{min-height:44px;border:1px solid var(--line);border-radius:7px;padding:8px 15px;background:var(--surface);font-size:14px;font-weight:560;line-height:1.5}button:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--ink);color:white;border-color:var(--ink)}button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,pre:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button:focus:not(:focus-visible){outline:none}[hidden]{display:none!important}.enhanced{display:none!important}.js .enhanced{display:block!important}.js[lang=ja] [lang=en],.js[lang=en] [lang=ja]{display:none!important}html:not(.js) [lang=en]{color:var(--muted)}html:not(.js) [lang=ja]+[lang=en]{display:block;margin-top:.5em}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;left:16px;top:-100px;z-index:20;padding:10px 18px;background:var(--surface)}.skip:focus{top:10px}.topbar{height:76px;position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px;padding:0 32px}.brand{color:var(--ink);font-family:var(--head);text-decoration:none;font-weight:700;font-size:23px;display:flex;align-items:center;gap:11px;letter-spacing:-1px}.brand img{border-radius:8px}.header-label{font-size:13px;color:var(--muted);border-left:1px solid var(--line);padding-left:22px}.js .language{display:flex!important;margin-left:auto;gap:2px}.language button{border:0;background:transparent;padding:8px 11px;font-size:12px}.language button[aria-pressed=true]{background:var(--surface);box-shadow:0 0 0 1px var(--line);color:var(--ink)}.js .mobile-menu{display:none!important}.workspace{display:grid;grid-template-columns:230px minmax(0,760px) 205px;gap:44px;max-width:1390px;margin:0 auto;padding:0 32px}.sidebar,.page-toc{position:sticky;top:76px;height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;padding-top:37px;padding-bottom:24px;scrollbar-width:thin}.sidebar{border-right:1px solid var(--line);padding-right:20px}.nav-label{font-family:var(--head);font-size:11px;letter-spacing:.12em;font-weight:650;color:var(--muted);margin:0 0 18px}.chapter-nav{display:flex;flex-direction:column;gap:5px}.chapter-nav a{display:flex;align-items:baseline;gap:12px;padding:11px 10px;color:var(--muted);border-radius:5px;font-size:13px;line-height:1.65;text-decoration:none}.chapter-nav a:hover{background:#ecefe9;color:var(--ink)}.chapter-nav a[aria-current=page]{background:#e9eee5;color:var(--ink);font-weight:700}.nav-number{font-family:var(--mono);font-size:10px;flex-shrink:0;opacity:.75}.sidebar-foot{border-top:1px solid var(--line);margin-top:30px;padding:20px 10px 0;color:var(--muted);font-size:11px;line-height:1.7}.version{font-family:var(--mono);border:1px solid var(--line);padding:2px 5px;border-radius:3px}.sidebar-foot a{font-size:12px}.page-toc{font-size:12px;line-height:1.65}.page-toc nav{display:flex;flex-direction:column;border-left:1px solid var(--line)}.page-toc nav a{padding:8px 0 8px 14px;border-left:2px solid transparent;margin-left:-1px;color:var(--muted);text-decoration:none;overflow-wrap:anywhere}.page-toc nav a[aria-current=location]{border-color:var(--accent);color:var(--accent);font-weight:650}.to-top{display:inline-block;margin-top:24px;font-size:11px;text-decoration:none}main{min-width:0;padding-top:30px;padding-bottom:30px}.search-area{margin-bottom:28px}.search-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:7px}.search-box{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:2px 5px 2px 13px}.search-box>span{font-size:24px;color:var(--muted);line-height:1}.search-box input{min-width:0;flex:1;width:100%;background:transparent;border:0;padding:10px 3px;height:46px;font-size:14px}.search-box input:focus-visible{outline-offset:0}.search-box button{border:0;font-size:11px;color:var(--muted);padding:8px;flex-shrink:0}#search-results{margin:12px 0 28px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:14px}#search-status{margin:0 0 8px;font-size:12px;color:var(--muted)}.result-link{display:block;color:var(--ink);text-decoration:none;padding:16px 6px;border-top:1px solid var(--line)}.result-link small{display:block;color:var(--accent);font-size:11px}.result-link strong{font-size:16px}.result-link p{font-size:13px;color:var(--muted);line-height:1.8;margin:5px 0 0}.manual-intro{padding:8px 0 26px;border-bottom:1px solid var(--line)}.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--accent);margin:0 0 12px}.manual-intro h1{font-size:30px;letter-spacing:-.04em;line-height:1.5;margin:0 0 12px}.manual-intro>p:last-child{font-size:14px;color:var(--muted);margin:0}.chapter-heading{padding:34px 0 22px}.chapter-heading h2{font-size:clamp(26px,2.3vw,36px);font-family:var(--head);line-height:1.45;letter-spacing:-.035em;margin:0 0 14px;overflow-wrap:anywhere}.chapter-heading>p:last-child{color:var(--muted);font-size:15px;margin:0}.inline-toc{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:28px}.inline-toc a{font-size:12px;line-height:1.8;padding:7px 0;color:var(--muted)}.screen-figure{display:grid;grid-template-columns:minmax(150px,225px) minmax(0,1fr);gap:28px;align-items:center;background:#eeeee6;border:1px solid var(--line);border-radius:10px;padding:25px;margin:0 0 16px}.annotated-screen{position:relative;min-width:0}.annotated-screen img{width:100%;height:auto;display:block;border-radius:9px;border:1px solid #d3d6cb}.pin{position:absolute;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:white;border:2px solid var(--surface);box-shadow:0 2px 8px #2223;font:bold 11px var(--mono)}.pin-title{top:2%;left:20%}.pin-settings{top:2%;left:66%}.pin-preview{top:53%;left:63%}.pin-editor{top:68%;left:4%}.screen-figure h3{font-size:21px;line-height:1.6;margin:0 0 20px}.screen-key{counter-reset:key;list-style:none;margin:0;padding:0;display:grid;gap:15px;font-size:12px;line-height:1.8}.screen-key li{counter-increment:key;position:relative;padding-left:29px}.screen-key li:before{content:counter(key);position:absolute;left:0;top:1px;background:var(--accent);color:#fff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font:10px var(--mono)}.figure-note{font-size:11px;color:var(--muted);line-height:1.7;margin:22px 0 0}.flow-figure{margin:0 0 16px;padding:18px 20px;background:#eef1eb;border-radius:8px;border:1px solid var(--line)}.flow-figure figcaption{font-size:11px;color:var(--muted);margin-bottom:14px}.flow-figure ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:0;gap:22px}.flow-figure li{background:var(--surface);padding:12px 8px;text-align:center;border:1px solid var(--line);border-radius:5px;font-size:12px;line-height:1.65;position:relative}.flow-figure li+li:before{content:'→';position:absolute;left:-18px;top:50%;transform:translateY(-50%);color:var(--muted)}.topic{padding:40px 0;border-bottom:1px solid var(--line);scroll-margin-top:94px;overflow-wrap:anywhere}.topic-title{display:flex;align-items:start;gap:8px}.topic-title h3{font-size:22px;line-height:1.65;letter-spacing:-.025em;margin:0;flex:1;min-width:0}.permalink{font:16px var(--mono);padding:10px 8px;flex-shrink:0;opacity:.55;text-decoration:none}.permalink:hover{opacity:1}.topic-lead{margin:14px 0 20px;font-size:16px;line-height:1.95}.access-path{display:flex;align-items:baseline;gap:14px;padding:13px 16px;background:#eef1eb;border-radius:5px;font-size:12px;line-height:1.8}.access-path p{margin:0;min-width:0}.field-label{display:block;color:var(--muted);font-size:10px;font-weight:650;letter-spacing:.06em;line-height:1.7}.access-path>.field-label{flex-shrink:0}.step-label{font-size:11px;letter-spacing:.06em;color:var(--muted);margin:24px 0 13px}.steps{counter-reset:step;list-style:none;margin:0 0 24px;padding:0;display:grid;gap:16px;font-size:15px;line-height:1.95}.steps li{counter-increment:step;position:relative;padding-left:35px}.steps li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:3px;font:11px/24px var(--mono);color:var(--accent)}.result{font-size:14px;line-height:1.9;padding:0 0 0 15px;border-left:2px solid #83a28e;margin:24px 0}.result>.field-label{color:var(--green);margin-bottom:5px}.note{padding:16px 18px;border:1px solid var(--line);border-radius:5px;font-size:13px;line-height:1.9;background:#f2f3ee}.note p{margin:6px 0 0}.table-scroll{overflow-x:auto;margin-top:24px;border:1px solid var(--line);border-radius:6px;max-width:100%}table{width:100%;border-collapse:collapse;font-size:12px;text-align:left;line-height:1.8}th{background:#e9eee5;font-weight:650;white-space:nowrap}td,th{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}td{min-width:100px}tr:last-child td{border-bottom:0}.code-example{margin-top:25px;border:1px solid var(--line);border-radius:8px;overflow:hidden;max-width:100%}.code-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#e9eee5;padding:9px 14px;font-size:11px;line-height:1.7}.code-caption>span{min-width:0}.code-caption button{background:transparent;border-color:#c7cfc1;font-size:11px;flex-shrink:0;min-height:38px;padding:6px 10px}pre{background:#222e2b;color:#e6eee3;margin:0;padding:22px;overflow:auto;font:12px/1.95 var(--mono);tab-size:2}code{font-family:var(--mono)}.live-demo,.simulation{margin:24px 0 0;border:1px solid #cbd6c7;border-radius:9px;overflow:hidden;background:var(--surface);padding:20px}.demo-heading{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted);line-height:1.8}.demo-tag{display:inline-block;flex-shrink:0;border:1px solid #bbccbc;background:var(--green-soft);color:var(--green);border-radius:4px;padding:3px 7px;font-size:10px;font-weight:700;letter-spacing:.06em}.simulation .demo-tag{background:var(--accent-soft);color:var(--accent);border-color:#e8d3c4}.demo-help{font-size:12px;color:var(--muted);line-height:1.85;margin:12px 0 18px}.live-stage{background:#f1f1ea;min-height:180px;max-width:100%;border:1px solid var(--line);border-radius:6px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:10/7}.live-stage iframe{display:block;width:100%;height:100%;position:absolute;inset:0;border:0;background:#f1f1ea}.stage-placeholder{text-align:center;padding:25px;color:var(--muted);font-size:13px}.demo-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.demo-status{font-size:12px;color:var(--green);line-height:1.8;min-height:24px;margin:12px 0 0}.live-controls,.sim-controls{display:flex;flex-wrap:wrap;gap:14px 18px;margin-bottom:18px}.control{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:12px;flex:1 1 140px}.control>span{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.control output{font:12px var(--mono);color:var(--accent)}input[type=range]{accent-color:var(--accent);min-height:36px;width:100%;margin:0}input[type=color]{width:100%;min-height:40px;border:1px solid var(--line);border-radius:5px;background:transparent}select,input[type=text],textarea{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:5px;background:var(--surface);font-size:13px}input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}.control.check{flex-direction:row;align-items:center;min-height:44px;flex:0 1 auto}.control.check input{margin-right:4px}.watch-output{font-family:var(--mono);font-size:12px;display:block;background:#eef4ed;border:1px solid #bbcdb9;padding:10px 12px;border-radius:5px;margin-bottom:16px}.sim-panel{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#f1f1ea}.sim-toolbar{padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;background:#e9eee5;display:flex;justify-content:space-between;gap:8px;align-items:center}.sim-body{padding:18px}.sim-body p{font-size:13px;margin:8px 0;line-height:1.85}.sim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sim-card{padding:22px 10px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:13px}.sim-card[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}.mini-art{height:90px;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;background:#e8ece2;border-radius:4px;margin-bottom:12px}.mini-art:before{content:'';width:58px;height:58px;background:#b85338;border-radius:50%;box-shadow:18px 0 0 -7px #dcb997}.mini-art.weave:before{border-radius:0;background:repeating-linear-gradient(45deg,#426b5d 0 4px,#e8ece2 4px 10px);transform:rotate(15deg);width:80px;height:80px;box-shadow:none}.sim-readout{padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:5px;font-size:13px;margin-top:12px}.sim-readout p{margin:0}.sim-code{font:12px/1.9 var(--mono);overflow:auto;white-space:pre;background:#222e2b;color:#e6eee3;border-radius:5px;padding:15px;max-width:100%}.sim-code mark{background:#e9b98f;color:#222e2b}.pip-workspace{height:240px;background:#e8ece2;position:relative;overflow:hidden;border-radius:5px;padding:14px}.pip-window{position:absolute;width:95px;height:78px;background:#f7f8f5;border:1px solid var(--ink);border-radius:7px;box-shadow:0 4px 15px #0002;display:grid;place-items:center;touch-action:none;cursor:grab}.pip-window:before{content:'';width:40px;height:40px;border-radius:50%;background:#b85338}.pip-window.large{width:130px;height:110px}.pip-window.ghost{opacity:.5}.pip-window.minimized{width:40px;height:34px}.pip-window.minimized:before{width:15px;height:15px}.camera-diagram{height:170px;position:relative;overflow:hidden;display:grid;place-items:center;background:#dce6d7;border-radius:5px}.camera-diagram:before{content:'';width:95px;height:95px;background:linear-gradient(45deg,#b85338 0 50%,#426b5d 50%);border-radius:50%}.camera-diagram.off:before{filter:grayscale(1);opacity:.3}.camera-diagram.mirror:before{transform:scaleX(-1)}.camera-diagram span{position:absolute;bottom:8px;background:var(--surface);padding:3px 8px;border-radius:4px;font-size:11px}.sensor-board{height:160px;display:grid;place-items:center;background:#dce6d7;border-radius:5px;overflow:hidden}.sensor-phone{width:85px;height:128px;border:2px solid var(--muted);background:var(--surface);border-radius:12px;display:grid;place-items:center}.sensor-ball{width:24px;height:24px;background:#b85338;border-radius:50%}.meter{height:10px;background:#e3e8df;border-radius:10px;overflow:hidden;margin:14px 0}.meter-fill{height:100%;background:#426b5d}.history-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.history-values output{display:block;font-family:var(--mono);font-size:23px}.snapshot-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.file-tree{font:12px/2 var(--mono);white-space:pre-wrap;margin:0 0 14px}.share-card-preview{background:#eeeee6;border:1px solid var(--line);border-radius:5px;padding:18px}.share-card-preview .mini-art{height:130px}.share-card-preview pre{font-size:10px;margin:12px 0;padding:12px}.help-links{display:flex;flex-direction:column;margin-top:24px;gap:8px;font-size:13px}.chapter-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:36px 0}.chapter-pager a{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-radius:6px;text-decoration:none;font-size:13px;line-height:1.7}.chapter-pager a:hover{background:var(--surface)}.chapter-pager small{color:var(--muted);font-size:10px}footer{font-size:11px;line-height:1.9;color:var(--muted);margin:45px 0 10px}footer p{max-width:600px}.chapter-pager a:only-child{grid-column:2}h2:focus,h3:focus{outline:none}
@media(min-width:1101px){.inline-toc{display:none}}
@media(max-width:1200px){.workspace{grid-template-columns:205px minmax(0,1fr) 165px;gap:28px;padding:0 24px}.topbar{padding:0 24px}.chapter-nav a{font-size:12px;padding-left:6px}.page-toc{font-size:11px}.screen-figure{padding:20px;gap:20px;grid-template-columns:minmax(130px,180px) minmax(0,1fr)}}
@media(max-width:1100px){.workspace{grid-template-columns:205px minmax(0,760px);gap:32px}.js .page-toc{display:none!important}.screen-figure{grid-template-columns:minmax(150px,210px) minmax(0,1fr)}}
@media(max-width:760px){:root{scroll-padding-top:85px}.topbar{height:68px;padding:0 16px;gap:10px}.brand{font-size:20px;gap:7px}.brand img{width:27px;height:27px}.header-label{display:none}.js .language{margin-left:0}.language button{padding:7px 9px}.js .mobile-menu{display:block!important;margin-left:auto;font-size:12px;padding:7px 12px}.workspace{display:block;padding:0 20px;max-width:760px}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:24px 0}.js .sidebar:not(.open){display:none}.sidebar-foot{margin-top:14px}.chapter-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}.chapter-nav a{font-size:12px}.sidebar .nav-label{margin-bottom:10px}.sidebar-foot p{display:none}main{padding-top:24px}.manual-intro{padding-top:0}.manual-intro h1{font-size:27px}.chapter-heading{padding-top:28px}.topic{padding:32px 0;scroll-margin-top:85px}.topic-title h3{font-size:21px}.topic-lead{font-size:15px}.steps{font-size:14px}.screen-figure{padding:20px;gap:20px;grid-template-columns:minmax(115px,185px) minmax(0,1fr)}.screen-figure h3{font-size:18px;margin-bottom:16px}.screen-key{font-size:11px;gap:13px}.screen-key li{padding-left:26px}.figure-note{font-size:10px}.screen-figure .eyebrow{font-size:9px}.access-path{align-items:start;gap:10px}.flow-figure{padding:16px 12px}.flow-figure ol{gap:16px}.flow-figure li{font-size:11px;padding:11px 5px}.flow-figure li+li:before{left:-14px}.live-demo,.simulation{padding:16px}.code-caption{padding:9px 12px}pre{padding:17px;font-size:11px}.control{flex-basis:110px}.chapter-pager{gap:10px}.chapter-pager a{padding:15px;font-size:12px}}
@media(max-width:420px){.workspace{padding:0 16px}.topbar{padding:0 12px;gap:8px}.brand{font-size:18px}.brand img{width:24px;height:24px}.language button{font-size:11px;padding:7px 8px}.js .mobile-menu{padding:7px 10px}.chapter-nav{grid-template-columns:1fr}.screen-figure{padding:15px;gap:15px;grid-template-columns:110px minmax(0,1fr)}.screen-figure h3{font-size:15px}.screen-key{gap:8px;font-size:10px}.screen-key li{padding-left:22px}.screen-key li:before{width:17px;height:17px;font-size:9px}.figure-note{margin-top:12px}.pin{width:20px;height:20px;font-size:9px}.screen-figure .eyebrow{font-size:8px}.access-path{display:block}.access-path .field-label{margin-bottom:4px}.demo-heading{align-items:start;gap:8px;font-size:10px}.demo-help{font-size:11px}.demo-actions button{padding:8px 11px;font-size:12px}.sim-body{padding:13px}.sim-grid{gap:9px}.live-controls{gap:12px}.chapter-heading h2{font-size:27px}.topic-title h3{font-size:20px}.flow-figure li{font-size:10px}.note{padding:14px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print{.js .enhanced,.topbar,.sidebar,.page-toc,.search-area,.chapter-pager,.permalink,.enhanced{display:none!important}.workspace{display:block;padding:0}main{max-width:none}.chapter[hidden]{display:block!important}.js[lang=ja] [lang=en],.js[lang=en] [lang=ja]{display:none!important}.topic{break-inside:avoid}pre{white-space:pre-wrap;color:black;background:#eee}.screen-figure{max-width:600px}body{font-size:11pt}}
/* Parameter controls and device-input diagrams. */
.parameter-tools{margin:-4px 0 20px}.pin-controls{display:flex;flex-wrap:wrap;gap:2px 14px;padding:10px 0;border-top:1px solid var(--line)}.pin-controls .control{font-size:10px;min-height:32px}.pin-controls input{width:14px;height:14px}.parameter-tools .demo-actions{margin-top:8px}.parameter-tools button{font-size:11px;padding:7px 10px}.dark-card{background:#222e2b;color:#e6eee3}.simulation[data-sim=mic] .camera-diagram:before{width:var(--mic-size,62px);height:var(--mic-size,62px);background:#426b5d}.primary:hover:not(:disabled){color:var(--ink)}
@media(min-width:1101px){.screen-figure{grid-template-columns:175px minmax(0,1fr)}}

/* Interactive examples: preview, tools, and observable state share one workspace. */
.live-demo,.simulation{padding:0;border-color:#cbd2c8;border-radius:12px;box-shadow:0 3px 14px #26392c06;container-type:inline-size}
.live-demo>.demo-heading,.simulation>.demo-heading{padding:18px 20px 0}
.demo-exercise{display:flex;gap:10px;margin:14px 20px 20px;font-size:13px;line-height:1.85;color:var(--ink)}
.exercise-number{color:var(--accent);font-size:20px;line-height:1.3}
.demo-studio{margin:0 16px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#f1f1ea;display:grid;grid-template-columns:minmax(0,1fr)}
.demo-preview{min-width:0;align-self:start}
.preview-bar{display:flex;gap:12px;align-items:center;padding:11px 14px;background:#e8ede5;font-size:10px;font-weight:650;border-bottom:1px solid var(--line)}
.canvas-size{margin-left:auto;font:9px var(--mono);color:var(--muted);white-space:nowrap}
.runtime-state{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}
.runtime-state:before{content:'';width:6px;height:6px;border-radius:50%;background:#a8b0a4;flex-shrink:0}
[data-runtime=running] .runtime-state:before{background:#487559;box-shadow:0 0 0 3px #48755918}
[data-runtime=loading] .runtime-state:before{background:#bb8652}
.live-stage{border:0;border-radius:0;min-height:0;background-color:#f1f1ea;background-image:linear-gradient(#d5dbd044 1px,transparent 1px),linear-gradient(90deg,#d5dbd044 1px,transparent 1px);background-size:24px 24px}
.stage-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12px;padding:24px}
.stage-placeholder:before{content:'▷';width:46px;height:46px;display:grid;place-items:center;border:1px solid #bcc9b7;border-radius:50%;font-size:22px;color:var(--green);background:#f9faf6}
.demo-preview>.demo-actions{padding:10px 12px;margin:0;border-top:1px solid var(--line);background:#f8faf5;gap:6px}
.demo-preview>.demo-actions button{flex:1;padding:7px 10px;font-size:12px}
.studio-tools{padding:14px;background:#fffefa;border-top:1px solid var(--line);min-width:0}
.studio-tools h4{margin:0 0 12px;font-size:11px;color:var(--muted);font-weight:600}
.studio-tools .live-controls{display:flex;flex-direction:column;gap:10px;margin:0}
.studio-tools .control{flex:auto;gap:4px;font-size:11px}
.studio-tools .control output{font-size:11px;background:#eff2eb;padding:1px 5px;border-radius:3px}
.studio-tools .control.check{min-height:32px;font-size:11px}
.parameter-row{display:grid;grid-template-columns:minmax(0,1fr) 25px;gap:8px;align-items:center;padding-bottom:8px;border-bottom:1px solid #e8ece3}
.parameter-row>.parameter-pin{position:relative;margin-top:15px;width:25px;overflow:hidden;min-height:30px}
.parameter-row>.parameter-pin span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.parameter-row>.parameter-pin:after{content:'固定';position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#8a9587;font-size:9px}
.parameter-row>.parameter-pin input{appearance:none;width:25px;height:30px;margin:0;border:1px solid #d8dfd1;border-radius:5px;background:#f8faf5}
.parameter-row>.parameter-pin input:checked{background:#e8eee0;border-color:#57744a}
.parameter-row>.parameter-pin:has(input:checked):after{color:#3e622f}
.parameter-row:has(input:checked)>label:first-child>span{color:var(--green)}
.parameter-tools{margin:12px 0 0}.parameter-tools .demo-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}.parameter-tools button{font-size:10px;min-height:38px;padding:6px}
.live-demo>.demo-status{margin:12px 20px;font-size:11px}
.live-demo>.demo-technical-note{margin:0;padding:12px 20px;background:#f3f5ef;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.watch-output{margin:0;font-size:17px;padding:15px;border:0;background:#edf2e7}
.simulation-title{margin:12px 20px 16px;font-size:17px;line-height:1.6}
.practice-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0 20px 20px}
.practice-steps li{display:flex;align-items:start;gap:7px;font-size:10px;line-height:1.7;color:var(--muted)}
.step-marker{display:grid;place-items:center;flex-shrink:0;width:19px;height:19px;border:1px solid #cfd7c9;border-radius:50%;font:10px var(--mono);background:#f4f6f0}
.practice-steps .complete{color:var(--green)}.complete .step-marker{background:#e5eedc;border-color:#afc5a6;color:#3c6332}
.sim-panel{margin:0 16px;border-radius:8px;background:#f8f9f4}
.sim-toolbar{padding:10px 13px;background:#e8ede5;justify-content:initial;gap:9px}
.sim-app-mark{font:700 10px var(--head);border-radius:5px;width:27px;height:27px;display:grid;place-items:center;background:#344c40;color:#f6f4e7}
.sim-toolbar b{font-size:11px;flex:1;line-height:1.5}.mock-label{font-size:9px;color:var(--muted);white-space:nowrap}
.sim-body{padding:18px;min-width:0}.sim-commandbar{padding:12px 16px;margin:0;border-top:1px solid var(--line);background:#f0f3eb;gap:7px}
.sim-commandbar button{font-size:11px;padding:7px 11px;min-height:40px}.sim-commandbar button:first-child{background:#405a47;color:white;border-color:#405a47}.sim-commandbar button:first-child:hover{background:#526e58}
.sim-panel>.sim-readout{margin:0;padding:12px 16px;border:0;border-radius:0;border-top:1px solid var(--line);font-size:11px;background:#fffefa;min-height:47px;color:#405a47;line-height:1.8}
.sim-panel>.sim-readout:empty{display:none}.simulation-footer{display:flex;align-items:center;gap:16px;padding:14px 20px}
.simulation-footer>button{flex-shrink:0;font-size:10px;min-height:36px;padding:6px 10px;background:transparent}.simulation-footer>.demo-status{margin:0;min-height:0;font-size:10px;color:var(--muted)}
.mock-section-label{font-size:10px;letter-spacing:.04em;color:var(--muted);margin-bottom:10px}
.sim-card{padding:8px 8px 12px;text-align:left;position:relative}.sim-card>.mini-art{height:125px;margin-bottom:8px}.sim-card[aria-pressed=true]:after{content:'✓';position:absolute;right:15px;top:15px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#405a47;color:white;font-size:12px}
.mini-art{background:radial-gradient(ellipse at 25% 30%,#f8f1d5 0,transparent 60%),#e0e7d8}.mini-art:before{width:65px;height:65px;background:#b96043;box-shadow:28px 18px 0 -8px #d3a65a,-17px 23px 0 -15px #426b5d}
.mini-art.weave{background:#dfe7dc}.mini-art.weave:before{width:110px;height:110px;background:repeating-linear-gradient(45deg,#52705f 0 3px,transparent 3px 12px),repeating-linear-gradient(-45deg,#c7a16d 0 3px,transparent 3px 12px);border-radius:50%;transform:none;box-shadow:none}
.gallery-copy{margin-top:18px;border-top:1px dashed #bdcbb6;padding-top:15px}.copied-work{display:flex;gap:16px;align-items:center}.copied-work>.mini-art{width:85px;height:90px;flex-shrink:0;margin:0}.copied-work>div{min-width:0}.copied-work p{font-size:11px}.copied-work code{font-size:10px;color:var(--muted)}
.editor-document{border:1px solid #374940;border-radius:6px;overflow:hidden;margin-bottom:16px}.document-tab{background:#34453d;color:#e2eadf;padding:9px 13px;font:11px var(--mono);display:flex;justify-content:space-between;gap:10px}.document-tab span{font-size:9px;color:#aebdae}.editor-document .sim-code{border-radius:0;min-height:145px;padding:16px 12px 16px 32px;background-image:linear-gradient(90deg,#293a30 22px,transparent 22px)}
.editor-accessory{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:end}.editor-accessory .control{font-size:11px}.editor-accessory input[type=text]{min-height:38px;font:12px var(--mono)}
.pip-workspace{height:300px;border:1px solid #c9d3c1;background:#e5eadf;padding:12px}.pip-workspace>.sim-code{height:100%;padding-top:40px;font-size:11px}.pip-window{border:3px solid #607e67;border-radius:9px;box-shadow:0 8px 20px #172d3830;background:radial-gradient(ellipse at 20% 25%,#faf4da,transparent 80%),#e2eadb}.pip-window:before{box-shadow:14px 8px 0 -8px #d3a65a}.pip-window.minimized:before{box-shadow:none}
.mock-file-browser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:16px}.mock-file-browser .file-tree{margin:0;white-space:normal;background:#eef2e8;padding:5px}.file-tree button{display:flex;align-items:center;gap:6px;width:100%;text-align:left;min-height:42px;border:0;background:transparent;font:10px var(--mono);padding:8px 5px;overflow-wrap:anywhere}.file-tree button[aria-pressed=true]{background:#dae4d3;color:#344c40}.file-kind{font:8px var(--mono);border:1px solid #c5d0bc;border-radius:3px;padding:2px;flex-shrink:0}.file-preview{font-size:10px;line-height:1.9;min-height:160px;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.camera-diagram{height:220px;background:linear-gradient(#dbe6df 0 63%,#ccd7b7 63%);border:1px solid #d2dbcb}.camera-diagram:before{width:160px;height:125px;border-radius:0;background:linear-gradient(145deg,transparent 48%,#52705b 49% 65%,transparent 66%),linear-gradient(35deg,transparent 40%,#91a87a 41% 66%,transparent 67%);box-shadow:56px -45px 0 -42px #c8944f}.camera-diagram.off{background:#e1e6dd}.camera-diagram span{font-size:9px;max-width:90%;text-align:center;line-height:1.7}
[data-sim=mic] .camera-diagram{background:#edf1e7}.simulation[data-sim=mic] .camera-diagram:before{border-radius:50%;box-shadow:0 0 0 12px #426b5d10,0 0 0 25px #426b5d08}
.sensor-board{height:210px;background-image:linear-gradient(#cbd7c444 1px,transparent 1px),linear-gradient(90deg,#cbd7c444 1px,transparent 1px);background-size:20px 20px;margin-bottom:16px}.sensor-phone{height:150px;width:94px;border:4px solid #546b58;box-shadow:6px 8px 0 #aabda644;position:relative}.sensor-phone:before{content:'';position:absolute;width:28px;height:3px;background:#a2b199;top:7px;border-radius:2px}.sensor-ball{box-shadow:2px 4px 6px #3a4d3133}
.history-preview{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.value-preview>span{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.value-canvas{height:135px;display:grid;place-items:center;background:#edf1e7;border:1px solid var(--line);border-radius:5px;overflow:hidden}.value-canvas i{display:block;width:var(--diameter);height:var(--diameter);border-radius:50%;background:#b85338}.history-values{gap:10px}.history-values p{font-size:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}.history-values output{font-size:17px}.snapshot-list:empty{display:none}.snapshot-list button{font-size:11px}.simulation[data-dirty=true] .value-preview:first-child .value-canvas{border-color:#b58b51}
.backup-map{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0}.backup-collection,.backup-archive{display:flex;min-height:140px;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:#fffefa;border:1px solid #ced8c5;border-radius:7px;padding:14px 9px}.backup-collection strong{font-size:12px}.backup-collection>span{font:20px var(--mono);color:#49633e}.backup-collection small,.backup-archive small{font-size:10px;color:var(--muted);line-height:1.7}.backup-archive strong{font:20px var(--mono);color:#8d9985;border-bottom:2px dashed #bcc8b2;padding-bottom:6px}.backup-archive.ready{background:#eaf1e0;border-color:#9ab28a}.backup-archive.ready strong{color:#426638}.backup-collection.empty{border-style:dashed;background:transparent}.backup-collection.empty>span{font-size:12px;color:var(--muted)}.backup-arrow{color:#7b8e70;text-align:center;font-size:20px}
@container(min-width:540px){.demo-studio:has(.studio-tools){grid-template-columns:minmax(0,1fr) 205px}.studio-tools{border-top:0;border-left:1px solid var(--line)}.demo-studio:has(.studio-tools) .preview-bar{flex-wrap:wrap;gap:8px}.demo-studio:has(.studio-tools) .canvas-size{display:none}.demo-studio:has(.studio-tools) .live-stage{min-height:245px;aspect-ratio:auto}.demo-studio:has(.studio-tools) .demo-preview{height:100%;display:flex;flex-direction:column}.demo-studio:has(.studio-tools) .live-stage{flex:1}.demo-preview>.demo-actions button{font-size:11px}}
@container(max-width:380px){.live-demo>.demo-heading,.simulation>.demo-heading{padding:15px 12px 0}.demo-exercise{margin:12px;font-size:12px}.demo-studio,.sim-panel{margin:0 10px}.simulation-title{margin:12px;font-size:15px}.practice-steps{padding:0 12px 15px;gap:5px}.practice-steps li{flex-direction:column;font-size:9px;gap:5px}.simulation-footer{padding:12px;gap:10px;align-items:start}.sim-body{padding:12px}.sim-commandbar{padding:10px;gap:6px}.sim-commandbar button{font-size:10px;padding:7px 9px}.mock-file-browser{grid-template-columns:1fr}.mock-file-browser .file-tree{display:grid;grid-template-columns:1fr 1fr}.file-preview{min-height:120px}.editor-accessory{grid-template-columns:1fr}.sim-card>.mini-art{height:95px}.sim-card{font-size:11px}.studio-tools{padding:12px}.studio-tools .live-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.parameter-row{grid-template-columns:minmax(0,1fr) 25px;gap:4px}.parameter-tools .demo-actions{grid-template-columns:1fr 1fr}.control>span{gap:4px}.preview-bar{gap:8px}.canvas-size{font-size:8px}.backup-map{gap:7px}.live-demo>.demo-technical-note{padding:10px 12px}.live-demo>.demo-status{margin:10px 12px}.history-values p{display:block}.sim-body .sim-controls{gap:8px}.sim-body .sim-controls .control{flex-basis:90px}}
@media(prefers-reduced-motion:reduce){.live-demo *,.simulation *{scroll-behavior:auto;transition:none;animation:none}}

html[lang=en] .parameter-row>.parameter-pin:after{content:'Pin'}
.recovery-comparison{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.recovery-comparison>div{border:1px solid var(--line);border-radius:5px;padding:12px;background:#fffefa}.recovery-comparison span,.recovery-comparison code{display:block;font-size:11px}.recovery-comparison code{font-size:12px;margin-top:8px;color:var(--accent)}.recovery-editor{border-radius:6px;overflow:hidden}.recovery-editor .sim-code{border-radius:0}.save-failed{color:#f3be9d!important}
.export-canvas{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden}.export-canvas .mini-art{margin:0;height:200px;border-radius:0}.export-dimensions{position:absolute;bottom:9px;right:12px;font:10px var(--mono);color:#49603e}.record-indicator{position:absolute;top:10px;left:12px;background:#fff9;padding:4px 8px;border-radius:4px;color:#9f3c2e;font:10px var(--mono)}.export-receipt{display:flex;align-items:center;gap:14px;padding:14px;background:#fffefa;border:1px solid #ced8c5;border-radius:6px;margin-top:14px}.receipt-type{font:11px var(--mono);padding:16px 8px;border:1px solid #bacbab;border-radius:3px;color:#547145}.export-receipt strong{font:12px var(--mono)}.export-receipt p{font-size:11px;margin:5px 0 0}.export-receipt.pending{border-color:#c39366;background:#faf0e4}.organization-list{display:grid;gap:10px}.organization-work{display:flex;gap:13px;align-items:center;padding:12px;border:1px solid #d0d9c7;border-radius:6px;background:#fffefa;font-size:12px}.work-initial{width:42px;height:42px;display:grid;place-items:center;background:#e8eee0;color:#587344;border-radius:5px;font:18px var(--mono)}

.tuning-help{font-size:10px;color:var(--muted);line-height:1.8;margin:8px 0 0}.studio-tools:has(.tuning-help) .live-controls{display:flex;flex-direction:column}
.flow-icon{display:block;width:18px;height:18px;margin:0 auto 5px;color:var(--accent)}
.sidebar-subnav{display:none;flex-direction:column;margin:2px 0 6px 26px;border-left:1px solid var(--line)}.sidebar-subnav a{padding:6px 10px;font-size:11px;line-height:1.5;color:var(--muted);border-radius:0 4px 4px 0}.sidebar-subnav a[aria-current=location]{color:var(--accent);font-weight:650;border-left:2px solid var(--accent);margin-left:-1px}
.demo-collapse-toggle{margin-left:auto;min-height:32px;padding:4px 11px;font-size:11px;font-weight:600;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);flex-shrink:0}
.demo-collapse-toggle[aria-expanded=false]{background:var(--green-soft);border-color:#b8ccb9;color:var(--green)}
.simulation .demo-collapse-toggle[aria-expanded=false]{background:var(--accent-soft);border-color:#e4cab9;color:var(--accent)}
.live-demo.is-collapsed>:not(.demo-heading):not(.demo-exercise),.simulation.is-collapsed>:not(.demo-heading):not(.simulation-title){display:none!important}
.live-demo.is-collapsed .demo-exercise{margin-bottom:16px}
.simulation.is-collapsed .simulation-title{margin-bottom:16px}
.js .mobile-current-chapter,.js .drawer-controls,.js .mobile-accordion-toggle{display:none!important}
.hamburger-icon{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:16px;height:14px}
.hamburger-icon span{display:block;width:100%;height:1.8px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.mobile-menu[aria-expanded=true] .hamburger-icon span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.mobile-menu[aria-expanded=true] .hamburger-icon span:nth-child(2){opacity:0}
.mobile-menu[aria-expanded=true] .hamburger-icon span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
@media(max-width:1100px){.sidebar-subnav{display:flex}.inline-toc{gap:8px}.inline-toc a{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--ink);text-decoration:none;min-height:34px;display:inline-flex;align-items:center}}
@media(max-width:760px){
  .topbar{height:60px;padding:0 14px;gap:10px}
  .js .topbar>.language{display:none!important}
  .js .mobile-current-chapter{display:block!important;flex:1;min-width:0;font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px;border-left:1px solid var(--line);padding-left:10px}
  .js .mobile-menu{display:inline-flex!important;align-items:center;gap:7px;margin-left:auto;min-height:38px;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:650}
  .js .mobile-menu[aria-expanded=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
  .sidebar{position:fixed;top:60px;right:0;left:auto;bottom:0;width:min(88vw,360px);height:calc(100dvh - 60px);max-height:calc(100dvh - 60px);z-index:20;background:var(--paper);border-right:0;border-left:1px solid var(--line);border-bottom:0;box-shadow:-16px 0 38px #1b221e33;padding:16px 18px 32px;overflow-y:auto;overscroll-behavior:contain}
  html.menu-open{overflow:hidden}
  html.menu-open body:after{content:'';position:fixed;inset:60px 0 0 0;background:#1b221e45;backdrop-filter:blur(2px);z-index:15}
  .js .drawer-controls{display:flex!important;flex-direction:column;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
  .drawer-top-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .drawer-title{font:700 11px var(--head);letter-spacing:.1em;color:var(--muted)}
  .drawer-language{display:inline-flex;background:#eaeee6;padding:2px;border-radius:999px;border:1px solid var(--line)}
  .drawer-language button{min-height:28px;padding:3px 10px;font-size:11px;border:0;border-radius:999px;background:transparent}
  .drawer-language button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #0001}
  .drawer-search-box{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:0 10px}
  .drawer-search-box>span{font-size:18px;color:var(--muted)}
  .drawer-search-box input{border:0;background:transparent;min-height:38px;padding:6px 2px;font-size:13px;width:100%}
  #drawer-search-results{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px;max-height:240px;overflow-y:auto}
  #drawer-search-status{margin:0 0 6px;font-size:11px;color:var(--muted)}
  #drawer-result-list .result-link{padding:10px 4px}
  #drawer-result-list .result-link strong{font-size:13px}
  #drawer-result-list .result-link p{font-size:11px;line-height:1.5}
  .sidebar>.nav-label{display:none}
  .chapter-nav{grid-template-columns:1fr!important;gap:4px!important}
  .chapter-nav>a{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink)}
  .chapter-nav>a[aria-current=page]{background:#e6ede2;border-color:#b8ccb9;color:var(--green)}
  .chapter-chevron{display:inline-block!important;font-size:13px;color:var(--muted);transition:transform .2s ease;margin-left:auto;padding-left:8px}
  .chapter-nav>a[aria-expanded=true] .chapter-chevron{transform:rotate(180deg);color:var(--green)}
  .sidebar-subnav{grid-column:1/-1;margin:2px 0 8px 14px;padding-left:6px}
  .sidebar-subnav a{padding:7px 10px;font-size:12px}
  .sidebar-subnav.is-drawer-subnav{display:flex!important;flex-direction:column;gap:3px;background:#edf3ea;border-radius:8px;padding:8px 10px;margin:3px 0 8px 10px;border-left:3px solid var(--green)}
  .sidebar-subnav.is-drawer-subnav a{padding:8px 10px;font-size:12px;color:var(--ink);border-radius:6px;text-decoration:none;line-height:1.5}
  .sidebar-subnav.is-drawer-subnav a:hover,.sidebar-subnav.is-drawer-subnav a:active{background:var(--surface);color:var(--accent)}
  .sidebar-subnav .drawer-top-link{font-weight:700;color:var(--green);border-bottom:1px dashed #ced8c7;margin-bottom:4px;padding-bottom:6px;display:flex;align-items:center;justify-content:space-between}
  .sidebar-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:14px 4px 0}
  .js .mobile-accordion-toggle{display:flex!important;align-items:center;justify-content:space-between;width:100%;min-height:42px;padding:9px 14px;margin:0 0 10px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:650;color:var(--ink);text-align:left}
  .mobile-accordion-toggle .accordion-chevron{font-size:13px;color:var(--muted);transition:transform .18s ease}
  .mobile-accordion-toggle[aria-expanded=true] .accordion-chevron{transform:rotate(180deg)}
  .inline-toc.is-collapsed,.flow-figure.is-collapsed,.screen-figure.is-collapsed{display:none!important}
  .inline-toc{margin-bottom:16px;padding:10px 12px;background:#eef2eb;border-radius:8px;border:1px solid var(--line)}
  .manual-intro{padding:0 0 18px}
  .manual-intro h1{font-size:23px;margin-bottom:6px}
  .manual-intro>p:last-child{font-size:13px;line-height:1.65}
  .search-area{margin-bottom:18px}
}
@media(max-width:520px){
  .screen-figure{grid-template-columns:1fr;padding:18px 16px;gap:18px}
  .annotated-screen{max-width:210px;margin:0 auto}
  .screen-figure h3{font-size:17px;margin-bottom:12px}
  .screen-key{font-size:12px;gap:10px}
  .practice-steps{grid-template-columns:1fr;gap:7px;padding:0 16px 14px}
  .practice-steps li{flex-direction:row!important;align-items:center;font-size:11px!important;gap:8px!important}
}