/*==================================================
                SWEET.CSS
           PINKZALIEN
           Phase 1
====================================================*/


/*==================================================
                    RESET
====================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Nunito',sans-serif;

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

    background:var(--background);

    transition:
        background .35s,
        color .35s;

}



/*==================================================
                COLOR VARIABLES
====================================================*/

:root{

    /* Main */

    --background:
    linear-gradient(
        180deg,
        #fffdfb 0%,
        #fff8fc 40%,
        #f6f9ff 100%
    );

    --window:#ffffffd8;

    --panel:#ffffffee;

    /* Accent Colors */

    --pink:#ff82be;

    --hotpink:#ff5fa5;

    --lavender:#ccb7ff;

    --purple:#9f82ff;

    --cyan:#92e8ff;

    --blue:#79bfff;

    --mint:#c6fff0;

    --yellow:#ffe885;

    --peach:#ffd7c8;

    /* Text */

    --text:#5d5872;

    --heading:#8768a8;

    --subheading:#69a8d9;

    /* Borders */

    --border:#ffdcef;

    --border-hover:#bcdfff;

    /* Shadows */

    --shadow-soft:
        0 8px 20px rgba(255,188,223,.18);

    --shadow-big:
        0 18px 40px rgba(210,210,255,.25);

    /* Misc */

    --radius:24px;

    --transition:.35s ease;

}



/*==================================================
                BACKGROUND
====================================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(circle at top left,
        rgba(255,214,236,.7),
        transparent 40%),

        radial-gradient(circle at top right,
        rgba(193,245,255,.65),
        transparent 42%),

        radial-gradient(circle at bottom,
        rgba(219,207,255,.55),
        transparent 45%);

    z-index:-5;

}



/* floating sparkles */

.background-stars{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.75;

    background-image:

        radial-gradient(circle,#ffffff 1px,transparent 1px),

        radial-gradient(circle,#ffd6ec 1px,transparent 1px),

        radial-gradient(circle,#d6f3ff 1px,transparent 1px),

        radial-gradient(circle,#ffe78c 1px,transparent 1px);

    background-size:

        180px 180px,

        260px 260px,

        320px 320px,

        420px 420px;

    animation:starDrift 80s linear infinite;

    z-index:-4;

}


/* soft floating blobs */

.background-orbs{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:-3;

}

.background-orbs::before,
.background-orbs::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    filter:blur(70px);

    opacity:.18;

}

.background-orbs::before{

    background:var(--pink);

    top:-120px;
    left:-100px;

}

.background-orbs::after{

    background:var(--cyan);

    bottom:-120px;
    right:-120px;

}



/*==================================================
                    WINDOW
====================================================*/

.window{

    width:min(1450px,92%);

    margin:40px auto;

    background:var(--window);

    backdrop-filter:blur(18px);

    border:3px solid white;

    border-radius:34px;

    overflow:hidden;

    box-shadow:

        0 0 0 3px var(--border),

        var(--shadow-big);

}



/*==================================================
                TITLE BAR
====================================================*/

.titlebar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 28px;

    background:

        linear-gradient(
            90deg,
            var(--pink),
            var(--lavender),
            var(--cyan)
        );

}



/* little circles */

.lights{

    display:flex;

    gap:10px;

}

.lights div{

    width:14px;
    height:14px;

    border-radius:50%;

    background:white;

    opacity:.95;

    box-shadow:

        0 0 10px rgba(255,255,255,.8);

}



/* title */

.titlebar h1{

    font-family:'Orbitron',sans-serif;

    letter-spacing:3px;

    font-size:1rem;

    color:white;

    text-shadow:

        0 2px 10px rgba(0,0,0,.15);

}



/* version */

.version{

    font-family:'Silkscreen';

    color:white;

    font-size:.75rem;

}



/*==================================================
                NAVIGATION
====================================================*/

nav{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

    padding:22px;

    background:#fff;

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

}

nav a{

    text-decoration:none;

    font-family:'Orbitron',sans-serif;

    color:var(--heading);

    padding:

        12px 24px;

    background:white;

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

    border-radius:999px;

    transition:var(--transition);

    box-shadow:

        var(--shadow-soft);

}

nav a:hover{

    transform:

        translateY(-4px)
        scale(1.03);

    border-color:var(--cyan);

    background:#fffafd;

}

nav .active{

    background:

        linear-gradient(
            90deg,
            var(--pink),
            var(--lavender)
        );

    color:white;

    border-color:white;

}



/*==================================================
                MAIN LAYOUT
====================================================*/

.content{

    display:grid;

    grid-template-columns:

        340px

        1fr;

    gap:30px;

    padding:35px;

    align-items:start;

}

aside{

    display:flex;

    flex-direction:column;

    gap:24px;

}

main{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/*==================================================
                PANELS
==================================================*/

.panel{

    position:relative;

    background:var(--panel);

    border:3px solid white;

    border-radius:var(--radius);

    padding:26px;

    box-shadow:

        0 0 0 2px var(--border),

        var(--shadow-soft);

    transition:var(--transition);

    overflow:hidden;

}

.panel:hover{

    transform:
        translateY(-6px);

    box-shadow:

        0 0 0 2px var(--border-hover),

        var(--shadow-big);

}


/* little decorative corner */

.panel::after{

    content:"✦";

    position:absolute;

    top:14px;
    right:18px;

    color:var(--lavender);

    opacity:.6;

    font-size:.9rem;

}



/*==================================================
                HEADINGS
==================================================*/

.panel h2{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    font-family:'Orbitron',sans-serif;

    font-size:1.2rem;

    color:var(--heading);

    letter-spacing:1px;

}

.panel h2::before{

    content:"✦";

    color:var(--hotpink);

}

.panel h3{

    margin-bottom:10px;

    font-family:'Orbitron',sans-serif;

    font-size:.9rem;

    color:var(--subheading);

}

.panel h3::before{

    content:"♡ ";

    color:var(--pink);

}



/*==================================================
                TEXT
==================================================*/

.panel p{

    line-height:1.85;

    color:var(--text);

}

.panel ul{

    list-style:none;

}

.panel li{

    margin-bottom:12px;

    line-height:1.7;

}



/*==================================================
                LINKS
==================================================*/

a{

    transition:var(--transition);

}

.panel a{

    color:var(--hotpink);

    text-decoration:none;

    font-weight:700;

}

.panel a:hover{

    color:var(--purple);

}



/*==================================================
                BUTTONS
==================================================*/

button{

    cursor:pointer;

    font-family:'Nunito',sans-serif;

    border:none;

}



/* cute rounded buttons */

.sweet-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:

        12px 20px;

    background:

        linear-gradient(
            135deg,
            var(--pink),
            var(--lavender)
        );

    color:white;

    border-radius:999px;

    font-weight:700;

    border:3px solid white;

    box-shadow:

        0 0 0 2px var(--border),

        var(--shadow-soft);

    transition:var(--transition);

}

.sweet-button:hover{

    transform:
        translateY(-4px)
        scale(1.04);

}



/*==================================================
            SMALL STATUS PILLS
==================================================*/

.badge{

    display:inline-block;

    padding:

        6px 14px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            #fff,
            #fff8fd
        );

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

    color:var(--heading);

    font-size:.8rem;

    font-weight:700;

}



/*==================================================
            LITTLE STICKERS
==================================================*/

.sticker{

    display:inline-block;

    padding:

        8px 14px;

    border-radius:16px;

    background:white;

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

    transform:rotate(-3deg);

    box-shadow:

        var(--shadow-soft);

}

.sticker:nth-child(even){

    transform:rotate(3deg);

}



/*==================================================
            DIVIDERS
==================================================*/

.divider{

    width:100%;

    height:3px;

    margin:22px 0;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,

            var(--pink),

            var(--yellow),

            var(--cyan),

            var(--lavender)

        );

}



/*==================================================
                FOOTER
==================================================*/

footer{

    padding:28px;

    text-align:center;

    color:var(--heading);

    background:white;

    border-top:3px solid var(--border);

}



/*==================================================
                ANIMATIONS
==================================================*/

@keyframes starDrift{

    from{

        background-position:

            0 0,

            0 0,

            0 0,

            0 0;

    }

    to{

        background-position:

            220px 220px,

            -260px 260px,

            320px -320px,

            420px 420px;

    }

}



@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}



@keyframes sparkle{

    0%{

        opacity:.4;
        transform:scale(.8);

    }

    50%{

        opacity:1;
        transform:scale(1.15);

    }

    100%{

        opacity:.4;
        transform:scale(.8);

    }

}



/*==================================================
            CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#fff8fc;

}

::-webkit-scrollbar-thumb{

    border-radius:999px;

    background:

        linear-gradient(

            180deg,

            var(--pink),

            var(--lavender)

        );

}

::-webkit-scrollbar-thumb:hover{

    background:

        linear-gradient(

            180deg,

            var(--hotpink),

            var(--purple)

        );

}

/*==================================================
            HOMEPAGE PROFILE
==================================================*/

.profile{

    text-align:center;

}

.placeholder{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}



/*==================================================
            SUKI PORTRAIT CARD
==================================================*/

.placeholder-image{

    position:relative;

    width:100%;

    min-height:560px;

    padding:28px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fff8fd
        );

    border:3px solid white;

    border-radius:32px;

    box-shadow:

        0 0 0 2px var(--border),

        var(--shadow-big);

    overflow:hidden;

    transition:var(--transition);

    animation:float 6s ease-in-out infinite;

}



/*======================================
        TOP TAPE
======================================*/

.placeholder-image::before{

    content:"";

    position:absolute;

    top:-14px;

    left:50%;

    transform:
        translateX(-50%)
        rotate(-3deg);

    width:95px;

    height:26px;

    background:

        linear-gradient(
            180deg,
            #fff8b7,
            #ffe88d
        );

    border-radius:7px;

    opacity:.95;

}



/*======================================
        STICKER STAR
======================================*/

.placeholder-image::after{

    content:"★";

    position:absolute;

    right:18px;

    top:18px;

    font-size:1.1rem;

    color:var(--yellow);

    animation:sparkle 3s infinite;

}



/*======================================
        SUKI IMAGE
======================================*/

.placeholder-image img{

    width:130%;

    max-width:none;

    height:auto;

    object-fit:contain;

    display:block;

    margin:auto;

    transition:.45s;

    filter:

        drop-shadow(
            0 18px 20px
            rgba(155,120,255,.18)
        );

}

.placeholder-image:hover img{

    transform:

        scale(1.04);

}



/*======================================
        NAME
======================================*/

.placeholder-image p{

    margin-top:18px;

    font-family:'Orbitron',sans-serif;

    font-size:1.2rem;

    color:var(--heading);

    letter-spacing:1px;

}



/*======================================
        SUBTITLE
======================================*/

.placeholder-image span{

    margin-top:8px;

    color:var(--text);

    font-style:italic;

}



/*==================================================
        FLOATING DECORATIONS
==================================================*/

.placeholder .star1,
.placeholder .star2,
.placeholder .heart,
.placeholder .planet{

    position:absolute;

    pointer-events:none;

    animation:sparkle 4s infinite;

}

.star1{

    left:-12px;

    top:35px;

    color:var(--yellow);

    font-size:1.2rem;

}

.star2{

    right:-10px;

    bottom:90px;

    color:var(--cyan);

    font-size:1.3rem;

    animation-delay:1s;

}

.heart{

    left:12px;

    bottom:45px;

    color:var(--pink);

    font-size:1.15rem;

    animation-delay:2s;

}

.planet{

    right:18px;

    top:95px;

    color:var(--lavender);

    font-size:1.25rem;

    animation-delay:.5s;

}



/*==================================================
        PROFILE LIST
==================================================*/

.quickinfo ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.quickinfo li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 16px;

    background:white;

    border-radius:16px;

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

    transition:var(--transition);

}

.quickinfo li:hover{

    transform:translateX(5px);

    border-color:var(--cyan);

}

.quickinfo strong{

    color:var(--heading);

}



/*==================================================
            CURRENTLY PANEL
==================================================*/

.status{

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #fffafd
        );

}

.status p{

    padding:12px 16px;

    margin-bottom:12px;

    background:white;

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

    border-radius:18px;

    transition:var(--transition);

}

.status p:hover{

    transform:translateX(5px);

    border-color:var(--pink);

}

.status p::before{

    content:"☁ ";

}

/*==================================================
                 SWEET.CSS
                   PHASE 4

       SFW Gallery • Chibi Icon Grid
       Worldbuilding • Gallery Directory
==================================================*/


/*==================================================
              GALLERY INTRODUCTION
==================================================*/

.gallery-intro{

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff7fc 48%,
            #f3fbff 100%
        );

}

.gallery-intro::before{

    content:"";

    position:absolute;

    width:150px;
    height:150px;

    right:-55px;
    bottom:-65px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(146,232,255,.40),
            rgba(204,183,255,.12) 55%,
            transparent 70%
        );

}

.gallery-intro p{

    position:relative;

    max-width:760px;

}


/*==================================================
              GALLERY DIRECTORY
==================================================*/

.folder-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.folder-list a{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    padding:13px 15px;

    overflow:hidden;

    color:var(--heading);

    font-family:'Orbitron',sans-serif;

    font-size:.78rem;

    line-height:1.4;

    text-decoration:none;

    background:

        linear-gradient(
            135deg,
            #ffffff,
            #fff7fc
        );

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

    border-radius:16px;

    box-shadow:var(--shadow-soft);

    transition:var(--transition);

}

.folder-list a::after{

    content:"›";

    margin-left:auto;

    color:var(--pink);

    font-size:1.25rem;

    transition:var(--transition);

}

.folder-list a:hover{

    transform:translateX(6px);

    color:var(--hotpink);

    border-color:var(--cyan);

    background:

        linear-gradient(
            135deg,
            #fffafd,
            #f2fbff
        );

}

.folder-list a:hover::after{

    transform:translateX(3px);

    color:var(--purple);

}


/*==================================================
              GALLERY SECTIONS
==================================================*/

.gallery-section{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.gallery-section + .gallery-section{

    margin-top:30px;

}

.gallery-header{

    display:flex;

    align-items:center;

    gap:14px;

}

.gallery-header h2{

    flex-shrink:0;

    margin-bottom:0;

}

.gallery-header::after{

    content:"";

    flex:1;

    height:4px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            var(--pink),
            var(--yellow),
            var(--cyan),
            transparent
        );

    opacity:.75;

}


/*==================================================
                GALLERY LABELS
==================================================*/

.gallery-tag{

    display:inline-flex;

    align-items:center;

    gap:7px;

    width:max-content;

    max-width:100%;

    padding:7px 14px;

    color:var(--heading);

    font-family:'Orbitron',sans-serif;

    font-size:.72rem;

    letter-spacing:.5px;

    background:white;

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

    border-radius:999px;

    box-shadow:var(--shadow-soft);

}

.gallery-tag::before{

    content:"★";

    color:var(--yellow);

}


/*==================================================
             STANDARD GALLERY GRID
==================================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap:22px;

    margin-top:22px;

}


/*==================================================
                 ART CARDS
==================================================*/

.art-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #fff9fc
        );

    border:3px solid white;

    border-radius:24px;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

    transition:var(--transition);

}

.art-card::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    border-radius:inherit;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.35),
            transparent 35%
        );

}

.art-card:hover{

    transform:

        translateY(-7px)
        rotate(-.4deg);

    box-shadow:

        0 0 0 2px var(--border-hover),
        var(--shadow-big);

}


/*==================================================
                ARTWORK IMAGES
==================================================*/

.art-card img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 650px;

    object-fit: contain;

    background:
        linear-gradient(
            135deg,
            #fff7fc,
            #eefaff
        );

    border-radius: 18px 18px 0 0;
}

.art-card:hover img{

    transform:scale(1.045);

    filter:

        saturate(1.04)
        brightness(1.02);

}


/* Supports your current HTML where the title and
   description sit directly inside .art-card. */

.art-card > h3{

    position:relative;

    z-index:2;

    margin:

        16px
        18px
        6px;

}

.art-card > p{

    position:relative;

    z-index:2;

    margin:

        0
        18px
        18px;

    font-size:.9rem;

}


/* Also supports cards using an .art-info wrapper. */

.art-info{

    position:relative;

    z-index:2;

    padding:17px 18px 19px;

}

.art-info h3{

    margin-bottom:7px;

}

.art-info p{

    font-size:.9rem;

}


/*==================================================
              FEATURED ARTWORK
==================================================*/

.featured-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(280px,1fr)
        );

    gap:26px;

    margin-top:22px;

}

#featured .art-card{

    background:

        linear-gradient(
            160deg,
            #ffffff 0%,
            #fff5fb 58%,
            #f0faff 100%
        );

}

#featured .art-card:nth-child(even):hover{

    transform:

        translateY(-7px)
        rotate(.4deg);

}

#featured .art-card img,
.featured-grid .art-card img{

    aspect-ratio:4 / 5;

}


/* Decorative featured-art star */

#featured .art-card::after{

    content:"★";

    position:absolute;

    z-index:3;

    top:13px;
    right:14px;

    display:grid;

    place-items:center;

    width:31px;
    height:31px;

    color:white;

    font-size:.8rem;

    background:

        linear-gradient(
            135deg,
            var(--yellow),
            var(--pink)
        );

    border:3px solid white;

    border-radius:50%;

    box-shadow:

        0 5px 12px
        rgba(255,130,190,.24);

}


/*==================================================
               CHIBI ICON GRID
==================================================*/

.icon-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(125px,1fr)
        );

    gap:20px;

    margin-top:22px;

    align-items:start;

}

.icon-card{

    position:relative;

    min-width:0;

    padding:15px;

    text-align:center;

    overflow:hidden;

    background:

        linear-gradient(
            160deg,
            #ffffff,
            #fff5fb 62%,
            #f1fbff
        );

    border:3px solid white;

    border-radius:24px;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

    transition:var(--transition);

}

.icon-card:nth-child(odd){

    transform:rotate(-1deg);

}

.icon-card:nth-child(even){

    transform:rotate(1deg);

}

.icon-card::before{

    content:"✦";

    position:absolute;

    top:8px;
    left:10px;

    z-index:2;

    color:var(--yellow);

    font-size:.85rem;

    animation:sparkle 3.5s infinite;

}

.icon-card::after{

    content:"♡";

    position:absolute;

    right:10px;
    bottom:8px;

    z-index:2;

    color:var(--pink);

    font-size:.9rem;

}

.icon-card:hover{

    transform:

        translateY(-8px)
        rotate(0deg)
        scale(1.025);

    box-shadow:

        0 0 0 2px var(--cyan),
        var(--shadow-big);

}


/*==================================================
                CHIBI IMAGES
==================================================*/

.icon-card img{

    position:relative;

    z-index:1;

    width:100%;

    aspect-ratio:1 / 1;

    object-fit:cover;

    margin-bottom:12px;

    background:white;

    border:3px solid white;

    border-radius:19px;

    box-shadow:

        0 0 0 2px var(--border);

    transition:var(--transition);

}

.icon-card:hover img{

    transform:scale(1.055);

    box-shadow:

        0 0 0 2px var(--border-hover),
        0 8px 18px rgba(121,191,255,.20);

}

.icon-card p{

    position:relative;

    z-index:2;

    margin:0;

    color:var(--heading);

    font-family:'Orbitron',sans-serif;

    font-size:.78rem;

    font-weight:700;

    line-height:1.4;

}


/*==================================================
             WORLDBUILDING GRID
==================================================*/

.world-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(250px,1fr)
        );

    gap:24px;

    margin-top:22px;

}

.world-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    background:

        linear-gradient(
            160deg,
            #ffffff,
            #fff9fc 55%,
            #f3fbff
        );

    border:3px solid white;

    border-radius:26px;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

    transition:var(--transition);

}

.world-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    z-index:3;

    width:100%;
    height:7px;

    background:

        linear-gradient(
            90deg,
            var(--pink),
            var(--yellow),
            var(--cyan),
            var(--lavender)
        );

}

.world-card:hover{

    transform:translateY(-7px);

    box-shadow:

        0 0 0 2px var(--lavender),
        var(--shadow-big);

}


/*==================================================
            WORLDBUILDING PREVIEW
==================================================*/

.world-preview{

    position:relative;

    overflow:hidden;

    aspect-ratio:16 / 10;

    background:

        linear-gradient(
            135deg,
            #fff0f8,
            #eafaff
        );

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

}

.world-preview::after{

    content:"✦";

    position:absolute;

    right:14px;
    bottom:10px;

    display:grid;

    place-items:center;

    width:30px;
    height:30px;

    color:white;

    background:var(--purple);

    border:3px solid white;

    border-radius:50%;

    box-shadow:var(--shadow-soft);

}

.world-preview img,
.world-card > img{

    width:100%;

    aspect-ratio:16 / 10;

    object-fit:cover;

    transition:.45s ease;

}

.world-card:hover .world-preview img,
.world-card:hover > img{

    transform:scale(1.04);

}


/*==================================================
             WORLDBUILDING TEXT
==================================================*/

.world-card > h3{

    margin:

        18px
        20px
        7px;

}

.world-card > p{

    margin:

        0
        20px
        21px;

    font-size:.92rem;

}

.world-content,
.world-info{

    padding:20px;

}

.world-content h3,
.world-info h3{

    margin-bottom:8px;

}

.world-content p,
.world-info p{

    font-size:.92rem;

}


/*==================================================
                SKETCHBOOK GRID
==================================================*/

.sketch-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(190px,1fr)
        );

    gap:22px;

    margin-top:22px;

}

.sketch-card{

    position:relative;

    padding:14px;

    background:#ffffff;

    border:3px solid white;

    border-radius:20px;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

    transform:rotate(-1deg);

    transition:var(--transition);

}

.sketch-card:nth-child(even){

    transform:rotate(1deg);

}

.sketch-card::before{

    content:"";

    position:absolute;

    top:-9px;
    left:50%;

    width:62px;
    height:18px;

    transform:

        translateX(-50%)
        rotate(-2deg);

    background:

        rgba(198,255,240,.88);

    border-radius:5px;

}

.sketch-card:hover{

    z-index:2;

    transform:

        translateY(-7px)
        rotate(0deg);

    box-shadow:

        0 0 0 2px var(--cyan),
        var(--shadow-big);

}

.sketch-card img{

    width:100%;

    margin-bottom:12px;

    border-radius:14px;

}


/*==================================================
             EMPTY GALLERY MESSAGE
==================================================*/

.empty-gallery,
.empty-slot{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:220px;

    padding:40px 25px;

    overflow:hidden;

    text-align:center;

    color:var(--text);

    background:

        linear-gradient(
            135deg,
            #ffffff,
            #fff6fb,
            #eefaff
        );

    border:3px dashed var(--border);

    border-radius:24px;

}

.empty-gallery::before,
.empty-slot::before{

    content:"☆";

    margin-bottom:8px;

    color:var(--yellow);

    font-size:2rem;

}

.empty-gallery h3{

    margin-bottom:8px;

}

.empty-gallery p{

    max-width:450px;

}


/*==================================================
               GALLERY DIVIDER
==================================================*/

.gallery-divider{

    width:100%;

    height:4px;

    margin:38px 0;

    border:0;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--pink),
            var(--yellow),
            var(--cyan),
            var(--lavender),
            transparent
        );

}

/*==================================================
                 SWEET.CSS
                   PHASE 5

             OC Profiles • Character Cards
        Stats • Biography • Trivia • Gallery
==================================================*/


/*==================================================
                  OC PAGE INTRO
==================================================*/

.oc-intro{

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff6fb 55%,
            #eefaff 100%
        );

}

.oc-intro::before{

    content:"♡";

    position:absolute;

    right:26px;
    bottom:-14px;

    color:rgba(255,130,190,.15);

    font-size:7rem;

    transform:rotate(-12deg);

}

.oc-intro p{

    position:relative;

    max-width:760px;

}


/*==================================================
                   OC GRID
==================================================*/

.oc-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(360px,1fr)
        );

    gap:28px;

}


/*==================================================
                  OC CARD
==================================================*/

.oc-card{

    position:relative;

    min-width:0;

    overflow:hidden;

    background:

        linear-gradient(
            155deg,
            #ffffff 0%,
            #fff8fc 58%,
            #f0faff 100%
        );

    border:3px solid white;

    border-radius:30px;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

    transition:var(--transition);

}

.oc-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    z-index:3;

    width:100%;
    height:8px;

    background:

        linear-gradient(
            90deg,
            var(--pink),
            var(--yellow),
            var(--cyan),
            var(--lavender)
        );

}

.oc-card:hover{

    transform:translateY(-7px);

    box-shadow:

        0 0 0 2px var(--border-hover),
        var(--shadow-big);

}


/*==================================================
                  OC HEADER
==================================================*/

.oc-header{

    display:grid;

    grid-template-columns:200px 1fr;

    gap:24px;

    align-items:center;

    padding:28px;

}


/*==================================================
                  OC PORTRAIT
==================================================*/

.oc-image{

    position:relative;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:

        linear-gradient(
            135deg,
            #fff1f8,
            #ecfaff
        );

    border:3px solid white;

    border-radius:26px;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

}

.oc-image::before{

    content:"";

    position:absolute;

    top:-8px;
    left:50%;

    z-index:2;

    width:70px;
    height:20px;

    transform:

        translateX(-50%)
        rotate(-3deg);

    background:

        rgba(255,232,133,.88);

    border-radius:6px;

}

.oc-image::after{

    content:"✦";

    position:absolute;

    right:12px;
    bottom:10px;

    z-index:2;

    display:grid;

    place-items:center;

    width:31px;
    height:31px;

    color:white;

    background:var(--pink);

    border:3px solid white;

    border-radius:50%;

    box-shadow:var(--shadow-soft);

}

.oc-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.45s ease;

}

.oc-card:hover .oc-image img{

    transform:scale(1.045);

}


/*==================================================
               OC NAME AND PRONOUNS
==================================================*/

.oc-identity{

    min-width:0;

}

.oc-name{

    margin-bottom:6px;

    color:var(--heading);

    font-family:'Orbitron',sans-serif;

    font-size:1.45rem;

    line-height:1.25;

    letter-spacing:1px;

}

.oc-pronouns{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-bottom:18px;

    padding:6px 13px;

    color:var(--hotpink);

    font-size:.85rem;

    font-weight:700;

    background:white;

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

    border-radius:999px;

}

.oc-pronouns::before{

    content:"♡";

    color:var(--pink);

}


/*==================================================
                   OC STATS
==================================================*/

.oc-info{

    display:grid;

    grid-template-columns:

        repeat(2,minmax(0,1fr));

    gap:12px;

}

.oc-stat{

    min-width:0;

    padding:13px 14px;

    background:white;

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

    border-radius:17px;

    transition:var(--transition);

}

.oc-stat:hover{

    transform:translateY(-3px);

    border-color:var(--cyan);

}

.oc-stat strong{

    display:block;

    margin-bottom:4px;

    color:var(--subheading);

    font-family:'Orbitron',sans-serif;

    font-size:.72rem;

    letter-spacing:.5px;

}

.oc-stat span{

    color:var(--text);

    line-height:1.4;

}


/* Optional paired block for Age + Height */

.oc-stat-pair{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    grid-column:1 / -1;

}

.oc-stat-pair .oc-stat{

    height:100%;

}


/*==================================================
                 OC BODY AREA
==================================================*/

.oc-body{

    display:grid;

    gap:22px;

    padding:0 28px 28px;

}


/*==================================================
                 BIOGRAPHY
==================================================*/

.oc-bio{

    position:relative;

    padding:22px;

    background:

        linear-gradient(
            135deg,
            #ffffff,
            #fff8fc
        );

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

    border-radius:22px;

}

.oc-bio::before{

    content:"ABOUT";

    position:absolute;

    top:-11px;
    left:18px;

    padding:4px 11px;

    color:white;

    font-family:'Orbitron',sans-serif;

    font-size:.65rem;

    letter-spacing:1px;

    background:

        linear-gradient(
            90deg,
            var(--pink),
            var(--lavender)
        );

    border:3px solid white;

    border-radius:999px;

}

.oc-bio p{

    margin-top:6px;

    line-height:1.85;

}


/*==================================================
                  PERSONALITY
==================================================*/

.oc-personality{

    padding:22px;

    background:

        linear-gradient(
            135deg,
            #fffdf8,
            #fff7fc,
            #f1fbff
        );

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

    border-radius:22px;

}

.oc-personality h3{

    margin-bottom:12px;

}


/*==================================================
                 TRAIT TAGS
==================================================*/

.trait-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.trait{

    padding:7px 13px;

    color:var(--heading);

    font-size:.82rem;

    font-weight:700;

    background:white;

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

    border-radius:999px;

    transition:var(--transition);

}

.trait:nth-child(3n + 1){

    border-color:#ffd2e8;

}

.trait:nth-child(3n + 2){

    border-color:#ccefff;

}

.trait:nth-child(3n){

    border-color:#ddd0ff;

}

.trait:hover{

    transform:

        translateY(-3px)
        rotate(-2deg);

}


/*==================================================
                 LIKES / DISLIKES
==================================================*/

.oc-preferences{

    display:grid;

    grid-template-columns:

        repeat(2,minmax(0,1fr));

    gap:18px;

}

.preference-box{

    padding:20px;

    background:white;

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

    border-radius:21px;

}

.preference-box.likes{

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #fff5fa
        );

}

.preference-box.dislikes{

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f3faff
        );

}

.preference-box h3{

    margin-bottom:12px;

}

.preference-box ul{

    display:grid;

    gap:8px;

}

.preference-box li{

    position:relative;

    margin:0;

    padding-left:22px;

}

.preference-box.likes li::before{

    content:"♡";

    position:absolute;

    left:0;

    color:var(--pink);

}

.preference-box.dislikes li::before{

    content:"✦";

    position:absolute;

    left:0;

    color:var(--cyan);

}


/*==================================================
                    TRIVIA
==================================================*/

.oc-trivia{

    display:grid;

    gap:12px;

}

.oc-trivia li{

    position:relative;

    margin:0;

    padding:15px 17px 15px 44px;

    background:white;

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

    border-radius:18px;

    transition:var(--transition);

}

.oc-trivia li::before{

    content:"★";

    position:absolute;

    left:16px;
    top:50%;

    color:var(--yellow);

    transform:translateY(-50%);

}

.oc-trivia li:hover{

    transform:translateX(5px);

    border-color:var(--lavender);

}


/*==================================================
              OC COLOR PALETTE
==================================================*/

.color-palette{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.color-swatch{

    position:relative;

    width:52px;
    height:52px;

    border:4px solid white;

    border-radius:50%;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

    transition:var(--transition);

}

.color-swatch:hover{

    transform:

        translateY(-5px)
        scale(1.08);

}

.color-swatch span{

    position:absolute;

    left:50%;
    top:calc(100% + 8px);

    opacity:0;

    padding:4px 8px;

    color:var(--text);

    font-size:.7rem;

    white-space:nowrap;

    background:white;

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

    border-radius:999px;

    transform:translateX(-50%);

    transition:var(--transition);

}

.color-swatch:hover span{

    opacity:1;

}


/*==================================================
              CHARACTER GALLERY
==================================================*/

.oc-gallery{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(150px,1fr)
        );

    gap:16px;

}

.oc-gallery-item{

    position:relative;

    overflow:hidden;

    aspect-ratio:1 / 1;

    background:

        linear-gradient(
            135deg,
            #fff4fa,
            #ecfaff
        );

    border:3px solid white;

    border-radius:21px;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

    transition:var(--transition);

}

.oc-gallery-item:hover{

    transform:

        translateY(-6px)
        rotate(-1deg);

    box-shadow:

        0 0 0 2px var(--cyan),
        var(--shadow-big);

}

.oc-gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.45s ease;

}

.oc-gallery-item:hover img{

    transform:scale(1.05);

}


/*==================================================
                FEATURED OC
==================================================*/

.oc-card.featured{

    grid-column:1 / -1;

}

.oc-card.featured .oc-header{

    grid-template-columns:

        minmax(220px,320px)
        1fr;

}

.oc-card.featured .oc-image{

    aspect-ratio:4 / 5;

}


/*==================================================
             SMALL PROFILE CARD
==================================================*/

.character-card{

    position:relative;

    overflow:hidden;

    padding:18px;

    text-align:center;

    background:

        linear-gradient(
            160deg,
            #ffffff,
            #fff7fc,
            #f0faff
        );

    border:3px solid white;

    border-radius:24px;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

    transition:var(--transition);

}

.character-card:hover{

    transform:

        translateY(-7px)
        rotate(-1deg);

    box-shadow:

        0 0 0 2px var(--lavender),
        var(--shadow-big);

}

.character-card img{

    width:100%;

    aspect-ratio:1 / 1;

    object-fit:cover;

    margin-bottom:14px;

    border-radius:18px;

}

.character-card h3{

    margin-bottom:5px;

}

.character-card .oc-pronouns{

    margin-bottom:0;

}


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

@media(max-width:900px){

    .oc-header,
    .oc-card.featured .oc-header{

        grid-template-columns:1fr;

        text-align:center;

    }

    .oc-image{

        width:min(300px,100%);

        margin:auto;

    }

    .oc-pronouns{

        justify-content:center;

    }

}


@media(max-width:650px){

    .oc-grid{

        grid-template-columns:1fr;

    }

    .oc-info,
    .oc-stat-pair,
    .oc-preferences{

        grid-template-columns:1fr;

    }

    .oc-header{

        padding:22px;

    }

    .oc-body{

        padding:

            0
            22px
            22px;

    }

    .oc-gallery{

        grid-template-columns:

            repeat(2,minmax(0,1fr));

    }

}


@media(max-width:420px){

    .oc-gallery{

        grid-template-columns:1fr;

    }

}

/*==================================================
                 SWEET.CSS
                   PHASE 6

        Commissions • Utilities • Responsive
        Accessibility • Final Polish
==================================================*/


/*==================================================
              COMMISSION INTRO
==================================================*/

.commission-intro{

    position:relative;

    overflow:hidden;

    text-align:center;

    background:

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff5fb 48%,
            #eefaff 100%
        );

}

.commission-intro::before{

    content:"♡";

    position:absolute;

    top:-28px;
    left:-12px;

    color:rgba(255,130,190,.14);

    font-size:8rem;

    transform:rotate(-14deg);

}

.commission-intro::after{

    content:"✦";

    position:absolute;

    right:30px;
    bottom:18px;

    color:var(--yellow);

    font-size:1.5rem;

    animation:sparkle 3s infinite;

}

.commission-intro h2,
.commission-intro p{

    position:relative;

    z-index:1;

}

.commission-intro p{

    max-width:760px;

    margin-inline:auto;

}


/*==================================================
             COMMISSION STATUS
==================================================*/

.commission-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    margin-top:18px;

    padding:9px 18px;

    color:var(--heading);

    font-weight:800;

    background:white;

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

    border-radius:999px;

    box-shadow:var(--shadow-soft);

}

.commission-status::before{

    content:"";

    width:10px;
    height:10px;

    flex-shrink:0;

    background:var(--mint);

    border:2px solid white;

    border-radius:50%;

    box-shadow:

        0 0 0 2px #9de7d1,
        0 0 12px rgba(157,231,209,.8);

}

.commission-status.closed::before{

    background:#ffc3d9;

    box-shadow:

        0 0 0 2px #ff91ba,
        0 0 12px rgba(255,145,186,.55);

}


/*==================================================
             COMMISSION GRID
==================================================*/

.commission-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(260px,1fr)
        );

    gap:24px;

}


/*==================================================
              PRICE CARDS
==================================================*/

.price-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    padding:25px;

    background:

        linear-gradient(
            160deg,
            #ffffff,
            #fff8fc 58%,
            #f0fbff
        );

    border:3px solid white;

    border-radius:27px;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

    transition:var(--transition);

}

.price-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:7px;

    background:

        linear-gradient(
            90deg,
            var(--pink),
            var(--yellow),
            var(--cyan),
            var(--lavender)
        );

}

.price-card::after{

    content:"☆";

    position:absolute;

    top:15px;
    right:18px;

    color:var(--yellow);

    font-size:1rem;

}

.price-card:hover{

    transform:translateY(-7px);

    box-shadow:

        0 0 0 2px var(--border-hover),
        var(--shadow-big);

}

.price-card h3{

    margin-bottom:16px;

    padding-right:30px;

    font-size:1rem;

}

.price-card h3::before{

    content:"♡ ";

    color:var(--pink);

}


/*==================================================
                 PRICE LIST
==================================================*/

.price-list{

    display:grid;

    gap:11px;

    margin-bottom:16px;

}

.price-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:12px 14px;

    background:white;

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

    border-radius:17px;

    transition:var(--transition);

}

.price-row:hover{

    transform:translateX(4px);

    border-color:var(--cyan);

}

.price-row span:first-child{

    color:var(--text);

    font-weight:700;

}

.price-row span:last-child,
.price{

    flex-shrink:0;

    color:var(--hotpink);

    font-family:'Orbitron',sans-serif;

    font-size:.85rem;

    font-weight:800;

}


/*==================================================
              FEATURED SERVICE
==================================================*/

.price-card.featured-service{

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #fff1f8 52%,
            #ecfaff
        );

}

.price-card.featured-service::after{

    content:"★";

    display:grid;

    place-items:center;

    width:31px;
    height:31px;

    color:white;

    background:

        linear-gradient(
            135deg,
            var(--yellow),
            var(--pink)
        );

    border:3px solid white;

    border-radius:50%;

    box-shadow:var(--shadow-soft);

}


/*==================================================
             COMMISSION NOTES
==================================================*/

.price-note{

    margin-top:auto;

    padding-top:15px;

    color:var(--text);

    font-size:.86rem;

    font-style:italic;

    border-top:2px dashed var(--border);

}


/*==================================================
            STICKER PACK CARDS
==================================================*/

.sticker-pack-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap:20px;

}

.sticker-pack{

    position:relative;

    padding:23px;

    text-align:center;

    background:white;

    border:3px solid white;

    border-radius:25px;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

    transition:var(--transition);

}

.sticker-pack:nth-child(odd){

    transform:rotate(-1deg);

}

.sticker-pack:nth-child(even){

    transform:rotate(1deg);

}

.sticker-pack:hover{

    transform:

        translateY(-7px)
        rotate(0deg)
        scale(1.02);

    box-shadow:

        0 0 0 2px var(--cyan),
        var(--shadow-big);

}

.sticker-pack::before{

    content:"✦";

    position:absolute;

    top:12px;
    left:14px;

    color:var(--yellow);

}

.sticker-pack h3{

    margin-bottom:10px;

}

.sticker-pack .pack-price{

    display:block;

    margin:13px 0;

    color:var(--hotpink);

    font-family:'Orbitron',sans-serif;

    font-size:1.35rem;

    font-weight:800;

}


/*==================================================
              INFORMATION BOXES
==================================================*/

.info-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(250px,1fr)
        );

    gap:20px;

}

.info-box{

    position:relative;

    padding:22px;

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #fff9fc
        );

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

    border-radius:22px;

}

.info-box h3{

    padding-right:28px;

}

.info-box::after{

    content:"♡";

    position:absolute;

    top:17px;
    right:18px;

    color:var(--pink);

}

.info-box ul{

    display:grid;

    gap:9px;

}

.info-box li{

    position:relative;

    margin:0;

    padding-left:22px;

}

.info-box li::before{

    content:"✦";

    position:absolute;

    left:0;

    color:var(--cyan);

}


/*==================================================
              TERMS OF SERVICE
==================================================*/

.terms-list{

    display:grid;

    gap:14px;

    counter-reset:terms;

}

.terms-list li{

    position:relative;

    margin:0;

    padding:

        16px
        18px
        16px
        54px;

    background:white;

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

    border-radius:19px;

    counter-increment:terms;

    transition:var(--transition);

}

.terms-list li::before{

    content:counter(terms);

    position:absolute;

    left:15px;
    top:50%;

    display:grid;

    place-items:center;

    width:26px;
    height:26px;

    color:white;

    font-family:'Orbitron',sans-serif;

    font-size:.7rem;

    background:

        linear-gradient(
            135deg,
            var(--pink),
            var(--lavender)
        );

    border-radius:50%;

    transform:translateY(-50%);

}

.terms-list li:hover{

    transform:translateX(5px);

    border-color:var(--cyan);

}


/*==================================================
             WILL / WON'T DRAW
==================================================*/

.draw-grid{

    display:grid;

    grid-template-columns:

        repeat(2,minmax(0,1fr));

    gap:20px;

}

.draw-box{

    padding:23px;

    background:white;

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

    border-radius:23px;

}

.draw-box.will-draw{

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f2fff9
        );

}

.draw-box.wont-draw{

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #fff3f8
        );

}

.draw-box h3{

    margin-bottom:14px;

}

.draw-box ul{

    display:grid;

    gap:10px;

}

.draw-box li{

    position:relative;

    margin:0;

    padding-left:24px;

}

.will-draw li::before{

    content:"♡";

    position:absolute;

    left:0;

    color:#69c9aa;

}

.wont-draw li::before{

    content:"×";

    position:absolute;

    left:2px;

    color:var(--hotpink);

    font-weight:900;

}


/*==================================================
            REFERENCE SHEET DETAILS
==================================================*/

.reference-details{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(210px,1fr)
        );

    gap:16px;

}

.reference-item{

    padding:18px;

    background:white;

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

    border-radius:20px;

    transition:var(--transition);

}

.reference-item:hover{

    transform:translateY(-4px);

    border-color:var(--lavender);

}

.reference-item strong{

    display:block;

    margin-bottom:6px;

    color:var(--heading);

    font-family:'Orbitron',sans-serif;

    font-size:.76rem;

}


/*==================================================
             CONTACT SECTION
==================================================*/

.contact-panel{

    text-align:center;

    background:

        linear-gradient(
            135deg,
            #ffffff,
            #fff3f9,
            #edfaff
        );

}

.contact-panel p{

    max-width:670px;

    margin-inline:auto;

}

.contact-buttons{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;

    margin-top:22px;

}


/*==================================================
              NOTICE CALLOUTS
==================================================*/

.notice{

    position:relative;

    padding:

        18px
        20px
        18px
        55px;

    background:white;

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

    border-radius:20px;

}

.notice::before{

    content:"✦";

    position:absolute;

    left:19px;
    top:50%;

    display:grid;

    place-items:center;

    width:25px;
    height:25px;

    color:white;

    background:var(--pink);

    border-radius:50%;

    transform:translateY(-50%);

}

.notice.warning{

    background:#fffdf3;

    border-color:#ffe291;

}

.notice.warning::before{

    content:"!";

    background:#ffc85c;

    font-weight:900;

}

.notice.info{

    background:#f1fbff;

    border-color:#bcecff;

}

.notice.info::before{

    content:"i";

    background:var(--blue);

    font-family:serif;

    font-weight:900;

}


/*==================================================
             FOOTER REFINEMENTS
==================================================*/

footer{

    position:relative;

    overflow:hidden;

    padding:30px;

    text-align:center;

    color:var(--heading);

    background:

        linear-gradient(
            90deg,
            #fff8fc,
            #ffffff,
            #f3fbff
        );

    border-top:3px solid var(--border);

}

footer::before{

    content:"✦  ♡  ★  ♡  ✦";

    display:block;

    margin-bottom:10px;

    color:var(--pink);

    letter-spacing:9px;

}

footer p{

    line-height:1.7;

}

footer a{

    color:var(--hotpink);

    font-weight:800;

    text-decoration:none;

}

footer a:hover{

    color:var(--purple);

}


/*==================================================
                UTILITY CLASSES
==================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-small{

    font-size:.85rem;

}

.text-muted{

    opacity:.75;

}

.full-width{

    width:100%;

}

.span-full{

    grid-column:1 / -1;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-wrap{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.stack{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.no-margin{

    margin:0;

}

.hidden{

    display:none !important;

}


/*==================================================
             IMAGE UTILITIES
==================================================*/

.rounded-image{

    display:block;

    width:100%;

    border:3px solid white;

    border-radius:22px;

    box-shadow:

        0 0 0 2px var(--border),
        var(--shadow-soft);

}

.contain-image{

    object-fit:contain !important;

}

.cover-image{

    object-fit:cover !important;

}


/*==================================================
                FOCUS STATES
==================================================*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

    outline:4px solid rgba(121,191,255,.5);

    outline-offset:4px;

}


/*==================================================
             FORM ELEMENTS
==================================================*/

input,
textarea,
select{

    width:100%;

    padding:13px 15px;

    color:var(--text);

    font:inherit;

    background:white;

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

    border-radius:17px;

    transition:var(--transition);

}

textarea{

    min-height:150px;

    resize:vertical;

}

input:hover,
textarea:hover,
select:hover{

    border-color:var(--lavender);

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--cyan);

    box-shadow:

        0 0 0 4px
        rgba(146,232,255,.18);

}

label{

    display:block;

    margin-bottom:7px;

    color:var(--heading);

    font-weight:800;

}

.form-group{

    margin-bottom:18px;

}


/*==================================================
             FINAL HOVER POLISH
==================================================*/

.panel,
.art-card,
.icon-card,
.world-card,
.oc-card,
.price-card,
.character-card{

    will-change:transform;

}

::selection{

    color:var(--heading);

    background:var(--peach);

}


/*==================================================
             TABLET RESPONSIVE
==================================================*/

@media(max-width:1050px){

    .content{

        grid-template-columns:280px 1fr;

        gap:24px;

        padding:28px;

    }

    .placeholder-image{

        min-height:470px;

    }

    .placeholder-image img{

        width:125%;

    }

}


/*==================================================
             MOBILE RESPONSIVE
==================================================*/

@media(max-width:800px){

    .window{

        width:min(95%,700px);

        margin:20px auto;

        border-radius:27px;

    }

    .titlebar{

        gap:16px;

        padding:16px 20px;

    }

    .titlebar h1{

        font-size:.85rem;

        letter-spacing:2px;

    }

    .version{

        display:none;

    }

    nav{

        gap:10px;

        padding:16px;

    }

    nav a{

        padding:10px 16px;

        font-size:.78rem;

    }

    .content{

        grid-template-columns:1fr;

        gap:24px;

        padding:24px;

    }

    aside{

        max-width:600px;

        width:100%;

        margin-inline:auto;

    }

    .placeholder-image{

        min-height:520px;

    }

    .placeholder-image img{

        width:115%;

    }

    .draw-grid{

        grid-template-columns:1fr;

    }

}


/*==================================================
             SMALL PHONE RESPONSIVE
==================================================*/

@media(max-width:550px){

    :root{

        --radius:20px;

    }

    .window{

        width:96%;

        margin:12px auto;

        border-radius:23px;

    }

    .titlebar{

        justify-content:center;

    }

    .lights{

        display:none;

    }

    .titlebar h1{

        text-align:center;

        font-size:.75rem;

    }

    nav{

        display:grid;

        grid-template-columns:

            repeat(2,minmax(0,1fr));

    }

    nav a{

        text-align:center;

    }

    .content{

        padding:17px;

    }

    .panel{

        padding:21px;

    }

    .panel h2{

        font-size:1rem;

    }

    .placeholder-image{

        min-height:430px;

        padding:18px;

    }

    .placeholder-image img{

        width:125%;

    }

    .gallery-grid,
    .featured-grid,
    .world-grid,
    .commission-grid,
    .sticker-pack-grid,
    .info-grid,
    .reference-details{

        grid-template-columns:1fr;

    }

    .icon-grid{

        grid-template-columns:

            repeat(2,minmax(0,1fr));

        gap:14px;

    }

    .price-row{

        align-items:flex-start;

        flex-direction:column;

        gap:5px;

    }

    .contact-buttons{

        flex-direction:column;

    }

    .contact-buttons .sweet-button{

        width:100%;

    }

    footer{

        padding:24px 18px;

    }

}


/*==================================================
             EXTRA SMALL SCREENS
==================================================*/

@media(max-width:360px){

    nav{

        grid-template-columns:1fr;

    }

    .icon-grid{

        grid-template-columns:1fr;

    }

    .placeholder-image{

        min-height:390px;

    }

}


/*==================================================
          REDUCED MOTION SUPPORT
==================================================*/

@media(prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;

    }

}

/*==================================================
                  ENTRY PAGE
==================================================*/

.entry-page{

    display:grid;

    place-items:center;

    min-height:100vh;

    padding:30px;

}


/* Main entry window */

.intro-window{

    position:relative;

    width:min(760px,100%);

    overflow:visible;

    background:var(--window);

    backdrop-filter:blur(18px);

    border:3px solid white;

    border-radius:34px;

    box-shadow:

        0 0 0 3px var(--border),
        var(--shadow-big);

    animation:introAppear .7s ease both;

}


/* Keep the title bar clipped to the window */

.intro-window .titlebar{

    border-radius:31px 31px 0 0;

}


/* Entry content */

.intro-content{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

    padding:60px 55px 48px;

    overflow:hidden;

    text-align:center;

    background:

        radial-gradient(
            circle at top left,
            rgba(255,232,133,.17),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(146,232,255,.22),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #fff7fc 58%,
            #f1fbff
        );

    border-radius:0 0 31px 31px;

}


/* Large welcome heading */

.intro-content h2{

    margin:0;

    color:var(--heading);

    font-family:'Orbitron',sans-serif;

    font-size:clamp(2.1rem,7vw,4rem);

    line-height:1;

    letter-spacing:2px;

    text-shadow:

        3px 3px 0 white,
        5px 5px 0 rgba(255,130,190,.22);

}

.intro-content h2::before{

    content:"✦";

    margin-right:12px;

    color:var(--yellow);

    font-size:.5em;

    vertical-align:middle;

}

.intro-content h2::after{

    content:"♡";

    margin-left:12px;

    color:var(--pink);

    font-size:.5em;

    vertical-align:middle;

}


/* Subtitle */

.intro-content h3{

    max-width:590px;

    margin:0;

    color:var(--subheading);

    font-family:'Orbitron',sans-serif;

    font-size:clamp(.9rem,3vw,1.15rem);

    line-height:1.6;

}

.intro-content h3::before{

    content:none;

}


/* Body copy */

.intro-content > p{

    max-width:590px;

    margin:0;

    color:var(--text);

    font-size:1.02rem;

    line-height:1.85;

}


/* Intro label */

.intro-sticker{

    display:inline-block;

    padding:8px 16px;

    color:var(--hotpink);

    font-family:'Silkscreen',sans-serif;

    font-size:.75rem;

    background:white;

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

    border-radius:999px;

    box-shadow:var(--shadow-soft);

    transform:rotate(-2deg);

}


/* Enter button */

.enter-button{

    margin-top:8px;

    padding:15px 34px;

    font-family:'Orbitron',sans-serif;

    font-size:1rem;

    letter-spacing:1px;

    text-decoration:none;

}

.enter-button:hover{

    letter-spacing:2px;

}


/* Desktop note */

.intro-content .intro-extra{

    font-size:.83rem;

    font-style:italic;

    opacity:.75;

}


/* Floating decorations */

.intro-window .floating{

    position:absolute;

    z-index:5;

    pointer-events:none;

    text-shadow:

        0 3px 10px
        rgba(255,130,190,.18);

    animation:

        sparkle 3s ease-in-out infinite,
        entryFloat 5s ease-in-out infinite;

}

.intro-window .floating.one{

    top:24%;
    left:-22px;

    color:var(--cyan);

    font-size:2rem;

}

.intro-window .floating.two{

    top:52%;
    right:-25px;

    color:var(--yellow);

    font-size:2.2rem;

    animation-delay:.7s;

}

.intro-window .floating.three{

    left:8%;
    bottom:-20px;

    color:var(--pink);

    font-size:2rem;

    animation-delay:1.4s;

}


/* Entry animation */

@keyframes introAppear{

    from{

        opacity:0;

        transform:
            translateY(20px)
            scale(.97);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

@keyframes entryFloat{

    0%,
    100%{

        transform:

            translateY(0)
            rotate(-5deg);

    }

    50%{

        transform:

            translateY(-10px)
            rotate(5deg);

    }

}


/* Entry-page mobile layout */

@media(max-width:600px){

    .entry-page{

        padding:16px;

    }

    .intro-window{

        border-radius:26px;

    }

    .intro-window .titlebar{

        border-radius:23px 23px 0 0;

    }

    .intro-content{

        gap:16px;

        padding:

            45px
            24px
            38px;

        border-radius:0 0 23px 23px;

    }

    .intro-window .floating.one{

        left:-8px;

    }

    .intro-window .floating.two{

        right:-8px;

    }

}

/*==================================================
                  ART LIGHTBOX
==================================================*/

.art-lightbox {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: grid;
    place-items: center;

    padding: 30px;

    opacity: 0;
    visibility: hidden;

    background: rgba(43, 27, 66, .82);
    backdrop-filter: blur(10px);

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.art-lightbox.open {
    opacity: 1;
    visibility: visible;
}

.art-lightbox img {
    display: block;

    max-width: min(95vw, 1400px);
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    background: white;

    border: 5px solid white;
    border-radius: 24px;

    box-shadow:
        0 0 0 3px var(--border),
        0 25px 70px rgba(0, 0, 0, .45);
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;

    z-index: 10000;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    color: var(--hotpink);

    font-size: 2rem;
    line-height: 1;

    background: white;

    border: 3px solid var(--border);
    border-radius: 50%;

    cursor: pointer;

    box-shadow: var(--shadow-big);
}

.lightbox-close:hover {
    transform: scale(1.08) rotate(5deg);
}

body.lightbox-active {
    overflow: hidden;
}

.art-popup {
    display: block;

    overflow: hidden;

    cursor: zoom-in;

    background:
        linear-gradient(
            135deg,
            #fff7fc,
            #eefaff
        );
}

.art-popup img {
    display: block;

    width: 100%;
    height: 360px;

    padding: 12px;

    object-fit: contain;

    transition: transform .35s ease;
}

.art-popup:hover img {
    transform: scale(1.03);
}

@media (max-width: 600px) {

    .art-lightbox {
        padding: 16px;
    }

    .art-lightbox img {
        max-width: 96vw;
        max-height: 84vh;

        border-radius: 17px;
    }

    .lightbox-close {
        top: 10px;
        right: 10px;

        width: 42px;
        height: 42px;
    }

}

/*==================================================
        FINAL GALLERY IMAGE FIX
==================================================*/

.gallery-grid,
.featured-grid {
    align-items: start;
}


/* Artwork cards */

.art-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: auto;
    min-height: 0;

    aspect-ratio: auto;

    overflow: hidden;
}


/* Remove the forced featured portrait ratio */

#featured .art-card img,
.featured-grid .art-card img {
    aspect-ratio: auto;
}


/* Image link/frame */

.art-card .art-popup {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 420px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #fff7fc,
            #eefaff
        );

    cursor: zoom-in;
}

.art-card .art-popup img {
    width: 100%;
    height: 100%;

    padding: 12px;

    aspect-ratio: auto;

    object-fit: contain;
    object-position: center;
}

/* All standard artwork images */

.art-card img,
.art-card .art-popup img,
.gallery-grid .art-card img,
.featured-grid .art-card img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;
    max-height: none;

    padding: 12px;

    aspect-ratio: auto;

    object-fit: contain;
    object-position: center;

    border-radius: 18px 18px 0 0;

    transform: none;
}


/* Keep hover subtle so the artwork is not clipped */

.art-card:hover img,
.art-card .art-popup:hover img {
    transform: scale(1.01);
}


/* Description area */

.art-card .art-info {
    width: 100%;
    height: auto;

    padding: 18px;
}