@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:block;src:url(fonts/inter-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:block;src:url(fonts/inter-greek-400.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:block;src:url(fonts/inter-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:block;src:url(fonts/inter-greek-600.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Inter";font-weight:700;font-style:normal;font-display:block;src:url(fonts/inter-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:700;font-style:normal;font-display:block;src:url(fonts/inter-greek-700.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Manrope";font-weight:600;font-style:normal;font-display:block;src:url(fonts/manrope-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-weight:600;font-style:normal;font-display:block;src:url(fonts/manrope-greek-600.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Manrope";font-weight:800;font-style:normal;font-display:block;src:url(fonts/manrope-latin-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-weight:800;font-style:normal;font-display:block;src:url(fonts/manrope-greek-800.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}


:root{
  --mm:3.7795px;
  --bg:#ECEBE7; --panel:#FFFFFF; --ink:#1E1C1A; --muted:#5E5A54; --line:#D6D2CA; --accent:#E2611E;
  --wood:#D9C29A; --grain:rgba(120,90,50,.16); --face:#E9E7E2; --face-ink:#4A4640;
  --knob-v:#CFCCC6; --mark-v:#1E1C1A; --knob-s:#E2611E; --mark-s:#FFF4EC;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#16181A; --panel:#202326; --ink:#ECEBE7; --muted:#A8A49C; --line:#34383C; }
}
:root[data-theme="dark"]{ --bg:#16181A; --panel:#202326; --ink:#ECEBE7; --muted:#A8A49C; --line:#34383C; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1220px;margin:0 auto;padding:28px 20px 48px}
header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 6px}
h1{margin:0;font-size:38px;line-height:1;font-weight:700;letter-spacing:-.02em}
.lede{margin:0;max-width:540px;color:var(--muted);font-size:15px;line-height:1.45}
.grid{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.main{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.side{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:16px}
.noselect,.device,.knob,.turn,.cube3dwrap{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* device */
.device{width:100%;max-width:580px;padding:4.5%;border-radius:18px;background-color:var(--wood);
  background-image:repeating-linear-gradient(92deg,var(--grain) 0 2px,transparent 2px 9px),repeating-linear-gradient(88deg,transparent 0 23px,var(--grain) 23px 24px);
  box-shadow:0 20px 44px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.12)}
.faceplate{position:relative;border-radius:8px;background:var(--face);padding:7% 7% 5%;display:flex;flex-direction:column;align-items:center;gap:5%;box-shadow:inset 0 1px 3px rgba(0,0,0,.18)}
.glass{width:100%;padding:3.5%;border-radius:8px;background:#0B0C0D;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.35)}
#big,#big2{display:block;width:100%;aspect-ratio:1/1;border-radius:3px;background:#030404}
.screens{width:100%;display:flex;gap:6%}
.screens .glass{flex:1 1 0;min-width:0}
.g2,#mini2{display:none}
.device.dual .g2{display:block}
.knobs{width:100%;display:flex;justify-content:space-around;align-items:flex-start;padding-top:2%}
.knobcol{display:flex;flex-direction:column;align-items:center;gap:8px}
.knobrow{display:flex;align-items:center;gap:12px}
.knob{position:relative;width:calc(var(--kmm,15)*5.87px);height:calc(var(--kmm,15)*5.87px);border-radius:50%;cursor:grab;touch-action:none;outline:none;
  box-shadow:0 6px 14px rgba(0,0,0,.3), inset 0 -5px 9px rgba(0,0,0,.2), inset 0 3px 5px rgba(255,255,255,.25)}
.knob.v{background:var(--knob-v)} .knob.s{background:var(--knob-s)}
.knob:focus-visible{box-shadow:0 0 0 3px var(--face),0 0 0 6px var(--accent)}
.knob .ring{position:absolute;inset:-9%;border-radius:50%;background:conic-gradient(var(--face-ink) calc(var(--p,0)*1turn), transparent 0);
  -webkit-mask:radial-gradient(closest-side, transparent 90%, #000 92%);mask:radial-gradient(closest-side, transparent 90%, #000 92%);pointer-events:none}
.knob .rot{position:absolute;inset:0;border-radius:50%;transition:transform .09s linear;
}
.knob .mark{position:absolute;left:50%;top:9px;width:6px;height:18px;margin-left:-3px;border-radius:3px}
.device.kbig .knobrow{display:grid;grid-template-columns:auto auto;justify-items:center;gap:10px 16px}
.device.kbig .knob{grid-column:1 / 3;order:-1}
.knob.v .mark{background:var(--mark-v)} .knob.s .mark{background:var(--mark-s)}
.turn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.55);color:#1E1C1A;font-size:18px;cursor:pointer}
.turn:hover{background:#fff}
.klabel{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--face-ink)}
.keyline{font-size:12px;color:var(--muted);text-align:center;line-height:1.6;max-width:560px}
kbd{display:inline-block;min-width:20px;padding:0 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--panel);font:600 12px/18px "Inter",system-ui,sans-serif;text-align:center;color:var(--ink)}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.card h2{margin:0 0 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px}
.now{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.now b{font-size:22px;letter-spacing:-.01em}
.now span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.small{font-size:12px;color:var(--muted);line-height:1.45;margin:8px 0 0}
.seg{display:flex;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1 1 auto;border:0;border-radius:7px;background:transparent;color:var(--ink);font:600 13px/1 "Inter",system-ui,sans-serif;padding:10px 8px;cursor:pointer;min-height:40px}
.seg button[aria-pressed="true"]{background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.blurb{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.45;min-height:19px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.row:first-of-type{border-top:0}
.row label{cursor:pointer}
.switch{position:relative;width:46px;height:28px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:14px;background:var(--line);transition:background .15s}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.switch input:checked + span{background:var(--accent)}
.switch input:checked + span::after{transform:translateX(18px)}
.switch input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
select,input[type=url]{font:500 14px "Inter",system-ui,sans-serif;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);min-height:36px}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;padding:10px 14px;font:600 13px "Inter",system-ui,sans-serif;cursor:pointer;min-height:44px}
.btn.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.swrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.swrow:first-of-type{border-top:0}
.swrow span{font-size:14px}
.sw{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sw button{width:30px;height:30px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);cursor:pointer;padding:0}
.sw button[aria-pressed="true"]{border-color:var(--ink)}
.swname{font-size:12px;color:var(--muted);margin-left:6px}

/* stations */
.st{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:9px 0;border-top:1px solid var(--line);align-items:center}
.st:first-child{border-top:0}
.st b{font-size:14px;font-weight:600;cursor:pointer}
.st .stat{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.st .stat.ok{color:#2E7D4F} .st .stat.bad{color:#B3261E}
.st input{grid-column:1 / -1;width:100%;font-size:12px;min-height:32px;display:none}
#stList.edit .st input{display:block}
#log{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.35;min-height:110px}
#log li{color:var(--muted)} #log li:first-child{color:var(--ink);font-weight:500}

/* 3d cube */
.cube3dwrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cube3dwrap .cubetext{flex:1 1 180px}
button,.knob,.turn,a{-webkit-tap-highlight-color:transparent}
.turn,.btn,.seg button{touch-action:manipulation}
.scene{width:190px;height:190px;perspective:700px;flex:none;cursor:grab;touch-action:none}
.cube3d{position:relative;width:130px;height:130px;margin:30px;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(-32deg)}
.cf{position:absolute;inset:0;background-color:var(--wood);
  background-image:repeating-linear-gradient(92deg,var(--grain) 0 1px,transparent 1px 6px)}
.cf.front{transform:translateZ(65px);transform-style:preserve-3d}
.cf.top{transform:rotateX(90deg) translateZ(65px);filter:brightness(1.08)}
.cf.right{transform:rotateY(90deg) translateZ(65px);filter:brightness(.82)}
.cf.left{transform:rotateY(-90deg) translateZ(65px);filter:brightness(.82)}
.cf.back{transform:rotateY(180deg) translateZ(65px);filter:brightness(.9)}
.cf.bottom{transform:rotateX(-90deg) translateZ(65px);filter:brightness(.6)}
.cf.front .fp{position:absolute;inset:6%;background:var(--face);border-radius:2px}
.cf.front canvas{position:absolute;left:36.5%;top:18%;width:27%;height:27%;background:#000}
.cube3d.dual #mini{left:16.5%} .cube3d.dual #mini2{display:block;left:56.5%}
.cf.front .mk{position:absolute;width:calc(var(--kmm,15)*1%);height:calc(var(--kmm,15)*1%);top:calc((72 - var(--kmm,15) / 2)*1%);transform-style:preserve-3d}
.cf.front .mk .kr{position:absolute;inset:0;transform-style:preserve-3d}
.cf.front .mk .sh{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.32) 45%,transparent 72%)}
.cf.front .mk .ly{position:absolute;inset:0;border-radius:50%;background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.34)),var(--kc);
  background-image:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.34))}
.cf.front .mk .ly.edge{background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18))}
.cf.front .mk .cap{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.28),transparent 60%),var(--kc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.cf.front .mk .cap i{position:absolute;left:50%;top:9%;width:12%;height:34%;margin-left:-6%;border-radius:1px;background:var(--km)}
.cf.front .mk.v{left:calc((30 - var(--kmm,15) / 2)*1%);--kc:var(--knob-v);--km:var(--mark-v)} .cf.front .mk .ly{background-color:var(--kc)}
.cf.front .mk.s{left:calc((70 - var(--kmm,15) / 2)*1%);--kc:var(--knob-s);--km:var(--mark-s)}
.cf.back{background:#D9C29A;padding:0}
.cf.back svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cf.top .holes{position:absolute;left:27%;top:5%;width:46%;height:46%;border-radius:50%;
  background:radial-gradient(circle,rgba(30,25,20,.85) 0 32%,transparent 36%) 0 0/4.5px 4.5px}
.cubetext{font-size:13px;color:var(--muted);line-height:1.45;margin:0}
.cubetext b{color:var(--ink)}
/* true size: every dimension in millimetres, taken from the Cube C1 drawings */
.device.true{width:calc(100*var(--mm));height:calc(100*var(--mm));max-width:none;padding:0;position:relative;border-radius:calc(1.5*var(--mm))}
.device.true .faceplate{position:absolute;left:calc(6*var(--mm));top:calc(6*var(--mm));width:calc(88*var(--mm));height:calc(88*var(--mm));padding:0;display:block;border-radius:calc(1*var(--mm))}
.device.true .glass{position:absolute;left:calc(30.5*var(--mm));top:calc(12*var(--mm));width:calc(27*var(--mm));padding:0;border-radius:0;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.device.true #big,.device.true #big2{border-radius:0}
.device.true .screens{display:contents}
.device.true.dual .glass{left:calc(10.5*var(--mm))}
.device.true.dual .glass.g2{left:calc(50.5*var(--mm))}
.device.true .knobs,.device.true .knobcol,.device.true .knobrow{display:contents}
.device.true .turn{display:none}
.device.true .knob{position:absolute;width:calc(var(--kmm,15)*var(--mm));height:calc(var(--kmm,15)*var(--mm));top:calc((66 - var(--kmm,15) / 2)*var(--mm));box-shadow:0 calc(.6*var(--mm)) calc(1.4*var(--mm)) rgba(0,0,0,.35), inset 0 -1px 2px rgba(0,0,0,.2)}
.device.true .knob.v{left:calc((24 - var(--kmm,15) / 2)*var(--mm))} .device.true .knob.s{left:calc((64 - var(--kmm,15) / 2)*var(--mm))}
.device.true .knob .mark{top:calc(1.2*var(--mm));width:calc(1.2*var(--mm));height:calc(4*var(--mm));margin-left:calc(-.6*var(--mm));border-radius:calc(.6*var(--mm))}
.device.true .klabel{position:absolute;top:calc(76*var(--mm));width:calc(30*var(--mm));text-align:center;font-size:calc(2.4*var(--mm));letter-spacing:.1em}
.device.true .knobcol:first-child .klabel{left:calc(9*var(--mm))} .device.true .knobcol:last-child .klabel{left:calc(49*var(--mm))}
.cardref{width:calc(85.6*var(--mm));height:calc(53.98*var(--mm));max-width:100%;border:2px dashed var(--muted);border-radius:calc(3.2*var(--mm));display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);margin:10px 0}
#calib[hidden]{display:none}
.rangerow{display:flex;align-items:center;gap:10px;font-size:13px}
.rangerow input{flex:1}
/* standalone app window: only the Cube */
body.appmode{overflow:hidden}
.appmode .wrap{max-width:none;padding:0;margin:0}
.appmode header,.appmode .side,.appmode .keyline,.appmode .turn{display:none !important}
.appmode .grid{display:block}
.appmode .main{min-height:100vh;justify-content:center;align-items:center;padding:16px;box-sizing:border-box}
.appmode .device.kbig .knobrow{display:flex}
@media (max-width:640px){
  .keyline{display:none}
  .device{padding:4%;border-radius:14px}
  .faceplate{padding:6% 6% 5%}
  .knobrow{gap:8px}
  .swrow{flex-wrap:wrap}
  .sw{justify-content:flex-start}
  .row{flex-wrap:wrap}
  .row select{max-width:100%}
  .card{padding:14px}
}
@media (max-width:380px){ .turn{width:32px;height:32px;font-size:15px} .knobrow{gap:6px} }
@media (max-width:640px){h1{font-size:30px}.knob{width:calc(var(--kmm,15)*4.8px);height:calc(var(--kmm,15)*4.8px)}.turn{width:36px;height:36px}}

/* ---------------- web app pages ---------------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;font:600 14px/1 Inter,system-ui,sans-serif}
.iconbtn:hover{border-color:var(--muted)}
.iconbtn svg{width:20px;height:20px}
body[data-page="app"]{overflow-x:hidden}
body[data-page="app"] .wrap{max-width:none;padding:0}
.stage{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:64px 16px 28px}
.stage .device{width:min(580px,100%)}
.stage .device.true{width:calc(100*var(--mm))}
.appbar{position:fixed;top:14px;right:16px;z-index:5}
.statusline{width:min(580px,100%);text-align:center}
.statusline .card{background:transparent;border:0;padding:0}
.statusline .now{justify-content:center;gap:10px}
.statusline .now span{display:none}
.statusline .small{margin:4px 0 0}
body[data-page="app"] .keyline{opacity:.85}
@media (display-mode: standalone){ .stage{padding-top:56px} }
body[data-page="settings"] .wrap{max-width:1180px}
.sethead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sethead h1{margin:0}
.cubestate{margin:6px 0 0;font-size:13px;color:var(--muted)}
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px;align-items:start}
.setgrid .card{min-width:0}
.note{font-size:12px;color:var(--muted);line-height:1.45;margin:10px 0 0}
.appbar{top:max(14px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right))}
@media (max-width:640px){
  .stage{justify-content:flex-start;padding:max(64px, calc(env(safe-area-inset-top) + 56px)) 12px max(20px, env(safe-area-inset-bottom))}
  body[data-page="settings"] .wrap{padding:18px 12px 36px}
  .sethead{align-items:flex-start}
  .sethead h1{font-size:30px}
  .sethead .iconbtn{width:100%;justify-content:center}
  .setgrid{gap:12px}
}