/*~  _____                           _  */
/*~ |  __ \                         | | */
/*~ | |  \/ ___ _ __   ___ _ __ __ _| | */
/*~ | | __ / _ \ '_ \ / _ \ '__/ _` | | */
/*~ | |_\ \  __/ | | |  __/ | | (_| | | */
/*~  \____/\___|_| |_|\___|_|  \__,_|_| */
body{
    background-color: #000;
    color: #0f0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font: large "Times New Roman", Times, serif;
    color-scheme: dark;
}
::selection{
    background-color: #f90;
    color: #000;
    text-shadow: none;
}
dialog::backdrop{background-color: #0007;}
dialog[open]{
    background-color: #444;
    color: #0f0;
    border-radius: 1rem;
    display: grid;
    gap: .7rem;
    place-items: safe center;
    place-content: safe center;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}
dialog h2{margin: 0;}
fieldset{
    background-color: #222;
    border: 2px groove #222;
    border-radius: .5rem;
    margin: 0;
    padding: .6rem;
}
fieldset>legend{cursor: help;}
input[type=range]:not([aria-disabled=true]):hover,
input[type=button]:enabled:hover,
input[type=text]:read-write:hover,
input[type=number]:read-write:hover{outline: 4px ridge #0a0;}
input[type=button]:enabled,
input[type=range]:not([aria-disabled=true]),
input[type=checkbox],
details>summary{cursor: pointer;}
details>summary{
    color: #0a0;
    font-style: italic;
}
input:read-only,
textarea:read-only{cursor: default;}
input[type=text],
input[type=number],
textarea{
    background-color: #111;
    color: inherit;
    border: 2px inset #000;
    border-radius: 4px;
    outline-offset: 2px;
}
textarea{
    min-height: 1.25rem;
    max-height: 4rem;
    height: 1.75rem;
    overflow: auto;
    scrollbar-gutter: stable;
    font: medium "Times New Roman", Times, serif;
}
input[type=button]{
    background-color: #333;
    color: #0f0;
    font-family: inherit;
    border: 2px outset #000;
    border-radius: .25rem;
    outline-offset: 2px;
}
input[type=button]:disabled{
    color: #0a0;
    background-color: #222;
}
input[type=button]:enabled:active{
    background-color: #444;
    border-style: inset;
}
input[type=button]:disabled:active{border-color: #722;}
input:disabled{
    cursor: not-allowed;
    border: 2px solid #7777;
}
input[type=color]{
    background-color: transparent;
    block-size: 28px;
    inline-size: 50px;
    border: none;
    border-radius: .5rem;
    padding: 0px 13px;
    vertical-align: middle;
    outline: 0 ridge #0a0;
    outline-offset: -.1rem;
}
input[type=color]:hover{outline-width: 2px;}
input[type=color]:focus{
    outline-width: 2px;
    outline-color: #080;
}
input[type=color]:active{outline-color: #0f0;}
input[type=checkbox]{accent-color: #0f0;}
input[type=range][list]{color: inherit;}
label{white-space: nowrap;}
table{border-collapse: collapse;}
table tr:nth-child(even){background-color: #0003;}
table th,
table td{
    text-align: start;
    padding: .2rem .4rem;
}
input[type=range],
progress{
    width: 21rem;
    vertical-align: middle;
    accent-color: #0f0;
}
input[type=range]{height: 1.375rem;}
progress{height: 1rem;}
progress:indeterminate{accent-color: #0a0;}
input[type=range][aria-disabled=true]{pointer-events: none;}
input[type=range][aria-disabled=true]::-webkit-slider-thumb{visibility: hidden;}
input[data-toggle="1"]{background-color: #222;}
label>input[type=range]+span,
label>progress+span{
    display: inline-block;
    min-width: 2.25rem;
}
/*~ ______     _        _ _          _  */
/*~ |  _  \   | |      (_) |        | | */
/*~ | | | |___| |_ __ _ _| | ___  __| | */
/*~ | | | / _ \ __/ _` | | |/ _ \/ _` | */
/*~ | |/ /  __/ || (_| | | |  __/ (_| | */
/*~ |___/ \___|\__\__,_|_|_|\___|\__,_| */
div#box{
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: max-content;
    height: max-content;
    padding: 0 .5rem 1rem .5rem;
    max-width: 100vw;
    max-height: 100vh;
    box-sizing: border-box;
    overflow: auto;
    scrollbar-gutter: stable;
    background-color: #222;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 5px 5px 30px -5px #080;
    border: 2px outset #444;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: .5rem;
    place-items: safe center;
    place-content: safe center;
}
div#box>h1{
    grid-area: 1/1/2/5;
    margin-block-end: 0;
}
div#box>h1>span.hint{
    cursor: help;
    font-size: large;
    vertical-align: super;
}
div#gifView{
    grid-area: 2/1/3/4;
    width: 30.1rem;
    height: 30.2rem;
}
div#frameView{
    width: 25.1rem;
    height: 25.2rem;
}
div#gifView,
div#frameView{
    /* TODO remove when bg-color-chooser-menu is implemented */
    --checker-a: #eee;--checker-b: #fff;
    --checker-a: #888;--checker-b: #aaa;
    --checker-a: #222;--checker-b: #333;
    --checker-a: #000;--checker-b: #111;
    --checker-a: transparent;--checker-b: transparent;
    --checker-len: 1rem;
    background: repeating-conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%) 0 / var(--checker-len) var(--checker-len);
    padding: .5rem;
    /*~ border-radius: .5rem; (non-zero values) can result in subpixel aliasing */
    box-sizing: border-box;
    overflow: hidden;
    user-select: none;
    /*~ make this element a containing block for the absolute positioning of the view buttons below */
    position: relative;
}
div#gifView.full,
div#frameView.full{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}
div#gifView.full~div#box,
div#frameView.full~div#box{visibility: hidden;}
div#gifViewButtons,
div#frameViewButtons{
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    place-items: safe center;
    place-content: safe center;
}
div#gifViewButtons>input,
div#frameViewButtons>input{
    box-sizing: content-box;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    font: 1rem "consolas", monospace;
}
canvas#htmlCanvas,
canvas#htmlFrameCanvas{
    object-fit: contain;
    width: calc(100% - .5rem);
    height: calc(100% - .5rem);
    margin: auto;
    translate: -50% -50%;
    position: absolute;
    top: 50%;
    left: 50%;
    image-rendering: pixelated;
}
canvas#htmlCanvas.smooth,
canvas#htmlFrameCanvas.smooth{image-rendering: auto;}
canvas#htmlCanvas.real,
canvas#htmlFrameCanvas.real{
    object-fit: unset;
    height: auto;
    cursor: grab;
    /*~ sets the position (updated via JS) */
    margin-left: var(--offset-view-left);
    margin-top: var(--offset-view-top);
    /*~ updated in JS when zooming in/out */
    width: calc(var(--canvas-width) * var(--canvas-scaler));
}
div#gifView:has(>canvas#htmlCanvas.real),
div#frameView:has(>canvas#htmlFrameCanvas.real){cursor: grab;}
html.grabbing,
html.grabbing *{cursor: grabbing !important;}
span#gifFPS,
span#frameFPS{
    position: absolute;
    top: .1rem;
    left: .2rem;
    color: #0a0;
    font: small "consolas", monospace;
    white-space: pre;
    text-shadow:
        1px 1px #000,
        1px -1px #000,
        -1px 1px #000,
        -1px -1px #000;
}
div#gifLoad,
div#frameLoad{
    position: absolute;
    translate: -50% -50%;
    top: 50%;
    left: 50%;
    width: 80%;
    padding: 50%;
    display: flex;
    gap: .5rem;
    flex-direction: column;
    align-items: safe center;
    place-content: safe center;
}
div#gifLoad{background: radial-gradient(ellipse 16rem 8rem at center,#000c,#0007 50%,transparent 100%);}
div#frameLoad{background: radial-gradient(ellipse 13rem 7rem at center,#000c,#0007 50%,transparent 100%);}
div#gifLoad.done,
div#frameLoad.done{
    visibility: hidden;
    opacity: 0;
    transition: opacity 300ms ease-in,
        visibility 300ms;
}
span#gifLoadText,
span#frameLoadText{
    color: #0f0;
    font: x-large "consolas", monospace;
    text-shadow: 0 0 4px #000,
        1px 1px #000,
        1px -1px #000,
        -1px 1px #000,
        -1px -1px #000;
}
progress#gifLoadProgress,
progress#frameLoadProgress{
    width: 100%;
    height: 2rem;
}
div#gifLoad>div{
    place-self: stretch;
    display: flex;
    gap: 1rem;
    align-items: safe center;
    justify-content: space-evenly;
}
input#gifLoadPause,
input#gifLoadAbort{
    font-size: large;
    padding: .2rem .3rem;
}
label[for=timeRange]{
    grid-area: 3/1/4/4;
    pointer-events: none;
}
label[for=frameRange]{grid-area: 4/1/5/4;}
label[for=frameRange]:has(>input#frameRange[aria-disabled=true]){pointer-events: none;}
input#frameRange{accent-color: #0a0;}
div#overrideOptions{
    grid-area: 5/1/6/2;
    position: relative;
}
div#overrideOptions:has(>div>label>input[type=checkbox]:checked)>input{border-color: #0a0;}
div#overrideOptions>input{
    font-size: medium;
    padding: .2rem .3rem;
}
div#overrideOptions>div{
    display: flex;
    flex-direction: column;
    gap: .2rem;
    justify-content: safe center;
    justify-items: safe center;
    align-items: stretch;
    text-align: left;
    position: absolute;
    z-index: 1;
    top: 2.5rem;
    background-color: #222;
    border: 2px outset #444;
    border-radius: .5rem;
    padding: .5rem .75rem;
    box-sizing: border-box;
    visibility: hidden;
}
div#overrideOptions>div::after{
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 0;
    left: 1.5rem;
    translate: 0 -50%;
    rotate: 45deg;
    background-color: inherit;
    border: inherit;
    border-bottom-color: transparent;
    border-right-color: transparent;
}
div#overrideOptions>input[data-toggle="1"]+div{visibility: visible;}
div#overrideOptions>div>p{
    align-self: safe center;
    margin-block: .5rem;
    font-size: larger;
}
div#overrideOptions>div>label:has(>input:first-of-type:disabled){color: #0a0;}
div#overrideOptions>div>label:not(:last-of-type)::after{
    content: "";
    position: absolute;
    display: block;
    width: 95%;
    height: .1rem;
    border-bottom: 2px solid #333;
}
input#overrideFramesRender{font-size: small;}
div#overrideOptions>div:has(>label>:is(
    input#overrideClear,
    input#overrideBackground
):is(
    [data-render="0"]:checked,
    [data-render="1"]:not(:checked)
))>label[for=overrideFrames]>input:checked~small,
div#overrideOptions>div>label:has(>input#overrideFrames:checked)~label:has(>:is(
    input#overrideClear,
    input#overrideBackground
):is(
    [data-render="0"]:checked,
    [data-render="1"]:not(:checked)
)){color: #f90;}
div#playerControls{
    grid-area: 5/2/6/3;
    display: flex;
    gap: .2rem;
    flex-direction: row;
    place-items: stretch;
    place-content: safe center;
}
div#playerControls>input{
    width: 2.5rem;
    height: 2rem;
    padding-bottom: 2rem;
    font: 1.2rem "consolas", monospace;
}
div#playerControls>input:disabled,
input#speed:disabled{
    background-color: #222;
    color: #0a0;
}
div#playerControls>input#seekPrevious,
div#playerControls>input#seekNext{font-size: 1.53rem;}
div#playerControls.reverse>input#reverse,
div#playerControls.paused>input#pause,
div#playerControls.playing>input#play{
    background-color: #222;
    text-shadow: 0px 0px 8px #0f0;
}
div#playerControls.reverse>input#reverse:active,
div#playerControls.paused>input#pause:active,
div#playerControls.playing>input#play:active{background-color: #111;}
input#speed{
    grid-area: 5/3/6/4;
    width: 4.25rem;
    height: 1.25rem;
    font-size: medium;
    background-color: #333;
}
input#speed.stop{
    background-color: #422;
    border-color: #f00;
}
fieldset#userInputArea{
    grid-area: 6/1/7/4;
    display: grid;
    gap: .25rem;
    align-items: safe center;
    justify-items: stretch;
    place-content: safe center;
}
fieldset#userInputArea:not(.waiting,.infinity)>label,
fieldset#userInputArea:not(.waiting,.infinity)>input#userInput,
fieldset#loopArea:has(>input#loopForce[data-toggle="1"])>span{opacity: .25;}
fieldset#userInputArea.waiting{border: 2px groove #44f;}
fieldset#userInputArea.waiting progress#userInputTimeout{accent-color: #44f;}
fieldset#userInputArea.infinity>label{color: #f44;}
fieldset#userInputArea.infinity progress#userInputTimeout{accent-color: #f44;}
label[for=userInputTimeout]{grid-area: 1/1/2/3;}
input#userInput{grid-area: 2/1/3/2;}
input#userInput:disabled,
input#loopForce:disabled{color: #0a0;}
input#userInputLock{grid-area: 2/2/3/3;}
input#userInput,
input#userInputLock,
input#loopForce{font-size: medium;}
fieldset#loopArea{grid-area: 7/1/8/4;}
div#infoPanels,
fieldset#totalSize,
fieldset#frameSize,
fieldset#framePosition,
fieldset#frameTextField>details>fieldset,
div#appExtList{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    place-items: safe center;
    place-content: safe center;
}
div#infoPanels{
    grid-area: 2/4/8/5;
    background-color: #111;
    border: 2px groove #777;
    border-radius: .5rem;
    padding: .5rem;
    gap: .5rem;
    width: 28rem;
    height: 47rem;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    justify-content: flex-start;
}
div#infoPanels>div:first-child{
    align-self: stretch;
    display: flex;
    padding: .5rem 0;
    align-items: safe center;
    justify-content: space-around;
}
a#github,
input#open{padding: .2rem .3rem;}
input#open{font-size: large;}
a#github{
    width: min-content;
    font-family: "consolas", monospace;
    color: #0af;
    text-decoration: none;
}
a#github:visited{color: #05f;}
a#github:hover,
a#github:active{
    color: #0ff;
    outline: 4px ridge #00f;
    border-radius: .5rem;
}
div#infoPanels>fieldset{align-self: stretch;}
div#gifInfoArea,
div#frameInfoArea,
div#frameTextArea{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: stretch;
    place-content: safe center;
}
div#gifInfoArea tr>td:last-child,
div#frameInfoArea tr>td:last-child,
div#frameTextArea tr>td:last-child{
    display: block;
    width: 14rem;
    max-height: 3rem;
    overflow: auto;
}
div#frameTextArea tr>td#frameText,
div#frameInfoArea tr>td#frameDisposalMethod{
    resize: vertical;
    height: 3rem;
    min-height: 2rem;
    max-height: 8rem;
}
div#frameTextArea.empty tr>td:last-child{opacity: .25;}
div#globalColorTable,
div#frameColorTable,
div#appExtList,
div#commentsList,
div#unExtList{
    resize: vertical;
    height: min-content;
    min-height: 1.5rem;
    max-height: 20rem;
    overflow: auto;
    scrollbar-gutter: stable;
}
div#globalColorTable::-webkit-resizer,
div#frameColorTable::-webkit-resizer,
div#appExtList::-webkit-resizer,
div#commentsList::-webkit-resizer,
div#unExtList::-webkit-resizer,
td#frameDisposalMethod::-webkit-resizer,
td#frameText::-webkit-resizer{background: repeating-linear-gradient(#AAA 0 1px, transparent 0 4px) bottom right / 12px 12px no-repeat;}
div#globalColorTable,
div#frameColorTable{
    display: grid;
    grid-template-columns: repeat(3, auto);
    align-items: safe center;
    justify-items: stretch;
    align-content: safe center;
    justify-content: space-between;
}
div#globalColorTable:has(>:nth-child(10)),
div#frameColorTable:has(>:nth-child(10)){height: 8rem;}
div#globalColorTable>span,
div#frameColorTable>span,
div#appExtList>span,
div#commentsList>span,
div#unExtList>span{
    font-style: italic;
    font-weight: bold;
    font-size: large;
    color: #0a0;
}
div#globalColorTable>label,
div#frameColorTable>label{
    text-align: end;
    font-family: "consolas", monospace;
}
div#globalColorTable>label.background-flag>input,
div#frameColorTable>label.background-flag>input{background-color: #000;}
div#frameTextArea input#frameTextCharForeground.transparent-flag,
div#frameTextArea input#frameTextCharBackground.transparent-flag,
div#globalColorTable>label.transparent-flag>input,
div#frameColorTable>label.transparent-flag>input{background: repeating-conic-gradient(#000 0 25%, #555 0 50%) 0 / 10px 10px;}
div#globalColorTable>label.background-flag.transparent-flag>input,
div#frameColorTable>label.background-flag.transparent-flag>input{
    background:
        linear-gradient(135deg, #000 50%, transparent 50%),
        repeating-conic-gradient(#000 0 25%, #555 0 50%) 0 / 10px 10px;
}
div#appExtList>fieldset{
    align-self: stretch;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    place-items: safe center;
    place-content: safe center;
}
div#appExtList>fieldset>legend{font-family: "consolas", monospace;}
div#commentsList{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: stretch;
    place-content: safe center;
}
div#commentsList>div{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-items: stretch;
    place-content: safe center;
    padding: .5rem;
    border: 1px outset #000;
    border-radius: .5rem;
}
div#commentsList>div>textarea{resize: vertical;}
div#unExtList{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    place-items: safe center;
    place-content: safe center;
}
div#unExtList>div{display: contents;}
div#unExtList>div>span{font-family: "consolas", monospace;}
div#unExtList>div>span>small{color: #0a0;}
div#copyNote{
    pointer-events: none;
    position: fixed;
    translate: -50% -100%;
    left: 50%;
    bottom: -2rem;
    padding: .2rem .7rem;
    scale: 0%;
    font-size: large;
    white-space: nowrap;
    border: 1px outset #000;
    border-radius: 1rem;
    background-color: #333;
}
div#copyNote[data-state=f]{
    background-color: #a00;
    color: #ff0;
}
/*~  _____                           _    ___  ___                  */
/*~ |_   _|                         | |   |  \/  |                  */
/*~   | | _ __ ___  _ __   ___  _ __| |_  | .  . | ___ _ __  _   _  */
/*~   | || '_ ` _ \| '_ \ / _ \| '__| __| | |\/| |/ _ \ '_ \| | | | */
/*~  _| || | | | | | |_) | (_) | |  | |_  | |  | |  __/ | | | |_| | */
/*~  \___/_| |_| |_| .__/ \___/|_|   \__| \_|  |_/\___|_| |_|\__,_| */
/*~                | |                                              */
/*~                |_|                                              */
dialog#importMenu[open]{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: safe center;
    place-content: safe center;
}
dialog#importMenu fieldset>legend{text-align: center;}
dialog#importMenu>fieldset:first-of-type{
    display: grid;
    grid-template-columns: auto 1fr;
    flex-direction: column;
    align-items: stretch;
    place-content: safe center;
}
dialog#importMenu>fieldset:first-of-type>label[for=importURL],
dialog#importMenu>fieldset:first-of-type>label[for=importFile]{display: contents;}
input#importURL{
    background-color: #000;
    color: #0f0;
    border-radius: .25rem;
}
input#importURL::placeholder{color: #0a0;}
dialog#importMenu>fieldset:first-of-type>p{
    grid-area: 2/1/3/3;
    margin: .5rem 0;
    text-align: center;
    font-size: medium;
}
dialog#importMenu>fieldset:first-of-type>label[for=importURL]:has(>input:disabled),
dialog#importMenu>fieldset:first-of-type>label[for=importFile]:has(>input:disabled){opacity: .25;}
img#importPreview{
    min-width: 6rem;
    min-height: 4rem;
    max-width: 30rem;
    max-height: 20rem;
    image-rendering: pixelated;
}
p#importWarn{
    margin: .5rem 0;
    padding: .2rem .5rem;
    min-width: min-content;
    min-height: min-content;
    max-width: 25rem;
    max-height: 7rem;
    overflow: auto;
    border-radius: .5rem;
    box-sizing: border-box;
    background-color: #300;
    color: #f00;
    text-align: center;
    font-size: 1.5rem;
}
p#importWarn:empty{display: none;}
div#importActions{
    display: flex;
    width: 100%;
    align-items: safe center;
    align-content: safe center;
    justify-content: space-around;
}
div#importActions>input{
    font-size: medium;
    padding: .2rem .5rem;
}
input#importConfirm:disabled{color: #0a0;}
/*~  _____              __ _                 ___  ___                  */
/*~ /  __ \            / _(_)                |  \/  |                  */
/*~ | /  \/ ___  _ __ | |_ _ _ __ _ __ ___   | .  . | ___ _ __  _   _  */
/*~ | |    / _ \| '_ \|  _| | '__| '_ ` _ \  | |\/| |/ _ \ '_ \| | | | */
/*~ | \__/\ (_) | | | | | | | |  | | | | | | | |  | |  __/ | | | |_| | */
/*~  \____/\___/|_| |_|_| |_|_|  |_| |_| |_| \_|  |_/\___|_| |_|\__,_| */
span#confirmText{
    white-space: pre;
    text-align: center;
    line-height: 1.5rem;
}
/*~  _____                _ _ _                 */
/*~ /  ___|              | | | |                */
/*~ \ `--.  ___ _ __ ___ | | | |__   __ _ _ __  */
/*~  `--. \/ __| '__/ _ \| | | '_ \ / _` | '__| */
/*~ /\__/ / (__| | | (_) | | | |_) | (_| | |    */
/*~ \____/ \___|_|  \___/|_|_|_.__/ \__,_|_|    */
@supports not selector(::-webkit-scrollbar){
    *{
        scrollbar-width: thin;
        scrollbar-color: #0a07 transparent;
    }
    *:hover{scrollbar-color: #0a0 transparent;}
}
::-webkit-scrollbar{
    width:.8rem;
    height:.8rem;
}
::-webkit-scrollbar-thumb:vertical:window-inactive{border-right-style:dashed;}
::-webkit-scrollbar-thumb:horizontal:window-inactive{border-bottom-style:dashed;}
::-webkit-scrollbar-thumb:vertical{
    background-color:#0000;
    border-right:.3rem solid #0a0f;
    border-radius:0;
}
:hover::-webkit-scrollbar-thumb:vertical{
    background-color:#000F;
    box-shadow:inset .4rem 0 .4rem 0 #0a0f;
    border:none;
    border-top-left-radius:1rem;
    border-bottom-left-radius:1rem;
}
::-webkit-scrollbar-thumb:horizontal{
    background-color:#0000;
    border-bottom:.3rem solid #0a0f;
    border-radius:0;
}
:hover::-webkit-scrollbar-thumb:horizontal{
    background-color:#000F;
    box-shadow:inset 0 .4rem .4rem 0 #0a0f;
    border:none;
    border-top-left-radius:1rem;
    border-top-right-radius:1rem;
}
::-webkit-scrollbar-thumb:hover:vertical{box-shadow:inset .4rem 0 .4rem 0 #0f0f;}
::-webkit-scrollbar-thumb:hover:horizontal{box-shadow:inset 0 .4rem .4rem 0 #0f0f;}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner{
    display:none;
    background-color:#0000;
}