/* =======================================================
   Better Piano Visualizer UI v2.0
   Part 1/3
======================================================= */

:root{
    --bg:#040b14;
    --bg2:#081321;
    --bg3:#0b1d31;

    --panel:rgba(18,27,45,.62);
    --panelHover:rgba(24,35,58,.82);

    --border:rgba(120,220,255,.12);

    --accent:#32c8ff;
    --accent2:#4f7dff;

    --text:#eef8ff;
    --text2:#9fc8df;

    --shadow:
        0 20px 60px rgba(0,0,0,.45);

    --glow:
        0 0 30px rgba(0,180,255,.20);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    min-height:100vh;

    overflow-x:hidden;

    color:var(--text);

    font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

    background:

    radial-gradient(circle at 10% 10%,
    rgba(0,180,255,.12),
    transparent 35%),

    radial-gradient(circle at 90% 20%,
    rgba(80,120,255,.08),
    transparent 30%),

    radial-gradient(circle at bottom,
    rgba(0,255,220,.05),
    transparent 45%),

    linear-gradient(
    180deg,
    #03070f,
    #06111d,
    #08192a,
    #091e31);
}

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    repeating-linear-gradient(
    90deg,

    transparent 0px,

    transparent 4px,

    rgba(255,255,255,.008) 5px,

    transparent 6px);

    opacity:.35;
}

#ui{

    position:fixed;

    top:18px;

    left:18px;

    width:430px;

    max-width:95vw;

    max-height:92vh;

    overflow-y:auto;

    z-index:999;

    padding:22px;

    border-radius:26px;

    background:var(--panel);

    backdrop-filter:
    blur(35px)
    saturate(190%);

    -webkit-backdrop-filter:
    blur(35px)
    saturate(190%);

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

    box-shadow:

    var(--shadow),

    var(--glow),

    inset
    0 1px
    rgba(255,255,255,.08);

    animation:panelAppear .45s ease;
}

@keyframes panelAppear{

from{

opacity:0;

transform:
translateY(-15px)
scale(.98);

}

to{

opacity:1;

transform:none;

}
}

#ui::-webkit-scrollbar{

width:8px;

}

#ui::-webkit-scrollbar-track{

background:transparent;

}

#ui::-webkit-scrollbar-thumb{

background:

linear-gradient(

180deg,

#39d4ff,

#248fff);

border-radius:20px;

}

#ui::-webkit-scrollbar-thumb:hover{

background:

linear-gradient(

180deg,

#61e2ff,

#3f9dff);

}

.panel{

margin-bottom:18px;

padding:16px;

border-radius:18px;

background:

linear-gradient(

180deg,

rgba(255,255,255,.03),

rgba(255,255,255,.015));

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

transition:.25s;

}

.panel:hover{

background:var(--panelHover);

transform:translateY(-2px);

box-shadow:

0 12px 30px rgba(0,0,0,.25),

0 0 20px rgba(0,180,255,.08);

}

.panel-title{

display:flex;

align-items:center;

gap:10px;

font-size:17px;

font-weight:700;

letter-spacing:.4px;

margin-bottom:14px;

color:white;

}

.panel-title::before{

content:"";

width:10px;

height:10px;

border-radius:50%;

background:#35d4ff;

box-shadow:

0 0 15px #35d4ff,

0 0 30px #35d4ff;

}
/* =======================================================
   Better Piano Visualizer UI v2.0
   Part 2/3
======================================================= */

#controls,
#extra,
#morefx,
#fx2,
#audioPanel,
#watermarkPanel,
#backgroundPanel,
#particlePanel{
    margin-bottom:14px;
}

.label{
    display:inline-block;
    min-width:130px;
    color:var(--text2);
    font-size:14px;
    font-weight:600;
    margin-right:8px;
}

input,
select,
button{

    border:none;

    outline:none;

    color:white;

    font-size:14px;

    font-family:inherit;

    transition:.25s;

    margin:4px;

}

input,
select{

    padding:9px 12px;

    border-radius:12px;

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

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

    box-shadow:
    inset 0 1px rgba(255,255,255,.05);

}

input:hover,
select:hover{

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

}

input:focus,
select:focus{

    border-color:#37d2ff;

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

    box-shadow:

    0 0 18px rgba(0,180,255,.25),

    inset 0 1px rgba(255,255,255,.08);

}

.small-input{

    width:65px;

}

.slider{

    width:150px;

}

/* Slider */

input[type=range]{

    appearance:none;

    height:6px;

    border-radius:20px;

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

    padding:0;

}

input[type=range]::-webkit-slider-thumb{

    appearance:none;

    width:18px;

    height:18px;

    border-radius:50%;

    background:linear-gradient(
    180deg,
    #5ce7ff,
    #1aa4ff);

    box-shadow:

    0 0 12px rgba(0,180,255,.55);

    cursor:pointer;

}

input[type=range]::-webkit-slider-thumb:hover{

    transform:scale(1.15);

}

/* Buttons */

button{

    padding:10px 18px;

    border-radius:14px;

    font-weight:700;

    cursor:pointer;

    background:

    linear-gradient(
    135deg,
    #39d6ff,
    #248fff);

    box-shadow:

    0 8px 18px rgba(0,150,255,.30);

}

button:hover{

    transform:
    translateY(-2px)
    scale(1.03);

    filter:brightness(1.08);

    box-shadow:

    0 12px 28px rgba(0,170,255,.45);

}

button:active{

    transform:scale(.96);

}

/* Recording button */

.rec-btn{

    background:

    linear-gradient(
    135deg,
    #ff5f6d,
    #ff2f55);

    box-shadow:

    0 10px 26px rgba(255,60,90,.35);

    font-size:15px;

    padding:11px 22px;

}

.rec-btn:hover{

    background:

    linear-gradient(
    135deg,
    #ff6f7a,
    #ff3b5c);

}

/* Checkbox */

input[type=checkbox]{

    appearance:none;

    width:18px;

    height:18px;

    border-radius:5px;

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

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

    cursor:pointer;

    position:relative;

}

input[type=checkbox]:checked{

    background:#35d4ff;

    box-shadow:

    0 0 15px rgba(53,212,255,.55);

}

input[type=checkbox]:checked::after{

    content:"✓";

    position:absolute;

    left:3px;

    top:-1px;

    color:white;

    font-size:13px;

}

/* Select */

select{

    cursor:pointer;

}

option{

    background:#0b1625;

    color:white;

}
/* =======================================================
   Better Piano Visualizer UI v2.0
   Part 3/3
======================================================= */

/* Canvas */

canvas{

    display:block;

    margin:60px auto 0;

    border-radius:28px;

    background:transparent;

    outline:none;

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

    box-shadow:

    0 40px 100px rgba(0,0,0,.55),

    0 0 100px rgba(0,180,255,.12),

    inset 0 1px rgba(255,255,255,.06);

    transition:.35s;

}

canvas:hover{

    box-shadow:

    0 50px 120px rgba(0,0,0,.65),

    0 0 140px rgba(0,200,255,.18);

}

/* Status */

#status{

    display:inline-block;

    margin-left:12px;

    font-size:15px;

    font-weight:600;

    color:#53d8ff;

    text-shadow:

    0 0 12px rgba(83,216,255,.65);

}

/* Progress */

#renderProgressWrap{

    display:none;

    margin-top:14px;

}

#renderProgressBar{

    width:100%;

    height:12px;

    appearance:none;

    overflow:hidden;

    border-radius:999px;

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

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

}

#renderProgressBar::-webkit-progress-bar{

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

}

#renderProgressBar::-webkit-progress-value{

    border-radius:999px;

    background:

    linear-gradient(
    90deg,
    #3fdcff,
    #3f8cff);

    box-shadow:

    0 0 20px rgba(0,180,255,.5);

}

#renderProgressBar::-moz-progress-bar{

    background:

    linear-gradient(
    90deg,
    #3fdcff,
    #3f8cff);

}

#renderStatusText{

    margin-top:8px;

    color:#9fdcff;

    font-size:13px;

    font-weight:600;

}

/* Text selection */

::selection{

    background:#33bfff55;

    color:white;

}

/* Smooth animations */

*{

    transition:

    background .25s,

    color .25s,

    border-color .25s,

    box-shadow .25s,

    transform .25s;

}

/* Floating glow */

#ui::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:26px;

    pointer-events:none;

    background:

    linear-gradient(
    135deg,

    rgba(255,255,255,.05),

    transparent 35%,

    transparent 70%,

    rgba(0,180,255,.05));

}

/* Animated border */

#ui::after{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:26px;

    padding:1px;

    background:

    linear-gradient(
    135deg,

    rgba(0,180,255,.35),

    transparent,

    rgba(0,255,255,.25));

    -webkit-mask:

    linear-gradient(#000 0 0) content-box,

    linear-gradient(#000 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

/* Nice fade */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.panel{

    animation:fadeIn .45s ease;

}

/* Mobile */

@media(max-width:900px){

    #ui{

        width:95vw;

        left:2.5vw;

        top:10px;

        max-height:88vh;

        padding:18px;

    }

    canvas{

        width:100%;

        height:auto;

        border-radius:18px;

    }

}
#mobileBlock{
    display:none;
}

@media (max-width: 1024px), (pointer: coarse){

    #mobileBlock{

        position:fixed;
        inset:0;

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

        background:#050b16;

        z-index:999999;
    }

    .mobileBox{

        width:90%;
        max-width:420px;

        background:#111b2d;

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

        border-radius:20px;

        padding:30px;

        text-align:center;

        color:white;

        box-shadow:
        0 0 40px rgba(0,180,255,.25);
    }

    .mobileBox h1{

        color:#42d5ff;

        margin-top:0;
    }

    body>*:not(#mobileBlock){
        display:none !important;
    }

    body{
        overflow:hidden;
    }
}
body.mobile > *:not(#mobileBlock){
    display:none !important;
}

body.mobile #mobileBlock{
    display:flex !important;
}