:root{
    --bg: #0b0d10;
    --panel: #14181d;
    --muted: #a8b0bb;
    --text: #eaf0f6;
    --accent: #7dd3fc;
    --accent-2:#a78bfa;
    --border: #1f2937;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
    margin:0;
    color:var(--text);
    background:linear-gradient(180deg,#0b0d10,#0d1117 40%, #0b0d10);
    font: 14px/1.45 "Mondea", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* header */
header{
    position:sticky; top:0; z-index:5;
    background:rgba(11,13,16,.8); backdrop-filter:saturate(120%) blur(8px);
    border-bottom:1px solid var(--border);
}
header .wrap{
    max-width:1200px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
h1{ font-size:16px; margin:0; display:flex; align-items:center; gap:.5rem; }
h1 .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px var(--accent); display:inline-block;}
.badge{ padding:2px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted) }
.right{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
input[type="file"]{ display:none; }
.btn{
    font-family: "Mondea", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    border:1px solid var(--border); background:var(--panel); color:var(--text);
    padding:8px 12px; border-radius:10px; cursor:pointer;
}
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.mono{ font-family: "Evermore Code", ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }

/* MAIN layout: fill remaining viewport height (header is sticky) */
main{
    flex: 1;
    max-width:1200px;
    margin:16px auto;
    padding:0 16px 24px;
    display:grid;
    grid-template-columns: 320px 1fr;
    gap:16px;
    min-height: 0; /* allow children to clip correctly */
}

/* -- IMPORTANT: the left column panel (first .panel child inside main)
   is the single scroll container for all variable/OT features.
   It stretches to the full height of `main` and scrolls as a whole.
*/
main > .panel:first-child{
    /* make sure it stretches to the grid row height */
    align-self: stretch;
    display:flex;
    flex-direction:column;
    min-height: 0; /* critical for overflowing content inside a flex/grid parent */
    overflow-y: auto; /* <-- only this element shows scrollbars */
    overflow-x: hidden;
}

/* Panels: keep rounded corners and ensure internal elements don't create nested scrolls */
.panel{
    background:rgba(20,24,29,.7);
    border:1px solid var(--border);
    border-radius:14px;
    /* base: hide any overflow that would escape rounded corners;
       the left panel specifically overrides the Y overflow above. */
    overflow: hidden;
}
.panel header{
    position:relative;
    background:linear-gradient(180deg,rgba(167,139,250,.15),transparent);
    border-bottom:1px solid var(--border);
    flex: 0 0 auto; /* header doesn't grow/shrink unexpectedly */
    border-top-left-radius:14px;
    border-top-right-radius:14px;
}
.panel header h2{
    margin:0;
    padding:10px 12px;
    font-size:13px;
    color:var(--muted);
    letter-spacing:.04em;
    text-transform:uppercase;
}
/* panel content should not independently scroll; it grows naturally.
   (If you previously had overflow rules here, they are removed.) */
.panel .content{
    padding:12px;
    overflow: visible; /* ensure inner lists grow and contribute to the panel's height */
}

/* neutralize any small-scroll containers so only the left .panel scrolls */
.scroll{
    /* previously limited height/overflow — remove that behavior */
    max-height: none;
    overflow: visible;
    border:1px dashed var(--border);
    border-radius:10px;
    padding:8px;
}

.kv{ display:grid; grid-template-columns: 110px 1fr; gap:8px 10px; }
.kv .k{ color:var(--muted); }
.font-meta{ margin-bottom:8px; }
.group{ margin-bottom:12px; }
.group h3{ font-size:12px; margin:12px 0 8px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;}
.feature-list,.axis-list{ display:flex; flex-direction:column; gap:8px;}
.feature{ display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:transparent;}
.feature .tag{ font-weight:600; }
.feature .ctrl{ display:flex; align-items:center; gap:8px; }
.axis{ border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:transparent;}
.axis .row{ display:flex; align-items:center; gap:10px; }
.axis input[type="range"]{
    font-family: "Evermore Code", ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    width:100%;
}
.axis .tag{ font-weight:600; }
.small{ font-size:12px; color:var(--muted); }

/* Editor (right column) — keep its own rounded corners intact by virtue of .panel overflow:hidden */
.editor-wrap{ display:flex; flex-direction:column; height:100%; min-height:0; }
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:10px; border-bottom:1px solid var(--border); background:rgba(20,24,29,.6); }
.toolbar .field{ display:flex; align-items:center; gap:6px; }
.toolbar input[type="number"]{
    font-family: "Evermore Code", ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    width:80px;
}
.editor{
    flex:1; min-height:360px; padding:18px; font-size:48px; line-height:1.15;
    outline:none;
    background:radial-gradient(1200px 400px at 10% -10%, rgba(125,211,252,.07), transparent),
                radial-gradient(1000px 400px at 90% 110%, rgba(167,139,250,.10), transparent);
    /* keep bottom corners rounded inside its parent panel */
    border-bottom-left-radius:14px;
    border-bottom-right-radius:14px;
}
.dropzone{
    border:2px dashed var(--accent); color:var(--muted); border-radius:14px; padding:16px; text-align:center; margin-bottom:12px;
}
.pill{ padding:2px 6px; border:1px solid var(--border); border-radius:6px; }
.hint{ color:var(--muted); font-size:12px; }
.footer{ max-width:1200px; margin:0 auto 32px; padding:0 16px; color:var(--muted); }
a{ color:var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

@media (max-width: 900px){
    main{ grid-template-columns: 1fr; }
    /* when layout stacks vertically, the first .panel rule above will still
       apply (it will be the top panel). If you prefer the editor to scroll
       on small screens, adjust here. */
}

/* Target only the features panel that scrolls */
main > .panel:first-child::-webkit-scrollbar {
  width: 10px;               /* scrollbar width */
}
main > .panel:first-child::-webkit-scrollbar-track {
  background: transparent;   /* no track background */
}
main > .panel:first-child::-webkit-scrollbar-thumb {
  background-color: var(--border);  /* muted thumb */
  border-radius: 10px;
  border: 2px solid transparent;    /* gives a "gap" effect */
  background-clip: content-box;
}
main > .panel:first-child::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);  /* highlight on hover */
}
/* Firefox uses scrollbar-color */
main > .panel:first-child {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}