:root{
    --black:#000000;
    --white:#ffffff;
    --crimson:#dc143c;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:honeydew;
    color:var(--black);
}

.site-header{
    padding:24px 16px;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.subtitle{ opacity:.75; margin:.25rem 0 0; }

.container{
    max-width:1200px;
    margin:0 auto;
    padding:16px;
}

.control-bar{
    display:flex; gap:16px; flex-wrap:wrap; align-items:center;
    background:var(--white);
    border:1px solid rgba(0,0,0,.42);
    border-radius:14px;
    padding:12px 14px;
    box-shadow:0 6px 24px lightgray;
}

.select-wrap{
    display:flex; flex-direction:column; gap:6px;
}
.select-wrap select{
    background:var(--white); color:var(--black);
    border:1px solid var(--crimson); border-radius:10px;
    padding:8px 12px; min-width:220px;
}

.speed-wrap{
    display:flex; align-items:center; gap:10px;
    border:1px solid rgba(255,255,255,.12);
    padding:8px 12px; border-radius:10px;
}
.speed-wrap input[type=range]{
    accent-color:var(--crimson);
}
#speedVal{ width:28px; text-align:right; opacity:.9; }

.btn-row{ display:flex; gap:10px; }
.btn{
    background:transparent; color:var(--white);
    border:1px solid var(--white);
    padding:10px 14px; border-radius:12px; cursor:pointer;
    transition:transform .05s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(1px); }
.btn.primary{ border-color:var(--crimson); background:var(--crimson); }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.danger{ border-color:var(--white); background: darkgray }
.btn.danger:hover{ background:#111; }

.viz-and-notes{
    display:grid; grid-template-columns: 2fr 1fr; gap:16px;
    margin-top:16px;
}
@media (max-width: 1000px){
    .viz-and-notes{ grid-template-columns: 1fr; }
}

#canvas{
    width:100%; height:auto; background:var(--white);
    border-radius:14px; border:1px solid rgba(0,0,0,.42);
    box-shadow:0 10px 30px lightgray;
}

.explain{
    background:var(--white);;
    border:1px solid rgba(0,0,0,.42);
    border-radius:14px;
    padding:16px;
}
.explain h2{ margin:0 0 .5rem; color:var(--crimson); }
#log{
    list-style:none; padding:0; margin:10px 0 0;
    max-height:360px; overflow:auto; border-top:1px solid rgba(255,255,255,.1);
}
#log li{
    padding:8px 2px; border-bottom:1px dashed rgba(255,255,255,.08);
    font-size:.95rem;
}

.site-footer{
    padding:20px 16px; text-align:center;
    border-top:1px solid rgba(255,255,255,.12);
    opacity:.75;
}