@font-face{font-family:"Afterbyte Mono";src:url("../fonts/afterbyte-mono/AfterbyteMono-Regular.woff2?v=4db8f0abaf5adfcb53da8fce748e42944a501cfa") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:light;--bg:#fff4df;--surface:#fffaf0;--subtle:#f4e6cd;--ink:#29213c;--muted:#65596e;--line:#cdbfab;--accent:#6841c8;--accent-soft:#e6d9ff;--inverse:#fffaf0;--orange:#ff8657;--lime:#d8ef86;--pink:#f4b3cc;--violet:#7654c5;--tile-ink:#29213c;--mono:"Afterbyte Mono",monospace;font:400 14px/1.7 var(--mono);font-synthesis:none;--ease:cubic-bezier(.22,1,.36,1);background:var(--bg);color:var(--ink)}
[data-theme=dark]{color-scheme:dark;--bg:#211b2b;--surface:#2c2438;--subtle:#382d44;--ink:#fff2d7;--muted:#c7b9ca;--line:#65546c;--accent:#c5adff;--accent-soft:#493663;--inverse:#241b32;--orange:#ff936a;--lime:#d8ef86;--pink:#e8a5c1;--violet:#7654c5}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0}a{color:inherit;text-underline-offset:5px}button,input,select,textarea{font:inherit;color:inherit}code{font:inherit}h1,h2,h3,strong{font-weight:400}h1,h2,h3,p,pre{margin:0}button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{border:1px solid var(--line);background:var(--surface);padding:10px 15px;min-height:44px;cursor:pointer;transition:background .4s,border-color .4s,transform .6s var(--ease);border-radius:0}button:hover:not(:disabled){border-color:var(--ink);background:var(--subtle)}button:disabled{cursor:default;opacity:.4}button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,pre:focus-visible{outline:3px solid var(--accent);outline-offset:5px}a:hover{color:var(--accent)}[hidden]{display:none!important}::selection{background:var(--ink);color:var(--bg)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;z-index:100;top:-100px;left:20px;background:var(--ink);color:var(--bg);padding:15px}.skip:focus{top:15px}.content-width{width:min(1320px,calc(100% - 88px));margin-inline:auto}.reading-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:100}.site-header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:17px 3.4vw;border-bottom:1px solid var(--ink);position:relative;z-index:30;background:var(--bg);min-height:82px}.brand{display:flex;align-items:center;gap:12px;font-size:14px;text-decoration:none;white-space:nowrap;letter-spacing:-.4px}.brand>svg{width:34px;height:34px;transform:rotate(-7deg)}.brand svg rect{fill:var(--lime);stroke:var(--tile-ink)}.brand svg path{fill:none;stroke:var(--tile-ink);stroke-width:1.8}.site-header nav{display:flex;gap:28px;font-size:11px}.site-header nav a{min-height:44px;display:flex;align-items:center;white-space:nowrap;text-decoration:none}.header-actions{display:flex;gap:10px}.header-actions button{font-size:10px;min-height:38px;padding:8px 11px}.header-actions #motion{background:none;border:0;color:var(--muted)}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:45px;align-items:center;padding-top:65px;padding-bottom:65px}.eyebrow{font-size:10px;line-height:1.8;letter-spacing:.8px;margin-bottom:25px;color:var(--muted)}.status-dot{display:inline-block;width:7px;height:7px;background:var(--orange);margin-right:8px;border:1px solid var(--ink);transform:rotate(45deg)}h1{font-size:clamp(44px,5vw,76px);line-height:1.18;letter-spacing:-.065em;margin:28px 0 32px}h1 span{display:inline-block;background:var(--lime);color:var(--tile-ink);padding:0 9px 3px;margin-left:-9px;transform:rotate(-2deg)}.hero-description{font-size:17px;line-height:1.8;letter-spacing:-.3px;color:var(--muted)}.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;gap:35px;padding:16px 23px;min-height:54px;background:var(--ink);color:var(--bg);text-decoration:none;font-size:12px;border:1px solid var(--ink);box-shadow:5px 5px 0 var(--orange);transition:transform .55s var(--ease),box-shadow .55s}.button:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--orange);color:var(--bg)}.text-link{font-size:11px;text-decoration:none;border-bottom:1px solid currentColor;display:inline-block;padding-bottom:4px;line-height:1.7}.hero-caption{font-size:9px;line-height:1.9;color:var(--muted);margin-top:32px;letter-spacing:.7px}.hero-visual{min-width:0;position:relative}.letter-board{height:470px;position:relative;overflow:hidden;background:var(--pink);border:1px solid var(--ink);isolation:isolate}.board-label{position:absolute;left:22px;top:18px;z-index:4;font-size:9px;color:var(--tile-ink);letter-spacing:1px}.play-decoration{position:absolute;pointer-events:none}.play-burst{width:210px;height:210px;right:-60px;top:-65px;fill:var(--orange);stroke:var(--tile-ink);stroke-width:.7;animation:play-spin 80s linear infinite}.play-orbit{width:420px;height:420px;left:-140px;bottom:-160px;fill:none;stroke:var(--tile-ink);stroke-width:.7;opacity:.3;animation:play-spin 100s linear reverse infinite}.letter-tile{position:absolute;width:36%;height:42%;min-height:0;padding:0;border:1px solid var(--tile-ink);color:var(--tile-ink);box-shadow:6px 7px 0 #29213c;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;touch-action:none;user-select:none;z-index:3;transform:translate(var(--drag-x,0px),var(--drag-y,0px)) rotate(var(--rotation,0deg));transition:transform 1.2s var(--ease),box-shadow .6s;will-change:auto}.letter-tile:hover:not(:disabled){box-shadow:9px 10px 0 #29213c;border-color:var(--tile-ink)}.letter-tile span{font:clamp(100px,12vw,175px)/1.05 var(--mono);pointer-events:none;letter-spacing:-5px;display:block}.letter-tile small{font-size:7px;letter-spacing:1px;line-height:1.5;pointer-events:none;margin-top:14px}.tile-one{left:9%;top:17%;--rotation:-10deg;background:var(--orange)}.tile-one:hover:not(:disabled){background:var(--orange)}.tile-two{left:49%;top:11%;--rotation:10deg;background:var(--lime);border-radius:50%}.tile-two:hover:not(:disabled){background:var(--lime)}.tile-three{left:33%;top:51%;--rotation:5deg;background:var(--violet);color:#fff7e7}.tile-three:hover:not(:disabled){background:var(--violet)}.letter-tile.dragging{transition:none;cursor:grabbing;z-index:8;box-shadow:10px 12px 0 #29213c55}.letter-tile:focus-visible{outline:3px solid #fff7e7;outline-offset:3px;z-index:8}.board-sticker{position:absolute;right:12px;bottom:25px;background:var(--surface);color:var(--ink);border:1px solid var(--tile-ink);padding:10px;font-size:8px;line-height:1.8;letter-spacing:.4px;transform:rotate(-9deg);z-index:4;pointer-events:none}.board-arrow{position:absolute;left:10px;bottom:16px;width:155px;fill:none;stroke:var(--tile-ink);stroke-width:2;z-index:1}.visual-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px 0 0;font-size:8px;line-height:1.9}.visual-footer p>span{color:var(--muted);font-size:7px}.visual-footer button{font-size:10px;background:var(--lime);color:var(--tile-ink);border:1px solid var(--tile-ink);box-shadow:3px 3px 0 var(--ink);min-height:42px;white-space:nowrap}.visual-footer button:hover{background:var(--lime);transform:translateY(-2px)}.play-ribbon{display:flex;justify-content:center;align-items:center;gap:45px;background:var(--orange);color:var(--tile-ink);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:22px 25px;font-size:18px;line-height:1.5;letter-spacing:-.5px}.play-ribbon svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0;animation:play-spin 70s linear infinite}.specification-rail{display:grid;grid-template-columns:repeat(4,1fr);padding:38px 0;border-bottom:1px solid var(--line)}.specification-rail>div{padding-left:30px;border-left:1px solid var(--line);display:flex;align-items:center;gap:18px}.specification-rail>div:first-child{padding-left:0;border:0}.specification-rail strong{font-size:29px;letter-spacing:-1px;line-height:1.2}.specification-rail span{font-size:8px;color:var(--muted);line-height:1.8;max-width:100px}.section{padding:85px 0;border-bottom:1px solid var(--line)}h2{font-size:clamp(30px,3.8vw,54px);line-height:1.25;letter-spacing:-2px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:35px}.section-head .eyebrow{margin-bottom:18px}.section-note{font-size:11px;line-height:1.9;color:var(--muted)}#font-status{font-size:9px;line-height:1.8;background:var(--lime);color:var(--tile-ink);padding:9px 13px;border:1px solid var(--tile-ink);transform:rotate(2deg)}.sample-buttons{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}.sample-buttons button{font-size:11px;padding:8px 15px;min-height:40px}.sample-buttons [aria-pressed=true]{background:var(--accent);color:var(--inverse);border-color:var(--accent)}#sample{display:block;width:100%;min-height:300px;resize:vertical;border:1px solid var(--ink);background:var(--surface);color:var(--ink);padding:32px;font:64px/1.4 var(--mono);overflow-wrap:anywhere;box-shadow:8px 8px 0 var(--accent-soft)}.controls{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:30px}.controls label{flex:1;min-width:130px;font-size:10px}.controls output{float:right;color:var(--muted)}input[type=range]{display:block;width:100%;min-height:24px;margin-top:12px;accent-color:var(--accent);cursor:pointer}.controls button{font-size:10px}.specimen-options{display:flex;align-items:center;gap:22px;font-size:8px;color:var(--muted);margin-top:23px}.align-buttons{display:flex;gap:5px}.align-buttons button{font-size:9px;padding:7px 13px;min-height:36px}.muted{font-size:10px;line-height:1.9;color:var(--muted);margin-top:20px}.design-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.design-card{border:1px solid var(--tile-ink);padding:25px;min-width:0;color:var(--tile-ink);background:var(--orange)}.design-card:nth-child(2){background:var(--lime)}.design-card:nth-child(3){background:var(--pink)}.card-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:8px}.card-caption svg{width:26px;height:26px;fill:none;stroke:var(--tile-ink);stroke-width:1.2}.character-pair{font-size:110px;line-height:1.7;letter-spacing:-6px;min-height:190px;display:flex;align-items:center;justify-content:center;gap:12px}.character-pair span{opacity:.6}.design-card h3{font-size:15px;letter-spacing:-.4px;margin:10px 0 15px}.design-card p{font-size:11px;line-height:1.9}.anatomy-art{height:190px;display:flex;align-items:center}.anatomy-art svg{width:100%;height:auto}.anatomy-guide{stroke:var(--tile-ink);stroke-width:1;opacity:.4}.anatomy-glyph{fill:var(--tile-ink)}.anatomy-art text{fill:var(--tile-ink);font-size:8px}.slow-dash{stroke:var(--tile-ink);stroke-width:.8;stroke-dasharray:4 5;animation:slow-dash 45s linear infinite}.intro{font-size:12px;line-height:1.9;color:var(--muted);max-width:960px}.coverage-summary{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;margin-top:28px}.coverage-summary button{padding:14px 10px;text-align:left;min-width:0}.coverage-summary span{font-size:8px;line-height:1.6;min-height:26px;display:block}.coverage-summary strong{font-size:21px;margin-top:8px;display:block}.coverage-summary [aria-pressed=true]{background:var(--lime);color:var(--tile-ink);border-color:var(--tile-ink)}.search-controls{display:grid;grid-template-columns:2fr 1fr;gap:25px;margin-top:28px}.search-controls label{font-size:10px}.search-controls input,.search-controls select{display:block;width:100%;min-height:48px;padding:13px 14px;margin-top:9px;font-size:11px;background:var(--surface);border:1px solid var(--line);border-radius:0}.character-workspace{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:start;margin-top:30px}.glyph-inspector{position:sticky;top:25px;padding:22px;border:1px solid var(--ink);background:var(--accent-soft);display:flex;flex-direction:column;align-items:stretch;min-width:0}.inspector-letter{font-size:130px;line-height:1.9;text-align:center;color:var(--ink);border-bottom:1px solid var(--ink);margin-bottom:20px}.glyph-inspector .eyebrow{font-size:7px;display:block;margin-bottom:10px}.glyph-inspector p{font-size:11px;line-height:1.8;overflow-wrap:anywhere}.glyph-inspector #inspector-code{display:block;font-size:9px;line-height:1.9;color:var(--muted);overflow-wrap:anywhere;margin-top:8px}#insert-glyph{font-size:10px;margin-top:24px;border-color:var(--ink);background:var(--ink);color:var(--bg)}.character-results{min-width:0}#coverage-status{font-size:10px;color:var(--muted);margin-bottom:15px;min-height:20px}.glyph-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}.glyph{min-width:0;padding:13px 2px;position:relative;background:var(--surface)}.glyph:hover:not(:disabled){background:var(--lime);color:var(--tile-ink);border-color:var(--tile-ink);transform:translateY(-3px);z-index:1;box-shadow:3px 3px 0 var(--ink)}.glyph span{display:block;font-size:28px;line-height:1.7}.glyph small{display:block;font-size:6px;color:var(--muted);margin-top:7px}.glyph:hover small{color:var(--tile-ink)}.glyph[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.glyph[aria-pressed=true] small{color:var(--bg)}.pagination{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:24px;font-size:10px}.pagination button{font-size:10px;min-height:40px}.fallback-note{display:flex;align-items:center;gap:20px;max-width:560px;margin-top:30px;padding:16px 22px;border:1px solid var(--line);background:var(--surface)}.fallback-note svg{width:50px;height:60px;fill:var(--muted);flex-shrink:0}.fallback-note strong{font-size:10px}.fallback-note p{font-size:9px;line-height:1.9;color:var(--muted);margin-top:5px}.preview-switch{display:flex;gap:5px;border:1px solid var(--ink);padding:4px}.preview-switch button{font-size:10px;min-height:36px;padding:7px 13px;border-color:transparent;background:transparent}.preview-switch [aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.application-window{border:1px solid var(--ink);background:var(--surface);box-shadow:9px 9px 0 var(--pink)}.window-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:8px;padding:18px 24px;color:var(--tile-ink);background:var(--pink);border-bottom:1px solid var(--ink)}.window-dots{display:flex;gap:6px}.window-dots i{width:6px;height:6px;background:var(--tile-ink);border-radius:50%}.preview-panel{display:grid;grid-template-columns:190px 1fr;min-height:440px}.interface-sidebar{display:flex;flex-direction:column;gap:24px;border-right:1px solid var(--line);padding:35px 28px;font-size:11px;color:var(--muted)}.interface-logo{font-size:30px;color:var(--accent);line-height:1.2;margin-bottom:20px}.interface-sidebar span:nth-child(2){color:var(--accent)}.interface-main{padding:35px 40px}.interface-main .eyebrow{font-size:8px}.interface-main h3{font-size:25px;line-height:1.4;letter-spacing:-1px}.interface-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:30px 0 12px}.interface-metrics span{display:block;font-size:8px;color:var(--muted);margin-bottom:10px}.interface-metrics strong{font-size:30px}.interface-chart{width:100%;height:90px;display:block;margin:12px 0 20px}.chart-grid{stroke:var(--line);stroke-width:.8;fill:none}.chart-line{stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.chart-point{stroke:var(--accent);stroke-width:1.5;fill:var(--surface)}.interface-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:15px;border-top:1px solid var(--line);padding:14px 0;font-size:10px;color:var(--muted)}.interface-row span:last-child{text-align:right}.code-sidebar{padding:35px 28px;border-right:1px solid var(--line);background:var(--subtle);font-size:10px;color:var(--muted);line-height:1.9;white-space:pre}.application-code{padding:35px 40px;font:13px/2 var(--mono);min-width:0;overflow:auto}.code-comment{color:var(--muted)}.code-accent{color:var(--accent)}.code-string{color:var(--ink)}.editorial-meta{padding:40px 25px;border-right:1px solid var(--line);font-size:9px;color:var(--muted);line-height:2}.editorial-copy{padding:40px;background:var(--lime);color:var(--tile-ink)}.editorial-copy h3{font-size:50px;line-height:1.3;letter-spacing:-2px}.editorial-copy p{font-size:13px;line-height:1.9;margin:25px 0}.editorial-copy>span{font-size:11px;line-height:1.9}.use{display:grid;grid-template-columns:1fr 1fr;gap:60px}.use>div>p:not(.eyebrow){font-size:12px;line-height:1.9;color:var(--muted);margin-top:24px}.actions{display:flex;align-items:center;gap:23px;flex-wrap:wrap;margin-top:30px}.format-downloads{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:30px}.format-downloads a{padding:18px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:background .4s,border-color .4s}.format-downloads a:hover{background:var(--accent-soft);border-color:var(--ink)}.format-downloads strong{display:block;font-size:15px;margin-bottom:8px}.format-downloads span{font-size:9px;color:var(--muted)}.code-card{background:var(--surface);border:1px solid var(--ink);align-self:start;padding:24px;min-width:0;box-shadow:7px 7px 0 var(--lime)}.code-head{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:9px;color:var(--muted)}.code-head button{font-size:10px;min-height:40px}.code-card pre{overflow:auto;font:12px/1.9 var(--mono);margin-top:25px}.code-card p{font-size:9px;line-height:1.9;color:var(--muted);margin-top:20px}.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:65px}.faq details{border-bottom:1px solid var(--line);padding:23px 0}.faq details:first-child{padding-top:0}.faq summary{font-size:12px;line-height:1.8;min-height:30px;cursor:pointer;padding-right:15px}.faq summary::marker{color:var(--accent)}.faq details p{font-size:11px;line-height:1.9;color:var(--muted);margin-top:20px}.closing-section{margin:70px 0;background:var(--violet);color:#fff4df;padding:55px;position:relative;overflow:hidden;border:1px solid var(--ink)}.closing-section>div{position:relative;z-index:1}.closing-section h2{font-size:clamp(30px,4.4vw,60px);line-height:1.25;letter-spacing:-2px}.closing-section .eyebrow{color:#fff4df;font-size:9px}.closing-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:30px}.closing-section .button{background:var(--lime);color:var(--tile-ink);border-color:var(--tile-ink);box-shadow:5px 5px 0 var(--tile-ink)}.closing-section .text-link{color:#fff4df}.closing-graphic{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#fff4df;stroke-width:1;opacity:.12}.slow-orbit{stroke-dasharray:5 15;transform-origin:1000px 160px;animation:play-spin 90s linear infinite}footer{border-top:1px solid var(--ink);padding:35px 0 40px;display:flex;align-items:flex-start;justify-content:space-between;gap:25px;flex-wrap:wrap}.footer-brand{font-size:17px;text-decoration:none}footer p{font-size:8px;color:var(--muted);line-height:1.8;margin-top:12px}footer nav{display:flex;align-items:center;gap:24px;font-size:10px}footer nav a{display:flex;align-items:center;min-height:44px;text-decoration:none}footer button{font-size:9px}#share-status{width:100%;margin:0;font-size:10px}.theme-changing body,.theme-changing .site-header,.theme-changing button,.theme-changing input,.theme-changing textarea,.theme-changing select,.theme-changing .code-card,.theme-changing .application-window,.theme-changing .glyph-inspector{transition:background-color .6s,color .6s,border-color .6s}.motion-paused *,.motion-paused *:before,.motion-paused *:after,.offscreen *,.offscreen{animation-play-state:paused!important}.motion-paused{scroll-behavior:auto}
@keyframes play-spin{to{rotate:360deg}}@keyframes slow-dash{to{stroke-dashoffset:90}}
@media(max-width:1100px){.content-width{width:calc(100% - 60px)}.site-header{padding-inline:28px;gap:20px}.brand{font-size:12px}.site-header nav{gap:18px;font-size:10px}.header-actions button{font-size:9px;padding:8px 10px}.hero{gap:30px}.hero h1{font-size:4.9vw}.hero-description{font-size:15px}.letter-board{height:420px}.letter-tile span{font-size:130px}.board-sticker{font-size:7px;padding:8px;right:8px;bottom:15px}.play-ribbon{font-size:14px;gap:25px}.specification-rail>div{padding-left:20px;gap:12px}.specification-rail strong{font-size:25px}.specification-rail span{font-size:7px}.design-grid{gap:14px}.design-card{padding:20px}.design-card h3{font-size:13px}.design-card p{font-size:10px}.character-pair{font-size:85px}.coverage-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.character-workspace{grid-template-columns:220px 1fr;gap:20px}.glyph-inspector{padding:18px}.glyph-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.use,.faq{gap:35px}.preview-panel{grid-template-columns:155px 1fr}.interface-main{padding:30px}.interface-sidebar{padding:30px 22px}.code-sidebar{padding:30px 20px}.application-code{padding:30px;font-size:11px}.editorial-copy{padding:30px}.editorial-copy h3{font-size:40px}.editorial-meta{padding:30px 20px;font-size:8px}}
@media(max-width:900px){.site-header{flex-wrap:wrap;gap:8px 20px}.site-header nav{order:3;width:100%;justify-content:center;gap:35px}.site-header nav a{min-height:32px}.header-actions{margin-left:auto}.hero{grid-template-columns:1fr;gap:45px;padding-top:45px}.hero-copy{text-align:center}.hero h1{font-size:clamp(44px,7.7vw,70px)}.hero-description{font-size:17px}.hero-actions{justify-content:center}.hero-visual{width:min(570px,100%);margin:auto}.letter-board{height:490px}.letter-tile span{font-size:175px}.board-sticker{font-size:8px}.hero-caption{font-size:9px}.specification-rail>div{flex-direction:column;align-items:flex-start;gap:8px}.specification-rail span{max-width:none}.section{padding:65px 0}.design-grid{grid-template-columns:1fr}.design-card{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-items:center;padding:28px}.card-caption{grid-column:1/-1}.character-pair,.anatomy-art{grid-row:2/4;min-height:170px}.design-card h3{font-size:15px;align-self:end;margin-top:25px}.design-card p{align-self:start;font-size:11px;margin-top:10px}.character-workspace{grid-template-columns:200px 1fr}.glyph-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.inspector-letter{font-size:100px}.use,.faq{grid-template-columns:1fr;gap:35px}.code-card{width:100%}.faq-list{width:100%}.closing-section{padding:45px}.closing-graphic{width:160%;left:-20%}.closing-section h2{font-size:5vw}}
@media(max-width:650px){html{scroll-padding-top:24px}.content-width{width:calc(100% - 36px)}.site-header{padding:12px 18px;gap:10px 15px}.brand{font-size:11px;gap:8px}.brand>svg{width:28px;height:28px}.brand-muted{display:none}.header-actions button{font-size:8px;padding:7px 9px;min-height:36px}.site-header nav{gap:30px;font-size:9px}.site-header nav a{min-height:30px}.hero{padding-top:40px;padding-bottom:40px;gap:35px}.hero .eyebrow{font-size:8px;letter-spacing:.4px}.hero h1{font-size:clamp(32px,8.1vw,50px);line-height:1.3;letter-spacing:-1.9px;margin:20px 0 25px}.hero-description{font-size:13px;line-height:1.8}.hero-actions{gap:22px;margin-top:26px}.button{font-size:11px;padding:13px 18px;min-height:48px;gap:25px}.text-link{font-size:10px}.hero-caption{font-size:7px;margin-top:27px}.letter-board{height:340px}.board-label{font-size:7px;left:16px;top:14px}.letter-tile{width:37%;height:40%;box-shadow:4px 5px 0 #29213c}.letter-tile span{font-size:100px;letter-spacing:-3px}.letter-tile small{font-size:5px;letter-spacing:.6px;margin-top:10px}.tile-one{left:8%;top:18%}.tile-two{left:52%;top:12%}.tile-three{left:34%;top:54%}.board-sticker{font-size:5px;line-height:1.9;padding:7px;bottom:15px;right:8px}.play-burst{width:150px;height:150px;right:-45px;top:-45px}.play-orbit{width:300px;height:300px;left:-90px;bottom:-100px}.board-arrow{width:110px;left:5px;bottom:20px}.visual-footer{font-size:6px;padding-top:17px;gap:12px}.visual-footer p>span{font-size:6px}.visual-footer button{font-size:8px;padding:8px 11px;min-height:40px}.play-ribbon{gap:18px;padding:18px;font-size:11px;justify-content:space-between}.play-ribbon>span:last-child{display:none}.play-ribbon svg{width:28px;height:28px}.specification-rail{grid-template-columns:1fr 1fr;gap:22px 0;padding:28px 0}.specification-rail>div{padding-left:20px;flex-direction:row;align-items:center;gap:15px}.specification-rail>div:nth-child(odd){padding-left:0;border-left:0}.specification-rail strong{font-size:23px;min-width:65px}.specification-rail span{font-size:7px;max-width:75px}.section{padding:50px 0}.section-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:25px}.section-head .eyebrow{font-size:8px;margin-bottom:14px}h2{font-size:29px;letter-spacing:-1.3px;line-height:1.3}.section-note{font-size:10px}#font-status{font-size:8px;padding:8px 10px}.sample-buttons{gap:5px;margin-bottom:16px}.sample-buttons button{font-size:8px;padding:8px 10px;min-height:36px}#sample{font-size:36px;min-height:230px;padding:23px 15px;box-shadow:5px 5px 0 var(--accent-soft)}.controls{gap:20px}.controls label{font-size:9px;min-width:120px}.controls button{font-size:9px;min-height:40px}.specimen-options{font-size:7px;gap:16px}.align-buttons button{font-size:8px;padding:6px 11px;min-height:34px}.muted{font-size:9px;line-height:1.9}.design-card{padding:22px;gap:0 20px}.card-caption{font-size:7px}.card-caption svg{width:23px;height:23px}.character-pair{font-size:62px;gap:8px;letter-spacing:-3px;min-height:140px}.anatomy-art{min-height:140px;height:140px}.design-card h3{font-size:12px;line-height:1.7;margin-top:20px}.design-card p{font-size:9px;line-height:1.9}.intro{font-size:10px;line-height:1.9}.coverage-summary{gap:6px;margin-top:22px}.coverage-summary button{padding:12px 9px}.coverage-summary span{font-size:8px;min-height:26px}.coverage-summary strong{font-size:17px;margin-top:7px}.search-controls{grid-template-columns:1fr;gap:17px;margin-top:22px}.search-controls label{font-size:9px}.search-controls input,.search-controls select{font-size:10px;margin-top:8px}.character-workspace{grid-template-columns:1fr;gap:20px;margin-top:24px}.glyph-inspector{position:static;display:grid;grid-template-columns:95px 1fr;padding:16px;gap:15px;align-items:center}.inspector-letter{font-size:72px;line-height:1.5;border:0;margin:0;min-width:0}.glyph-inspector>div:nth-child(2){min-width:0}.glyph-inspector .eyebrow{font-size:6px;margin-bottom:8px}.glyph-inspector p{font-size:9px;line-height:1.8}.glyph-inspector #inspector-code{font-size:8px}#insert-glyph{grid-column:1/-1;margin-top:0;font-size:9px}.glyph-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.glyph{padding:10px 2px}.glyph span{font-size:26px}.glyph small{font-size:6px}#coverage-status{font-size:9px;line-height:1.8}.pagination{gap:10px;font-size:9px}.pagination button{font-size:9px;padding:8px 10px;min-height:40px}.fallback-note{padding:14px;gap:15px}.fallback-note p{font-size:8px}.preview-switch{gap:4px}.preview-switch button{font-size:9px;padding:6px 12px;min-height:34px}.window-toolbar{font-size:6px;gap:10px;padding:14px}.window-toolbar>span:last-child{display:none}.window-dots{gap:4px}.window-dots i{width:5px;height:5px}.preview-panel{grid-template-columns:1fr;min-height:390px}.interface-sidebar,.code-sidebar,.editorial-meta{display:none}.interface-main{padding:25px 20px}.interface-main .eyebrow{font-size:6px}.interface-main h3{font-size:19px}.interface-metrics{gap:15px;margin-top:26px}.interface-metrics span{font-size:6px}.interface-metrics strong{font-size:25px}.interface-chart{height:80px}.interface-row{font-size:8px;gap:10px;grid-template-columns:1.6fr 1fr .6fr}.application-code{font-size:10px;padding:25px 20px;line-height:2}.editorial-copy{padding:28px 22px}.editorial-copy h3{font-size:34px;letter-spacing:-1px}.editorial-copy p{font-size:10px;line-height:1.9}.editorial-copy>span{font-size:8px}.use>div>p:not(.eyebrow){font-size:10px;margin-top:20px}.actions{gap:18px}.format-downloads{gap:8px;margin-top:25px}.format-downloads a{padding:15px}.format-downloads strong{font-size:13px}.format-downloads span{font-size:8px}.code-card{padding:18px}.code-head{font-size:7px}.code-head button{font-size:9px}.code-card pre{font-size:10px;line-height:1.9}.code-card p{font-size:8px}.faq summary{font-size:11px}.faq details p{font-size:10px;line-height:1.9}.faq details{padding:21px 0}.closing-section{margin:45px 0;padding:35px 24px}.closing-section h2{font-size:5.1vw;letter-spacing:-1px}.closing-section .eyebrow{font-size:7px}.closing-actions{gap:20px;margin-top:25px}.closing-actions .text-link{font-size:8px}.closing-graphic{width:260%;left:-85%;opacity:.1}footer{padding:26px 0 30px;gap:22px}.footer-brand{font-size:13px}footer p{font-size:7px}footer nav{gap:20px;font-size:9px;flex-wrap:wrap}footer nav a{min-height:35px}footer button{font-size:8px;min-height:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

button[aria-pressed=true]:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.letter-feedback{position:absolute;top:calc(100% + 8px);left:0;font-size:9px;line-height:1.7;color:var(--muted);width:100%;pointer-events:none}
@media(max-width:650px){.letter-feedback{font-size:8px}}
/* A theme-matched listbox replaces the platform popup after JS initializes. */
.group-field>label{display:block;font-size:10px}.group-picker{position:relative;margin-top:9px}.group-picker #group-trigger{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:16px;font-size:11px;background:var(--surface);border-color:var(--line)}#group-trigger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;flex-shrink:0;transition:transform .4s}#group-trigger[aria-expanded=true]{border-color:var(--ink)}#group-trigger[aria-expanded=true] svg{transform:rotate(180deg)}#group-options{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:275px;overflow-y:auto;z-index:40;margin:0;padding:6px;list-style:none;background:var(--surface);color:var(--ink);border:1px solid var(--ink);box-shadow:5px 5px 0 var(--accent-soft)}#group-options li{padding:12px 13px;font-size:11px;line-height:1.7;border:1px solid transparent;cursor:pointer}#group-options li:hover,#group-options .active-option{background:var(--subtle);border-color:var(--line)}#group-options [aria-selected=true]{background:var(--lime);color:var(--tile-ink);border-color:var(--tile-ink)}
.letter-variants{margin-top:28px;padding:22px;border:1px solid var(--line);background:var(--surface)}.variants-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:18px}.variants-head h3{font-size:14px;letter-spacing:.4px}.variants-head p,.variant-note{font-size:9px;line-height:1.8;color:var(--muted)}.variant-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.variant-card{min-width:0;padding:12px 5px;text-align:center}.variant-character{display:block;font-size:40px;line-height:1.7}.variant-label{display:block;font-size:8px;line-height:1.6;min-height:28px;margin:8px 0}.variant-card small{display:block;font-size:7px;color:var(--muted)}.variant-card[aria-pressed=true] small{color:var(--bg)}.variant-note{margin-top:16px}.inspector-style{display:inline-block;align-self:start;padding:4px 8px;background:var(--ink);color:var(--bg);font-size:8px;line-height:1.6;margin-bottom:12px}
.preview-switch [aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.preview-switch [aria-selected=true]:hover{background:var(--ink);color:var(--bg)}.interface-sidebar button{font-size:11px;min-height:36px;text-align:left;padding:7px 10px;background:transparent;border-color:transparent}.interface-sidebar button[aria-pressed=true]{background:var(--accent-soft);color:var(--ink);border-color:var(--line)}.interface-view{margin-top:26px}.interface-view .interface-metrics{margin-top:0}.activity-item{display:flex;gap:25px;padding:20px 0;border-bottom:1px solid var(--line);font-size:11px;line-height:1.8}.activity-item>span{font-size:10px;color:var(--muted)}.activity-item small{display:block;font-size:9px;color:var(--muted);margin-top:7px}.demo-intro{font-size:11px;line-height:1.9;color:var(--muted);margin:20px 0}.interface-view>button{font-size:10px;margin-top:25px}.interface-view [role=status]{font-size:10px;margin-top:15px;line-height:1.8;color:var(--muted)}.demo-label{display:block;font-size:10px}.demo-label input{width:100%;display:block;margin-top:10px;padding:12px;border:1px solid var(--line);background:var(--surface);font-size:12px}.demo-check{display:flex;align-items:center;gap:12px;font-size:11px;margin-top:20px}.demo-check input{accent-color:var(--accent);width:17px;height:17px}.compact-rows .interface-row{padding:6px 0}.code-demo{min-width:0;padding:24px}.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:9px;color:var(--muted)}.demo-toolbar>div{display:flex;gap:7px}.demo-toolbar button{font-size:9px;padding:7px 10px;min-height:36px}.code-demo .application-code{display:block;width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:12px/1.9 var(--mono);padding:20px;margin-top:18px;min-height:350px;resize:vertical}.code-demo>p{font-size:9px;line-height:1.9;color:var(--muted);margin-top:14px}.editorial-copy .demo-label{font-size:8px;margin-bottom:12px;color:var(--tile-ink)}#editorial-headline,#editorial-body{display:block;width:100%;background:transparent;color:var(--tile-ink);border:1px dashed #29213c66;border-radius:0;resize:vertical;padding:10px;font-family:var(--mono)}#editorial-headline{font-size:clamp(25px,3.5vw,48px);line-height:1.3;letter-spacing:-1.5px;min-height:150px}#editorial-body{font-size:13px;line-height:1.9;min-height:100px;margin:18px 0}.editorial-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.editorial-tools button{font-size:9px;min-height:37px;padding:7px 10px;background:#fff4df;color:#29213c;border-color:#29213c}.editorial-copy #editorial-status{font-size:9px;line-height:1.8;color:var(--tile-ink);margin:16px 0 0}
/* The scrolling mechanism stays native; its track and thumb use the site palette. */
*{scrollbar-color:var(--accent) var(--subtle);scrollbar-width:thin}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:var(--subtle)}::-webkit-scrollbar-thumb{background:var(--accent);border:3px solid var(--subtle);border-radius:0}::-webkit-scrollbar-corner{background:var(--subtle)}
@media(max-width:1100px){.variant-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:650px){.group-field>label{font-size:9px}.group-picker #group-trigger,#group-options li{font-size:10px}.variants-head{flex-direction:column;gap:10px}.letter-variants{padding:16px}.variant-grid{gap:6px}.variant-character{font-size:32px}.variant-label{font-size:7px}.variant-card small{font-size:6px}.inspector-style{font-size:7px}.interface-sidebar{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;padding:15px;border-right:0;border-bottom:1px solid var(--line)}.interface-sidebar .interface-logo{display:none}.interface-sidebar button{font-size:9px;flex:1;padding:7px;white-space:nowrap}.activity-item{gap:15px;font-size:10px}.activity-item small{font-size:8px}.code-demo{padding:18px}.demo-toolbar{align-items:flex-start;flex-direction:column;gap:12px;font-size:8px}.code-demo .application-code{font-size:10px;padding:15px;min-height:330px}.code-demo>p{font-size:8px}.demo-label{font-size:9px}.demo-label input{font-size:11px}.demo-check{font-size:10px}.demo-intro{font-size:10px}#editorial-headline{font-size:30px;min-height:130px}#editorial-body{font-size:10px;min-height:110px}.editorial-tools button{font-size:8px}.editorial-copy #editorial-status{font-size:8px}}

@media(hover:hover) and (pointer:fine){html,body{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4%203v24l6-7%205%2010%205-3-5-9h11Z%22%20fill%3D%22%23d8ef86%22%20stroke%3D%22%2329213c%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 4 3,auto}a,button,summary,[role=option],input[type=range],label{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%20fill%3D%22%23f4b3cc%22%20stroke%3D%22%2329213c%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M16%209v14M9%2016h14%22%20stroke%3D%22%2329213c%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E") 16 16,pointer}textarea,input[type=text],input[type=search]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2232%22%20viewBox%3D%220%200%2024%2032%22%3E%3Cpath%20d%3D%22M7%204h10M12%204v24M7%2028h10%22%20fill%3D%22none%22%20stroke%3D%22%23fff4df%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M7%204h10M12%204v24M7%2028h10%22%20fill%3D%22none%22%20stroke%3D%22%236841c8%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") 12 16,text}.letter-tile{cursor:grab}.letter-tile.dragging{cursor:grabbing}}
@media(forced-colors:active){html,body,a,button,input,textarea,summary,[role=option],label{cursor:auto;scrollbar-color:auto}}

/* Repository support link follows the specimen palette in both themes. */
.header-actions{display:flex;align-items:center;gap:10px}.github-stars{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 12px;border:1px solid var(--line);background:var(--surface);text-decoration:none;font-size:10px;white-space:nowrap}.github-stars svg{width:15px;height:15px;fill:var(--lime);stroke:var(--ink);stroke-width:1.5}.github-stars:hover{color:var(--ink);border-color:var(--ink);background:var(--subtle)}#github-star-count{border-left:1px solid var(--line);padding-left:8px;font-size:9px}@media(max-width:650px){.header-actions{gap:6px}.github-stars{font-size:8px;min-height:36px;padding:7px 8px;gap:5px}.github-stars svg{width:12px;height:12px}#github-star-count{font-size:8px;padding-left:5px}.site-header .brand{font-size:10px;gap:6px}.site-header .brand>svg{width:24px;height:24px}}


.full-keyboard [data-code="Escape"]{left:0.000000%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F1"]{left:8.695652%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F2"]{left:13.043478%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F3"]{left:17.391304%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F4"]{left:21.739130%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F5"]{left:28.260870%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F6"]{left:32.608696%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F7"]{left:36.956522%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F8"]{left:41.304348%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F9"]{left:47.826087%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F10"]{left:52.173913%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F11"]{left:56.521739%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="F12"]{left:60.869565%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="PrintScreen"]{left:67.391304%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="ScrollLock"]{left:71.739130%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Pause"]{left:76.086957%;top:0.000000%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Backquote"]{left:0.000000%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Digit1"]{left:4.347826%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Digit2"]{left:8.695652%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Digit3"]{left:13.043478%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Digit4"]{left:17.391304%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Digit5"]{left:21.739130%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Digit6"]{left:26.086957%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Digit7"]{left:30.434783%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Digit8"]{left:34.782609%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Digit9"]{left:39.130435%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Digit0"]{left:43.478261%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Minus"]{left:47.826087%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Equal"]{left:52.173913%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Backspace"]{left:56.521739%;top:23.076923%;width:calc(8.695652% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Tab"]{left:0.000000%;top:38.461538%;width:calc(6.521739% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyQ"]{left:6.521739%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyW"]{left:10.869565%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyE"]{left:15.217391%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyR"]{left:19.565217%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyT"]{left:23.913043%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyY"]{left:28.260870%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyU"]{left:32.608696%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyI"]{left:36.956522%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyO"]{left:41.304348%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyP"]{left:45.652174%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="BracketLeft"]{left:50.000000%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="BracketRight"]{left:54.347826%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Backslash"]{left:58.695652%;top:38.461538%;width:calc(6.521739% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="CapsLock"]{left:0.000000%;top:53.846154%;width:calc(7.608696% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyA"]{left:7.608696%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyS"]{left:11.956522%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyD"]{left:16.304348%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyF"]{left:20.652174%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyG"]{left:25.000000%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyH"]{left:29.347826%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyJ"]{left:33.695652%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyK"]{left:38.043478%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyL"]{left:42.391304%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Semicolon"]{left:46.739130%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Quote"]{left:51.086957%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Enter"]{left:55.434783%;top:53.846154%;width:calc(9.782609% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="ShiftLeft"]{left:0.000000%;top:69.230769%;width:calc(9.782609% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyZ"]{left:9.782609%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyX"]{left:14.130435%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyC"]{left:18.478261%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyV"]{left:22.826087%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyB"]{left:27.173913%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyN"]{left:31.521739%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="KeyM"]{left:35.869565%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Comma"]{left:40.217391%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Period"]{left:44.565217%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Slash"]{left:48.913043%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="ShiftRight"]{left:53.260870%;top:69.230769%;width:calc(11.956522% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="ControlLeft"]{left:0.000000%;top:84.615385%;width:calc(5.434783% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="MetaLeft"]{left:5.434783%;top:84.615385%;width:calc(5.434783% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="AltLeft"]{left:10.869565%;top:84.615385%;width:calc(5.434783% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Space"]{left:16.304348%;top:84.615385%;width:calc(27.173913% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="AltRight"]{left:43.478261%;top:84.615385%;width:calc(5.434783% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="MetaRight"]{left:48.913043%;top:84.615385%;width:calc(5.434783% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="ContextMenu"]{left:54.347826%;top:84.615385%;width:calc(5.434783% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="ControlRight"]{left:59.782609%;top:84.615385%;width:calc(5.434783% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Insert"]{left:67.391304%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Home"]{left:71.739130%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="PageUp"]{left:76.086957%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Delete"]{left:67.391304%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="End"]{left:71.739130%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="PageDown"]{left:76.086957%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="ArrowUp"]{left:71.739130%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="ArrowLeft"]{left:67.391304%;top:84.615385%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="ArrowDown"]{left:71.739130%;top:84.615385%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="ArrowRight"]{left:76.086957%;top:84.615385%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="NumLock"]{left:82.608696%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="NumpadDivide"]{left:86.956522%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="NumpadMultiply"]{left:91.304348%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="NumpadSubtract"]{left:95.652174%;top:23.076923%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Numpad7"]{left:82.608696%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Numpad8"]{left:86.956522%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Numpad9"]{left:91.304348%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Numpad4"]{left:82.608696%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Numpad5"]{left:86.956522%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Numpad6"]{left:91.304348%;top:53.846154%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Numpad1"]{left:82.608696%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Numpad2"]{left:86.956522%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="Numpad3"]{left:91.304348%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="NumpadAdd"]{left:95.652174%;top:38.461538%;width:calc(4.347826% - 7px);height:calc(30.769231% - 7px)}.full-keyboard [data-code="NumpadEnter"]{left:95.652174%;top:69.230769%;width:calc(4.347826% - 7px);height:calc(30.769231% - 7px)}.full-keyboard [data-code="Numpad0"]{left:82.608696%;top:84.615385%;width:calc(8.695652% - 7px);height:calc(15.384615% - 7px)}.full-keyboard [data-code="NumpadDecimal"]{left:91.304348%;top:84.615385%;width:calc(4.347826% - 7px);height:calc(15.384615% - 7px)}

/* Keyboard studio: a quiet, typography-first instrument. */
.typewriter-section{padding:70px 0;border-bottom:1px solid var(--line)}
.keyboard-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:30px}.keyboard-intro .eyebrow{font-size:8px;color:var(--muted);margin-bottom:14px;letter-spacing:1px}.keyboard-intro h3{font-size:clamp(22px,2.5vw,34px);letter-spacing:-1px;line-height:1.3}.keyboard-hint{font-size:10px;color:var(--muted);line-height:1.9;text-align:right}
.keyboard-writing{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:24px 0 18px;margin-bottom:20px}#keyboard-text{display:block;width:100%;resize:vertical;min-height:130px;max-height:330px;background:transparent;border:0;color:var(--ink);padding:8px 4px;font:clamp(24px,3vw,40px)/1.45 var(--mono);letter-spacing:-1px;outline-offset:4px}#keyboard-text::placeholder{color:var(--muted);opacity:.65}.keyboard-writing-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:15px}.keyboard-writing-footer p{font-size:8px;color:var(--muted)}.keyboard-writing-footer>div{display:flex;gap:16px}.keyboard-writing-footer button{font-size:9px;background:transparent;border:0;border-bottom:1px solid var(--line);padding:4px 0;min-height:32px}.keyboard-writing-footer button:hover{background:transparent;border-color:var(--ink)}.keyboard-target{font-size:11px;line-height:1.9;color:var(--muted);border-left:2px solid var(--accent);padding-left:14px;margin-top:20px}.keyboard-target[data-complete=true]{color:var(--accent)}
.keyboard-scroll{overflow-x:auto;overflow-y:hidden;padding:12px 4px 20px;scrollbar-width:thin;overscroll-behavior-x:contain}.full-keyboard{position:relative;min-width:1120px;max-width:1260px;margin:auto;padding:0 0 8px;border:0;background:transparent;box-shadow:none;isolation:isolate}.keyboard-topline{display:flex;align-items:center;gap:24px;min-height:35px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)}.keyboard-leds{display:flex;gap:25px;margin-right:auto}.keyboard-leds>span{display:flex;align-items:center;gap:7px;font-size:7px;letter-spacing:.7px;color:var(--muted)}.keyboard-leds i{width:4px;height:4px;border:1px solid var(--muted);border-radius:50%}.keyboard-leds [data-on=true]{color:var(--ink)}.keyboard-leds [data-on=true] i{background:var(--accent);border-color:var(--accent)}.lock-state{font:inherit;font-size:6px;opacity:.75}#keyboard-readout{font-size:10px;color:var(--muted);min-width:100px;text-align:right;white-space:pre;max-width:200px;overflow:hidden;text-overflow:ellipsis}.keyboard-sound{min-height:30px;width:32px;padding:5px;border:0;background:transparent;color:var(--muted)}.keyboard-sound svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}.full-keyboard .keyboard-sound:hover,.full-keyboard .keyboard-sound[aria-pressed=true]{background:transparent;color:var(--ink)}.sound-muted{display:none}.keyboard-sound[aria-pressed=true] .sound-muted{display:block}.keyboard-sound[aria-pressed=true] .sound-waves{display:none}
.keyboard-bed{position:relative;width:100%;aspect-ratio:1196/338}.keyboard-linkages,.typewriter-feet{display:none}.full-keyboard .type-key{position:absolute;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:0;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--ink);box-shadow:0 2px 0 var(--line);font:17px/1 var(--mono);user-select:none;touch-action:manipulation;transition:transform .18s ease,border-color .25s,color .25s,box-shadow .18s}.full-keyboard .type-key:hover{border-color:var(--muted);background:transparent;transform:translateY(-1px)}.full-keyboard .type-key.key-down,.full-keyboard .type-key:active{transform:translateY(2px);border-color:var(--accent);color:var(--accent);box-shadow:none;background:transparent}.full-keyboard .type-key[aria-pressed=true]{background:transparent;color:var(--accent);border-color:var(--accent);box-shadow:0 2px 0 var(--accent)}.full-keyboard .key-word{font-size:9px;letter-spacing:0}.full-keyboard .key-primary{padding-top:8px;line-height:1.1}.full-keyboard .key-word .key-primary{padding-top:0}.full-keyboard .key-secondary{position:absolute;top:6px;right:7px;font-size:6px;line-height:1;color:var(--muted);opacity:.75}.full-keyboard .key-secondary:empty{display:none}.full-keyboard [data-code=Space] .key-primary{font-size:7px;letter-spacing:3px}.full-keyboard [data-code^=Numpad] .key-primary{padding-top:8px}.key-indicator{display:none;position:absolute;bottom:6px;left:7px;width:3px;height:3px;border-radius:50%;border:1px solid var(--muted)}.type-key[data-kind=lock] .key-indicator,.type-key[data-kind=modifier] .key-indicator{display:block}.type-key[aria-pressed=true] .key-indicator{background:var(--accent);border-color:var(--accent)}.arrow-key-art{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.full-keyboard [data-code^=Arrow] .key-primary{padding:0}.full-keyboard .type-key:focus-visible,.full-keyboard:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:650px){.typewriter-section{padding:45px 0}.keyboard-intro{align-items:flex-start;flex-direction:column;gap:14px}.keyboard-hint{text-align:left;font-size:9px}.keyboard-intro .eyebrow{font-size:7px}#keyboard-text{min-height:130px}.keyboard-writing-footer{align-items:flex-start;gap:15px}.keyboard-writing-footer>div{gap:13px}.keyboard-writing-footer button{font-size:8px}.keyboard-writing-footer p{font-size:7px;line-height:1.8}.keyboard-scroll{margin-inline:-4px}.keyboard-target{font-size:10px}}
@media(prefers-reduced-motion:reduce){.full-keyboard .type-key{transition:none}}@media(forced-colors:active){.full-keyboard .type-key{border-color:ButtonText;box-shadow:none}.full-keyboard .type-key[aria-pressed=true]{border-color:Highlight;color:Highlight}}

/* Portrait layout: all 104 keys reflow into the available screen width. */
@media(max-width:850px){
 .keyboard-scroll{overflow:visible;margin-inline:0;padding:12px 0 20px}
 .full-keyboard{min-width:0;max-width:100%;width:100%}
 .keyboard-bed{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(8,44px) 14px 44px 44px 14px repeat(5,44px);gap:6px 4px;aspect-ratio:auto;width:100%}
 .full-keyboard .keyboard-bed .type-key{position:relative;left:auto;top:auto;width:auto;height:auto;min-width:0;min-height:0;border-radius:5px;font-size:15px}
 .full-keyboard .keyboard-bed .key-word{font-size:8px;letter-spacing:-.25px}
 .full-keyboard .key-secondary{top:5px;right:4px;font-size:6px}
 .full-keyboard .key-indicator{bottom:4px;left:4px;width:2px;height:2px}
 .full-keyboard .key-primary{padding-top:7px}
 .full-keyboard [data-code=Space] .key-primary{font-size:7px;letter-spacing:2px}
 .keyboard-topline{gap:8px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px}
 .keyboard-leds{gap:12px;flex:1 1 auto}
 .keyboard-leds>span{gap:4px;font-size:6px;letter-spacing:0}
 #keyboard-readout{min-width:0;max-width:90px;font-size:8px}
 .keyboard-sound{width:28px;min-height:32px;padding:5px}
 .full-keyboard [data-code="Digit1"]{grid-row:1/span 1;grid-column:1/span 1}
 .full-keyboard [data-code="Digit2"]{grid-row:1/span 1;grid-column:2/span 1}
 .full-keyboard [data-code="Digit3"]{grid-row:1/span 1;grid-column:3/span 1}
 .full-keyboard [data-code="Digit4"]{grid-row:1/span 1;grid-column:4/span 1}
 .full-keyboard [data-code="Digit5"]{grid-row:1/span 1;grid-column:5/span 1}
 .full-keyboard [data-code="Digit6"]{grid-row:1/span 1;grid-column:6/span 1}
 .full-keyboard [data-code="Digit7"]{grid-row:1/span 1;grid-column:7/span 1}
 .full-keyboard [data-code="Digit8"]{grid-row:1/span 1;grid-column:8/span 1}
 .full-keyboard [data-code="Digit9"]{grid-row:1/span 1;grid-column:9/span 1}
 .full-keyboard [data-code="Digit0"]{grid-row:1/span 1;grid-column:10/span 1}
 .full-keyboard [data-code="KeyQ"]{grid-row:2/span 1;grid-column:1/span 1}
 .full-keyboard [data-code="KeyW"]{grid-row:2/span 1;grid-column:2/span 1}
 .full-keyboard [data-code="KeyE"]{grid-row:2/span 1;grid-column:3/span 1}
 .full-keyboard [data-code="KeyR"]{grid-row:2/span 1;grid-column:4/span 1}
 .full-keyboard [data-code="KeyT"]{grid-row:2/span 1;grid-column:5/span 1}
 .full-keyboard [data-code="KeyY"]{grid-row:2/span 1;grid-column:6/span 1}
 .full-keyboard [data-code="KeyU"]{grid-row:2/span 1;grid-column:7/span 1}
 .full-keyboard [data-code="KeyI"]{grid-row:2/span 1;grid-column:8/span 1}
 .full-keyboard [data-code="KeyO"]{grid-row:2/span 1;grid-column:9/span 1}
 .full-keyboard [data-code="KeyP"]{grid-row:2/span 1;grid-column:10/span 1}
 .full-keyboard [data-code="KeyA"]{grid-row:3/span 1;grid-column:1/span 1}
 .full-keyboard [data-code="KeyS"]{grid-row:3/span 1;grid-column:2/span 1}
 .full-keyboard [data-code="KeyD"]{grid-row:3/span 1;grid-column:3/span 1}
 .full-keyboard [data-code="KeyF"]{grid-row:3/span 1;grid-column:4/span 1}
 .full-keyboard [data-code="KeyG"]{grid-row:3/span 1;grid-column:5/span 1}
 .full-keyboard [data-code="KeyH"]{grid-row:3/span 1;grid-column:6/span 1}
 .full-keyboard [data-code="KeyJ"]{grid-row:3/span 1;grid-column:7/span 1}
 .full-keyboard [data-code="KeyK"]{grid-row:3/span 1;grid-column:8/span 1}
 .full-keyboard [data-code="KeyL"]{grid-row:3/span 1;grid-column:9/span 1}
 .full-keyboard [data-code="KeyZ"]{grid-row:4/span 1;grid-column:1/span 1}
 .full-keyboard [data-code="KeyX"]{grid-row:4/span 1;grid-column:2/span 1}
 .full-keyboard [data-code="KeyC"]{grid-row:4/span 1;grid-column:3/span 1}
 .full-keyboard [data-code="KeyV"]{grid-row:4/span 1;grid-column:4/span 1}
 .full-keyboard [data-code="KeyB"]{grid-row:4/span 1;grid-column:5/span 1}
 .full-keyboard [data-code="KeyN"]{grid-row:4/span 1;grid-column:6/span 1}
 .full-keyboard [data-code="KeyM"]{grid-row:4/span 1;grid-column:7/span 1}
 .full-keyboard [data-code="Comma"]{grid-row:4/span 1;grid-column:8/span 1}
 .full-keyboard [data-code="Period"]{grid-row:4/span 1;grid-column:9/span 1}
 .full-keyboard [data-code="Slash"]{grid-row:4/span 1;grid-column:10/span 1}
 .full-keyboard [data-code="Backquote"]{grid-row:5/span 1;grid-column:1/span 1}
 .full-keyboard [data-code="Minus"]{grid-row:5/span 1;grid-column:2/span 1}
 .full-keyboard [data-code="Equal"]{grid-row:5/span 1;grid-column:3/span 1}
 .full-keyboard [data-code="BracketLeft"]{grid-row:5/span 1;grid-column:4/span 1}
 .full-keyboard [data-code="BracketRight"]{grid-row:5/span 1;grid-column:5/span 1}
 .full-keyboard [data-code="Backslash"]{grid-row:5/span 1;grid-column:6/span 1}
 .full-keyboard [data-code="Semicolon"]{grid-row:5/span 1;grid-column:7/span 1}
 .full-keyboard [data-code="Quote"]{grid-row:5/span 1;grid-column:8/span 1}
 .full-keyboard [data-code="Tab"]{grid-row:6/span 1;grid-column:1/span 2}
 .full-keyboard [data-code="CapsLock"]{grid-row:6/span 1;grid-column:3/span 2}
 .full-keyboard [data-code="ShiftLeft"]{grid-row:6/span 1;grid-column:5/span 3}
 .full-keyboard [data-code="ShiftRight"]{grid-row:6/span 1;grid-column:8/span 3}
 .full-keyboard [data-code="ControlLeft"]{grid-row:7/span 1;grid-column:1/span 2}
 .full-keyboard [data-code="MetaLeft"]{grid-row:7/span 1;grid-column:3/span 2}
 .full-keyboard [data-code="AltLeft"]{grid-row:7/span 1;grid-column:5/span 2}
 .full-keyboard [data-code="AltRight"]{grid-row:7/span 1;grid-column:7/span 2}
 .full-keyboard [data-code="MetaRight"]{grid-row:7/span 1;grid-column:9/span 2}
 .full-keyboard [data-code="ControlRight"]{grid-row:8/span 1;grid-column:1/span 1}
 .full-keyboard [data-code="ContextMenu"]{grid-row:8/span 1;grid-column:2/span 1}
 .full-keyboard [data-code="Space"]{grid-row:8/span 1;grid-column:3/span 4}
 .full-keyboard [data-code="Backspace"]{grid-row:8/span 1;grid-column:7/span 2}
 .full-keyboard [data-code="Enter"]{grid-row:8/span 1;grid-column:9/span 2}
 .full-keyboard [data-code="Escape"]{grid-row:10/span 1;grid-column:1/span 1}
 .full-keyboard [data-code="F1"]{grid-row:10/span 1;grid-column:2/span 1}
 .full-keyboard [data-code="F2"]{grid-row:10/span 1;grid-column:3/span 1}
 .full-keyboard [data-code="F3"]{grid-row:10/span 1;grid-column:4/span 1}
 .full-keyboard [data-code="F4"]{grid-row:10/span 1;grid-column:5/span 1}
 .full-keyboard [data-code="F5"]{grid-row:10/span 1;grid-column:6/span 1}
 .full-keyboard [data-code="F6"]{grid-row:10/span 1;grid-column:7/span 1}
 .full-keyboard [data-code="F7"]{grid-row:10/span 1;grid-column:8/span 1}
 .full-keyboard [data-code="F8"]{grid-row:10/span 1;grid-column:9/span 1}
 .full-keyboard [data-code="F9"]{grid-row:10/span 1;grid-column:10/span 1}
 .full-keyboard [data-code="F10"]{grid-row:11/span 1;grid-column:1/span 1}
 .full-keyboard [data-code="F11"]{grid-row:11/span 1;grid-column:2/span 1}
 .full-keyboard [data-code="F12"]{grid-row:11/span 1;grid-column:3/span 1}
 .full-keyboard [data-code="PrintScreen"]{grid-row:11/span 1;grid-column:4/span 2}
 .full-keyboard [data-code="ScrollLock"]{grid-row:11/span 1;grid-column:6/span 2}
 .full-keyboard [data-code="Pause"]{grid-row:11/span 1;grid-column:8/span 3}
 .full-keyboard [data-code="Insert"]{grid-row:13/span 1;grid-column:1/span 2}
 .full-keyboard [data-code="Home"]{grid-row:13/span 1;grid-column:3/span 2}
 .full-keyboard [data-code="PageUp"]{grid-row:13/span 1;grid-column:5/span 2}
 .full-keyboard [data-code="Delete"]{grid-row:14/span 1;grid-column:1/span 2}
 .full-keyboard [data-code="End"]{grid-row:14/span 1;grid-column:3/span 2}
 .full-keyboard [data-code="PageDown"]{grid-row:14/span 1;grid-column:5/span 2}
 .full-keyboard [data-code="ArrowUp"]{grid-row:16/span 1;grid-column:3/span 2}
 .full-keyboard [data-code="ArrowLeft"]{grid-row:17/span 1;grid-column:1/span 2}
 .full-keyboard [data-code="ArrowDown"]{grid-row:17/span 1;grid-column:3/span 2}
 .full-keyboard [data-code="ArrowRight"]{grid-row:17/span 1;grid-column:5/span 2}
 .full-keyboard [data-code="NumLock"]{grid-row:13/span 1;grid-column:7/span 1}
 .full-keyboard [data-code="NumpadDivide"]{grid-row:13/span 1;grid-column:8/span 1}
 .full-keyboard [data-code="NumpadMultiply"]{grid-row:13/span 1;grid-column:9/span 1}
 .full-keyboard [data-code="NumpadSubtract"]{grid-row:13/span 1;grid-column:10/span 1}
 .full-keyboard [data-code="Numpad7"]{grid-row:14/span 1;grid-column:7/span 1}
 .full-keyboard [data-code="Numpad8"]{grid-row:14/span 1;grid-column:8/span 1}
 .full-keyboard [data-code="Numpad9"]{grid-row:14/span 1;grid-column:9/span 1}
 .full-keyboard [data-code="Numpad4"]{grid-row:15/span 1;grid-column:7/span 1}
 .full-keyboard [data-code="Numpad5"]{grid-row:15/span 1;grid-column:8/span 1}
 .full-keyboard [data-code="Numpad6"]{grid-row:15/span 1;grid-column:9/span 1}
 .full-keyboard [data-code="Numpad1"]{grid-row:16/span 1;grid-column:7/span 1}
 .full-keyboard [data-code="Numpad2"]{grid-row:16/span 1;grid-column:8/span 1}
 .full-keyboard [data-code="Numpad3"]{grid-row:16/span 1;grid-column:9/span 1}
 .full-keyboard [data-code="NumpadAdd"]{grid-row:14/span 2;grid-column:10/span 1}
 .full-keyboard [data-code="NumpadEnter"]{grid-row:16/span 2;grid-column:10/span 1}
 .full-keyboard [data-code="Numpad0"]{grid-row:17/span 1;grid-column:7/span 2}
 .full-keyboard [data-code="NumpadDecimal"]{grid-row:17/span 1;grid-column:9/span 1}
}
@media(max-width:360px){.full-keyboard .keyboard-bed .key-word{font-size:7px}.keyboard-leds{gap:8px}.keyboard-leds>span{font-size:5px}.lock-state{font-size:5px}}

/* Keep the interactive keyboard studio on desktop only. */
@media(max-width:850px){.typewriter-section{display:none}}