/* Crafted hardware review. 2px construction grid; no noise texture or gradients.
   Fixed light from upper left. Enamel, bakelite and glass have different roles.
   Redaction 50 is intentionally retained throughout the operational UI. */
:root{--case-dark:#151e1b;--case:#39483f;--edge:#718174;--plate:#dad6bf;--plate-light:#eee9d2;--plate-shadow:#aaa991;--ink:#26342c;--display:#14231b}
html,body{background:#202923;color:var(--ink)}
body{display:block;align-content:start;justify-items:normal;padding:24px 0;min-height:100vh;padding-top:max(24px,round(down,calc((100vh - 528px)/2),2px))}
.device{margin-left:max(0px,round(down,calc((100vw - 800px)/2),2px))}
.outside-note{margin:16px auto 0}
.device{position:relative;padding:12px;border:4px solid #101813;background:#39483f;grid-template-columns:212px minmax(0,1fr);gap:10px;box-shadow:0 2px #788274,inset 2px 2px #718174,inset -2px -2px #202c24,4px 4px #111b15,8px 8px #18221b;clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px))}
.case-screw{position:absolute;width:8px;height:8px;background:#909483;border:2px solid #1b261e;box-shadow:0 2px #111a13;z-index:8}.case-screw:after{content:'';position:absolute;left:0;top:2px;width:4px;height:2px;background:#26342a}.top-left{top:2px;left:2px}.top-right{top:2px;right:2px}.bottom-left{bottom:2px;left:2px}.bottom-right{bottom:2px;right:2px}
.left{height:448px;grid-template-rows:222px 26px 174px 18px;border:4px solid #17251b;background:#c4c8ad;box-shadow:inset 2px 0 #edead0}
.unit{padding:10px 10px 6px;border-top:0;border-bottom:4px solid #24362a;background:hsl(calc(48deg + var(--texture-hue)) 25% 80%);box-shadow:inset 2px 2px #f7f2d9,inset -2px -2px #abae96}
.cell::before,.unit::before{display:none}.cell:not(.unused)::after{display:none}
.unit>label,#unit-note{background:transparent;box-shadow:none;color:#45523e}.unit>label{font-size:14px;line-height:16px}.unit>label span{font-size:11px;color:#5c6955}
select{appearance:none;background:#f1ecd4 url('./chevron-dark.svg') right 7px center/10px 8px no-repeat;height:34px;margin-top:6px;padding:4px 22px 4px 6px;border:2px solid #25382b;box-shadow:inset 2px 2px #adae96,inset -2px -2px #fff8de;font-size:18px;line-height:1.1;color:#233428}
.unit-art{height:130px;position:relative;padding:6px 0;isolation:isolate}
.unit-art:before{content:'';position:absolute;inset:8px 64px 8px 0;z-index:-1;border:2px solid #1b2b21;background-color:#22362a;background-image:repeating-linear-gradient(0deg,transparent 0 2px,#435140 2px 4px),repeating-linear-gradient(90deg,transparent 0 2px,#435140 2px 4px);background-blend-mode:multiply;box-shadow:inset 2px 2px #132419,inset -2px -2px #65725c}
.unit-art img{width:96px;height:112px;margin-left:7px;image-rendering:pixelated;filter:drop-shadow(2px 2px #14251b)}
.unit-art button{font-size:14px;min-width:54px;height:32px;min-height:32px;margin-bottom:10px;--button-face:#c1c6aa}
#unit-note{font-size:11px;line-height:14px;letter-spacing:.2px}
.parts-heading{font-size:12px;padding:6px 8px 2px;color:#364b36;background:#c4c8ad;box-shadow:inset 0 2px #e6e6c9}.parts-heading span{font-size:9px;color:#53644a}
#parts{padding:4px 6px 8px;scrollbar-color:#566b50 #a8b698;scrollbar-width:thin;background:#9eae90;box-shadow:inset 2px 2px #718265}
#parts button{height:36px;min-height:36px;margin:0 0 6px;padding:4px 8px;gap:6px;font-size:14px;color:#243b2b;--button-face:#cad0b4;clip-path:none!important;background:#344c36!important}
#parts button:before{clip-path:none!important;box-shadow:inset 0 2px #e5e6cd,inset 0 -2px #a3b08f}
#parts button>span{color:#5d7251;font-size:11px;padding-right:4px;border-right:2px solid #afbc9c;line-height:18px}
#parts button[aria-current=true]{--button-face:#233d2c;color:#f4efd1;box-shadow:inset 0 0 0 2px #102318!important}
#parts button[aria-current=true]:before{box-shadow:inset 2px 2px #11281a,inset -2px -2px #526d48;border-left:4px solid var(--unit-accent)}
#parts button[aria-current=true]>span{color:#c8d2a8;border-color:#4c6745}#parts button[aria-current=true] i{color:#e3b46f;font-size:14px}
.left-foot{font-size:9px;letter-spacing:.5px;padding:3px 0 0;background:#1d3023;color:#b6c3a4}
.right{height:448px;grid-template-rows:110px 306px 20px;gap:6px}
.screen{position:relative;border:4px solid #142419;padding:10px 12px 8px;background:#1d3424;box-shadow:inset 2px 2px #0c1c11,inset -2px -2px #536747;color:#e4edc3}
.screen:after{content:'';position:absolute;top:2px;left:2px;right:2px;height:2px;background:#354b31;pointer-events:none}
.screen-top{font-size:12px;line-height:14px;color:#a8be96}.screen-top #mode{color:#edbd6d;font-size:10px;white-space:nowrap;display:flex;align-items:center;gap:6px}.screen-top #mode:before{content:'';width:4px;height:4px;background:#eebc67;box-shadow:2px 0 #775829,0 2px #775829}
h1{font-size:30px;line-height:1;letter-spacing:1px;margin:7px 0 8px;text-shadow:2px 2px #112619;font-weight:normal}
.screen p{font-size:10px;line-height:12px;margin:2px 0;color:#c7d7ad}#edit-hint{font-size:9px;letter-spacing:.15px;color:#91aa7f}
#rack{border:4px solid #17291c;padding:0;gap:0;background:hsl(calc(48deg + var(--texture-hue)) 25% 80%);grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));box-shadow:inset 2px 2px var(--plate-light),inset -2px -2px var(--plate-shadow);position:relative}
.cell{border:0;background:transparent;padding:10px 10px 8px;box-shadow:none;overflow:visible;filter:none}
.cell:nth-child(3n+2),.cell:nth-child(3n){border-left:2px solid #b5b89d;box-shadow:inset 2px 0 #eae5ca}
.cell:nth-child(n+4){border-top:2px solid #a5ad91;box-shadow:inset 0 2px #ebe5ca}
.cell:nth-child(n+4):nth-child(3n+2),.cell:nth-child(n+4):nth-child(3n){box-shadow:inset 2px 2px #ebe5ca}
.cell output{font-size:23px;line-height:24px;background:transparent;color:#30432f;box-shadow:none;align-self:flex-start;position:relative;padding-left:8px}
.cell output:before{content:'';position:absolute;left:0;top:10px;width:4px;height:4px;background:#8d9e79}
.cell label{font-size:13px;line-height:16px;margin-top:auto;background:transparent;color:#34472f;box-shadow:none;letter-spacing:.3px}
.knob{width:64px;height:64px;margin:8px 0 6px;background:transparent url('./materials/knob-crafted.svg') center/64px 64px no-repeat;image-rendering:pixelated;flex:none}
.knob:before{content:'';position:absolute;inset:-8px;background:url('./materials/dial-scale.svg') center/80px 80px no-repeat;z-index:-1;image-rendering:pixelated;pointer-events:none}
.knob:after{left:calc(var(--tick-x,16)*2px - 2px);top:calc(var(--tick-y,5)*2px - 2px);width:4px;height:4px;background:#f3dab0;box-shadow:2px 0 #b49967,0 2px #8f7e52;transform:none}
.cell .rotary-input{inset:-8px;width:80px;height:80px}
.knob:focus-within{outline:2px solid #a36632;outline-offset:9px}
.toggle{margin:15px auto 12px;width:72px;height:48px;min-height:48px;font-size:17px;--button-face:#adb497;color:#40573a;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.toggle:before{inset:4px;clip-path:none;box-shadow:inset 2px 2px #d5dcc0,inset -2px -4px #718768}
.toggle[aria-pressed=true]{--button-face:#bb632e;color:#fff0cc}
.toggle[aria-pressed=true]:before{box-shadow:inset 2px 2px #e8ab63,inset -2px -4px #814a2a}
.cell.unavailable{background:#bcc3a9}.cell.unavailable .toggle{--button-face:#8c9b7d;color:#e7eace;font-size:12px}
.cell.unused{background:transparent;color:#7e9071}.unused>span{font-size:18px;color:#96a184;line-height:24px}.unused p{font-size:9px;letter-spacing:.5px;margin:0 0 3px;color:#7d8e6d}
.blank-socket{width:34px;height:34px;border:0;border-radius:0;background:#c5cbb0;box-shadow:inset 2px 2px #a7b493,inset -2px -2px #e2e4c7;clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,26px 0,26px 4px,30px 4px,30px 8px,34px 8px,34px 26px,30px 26px,30px 30px,26px 30px,26px 34px,8px 34px,8px 30px,4px 30px,4px 26px,0 26px)}
.right footer{font-size:9px;color:#b5c2a7;letter-spacing:.5px;padding:0 4px;line-height:14px}
.outside-note{font-size:12px;color:#95a18c;line-height:18px;max-width:800px}.outside-note a{color:#c1caad;text-underline-offset:3px;font-size:10px;letter-spacing:.5px}
#identity-dialog{background:#dedac1;border:4px solid #1c3020;box-shadow:inset 2px 2px #f4eed0,inset -2px -2px #afb69c,6px 6px #111d14}
#identity-form input,#identity-form select,#identity-form textarea{background-color:#eee9ce;color:#263b28;border-color:#617354;box-shadow:inset 2px 2px #c4caab;font-family:'Redaction 50',serif}
#identity-form h2{letter-spacing:1px}#identity-form #save-editor{--button-face:#395738}
.texture-hue-field label{font-size:11px}.texture-hue-field:after{content:'Reserved for material tint';grid-column:1/4;font-size:10px;color:#637557;display:none}
/* Grid dimensions are divisible by the logical two-pixel unit at 800 x 480. */
@media(min-width:800px){.device{grid-template-columns:208px minmax(0,1fr);gap:12px}.right{grid-template-rows:110px 308px 18px}.cell:nth-child(3n+2) .knob,.cell:nth-child(3n) .knob{left:-1px}}
#parts button:focus-visible::before,#parts button[aria-current=true]:focus-visible::before{box-shadow:inset 0 0 0 2px #f4c474}
.parts-heading span,#parts button>span,.unused p{color:#46563c}
.cell.unavailable output{font-size:17px}
@media(max-width:580px){.cell.unavailable output{font-size:15px}}
/* Preserve the full control target on the 390px responsive review. */
@media(max-width:832px){body{padding:0}.device{box-shadow:none;margin-left:0}.outside-note{padding:6px}}
@media(min-width:581px) and (max-width:799px){.device{grid-template-columns:190px minmax(0,1fr)}.unit-art:before{right:56px}.unit-art img{margin-left:0}.unit-art button{min-width:48px}.cell{padding:10px 6px 8px}.cell output{font-size:21px}.cell label{font-size:12px}.screen{padding:10px 8px}h1{font-size:25px}.screen p{font-size:9px}#edit-hint{font-size:8px}.screen-top{font-size:11px}}
@media(max-width:580px){.device{width:100%;max-width:440px;height:auto;grid-template-columns:1fr;gap:8px;padding:10px}.left{height:246px;grid-template-columns:176px 1fr;grid-template-rows:26px 194px 18px}.unit{grid-row:1/3;border-right:4px solid #24362a;border-bottom:0;padding:10px 8px 6px}.unit-art{height:132px}.unit-art:before{right:52px}.unit-art img{width:80px;height:96px;margin:0 0 0 2px}.unit-art button{min-width:44px;min-height:40px;font-size:12px;margin-bottom:12px}.unit>label{font-size:12px}select{font-size:15px}#parts button{font-size:12px;height:40px;min-height:40px;padding:4px 6px;gap:4px}.parts-heading{font-size:11px}.parts-heading span{font-size:8px}.left-foot{padding-top:3px}.right{height:448px;grid-template-rows:110px 306px 20px}.screen{padding:10px}h1{font-size:27px}.screen p{font-size:9px}#edit-hint{font-size:8px;letter-spacing:0}.screen-top{font-size:11px}.cell{padding:10px 4px 8px}.cell output{font-size:21px;padding-left:6px}.cell label{font-size:11px;letter-spacing:0}.right footer{font-size:7px;letter-spacing:.2px}.toggle{width:66px}.case-screw{width:6px;height:6px}.case-screw:after{top:0;width:2px}.outside-note{font-size:10px;max-width:390px}}

/* Material study 03: authored clusters and ordered edge transitions, no noise. */
#edit-hint:empty{display:block;position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%)}
#edit-hint:not(:empty){color:#edbd6d}
#unit-note:empty{visibility:hidden}
.device{background-image:url('./materials/case-authored.svg');background-size:800px 480px;background-repeat:no-repeat;image-rendering:pixelated}
#rack{isolation:isolate}
#rack::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:url('./materials/enamel-authored.svg') left top/540px 300px no-repeat;image-rendering:pixelated}
#rack .cell{z-index:1}
.unit::before{display:block;inset:0;background:url('./materials/enamel-small.svg') left top/200px 218px no-repeat;opacity:1;filter:none;image-rendering:pixelated}
.screen::before{content:'';position:absolute;inset:0;pointer-events:none;background:url('./materials/glass-dither.svg') left top/540px 102px no-repeat;image-rendering:pixelated}
@media(max-width:799px){#rack::before{background-size:100% 100%}.screen::before{background-size:100% 100%}}