:root{
  --bg:#0f1116; --bg2:#171a22; --bg3:#1e222c; --ink:#eef1f7; --dim:#a3abbd; --line:#2d3341;
  --chrome:#cfd6e4; --chrome2:#ffffff; --wood:#b0793c; --wood2:#e0a765;
  --t-straight:#e3705f; --t-circle:#e0b54a; --t-parabola:#7fc48a; --t-cycloid:#8fb9e8;
  --t-mine:#c79be6; --good:#7fc48a; --bad:#e3705f; --warn:#e0b54a;
  --shadow:0 2px 0 rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1100px 620px at 50% -12%, #1b2030 0%, var(--bg) 60%);
  color:var(--ink);
  font:16px/1.55 "Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  min-height:100vh;
}
header.top{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 24px;
  padding:20px 22px 0; max-width:1080px; margin:0 auto;
}
.brand{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.logo{
  width:26px; height:26px; border-radius:50%; align-self:center; flex:none;
  background:radial-gradient(circle at 34% 28%, #ffffff, #cfd6e4 44%, #6d7486 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.55);
}
h1{font-size:30px; margin:0; letter-spacing:-.01em}
.tag{margin:0; color:var(--dim); font-size:15px; font-style:italic}
.tabs{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
.tab{
  background:transparent; color:var(--dim); border:1px solid transparent; border-bottom:none;
  padding:8px 14px; border-radius:8px 8px 0 0; cursor:pointer; font:inherit; font-size:15px;
}
.tab[aria-selected="true"]{background:var(--bg2); color:var(--ink); border-color:var(--line)}
.tab:hover{color:var(--ink)}
main{max-width:1080px; margin:0 auto; padding:0 22px 40px}
.panel{
  background:var(--bg2); border:1px solid var(--line); border-radius:0 12px 12px 12px;
  padding:20px; margin-top:-1px;
}
.panel[hidden]{display:none}
h2{font-size:20px; margin:26px 0 10px; letter-spacing:-.01em}
.panel > h2:first-child{margin-top:0}
p{margin:10px 0}
.lede{color:var(--dim); font-size:17px; max-width:72ch}
.hint{color:var(--dim); font-size:14px; max-width:78ch}
.dim{color:var(--dim)}
.warn{color:var(--warn); border-left:3px solid var(--warn); padding-left:12px; font-size:14.5px; max-width:78ch}
kbd{
  background:var(--bg3); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:4px; padding:1px 6px; font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
a{color:var(--t-cycloid)}
.controls{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin:0 0 14px}
.controls.tight{margin:10px 0 6px}
.ctl{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--dim)}
.ctl.ck{gap:6px; cursor:pointer}
.ctl input[type=range]{width:180px; accent-color:var(--t-cycloid)}
.ctl .val{color:var(--ink); font-variant-numeric:tabular-nums; min-width:11ch}
select,button{font:inherit}
select{
  background:var(--bg3); color:var(--ink); border:1px solid var(--line);
  border-radius:7px; padding:6px 9px;
}
button{
  background:var(--bg3); color:var(--ink); border:1px solid var(--line);
  border-radius:7px; padding:7px 14px; cursor:pointer; box-shadow:var(--shadow);
}
button:hover{border-color:#47506480; background:#242936}
button.primary{background:linear-gradient(#3b6fb0,#2f5a91); border-color:#4d80c4}
button.primary:hover{background:linear-gradient(#457cc0,#35639e)}
button:disabled{opacity:.45; cursor:default}
.stage{
  position:relative; margin:6px 0 14px;
  background:linear-gradient(180deg,#12151d,#0d1015);
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
canvas{display:block; width:100%; height:auto}
canvas.draggable{touch-action:none}
.clock{
  position:absolute; top:10px; right:14px; margin:0;
  font:600 26px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--chrome); text-shadow:0 1px 3px rgba(0,0,0,.8); font-variant-numeric:tabular-nums;
}
.split{display:grid; grid-template-columns:1fr 1fr; gap:22px}
table.grid{
  border-collapse:collapse; width:100%; margin:8px 0 6px; font-size:14px;
  font-variant-numeric:tabular-nums;
}
table.grid caption{
  caption-side:top; text-align:left; color:var(--dim); font-size:13px; padding:0 0 6px;
}
table.grid th,table.grid td{
  border-bottom:1px solid var(--line); padding:6px 9px; text-align:right;
}
table.grid th:first-child,table.grid td:first-child{text-align:left}
table.grid thead th{color:var(--dim); font-weight:600; border-bottom-color:#3a4254}
tr.win td{color:var(--t-cycloid)}
tr.lose td{color:var(--t-straight)}
td.ok{color:var(--good)} td.no{color:var(--bad)}
.swatch{
  display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px;
  vertical-align:baseline;
}
.verdict{
  font-size:16px; border:1px solid var(--line); border-left-width:3px;
  border-radius:8px; padding:10px 14px; background:var(--bg3); max-width:78ch;
}
.verdict.good{border-left-color:var(--good)}
.verdict.bad{border-left-color:var(--bad)}
ul{margin:10px 0; padding-left:22px; max-width:78ch}
li{margin:5px 0}
footer{
  max-width:1080px; margin:0 auto; padding:0 22px 34px; color:var(--dim); font-size:13.5px;
}
@media (max-width:820px){
  .split{grid-template-columns:minmax(0,1fr)}
  h1{font-size:25px}
  .tabs{margin-left:0; width:100%}
  .clock{font-size:20px}
  .ctl{flex-wrap:wrap; max-width:100%}
  .ctl input[type=range]{width:auto; flex:1 1 120px; min-width:0}
  table.grid{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  #tbl-facts td{overflow-wrap:anywhere}
  table.grid:not(#tbl-facts) td+td{white-space:nowrap}
}