:root{
    color-scheme:dark;
    --bg:#080c1b;
    --panel:#0e1529;
    --line:#293655;
    --text:#eaf0ff;
    --muted:#8d9ab8;
    --cyan:#53def5;
    --violet:#b997ff;
    --green:#70efa8;
    --amber:#ffc86b;
    --red:#ff7696;
    --mono:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--mono);
}

button,textarea{font:inherit}

:focus-visible{
    outline:2px solid var(--amber);
    outline-offset:2px;
}

.playground{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(15rem,.8fr);
    min-height:37.8rem;
}

.editor-panel,.console-panel{
    display:grid;
    grid-template-rows:auto 1fr auto;
    min-width:0;
}

.console-panel{
    grid-template-rows:auto 1fr;
    border-left:1px solid var(--line);
    background:#080b17;
}

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:3.5rem;
    padding:.65rem .8rem;
    border-bottom:1px solid var(--line);
    background:rgb(255 255 255 / .018);
}

header>div{
    display:flex;
    align-items:center;
    gap:.55rem;
}

header b{
    color:var(--muted);
    font-size:.72rem;
}

.dot{
    display:inline-block;
    width:.55rem;
    height:.55rem;
    border-radius:50%;
    box-shadow:0 0 12px currentColor;
}

.dot.violet{color:var(--violet);background:var(--violet)}
.dot.green{color:var(--green);background:var(--green)}

.controls{display:flex;gap:.4rem}

button{
    min-height:2rem;
    padding:.3rem .6rem;
    border:1px solid var(--line);
    border-radius:.38rem;
    background:var(--panel);
    color:var(--muted);
    cursor:pointer;
    font-size:.68rem;
    font-weight:800;
}

button:hover{color:var(--text);border-color:#45577e}
button.run{border-color:rgb(83 222 245 / .5);color:var(--cyan)}
button:disabled{opacity:.55;cursor:wait}
kbd{font:inherit;color:var(--muted)}

#source{
    width:100%;
    min-height:29rem;
    resize:none;
    padding:1.2rem;
    border:0;
    background:var(--panel);
    color:var(--text);
    font-size:.8rem;
    line-height:1.7;
    tab-size:4;
}

#editor-help{
    margin:0;
    padding:.55rem .8rem;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.62rem;
}

#output{
    overflow:auto;
    max-height:34rem;
    margin:0;
    padding:.8rem;
    list-style:none;
}

#output li{
    margin:0 0 .55rem;
    padding:.55rem .65rem;
    border-left:2px solid var(--line);
    background:rgb(255 255 255 / .018);
    color:#bdc8e3;
    font-size:.72rem;
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

#output li::before{
    display:block;
    margin-bottom:.18rem;
    color:var(--muted);
    font-size:.58rem;
    text-transform:uppercase;
    content:attr(data-level);
}

#output li.log{border-color:var(--cyan)}
#output li.info{border-color:var(--violet)}
#output li.warn{border-color:var(--amber);color:var(--amber)}
#output li.error{border-color:var(--red);color:#ffb0c1}
#output li.success{border-color:var(--green);color:var(--green)}

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

@media(max-width:44rem){
    .playground{grid-template-columns:1fr}
    .console-panel{border-top:1px solid var(--line);border-left:0}
    #source{min-height:20rem}
    #output{min-height:12rem;max-height:18rem}
    header{align-items:flex-start;gap:.5rem}
    .controls{flex-wrap:wrap;justify-content:flex-end}
}