:root{--acid:#dcff42;--bg:#151616;--panel:#1a1b1b;--ink:#f0f1eb;--muted:#a7ac9f;--line:#363838;--rail:22%;--gutter:3.1vw;--ease:cubic-bezier(.22,1,.36,1);font-family:'Noto Sans SC','Microsoft YaHei UI','Microsoft YaHei',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{color:inherit;background:none;border:0;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--acid);outline-offset:6px}button:disabled{cursor:wait}::selection{color:var(--bg);background:var(--acid)}.rail ::selection{background:var(--bg);color:var(--acid)}.rail :focus-visible{outline-color:var(--bg)}[hidden]{display:none!important}.skip{position:fixed;top:12px;left:40%;z-index:1000;background:var(--acid);color:var(--bg);padding:12px;transform:translateY(-180%)}.skip:focus{transform:translateY(0)}
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:20;background:var(--acid);color:var(--bg);overflow:hidden;padding:4.2vh 3.4vw}.brand{display:flex;flex-direction:column;align-items:flex-start;width:max-content}.brand img{width:6.5vw;height:6.5vw;max-width:118px;max-height:118px}.brand-name{font-size:4.65vw;line-height:1.22;font-weight:900;letter-spacing:-.07em;margin-top:7px}.brand-tagline{font-size:1.55vw;font-weight:700;letter-spacing:.08em;margin-top:5px}.chapter-number{position:absolute;top:37.8%;left:5.5%;width:calc(100% - 5.5%);height:24%;pointer-events:none}.chapter-number svg{height:100%;width:100%;overflow:visible;fill:var(--bg)}.chapters{position:absolute;left:3.4vw;bottom:18.7%;display:grid;gap:14px;font-size:16px;font-weight:500}.chapters a{position:relative;display:flex;gap:14px;align-items:center;opacity:.62;padding-left:21px;transition:opacity .22s}.chapters a:before{content:'';position:absolute;left:0;top:1px;bottom:1px;width:2px;background:currentColor}.chapters a[aria-current]{opacity:1;font-weight:750}.chapters a[aria-current]:before{width:6px;border-radius:2px}.chapters a:hover{opacity:1}.chapters a span{font-family:Arial,sans-serif;font-size:14px}.rail-bottom{position:absolute;bottom:3.9%;left:3.4vw;right:1.5vw}.rail-download{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--bg);color:var(--acid);font-size:1.65vw;font-weight:700;padding:16px 10px;border:1px solid var(--bg);transition:background .2s,color .2s}.rail-download span{font-size:1.4em}.rail-download:hover{background:transparent;color:var(--bg)}.rail-bottom p{margin:14px 0 0;font:16px Arial,sans-serif}.scroll-progress{position:absolute;right:0;top:0;bottom:0;width:3px;background:#00000012}.scroll-progress i{display:block;height:100%;background:#15161660;transform:scaleY(0);transform-origin:top;will-change:transform}
.topbar{position:fixed;left:var(--rail);right:0;top:0;height:80px;padding:18px 2.1vw;display:flex;align-items:center;justify-content:flex-end;gap:30px;z-index:15;background:var(--bg)}.topbar button,.topbar a{font-size:19px;font-weight:600;white-space:nowrap}.topbar button:hover{color:var(--acid)}.topbar a{color:var(--acid);border:1px solid var(--acid);padding:7px 22px;transition:background .2s,color .2s}.topbar a:hover{background:var(--acid);color:var(--bg)}.top-divider{width:1px;height:34px;background:var(--muted)}main{margin-left:var(--rail)}.chapter{min-height:max(100svh,850px);padding:8.4vh 2.1vw 3vh var(--gutter);display:flex;flex-direction:column;position:relative;scroll-margin-top:0}.chapter-heading{flex:none}.eyebrow{font:600 clamp(24px,2.2vw,36px)/1.2 Arial,sans-serif;color:#858984;display:block;margin-bottom:8px}.chapter-heading h1,.chapter-heading h2{font-size:clamp(52px,4.95vw,88px);line-height:1.2;letter-spacing:-.04em;margin:0;font-weight:850}.chapter-heading p{font-size:clamp(20px,1.9vw,30px);font-weight:450;line-height:1.5;color:var(--muted);margin:12px 0 0}.chapter-next{border-top:1px solid #686c65;margin-top:auto;min-height:78px;display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:4px;color:var(--muted);font-size:20px;gap:20px}.chapter-next span:last-child{border-left:1px solid #686c65;padding-left:24px;white-space:nowrap}.chapter-next b{font-size:28px;line-height:1;font-weight:400;margin-left:8px;display:inline-block;transition:transform .3s var(--ease)}.chapter-next:hover{color:var(--ink)}.chapter-next:hover b{transform:translateY(5px)}
.workspace-demo{margin-top:2.4vh;flex:1;min-height:490px;padding-bottom:6vh;display:flex;flex-direction:column}.canvas-caption{font:14px/1.5 Consolas,monospace;display:flex;justify-content:space-between;color:var(--muted)}.demo-note{font:12px/1.5 'Microsoft YaHei',sans-serif;opacity:.7}.ruler-x{display:flex;justify-content:space-around;padding-left:45px;font:13px Consolas,monospace;color:var(--muted);margin:6px 0 13px}.canvas-grid{position:relative;margin-left:45px;flex:1;min-height:320px;background-image:linear-gradient(#30333144 1px,transparent 1px),linear-gradient(90deg,#30333144 1px,transparent 1px),linear-gradient(#45494244 1px,transparent 1px),linear-gradient(90deg,#45494244 1px,transparent 1px);background-size:15px 15px,15px 15px,75px 75px,75px 75px;border-top:1px solid #686c65;border-left:1px solid #686c65}.canvas-grid:before{content:'+';position:absolute;left:-6px;top:-12px;font:22px Consolas;color:#686c65}.ruler-y{position:absolute;right:calc(100% + 10px);height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:16px 0 0;font:13px Consolas,monospace;color:var(--muted)}.origin-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#777c7250}.canvas-after{margin:28px 0 0 45px;display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:36px}.disabled-screen{padding:8px 13px;min-width:240px;border:1px solid #74796e;color:var(--muted);font-size:14px}.text-action{color:var(--muted);font-size:14px;padding:4px 0}.text-action:hover{color:var(--acid)}
.monitor{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #c4c8bd;background:#1a1b1b;cursor:grab;touch-action:none;user-select:none;transition:left .4s var(--ease),top .4s var(--ease),width .4s var(--ease),height .4s var(--ease),border-color .2s;min-width:0}.monitor.dragging{cursor:grabbing;transition:none;z-index:4}.monitor.selected{border-color:var(--acid);z-index:2}.monitor.selected:before,.monitor.selected:after{content:'';width:13px;height:13px;background:var(--acid);position:absolute}.monitor.selected:before{right:-7px;top:-7px}.monitor.selected:after{left:-7px;bottom:-7px}.monitor-name{position:absolute;bottom:100%;padding-bottom:12px;font-size:16px;white-space:nowrap;pointer-events:none}.monitor-number{width:clamp(95px,11vw,160px);height:clamp(62px,8vw,114px);object-fit:contain;pointer-events:none}.monitor-meta{font:clamp(15px,1.55vw,23px)/1.4 Consolas,monospace;color:#b4b9ad;text-align:center}.monitor-meta small{display:block;font-size:.85em;margin-top:3px}.monitor-primary{font-size:14px;line-height:1.3;margin-top:6px;min-height:18px;display:flex;gap:7px;align-items:center}.monitor-primary svg{width:15px;height:15px}.monitor:focus-visible{outline:1px dashed var(--acid);outline-offset:4px}
.preset-toolbar{display:flex;align-items:center;gap:26px;margin-top:3.8vh;margin-bottom:3vh;font-size:20px}.preset-toolbar i{height:1px;background:#65695f;flex:1}.preset-toolbar button{font-size:17px;white-space:nowrap;padding:8px 0}.preset-toolbar button:first-of-type{color:var(--acid)}.preset-toolbar button:hover{color:var(--acid)}.preset-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-height:38vh;overflow:auto;padding:2px;scrollbar-color:var(--line) transparent;scrollbar-width:thin}.preset-card{min-height:26vh;display:flex;flex-direction:column;align-items:stretch;text-align:left;border:1px solid #444941;border-radius:3px;padding:25px 24px;color:var(--ink);background:var(--panel);transition:color .18s,background .18s,border-color .18s,transform .3s var(--ease)}.preset-card:hover{border-color:var(--acid);transform:translateY(-2px)}.preset-card[aria-pressed=true]{background:var(--acid);color:var(--bg);border-color:var(--acid)}.preset-card-heading{display:flex;align-items:center;gap:16px;font-size:22px;font-weight:600;overflow-wrap:anywhere}.preset-card-heading b{font:bold 36px/1 Arial,sans-serif;letter-spacing:-1.5px}.preset-card .monitor-diagram{width:100%;height:100%;max-height:115px;margin:36px 0 24px;flex:1}.monitor-diagram{stroke:currentColor;fill:none;stroke-width:1.5}.preset-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:16px;min-height:30px}.current-badge{font-size:15px;font-weight:600;background:var(--bg);color:var(--acid);padding:5px 9px;border-radius:2px}.preset-details{display:grid;grid-template-columns:1fr 1fr;margin:5.7vh 0 4vh;min-height:170px}.naming{padding-right:5vw}.naming>label,.continue-layout h3{display:block;font-size:20px;font-weight:600;margin:0 0 22px}.name-field{display:flex;border:1px solid #74796e;border-radius:2px;min-height:66px}.name-field:focus-within{border-color:var(--acid)}.name-field input{width:100%;min-width:0;color:var(--ink);background:transparent;border:0;outline:none;padding:15px 22px;font-size:22px}.name-field button{width:66px;padding:18px}.name-field svg{width:25px;height:25px}.field-note{display:block;color:var(--muted);font-size:13px;margin-top:10px;min-height:20px}.continue-layout{border-left:1px solid #666d61;padding-left:4.7vw}.continue-layout button{display:flex;flex-direction:column;text-align:left;padding:0;font-size:20px;gap:12px;color:var(--muted)}.continue-layout .monitor-diagram{width:245px;height:84px;color:var(--ink);max-width:100%}.continue-layout button b{font-weight:400;opacity:0;transition:opacity .2s}.continue-layout button:hover b{opacity:1;color:var(--acid)}
.chord-hero{padding:5.4vh 9.4vw 4.5vh}.key-combination{display:flex;align-items:center;justify-content:space-between;gap:24px}.key-combination>span{font:56px Arial,sans-serif;color:#b7bbb2}.key-combination kbd{font:600 clamp(32px,4.1vw,62px)/1 Arial,sans-serif;height:16vh;min-height:112px;max-height:180px;min-width:0;flex:1;display:grid;place-items:center;border:2px solid #bec3b6;border-radius:14px}.key-combination .accent-key{background:var(--acid);color:var(--bg);border:2px solid var(--acid);position:relative;outline:1px solid var(--acid);outline-offset:6px;font-size:clamp(48px,6.4vw,92px)}.accent-key i{width:15px;height:15px;background:var(--acid);position:absolute;transition:transform .3s}.accent-key i:first-child{left:-14px;bottom:-14px}.accent-key i:last-child{right:-14px;top:-14px}.chord-hero.playing .accent-key{animation:key-press .4s var(--ease)}.chord-result{display:flex;align-items:center;gap:40px;margin-top:34px;font-size:clamp(26px,2.7vw,40px)}.chord-result>span{color:var(--acid);font-size:64px;line-height:1}.shortcut-table{margin-top:1vh}.shortcut-labels,.shortcut-row{display:grid;grid-template-columns:60% 40%;align-items:center}.shortcut-labels{padding:10px 12px;color:var(--muted);font-size:16px;border-bottom:1px solid var(--line)}.shortcut-row{border-bottom:1px solid #444941;min-height:62px;padding:10px 12px;font-size:22px}.shortcut-binding{display:flex;align-items:center;min-width:0;gap:6px}.shortcut-binding button:first-child{font-family:Consolas,monospace;text-align:left;min-width:0;flex:1;white-space:normal;line-height:1.4;padding:4px 0;color:var(--muted)}.shortcut-binding button.has-value{color:var(--ink)}.shortcut-binding button.recording{color:var(--acid)}.shortcut-clear{font-size:20px;color:var(--muted);width:32px}.shortcut-hint{text-align:right;color:var(--muted);font-size:14px;margin-top:16px;min-height:28px}
.download-main{background:var(--acid);color:var(--bg);display:flex;align-items:center;justify-content:space-between;text-align:left;padding:26px 42px;margin-top:3.2vh;min-height:14.8vh;border-radius:3px;transition:background .2s,transform .25s var(--ease)}.download-main:hover{background:#e4ff72}.download-main:active{transform:scale(.992)}.download-main strong{font-size:clamp(30px,3.8vw,60px);line-height:1.3;font-weight:750;letter-spacing:-.04em}.download-main small{display:block;font:600 30px Arial,sans-serif}.download-arrow{font-size:96px;line-height:1;transition:transform .3s var(--ease)}.download-main:hover .download-arrow{transform:translate(4px,-4px)}.requirements{display:grid;grid-template-columns:46% 54%;padding:4.3vh 0 3.7vh}.requirements>div{display:flex;gap:26px;align-items:flex-start;min-width:0}.requirements>div+div{border-left:1px solid #656b5e;padding-left:4.5vw}.requirements svg{width:42px;height:42px;flex:none}.requirements strong{font-size:clamp(16px,1.5vw,23px);font-weight:500;line-height:1.5}.requirements small{display:block;font-size:16px;margin-top:9px;line-height:1.5;color:var(--muted)}.beta-note{color:var(--muted);font-size:17px;border-top:1px solid #686c65;padding-top:13px;margin:0 0 22px}.faq{border:1px solid #454a40;margin-bottom:35px}.faq details+details{border-top:1px solid #454a40}.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:23px;font-weight:600;padding:18px 26px;gap:18px}.faq summary::-webkit-details-marker{display:none}.faq summary>span{width:21px;height:21px;position:relative;flex:none}.faq summary>span:before,.faq summary>span:after{content:'';height:2px;width:20px;background:var(--ink);position:absolute;top:10px;left:0}.faq summary>span:after{transform:rotate(90deg);transition:transform .2s}.faq details[open] summary>span:after{transform:rotate(0)}.faq details>div{padding:0 26px 18px;color:var(--muted);font-size:16px;line-height:1.8}.faq p{margin:0}.faq .text-action{display:block;color:var(--acid);margin-top:8px}.site-footer{border-top:1px solid #656b5e;margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;min-height:74px;font-size:14px;padding-bottom:10px}.site-footer nav{display:flex;gap:20px;align-items:center}.site-footer button{padding:0}.site-footer a{border-left:1px solid #656b5e;padding-left:28px}.site-footer button:hover,.site-footer a:hover{color:var(--acid)}
.download-status{margin-top:15px}.download-status>div{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;gap:20px}.download-status button{color:var(--acid)}progress{width:100%;height:3px;accent-color:var(--acid);margin-top:12px}dialog{color:var(--ink);background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--acid);max-width:650px;width:calc(100% - 40px);padding:40px;max-height:85svh;overflow:auto}dialog::backdrop{background:#0009;backdrop-filter:blur(9px)}dialog h2{font-size:36px;line-height:1.3;margin:14px 0 28px}.dialog-label{color:var(--acid);font:12px Consolas;letter-spacing:.16em}.dialog-close{position:absolute;right:16px;top:12px;font:36px Arial;color:var(--muted)}#dialog-content{font-size:17px;line-height:1.9;color:var(--muted)}#dialog-content h3{color:var(--ink);font-size:20px;margin-bottom:8px}#dialog-content ul{padding-left:22px}#dialog-content button{color:var(--acid);border:1px solid var(--acid);padding:10px 20px;margin-top:18px}.live-notice{position:fixed;right:28px;bottom:24px;background:var(--panel);border-left:3px solid var(--acid);padding:14px 22px;color:var(--ink);z-index:50;max-width:min(500px,80vw);font-size:15px;opacity:0;transform:translateY(15px);pointer-events:none;transition:opacity .2s,transform .3s}.live-notice.show{opacity:1;transform:translateY(0)}.noscript{position:fixed;bottom:0;right:0;background:var(--bg);padding:10px;border:1px solid var(--acid)}@keyframes key-press{50%{transform:scale(.94)}}
@media(min-width:1800px){.chapter{padding-top:100px}.rail{padding-top:45px}.chapter-heading h1,.chapter-heading h2{font-size:82px}.brand-name{font-size:78px}.brand-tagline{font-size:26px}.rail-download{font-size:27px}.monitor-number{width:170px;height:120px}.workspace-demo{min-height:440px}.preset-card{min-height:245px}.chord-hero{padding-top:40px;padding-bottom:35px}.key-combination kbd{height:155px}.download-main{min-height:160px}.requirements{padding-top:32px;padding-bottom:30px}.chapter-next{min-height:72px}}
@media(max-height:850px) and (min-width:901px){.chapter{padding-top:90px;min-height:850px}.rail .chapter-number{top:35%;height:23%}.brand img{width:58px;height:58px}.brand-name{font-size:42px}.brand-tagline{font-size:16px}.chapters{gap:9px;bottom:22%}.rail-download{padding:9px 6px;font-size:18px}.rail-bottom{bottom:4%}.rail-bottom p{font-size:13px}.workspace-demo{min-height:460px}.preset-card{min-height:245px}.preset-details{margin-top:40px}.chord-hero{padding-top:42px}.requirements{padding-top:30px;padding-bottom:30px}}
@media(max-width:1100px){.rail{padding-left:2.5vw}.brand-name{font-size:5vw}.brand-tagline{font-size:1.6vw}.chapters{left:2.5vw;font-size:14px}.rail-bottom{left:2.5vw}.rail-bottom p{font-size:13px}.topbar{gap:20px}.topbar button,.topbar a{font-size:16px}.preset-card{padding:20px 14px}.preset-card-heading{font-size:18px;gap:10px}.preset-card-heading b{font-size:30px}.preset-toolbar{gap:16px}.preset-details{grid-template-columns:1fr 1fr}.chord-hero{padding-left:4vw;padding-right:4vw}.key-combination{gap:15px}.key-combination>span{font-size:36px}.requirements>div{gap:14px}.requirements>div+div{padding-left:20px}.requirements svg{width:28px;height:28px}.site-footer nav{gap:10px}.site-footer a{padding-left:12px}.site-footer{font-size:12px}.monitor-name{font-size:14px}.monitor-meta{font-size:15px}.demo-note{font-size:11px}}
@media(max-width:900px){:root{--rail:0%;--gutter:24px}.rail{height:78px;width:100%;bottom:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;overflow:visible}.brand{flex-direction:row;align-items:center;gap:10px}.brand img{width:39px;height:39px}.brand-name{font-size:30px;margin:0;letter-spacing:-.04em}.brand-tagline,.chapter-number,.rail-bottom,.scroll-progress{display:none}.chapters{position:static;display:flex;gap:20px;font-size:14px}.chapters a{padding:8px 0}.chapters a span{display:none}.chapters a:before{inset:auto 0 0;width:100%;height:1px;opacity:0}.chapters a[aria-current]:before{width:100%;height:2px;opacity:1}.topbar{display:none}.chapter{padding:112px 24px 28px;min-height:100svh;scroll-margin-top:0}.chapter-heading h1,.chapter-heading h2{font-size:56px}.chapter-heading p{font-size:21px}.eyebrow{font-size:24px}.workspace-demo{margin-top:36px;min-height:460px;padding-bottom:38px}.canvas-grid{min-height:300px}.monitor-number{width:100px;height:88px}.preset-toolbar{margin-top:40px}.preset-card{min-height:230px}.preset-cards{max-height:none}.preset-details{margin-top:42px;margin-bottom:55px}.chapter-next{min-height:72px;font-size:16px}.key-combination kbd{max-width:none;height:150px}.chord-hero{padding:55px 25px 45px}.shortcut-table{margin-bottom:55px}.requirements{margin-top:0;padding:36px 0}.download-main{margin-top:36px;min-height:155px}.download-main strong{font-size:40px}.download-arrow{font-size:72px}.faq{margin-bottom:45px}.site-footer{flex-wrap:wrap;gap:22px;font-size:14px;padding-top:25px}.site-footer nav{gap:14px}.demo-note{font-size:12px}.canvas-caption{font-size:12px}}
@media(max-width:560px){.rail{height:70px;padding:0 18px}.brand-name{font-size:27px}.brand img{width:32px;height:32px}.chapters{gap:13px;font-size:13px}.chapters a:first-child{font-size:0}.chapters a:first-child:after{content:'布局';font-size:13px}.chapter{padding:100px 20px 28px}.chapter-heading h1,.chapter-heading h2{font-size:44px}.chapter-heading p{font-size:18px;margin-top:10px}.eyebrow{font-size:21px}.workspace-demo{min-height:395px;flex:0;margin-top:30px}.canvas-caption>span:first-child,.canvas-caption>span:last-child{display:none}.demo-note{margin-left:auto}.ruler-x{font-size:9px;padding-left:25px;margin-top:16px}.ruler-x span:nth-child(even){display:none}.canvas-grid{margin-left:25px;min-height:255px}.ruler-y{font-size:10px;right:calc(100% + 5px)}.monitor-name{font-size:11px;padding-bottom:9px}.monitor-number{width:58px;height:48px}.monitor-meta{font-size:10px;line-height:1.5}.monitor-primary{font-size:10px;min-height:12px;margin-top:2px}.monitor-primary svg{width:10px;height:10px}.monitor.selected:before,.monitor.selected:after{width:8px;height:8px}.monitor.selected:before{top:-4px;right:-4px}.monitor.selected:after{left:-4px;bottom:-4px}.canvas-after{margin-left:25px;margin-top:20px}.disabled-screen{min-width:0;font-size:11px;padding:6px 10px}.chapter-next{font-size:14px;gap:10px;min-height:68px}.chapter-next span:last-child{padding-left:12px}.chapter-next b{font-size:20px;margin-left:2px}.preset-toolbar{font-size:16px;gap:13px;margin-top:30px;margin-bottom:22px}.preset-toolbar button{font-size:13px}.preset-cards{grid-template-columns:1fr;gap:12px;max-height:520px}.preset-card{min-height:155px;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:15px}.preset-card-heading{font-size:18px;gap:10px;align-self:start}.preset-card-heading b{font-size:30px}.preset-card .monitor-diagram{grid-column:2;grid-row:1/3;align-self:center;height:80px;margin:0;max-height:none}.preset-card-footer{align-self:end;font-size:13px}.current-badge{font-size:12px}.preset-details{grid-template-columns:1fr;gap:25px;margin:32px 0 35px}.naming{padding:0}.naming>label,.continue-layout h3{font-size:17px;margin-bottom:14px}.name-field{min-height:55px}.name-field input{font-size:18px;padding:12px 15px}.name-field button{width:52px;padding:14px}.continue-layout{padding:25px 0 0;border-left:0;border-top:1px solid var(--line)}.continue-layout button{flex-direction:row;align-items:center;gap:20px;font-size:15px}.continue-layout .monitor-diagram{width:130px;height:50px}.continue-layout button b{opacity:1}.chord-hero{padding:45px 8px 28px}.key-combination{gap:9px}.key-combination kbd{height:90px;min-height:90px;border-radius:8px;font-size:29px}.key-combination .accent-key{font-size:49px;outline-offset:3px}.key-combination>span{font-size:24px}.accent-key i{width:10px;height:10px}.accent-key i:first-child{left:-9px;bottom:-9px}.accent-key i:last-child{right:-9px;top:-9px}.chord-result{font-size:26px;margin-top:28px;gap:24px}.chord-result>span{font-size:44px}.shortcut-row{font-size:16px;grid-template-columns:40% 60%;min-height:63px;padding:12px 0}.shortcut-labels{grid-template-columns:40% 60%;font-size:13px;padding:10px 0}.shortcut-binding button:first-child{font-size:15px}.shortcut-clear{font-size:18px;width:24px}.shortcut-hint{font-size:12px;line-height:1.6}.download-main{padding:22px;min-height:125px;margin-top:28px}.download-main strong{font-size:27px}.download-main small{font-size:22px;margin-top:8px}.download-arrow{font-size:54px}.requirements{grid-template-columns:1fr;gap:23px;padding:30px 0}.requirements>div+div{border:0;padding:0}.requirements strong{font-size:17px}.requirements small{font-size:13px;margin-top:4px}.beta-note{font-size:14px;line-height:1.6}.faq summary{font-size:18px;padding:17px}.faq details>div{font-size:14px;padding:0 17px 18px}.site-footer{font-size:12px;gap:20px}.site-footer nav{flex-wrap:wrap;gap:10px;font-size:12px}.site-footer a{padding-left:10px}dialog{padding:30px 24px}dialog h2{font-size:28px}#dialog-content{font-size:16px}.live-notice{left:20px;right:20px;max-width:none;font-size:14px}}
/* Final-prototype alignment: 1448 × 1086, exact brand colours, no image gradients. */
@media(min-width:901px){
 .chapter-heading h1,.chapter-heading h2{font-weight:800;line-height:1.08;font-size:clamp(52px,5.25vw,88px);letter-spacing:-.02em}
 .chapter-heading p{font-size:clamp(20px,1.8vw,29px);margin-top:10px}
 .brand-name{font-weight:900;font-size:5.2vw;letter-spacing:-.03em}
 .workspace-demo{margin-top:1.5vh}
 .canvas-grid{margin-right:18px}
 .monitor-number{width:clamp(95px,8.5vw,140px);height:clamp(62px,6.3vw,100px)}
 .preset-toolbar{margin-top:2.5vh;margin-bottom:2.6vh}
 .chord-hero{padding-top:5vh;padding-right:12.4vw}
 .download-main{margin-top:2.6vh}
}
@media(prefers-reduced-motion:no-preference){
 .chapter-heading{animation:heading-in .7s var(--ease) both}
 dialog[open]{animation:dialog-in .28s var(--ease) both}
 .faq details[open]>div{animation:details-in .25s var(--ease)}
 .preset-card .monitor-diagram{transition:transform .35s var(--ease)}
 .preset-card:hover .monitor-diagram{transform:translateY(-3px)}
 @supports(animation-timeline:view()){
  .chapter-heading,.preset-toolbar,.chord-hero,.download-main{animation:section-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 65%}
  .workspace .chapter-heading{animation:heading-in .7s var(--ease) both}
 }
}
@keyframes heading-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes section-reveal{from{opacity:.15;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@keyframes details-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(max-width:560px){.monitor-number{width:55px;height:30px}.monitor-meta{font-size:11px;line-height:1.3}.monitor-meta small{display:none}.monitor-primary{font-size:9px;min-height:10px;line-height:1;margin-top:1px}.monitor-name{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.chapter-number{display:flex;align-items:center;justify-content:center;left:5.5%;width:89%}
.chapter-number{--number-height:min(24vh,14vw)}
.chapter-number img{display:block;width:auto;height:calc(var(--number-height) * var(--art-height-ratio));max-width:none;flex-shrink:0;filter:brightness(0);user-select:none}
@media(max-width:900px){.chapter-number{display:none}}
@media(min-width:901px){
 .rail{padding-top:40px}
 .brand{display:grid;grid-template-columns:40px auto;column-gap:12px;row-gap:12px;align-items:center}
 .brand img{width:40px;height:40px}
 .brand-name{font-size:36px;line-height:1.15;letter-spacing:-.04em;margin:0;font-weight:800}
 .brand-tagline{grid-column:1/-1;font-size:15px;line-height:1.5;letter-spacing:.08em;margin:0;font-weight:500}
}
.group-menu{position:relative}.topbar .group-menu>button{color:var(--acid)}#group-panel{position:absolute;right:0;top:100%;width:344px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 90px);overflow:auto;padding:14px;background:#191919;border:1px solid var(--acid);box-shadow:0 20px 60px #0008;text-align:center}#group-panel img{display:block;width:100%;height:auto}#group-panel p{font-size:14px;margin:8px 0;color:var(--ink)}#group-panel small{font-size:12px;color:var(--muted)}
@media(max-width:900px){.topbar{display:flex;top:80px;right:16px;left:auto;background:var(--bg);padding:6px 10px}.topbar>:not(.group-menu){display:none}.topbar .group-menu>button{font-size:14px}#group-panel{max-height:calc(100dvh - 130px)}}
.faq details:first-child>div{min-height:calc(3.6em + 18px)}
.requirements{grid-template-columns:1fr}.requirements>div{align-items:center;min-height:66px}