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

body{

    background: radial-gradient(circle at top,#081a2d,#020611 70%);

    color:white;

    font-family: Georgia, serif;

    margin:0;

    overflow-y:scroll;

    scroll-snap-type:y mandatory;

    scroll-behavior:smooth;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;

}

html{

    scroll-behavior:smooth;

    scroll-snap-type:y mandatory;

    overflow-y:scroll;

}

main{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

    scroll-snap-align:start;
    scroll-snap-stop:always;

}

.chapter{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:80px;

    scroll-snap-align:start;
    scroll-snap-stop:always;

}

h1{

    font-size:70px;

    letter-spacing:8px;

    margin-bottom:25px;

}

h2{

    font-size:32px;

    font-weight:normal;

    margin-bottom:30px;

}

p{

    font-size:22px;

    line-height:1.7;

    color:#c9d4df;

    margin-bottom:50px;

}

button{

    background:transparent;

    color:white;

    border:2px solid white;

    padding:18px 45px;

    font-size:18px;

    letter-spacing:2px;

    cursor:pointer;

    transition:0.4s;

}

button:hover{

    background:white;

    color:#081a2d;

}

.scroll-up-button{

    position:fixed;

    bottom:330px;

    left:22px;

    width:60px;

    height:60px;

    min-width: 60px;
    max-width: 60px;

    min-height: 60px;
    max-height: 60px;

    border-radius:50%;
    box-sizing: border-box;
    padding: 0;

    border:0;

    background:rgba(19, 69, 168, 0.65);

    color:white;

    font-size:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:transform .2s, background .2s, box-shadow .2s;

    z-index:1000;

    backdrop-filter:blur(8px);

}

.scroll-up-button:hover{

    transform:translateY(-2px);

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

    box-shadow:0 0 18px rgba(0,200,255,.2);

}

.scroll-up-button:focus-visible{

    outline:2px solid rgba(0,200,255,.8);

    outline-offset:3px;

}

section{

    padding:80px;

}

/* Floating controls visibility: hidden on landing, fade when shown */
.master-volume-control,
.scroll-up-button{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 300ms ease, visibility 300ms ease;
}

.controls-visible .master-volume-control,
.controls-visible .scroll-up-button{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.placeholder-image{

    width:60px;

    height:60px;

    border:2px dashed #6d7b8a;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:40px 0;

    color:#9eb1c4;

}

/* =====================================
   CHAPTER IMAGES
===================================== */

.image-frame{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:40px auto;

    background:none;

    padding:0;

    border:none;

    box-shadow:none;

}

.image-frame:hover{

    transform:scale(1.02);

    box-shadow:
        0 0 20px rgba(0,200,255,.35),
        0 0 60px rgba(0,140,255,.25),
        0 0 120px rgba(0,90,255,.15);

}

.chapter-image{

    display:block;

    width:100%;

    max-width:520px;

    height:auto;

    border-radius:18px;

    transition:.45s;

    box-shadow:

        0 0 25px rgba(0,210,255,.25),

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

        0 0 120px rgba(0,120,255,.12);


}

/*====================================
ARTSEA BIOLUMINESCENCE
====================================*/

.artsea-title{

    font-size:78px; !important;

    letter-spacing:8px;

    text-align:center;

}

.artsea-title span{

    display:inline-block;

    animation:glow 6s infinite;

}

.artsea-title span:nth-child(1){

    animation-delay:0s;

}

.artsea-title span:nth-child(2){

    animation-delay:.3s;

}

.artsea-title span:nth-child(3){

    animation-delay:.6s;

}

.artsea-title span:nth-child(4){

    animation-delay:.9s;

}

.artsea-title span:nth-child(5){

    animation-delay:1.2s;

}

.artsea-title span:nth-child(6){

    animation-delay:1.5s;

}

@keyframes glow{

    0%{

        color:white;

        text-shadow:none;

    }

    30%{

        color:#bdfdff;

        text-shadow:
        0 0 8px #55ffff,
        0 0 18px #33ddee,
        0 0 35px #00bbff;

    }

    60%{

        color:white;

        text-shadow:none;

    }

    100%{

        color:white;

        text-shadow:none;

    }

}gin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background: radial-gradient(circle at top,#081a2d,#020611 70%);

    color:white;

    font-family: Georgia, serif;

    margin:0;


}
html{

    scroll-behavior:smooth;

    scroll-snap-type:y mandatory;


}
main{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

      scroll-snap-align:start;
      scroll-snap-stop:always;

   
}
.chapter{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:clamp(20px, 3vw, 80px);
    scroll-snap-align:start;
    scroll-snap-stop:always;

}

h1{

    font-size:70px;

    letter-spacing:8px;

    margin-bottom:25px;

}

h2{

    font-size:28px;

    font-weight:normal;

    margin-bottom:30px;

}

p{

    font-size:22px;

    line-height:1.7;

    color:#c9d4df;

    margin-bottom:50px;

}

button{

    background:transparent;

    color:white;

    border:2px solid white;

    padding:18px 45px;

    font-size:18px;

    letter-spacing:2px;

    cursor:pointer;

    transition:0.4s;

}

button:hover{

    background:white;

    color:#081a2d;

}section{



    padding:80px;

}

.placeholder-image{

    width:500px;

    height:300px;

    border:2px dashed #6d7b8a;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:40px 0;

    color:#9eb1c4;

}/* =====================================
   CHAPTER IMAGES
===================================== */

.chapter-image{

    display:block;

    width:auto;
    height:auto;

    max-width:75%;
    max-height:55vh;

    object-fit:contain;

    margin:40px auto;

    border-radius:12px;

    transition:all .4s ease;


    transition: all .4s ease;

    box-shadow:
        0 0 10px rgba(0,180,255,.20),
        0 0 35px rgba(0,120,255,.15),
        0 0 80px rgba(0,80,255,.08);

}

.chapter-image:hover{

    transform:scale(1.01);

    box-shadow:

        0 0 35px rgba(0,220,255,.40),

        0 0 80px rgba(0,190,255,.28),

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

}

}/*====================================
ARTSEA BIOLUMINESCENCE
====================================*/

.artsea-title{

    font-size:10px;

    letter-spacing:2px;

    text-align:center;

}

.artsea-title span{

    display:inline-block;

    animation: glow 6s infinite;

}.artsea-title span:nth-child(1){

    animation-delay:0s;

}

.artsea-title span:nth-child(2){

    animation-delay:.3s;

}

.artsea-title span:nth-child(3){

    animation-delay:.6s;

}

.artsea-title span:nth-child(4){

    animation-delay:.9s;

}

.artsea-title span:nth-child(5){

    animation-delay:1.2s;

}

.artsea-title span:nth-child(6){

    animation-delay:1.5s;

}@keyframes glow{

0%{

    color:white;

    text-shadow:none;

}

30%{

    color:#bdfdff;

    text-shadow:
    0 0 8px #55ffff,
    0 0 18px #33ddee,
    0 0 35px #00bbff;

}

60%{

    color:white;

    text-shadow:none;

}

100%{

    color:white;

    text-shadow:none;

}

}/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 768px){

    .artsea-title{

        font-size:43px;

        letter-spacing:6px;

    }

    h2{

        font-size:26px;

    }

    h3{

        font-size:22px;

    }

    p{

        font-size:18px;

    }

    .chapter{

        padding:30px 20px;

    }

    .chapter-image{

        width:90%;

        max-width:450px;

        margin:20px auto;

    }

}

.glow-ice{
    box-shadow:
        0 0 25px rgba(183,221,235,.20),
        0 0 60px rgba(129,180,205,.14),
        0 0 120px rgba(91,142,174,.08);
}

.glow-ice:hover{
    box-shadow:
        0 0 35px rgba(183,221,235,.35),
        0 0 90px rgba(129,180,205,.27),
        0 0 160px rgba(91,142,174,.16);
}

.glow-jade{
    box-shadow:
        0 0 25px rgba(122,191,143,.20),
        0 0 60px rgba(74,151,112,.14),
        0 0 120px rgba(45,111,84,.08);
}

.glow-jade:hover{
    box-shadow:
        0 0 35px rgba(122,191,143,.35),
        0 0 90px rgba(74,151,112,.27),
        0 0 160px rgba(45,111,84,.16);
}

.glow-coral{
    box-shadow:
        0 0 25px rgba(219,133,139,.20),
        0 0 60px rgba(186,94,105,.14),
        0 0 120px rgba(144,64,78,.08);
}

.glow-coral:hover{
    box-shadow:
        0 0 35px rgba(219,133,139,.35),
        0 0 90px rgba(186,94,105,.27),
        0 0 160px rgba(144,64,78,.16);
}

.glow-cobalt{
    box-shadow:
        0 0 25px rgba(112,149,205,.20),
        0 0 60px rgba(76,112,171,.14),
        0 0 120px rgba(52,79,132,.08);
}

.glow-cobalt:hover{
    box-shadow:
        0 0 35px rgba(112,149,205,.35),
        0 0 90px rgba(76,112,171,.27),
        0 0 160px rgba(52,79,132,.16);
}

.glow-amber{
    box-shadow:
        0 0 25px rgba(217,172,104,.20),
        0 0 60px rgba(181,133,70,.14),
        0 0 120px rgba(138,96,47,.08);
}

.glow-amber:hover{
    box-shadow:
        0 0 35px rgba(217,172,104,.35),
        0 0 90px rgba(181,133,70,.27),
        0 0 160px rgba(138,96,47,.16);
}

.glow-aqua{
    box-shadow:
        0 0 25px rgba(105,191,190,.20),
        0 0 60px rgba(70,151,154,.14),
        0 0 120px rgba(45,111,118,.08);
}

.glow-aqua:hover{
    box-shadow:
        0 0 35px rgba(105,191,190,.35),
        0 0 90px rgba(70,151,154,.27),
        0 0 160px rgba(45,111,118,.16);
}

.glow-ultramarine{
    box-shadow:
        0 0 25px rgba(102,118,191,.20),
        0 0 60px rgba(68,82,155,.14),
        0 0 120px rgba(47,58,119,.08);
}

.glow-ultramarine:hover{
    box-shadow:
        0 0 35px rgba(102,118,191,.35),
        0 0 90px rgba(68,82,155,.27),
        0 0 160px rgba(47,58,119,.16);
}

.glow-turquoise{
    box-shadow:
        0 0 25px rgba(92,181,185,.20),
        0 0 60px rgba(60,143,149,.14),
        0 0 120px rgba(39,106,113,.08);
}

.glow-turquoise:hover{
    box-shadow:
        0 0 35px rgba(92,181,185,.35),
        0 0 90px rgba(60,143,149,.27),
        0 0 160px rgba(39,106,113,.16);
}

.glow-indigo{
    box-shadow:
        0 0 25px rgba(105,112,168,.20),
        0 0 60px rgba(69,76,131,.14),
        0 0 120px rgba(45,51,96,.08);
}

.glow-indigo:hover{
    box-shadow:
        0 0 35px rgba(105,112,168,.35),
        0 0 90px rgba(69,76,131,.27),
        0 0 160px rgba(45,51,96,.16);
}

.glow-gold{
    box-shadow:
        0 0 25px rgba(225,194,117,.20),
        0 0 60px rgba(188,152,76,.14),
        0 0 120px rgba(144,111,50,.08);
}

.glow-gold:hover{
    box-shadow:
        0 0 35px rgba(225,194,117,.35),
        0 0 90px rgba(188,152,76,.27),
        0 0 160px rgba(144,111,50,.16);
}

.glow-lavender{
    box-shadow:
        0 0 25px rgba(182,143,198,.20),
        0 0 60px rgba(143,104,160,.14),
        0 0 120px rgba(106,74,120,.08);
}

.glow-lavender:hover{
    box-shadow:
        0 0 35px rgba(182,143,198,.35),
        0 0 90px rgba(143,104,160,.27),
        0 0 160px rgba(106,74,120,.16);
}

.glow-azure{
    box-shadow:
        0 0 25px rgba(115,166,205,.20),
        0 0 60px rgba(77,127,168,.14),
        0 0 120px rgba(52,91,129,.08);
}

.glow-azure:hover{
    box-shadow:
        0 0 35px rgba(115,166,205,.35),
        0 0 90px rgba(77,127,168,.27),
        0 0 160px rgba(52,91,129,.16);
}

.glow-sand{
    box-shadow:
        0 0 25px rgba(205,174,126,.20),
        0 0 60px rgba(166,134,86,.14),
        0 0 120px rgba(126,99,59,.08);
}

.glow-sand:hover{
    box-shadow:
        0 0 35px rgba(205,174,126,.35),
        0 0 90px rgba(166,134,86,.27),
        0 0 160px rgba(126,99,59,.16);
}

.glow-plum{
    box-shadow:
        0 0 25px rgba(159,102,151,.20),
        0 0 60px rgba(123,68,116,.14),
        0 0 120px rgba(89,45,83,.08);
}

.glow-plum:hover{
    box-shadow:
        0 0 35px rgba(159,102,151,.35),
        0 0 90px rgba(123,68,116,.27),
        0 0 160px rgba(89,45,83,.16);
}

.glow-rose{
    box-shadow:
        0 0 25px rgba(222,145,166,.20),
        0 0 60px rgba(187,104,130,.14),
        0 0 120px rgba(143,72,99,.08);
}

.glow-rose:hover{
    box-shadow:
        0 0 35px rgba(222,145,166,.35),
        0 0 90px rgba(187,104,130,.27),
        0 0 160px rgba(143,72,99,.16);
}

.glow-violet{
    box-shadow:
        0 0 25px rgba(157,126,188,.20),
        0 0 60px rgba(119,89,151,.14),
        0 0 120px rgba(84,62,112,.08);
}

.glow-violet:hover{
    box-shadow:
        0 0 35px rgba(157,126,188,.35),
        0 0 90px rgba(119,89,151,.27),
        0 0 160px rgba(84,62,112,.16);
}

.glow-midnight{
    box-shadow:
        0 0 25px rgba(88,97,136,.20),
        0 0 60px rgba(59,67,104,.14),
        0 0 120px rgba(38,45,74,.08);
}

.glow-midnight:hover{
    box-shadow:
        0 0 35px rgba(88,97,136,.35),
        0 0 90px rgba(59,67,104,.27),
        0 0 160px rgba(38,45,74,.16);
}

.glow-pink{
    box-shadow:
        0 0 25px rgba(221,133,179,.20),
        0 0 60px rgba(184,91,139,.14),
        0 0 120px rgba(140,59,102,.08);
}

.glow-pink:hover{
    box-shadow:
        0 0 35px rgba(221,133,179,.35),
        0 0 90px rgba(184,91,139,.27),
        0 0 160px rgba(140,59,102,.16);
}

.glow-burgundy{
    box-shadow:
        0 0 25px rgba(144,79,111,.20),
        0 0 60px rgba(108,52,80,.14),
        0 0 120px rgba(77,34,58,.08);
}

.glow-burgundy:hover{
    box-shadow:
        0 0 35px rgba(144,79,111,.35),
        0 0 90px rgba(108,52,80,.27),
        0 0 160px rgba(77,34,58,.16);
}

.glow-crimson{
    box-shadow:
        0 0 25px rgba(207,96,119,.20),
        0 0 60px rgba(168,60,85,.14),
        0 0 120px rgba(126,39,62,.08);
}

.glow-crimson:hover{
    box-shadow:
        0 0 35px rgba(207,96,119,.35),
        0 0 90px rgba(168,60,85,.27),
        0 0 160px rgba(126,39,62,.16);
}

.glow-honey{
    box-shadow:
        0 0 25px rgba(223,194,98,.20),
        0 0 60px rgba(186,150,61,.14),
        0 0 120px rgba(143,110,40,.08);
}

.glow-honey:hover{
    box-shadow:
        0 0 35px rgba(223,194,98,.35),
        0 0 90px rgba(186,150,61,.27),
        0 0 160px rgba(143,110,40,.16);
}

.glow-amethyst{
    box-shadow:
        0 0 25px rgba(157,94,154,.20),
        0 0 60px rgba(121,59,119,.14),
        0 0 120px rgba(87,39,86,.08);
}

.glow-amethyst:hover{
    box-shadow:
        0 0 35px rgba(157,94,154,.35),
        0 0 90px rgba(121,59,119,.27),
        0 0 160px rgba(87,39,86,.16);
}

.glow-pearl{
    box-shadow:
        0 0 25px rgba(210,224,225,.20),
        0 0 60px rgba(164,188,191,.14),
        0 0 120px rgba(121,151,157,.08);
}

.listen-button{

    padding:10px 24px;

    font-size:14px;

    letter-spacing:1.5px;

    margin:0 auto 30px;

}

.glow-pearl:hover{
    box-shadow:
        0 0 35px rgba(210,224,225,.35),
        0 0 90px rgba(164,188,191,.27),
        0 0 160px rgba(121,151,157,.16);
}
.project-title{

    font-family: Georgia, serif;

    font-size: 1.5rem;

    font-weight: 400;

    font-style: normal;

    letter-spacing: 2px;

    color: rgba(220,230,240,.90);

    margin: 18px 0 28px;

}

.version-badge{

    display:inline-block;

    margin-bottom:28px;

    padding:6px 12px;

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

    border-radius:999px;

    font-size:.85rem;

    color:rgba(255,255,255,.82);

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

    letter-spacing:.12em;

}

.master-volume-control{

    position:fixed;

    right:22px;

    bottom:22px;

    display:flex;

    align-items:center;

    z-index:10;

}

.master-volume-toggle{

    width:44px;

    height:44px;

    padding:0;

    font-size:18px;

    letter-spacing:0;

    display:grid;

    place-items:center;

}

.master-volume-slider{

    width:0;

    opacity:0;

    margin:0;

    pointer-events:none;

    accent-color:#c9d4df;

    transition:width .3s ease, opacity .3s ease, margin .3s ease;

}

.master-volume-control.is-expanded .master-volume-slider{

    width:120px;

    opacity:1;

    margin-left:10px;

    pointer-events:auto;

}