:root{
    --bg: #0b0e10;
    --panel: #11161b;
    --panel-2:#0f1317;
    --control-bg:#0f1317;
    --control-border:#1f2b38;
    --control-border-hover:#2e4760;
    --control-ring:rgba(58,138,220,.25);
    --ink: #e7eef5;
    --muted:#9fb0c3;
    --pitch-green:#2e7d32;
    --pitch-green-2:#318636;
    --line:#f4f9ff;
  }
  html,body{height:100%}
  body.modal-open{overflow:hidden}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  }
  .layout{
    display:grid;
    grid-template-columns: 320px 1fr 320px;
    grid-template-rows: auto 1fr;
    height:100vh;
  }
  header{
    grid-column: 1 / -1;
    padding:12px 16px;
    background:#0b0e10;
    border-bottom:1px solid #182028;
    position:sticky;
    top:0;
    z-index:100;
  }
  .topbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
  }
  .topbar-title{
    margin-right:auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topbar-tools{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .focus-toggle{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    padding:6px 10px 6px 8px;
    border:1px solid var(--control-border);
    border-radius:999px;
    background:linear-gradient(180deg, #111924, #0c141d);
    color:var(--ink);
    font-weight:700;
    user-select:none;
    white-space:nowrap;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .focus-toggle input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }
  .focus-text{
    font-size:13px;
    letter-spacing:.15px;
  }
  .header-select{
    display:flex;
    align-items:center;
  }
  .header-select select{
    width:auto;
    min-width:78px;
    height:34px;
    padding:8px 36px 8px 10px;
    border-radius:999px;
    background-color:var(--control-bg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23cfe5ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position:right 12px center;
    background-repeat:no-repeat;
    background-size:12px 8px;
    color:var(--ink);
    border:1px solid var(--control-border);
    font-size:13px;
    font-weight:700;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    color-scheme:dark;
  }
  .header-select select:hover{
    border-color:var(--control-border-hover);
  }
  .header-select select:focus-visible{
    border-color:#3a8adc;
    box-shadow:0 0 0 2px var(--control-ring);
  }
  .focus-switch{
    width:34px;
    height:20px;
    border-radius:999px;
    background:#1e2a36;
    border:1px solid #304154;
    position:relative;
    transition:background .15s ease, border-color .15s ease;
  }
  .focus-switch::after{
    content:"";
    position:absolute;
    top:1px;
    left:1px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#dbe7f4;
    transition:transform .15s ease;
    box-shadow:0 1px 2px rgba(0,0,0,.45);
  }
  .focus-toggle input:checked + .focus-switch{
    background:#155a3f;
    border-color:#238a62;
  }
  .focus-toggle input:checked + .focus-switch::after{
    transform:translateX(14px);
  }
  .focus-toggle:hover{
    border-color:var(--control-border-hover);
    box-shadow:0 0 0 1px rgba(87,131,179,.14) inset;
  }
  .header-actions{
    justify-self:end;
  }
  header h1{
    font-size:clamp(16px, 2.2vw, 30px);
    margin:0; font-weight:700; letter-spacing:.2px;
  }
  .controls{
    background:var(--panel);
    border-right:1px solid #182028;
    display:flex; flex-direction:column;
  }
  .controls.right{ border-right:none; border-left:1px solid #182028; }
  .panel{ padding:12px 12px 10px; border-bottom:1px dashed #1c2530; }
  .panel h2{ margin:0 0 8px; font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.4px; text-transform:uppercase; }
  /* Controls layout: keep the control column stable so selects and sliders align */
  .row{ display:grid; grid-template-columns: 82px minmax(0, 1fr); align-items:center; gap:8px; margin:6px 0; }
  .row label{ color:var(--ink); font-weight:600; font-size:11px; line-height:1.2; }

  select, input[type="range"], button{
    display:block;
    width:100%;
    background:var(--control-bg);
    color:var(--ink);
    border:1px solid var(--control-border);
    border-radius:8px;
    padding:7px 10px;
    outline:none;
    box-sizing:border-box;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  select,
  input[type="range"]{
    min-width:0;
    height:30px;
  }
  select:hover, input[type="range"]:hover, button:hover{
    border-color:var(--control-border-hover);
  }
  select:focus-visible, input[type="range"]:focus-visible, button:focus-visible{
    border-color:#3a8adc;
    box-shadow:0 0 0 2px var(--control-ring);
  }
  /* Range track/handle & ensure the right edge is visible */
  input[type="range"]{
    appearance:none; padding:0; margin:0;
  }
  input[type="range"]::-webkit-slider-runnable-track{height:3px; background:#1a222b; border-radius:3px}
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; height:14px; width:14px; border-radius:50%;
    background:#cfe5ff; border:2px solid #2a7bd6; margin-top:-5px; box-shadow:0 0 0 3px rgba(42,123,214,.15);
  }

  .buttons{ display:flex; gap:10px; padding:12px 14px; background:linear-gradient(0deg, rgba(255,255,255,0.03), transparent); border-top:1px solid #182028; }
  .header-actions{ padding:0; background:none; border:none; display:flex; flex-wrap:nowrap; gap:8px; }
  .header-actions button{
    width:auto;
    white-space:nowrap;
    padding:6px 10px;
    font-size:clamp(11px, 1.15vw, 13px);
    line-height:1.1;
  }
  button{ cursor:pointer; font-weight:700; }
  .btn-accent{
    background:linear-gradient(180deg, #12432f, #0f3325);
    border-color:#236c4f;
  }
  .btn-danger{
    background:linear-gradient(180deg, #4a1a1a, #381212);
    border-color:#7a2b2b;
  }
  .canvas-wrap{ background:#061b0b; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; min-height:0; }

  /* Visibility panel */
  .vis-panel h3{ margin:12px 0 6px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
  .vis-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:6px 12px;
    grid-auto-flow: column; /* fill down first column, then second */
  }
  .vis-item{ display:flex; align-items:center; gap:6px; }
  .vis-item input[type="checkbox"]{
    appearance:none;
    width:18px;
    height:18px;
    margin:0;
    border-radius:5px;
    border:1px solid var(--control-border);
    background:var(--control-bg);
    position:relative;
    cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .vis-item input[type="checkbox"]:hover{
    border-color:var(--control-border-hover);
  }
  .vis-item input[type="checkbox"]:focus-visible{
    border-color:#3a8adc;
    box-shadow:0 0 0 2px var(--control-ring);
  }
  .vis-item input[type="checkbox"]:checked{
    background:linear-gradient(180deg, #17679a, #0f4f78);
    border-color:#2e85bd;
  }
  .vis-item input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;
    left:5px;
    top:2px;
    width:4px;
    height:8px;
    border:solid #e8f5ff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }
  .vis-item label{
    cursor:pointer;
    user-select:none;
  }
  .vis-actions{ display:flex; gap:8px; margin-top:9px; }
  .vis-actions button{
    font-size:11px;
    padding:6px 8px;
    border-radius:8px;
    background:linear-gradient(180deg, #111925, #0d141d);
  }

  /* Instructions block */
  .instructions{
    margin-top:12px; padding:10px; border:1px solid #20303d; border-radius:8px; background:#0d141a;
    color:#bdc9d6; font-size:12.5px;
  }
  .instructions-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
  }
  .instructions .title{
    font-weight:700; color:#d6e2ef; text-transform:uppercase; letter-spacing:.3px; font-size:12px;
  }
  .instructions-close{
    width:auto;
    min-width:24px;
    height:24px;
    padding:0 6px;
    line-height:1;
    font-size:12px;
    font-weight:800;
    border-radius:6px;
    border:1px solid #314556;
    background:#121b22;
    color:#cfe0ef;
  }
  .instructions .line + .line{ margin-top:0.5em; } /* 0.5 line space between lines */
  .instructions-meta{
    display:grid;
    grid-template-columns:auto auto auto;
    justify-content:center;
    align-items:center;
    column-gap:4px;
    flex-wrap:nowrap;
    width:100%;
    margin-top:10px;
    color:#6f7e8d;
    font-size:10px;
    font-style:italic;
  }
  .instructions-meta-link{
    display:inline-flex;
    align-items:center;
    padding:0;
    border:none;
    background:none;
    color:#6f7e8d;
    font:inherit;
    text-decoration-line:underline;
    text-decoration-style:dotted;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
    cursor:pointer;
    flex:0 0 auto;
  }
  .instructions-meta-link + .instructions-meta-link::before{
    content:"|";
    color:#5f6e7d;
    margin-right:4px;
    text-decoration:none;
  }
  .instructions-meta-link:hover{
    color:#8ba0b6;
    text-decoration-thickness:1px;
  }
  .instructions-meta-link:focus-visible{
    outline:2px solid var(--control-ring);
    outline-offset:2px;
    border-radius:4px;
  }
  .row-offset{ margin-top:8px; }
  .pitch-svg{
    width:100%;
    height:100%;
    touch-action:manipulation;
  }
  .modal-backdrop{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(3, 8, 14, 0.76);
  }
  .modal-backdrop[hidden]{
    display:none !important;
  }
  .modal-card{
    width:min(460px, 100%);
    max-height:min(85vh, 700px);
    overflow:auto;
    border:1px solid #263545;
    border-radius:14px;
    background:linear-gradient(180deg, #0f1720, #0b1219);
    box-shadow:0 20px 60px rgba(0,0,0,.45);
  }
  .modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 18px 10px;
    border-bottom:1px solid #182634;
  }
  .modal-head h2{
    margin:0;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:.3px;
    color:#dce9f5;
  }
  .modal-body{
    padding:16px 18px 18px;
    color:#c6d4e2;
    font-size:13px;
    line-height:1.5;
  }
  .modal-body p{
    margin:0 0 10px;
  }
  .modal-body a{
    color:#8ec8ff;
  }
  .modal-close{
    width:auto;
    min-width:28px;
    height:28px;
    padding:0 7px;
    border-radius:7px;
    border:1px solid #314556;
    background:#121b22;
    color:#cfe0ef;
    line-height:1;
  }

  body.focus-mode .layout{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height:100vh;
  }
  @supports (height: 100dvh){
    body.focus-mode .layout{ height:100dvh; }
  }
  body.focus-mode .controls{
    display:none;
  }
  body.focus-mode .canvas-wrap{
    min-height:0;
    height:100%;
    overflow:visible;
  }

  @media (max-width: 1100px){ .layout{grid-template-columns: 260px 1fr 260px;} .row{grid-template-columns:76px minmax(0,1fr);} }
  @media (max-width: 900px){
    .layout{grid-template-columns: 1fr; height:auto; min-height:100vh}
    @supports (min-height: 100dvh){ .layout{min-height:100dvh;} }
    body.focus-mode .layout{height:100vh; min-height:0}
    @supports (height: 100dvh){ body.focus-mode .layout{height:100dvh;} }
    .controls.right{order:3} .controls{order:1}
    .canvas-wrap{order:2; height:42vh; min-height:180px}
    body.focus-mode .canvas-wrap{height:calc(100vh - 50px); min-height:0}
    @supports (height: 100dvh){ body.focus-mode .canvas-wrap{height:calc(100dvh - 50px);} }
    #rightControls .panel{
      display:flex;
      flex-direction:column;
    }
    #rightControls .panel > h2{
      order:1;
    }
    #rightControls .row,
    #rightControls .vis-panel{
      order:2;
    }
    #rightControls .instructions{
      order:3;
      margin-top:12px;
      margin-bottom:0;
    }
    header{
      padding:8px 10px;
    }
    .topbar{
      gap:6px 10px;
    }
    .topbar-title{
      flex-basis:100%;
    }
    .topbar-tools{
      gap:8px;
    }
    .focus-toggle{
      padding:5px 8px 5px 6px;
      gap:7px;
    }
    .focus-text{
      font-size:12px;
    }
    .header-select{
      padding:0;
    }
    .header-select select{
      min-width:72px;
      height:30px;
      font-size:12px;
      padding:6px 32px 6px 9px;
      background-position:right 10px center;
    }
    .focus-switch{
      width:30px;
      height:18px;
    }
    .focus-switch::after{
      width:14px;
      height:14px;
    }
    .focus-toggle input:checked + .focus-switch::after{
      transform:translateX(12px);
    }
    .header-actions button{
      padding:6px 8px;
      font-size:11px;
    }
  }
  @media (max-width: 700px){
    .topbar-tools{
      gap:6px;
    }
    .header-actions{
      gap:6px;
    }
    .focus-toggle{
      padding:4px 7px 4px 6px;
      gap:6px;
    }
    .focus-text{
      font-size:11px;
    }
    .header-select{
      padding:0;
    }
    .header-select select{
      min-width:64px;
      height:28px;
      padding:5px 28px 5px 8px;
      font-size:11px;
      background-position:right 9px center;
    }
    .header-actions button{
      padding:5px 7px;
      font-size:11px;
    }
  }
  @media (max-width: 500px){
    .topbar-title{
      flex-basis:auto;
    }
    .topbar-tools{
      margin-left:auto;
    }
    .header-actions{
      flex-basis:100%;
      justify-content:flex-end;
    }
  }
  @media (max-width: 380px){
    .focus-text{
      display:none;
    }
    .focus-toggle{
      padding:4px 6px;
    }
    .header-select{
      padding:0;
    }
    .header-actions button{
      padding:5px 6px;
      font-size:10px;
    }
  }