/* Split screen: the logo and the menu on paper at the left, a full-height stage at the right that draws the system
   under the pointer. No boxes around anything. */
@font-face{font-family:NotoThai;src:url(fonts/noto-sans-thai-400.ttf);font-weight:400;font-display:swap}
@font-face{font-family:NotoThai;src:url(fonts/noto-sans-thai-500.ttf);font-weight:500;font-display:swap}
@font-face{font-family:NotoThai;src:url(fonts/noto-sans-thai-600.ttf);font-weight:600;font-display:swap}

:root{--paper:#f3f1ea;--ink:#14251d;--muted:#5b6a62;--accent:#0b7d6e;--stage:#0f3a2e;--stage-ink:#eef6f0;--aqua:#6fe0cf}
@media (prefers-color-scheme:dark){
 :root{--paper:#0b100e;--ink:#e7efea;--muted:#8fa099;--accent:#6fe0cf;--stage:#12382d}
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-family:NotoThai,"Leelawadee UI",Tahoma,sans-serif;background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}

.split{position:relative;min-height:100vh;display:grid;grid-template-rows:auto 1fr;width:48%;padding:40px 44px 40px 52px}
.split::after{content:"";position:fixed;inset:0 0 0 48%;background:var(--stage)}
.top{display:flex;align-items:center;gap:16px}
.brand{flex:none;width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:2.4}
h1{font-size:clamp(24px,2.3vw,32px);font-weight:600;line-height:1.3}

.menu{list-style:none;align-self:center;padding:28px 0}
.menu a,.row{display:flex;align-items:baseline;gap:18px;padding:10px 0;color:inherit;text-decoration:none;border-radius:4px;cursor:pointer}
.row{cursor:default}
.no{flex:none;width:2.2em;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
.name{font-size:clamp(19px,1.7vw,25px);font-weight:600;line-height:1.35;transition:transform .2s,color .2s}
.menu a .name::after{content:"↗";display:inline-block;margin-left:.35em;font-weight:400;opacity:0;transform:translate(-4px,4px);transition:opacity .2s,transform .2s}
.off .name{font-weight:500;color:var(--muted)}
.on .name{color:var(--accent);transform:translateX(10px)}
.on .no{color:var(--accent)}
.on a .name::after{opacity:1;transform:none}
.menu a:focus-visible,.row:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* the stage */
.panel{position:fixed;inset:0 0 0 48%;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:56px 64px;
 color:var(--stage-ink);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .3s,visibility 0s .3s}
.on .panel{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s}
.menu li::before{content:attr(data-no);position:fixed;top:26px;right:56px;z-index:1;font-size:132px;font-weight:600;line-height:1;
 letter-spacing:-.04em;color:var(--stage-ink);opacity:0;transition:opacity .3s}
.menu li.on::before{opacity:.12}

.art{flex:1;min-height:0;width:100%;max-width:520px;margin:0 auto 20px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.art .thin{stroke-width:1;opacity:.45}
.art .w{stroke:var(--aqua)}
.art .wf{fill:var(--aqua);stroke:none;opacity:.22}
.art .tone{fill:currentColor;stroke:none}
.art .bar{stroke-width:16;stroke-linecap:butt}
.art .wave{stroke-width:5}
.art .lining{stroke-width:8}
.art circle{fill:currentColor;stroke:none}
.art circle.w{fill:var(--aqua)}
.art .d{stroke-dasharray:1;stroke-dashoffset:0}
.on .art .d{animation:draw 1.1s cubic-bezier(.3,.7,.2,1) both}
@keyframes draw{from{stroke-dashoffset:1}}
.off .art{stroke-dasharray:7 7;opacity:.75}

.desc{max-width:34em;font-size:clamp(17px,1.45vw,21px);line-height:1.6}
.st{margin-top:16px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px;color:var(--aqua)}
.st::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:currentColor}
.pilot .st::before{background:none;border:2px solid currentColor}
.off .st{color:var(--stage-ink);opacity:.8}
.off .st::before{background:none;border:2px dashed currentColor}

@media (max-width:900px){
 /* no pointer to follow: every system shows its own lines under its name */
 .split{width:auto;display:block;padding:26px 22px 30px}
 .split::after,.menu li::before,.art{display:none}
 .brand{width:34px;height:34px}
 .menu{padding:18px 0 0}
 .menu li{padding:10px 0 14px}
 .menu a,.row{padding:4px 0}
 .name,.on .name{font-size:20px;transform:none}
 .menu a .name::after{opacity:1;transform:none}
 .panel,.on .panel{position:static;display:block;padding:0 0 0 calc(2.2em * .7 + 18px);color:var(--ink);opacity:1;visibility:visible;transform:none}
 .desc{font-size:15px;line-height:1.55;color:var(--muted)}
 .st,.off .st{margin-top:6px;font-size:14px;color:var(--accent);opacity:1}
 .off .st{color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}