:root{font-family:Arial,Helvetica,sans-serif;color:#29332d;background:#ecece6;--muted:#7b837b;--orange:#c27918;--green:#3c6754;--line:#cfd3c9;--lcd:#9da985}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 25%,#f8f7f0,transparent 65%);min-height:100vh}button,input,select,textarea{font:inherit;color:inherit}button,.file-button{cursor:pointer}button,a,input,textarea,select,label{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.file-button:focus-within{outline:2px solid #b46b1b;outline-offset:3px}main{max-width:1170px;margin:auto;padding:0 40px}.page-header{height:93px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px}.page-logo{font-size:24px;font-weight:bold;letter-spacing:-1px;color:inherit;text-decoration:none}.page-logo span{font-size:9px;letter-spacing:1px;border:1px solid #ad543a;color:#a04e34;padding:3px 5px;margin-left:5px;vertical-align:middle}.page-edition{font-size:9px;letter-spacing:1.8px;color:var(--muted)}.collection-link{font-size:11px;color:var(--muted);text-decoration:none}.layout{display:grid;grid-template-columns:400px minmax(0,1fr);gap:85px;align-items:start;padding:49px 0 48px}.device-column{container-type:inline-size}.device{position:relative;width:100%;padding:14px 16px 18px;border:2px solid #141917;background:linear-gradient(100deg,#353b38,#131b18 28%,#262d29 96%);border-radius:13px 13px 18px 18px;box-shadow:inset 0 1px 2px #8f9690,0 4px 0 #101613,0 8px 0 #48504a,0 10px 2px #151e18,0 28px 35px #26332933;user-select:none}.display-panel{padding:8px 11px 12px;background:linear-gradient(110deg,#17211d,#0c1411);border:1px solid #434d46;box-shadow:0 0 0 4px #202a24,0 1px 0 5px #0e1510}.brand{display:flex;align-items:baseline;gap:5px;color:#eee9d6;white-space:nowrap;justify-content:space-between;margin:0 -1px 7px}.brand strong{font-size:18px;letter-spacing:-.4px}.brand>span{font-size:5.5px;letter-spacing:.1px}.brand em{font-size:12px;font-family:Georgia,serif}.brand b{font-size:8px;color:#ce322f;border:1px solid #af302c;padding:0 2px;font-weight:normal}.lcd-frame{background:linear-gradient(120deg,#d2d4c5,#e6e4d3,#b8bead);padding:9px 13px 10px;border:1px solid #90988b}.lcd-frame canvas{display:block;width:100%;aspect-ratio:1.5;height:auto;background:var(--lcd);border:2px solid #263321;border-radius:4px;box-shadow:0 2px 4px #0008,inset 0 3px 9px #35432680;image-rendering:pixelated}.mode-legend{font-size:6px;color:#243027;background:#d4d7c6;margin-top:3px;line-height:1.3}.mode-legend>div{display:grid;grid-template-columns:1.25fr repeat(11,1fr);text-align:center;border-top:1px solid #687768;min-height:8px}.mode-legend span{border-left:1px solid #76816f;white-space:nowrap}.mode-legend .contrast{grid-column:span 2}.mode-legend .shift-mode{grid-column:span 2}.mode-legend>div:nth-child(3){background:#303b30;color:#eceedd}.mode-legend>div:nth-child(4){color:#1f563c}.key-panel{background:repeating-linear-gradient(0deg,#fff0 0,#fff0 2px,#a0ab9510 3px),linear-gradient(115deg,#e6e5d5,#d5d9c8 80%,#edf0df);border:1px solid #a2ab97;margin-top:11px;padding:4px 9px 12px;box-shadow:0 1px 2px #ffffff77 inset}.key-grid{display:grid;column-gap:8px}.scientific{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(5,43px)}.numeric{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,54px);column-gap:14px;border-top:1px solid #9fa895;margin-top:5px;padding-top:0}.key{position:relative;min-width:0;min-height:0;padding:12px 0 8px;background:none;border:0;touch-action:manipulation}.key-face{height:23px;background:linear-gradient(#f5ebbe,#e2d9aa);border:2px solid #233028;border-radius:3px;color:#18251d;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #0d1710,0 3px 2px #101c1b77,inset 0 1px 0 #fff8;font-size:11px;font-weight:bold;white-space:nowrap}.key-shift{position:absolute;top:1px;left:-4px;right:-4px;color:#bb6b0c;font-size:7.5px;line-height:10px;white-space:nowrap}.key-alpha{position:absolute;right:1px;bottom:-1px;font-size:7px;color:#b84543;line-height:8px}.key-mode{position:absolute;left:0;bottom:-1px;color:#247944;font-size:6.5px;line-height:8px;white-space:nowrap}.key.orange .key-face{background:linear-gradient(#efb336,#d59212);color:#213022}.key.red .key-face{background:linear-gradient(#f78158,#d84d37)}.numeric .key-face{height:32px;font-size:23px;font-weight:normal;background:linear-gradient(#36403a,#222b26);border-color:#121c15;color:#f7f6ed;box-shadow:0 3px 0 #101812,inset 0 1px 1px #6d786b}.numeric .small .key-face{font-size:16px}.numeric .orange .key-face{background:linear-gradient(#f4a31d,#e88905);color:#fff}.numeric .key{padding-top:12px;padding-bottom:9px}.numeric .key-alpha{bottom:-1px;font-size:7px}.key:hover .key-face{filter:brightness(1.08)}.key:active .key-face,.key.pressed .key-face{transform:translateY(2px);box-shadow:0 1px 0 #152218}.power-switch{position:absolute;left:-8px;top:360px;width:12px;padding:0;border:0;color:#263724;background:none;font-size:5px;line-height:9px;z-index:2}.power-switch span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);margin:auto}.power-switch i{display:block;height:34px;background:repeating-linear-gradient(0deg,#202b25,#202b25 2px,#697467 3px);border:1px solid #151e17;border-radius:2px;box-shadow:0 1px 2px #000}.off .power-switch i{transform:translateY(3px)}.device-note{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:6px;margin:25px 4px 0}.device-note>span:last-child{margin-left:auto;letter-spacing:1px;font-size:8px}.save-dot{width:5px;height:5px;background:#698776;border-radius:50%}.intro{padding:4px 0 25px}.eyebrow{color:#7b857a;font-size:9px;letter-spacing:2px}.intro h1{font-size:37px;font-weight:400;line-height:1.18;letter-spacing:-1.6px;margin:17px 0 14px}.intro p{color:#7b857a;font-size:13px;line-height:1.7;margin:0}.tabs{display:flex;border-bottom:1px solid #bfc7ba;gap:20px;overflow-x:auto}.tabs button{border:0;border-bottom:2px solid transparent;background:none;font-size:12px;padding:14px 0;color:#798174;white-space:nowrap}.tabs button.active{color:#293e2c;border-bottom-color:#425b42}.tab-panel{padding:23px 0 0}.section-label{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}.section-label h2,h2{font-size:14px;font-weight:500;margin:0}.section-label>span{font-size:9px;letter-spacing:1px;color:#788371}button:not(.key):not(.power-switch){transition:background .1s}.tab-panel button,.utility-bar button,.file-button{border:1px solid #c7cebf;background:transparent;padding:9px 11px;font-size:11px;border-radius:3px}.tab-panel button:hover,.utility-bar button:hover,.file-button:hover{background:#dce1d4}.tab-panel button:disabled{opacity:.4;cursor:default}input,textarea,select{border:1px solid #c5ccbc;background:#f6f7ef;border-radius:3px;padding:9px;font-size:12px;min-width:0}#graph-form{display:flex;border:1px solid #bdc6b4;background:#f5f7ec;border-radius:4px;padding:4px;align-items:center;gap:4px}#graph-form label{font-family:monospace;padding:0 6px;font-size:14px}#graph-form input{border:0;background:none;min-width:0;flex:1;font-family:monospace;font-size:15px}#graph-form button{background:#3e5542;color:#f2f5ed;border:0;white-space:nowrap}.quick-curves{display:flex;gap:7px;margin-top:10px}.quick-curves button{border:0;background:#dfe4d7;color:#68765e;font-family:monospace;font-size:10px;padding:5px 8px}#curve-list{padding:0;margin:13px 0;list-style:none}#curve-list li{font:11px monospace;display:flex;gap:8px;align-items:center;margin:5px 0}#curve-list li span{flex:1;overflow-wrap:anywhere}#curve-list button{padding:2px 7px;border:0}.graph-preview{background:#a5b08e;border:1px solid #667558;border-radius:5px;padding:13px 14px 5px;box-shadow:inset 0 2px 7px #40523733}.graph-preview canvas{display:block;width:100%;aspect-ratio:1.5;image-rendering:pixelated}.graph-preview>span{display:block;height:18px;text-align:right;font:10px monospace;color:#49593c;padding-top:4px}.graph-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.range-details{border-top:1px solid var(--line);margin-top:16px;padding-top:12px;font-size:11px}summary{cursor:pointer;color:#53664e}.range-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:13px}.range-grid label,.data-entry label{font-size:10px;display:flex;flex-direction:column;gap:5px;color:#728068}.range-grid input{width:100%;font:12px monospace}.program-slots{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-bottom:19px}.program-slots button{padding:7px 0;font-size:10px}.program-slots button.selected{background:#3e5542;color:#fff}.program-slots button.occupied{border-bottom:3px solid #b67a29}.field-label{display:block;font-size:11px;color:#6b7961;margin-bottom:7px}#program-editor{display:block;width:100%;font:13px/1.8 'Courier New',monospace;resize:vertical;padding:13px;background:#f5f6ea;min-height:200px}.program-actions,.token-tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.program-actions button:nth-child(2){background:#3e5542;color:white}#program-status{font-size:11px;line-height:1.7;color:#728067}#example{width:100%}.token-tools button{font:11px monospace;background:#e2e6d9}.data-entry{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:end}.data-entry input{width:100%}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.stat-card,.register{border:1px solid #cbd2c2;padding:10px;min-width:0}.stat-card small,.register label{font-size:9px;color:#7a866f;display:block;margin-bottom:7px}.stat-card output,.register output{font:12px monospace;overflow-wrap:anywhere}.stat-actions{display:flex;gap:5px;flex-wrap:wrap}.data-table-wrap{max-height:235px;overflow:auto;margin:18px 0}table{width:100%;border-collapse:collapse;font:12px monospace}td,th{padding:7px;border-bottom:1px solid #d0d7c7;text-align:left;font-weight:normal}table button{padding:2px 7px!important}.help details{border-bottom:1px solid var(--line);padding:15px 0}.help summary{font-size:12px}.help p{color:#6f7b64;font-size:12px;line-height:1.8}.help a{color:#4b6144}.help h2{margin-bottom:9px}.help code{font-size:11px;color:#43593e}.help .danger{color:#a05e41}.status-message{min-height:28px;margin-top:12px;font-size:11px;line-height:1.5;color:#966243}.utility-bar{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:16px}.utility-bar button,.file-button{font-size:10px;position:relative}.file-button{overflow:hidden}.file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.register-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:15px}footer{border-top:1px solid var(--line);padding:22px 0 30px;display:flex;gap:15px;font-size:9px;color:#89917e}footer a{color:inherit}footer>span:last-child{margin-left:auto;font-size:8px;letter-spacing:1px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}kbd{border:1px solid #c8d0bf;border-radius:2px;padding:1px 4px;font:10px monospace;white-space:nowrap}[hidden]{display:none!important}
@container(max-width:395px){.device{padding:3.5cqw 4cqw 4.5cqw;border-radius:3cqw}.display-panel{padding:2cqw 2.75cqw 3cqw}.brand{gap:1.1cqw;margin-bottom:1.8cqw}.brand strong{font-size:4.5cqw}.brand>span{font-size:1.375cqw}.brand em{font-size:3cqw}.brand b{font-size:2cqw}.lcd-frame{padding:2.25cqw 3.25cqw 2.5cqw}.mode-legend{font-size:1.5cqw}.mode-legend>div{min-height:2cqw}.key-panel{margin-top:2.75cqw;padding:1cqw 2.25cqw 3cqw}.scientific{grid-template-rows:repeat(5,10.75cqw);column-gap:2cqw}.numeric{grid-template-rows:repeat(4,13.5cqw);column-gap:3.5cqw}.key{padding:3cqw 0 2cqw}.key-face{height:5.75cqw;font-size:2.75cqw}.key-shift{font-size:1.875cqw;line-height:2.5cqw;top:.25cqw}.key-alpha{font-size:1.75cqw;line-height:2cqw}.key-mode{font-size:1.625cqw;line-height:2cqw}.numeric .key{padding:3cqw 0 2.25cqw}.numeric .key-face{height:8cqw;font-size:5.75cqw}.numeric .small .key-face{font-size:4cqw}.numeric .key-alpha{font-size:1.75cqw}.power-switch{top:90cqw}.device-note{font-size:8px}.device-note>span:last-child{font-size:7px}}
@media(max-width:1050px){.layout{grid-template-columns:360px minmax(0,1fr);gap:45px}main{padding:0 26px}.intro h1{font-size:31px}.tabs{gap:14px}.tabs button{font-size:11px}.page-edition{font-size:8px;letter-spacing:1px}}
@media(max-width:800px){.layout{grid-template-columns:minmax(0,400px);justify-content:center;gap:42px;padding-top:30px}.page-header{height:73px}.page-edition{display:none}.workbench{width:100%}.intro{display:none}.device-note{margin-top:24px}.page-logo{font-size:21px}footer{flex-wrap:wrap}footer>span:last-child{display:none}}
@media(max-width:420px){main{padding:0 17px}.page-logo{font-size:19px}.page-logo span{font-size:7px}.collection-link{font-size:10px}.tabs{gap:20px}.stats-grid{grid-template-columns:repeat(2,1fr)}.data-entry{gap:5px}.utility-bar{gap:5px}.graph-actions{gap:4px}.graph-actions button{padding:8px}.range-grid{gap:6px}.program-slots{gap:2px}.page-header{height:65px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.graph-options{display:flex;flex-wrap:wrap;gap:10px 20px;margin:12px 0;font-size:12px;color:var(--muted)}.graph-options label{display:flex;align-items:center;gap:6px}.graph-options input{accent-color:#425b45}