*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--panel:#1b2226;--field:#12181b;--bezel:#34414a;--pipe:#4a5a63;--text:#e6e9e4;--text-soft:#a9b4b0;--amber:#f2b233;--amber-ink:#1b1405;--green:#4fbf6a;--lamp-off:#3a474f;--key-hover:#222b30;--amber-hover:#f6c356;--legend:#1f3526;--legend-text:#bff0c9;--display:"Barlow Condensed", "Arial Narrow", sans-serif;--body:"Barlow", system-ui, sans-serif;--gutter:clamp(16px, 5vw, 64px);--max-w:1200px;--ease:cubic-bezier(.16, 1, .3, 1)}html{scroll-behavior:smooth;scrollbar-color:var(--bezel) var(--panel);scroll-padding-top:5rem}body{background:var(--panel);color:var(--text);font-family:var(--body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;font-size:1.0625rem;line-height:1.6}::selection{background:var(--amber);color:var(--amber-ink)}a{color:inherit;text-underline-offset:.25em;text-decoration-thickness:1px}a:hover{color:var(--amber)}:focus-visible{outline:2px solid var(--amber);outline-offset:3px}.skip-link{left:var(--gutter);z-index:10;background:var(--amber);color:var(--amber-ink);padding:.25rem .75rem;position:absolute;top:-100px}.skip-link:focus{top:.5rem}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.measure{max-width:66ch}.lamp{background:var(--green);width:.75rem;height:.75rem;box-shadow:0 0 0 2px var(--field), 0 0 0 3px var(--bezel), inset 0 -2px 2px #00000059, inset 0 2px 1px #ffffff40;transition:background-color .2s var(--ease);border-radius:50%;flex:none;display:inline-block}.lamp[data-state=amber]{background:var(--amber)}.lamp[data-state=off]{background:var(--lamp-off);box-shadow:0 0 0 2px var(--field), 0 0 0 3px var(--bezel), inset 0 2px 2px #00000073}.status{z-index:5;padding:.875rem var(--gutter);background:var(--panel);border-bottom:1px solid var(--bezel);font-family:var(--display);letter-spacing:.02em;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;font-size:1.0625rem;display:flex;position:sticky;top:0}.status-id{align-items:center;gap:.75rem;display:flex}.status strong{font-weight:600}.status-role{color:var(--text-soft);margin-left:.5rem}.status nav{gap:1.75rem;display:flex}.status nav a{color:var(--text-soft);text-decoration:none}.status nav a:hover{color:var(--amber)}.page{max-width:calc(var(--max-w) + var(--gutter) * 2);padding-inline:var(--gutter);margin-inline:auto}.hero{padding-block:clamp(2.5rem,7vh,5rem) clamp(2rem,5vh,3.5rem)}.h1{font-family:var(--display);letter-spacing:-.015em;font-size:clamp(2.75rem,1.2rem + 4.2vw,5.5rem);font-weight:600;line-height:.98}.h1 span{display:inline-block}.lede{color:var(--text-soft);margin-top:1.5rem;font-size:1.25rem}.lede,.note{text-wrap:pretty}.actions{flex-wrap:wrap;gap:.875rem;margin-top:2rem;display:flex}.btn{border:1px solid var(--amber);background:var(--amber);min-height:3rem;color:var(--amber-ink);font-family:var(--body);letter-spacing:.01em;transition:transform .14s var(--ease), background-color .14s, box-shadow .14s;border-radius:3px;align-items:center;padding:.5rem 1.5rem;font-size:1.0625rem;font-weight:500;text-decoration:none;display:inline-flex;box-shadow:0 3px 6px -2px #0000008c,inset 0 1px #ffffff40}.btn:hover{color:var(--amber-ink);background:var(--amber-hover)}.btn:active{transform:translateY(2px);box-shadow:0 1px 2px #00000080,inset 0 1px #fff3}.btn-quiet{color:var(--text);border-color:var(--bezel);box-shadow:none;background:0 0}.btn-quiet:hover{background:var(--key-hover);color:var(--amber)}.btn-quiet:active{box-shadow:none}.h2{font-family:var(--display);letter-spacing:-.01em;text-wrap:balance;font-size:clamp(2rem,1.2rem + 2.4vw,3.25rem);font-weight:600;line-height:1.02}.note{color:var(--text-soft);margin-top:.875rem}.board{border:1px solid var(--bezel);background:var(--panel);border-radius:4px;padding:clamp(1.25rem,2.5vw,2rem);box-shadow:inset 0 1px #ffffff0a,0 18px 40px -24px #000000b3}.board-head{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:end;gap:.75rem 3rem;display:grid}.board-head .h2{font-size:clamp(1.75rem,1rem + 1.8vw,2.5rem)}.board-head .note{margin-top:0;font-size:1rem}.selector{border:1px solid var(--bezel);background:var(--field);border-radius:3px;flex-wrap:wrap;width:fit-content;max-width:100%;margin-top:1.25rem;display:flex}.selector-pos{all:unset;box-sizing:border-box;font-family:var(--display);letter-spacing:.03em;color:var(--text-soft);cursor:pointer;transition:background-color .16s var(--ease), color .16s var(--ease);align-items:center;gap:.625rem;padding:.5rem 1rem;font-size:1.0625rem;font-weight:500;display:flex}.selector-pos+.selector-pos{border-left:1px solid var(--bezel)}.selector-pos:hover{background:var(--key-hover);color:var(--text)}.selector-pos:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}.selector-pos[aria-pressed=true]{background:var(--panel);color:var(--amber)}.mimic{--tile:24px;border:1px solid var(--bezel);background-color:var(--field);background-image:linear-gradient(90deg,#ffffff09 1px,#0000 1px),linear-gradient(#ffffff09 1px,#0000 1px);background-size:var(--tile) var(--tile);border-radius:3px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;column-gap:4rem;margin-top:.75rem;padding:1.75rem 2rem 2rem;display:grid;position:relative}.pipes{pointer-events:none;position:absolute;inset:0;overflow:visible}.pipes path{fill:none;stroke:var(--pipe);stroke-width:3px;stroke-dasharray:9 6;transition:stroke .24s var(--ease), opacity .24s var(--ease)}.mimic:not([data-active=tutto]) .pipes path[data-on=false]{opacity:.35}.pipes path[data-on=true]{stroke:var(--amber)}.layer{z-index:1;position:relative}.layer-name{border:1px solid var(--bezel);background:var(--panel);width:fit-content;font-family:var(--display);letter-spacing:.06em;color:var(--text-soft);border-radius:2px;margin-bottom:.75rem;padding:0 .5rem;font-size:.9375rem;font-weight:500}.stations{flex-direction:column;gap:1rem;list-style:none;display:flex}.station{border:1px solid var(--pipe);background:var(--panel);transition:opacity .24s var(--ease), border-color .24s var(--ease);border-radius:2px;align-items:center;gap:.75rem;padding:.625rem .75rem;font-size:1rem;line-height:1.35;display:flex}.mimic:not([data-active=tutto]) .station[data-on=true]{border-color:var(--amber)}.station[data-on=false]{opacity:.35}.keys{background:var(--bezel);border:1px solid var(--bezel);grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1.25rem;display:grid}.key{all:unset;box-sizing:border-box;background:var(--panel);cursor:pointer;transition:background-color .16s var(--ease);flex-direction:column;gap:.75rem;padding:1rem 1.25rem 1.5rem;display:flex}.key:hover{background:var(--key-hover)}.key:focus-visible{outline:2px solid var(--amber);outline-offset:-3px}.key[aria-pressed=true]{background:var(--field)}.key-cap{border:1px solid var(--bezel);background:var(--field);border-radius:3px;align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex;box-shadow:inset 0 1px #ffffff0a}.key[aria-pressed=true] .key-cap{border-color:var(--amber)}.key-name{font-family:var(--display);flex:1;font-size:1.5rem;font-weight:600;line-height:1.15}.key[aria-pressed=true] .key-name{color:var(--amber)}.key-switch{border:1px solid var(--bezel);background:var(--panel);border-radius:999px;flex:none;width:2.25rem;height:1.125rem;position:relative}.key-switch:after{content:"";background:var(--text-soft);width:calc(1.125rem - 6px);height:calc(1.125rem - 6px);transition:transform .18s var(--ease), background-color .18s;border-radius:50%;position:absolute;top:2px;left:2px}.key[aria-pressed=true] .key-switch:after{background:var(--amber);transform:translate(1.125rem)}.key-text{font-size:1rem;line-height:1.55}.key-how{color:var(--text-soft)}.total{border:1px solid var(--bezel);background:var(--field);font-family:var(--display);letter-spacing:.01em;border-top:0;flex-wrap:wrap;align-items:baseline;gap:.25rem 1.25rem;padding:.875rem 1.25rem;font-size:1.25rem;display:flex}.total-label{color:var(--amber);font-weight:600}.plates{flex-wrap:wrap;gap:.375rem;margin-top:auto;list-style:none;display:flex}.plates>*{border:1px solid var(--bezel);font-family:var(--display);letter-spacing:.03em;color:var(--text-soft);border-radius:2px;padding:.0625rem .5rem;font-size:.875rem;font-weight:500}.block{margin-top:clamp(4.5rem,10vw,7.5rem)}.annunciator{border:1px solid var(--bezel);background:var(--field);border-radius:3px;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.75rem;margin-top:2rem;padding:.75rem;list-style:none;display:grid}.tile{border:1px solid var(--bezel);background:var(--panel);border-radius:2px;flex-direction:column;gap:.75rem;padding:0 0 1rem;display:flex}.tile-legend{border-bottom:1px solid var(--bezel);background:var(--legend);color:var(--legend-text);font-family:var(--body);letter-spacing:.02em;text-align:center;padding:.625rem .875rem;font-size:1.0625rem;font-weight:500}.tile-text,.tile .plates{padding-inline:.875rem}.tile-spare{background:var(--field)}.tile-spare .tile-legend{background:var(--panel);color:var(--lamp-off)}.tile-text{font-size:1rem;line-height:1.5}.strips{border-top:1px solid var(--bezel);margin-top:2rem;list-style:none}.strip{border-bottom:1px solid var(--bezel);grid-template-columns:minmax(12rem,1fr) minmax(0,2.2fr) minmax(11rem,1fr);align-items:baseline;gap:.5rem 2rem;padding-block:1.25rem;display:grid}.strip-name{font-family:var(--display);font-size:1.375rem;font-weight:600;line-height:1.15}.strip-desc{color:var(--text-soft);max-width:62ch}.strip .plates{justify-content:flex-end;margin-top:0}.about-body{gap:1.25rem;margin-top:1.5rem;font-size:1.1875rem;display:grid}.about-body .plates{margin-top:.5rem}.contact{max-width:calc(var(--max-w) + var(--gutter) * 2);padding:clamp(3rem, 6vw, 4.5rem) var(--gutter) 2.5rem;border-top:1px solid var(--bezel);margin:clamp(5rem,11vw,8rem) auto 0}.colophon{font-family:var(--display);color:var(--text-soft);letter-spacing:.02em;margin-top:4rem}@media (prefers-reduced-motion:no-preference){.mimic[data-active=tutto] .station .lamp{animation:power .9s var(--ease) both;animation-delay:calc(.3s + var(--l,0) * .26s)}@keyframes power{0%,40%{background:var(--lamp-off)}to{background:var(--green)}}.pipes path[data-on=true]{animation:.6s linear infinite flow}@keyframes flow{to{stroke-dashoffset:-15px}}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.key,.station,.lamp,.selector-pos,.pipes path,.key-switch:after{transition:none}}@media (width<=960px){.board-head,.keys{grid-template-columns:1fr}.mimic{grid-template-columns:1fr;row-gap:2.25rem}.pipes{display:none}.layer+.layer:before{content:"";background:repeating-linear-gradient(to bottom, var(--pipe) 0 9px, transparent 9px 15px);width:3px;height:2.25rem;position:absolute;top:-2.25rem;left:1.5rem}.mimic:not([data-active=tutto]) .layer+.layer:before{background-image:repeating-linear-gradient(to bottom, var(--amber) 0 9px, transparent 9px 15px)}.strip{grid-template-columns:1fr}.strip .plates{justify-content:flex-start}}@media (width<=560px){.status-role{display:none}.status{gap:.5rem 1rem}.status nav{gap:1rem}.board{padding:1.25rem 1rem}.mimic{padding:1.5rem 1rem}.selector{width:100%}.selector-pos{flex:40%;justify-content:center}.selector-pos:nth-child(3){border-left:0}.selector-pos:nth-child(n+3){border-top:1px solid var(--bezel)}}
