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

html{background:#0C1224;overflow:hidden;height:100%}

body{
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:1.8;
    color:#B0ACCC;
    --accent-green:#8CD4A8;
    --accent-amber:#E8A06E;
    height:100%;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
}

/* Background gradient mesh */
.bg-mesh{
    position:fixed;
    top:0;left:0;width:100%;height:100%;
    z-index:0;
    background:
        radial-gradient(ellipse at 20% 30%,#14182C 0%,transparent 50%),
        radial-gradient(ellipse at 80% 70%,#1A1230 0%,transparent 50%),
        radial-gradient(ellipse at 60% 20%,#101828 0%,transparent 40%),
        radial-gradient(ellipse at 30% 80%,#14182C 0%,transparent 45%),
        #0C1224;
    animation:meshDrift 60s ease-in-out infinite alternate;
}

@keyframes meshDrift{
    0%{background-position:0% 0%,100% 100%,50% 0%,0% 100%}
    50%{background-position:30% 20%,70% 80%,80% 30%,20% 70%}
    100%{background-position:10% 40%,90% 60%,40% 10%,60% 90%}
}

/* Dice constellation */
.dice-constellation{
    position:fixed;
    top:0;left:0;width:100%;height:200%;
    z-index:0;
    pointer-events:none;
    animation:diceFall 120s linear infinite;
}

@keyframes diceFall{
    0%{transform:translateY(0)}
    100%{transform:translateY(-50%)}
}

.dice-face{
    position:absolute;
    width:40px;height:40px;
    opacity:0.04;
}

.dice-face span{
    position:absolute;
    width:6px;height:6px;
    border-radius:50%;
    background:#E4E0F0;
}

/* Split layout */
.split-layout{
    position:relative;
    display:flex;
    height:100vh;
    z-index:1;
}

/* Left frosted panel */
.left-panel{
    position:relative;
    width:45%;
    height:calc(100vh - 48px);
    margin:24px 0 24px 24px;
    background:rgba(18,22,36,0.72);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    overflow:hidden;
    z-index:2;
    transform:translateX(-120%);
    animation:panelSlideIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s forwards;
}

@keyframes panelSlideIn{
    0%{transform:translateX(-120%)}
    100%{transform:translateX(0)}
}

.panel-border-texture{
    position:absolute;
    top:0;left:0;width:100%;height:100%;
    pointer-events:none;
    z-index:0;
    border-radius:16px;
    overflow:hidden;
}

.panel-border-texture::before{
    content:'σ  ∫  P()  E[]  Var  Σ  ∏  μ  σ²  ∂  ∇  ∞';
    position:absolute;
    top:0;left:-10px;
    writing-mode:vertical-rl;
    font-family:'Fira Code',monospace;
    font-size:80px;
    color:#E4E0F0;
    opacity:0.06;
    line-height:1;
    white-space:nowrap;
    letter-spacing:0.2em;
    clip-path:inset(0 0 0 calc(100% - 3px));
}

.panel-scroll{
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    padding:40px 32px;
    position:relative;
    z-index:1;
    scrollbar-width:thin;
    scrollbar-color:rgba(110,196,232,0.2) transparent;
}

.panel-scroll::-webkit-scrollbar{width:4px}
.panel-scroll::-webkit-scrollbar-track{background:transparent}
.panel-scroll::-webkit-scrollbar-thumb{background:rgba(110,196,232,0.2);border-radius:2px}

/* Hero */
.hero-title{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:48px;
    color:#E4E0F0;
    opacity:0;
    filter:blur(8px);
    animation:blurFocus 0.6s ease-out 1.3s forwards;
}

@keyframes blurFocus{
    0%{opacity:0;filter:blur(8px)}
    100%{opacity:1;filter:blur(0)}
}

.hero-subtitle{
    font-family:'DM Serif Display',serif;
    font-weight:400;
    font-size:18px;
    color:#B0ACCC;
    letter-spacing:0.2em;
    opacity:0;
    animation:fadeIn 0.4s ease-out 1.7s forwards;
    margin-bottom:24px;
}

@keyframes fadeIn{
    0%{opacity:0}
    100%{opacity:1}
}

.hero-desc{
    margin-bottom:24px;
}

/* Section headers */
h2{
    font-family:'DM Serif Display',serif;
    font-weight:400;
    font-size:28px;
    color:#E4E0F0;
    letter-spacing:0.03em;
    margin-bottom:4px;
}

h3.section-subtitle{
    font-family:'DM Serif Display',serif;
    font-weight:400;
    font-size:16px;
    color:#B0ACCC;
    letter-spacing:0.1em;
    margin-bottom:20px;
    opacity:0.7;
}

/* Panel sections */
.panel-section{
    min-height:80vh;
    padding-bottom:60px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.panel-section:last-of-type{
    border-bottom:none;
}

p{margin-bottom:16px}

/* Frosted cards */
.frost-card{
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    background:rgba(110,196,232,0.06);
    border:1px solid rgba(110,196,232,0.15);
    border-radius:12px;
    padding:20px;
    margin:20px 0;
}

.frost-card .formula{
    display:inline-block;
    font-family:'Fira Code',monospace;
    font-weight:400;
    font-size:15px;
    letter-spacing:0.04em;
    color:#6EC4E8;
    background:rgba(110,196,232,0.08);
    padding:2px 6px;
    border-radius:4px;
    margin-bottom:8px;
    opacity:0.3;
    filter:blur(4px);
    transition:opacity 0.5s ease,filter 0.5s ease;
}

.frost-card.in-view .formula{
    opacity:1;
    filter:blur(0);
}

.card-text{
    font-size:14px;
    color:#B0ACCC;
    margin-bottom:0;
    line-height:1.6;
}

/* Right zone */
.right-zone{
    flex:1;
    position:relative;
    height:100vh;
    z-index:1;
}

#vizCanvas{
    width:100%;
    height:100%;
    display:block;
    opacity:0;
    transition:opacity 0.4s ease;
}

#vizCanvas.visible{
    opacity:1;
}

/* Canvas accent colors (used by JS) */
.viz-accent-green{color:#8CD4A8}
.viz-accent-amber{color:#E8A06E}

/* Reshuffle button */
.reshuffle-btn{
    position:absolute;
    bottom:32px;
    right:32px;
    font-family:'IBM Plex Sans',sans-serif;
    font-size:13px;
    color:#E4E0F0;
    background:rgba(18,22,36,0.72);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px;
    padding:8px 20px;
    cursor:pointer;
    z-index:10;
    display:none;
    transition:background 0.3s,border-color 0.3s;
}

.reshuffle-btn:hover{
    background:rgba(110,196,232,0.12);
    border-color:rgba(110,196,232,0.3);
}

.reshuffle-btn.active{
    display:block;
}

/* Footer */
.panel-footer{
    text-align:center;
    padding:40px 0 20px;
}

.footer-domain{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:18px;
    color:#E4E0F0;
    opacity:0.3;
}

/* Mobile canvas inline block */
.mobile-canvas-block{
    width:100%;
    height:280px;
    margin:20px 0;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(18,22,36,0.5);
}

/* Mobile */
@media(max-width:768px){
    .split-layout{
        flex-direction:column;
        height:auto;
        overflow-y:auto;
    }
    .left-panel{
        width:calc(100% - 24px);
        height:auto;
        margin:12px;
        transform:translateX(0);
        animation:none;
        opacity:1;
    }
    .panel-scroll{
        height:auto;
        overflow:visible;
        padding:24px 20px;
    }
    .panel-section{
        min-height:auto;
    }
    .right-zone{
        display:none;
    }
    .hero-title{
        font-size:36px;
        opacity:1;
        filter:none;
        animation:none;
    }
    .hero-subtitle{
        opacity:1;
        animation:none;
    }
    body{
        overflow-y:auto;
        height:auto;
    }
    html{
        overflow:auto;
        height:auto;
    }
    .panel-border-texture{
        display:none;
    }
}

@supports not (backdrop-filter:blur(1px)){
    .left-panel{
        background:#0E1428;
    }
    .frost-card{
        background:rgba(14,20,40,0.9);
    }
}