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

:root{
    --bg:#071426;
    --sidebar:#122544;
    --card:#091a35;
    --editor:#020d1f;

    --border:#203252;

    --primary:#67f0d4;

    --text:#d9fdfd;
    --muted:#7d93b2;
}

body{

    background:var(--bg);

    color:var(--text);

    font-family:Consolas, monospace;

    height:100vh;

    overflow:hidden;
}

.container{

    display:flex;

    gap:40px;

    padding-top: 40px;
    padding-bottom: 0px;
    padding-right: 40px;
    padding-left: 40px;

    height:100vh;
}

.sidebar{

    width:350px;

    background:var(--sidebar);

    border-radius:25px;

    padding:30px;

    overflow-y:auto;

    scrollbar-width:none;
}

.sidebar::-webkit-scrollbar{
    display:none;
}

.logo{

    font-size:50px;

    font-weight:900;

    color:white;

    letter-spacing:-2px;
}

.logo span{
    color:var(--primary);
}

.subtitle{

    margin-top:10px;

    color:var(--muted);

    letter-spacing:3px;

    font-size:12px;
}

.card{

    margin-top:15px;

    background:var(--card);

    border-radius:20px;

    padding:15px;

    border:1px solid rgba(255,255,255,0.03);
}

.card h3{

    color:var(--muted);

    margin-bottom:20px;

    font-size:12px;

    letter-spacing:2px;
}

input[type="file"],
input[type="number"],
input[type="text"]{

    width:100%;

    background:var(--editor);

    border:1px solid var(--border);

    color:white;

    padding:16px;

    border-radius:16px;

    font-size:12px;

    outline:none;

    transition:0.2s;
}

input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(103,240,212,0.1);
}

.grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;
}

label{

    display:block;

    margin-bottom:10px;

    color:var(--muted);

    font-size:12px;
}

.mt{
    margin-top:20px;
}

.mode-buttons{

    display:flex;

    background:var(--editor);

    border-radius:18px;

    padding:5px;

    gap:5px;
}

.mode{

    flex:1;

    border:none;

    background:transparent;

    color:var(--muted);

    padding:14px;

    border-radius:14px;

    cursor:pointer;

    font-size:12px;

    font-weight:bold;

    transition:0.2s;
}

.mode:hover{
    background:rgba(255,255,255,0.03);
}

.mode.active{

    background:var(--primary);

    color:#00151f;
}

.checkbox{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:20px;
}

.checkbox input{

    width:18px;
    height:18px;
}

canvas{

    width:100%;

    height:200px;

    background:black;

    border-radius:20px;

    image-rendering:pixelated;

    border:1px solid var(--border);
}

.editor{

    flex:1;

    background:var(--editor);

    border-radius:25px;

    overflow:hidden;

    border:1px solid var(--border);

    display:flex;

    flex-direction:column;
}

.editor-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid var(--border);

    padding-right:15px;
}

.tabs{

    display:flex;
}

.tab{

    background:none;

    border:none;

    color:var(--muted);

    padding:22px 30px;

    cursor:pointer;

    font-size:12px;

    transition:0.2s;
}

.tab:hover{
    background:rgba(255,255,255,0.03);
}

.tab.active{

    color:var(--primary);

    border-bottom:3px solid var(--primary);
}

.editor-tools{

    display:flex;

    align-items:center;

    gap:10px;
}

.tool-btn{

    width:36px;
    height:36px;

    border:none;

    background:transparent;

    color:var(--muted);

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    transition:0.2s;
}

.tool-btn:hover{

    background:rgba(255,255,255,0.05);

    color:var(--primary);
}

pre{

    flex:1;

    padding:30px;

    color:var(--primary);

    overflow:auto;

    font-size:11px;

    line-height:1.5;

    white-space:pre-wrap;

    tab-size:4;
}

pre::-webkit-scrollbar{

    width:10px;
    height:10px;
}

pre::-webkit-scrollbar-thumb{

    background:#203252;

    border-radius:20px;
}

@media(max-width:1200px){

    .container{

        flex-direction:column;

        height:auto;
    }

    .sidebar{

        width:100%;
    }

    .editor{

        min-height:700px;
    }
}