/*==========================================================
CUSTOM FONTS
==========================================================*/

@font-face{

    font-family:"Monster Bash";

    src:url("../fonts/MonsterBash.otf")
        format("opentype");

}
/*==========================================================
STORYBOOK GLASS BUTTONS
==========================================================*/

.storybookButton{

    position:relative;

    overflow:hidden;

    min-width:165px;

    height:48px;

    padding:0 26px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:20px;

    font-weight:700;

    color:#4d5256;

    transition:.25s;

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

    box-shadow:

        inset 0 2px 0 rgba(255,255,255,1),

        inset 0 12px 22px rgba(255,255,255,.35),

        0 10px 24px rgba(120,120,120,.18);

}


/*==========================================================
GLASS HIGHLIGHT
==========================================================*/

.storybookButton::before{

    content:"";

    position:absolute;

    left:8px;

    top:6px;

    width:68%;

    height:30%;

    border-radius:999px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.95),

            rgba(255,255,255,.15)

        );

}


/*==========================================================
GLASS SHINE
==========================================================*/

.storybookButton::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:999px;

    background:

        radial-gradient(

            circle at 18% 24%,

            rgba(255,255,255,.85),

            transparent 18%

        ),

        radial-gradient(

            circle at 78% 72%,

            rgba(255,255,255,.22),

            transparent 45%

        );

}


/*==========================================================
HOVER
==========================================================*/

.storybookButton:hover{

    transform:

        translateY(-3px)

        scale(1.03);

}





/*==========================================================
Storybook Voices

Puzzle Builder

puzzle.css

Ctrl+F

BODY

HEADER

WORKSPACE

LEFT LIBRARY

PUZZLE STAGE

OPTIONS PANEL

BOTTOM TOOLBAR

STATUS BAR

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



/*==========================================================
BODY
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

/*==========================================================
PUZZLE ROOM BACKGROUND
==========================================================*/

body{

    margin:0;

    min-height:100vh;

    overflow:hidden;

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

    background:

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

        radial-gradient(circle at top right,
            rgba(205,235,255,.60),
            transparent 42%),

        radial-gradient(circle at bottom left,
            rgba(225,255,220,.55),
            transparent 38%),

        radial-gradient(circle at bottom right,
            rgba(255,247,205,.60),
            transparent 40%),

        linear-gradient(

            135deg,

            #fbf8f2 0%,

            #f8f6f3 25%,

            #f5fbff 50%,

            #fffdf8 75%,

            #f9f7f3 100%

        );

    background-attachment:fixed;

}



/*==========================================================
PUZZLE ROOM
==========================================================*/

#puzzleRoom{

    position:relative;

    width:100vw;

    height:100vh;

}



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

#headerBar{

    position:absolute;

    left:20px;

    top:20px;

    width:calc(100% - 40px);

    height:70px;

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

    backdrop-filter:blur(26px);

    -webkit-backdrop-filter:blur(26px);

    border-radius:28px;

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

    box-shadow:

        0 20px 45px rgba(90,90,90,.10),

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

}

#roomTitle{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    margin:0;

    font-size:34px;

    font-weight:700;

    color:#34504d;

    white-space:nowrap;

}
#btnHome{

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    width:170px;

    height:44px;

}#btnHome{

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    width:170px;

    min-width:170px;

    height:46px;

    padding:0;

    margin:0;

    z-index:10;

}

/*==========================================================
WORKSPACE
==========================================================*/

#workspace{

    position:absolute;

    left:20px;

    top:110px;

    width:calc(100% - 40px);

    height:calc(100% - 210px);

    display:flex;

    gap:20px;

}



/*==========================================================
LEFT LIBRARY
==========================================================*/

#libraryPanel{

    width:260px;

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

    backdrop-filter:blur(18px);

    border-radius:24px;

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

    padding:20px;

    overflow-y:auto;

}

#libraryPanel h2{

    margin-bottom:18px;

    color:#40615d;

}

.libraryButton{

    width:100%;

    height:46px;

    margin-bottom:12px;

    border:none;

    border-radius:14px;

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

    cursor:pointer;

    font-size:18px;

    transition:.25s;

}

.libraryButton:hover{

    transform:translateY(-2px);

    background:white;

}
/*==========================================================
STORYBOOK COLLECTIONS
==========================================================*/

.libraryDivider{

    width:100%;

    margin:18px 0 14px;

    border:0;

    border-top:1px solid rgba(72,99,93,.35);

}


.librarySectionTitle{

    width:100%;

    margin:0 0 12px;

    color:#48635d;

    font-size:17px;

    font-weight:700;

    text-align:center;

}

/*==========================================================
PUZZLE STAGE
==========================================================*/

#stagePanel{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

}

#storyStage{

    position:relative;

    width:100%;

    height:100%;

    border-radius:28px;

    overflow:hidden;

       background:transparent;

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

    backdrop-filter:blur(14px);

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}



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

#backgroundVideo{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

}

#backgroundImage{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:2;

}



/*==========================================================
PUZZLE CANVAS
==========================================================*/

#puzzleCanvas{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:720px;

    height:720px;

    z-index:20;

    pointer-events:none;

    display:flex;

    align-items:center;

    justify-content:center;

}
/*==========================================================
SELECTED LAYER NAVIGATION
==========================================================*/

#layerNavigator{

    position:relative;

    width:220px;

    height:90px;

    margin:8px auto 18px auto;

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

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

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

    border-radius:24px;

    box-shadow:

        0 14px 32px rgba(75,85,100,.12),

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

}


#layerNavigatorTitle{

    position:absolute;

    left:20px;

    top:12px;

    width:260px;

    text-align:center;

    font-size:17px;

    font-weight:700;

    color:#315b4c;

}


#previousLayerButton,
#nextLayerButton{

    position:absolute;

    top:47px;

    width:42px;

    height:42px;

    border:none;

    border-radius:17px;

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

    box-shadow:

        0 8px 18px rgba(70,85,95,.13),

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

    color:#315b4c;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

}


#previousLayerButton{

    left:10px;

}


#nextLayerButton{

    right:10px;

}


#previousLayerButton:hover,
#nextLayerButton:hover{

    transform:translateY(-1px);

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

}


#previousLayerButton:active,
#nextLayerButton:active{

    transform:translateY(1px);

}


#selectedLayerName{

    position:absolute;

    left:60px;

    top:43px;

    width:100px;

    height:42px;

    line-height:42px;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    text-align:center;

    border-radius:16px;

    background:rgba(49,91,76,.10);

    color:#294f42;

    font-size:15px;

    font-weight:700;

}
/*==========================================================
SELECTED STAGE LAYER
==========================================================*/

.storybook-layer-selected{

    outline:3px solid rgba(49,91,76,.72);

    outline-offset:4px;

}
/*==========================================================
EFFECTS LAYER
==========================================================*/

#effectsLayer{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    overflow:hidden;

    pointer-events:none;

    z-index:60;

}

/*==========================================================
OPTIONS PANEL
==========================================================*/

#optionsPanel{

    width:300px;

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

    backdrop-filter:blur(18px);

    border-radius:24px;

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

    padding:22px;

    overflow-y:auto;

}

#optionsPanel h2{

    color:#3f5e59;

    margin-bottom:20px;

}

#optionsPanel h3{

    margin-top:18px;

    margin-bottom:10px;

    color:#4b6c67;

}

.shapeButton{

    width:100%;

    height:44px;

    margin-bottom:10px;

    border:none;

    border-radius:14px;

    background:white;

    cursor:pointer;

    font-size:18px;

}

.shapeButton:hover{

    background:#fdf7df;

}

#optionsPanel > button{

    width:100%;

    height:44px;

    margin-top:10px;

    border:none;

    border-radius:14px;

    background:#ffffffcc;

    cursor:pointer;

    font-size:18px;

}
/*==========================================================
STORYBOOK MAGIC
==========================================================*/

#magicPanel{

    margin-top:15px;

}

#effectSelector{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

#effectSelector button{

    padding:8px 14px;

    border:none;

    border-radius:14px;

    cursor:pointer;

}

#currentEffect{

    font-weight:bold;

    font-size:18px;

}

#magicPanel h4{

    margin:12px 0 8px;

    color:#4b6c67;

}

#magicPanel label{

    display:block;

    margin-bottom:12px;

}

#magicPanel input[type="range"]{

    width:100%;

}

#magicPanel input[type="color"]{

    width:100%;

    height:42px;

    border:none;

    border-radius:12px;

}

#magicPanel hr{

    margin:18px 0;

    border:none;

    border-top:1px solid rgba(0,0,0,.12);

}

#applyEffect,
#clearEffectsButton{

    width:100%;

    margin-top:10px;

}

#backgroundColor{

    width:100%;

    height:42px;

    margin-bottom:12px;

    cursor:pointer;

}



#clearBackground{

    width:100%;

    height:42px;

    border:none;

    border-radius:14px;

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

    cursor:pointer;

    font-size:18px;

    transition:.25s;

}



#clearBackground:hover{

    background:white;

    transform:translateY(-2px);

}


/*==========================================================
BOTTOM TOOLBAR  STORYBOOK GLASS BUTTONS
==========================================================*/

.storybookButton{

    position:relative;

    overflow:hidden;

    min-width:150px;

    height:46px;

    padding:0 20px;

    border:none;

    border-radius:999px;

    cursor:pointer;

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

    font-size:18px;

    font-weight:600;

    letter-spacing:.25px;

    color:#4b5658;

    transition:
        transform .25s,
        box-shadow .25s,
        filter .25s;

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

    box-shadow:

        inset 0 2px 0 rgba(255,255,255,.95),

        inset 0 10px 18px rgba(255,255,255,.28),

        0 10px 24px rgba(130,140,150,.16);

}
/*==========================================================
TOP GLASS
==========================================================*/

.storybookButton::before{

    content:"";

    position:absolute;

    left:10px;

    top:7px;

    width:78%;

    height:42%;

    border-radius:999px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.82),

            rgba(255,255,255,.10)

        );

}


/*==========================================================
BOTTOM SHINE
==========================================================*/

.storybookButton::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:999px;

    background:

        radial-gradient(

            circle at 22% 22%,

            rgba(255,255,255,.70),

            transparent 20%

        ),

        radial-gradient(

            circle at 75% 76%,

            rgba(255,255,255,.16),

            transparent 46%

        );

}


/*==========================================================
HOVER
==========================================================*/

.storybookButton:hover{

    transform:

        translateY(-2px);

    box-shadow:

        inset 0 2px 0 rgba(255,255,255,.96),

        inset 0 12px 22px rgba(255,255,255,.34),

        0 16px 30px rgba(120,130,145,.18);

}


/*==========================================================
ACTIVE
==========================================================*/

.storybookButton:active{

    transform:

        translateY(1px);

}


/*==========================================================
COLORS
==========================================================*/

.storybookCream{

    background:

        linear-gradient(

            180deg,

            #fffdf9,

            #f8eed8,

            #efe1b9

        );

}


.storybookPeach{

    background:

        linear-gradient(

            180deg,

            #fff8f4,

            #ffe0d1,

            #f6c7b3

        );

}


.storybookMint{

    background:

        linear-gradient(

            180deg,

            #f8fff9,

            #ddf4e8,

            #c0e2d1

        );

}


.storybookSage{

    background:

        linear-gradient(

            180deg,

            #fcfff9,

            #e3efd5,

            #cdddb7

        );

}

/*==========================================================
STATUS BAR
==========================================================*/

#statusBar{

    position:absolute;

    left:20px;

    bottom:15px;

    width:calc(100% - 40px);

    height:34px;

    display:flex;

    align-items:center;

    padding-left:20px;

    border-radius:18px;

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

    backdrop-filter:blur(18px);

    color:#35514e;

    font-size:17px;

}

/*==========================================================
TWINKLE EFFECT
==========================================================*/

.storybookTwinkle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    transform:scale(.25);

    animation:

        storybookTwinkle

        ease-in-out

        infinite;

}


/*==========================================================
TWINKLE ANIMATION
==========================================================*/

@keyframes storybookTwinkle{

    0%{

        transform:scale(.25);

    }

    20%{

        transform:scale(.60);

    }

    50%{

        transform:scale(1);

    }

    80%{

        transform:scale(.60);

    }

    100%{

        transform:scale(.25);

    }

}

/*==========================================================
SAVE DIALOG
==========================================================*/

.dialogHidden{

    display:none;

}

#saveDialog{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:9999;

}

.dialogPanel{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:500px;

    padding:30px;

    background:white;

    border-radius:24px;

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

}

.dialogPanel input[type=text]{

    width:100%;

    padding:12px;

    font-size:18px;

}

.dialogPanel button{

    margin-top:20px;

    margin-right:12px;

    padding:12px 24px;

}
/*==========================================================
FINAL DESKTOP / TABLET LAYOUT
ONE TOOLBAR
NO FLEXBOX FOR BUTTONS
==========================================================*/

#workspace{

    position:absolute;

    left:20px;

    top:110px;

    width:calc(100% - 40px);

    height:calc(100% - 210px);

    display:block;

}


#libraryPanel{

    position:absolute;

    left:0;

    top:0;

    width:260px;

    height:100%;

    overflow-y:auto;

}


#stagePanel{

    position:absolute;

    left:280px;

    right:320px;

    top:0;

    bottom:58px;

    display:block;

}


#storyStage{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

}
#storyStage{

    background:transparent;

    border:3px solid #6f9187;

    border-radius:38px;

    box-sizing:border-box;

    overflow:hidden;

}


#optionsPanel{

    position:absolute;

    right:0;

    top:0;

    width:300px;

    height:100%;

    overflow-y:auto;

}


/*==========================================================
PROJECT TOOLBAR — UNDER STAGE
==========================================================*/

#toolbar{

    position:absolute;

    left:50%;

    bottom:58px;

    top:auto;

    transform:translateX(-50%);

    width:620px;

    height:44px;

    margin:0;

    padding:0;

    display:block;

    z-index:500;

}


#toolbar #saveButton{

    position:absolute;

    left:0;

    top:0;

}


#toolbar #exportButton{

    position:absolute;

    left:155px;

    top:0;

}


#toolbar #previewButton{

    position:absolute;

    left:310px;

    top:0;

}


#toolbar #resetButton{

    position:absolute;

    left:465px;

    top:0;

}


#toolbar .storybookButton{

    width:145px;

    min-width:145px;

    height:40px;

    padding:0 8px;

    font-size:16px;

}


/*==========================================================
RECORDER BUTTONS — ONE VERTICAL COLUMN
==========================================================*/

#voiceRecorder .recorderButton{

    position:relative;

    display:block;

    width:100%;

    min-width:0;

    max-width:100%;

    height:42px;

    margin:0 0 10px 0;

    padding:0 10px;

    transform:none;

    line-height:42px;

    font-size:16px;

    text-align:center;

}


.recordingNameSection{

    display:block;

    width:100%;

    margin:4px 0 12px;

}


.recordingNameInput{

    display:block;

    width:100%;

    height:38px;

    padding:0 9px;

}
/*==========================================================
RECORDER BUTTON COLORS
==========================================================*/

.blushButton{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffe8f0 45%,
            #f7bfd1 100%
        );

}

.lavenderButton{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f1ebff 45%,
            #d6c2ff 100%
        );

}

.coralButton{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff1eb 45%,
            #ffc9b7 100%
        );

}

.aquaButton{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #eaf9ff 45%,
            #bdeaff 100%
        );

}

.pearlButton{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ececec 55%,
            #d9d9d9 100%
        );

}

.creamButton{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #d5e5fc 45%,
            #b6c4fa 100%
        );

}

.clearRecordingButton{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #e9fbf7 45%,
            #b9ece2 100%
        );

}


/*==========================================================
PHONE
==========================================================*/

@media (max-width:700px){

    body{

        overflow:auto;

    }


    #puzzleRoom{

        width:100%;

        height:auto;

        min-height:100vh;

    }


    #headerBar{

        position:relative;

        left:10px;

        top:10px;

        width:calc(100% - 20px);

    }


    #workspace{

        position:relative;

        left:10px;

        top:30px;

        width:calc(100% - 20px);

        height:auto;

    }


    #stagePanel{

        position:relative;

        left:0;

        right:auto;

        top:0;

        width:100%;

        height:360px;

    }


    #toolbar{

        position:relative;

        left:10px;

        bottom:auto;

        top:40px;

        transform:none;

        width:calc(100% - 20px);

        height:42px;

    }


    #toolbar .storybookButton{

        width:23%;

        min-width:0;

        font-size:13px;

    }


    #toolbar #saveButton{

        left:0;

    }


    #toolbar #exportButton{

        left:25%;

    }


    #toolbar #previewButton{

        left:50%;

    }


    #toolbar #resetButton{

        left:75%;

    }


    #libraryPanel{

        position:relative;

        left:0;

        top:60px;

        width:100%;

        height:auto;

        max-height:none;

    }


    #optionsPanel{

        position:relative;

        right:auto;

        top:80px;

        width:100%;

        height:auto;

        max-height:none;

    }


    #statusBar{

        position:relative;

        left:10px;

        bottom:auto;

        margin-top:100px;

        width:calc(100% - 20px);

    }

}

/*==========================================================
SELECTED IMAGE CONTROLS
==========================================================*/

#imageControls{

    position:relative;

    width:100%;

    margin:0 0 14px;

    padding:4px 0 2px;

}


#selectedImageFileName{

    width:100%;

    margin:0 0 12px;

    overflow:hidden;

    color:#48635d;

    font-size:15px;

    line-height:1.35;

    text-overflow:ellipsis;

    white-space:nowrap;

}


#imageControls label{

    display:block;

    margin:8px 0 5px;

    color:#48635d;

    font-size:16px;

    font-weight:700;

}


#imageControls input[type="range"]{

    display:inline-block;

    width:76%;

    margin:0 2% 10px 0;

    vertical-align:middle;

}


#imageControls span{

    display:inline-block;

    width:20%;

    color:#48635d;

    font-size:15px;

    text-align:right;

    vertical-align:middle;

}


#imageControls .libraryButton:disabled{

    cursor:default;

    opacity:.45;

    transform:none;

}


/*==========================================================
MULTIPLE IMAGE LAYERS
==========================================================*/

#imageLayer{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:20;

}


.userImageObject{

    position:absolute;

    width:auto;

    height:auto;

    max-width:none;

    max-height:none;

    cursor:grab;

    pointer-events:auto;

    touch-action:none;

    transform-origin:center center;

    user-select:none;

    -webkit-user-drag:none;

}


.userImageObject:active{

    cursor:grabbing;

}
/*==========================================================
STORYBOOK VOICES
TEXT SETTINGS PANEL
==========================================================*/

#textControls{

    position:relative;

    width:100%;

    min-height:610px;

    margin:14px 0 22px;

    padding:14px;

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

    border-radius:22px;

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

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.90),

        0 10px 24px rgba(80,100,110,.10);

}


#textControls h3{

    margin:0 0 12px;

    color:#48635d;

    font-size:20px;

    text-align:center;

}


/*==========================================================
TEXT PANEL LABELS
==========================================================*/

#textControls label{

    display:block;

    width:100%;

    margin:12px 0 5px;

    color:#48635d;

    font-size:16px;

    font-weight:700;

}


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

#addTextLayerButton{

    width:100%;

    min-width:0;

    height:42px;

    margin:0 0 10px;

    padding:0 12px;

    font-size:17px;

}


/*==========================================================
TEXT LAYER NAVIGATOR
==========================================================*/

#textLayerNavigator{

    position:relative;

    width:100%;

    height:44px;

    margin:0 0 10px;

}


#previousTextLayerButton,

#nextTextLayerButton{

    position:absolute;

    top:0;

    width:42px;

    height:42px;

    padding:0;

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

    border-radius:14px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.92),

            rgba(229,239,238,.72)

        );

    color:#48635d;

    font-size:18px;

    font-weight:800;

    cursor:pointer;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,1),

        0 5px 12px rgba(70,90,95,.12);

}


#previousTextLayerButton{

    left:0;

}


#nextTextLayerButton{

    right:0;

}


#selectedTextLayerName{

    position:absolute;

    left:48px;

    top:0;

    width:calc(100% - 96px);

    height:42px;

    padding:0 6px;

    overflow:hidden;

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

    border-radius:14px;

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

    color:#48635d;

    font-size:14px;

    font-weight:700;

    line-height:42px;

    text-align:center;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/*==========================================================
FONT BUTTON
==========================================================*/

#openFontBrowserButton,

#dragYourFont{

    display:block;

    width:100%;

    height:42px;

    margin:8px 0;

    padding:0 12px;

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

    border-radius:14px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.94),

            rgba(235,229,247,.76)

        );

    color:#4f5264;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    box-shadow:

        inset 0 2px 0 rgba(255,255,255,1),

        0 6px 14px rgba(95,80,120,.12);

}


/*==========================================================
FONT BROWSER
==========================================================*/

#fontBrowser{

    position:absolute;

    left:14px;

    top:154px;

    width:calc(100% - 28px);

    max-height:330px;

    padding:7px;

    overflow-x:hidden;

    overflow-y:auto;

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

    border-radius:18px;

    background:rgba(250,250,252,.97);

    box-shadow:

        0 18px 38px rgba(54,64,75,.28),

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

    z-index:900;

}


.fontBrowserClosed{

    display:none;

}


.fontBrowserOpen{

    display:block;

}


.fontPreviewButton{

    display:block;

    width:100%;

    min-height:48px;

    margin:0 0 6px;

    padding:7px 10px;

    overflow:hidden;

    border:1px solid rgba(165,178,182,.42);

    border-radius:12px;

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

    color:#35393b;

    font-size:22px;

    line-height:1.25;

    text-align:left;

    text-overflow:ellipsis;

    white-space:nowrap;

    cursor:pointer;

}


.fontPreviewButton:hover,

.fontPreviewSelected{

    border-color:#7fa89d;

    background:#eef8f5;

    box-shadow:

        inset 0 0 0 2px rgba(127,168,157,.20);

}


/*==========================================================
RANGE CONTROLS
==========================================================*/

#textControls input[type="range"]{

    display:inline-block;

    width:74%;

    height:22px;

    margin:0;

    vertical-align:middle;

    accent-color:#789f95;

}


#textControls output{

    display:inline-block;

    width:23%;

    color:#48635d;

    font-size:14px;

    font-weight:700;

    text-align:right;

    vertical-align:middle;

}


/*==========================================================
COLOR MODE BUTTONS
==========================================================*/

.textModeButton{

    display:inline-block;

    width:48%;

    height:40px;

    margin:12px 1% 8px 0;

    padding:0 8px;

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

    border-radius:14px;

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

    color:#555d60;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,1),

        0 5px 12px rgba(80,95,100,.10);

}


.textModeSelected{

    border-color:#779f95;

    background:

        linear-gradient(

            180deg,

            rgba(225,247,241,.98),

            rgba(189,226,216,.90)

        );

    color:#365850;

}


/*==========================================================
SOLID COLOR
==========================================================*/

#solidTextColorControls{

    width:100%;

    margin:4px 0 10px;

}


#solidTextColor{

    width:100%;

    height:42px;

    padding:3px;

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

    border-radius:13px;

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

    cursor:pointer;

}


/*==========================================================
GRADIENT COLORS
==========================================================*/

#gradientTextControls{

    width:100%;

    margin:5px 0 12px;

    padding:10px;

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

    border-radius:16px;

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

}


.gradientTextControlsHidden{

    display:none;

}


.gradientColorControl{

    position:relative;

    width:100%;

    min-height:50px;

    margin:0 0 7px;

}


.gradientColorControl input[type="color"]{

    display:inline-block;

    width:42px;

    height:38px;

    margin:0 5px 0 0;

    padding:2px;

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

    border-radius:10px;

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

    vertical-align:middle;

    cursor:pointer;

}


.gradientColorControl input[type="range"]{

    width:calc(100% - 54px) !important;

}


/*==========================================================
TEXT ACTION BUTTONS
==========================================================*/

#moveTextBackwardButton,

#moveTextForwardButton,

#deleteTextLayerButton{

    width:100%;

    min-width:0;

    height:40px;

    margin:6px 0 0;

    padding:0 10px;

    font-size:15px;

}


/*==========================================================
DISABLED CONTROLS
==========================================================*/

#textControls button:disabled,

#textControls input:disabled{

    cursor:default;

    opacity:.42;

}


/*==========================================================
STAGE TEXT LAYER
==========================================================*/

.storybookTextLayer{

    position:absolute;

    left:0;

    top:0;

    width:max-content;

    min-width:40px;

    max-width:90%;

    padding:4px 7px;

    border:none;

    outline:none;

    background:transparent;

    color:#6f4b91;

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

    font-size:96px;

    font-weight:400;

    line-height:1.08;

    letter-spacing:0;

    text-align:center;

    white-space:pre-wrap;

    overflow:visible;

    cursor:move;

    touch-action:none;

    user-select:none;

    -webkit-user-select:none;

    z-index:30;

}


/*==========================================================
SELECTED TEXT BOUNDING BOX
==========================================================*/

.storybookTextLayer.textLayerSelected{

    outline:2px solid rgba(70,132,186,.95);

    outline-offset:5px;

}


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

.storybookTextLayer.textLayerEditing{

    cursor:text;

    user-select:text;

    -webkit-user-select:text;

}


/*==========================================================
TEXT RESIZE HANDLE
==========================================================*/

.textResizeHandle{

    position:absolute;

    right:-13px;

    bottom:-13px;

    width:18px;

    height:18px;

    border:2px solid #ffffff;

    border-radius:50%;

    background:#4f8fc4;

    box-shadow:0 2px 7px rgba(0,0,0,.25);

    cursor:nwse-resize;

    touch-action:none;

}


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

.storybookTextGradient{

    color:transparent;

    background-clip:text;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


/*==========================================================
PHONE
==========================================================*/

@media (max-width:700px){

    #textControls{

        min-height:590px;

    }


    #fontBrowser{

        max-height:280px;

    }


    .storybookTextLayer{

        max-width:94%;

    }

}