:root{
      --bg:#0b0f14;
      --panel:#111826;
      --text:#e7eefc;
      --muted:#a9b8d6;
      --line:rgba(231,238,252,.12);
      --accent:#7dd3fc;
      --accent2:#a78bfa;
      --good:#34d399;
      --warn:#fbbf24;
      --bad:#fb7185;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      overflow:hidden;
      font-family:var(--sans);
      font-size:14px;
      line-height:1.45;
      color:var(--text);
      background:
        radial-gradient(1200px 800px at 70% -10%, rgba(167,139,250,.20), transparent 55%),
        radial-gradient(1000px 700px at 10% 10%, rgba(125,211,252,.18), transparent 55%),
        linear-gradient(180deg, #070a0f, var(--bg) 30%, #070a0f);
    }

    main{
      width:100vw;
      height:100vh;
      padding:14px;
      display:grid;
      grid-template-columns: minmax(0, 80%) minmax(300px, 20%);
      gap:14px;
      min-height:0;
      align-items:stretch;
    }

    .panel{
      height:100%;
      border:1px solid var(--line);
      background:rgba(17,24,38,.45);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      min-height:0;
      display:flex;
      flex-direction:column;
    }

    .panelhead{
      padding:14px 14px 10px 14px;
      border-bottom:1px solid var(--line);
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
    }
    .panelhead h2{
      margin:0;
      font-size:16px;
      letter-spacing:.2px;
      line-height:1.2;
    }
    .meta{
      color:var(--muted);
      font-size:12px;
      margin-top:4px;
    }

    .tag{
      font-size:11px;
      padding:6px 9px;
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--muted);
      background:rgba(15,23,36,.55);
      white-space:nowrap;
    }

    .panelbody{
      padding:14px;
      overflow:auto;
      min-height:0;
    }

    
    #vizPanel .panelbody{
      display:flex;
      flex-direction:column;
      gap:12px;
      overflow:hidden;   
      min-height:0;
    }
    #canvasControls{ flex:0 0 auto; }
    #vizPanel .note{ flex:0 0 auto; }



    #vizPanel .panelhead{display:none;}
#vizPanel .note{display:none;}
#vizPanel .footerNav{display:none;}



    #secMeta{ display:none; }
    #lessonNav{
      position:sticky;
      bottom:0;
      z-index:9;
      background: rgba(13,18,27,.92);
      backdrop-filter: blur(8px);
      border-top: 1px solid var(--line);
    }
    #lessonNav .hint{ display:none; } 
    .navrow > button{ min-width:160px; }
    .navrow{ gap:14px; }

    
    #canvasControls > *{ width:100%; }
    .pill, .controlrow{ min-height:46px; }
    .pill{ display:flex; width:100%; justify-content:space-between; }
    .pill select{ flex:1 1 auto; min-width:0; }


    #textPanel .panelbody{
      
      flex:1 1 auto;
      min-height:0;
      overflow:auto;
      text-align: justify;
      text-justify: inter-word;
    }
    #lessonNav{
      flex:0 0 auto;
    }
    #textPanel .panelbody p,
    #textPanel .panelbody li{
      text-align: justify;
      text-justify: inter-word;
    }


    
    #vizPanel .panelbody{
      display:flex;
      flex-direction:column;
      gap:10px;
      overflow:hidden;
    }
    #canvasControls{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
      gap:10px;
      align-items:stretch;
      justify-items:stretch;
    }

    canvas{
      position:relative;
      z-index:1;
      width:100%;
      flex:1 1 auto;
      height:100%;
      min-height:0;
      background: rgba(9,13,20,.60);
      border:1px solid var(--line);
      border-radius:16px;
      display:block;
      touch-action: manipulation;
    }

    .note{
      border:1px solid var(--line);
      background:rgba(15,23,36,.55);
      border-radius:14px;
      padding:12px;
    }
    .note b{ color: var(--accent); }
    .note .muted{ color: var(--muted); }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      background:rgba(17,24,38,.65);
      border:1px solid var(--line);
      box-shadow: 0 8px 16px rgba(0,0,0,.20);
    }
    .pill label{
      font-size:12px;
      color:var(--muted);
    }

    select{
      color:var(--text);
      background:rgba(15,23,36,.8);
      border:1px solid var(--line);
      border-radius:12px;
      padding:7px 10px;
      outline:none;
      cursor:pointer;
    }

    button{
      cursor:pointer;
      color:var(--text);
      background:rgba(15,23,36,.8);
      border:1px solid var(--line);
      border-radius:12px;
      padding:9px 12px;
      transition: transform .08s ease, border-color .15s ease, background .15s ease;
    }
    button:hover{ border-color: rgba(125,211,252,.45); }
    button:active{ transform: translateY(1px); }
    button.primary{
      background: linear-gradient(135deg, rgba(125,211,252,.20), rgba(167,139,250,.20));
      border-color: rgba(125,211,252,.35);
    }
    button.ghost{ background: transparent; }
    button:disabled{ opacity:.45; cursor:not-allowed; }

    .controlrow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius:14px;
      background:rgba(15,23,36,.55);
      margin:10px 0;
    }
    .controlrow .label{
      color:var(--muted);
      font-size:12px;
      min-width:90px;
    }
    input[type="range"]{ width:100%; cursor:pointer; }
    .value{
      font-family:var(--mono);
      font-size:12px;
      color:var(--text);
      opacity:.95;
      min-width:84px;
      text-align:right;
    }

    
    .footerNav{
      border-top:1px solid var(--line);
      background:rgba(7,10,15,.35);
      padding:12px 14px;
    }
    .footerNav .hint{
      color:var(--muted);
      font-size:12px;
      line-height:1.35;
      margin-bottom:10px;
    }
    .navrow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .navmid{
      flex:1;
      display:flex;
      justify-content:center;
      min-width:120px;
    }
    .navprog{
      width:min(260px, 100%);
      display:flex;
      align-items:center;
      gap:10px;
    }
    .navprog .bar{
      flex:1;
      height:8px;
      border-radius:999px;
      border:1px solid rgba(231,238,252,.16);
      background:rgba(15,23,36,.55);
      overflow:hidden;
    }
    .navprog .fill{
      height:100%;
      width:0%;
      background:linear-gradient(90deg, rgba(125,211,252,.75), rgba(167,139,250,.75));
    }
    .navprog .count{
      font-family:var(--mono);
      font-size:12px;
      color:rgba(231,238,252,.85);
      min-width:46px;
      text-align:right;
    }

    


#canvasControls .controlrow{
  margin:0;
  min-height:54px;
  padding:10px 12px;
  gap:12px;
}

#canvasControls .label{
  min-width:72px;
  text-align:left;
}

#canvasControls .value{
  min-width:70px;
  font-size:12px;
  text-align:right;
}

#canvasControls .pill{ margin:0; }

#canvasControls select{
  width:100%;
  height:38px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}


#canvasControls .rangeWithArrows{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
#canvasControls .rangeWithArrows input[type="range"]{
  flex:1 1 auto;
  min-width:140px;
}


#canvasControls .btn.tiny{
  width:34px;
  height:34px;
  padding:0;
  border-radius:12px;
  display:grid;
  place-items:center;
}


#canvasControls input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  border-radius:999px;
  background:rgba(231,238,252,.14);
  border:1px solid rgba(231,238,252,.10);
}

#canvasControls input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid rgba(17,24,38,.90);
  box-shadow:0 8px 16px rgba(0,0,0,.30);
}

#canvasControls input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:rgba(231,238,252,.14);
  border:1px solid rgba(231,238,252,.10);
}

#canvasControls input[type="range"]::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid rgba(17,24,38,.90);
  box-shadow:0 8px 16px rgba(0,0,0,.30);
}

#canvasControls input[type="range"]::-moz-focus-outer{ border:0; }


.switch{
  position:relative;
  width:46px;
  height:26px;
  flex:0 0 auto;
  display:inline-block;
}
.switch input{
  opacity:0;
  width:0;
  height:0;
}
.switch .slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(17,24,38,.65);
  border:1px solid var(--line);
  box-shadow: 0 8px 16px rgba(0,0,0,.20);
  transition: background .18s ease, border-color .18s ease;
}
.switch .slider:before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  border-radius:999px;
  background:rgba(231,238,252,.90);
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transition: transform .18s ease;
}
.switch input:checked + .slider{
  background: linear-gradient(135deg, rgba(125,211,252,.25), rgba(167,139,250,.25));
  border-color: rgba(125,211,252,.45);
}
.switch input:checked + .slider:before{
  transform: translateX(20px);
}


@media (max-width: 980px){
      main{ grid-template-columns: 1fr; }
      canvas{ min-height: 420px; }
      #vizPanel{ order: 1; }
      #textPanel{ order: 2; }
      .navrow{ flex-wrap:wrap; }
      .navrow > button{ min-width:120px; flex:1 1 140px; }
    }
  




#lessonNav .navrow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "prog prog"
    "prev next";
  gap:12px;
  align-items:stretch;
}
#lessonNav #btnPrev{ grid-area: prev; }
#lessonNav #btnNext{ grid-area: next; }
#lessonNav .navmid{
  grid-area: prog;
  min-width:0;
}
#lessonNav .navprog{
  width:100%;
  max-width:none;
}
#lessonNav .navprog .bar{ height:10px; }
#lessonNav .navprog .count{ min-width:56px; }
#lessonNav .navrow > button{
  width:100%;
  min-width:0;
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
}
#lessonNav .navrow > button:disabled{ opacity:.35; }


.rangeWithArrows{display:flex; align-items:center; gap:10px; width:100%;}
.btn.tiny{padding:6px 10px; border-radius:12px; font-size:14px; line-height:1;}
.btn.tiny:active{transform:translateY(1px);}