/* Material study 03. One broad light above and to the left.
   Shadows follow height: a narrow contact region, then a softer down-right cast.
   Panel, rubber, injection-moulded caps and glass each keep their own response. */
:root{--cap:#e8e7e2;--cap-low:#d1d1d1;--occlusion:#242424;--amber:#ed7422}
.machine{background:radial-gradient(ellipse at 5% 0%,#f3f3ee90,transparent 67%),linear-gradient(130deg,#dfdfdf,#dcdcdc 55%,#d3d3d3);box-shadow:inset 0 1px 0 #ffffffe0}
.machine:before{opacity:.12;mix-blend-mode:multiply}.machine:after{background:none}
h1{letter-spacing:-.8px;text-shadow:none}.model-dot{width:6px;height:6px;background:#dc6f2e;box-shadow:inset 0 .5px 1px #9a360c40,0 .6px .5px #fff8}
.vents{height:40px;max-width:280px;background:url('materials/perforation.svg') repeat 0 0 / 7px 7px;mask-image:none;filter:none;opacity:1}
.identity-meta{color:#838383}.identity-meta a{color:#5d5d5d}.identity-meta .text-button{border:0;text-decoration:none;color:#707070;box-shadow:none}
.machine-top,.sound-controls,.sequencer,.machine-bottom{border-color:#8f8f8f29;box-shadow:0 1px 0 #ffffff57}
.section-label{color:#8e8e8e}.section-label b{color:#646464}.section-label,.identity-meta,.dial-name,.timing label,.pattern-row>span,.transport-note,.beat-labels,.machine-bottom{font-weight:400;text-shadow:0 .5px 0 #ffffff40}
/* A perforated metal top with printed legends, never luminous button borders. */
.lcd{border:1px solid #252525;border-radius:4px;background:linear-gradient(140deg,#2a2a2a,#1c1c1c 75%,#222222);box-shadow:0 0 0 1px #939393,0 1px 0 2px #fffffc80,0 2px 4px #2121211c,inset 0 2px 8px #000a;overflow:hidden;text-shadow:0 0 3px #c5c5c525}
.lcd:before{background:linear-gradient(155deg,#fff 0%,#fff0 47%);opacity:.035}.lcd:after{box-shadow:inset .6px .6px 0 #ededed30,inset -1px -1px 1px #0005;background:var(--noise);opacity:.035}
.lcd-caption{color:#949494}.lcd-top,.lcd-bottom{color:#b4b4b4}.lcd-main strong{color:#d2d2d2}.lcd-main .position strong{color:#b8b8b8}
/* Pads sit inside one dark tray. Their broad tops are matte, with only a
   short shoulder catching the light. No repeated bright keycap outlines. */
.pads{padding:9px;gap:9px;border:0;border-radius:4px;background:linear-gradient(145deg,#595959,#727272 60%,#7f7f7f);box-shadow:inset .8px 1.5px 2px #1717178c,inset -.5px -.7px 0 #f4f4f440,0 1px 0 #f9f9f9b0}
.pads:before{opacity:.05}
.pad,.pad.selected{border:0;border-radius:4px;transform:translateY(-1px);background:linear-gradient(145deg,#5e5e5e,#585858 45%,#545454);box-shadow:inset .6px .7px .7px #cbcbcb50,inset -.5px -1px .7px #29292970,.5px 1px 1px #1f1f1fc9,1px 3px 2px #29292999,2px 6px 5px #3131314a;overflow:visible;isolation:isolate;transition:transform 90ms cubic-bezier(.2,.6,.3,1),box-shadow 90ms,background 120ms}
.pad:after{inset:0;border-radius:4px;box-shadow:none;background:var(--noise);opacity:.18;mix-blend-mode:soft-light;z-index:0;pointer-events:none}
.pad-number,.pad-key,.pad-name{position:relative;z-index:1;text-shadow:none;pointer-events:none}.pad-number{font-size:13px;color:#c8c8c8;opacity:.52}.pad-key{position:absolute;color:#bababa;opacity:.3}.pad-name{font-weight:400;color:#d4d4d4;font-size:clamp(9px,.85vw,11px)}
.pad:before{left:auto;right:10px;top:10px;width:3px;height:3px;border-radius:50%;transform:none;background:#2d2d2d;box-shadow:inset 0 .7px .8px #171717,0 .6px .5px #cfcfcf4a;z-index:2}
.pad.selected:before{background:#c9aa63;box-shadow:inset 0 .6px .7px #8b6a2855,0 .6px .6px #dfdfdf40}
.pad.hit,.pad:active{transform:translateY(1.5px);background:linear-gradient(145deg,#595959,#525252);box-shadow:inset .5px .5px .7px #b3b3b335,inset -.5px -.8px .7px #20202080,.5px .7px 1px #1f1f1fb0,1px 1.8px 2px #29292950}
.pad.hit:before{background:#ed9e39;box-shadow:inset 0 .5px .8px #7a3f0733,0 0 3px #d28c3826}
.pad.drag-over{outline:1px solid #df8528;outline-offset:3px}
:root{--round-face:radial-gradient(ellipse at 35% 20%,#f0f0f0 0%,#e7e7e7 52%,#dfdfdf 77%,#cbcbcb 100%);--round-shadow:inset .6px .8px .7px #ffffffef,inset -.7px -1.2px 1px #aaaaaa70,.5px 1px .5px #bdbdbd,1.2px 2px 1px #a3a3a3,1.6px 2.5px 1.6px #4545455e,2.8px 5px 3px #36363642,5px 10px 9px #3b3b3b2c}
/* A raised, mostly planar resin dial. The top is flat; the rim changes normals.
   The cast shadow is displaced beyond the lower right edge of the cap. */
.dial,.dial-control.turning .dial{border:0;border-radius:50%;background:var(--round-face);box-shadow:var(--round-shadow);isolation:isolate;transform:translateY(-1px)}
.dial:before{inset:-11px;background:url('materials/scale.svg') center/100% 100% no-repeat;mask:none;opacity:.8;z-index:-1;border:0;box-shadow:none}
.dial:after{inset:2px;background:var(--noise);opacity:.08;mix-blend-mode:multiply;box-shadow:none;border-radius:50%}
.dial i{width:2px;height:16%;left:calc(50% - 1px);top:13%;transform-origin:50% calc(clamp(53px,6.6vw,92px) * .37);background:#636363;box-shadow:0 .7px .5px #fdfdfd80;border-radius:.5px;z-index:1}
.dial-control:focus-within .dial{outline:none}.dial-control:has(input:focus-visible) .dial{outline:1px solid #db8c39;outline-offset:10px}.dial-name{color:#626262}.dial-name output{color:#949494}
/* Small latched keys share the same low-profile moulding, not a grey UI gradient. */
.patterns{gap:8px}.patterns button,.small-button{border:0;background:linear-gradient(145deg,#ececec,#e6e6e6);color:#6d6d6d;border-radius:2px;box-shadow:inset .5px .7px .6px #fff,0 .5px 0 #bfbfbf,.5px 1px .5px #5c5c5c70,1px 2px 2px #4646463b,2px 4px 4px #4646461f;transform:none;transition:transform 80ms,box-shadow 80ms}
.patterns button.active,.patterns button:active,.small-button:active{background:#dbdbdb;border:0;color:#636363;transform:translateY(1px);box-shadow:inset .6px 1px 1.5px #6b6b6b33,0 .6px .5px #fbfbfb99,0 0 0 .5px #96969633}
.patterns button.active{color:#b16027}.small-button{padding:5px 8px;font-size:9px}.pattern-row{padding-bottom:20px}
.steps{gap:7px}.step,.step.active{height:29px;border:0;border-radius:2px;background:linear-gradient(155deg,#f1f1f1,#e5e5e5);box-shadow:inset .6px .8px .5px #fff,0 .7px 0 #bebebe,.5px 1.5px 1px #50505070,1px 3px 3px #4040403b,2px 5px 5px #4040401c;transform:none;transition:transform 75ms,box-shadow 75ms}
.step:after,.step.active:after{top:10px;width:8px;height:2px;border-radius:1px;background:#a8a8a8;box-shadow:inset 0 .7px .7px #5d5d5d50,0 .6px .5px #fafafa99}
.step.active,.step:active{background:#e1e1e1;transform:translateY(1.5px);box-shadow:inset 0 .5px .5px #f0f0f0,.5px .7px 1px #50505040,1px 1.5px 2px #40404021}
.step.active:after{background:#e28436;box-shadow:inset 0 .6px .6px #a35c2c60,0 .7px .5px #f9f9f9a0}
.step.current:before{box-shadow:none;background:#d8772e;bottom:-8px;width:3px;height:3px}
/* Slim slot controls: the dark upper cut and the bright lower edge are recesses. */
input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:#656565;box-shadow:inset 0 .7px .8px #33333380,0 1px .5px #fafafaa0}
input[type=range]::-webkit-slider-thumb{height:13px;width:8px;margin-top:-5.5px;border:0;border-radius:1px;background:linear-gradient(90deg,#cecece,#f4f4f4 45%,#dedede);box-shadow:inset .5px .6px .5px #fdfdfd,.5px 1px .5px #9c9c9c,1px 2px 1px #48484870,2px 3px 2px #3e3e3e3b}
.timing input[type=number]{border:0;background:#e6e6e6a0;box-shadow:inset .6px 1px 2px #60606020,0 .6px .5px #fbfbfbb0;color:#626262}
.switch{border:0;box-shadow:inset 0 1px 1.5px #35353566,0 .7px .5px #fbfbfb99;background:#999999;height:10px;border-radius:1px}.switch:before{background:linear-gradient(135deg,#f2f2f2,#cecece);box-shadow:.5px 1px 1px #45454555}
.tiny-dot{background:#828282;box-shadow:inset 0 .7px .7px #41414166,0 .7px .5px #f8f8f8a0}.orange{background:#d9843a}.status{background:transparent;border-color:#8f8f8f29;box-shadow:inset 0 .5px 0 #fffffc50;color:#858585}
@media(max-width:1000px){.pad{padding:12px}.pad-key{right:11px;top:11px}.pad:before{right:12px;top:29px}.dial i{transform-origin:50% calc(clamp(53px,6.6vw,92px) * .37)}.transport{--cap-size:48px}.pattern-row{padding-bottom:20px}}
@media(max-width:700px){.vents{max-width:none;height:38px;background-size:6px 6px}.pads{padding:10px;gap:10px}.pad:before{right:12px;top:30px}.dial{width:70px;height:70px}.dial i{transform-origin:50% 25.9px}.transport{--cap-size:59px;gap:14px;margin-top:5px}.transport-button{height:88px;font-size:11px}.transport-button:before{top:4px;width:var(--cap-size)}.transport-button i{top:calc(4px + var(--cap-size) * .5 - 1px)}.patterns button{height:27px}.pattern-row{padding-bottom:23px}.steps{gap:4px}.step,.step.active{height:28px}.step:after{width:5px}}
@media(min-width:701px) and (max-width:1000px) and (max-height:800px){.vents{height:30px}.dial{width:50px;height:50px}.dial i{transform-origin:50% 18.5px}.transport{--cap-size:44px}.transport-button{height:70px}.transport-button:before{top:4px}.transport-button i{top:25px}.pattern-row{padding-bottom:17px}.step,.step.active{height:27px}}

.lcd{background:linear-gradient(140deg,#252c25,#171e17 75%,#1c241a)}.lcd-caption{color:#8c9980}.lcd-top,.lcd-bottom{color:#aab99a}.lcd-main strong{color:#ccd6b7}.lcd-main .position strong{color:#aebf94}
/* Printed legends remain legible against a matte, nonluminous panel. */
.section-label{color:#747a6d}.section-label b{color:#5c6553}.dial-name{color:#5b6453}.dial-name output{color:#7a8270}.transport-button{color:#5e6854}.transport-note{color:#7a8470}.sequence-heading>span,.sequence-actions button{color:#78826d}.sound-heading .text-button{color:#626c57}.pattern-row>span{color:#737e66}.beat-labels{color:#8b9580}.identity-meta .text-button{color:#6b7363}
/* Detail pass 04: low-travel caps, centred switch carriage, and cut-in controls. */
#full-level{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:20px;line-height:1;padding:0;border:0;vertical-align:middle}
#full-level>.level-label{display:block;margin:0;line-height:1;transform:translateY(.15px)}
#full-level .switch{position:relative;display:block;flex:0 0 26px;width:26px;height:13px;margin:0;padding:0;border:0;border-radius:1.5px;background:linear-gradient(#7a7a7a,#a8a8a8);box-shadow:inset .6px 1px 1.5px #2d2d2d5e,inset 0 -.4px .4px #bdbdbd80,0 .6px .6px #fffffcb0}
#full-level .switch:before{position:absolute;top:50%;left:2px;width:8px;height:9px;margin:0;border-radius:.8px;transform:translateY(-50%);background:linear-gradient(90deg,#cccccc,#e6e6e6 40%,#dadada);box-shadow:inset .3px .5px .5px #fff9,inset -.3px -.3px .5px #77777750,0 .5px .7px #2e2e2e7a;transition:left 90ms ease-out}
#full-level .switch.on:before{left:calc(100% - 10px);margin:0}
.timing input[type=number]{width:48px;height:31px;border:0;border-radius:2px;background:#dbdbdb;box-shadow:inset .6px 1px 1.5px #6b6b6b33,0 .6px .5px #fbfbfb99,0 0 0 .5px #96969633;color:#5c5c5c;padding:3px 4px 2px;line-height:1.2;font-size:18px;font-variant-numeric:tabular-nums;text-shadow:0 .5px .5px #fafafa80}
/* The milled bed is distinct from the narrow dark travel slot. */
.slider-bed{position:relative;display:block;height:15px;padding:0 5px;border-radius:2px;background:linear-gradient(#c4c4c4,#d1d1d1 70%,#d9d9d9);box-shadow:inset .5px 1px 1.6px #44444433,inset -.3px -.5px .5px #f0f0f080,0 .6px .5px #fbfbfb9c;overflow:visible}
.timing label+label{padding-bottom:22px}
.timing label>.slider-bed{position:absolute;bottom:0;left:0;width:100%;height:15px}
.timing .slider-bed input[type=range],.master .slider-bed input[type=range]{position:relative;display:block;bottom:auto;left:auto;width:100%;height:15px;min-height:15px;margin:0;background:transparent;appearance:none;padding:0;border:0;box-shadow:none}
.master .slider-bed{width:75px;flex:0 0 75px;height:15px}
.slider-bed input[type=range]::-webkit-slider-runnable-track{height:3px;border:0;border-radius:1.5px;background:linear-gradient(#545454,#727272);box-shadow:inset 0 .8px 1px #1d1d1db0,0 .5px .4px #f0f0f07a}
.slider-bed input[type=range]::-webkit-slider-thumb{appearance:none;width:7px;height:11px;margin-top:-4px;border:0;border-radius:.8px;background:linear-gradient(90deg,#cacaca,#ececec 42%,#dfdfdf 72%,#c8c8c8);box-shadow:inset .3px .4px .4px #fffffce0,inset -.3px -.4px .4px #86868644,0 .5px .6px #35353570,.5px 1px 1.2px #35353530}
.slider-bed input[type=range]::-moz-range-track{height:3px;border:0;border-radius:1.5px;background:linear-gradient(#545454,#727272);box-shadow:inset 0 .8px 1px #1d1d1db0,0 .5px .4px #f0f0f07a}
.slider-bed input[type=range]::-moz-range-thumb{width:7px;height:11px;border:0;border-radius:.8px;background:linear-gradient(90deg,#cacaca,#ececec 42%,#dfdfdf 72%,#c8c8c8);box-shadow:inset .3px .4px .4px #fffffce0,inset -.3px -.4px .4px #86868644,0 .5px .6px #35353570,.5px 1px 1.2px #35353530}
@media(max-width:1000px){.master .slider-bed{width:60px;flex-basis:60px}}
@media(prefers-reduced-motion:reduce){#full-level .switch:before{transition:none}}

/* Swing remains a normal exposed track, without an inset rectangular housing. */
.timing label>.slider-bed{padding:0;background:none;border-radius:0;box-shadow:none}
.timing .slider-bed input[type=range]::-webkit-slider-runnable-track{height:2px;background:#74786e;border-radius:1px;box-shadow:none}
.timing .slider-bed input[type=range]::-moz-range-track{height:2px;background:#74786e;border-radius:1px;box-shadow:none}
.timing .slider-bed input[type=range]::-webkit-slider-thumb{margin-top:-4.5px;box-shadow:inset .3px .4px .4px #fffffcb0,0 .5px .8px #30362a4d,.7px 1.3px 1.8px #30362a24}
.timing .slider-bed input[type=range]::-moz-range-thumb{box-shadow:inset .3px .4px .4px #fffffcb0,0 .5px .8px #30362a4d,.7px 1.3px 1.8px #30362a24}
/* Compact maker / instructions / about row, aligned with the printed legends. */
.identity-meta{justify-content:flex-start;gap:22px}
.identity-meta .text-button{margin-left:0;padding:0;line-height:1.3}
@media(max-width:1000px){.identity-meta{gap:18px}}

/* Transport buttons retain the top light, with a lower, softer underside. */
:root{--transport-shadow:inset .6px .8px .7px #ffffffef,inset -.5px -.7px .8px #aaaaaa40,.3px .6px .5px #c5c5c5,.7px 1.1px .8px #a3a3a359,1px 1.8px 1.5px #4545453d,2px 3.5px 3px #3636362d,3.5px 7px 8px #3b3b3b1c;--play-shadow:inset .6px .8px .7px #ffc07aef,inset -.5px -.7px .8px #91461850,.3px .6px .5px #db7a31,.7px 1.1px .8px #ae5d2959,1px 1.8px 1.5px #4545453d,2px 3.5px 3px #3636362d,3.5px 7px 8px #3b3b3b1c}
.transport{--button-face:radial-gradient(ellipse at 35% 20%,#eeeeee 0%,#e9e9e9 76%,#e5e5e5 94%,#d3d3d3 100%);--cap-size:clamp(46px,5.1vw,70px);--cap-top:4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:4px;padding:0;border:0;background:none;box-shadow:none}
.transport-button,.transport-button.play,.transport-button.play.playing,.transport-button.rec.armed{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:0;height:calc(var(--cap-size) + 28px);min-height:0;padding:0 0 1px;border:0;border-radius:0;background:none;box-shadow:none;transform:none;filter:none;font-size:11px;line-height:1;color:#62675c;overflow:visible}
.transport-button:after{content:none;display:none;background:none;box-shadow:none;filter:none}
.transport-button:before{content:'';display:block;position:absolute;left:50%;top:var(--cap-top);width:var(--cap-size);height:var(--cap-size);aspect-ratio:1;border:0;border-radius:50%;background:var(--button-face);box-shadow:var(--transport-shadow);transform:translate(-50%,-1px);filter:none;z-index:-1;pointer-events:none;transition:transform 90ms,box-shadow 90ms}
.transport-button.play:before,.transport-button.play.playing:before{content:'';display:block;background:radial-gradient(ellipse at 35% 20%,#f78e3c 0%,#f48a36 76%,#f08632 94%,#d87025 100%);box-shadow:var(--play-shadow)}
.transport-button.rec.armed:before{content:'';display:block;background:var(--button-face);box-shadow:var(--transport-shadow)}
.transport-button i{position:absolute;left:50%;top:calc(var(--cap-top) + var(--cap-size) * .5 - 1px);right:auto;bottom:auto;width:9px;height:9px;margin:0;border:0;border-radius:0;background:#555b4e;box-shadow:none;filter:none;transform:translate(-50%,-50%);translate:none;transition:translate 90ms;pointer-events:none}
.transport-button span{pointer-events:none}
.transport-button.rec i{width:9px;height:9px;border-radius:50%;background:#cb703b}
.transport-button.play i{width:0;height:0;margin-left:1px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid #6c3a18;background:none}
.transport-button.play.playing i{width:7px;height:10px;margin-left:0;border:0;border-left:2px solid #6c3a18;border-right:2px solid #6c3a18;background:none}
.transport-button:active{transform:none;background:none;box-shadow:none;filter:none}
.transport-button:active:before{transform:translate(-50%,1px);box-shadow:inset .6px .8px .7px #ffffffc0,inset -.7px -1.2px 1px #aaaaaa70,.5px 1px .5px #a3a3a3,1px 2px 2px #45454540,2px 4px 4px #3b3b3b24}
.transport-button:active:after{content:none;display:none}
.transport-button:active i{translate:0 1.3px}
.transport-button.rec.armed i{background:#d8682b;box-shadow:none;animation:blink 1.1s infinite}
.transport-note{margin-top:12px;color:#7a8470}
@media(max-width:1000px){.transport{--cap-size:48px}}
@media(max-width:700px){.transport{--cap-size:58px;gap:14px}}
@media(min-width:701px) and (max-width:1000px) and (max-height:800px){.transport{--cap-size:44px}}

/* The hidden range supplies keyboard and accessibility behavior, not pointer travel. */
.dial-control input{pointer-events:none}
.dial-control.turning{cursor:ns-resize}
.transport-button.play:active:before{box-shadow:inset .6px .8px .7px #ffc07ac0,inset -.5px -.7px .8px #91461850,.3px .6px .5px #ca6d2b,1px 2px 2px #4545452c,2px 4px 4px #3b3b3b18}

/* Full-page reference views share the instrument's surface and key components. */
[hidden]{display:none!important}
.external-arrow{display:inline-block;margin-left:3px;font-size:1.1em}
.identity-meta a[aria-current=page]{color:#b16027}
.reference-heading{min-width:0;padding:12px 0}
.reference-heading h2{font-size:clamp(30px,3.6vw,48px);letter-spacing:-1px;margin:23px 0 10px;outline:none}
.reference-heading>p{font-size:12px;line-height:1.5;color:#6b7363;margin:0}
.page-button{display:inline-flex;align-items:center;gap:18px;white-space:nowrap;line-height:1.4}
.reference-heading .page-button{padding:6px 10px}
.reference-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5.5vw,100px)}
.reference-section{min-width:0;padding:28px 0 25px;border-bottom:1px solid #8f8f8f29;box-shadow:0 1px 0 #ffffff57}
.reference-section h3{font-size:clamp(21px,2vw,28px);font-weight:400;line-height:1.2;letter-spacing:-.35px;margin:20px 0 14px}
.reference-section p{font-size:13px;line-height:1.65;max-width:53ch;color:#62695b;margin:0 0 14px}
.reference-section .reference-note{font-size:11px;line-height:1.6;color:#7a8270;margin:16px 0 0}
.keyboard-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:260px;margin:21px 2px}
.keyboard-map kbd{display:flex;align-items:center;justify-content:center;min-height:30px;font-family:var(--sans);font-size:11px}
.reference-facts{margin:20px 0 0;font-size:11px;line-height:1.55;color:#62695b}
.reference-facts>div{display:grid;grid-template-columns:95px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid #8f8f8f29;box-shadow:inset 0 1px 0 #ffffff57}
.reference-facts dt{color:#747d68}.reference-facts dd{margin:0}
.reference-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:25px 0 30px;color:#7a8270;font-size:10px;line-height:1.5}
.reference-footer .page-button{padding:9px 12px;font-size:10px}
.reference-footer .text-button{color:#62695b}
@media(max-width:700px){.reference-heading{padding:4px 0 0}.reference-heading h2{font-size:32px;margin:22px 0 10px}.reference-grid{grid-template-columns:minmax(0,1fr)}.reference-section{padding:25px 0}.reference-section h3{font-size:24px}.reference-section p{font-size:13px}.reference-facts{font-size:12px}.reference-footer{align-items:flex-start;flex-direction:column;gap:20px}.reference-footer .page-button{align-self:flex-end}}

/* Operating manual: one reading column, one type scale, a consistent number gutter. */
.manual-view .machine-top{align-items:center;padding-bottom:30px}
.manual-view .reference-heading{padding:0}
.manual-view .reference-heading h2{font-size:36px;line-height:1.15;letter-spacing:-.8px;margin:22px 0 10px}
.manual-view .reference-heading>p{font-size:14px;line-height:1.5;color:#4f5748}
.manual-view .reference-heading .section-label{font-size:11px}
.manual-view .identity-meta,.manual-view .identity-meta .text-button{font-size:11px}
.manual-view .page-button{font-size:12px;padding:8px 12px}
.manual-page{max-width:900px;margin:0 auto;color:#3e4737}
.manual-introduction{padding:32px 0 20px}
.manual-introduction p{font-size:18px;line-height:1.55;max-width:58ch;margin:0}
.manual-overview{margin:0 0 12px;padding:12px 0 20px}
.manual-drawing{display:block;width:100%;height:auto;overflow:visible}
.manual-overview figcaption{display:flex;gap:16px;font-size:12px;line-height:1.5;color:#606958;padding:18px 0 0}
.manual-chapters{display:block}
.manual-chapters>section,.manual-reference{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:24px;padding:32px 0;border-top:1px solid #8f8f8f40;box-shadow:inset 0 1px 0 #ffffff57}
.manual-number{grid-column:1;grid-row:1;font-size:14px;line-height:28px;color:#69735e;font-variant-numeric:tabular-nums}
.manual-page h3{font-size:22px;line-height:28px;font-weight:400;letter-spacing:-.2px;margin:0 0 18px;color:#30382b}
.manual-chapters h3,.manual-chapters p{grid-column:2}
.manual-chapters p,.manual-reference-body>p{font-size:16px;line-height:1.65;max-width:560px;color:#414a39;margin:0 0 16px}
.manual-chapters p:last-child{margin-bottom:0}
.manual-reference-body{grid-column:2;min-width:0}
.manual-reference dl{margin:0 0 30px;max-width:560px;font-size:16px;line-height:1.5}
.manual-reference dl>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;padding:12px 0;border-bottom:1px solid #8f8f8f29;box-shadow:0 1px 0 #ffffff57}
.manual-reference dt{color:#606958}.manual-reference dd{margin:0;color:#414a39}
.manual-page h4{font-size:18px;line-height:1.4;font-weight:400;margin:0 0 12px;color:#30382b}
.manual-keys{display:grid;grid-template-columns:repeat(4,42px);gap:10px;margin:22px 0 6px}
.manual-keys kbd{display:flex;justify-content:center;align-items:center;min-height:36px;width:42px;justify-self:stretch;padding:0;font:14px var(--sans)}
.manual-footer{border-top:1px solid #8f8f8f40;box-shadow:inset 0 1px 0 #ffffff57;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:26px 0 32px;font-size:12px}
.manual-footer .text-button,.manual-footer .page-button{font-size:12px}
.manual-folio{display:flex;gap:20px;font-size:12px;color:#606958}
@media(max-width:700px){.manual-view .machine-top{gap:28px}.manual-view .reference-heading h2{font-size:32px;margin-top:22px}.manual-view .reference-heading>p{font-size:14px}.manual-introduction{padding:28px 0 14px}.manual-introduction p{font-size:18px}.manual-overview{padding:8px 0 20px;margin-bottom:4px}.manual-chapters>section,.manual-reference{grid-template-columns:28px minmax(0,1fr);column-gap:14px;padding:28px 0}.manual-page h3{font-size:21px;line-height:28px;margin-bottom:16px}.manual-chapters p,.manual-reference-body>p{font-size:16px;line-height:1.6}.manual-reference dl{font-size:15px}.manual-reference dl>div{grid-template-columns:90px minmax(0,1fr);gap:14px}.manual-footer .page-button{margin-left:auto}.manual-folio{font-size:11px;gap:12px}}

/* Printed manual plates: shallow pressed frames, matte ink, no control elevation. */
.manual-print{position:relative;isolation:isolate;padding:24px;border:1px solid #adb1a5;border-radius:3px;background:linear-gradient(135deg,#e2e3dc,#d9dbd3);box-shadow:inset .7px 1.2px 2px #4b514323,inset -.6px -.8px .8px #fbfcf2a6,0 .7px .6px #fffffcb0;cursor:default}
.manual-print:before{content:'';position:absolute;inset:5px;border:1px solid #ffffff40;border-right-color:#7d847512;border-bottom-color:#7d84751c;pointer-events:none;border-radius:1px}
.manual-print:after{content:'';position:absolute;inset:0;z-index:1;background:var(--noise);opacity:.07;mix-blend-mode:multiply;pointer-events:none;border-radius:3px}
.manual-print .manual-drawing{filter:grayscale(.9) contrast(.85);opacity:.9}
.manual-print .manual-drawing [filter]{filter:none}
.manual-key-figure{display:table;margin:22px 0 6px;padding:24px}
.manual-key-figure .manual-keys{margin:0;gap:9px;grid-template-columns:repeat(4,38px)}
.manual-key-figure kbd{width:38px;min-height:34px;border:1px solid #9ba18f;border-radius:1px;background:#e0e2d94d;box-shadow:inset 0 .6px .5px #ffffff80,0 .6px .4px #ffffff70;color:#5b6451;text-shadow:0 .6px 0 #ffffff99;font:14px var(--sans);cursor:default}
@media(max-width:700px){.manual-print{padding:14px}.manual-key-figure{padding:22px}.manual-print:before{inset:4px}}

/* One steady navigation row, shared by all three tab panels. */
.identity-meta,.manual-view .identity-meta{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px 18px;font-size:11px;margin-top:14px}
.nav-tabs{display:flex;align-items:center;gap:18px}
.identity-meta .nav-tab,.manual-view .identity-meta .nav-tab{display:inline-block;margin:0;padding:6px 0;font-size:11px;line-height:1.3;color:#6b7363;border-bottom:1px solid transparent;text-decoration:none;box-shadow:none}
.identity-meta .nav-tab[aria-selected=true]{color:#343e2d;border-bottom-color:#ba703d}
.identity-meta .nav-tab:hover{color:#a85e29}
.identity-meta .maker-link{font-size:11px;color:#737b6b;white-space:nowrap;line-height:1.3}
.machine-top,.manual-view .machine-top{min-height:clamp(204px,19vw,272px);padding-bottom:28px;align-items:center}
.reference-heading,.manual-view .reference-heading{padding:0}
.reference-heading h2,.manual-view .reference-heading h2{font-size:36px;line-height:1.15;letter-spacing:-.8px;margin:22px 0 10px}
.reference-heading>p,.manual-view .reference-heading>p{font-size:14px;line-height:1.5;color:#4f5748}
.reference-heading .section-label{font-size:11px}
@media(max-width:1000px){.identity-meta,.manual-view .identity-meta{column-gap:14px}.nav-tabs{gap:14px}}
@media(max-width:700px){.identity-meta{grid-column:1 / -1;grid-row:3}.machine-top,.manual-view .machine-top{min-height:0;grid-template-rows:auto minmax(200px,auto);gap:24px;padding-bottom:24px}.display-panel,.reference-heading{align-self:center}.reference-heading h2,.manual-view .reference-heading h2{font-size:32px}.identity-meta,.manual-view .identity-meta{gap:8px 14px}.nav-tabs{gap:14px}}

/* Navigation shares one vertical center line, including the external maker link. */
.identity-meta,.manual-view .identity-meta{justify-content:flex-start}
.nav-tabs{justify-content:flex-start}
.identity-meta .nav-tab,.manual-view .identity-meta .nav-tab,.identity-meta .maker-link{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:6px 0;border-bottom:1px solid transparent;text-align:center;font-size:11px;line-height:1.3}
.identity-meta .nav-tab[aria-selected=true]{border-bottom-color:#ba703d}
.identity-meta .maker-link{gap:5px}
.identity-meta .maker-link .external-arrow{margin:0;font-size:inherit}

/* Each operating step has a framed close-up, like a printed product detail. */
.manual-chapters .manual-step-figure{grid-column:1 / -1;width:100%;max-width:none;min-width:0;margin:0 0 22px}
.manual-step-figure .manual-print{padding:24px}
.manual-step-figure .manual-drawing{filter:none;opacity:1;overflow:hidden;font:14px var(--sans);fill:#505b45}
.manual-step-figure use{filter:grayscale(1);opacity:.94}
.manual-step-figure .manual-callout{fill:#b55d3824;stroke:#ad5d38;stroke-width:1.5}
.manual-step-figure .manual-motion{fill:none;stroke:#ab5d37;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.manual-step-figure .manual-leader{fill:none;stroke:#8d9580;stroke-width:.7}
.manual-step-figure .manual-file{fill:#dde0d4;stroke:#89927b;stroke-width:1.2;stroke-linejoin:round}
.manual-step-figure .manual-file-name{font-size:12px;letter-spacing:1px}
.manual-step-figure figcaption{display:flex;gap:14px;margin-top:12px;font-size:12px;line-height:1.5;color:#606958}
.manual-step-figure figcaption>span:first-child{flex:none}
@media(max-width:700px){.manual-step-figure .manual-print{padding:14px}.manual-step-figure figcaption{gap:10px}.manual-chapters .manual-step-figure{margin-bottom:22px}}

.manual-step-figure svg svg{overflow:hidden}

/* Larger reference titles provide the primary typographic statement. */
.reference-heading h2,.manual-view .reference-heading h2{font-size:clamp(48px,7.2vw,96px);line-height:1.02;letter-spacing:-.035em;margin:20px 0 14px}
@media(max-width:700px){.reference-heading h2,.manual-view .reference-heading h2{font-size:clamp(40px,12vw,56px)}}

/* Reference titles stand alone in the shared header. */
.manual-view .reference-heading>.section-label,.manual-view #reference-description{display:none}
.manual-view .reference-heading h2{margin:0;letter-spacing:-.045em}

.manual-view .reference-heading h2{text-align:right}

/* Reference titles align with the full content frame. */
.manual-view .machine-top{position:relative}
.manual-view #reference-heading{position:absolute;inset:0 0 28px;display:grid;grid-template-columns:64px minmax(0,1fr);align-content:center;width:100%;max-width:900px;margin-inline:auto;pointer-events:none}
.manual-view #reference-title{grid-column:2;width:100%;max-width:none;text-align:right}
@media(max-width:700px){.manual-view #reference-heading{position:static;inset:auto;grid-template-columns:42px minmax(0,1fr)}}

.manual-page{width:100%}

.manual-footer .about-note{flex-basis:100%;max-width:560px;margin:0;font-size:12px;line-height:1.5;color:#606958}

/* Keep the real display's layout space when a reference title replaces it. */
.display-panel.display-silent{visibility:hidden;pointer-events:none}
@media(max-width:700px){.machine-top>.display-panel,.machine-top>#reference-heading{grid-column:1;grid-row:2}}