:root{color-scheme:light;--gold:#c9ba8b;--ink:#182822}*{box-sizing:border-box}body{margin:0;background:#182822;color:#eee9dc;font:15px/1.55 system-ui,-apple-system,sans-serif;background-image:radial-gradient(ellipse at 35% 25%,#42524366,transparent 65%)}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #e5b95d;outline-offset:5px}header{max-width:1380px;margin:auto;padding:24px 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff15}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:#eee6cc;font:12px Georgia,serif;letter-spacing:2px}.brand small{display:block;font:8px system-ui;letter-spacing:1.7px;margin-top:5px;color:#9eaa9d}.clover{font:40px Georgia;color:#c0ac6d}nav{display:flex;gap:5px}nav button{border:0;background:none;color:#aab7af;font-size:12px;padding:8px 11px;border-radius:3px}nav button[aria-pressed=true]{color:#e8dcc0;background:#ffffff10}main{max-width:1380px;margin:auto;padding:0 36px}.intro{padding:30px 0 14px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2px;color:#b8a976;margin:0 0 12px}h1{font:clamp(27px,3vw,40px)/1.2 Georgia,serif;font-weight:400;margin:0 0 12px;letter-spacing:-.6px}.intro>p:last-child{color:#afbbb2;font-size:14px;margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:start;gap:32px}.machine-area{min-width:0}.desk{container-type:inline-size;padding:42px 32px 65px;perspective:1400px}.instrument{position:relative;isolation:isolate;transform:rotateX(12deg) rotateY(-7deg) rotateZ(-4deg);transform-style:preserve-3d;border-radius:2.2cqw 2.2cqw 1.2cqw 1.2cqw;background:#c9bd9d;box-shadow:-1.1cqw 2.4cqw 0 #6d6757,-1.3cqw 3cqw 0 #252b22,-2cqw 4.4cqw 3cqw #0008,0 0 0 .15cqw #e9e0c9;overflow:visible}.hood{height:11cqw;border-radius:2.2cqw 2.2cqw 0 0;background:linear-gradient(168deg,#e7e0c8,#c5bca2);border-bottom:.2cqw solid #f7f0dd;position:relative;box-shadow:inset 0 .3cqw .3cqw #fff6}.vent{position:absolute;right:7%;top:35%;width:32%;height:1.4cqw;background:repeating-linear-gradient(90deg,#827966 0 .16cqw,transparent .16cqw .9cqw);opacity:.65;transform:skewX(-17deg)}.case-top{padding:1.8cqw 2.4cqw 2.3cqw;background:linear-gradient(#cec5ac,#e4dac0 82%,#b5ac92);border-top:.3cqw solid #b0a68d}.display-frame{padding:1.4cqw 2cqw;border:.5cqw solid #34433b;border-radius:1.2cqw;background:linear-gradient(135deg,#172e26,#0c1c16);box-shadow:0 .2cqw .2cqw #f6edda,inset 0 .5cqw 1.4cqw #000a,0 -.2cqw .5cqw #766e5c}.glass{height:11.2cqw;min-height:44px;border-radius:.5cqw;background:linear-gradient(110deg,#031b11,#00170d 70%,#031e11);position:relative;overflow:hidden;box-shadow:inset 0 .4cqw 1cqw #000a}.glass:after{content:'';position:absolute;inset:0;background:linear-gradient(170deg,#ffffff06,transparent 45%);pointer-events:none}.digit-stage{height:100%;display:flex;align-items:center;padding:1cqw 1.6cqw}#digits{display:flex;justify-content:flex-end;align-items:center;gap:.35cqw;width:100%;height:100%;transform-origin:center;transition:transform .5s ease}#digits.rotated{transform:rotate(180deg)}.digit{width:3.9cqw;max-height:7.8cqw;min-width:0;flex-shrink:1;overflow:visible;filter:drop-shadow(0 0 .25cqw #55ff9b66)}.segment,.decimal{fill:#9affbd}.segment:not(.on){display:none}#approx{position:absolute;right:.35cqw;top:.1cqw;color:#8cffb0;font:1.7cqw monospace}.face{position:relative;padding:2cqw 4cqw 5cqw;background:linear-gradient(135deg,#e7ddc1,#cfc3a5 70%,#b9ae93);border-top:.16cqw solid #f0e6ce;box-shadow:inset 0 .1cqw .3cqw #fff6}.face:before,.hood:before{content:'';position:absolute;inset:0;opacity:.2;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%235d5132' filter='url(%23n)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.nameplate{display:flex;justify-content:space-between;align-items:center;gap:3cqw;color:#232c22;margin:0 0 3.8cqw}.vega{display:flex;gap:1.8cqw;align-items:center;font:bold 3.1cqw/1.1 Arial,sans-serif;letter-spacing:.55cqw;white-space:nowrap}.vega small{font:1.6cqw Georgia;letter-spacing:.1cqw}.soviet-star{color:#9a3522;font-size:2.8cqw;letter-spacing:0;text-shadow:0 .1cqw #f6e9c6}.edition{display:flex;align-items:center;gap:1cqw;font:bold 1.5cqw/1.4 Georgia,serif;text-align:right;letter-spacing:.02cqw}.edition small{display:block;font:1.05cqw/1.5 Georgia,serif;white-space:nowrap}.clover-icon{height:4cqw;width:4cqw;color:#35573d;fill:currentColor}.control-deck{display:grid;grid-template-columns:minmax(0,1fr) 11cqw;gap:4cqw;align-items:start}.keyboard{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(5,5.6cqw);gap:1.4cqw .95cqw;padding:0 .5cqw 1.3cqw}.key{grid-column:var(--c)/span var(--w);grid-row:var(--r)/span var(--h);padding:0;position:relative;border:0;border-radius:.45cqw .45cqw .6cqw .6cqw;background:linear-gradient(105deg,#aaa68d,#777e67);box-shadow:0 .8cqw 0 #77775e,.4cqw 1.3cqw .6cqw #443c2370,inset -.5cqw 0 .3cqw #77775a;transform:translateY(-.65cqw);color:#242a20;transition:transform .07s,box-shadow .07s;min-width:0;-webkit-tap-highlight-color:transparent}.key:before{content:'';position:absolute;inset:-.25cqw .1cqw .65cqw -.25cqw;border-radius:.45cqw .45cqw .65cqw .65cqw;background:linear-gradient(145deg,#d1d0b7,#b0b299 65%,#a5a88e);border:.12cqw solid #999b80;box-shadow:inset .18cqw .2cqw .15cqw #f9f4d777,inset -.2cqw -.1cqw .2cqw #6e765655}.key.ivory{background:linear-gradient(110deg,#c7c0a4,#928b71);box-shadow:0 .8cqw 0 #928c72,.4cqw 1.3cqw .6cqw #443c2370}.key.ivory:before{background:linear-gradient(145deg,#f0ebd4,#dcd5bb 65%,#c4c1a5);border-color:#aaa58c;box-shadow:inset .18cqw .2cqw .15cqw #fff9,inset -.2cqw -.1cqw .2cqw #8f896655}.key.red{background:#8d351e;box-shadow:0 .8cqw 0 #7e3019,.4cqw 1.3cqw .6cqw #443c2370;color:#fff0ca}.key.red:before{background:linear-gradient(135deg,#c65e2f,#a13c1d);border-color:#96381c;box-shadow:inset .2cqw .2cqw .2cqw #f9a07888}.key span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:translate(-.12cqw,-.65cqw);font:500 2.2cqw/1 Arial,sans-serif;text-shadow:0 .1cqw #fff4;pointer-events:none}.key.ivory span{font-size:2.8cqw}.key:active{transform:translateY(.2cqw);box-shadow:0 .1cqw 0 #77775e,.1cqw .4cqw .4cqw #443c2366}.switchboard{position:relative;border:1px solid #7d786055;padding:1.8cqw 1cqw;display:grid;grid-template-columns:1fr 1fr;gap:3.2cqw 1cqw;background:#d3c8ad55;box-shadow:inset .1cqw .1cqw .1cqw #fff6}.toggle{background:none;border:0;color:#4b4c3c;padding:0;display:flex;flex-direction:column;align-items:center;gap:1.4cqw;font:.9cqw/1 monospace;min-height:7.5cqw}.toggle:first-child{grid-column:1}.toggle i{display:block;position:relative;width:3cqw;height:3cqw;border-radius:50%;background:radial-gradient(circle,#333 15%,#968e76 17%,#e5decc 29%,#7c796e 39%,#c6beaa 54%,#716d60 58%,#c4bca2 63%);box-shadow:0 .2cqw .3cqw #0005}.toggle i:after{content:'';position:absolute;left:1.15cqw;top:-1.2cqw;height:3cqw;width:.65cqw;border-radius:.4cqw;background:linear-gradient(90deg,#747774,#edece0 45%,#888c87);transform:rotate(12deg);transform-origin:50% 90%;box-shadow:.3cqw .2cqw .3cqw #0006}.toggle[aria-pressed=false] i:after{transform:rotate(65deg)}.toggle[data-key=start]:active i:after{transform:rotate(60deg)}.pilot{align-self:center;margin:auto;width:1.7cqw;height:1.7cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffbd69,#b93d13 65%,#681b08);box-shadow:0 0 0 .35cqw #91826a,0 0 0 .5cqw #d5c6a4,0 0 1cqw #fa8b2855}.off .pilot{background:#492516;box-shadow:0 0 0 .35cqw #91826a,0 0 0 .5cqw #d5c6a4}.screw{position:absolute;bottom:2cqw;width:1.3cqw;height:1.3cqw;border-radius:50%;background:linear-gradient(130deg,#b1aa92 43%,#67634f 45% 52%,#d6cfb9 55%);box-shadow:0 .1cqw .2cqw #777}.screw.left{left:2cqw}.screw.right{right:2cqw}.seal{font:3cqw Georgia;border:.16cqw solid #4f5545;border-radius:50%;width:4.5cqw;height:4.5cqw;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4f5545;position:absolute;right:8cqw;bottom:1cqw;line-height:.8}.seal small{font:.7cqw Georgia;letter-spacing:.1cqw;margin-top:.3cqw}.case-lip{height:3cqw;border-top:.2cqw solid #eee4ca;border-radius:0 0 1.2cqw 1.2cqw;background:linear-gradient(#c4b799,#ab9e80);box-shadow:inset 0 -.3cqw .2cqw #82785c}.external-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:0 12px}.external-controls>button{background:#263e2f;border:1px solid #acb08955;border-radius:4px;color:#e5dec8;padding:10px 17px;font-size:12px}.external-controls>button[aria-pressed=true]{background:#3e5740}#equals{font-size:22px;padding:3px 20px}#equals[hidden]{display:none}.mode-choice{display:flex;align-items:center;gap:8px;font-size:11px;color:#aebaa8}select{background:#21392b;border:1px solid #8d997b55;border-radius:4px;color:#e3dfcc;padding:6px;font-size:11px}#mode-note{font-size:11px;color:#a5b4a6;text-align:center;max-width:640px;margin:14px auto 0}#error{font-size:12px;color:#ffc897;text-align:center;min-height:19px;margin:5px 0}aside{padding-top:38px}.discovery{border:1px solid #cbbb8538;padding:24px 22px;border-radius:6px;background:#12231c66;min-height:290px}.discovery h2{font:24px/1.25 Georgia;margin:12px 0}.discovery p:not(.eyebrow){font-size:13px;color:#afbdaf}.empty-symbol{font:44px Georgia;color:#ac9e6b;margin-top:20px}.dictionary-note{border-top:1px solid #ffffff14;padding-top:15px;margin:22px 0 0;font-size:10px!important;line-height:1.7}.word-big{font:44px Georgia;letter-spacing:3px;color:#e5d5a8;margin:16px 0 0}.word-origin{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#a9b5a4;margin-bottom:20px}.translations{margin:0}.translations div{display:grid;grid-template-columns:30px 1fr;gap:12px;border-top:1px solid #ffffff12;padding:10px 0}.translations dt{font-size:10px;color:#9eaa94;letter-spacing:1px;padding-top:4px}.translations dd{margin:0;font-size:15px;color:#e3e7dc}.examples{padding:24px 0 0}.examples button{width:100%;display:flex;justify-content:space-between;padding:9px 0;border:0;border-bottom:1px solid #ffffff12;background:none;color:#c4cbbd;font:13px monospace;text-align:left}.examples button:hover{color:#e6c879}.examples button span:last-child{color:#9c946d}.padding{margin-top:20px;display:grid;grid-template-columns:1fr 55px;gap:7px;font-size:12px;color:#b1bcae;align-items:center}.padding small{grid-column:1/-1;font-size:10px;color:#a0b19f}.keyboard-help{font-size:10px;color:#a5b3a7;letter-spacing:.5px;margin:28px 0}.history{border-top:1px solid #ffffff18;padding:20px 0;color:#a7b6a8;font-size:13px;max-width:850px}.history summary{color:#d2d2bd;cursor:pointer}.history div{padding-top:10px}.history a{color:#c5b47b}footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #ffffff18;padding:25px 0;margin-top:25px;color:#a3b19f;font-size:9px;letter-spacing:1px}.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}@media(max-width:1100px){.workspace{grid-template-columns:1fr}.desk{max-width:920px;margin:auto}.workspace aside{padding-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:24px}.discovery{grid-row:span 2}.examples{padding-top:0}.padding{margin:0}.instrument{transform:rotateX(10deg) rotateY(-5deg) rotateZ(-3deg)}}@media(max-width:600px){header{padding:16px}.brand{font-size:9px;letter-spacing:1px}.brand small{font-size:6px}.clover{font-size:28px}main{padding:0 12px}.intro{padding:24px 4px 0}.intro .eyebrow{font-size:8px}.intro>p:last-child{font-size:12px}.desk{padding:32px 9px 35px}.instrument{transform:rotateX(8deg) rotateY(-3deg) rotateZ(-2deg)}.nameplate{margin-bottom:4cqw}.glass{height:12cqw}.digit{width:4.2cqw;max-height:8.5cqw}.external-controls{gap:8px;margin:0}.external-controls>button{font-size:11px;padding:8px 10px}.mode-choice{width:100%;justify-content:center;margin-top:6px}#mode-note{font-size:10px;padding:0 8px}.workspace aside{display:block;padding-top:10px}.discovery{min-height:0;padding:20px}.examples{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.examples .eyebrow{grid-column:1/-1}.padding{margin-top:20px;max-width:320px}.history{font-size:12px}footer{font-size:8px;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){#digits,.key{transition:none}}

.trio {display:flex;gap:clamp(12px,4vw,64px);margin:20px 0 12px}
.trio>div {border-left:1px solid #b8a97666;padding-left:clamp(6px,1vw,14px)}
.trio small,.trio span {display:block;color:#bcc7bb;font-size:clamp(9px,1.1vw,13px)}
.trio strong {display:block;font:normal clamp(23px,2.6vw,37px) Georgia,serif;color:#e8dbb4}
.trio span {font-variant-numeric:tabular-nums;white-space:nowrap}
.examples {display:block}
.examples p {color:#bac8bc;font-size:13px}
.examples h3 {margin:15px 0 3px;font:normal 13px Georgia,serif;color:#e5d5a8}
.examples button[aria-pressed=true] {color:#f6d58c}
@media(max-width:600px){ .trio {display:grid;grid-template-columns:1fr 1.26fr 1.05fr;gap:4px} }

#active-exercise {font: 600 16px/1.4 system-ui; color: #e8dbb4; margin: 16px 0 0; scroll-margin-top: 12px}