body{

margin:0;
background:#0b0b0d;
color:white;
font-family:system-ui;
overflow:hidden;

}

canvas{

position:absolute;
top:0;
left:0;

}

.panel{

position:absolute;
top:10px;
left:10px;

width:250px;

background:rgba(20,20,24,.95);
backdrop-filter:blur(10px);

padding:14px;

border-radius:12px;

border:1px solid rgba(255,255,255,.1);

}

.panel-header{

display:flex;
justify-content:space-between;
align-items:center;

}

.section-desc{

font-size:12px;
opacity:.7;
/* margin-bottom:10px; */

}

.controls{

display:flex;
flex-direction:column;
gap:8px;

}

label{

display:flex;
align-items:center;
justify-content:space-between;
font-size:10px;
gap:6px;

}

input[type=range]{

flex:1;

}

button{

background:#1c1c1f;
border:1px solid #333;

color:white;

padding:6px;

border-radius:6px;

cursor:pointer;

}

.viz{

position:absolute;
right:10px;
bottom:10px;

width:200px;

background:rgba(20,20,24,.55);

border-radius:12px;

padding:12px;

border:1px solid rgba(255,255,255,.1);

}

.viz-header{

display:flex;
justify-content:space-between;
align-items:center;

}

#graph{

width:100%;
height:100px;

background:#111;

border-radius:8px;

top:auto;

}

.hidden{

display:none;

}
.tips{
    font-size: 10px;
}
/* Default: show desktop tips, hide mobile */
.mobile-tips { display: none; }

@media(max-width:600px){
  .desktop-tips { display: none; }
  .mobile-tips { display: block; }
  .panel {
    width: 250px;       /* smaller panel width */
    padding: 8px;      /* tighter padding */
    border-radius: 8px;
  }

  .panel-header {
    font-size: 10px;    /* smaller header text */
  }

  .section-desc {
    font-size: 6px;
    margin-bottom: 6px;
  }

  .controls {
    gap: 6px;           /* tighter spacing */
  }

  label {
    font-size: 11px;
    gap: 4px;
  }

  button {
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 11px;
  }

  .viz {
    width: 200px;       /* reduced viz box */
    padding: 8px;
    border-radius: 8px;
  }

  .viz-header {
    font-size: 10px;
  }

  #graph {
    height: 80px;       /* smaller graph height */
    border-radius: 6px;
  }

}