.mast,main,footer{max-width:1240px;margin:auto}.intro{padding:4rem 2.5rem 3rem;max-width:920px}.lab{display:grid;grid-template-columns:1.55fr 1fr;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0 2.5rem}.workspace{background:var(--shoal);padding:1.3rem 1.5rem;display:flex;flex-direction:column;min-height:690px}.workspace-top,.workbench-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem}.workspace-top #status{font-size:.72rem;color:var(--slate);max-width:60%;text-align:right}.device-stage{flex:1;display:grid;place-items:center;padding:2.5rem 0}.device{position:relative;background:#eeeae2;border-radius:14px;box-shadow:0 2px 2px #17273625,0 20px 35px #17273622,inset 0 0 0 1px #fff9,inset 0 0 0 2px #a4a099; width:280px;aspect-ratio:61.8/98;padding:17px 14px 33px;transition:width .2s}.device[data-model=X4CLASSIC]{width:294px;aspect-ratio:69/114;padding:24px 19px 34px}.device[data-model=X4PRO]{width:294px;aspect-ratio:69/111;background:#292e33;padding:20px 19px 34px;box-shadow:0 2px 2px #17273650,0 20px 35px #17273635,inset 0 0 0 2px #43484c}.device canvas{display:block;width:100%;height:100%;background:#fbfbf4;border:2px solid #a29f96;touch-action:none}.device[data-model=X4PRO] canvas{border-color:#14181b}.hardware-key{position:absolute;background:#b7b6b0;box-shadow:inset 0 0 0 1px #858884;border-radius:3px;touch-action:none;user-select:none}.hardware-key span{opacity:0;position:absolute;white-space:nowrap;font-size:.65rem;background:var(--ink);color:var(--paper);padding:5px 8px;pointer-events:none;border-radius:4px}.hardware-key:hover span,.hardware-key:focus-visible span{opacity:1}.hardware-key.pressed{background:var(--route)}.hardware-key[data-edge=left]{width:9px;height:32px;left:-5px;transform:translateY(-50%)}.hardware-key[data-edge=left] span{right:15px}.hardware-key[data-edge=right]{width:9px;height:32px;right:-5px;transform:translateY(-50%)}.hardware-key[data-edge=right] span{left:15px}.hardware-key[data-edge=top]{height:7px;width:31px;top:-4px;transform:translateX(-50%)}.hardware-key[data-edge=top] span{bottom:15px}.hardware-key[data-edge=bottom]{width:38px;height:9px;bottom:8px;transform:translateX(-50%)}.hardware-key[data-edge=bottom] span{top:16px}.home-key{position:absolute;left:calc(50% - 11px);bottom:8px;width:22px;height:22px;border-radius:50%;border:1px solid #777;background:transparent;touch-action:none}.home-key[hidden]{display:none}.workbench-bottom{font-size:.65rem;color:var(--slate)}.quiet{padding:7px;background:transparent;color:var(--slate);font-size:.75rem}.controls{padding:2.1rem}.controls h2{margin-bottom:1.8rem}label,legend{font-size:.8rem;display:block;font-weight:550;margin-bottom:.6rem}select{width:100%;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:4px;padding:.75rem;margin-bottom:1rem}fieldset{border:0;padding:0;margin:1.5rem 0}.models{display:flex;gap:6px}.models label{flex:1;position:relative}.models input{position:absolute;opacity:0;inset:0}.models span{display:block;border:1px solid var(--rule);padding:.65rem .35rem;border-radius:4px;text-align:center;font-size:.73rem}.models input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--paper)}.models input:focus-visible+span{outline:3px solid var(--route);outline-offset:3px}.secondary{background:transparent;color:var(--ink);border:1px solid var(--rule);margin-bottom:.6rem}.hint{font-size:.78rem;color:var(--slate);line-height:1.6}.controls .hint{margin:1.2rem 0}.controls>p:not(.eyebrow):not(.hint){font-size:.88rem;color:var(--slate)}details{border-top:1px solid var(--rule);padding:.85rem 0;font-size:.8rem}summary{cursor:pointer}pre{max-height:220px;overflow:auto;font:11px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}input[type=file]{max-width:100%;font-size:.75rem}input[hidden],label[hidden]{display:none}.install{padding:5rem 2.5rem;display:grid;grid-template-columns:1.2fr 1fr;gap:7rem;border-bottom:1px solid var(--rule);margin:0 2.5rem}.install h2{font-size:3rem}.flash-panel{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:1.5rem}.check{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;line-height:1.5;margin:1rem 0}.check input{margin-top:5px;accent-color:var(--route)}progress{width:100%;height:5px;accent-color:var(--route);margin-top:1rem}#flash-status{font-size:.8rem;overflow-wrap:anywhere}.about{padding:4rem 2.5rem}.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;margin:2rem 0}.projects article>span{font-size:.7rem;color:var(--route)}.projects h3{margin-top:.6rem}.projects p{color:var(--slate);font-size:.88rem}footer{padding:2rem 2.5rem;border-top:1px solid var(--rule);display:flex;justify-content:space-between;font-size:.75rem;color:var(--slate)}@media(max-width:850px){.lab{grid-template-columns:1fr}.workspace{min-height:640px}.controls{padding:1.5rem}.install{grid-template-columns:1fr;gap:2rem;padding:3rem 0}.projects{grid-template-columns:1fr;gap:1rem}.intro{padding:3rem 1.5rem}.lab,.install{margin:0 1.5rem}.about{padding:3rem 1.5rem}footer{padding:1.5rem;gap:1rem;flex-wrap:wrap}}
/* Let grid children shrink to the viewport rather than their select/console
   intrinsic widths. Hidden control labels must not extend the mobile page. */
.workspace,.controls,.flash-panel,.install>div{min-width:0}
.reset-pinhole{position:absolute;top:-2px;width:8px;height:4px;border-radius:50%;background:#5f6363;padding:0;transform:translateX(-50%)}
@media(max-width:850px){.hardware-key span{display:none}.workspace-top,.workbench-bottom{flex-wrap:wrap}.device-stage{min-width:0}.device,.device[data-model=X4CLASSIC],.device[data-model=X4PRO]{max-width:calc(100% - 12px)}}