:root{
      --bg:#0b1020;
      --panel:#0f1730;
      --panel2:#0c1328;
      --border:rgba(255,255,255,.10);
      --shadow:rgba(0,0,0,.45);

      --text:#d6defa;
      --muted:#97a3c7;

      --cyan:#42d9ff;
      --green:#69f0ae;
      --yellow:#ffd866;
      --pink:#ff6bd6;
      --purple:#b392f0;
      --orange:#ff9f43;
      --red:#ff5d6c;

      --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";
    }

    html,body{height:100%; overflow:hidden;}
    body{
      margin:0;
      font-family:var(--sans);
      background:
        radial-gradient(1200px 800px at 20% 10%, rgba(66,217,255,.10), transparent 60%),
        radial-gradient(900px 700px at 80% 0%, rgba(255,107,214,.10), transparent 55%),
        radial-gradient(900px 700px at 70% 90%, rgba(105,240,174,.08), transparent 55%),
        linear-gradient(180deg, #070a14, var(--bg));
      color:var(--text);
      min-height:100vh;
      overflow:hidden;
      padding:10px;
    }

    .sr-only{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0, 0, 0, 0);
      white-space:nowrap;
      border:0;
    }

    .skip-link{
      position:absolute;
      left:12px;
      top:-40px;
      z-index:999;
      background:var(--panel2);
      color:var(--text);
      border:1px solid var(--border);
      border-radius:8px;
      padding:8px 10px;
      font-family:var(--mono);
      font-size:12px;
      text-decoration:none;
    }
    .skip-link:focus{
      top:12px;
      outline:2px solid rgba(66,217,255,.65);
      outline-offset:2px;
    }

    .wrap{width:100%; height:calc(100vh - 20px); margin:0 auto;}

    /* --- window --- */
    .window{
      border:1px solid var(--border);
      background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%), var(--panel);
      border-radius:18px;
      box-shadow: 0 25px 70px var(--shadow);
      overflow:hidden;
      position:relative;
      display:flex;
      flex-direction:column;
      height:100%;
    }

    /* subtle scanlines */
    .window::after{
      content:"";
      position:absolute; inset:0;
      background: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.03) 1px,
        transparent 1px,
        transparent 3px
      );
      opacity:.06;
      pointer-events:none;
      mix-blend-mode:overlay;
    }

    /* --- titlebar --- */
    .titlebar{
      display:flex;
      align-items:center;
      gap:14px;
      padding:12px 14px;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border-bottom:1px solid var(--border);
      font-family:var(--mono);
    }
    .traffic{display:flex; gap:8px; align-items:center;}
    .dot{width:11px;height:11px;border-radius:50%;}
    .dot.red{background:#ff5f57;}
    .dot.yellow{background:#febc2e;}
    .dot.green{background:#28c840;}
    .title{
      color:var(--muted);
      font-size:12px;
      letter-spacing:.2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .spacer{flex:1;}
    .pill{
      font-size:12px;
      padding:5px 10px;
      border:1px solid var(--border);
      border-radius:999px;
      color:var(--muted);
      background:rgba(0,0,0,.18);
    }

    /* --- tabs --- */
    .tabs{
      display:flex;
      gap:8px;
      padding:10px 10px 0 10px;
      background:var(--panel2);
      border-bottom:1px solid var(--border);
      font-family:var(--mono);
    }
    .tab{
      appearance:none;
      -webkit-appearance:none;
      display:flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border:1px solid var(--border);
      border-bottom:none;
      border-radius:12px 12px 0 0;
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-size:12px;
      font-family:inherit;
      cursor:pointer;
      margin:0;
    }
    .tab.active{
      background:linear-gradient(180deg, rgba(66,217,255,.10), rgba(255,255,255,.02));
      color:var(--text);
    }
    .tab .x{opacity:.6; padding-left:6px;}
    .search-panel{
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-bottom:1px solid var(--border);
      background:linear-gradient(180deg, rgba(66,217,255,.06), rgba(255,255,255,.02));
      font-family:var(--mono);
      font-size:12px;
    }
    .search-panel[hidden]{display:none;}
    .search-panel input{
      flex:1;
      min-width:140px;
      color:var(--text);
      background:rgba(0,0,0,.24);
      border:1px solid var(--border);
      border-radius:8px;
      padding:7px 9px;
      font:inherit;
      outline:none;
    }
    .search-panel input:focus{
      border-color:rgba(66,217,255,.45);
      box-shadow:0 0 0 2px rgba(66,217,255,.15);
    }
    .search-panel button{
      appearance:none;
      -webkit-appearance:none;
      border:1px solid var(--border);
      border-radius:8px;
      background:rgba(255,255,255,.04);
      color:var(--text);
      font:inherit;
      padding:6px 8px;
      cursor:pointer;
    }
    .search-panel button:hover{
      border-color:rgba(66,217,255,.45);
      background:rgba(66,217,255,.08);
    }
    .search-panel #searchCount{
      color:var(--muted);
      min-width:64px;
      text-align:center;
    }

    /* --- workspace layout --- */
    .workspace{
      display:grid;
      grid-template-columns: 1.35fr .65fr;
      gap:12px;
      padding:12px;
      background:linear-gradient(180deg, rgba(0,0,0,.18), transparent 22%), var(--panel);
      flex:1;
      min-height:0; /* critical: allow internal scrolling */
      overflow:hidden;
    }

    .pane{
      border:1px solid var(--border);
      border-radius:14px;
      overflow:hidden;
      background:rgba(255,255,255,.02);
      box-shadow: 0 16px 40px rgba(0,0,0,.22);
      min-height:0;
      display:flex;
      flex-direction:column;
    }

    .pane-bar{
      display:flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border-bottom:1px solid var(--border);
      font-family:var(--mono);
      font-size:12px;
      color:rgba(151,163,199,.95);
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:3px 8px;
      border:1px solid var(--border);
      border-radius:999px;
      background:rgba(0,0,0,.16);
      color:rgba(214,222,250,.9);
    }

    .side{
      display:flex;
      flex-direction:column;
      gap:12px;
      min-width: 260px;
      min-height:0;
    }
    .side .term{
      flex:1 1 0;
      min-height:0;
    }

    /* --- main editor (kept) --- */
    .editor{
      display:grid;
      grid-template-columns: 64px 1fr;
      font-family:var(--mono);
      font-size:13.5px;
      line-height:1.55;
      background:transparent;
      min-height:0;
      flex:1;
      overflow:hidden;
    }
    .gutter-wrap{
      display:grid;
      grid-template-columns: 12px 1fr;
      border-right:1px solid var(--border);
      overflow:hidden;
    }
    .bp-gutter{
      padding:12px 0 14px 0;
      text-align:center;
      color:#ff5f57;
      text-shadow:0 0 10px rgba(255,95,87,.45);
      user-select:none;
      white-space:pre;
      line-height:inherit;
      transform:translateX(1px);
      overflow:hidden;
    }
    .gutter{
      padding:12px 4px 14px 0;
      text-align:right;
      color:rgba(151,163,199,.55);
      user-select:none;
      white-space:pre;
      line-height:inherit;
      font-variant-numeric: tabular-nums;
      overflow:hidden;
    }
    .code{
      margin:0;
      padding:12px 14px 14px 14px;
      white-space:pre;
      overflow:auto;
      min-width:0;
      min-height:0;
      scrollbar-width:thin;
      scrollbar-color:rgba(66,217,255,.55) rgba(255,255,255,.06);
    }
    .code::-webkit-scrollbar,
    .term-body::-webkit-scrollbar{
      width:10px;
      height:10px;
    }
    .code::-webkit-scrollbar-track,
    .term-body::-webkit-scrollbar-track{
      background:rgba(255,255,255,.04);
      border-left:1px solid rgba(255,255,255,.06);
    }
    .code::-webkit-scrollbar-thumb,
    .term-body::-webkit-scrollbar-thumb{
      background:linear-gradient(180deg, rgba(66,217,255,.75), rgba(66,217,255,.45));
      border-radius:10px;
      border:2px solid rgba(12,19,40,.9);
      box-shadow:0 0 10px rgba(66,217,255,.25);
    }
    .code::-webkit-scrollbar-thumb:hover,
    .term-body::-webkit-scrollbar-thumb:hover{
      background:linear-gradient(180deg, rgba(66,217,255,.9), rgba(66,217,255,.6));
    }
    .code::-webkit-scrollbar-corner,
    .term-body::-webkit-scrollbar-corner{
      background:rgba(255,255,255,.04);
    }
    .code mark.search-hit{
      background:rgba(255,216,102,.25);
      color:var(--text);
      padding:0;
      border-radius:2px;
    }
    .code mark.search-hit-current{
      background:rgba(66,217,255,.35);
      color:#f8fcff;
    }
    .code a.paper-link{
      position:relative;
      display:inline-block;
      color:inherit;
      text-decoration:none;
      border-bottom:1px solid rgba(105,240,174,.45);
      outline:none;
    }
    .code a.paper-link::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-2px;
      height:1px;
      background:linear-gradient(90deg, transparent, var(--cyan), var(--green), transparent);
      opacity:0;
      transform:scaleX(.6);
      transition:opacity .18s ease, transform .18s ease;
    }
    .code a.paper-link:hover::after,
    .code a.paper-link:focus-visible::after{
      opacity:1;
      transform:scaleX(1);
    }
    .paper-popover{
      position:absolute;
      left:50%;
      bottom:calc(100% + 9px);
      z-index:5;
      padding:6px 9px;
      border:1px solid rgba(66,217,255,.45);
      border-radius:8px;
      background:
        linear-gradient(180deg, rgba(66,217,255,.16), rgba(105,240,174,.08)),
        rgba(12,19,40,.98);
      color:var(--text);
      box-shadow:0 12px 28px rgba(0,0,0,.38), 0 0 24px rgba(66,217,255,.16);
      font-size:12px;
      line-height:1;
      white-space:nowrap;
      opacity:0;
      pointer-events:none;
      transform:translate(-50%, 4px);
      transition:opacity .18s ease, transform .18s ease;
    }
    .paper-popover::after{
      content:"";
      position:absolute;
      left:50%;
      top:100%;
      width:8px;
      height:8px;
      border-right:1px solid rgba(66,217,255,.45);
      border-bottom:1px solid rgba(66,217,255,.45);
      background:rgba(12,19,40,.98);
      transform:translate(-50%, -4px) rotate(45deg);
    }
    .code a.paper-link:hover .paper-popover,
    .code a.paper-link:focus-visible .paper-popover{
      opacity:1;
      transform:translate(-50%, 0);
    }

    /* --- terminals --- */
    .term-body{
      margin:0;
      padding:12px 14px 14px 14px;
      font-family:var(--mono);
      font-size:12.8px;
      line-height:1.5;
      white-space:pre-wrap;
      overflow:auto;
      flex:1;
      min-height:0;
      scrollbar-width:thin;
      scrollbar-color:rgba(66,217,255,.55) rgba(255,255,255,.06);
      color:var(--text);
      background:
        radial-gradient(800px 260px at 20% 0%, rgba(66,217,255,.07), transparent 55%),
        radial-gradient(800px 260px at 80% 0%, rgba(105,240,174,.05), transparent 55%),
        rgba(0,0,0,.18);
    }

    /* tokens */
    .k{color:var(--purple);}   /* keyword-ish */
    .t{color:var(--cyan);}     /* title */
    .s{color:var(--green);}    /* string / highlighted value */
    .n{color:var(--yellow);}   /* number/date */
    .c{color:var(--muted);}    /* comment */
    .e{color:var(--pink);}     /* emphasis */
    .w{color:var(--orange);}   /* warning-ish (reserved) */
    .r{color:var(--red);}      /* accent (reserved) */
    .dim{opacity:.85;}

    .caret,
    .term-caret{
      display:inline-block;
      width:8px;
      height:1.1em;
      transform:translateY(2px);
      background:var(--cyan);
      margin-left:2px;
      box-shadow:0 0 12px rgba(66,217,255,.45);
    }

    /* footer / hint */
    .footer{
      padding:12px 14px;
      border-top:1px solid var(--border);
      background:rgba(0,0,0,.16);
      font-family:var(--mono);
      font-size:12px;
      color:rgba(151,163,199,.85);
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .kbd{
      border:1px solid var(--border);
      padding:2px 6px;
      border-radius:6px;
      background:rgba(255,255,255,.03);
      color:var(--text);
    }

    /* responsive */
    @media (max-width:900px){
      .workspace{grid-template-columns: 1fr;}
      .side{min-width:0;}
    }

    @media (max-width:720px){
      body{padding:6px;}
      .wrap{height:calc(100vh - 12px);}
      .editor{grid-template-columns: 52px 1fr;}
      .gutter-wrap{grid-template-columns: 10px 1fr;}
      .code{font-size:12.8px;}
      .term-body{font-size:12.4px;}
      .title{max-width:48vw;}
    }