*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    overflow:hidden;

    font-family:Arial, Helvetica, sans-serif;

    background:#dfe8ef;

}

/* ==========================================================
   Left Control Panel
========================================================== */

#toolbar{

    position:fixed;

    top:420px;

    left:20px;

    width:120px;

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:16px;

    background:#ffffff;

    border:1px solid #d7dee6;

    border-radius:14px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    z-index:100;

}

#toolbar label{

    font-size:13px;

    font-weight:600;

    color:#555;

    margin-top:2px;

}

#toolbar input{

    width:100%;

    height:32px;

    padding:4px 8px;

    border:1px solid #c8d2dc;

    border-radius:8px;

    background:#fafafa;

    text-align:center;

    font-size:14px;

    transition:.2s;

}

#toolbar input:focus{

    outline:none;

    border-color:#3b82f6;

    background:white;

    box-shadow:0 0 0 3px rgba(59,130,246,.12);

}

.toolButton{

    width:100%;

    height:42px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:18px;

    font-weight:bold;

    transition:.2s;

}

.toolButton:hover{

    transform:translateY(-1px);

}

.toolButton.actionPlay{

    background:#d9f6e5;

    color:#166534;

}

.toolButton.actionPlay:hover{

    background:#b9eacb;

}

.toolButton.actionPause{

    background:#ffe3e3;

    color:#b91c1c;

}

.toolButton.actionPause:hover{

    background:#ffcaca;

}

.toolButton.actionReset{

    background:#dbeafe;

    color:#1d4ed8;

}

.toolButton.actionReset:hover{

    background:#bfdbfe;

}

/* ==========================================================
   Simulation Canvas
========================================================== */

canvas{

    display:block;

}

/* ==========================================================
   Graphs
========================================================== */

#graphsPanel{

    position:fixed;

    top:20px;

    right:20px;

    bottom:20px;

    width:min(360px, 30vw);

    display:flex;

    flex-direction:column;

    gap:10px;

}

.timeGraph{

    display:block;

    width:100%;

    min-height:0;

    flex:1 1 0;

    background:white;

    border-radius:12px;

    box-shadow:0 5px 16px rgba(0,0,0,.15);

}


/* ==========================================================
   Timer
========================================================== */

#timer{

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    font-size:20px;

    font-weight:bold;

    background:rgba(255,255,255,.9);

    padding:8px 18px;

    border-radius:10px;

    box-shadow:0 4px 12px rgba(0,0,0,.12);

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1200px){

    #toolbar{

        width:180px;

        padding:12px;

    }

    #graphsPanel{

        width:260px;

    }

}

@media (max-width:900px){

    #toolbar{

        width:160px;

        left:10px;

        top:10px;

    }

    #toolbar input{

        font-size:13px;

        height:30px;

    }

    #graphsPanel{

        top:10px;

        right:10px;

        bottom:10px;

        width:220px;

        gap:8px;

    }

}

/* Mobile phones: use a normal vertical document flow instead of fixed panels. */
@media (max-width:820px){

    body{

        overflow-x:hidden;

        overflow-y:auto;

        min-height:100dvh;

        padding:12px;

    }

    #toolbar{

        position:relative;

        top:auto;

        left:auto;

        width:100%;

        display:grid;

        grid-template-columns:minmax(0, 1fr) minmax(105px, .8fr);

        align-items:center;

        gap:8px;

        padding:12px;

        margin-bottom:12px;

    }

    #toolbar .toolButton{

        grid-column:1 / -1;

        height:38px;

    }

    #toolbar label{

        margin:0;

        font-size:12px;

    }

    #toolbar input{

        height:34px;

    }

    #timer{

        position:relative;

        bottom:auto;

        left:auto;

        transform:none;

        width:max-content;

        max-width:100%;

        margin:0 auto 12px;

        font-size:16px;

    }

    #canvas{

        width:100%;

        height:auto;

    }

    #graphsPanel{

        position:relative;

        top:auto;

        right:auto;

        bottom:auto;

        width:100%;

        height:auto;

        margin-top:12px;

        gap:12px;

    }

    .timeGraph{

        flex:none;

        height:clamp(180px, 52vw, 250px);

    }

}

@media (max-width:380px){

    body{

        padding:8px;

    }

    #toolbar{

        grid-template-columns:minmax(0, 1fr) 96px;

        padding:10px;

    }

}