:root {
    --spec--0: #000000;
    --spec--1: #0000c0;
    --spec--2: #c00000;
    --spec--3: #c000c0;
    --spec--4: #00c000;
    --spec--5: #00c0c0;
    --spec--6: #c0c000;
    --spec--7: #c0c0c0;

    --tool-size: 48px;
    --tool-md-size: 40px;
    --tool-sm-size: 32px;
    --tool-xs-size: 25px;
    --tool-char-size: 24px;
    --panel-divider-size: 4px;
    --panel-active-highlight-size: 4px;
    --subpanel-shift: 4px;
    --menu-font-size: 20px;
    --menu-font-sm-size: 16px;
    --menu-offset: 24px;
    --layers-width: 272px;

    --dialog-divider-size: 4px;
    --dialog-padding-ver: 12px;
    --dialog-padding-hor: 18px;
    --dialog-min-height: 64px;
    --dialog-font-size: 16px;
    --dialog-control-height: 42px;
    --dialog-input-padding-hor: 8px;
    --dialog-button-padding-ver: 8px;
    --dialog-button-padding-hor: 12px;

    --informer-padding-ver: 6px;
    --informer-padding-hor: 8px;
    --informer-font-size: 16px;

    --error-header-size: 48px;
    --error-header-padding: 16px;
    --error-header-font-size: 24px;
    --error-cross-font-size: 32px;
    --error-content-padding: 16px;
    --error-content-font-size: 16px;

    --loading: var(--material-red--500);

    --panel-background: var(--material-brown--900);
    --panel-divider: var(--material-brown--700);
    --panel-active: var(--material-brown--600);
    --panel-active-highlight: var(--material-red--500);
    --panel-light-on: var(--material-red--500);
    --panel-light-off: var(--material-black);
    --panel-focus: var(--material-gray--500);
    --panel-focus-opacity: 0.5;

    --subpanel-background: var(--material-brown--600);
    --subpanel-divider: var(--material-brown--800);
    --subpanel-separator: var(--material-brown--900);
    --subpanel-active-highlight: var(--material-red--500);

    --layers-scrollbar-thumb: var(--material-red--500);
    --layers-scrollbar-track: var(--subpanel-divider);
    --layers-active: var(--material-red--500);
    --layers-tool-active: var(--material-brown--700);

    --menu-text: var(--material-white);

    --dialog-background: var(--material-brown--900);
    --dialog-divider: var(--material-red--500);
    --dialog-text: var(--material-white);
    --dialog-prompt-hint-color: var(--material-red--500);
    --dialog-button-background: var(--material-brown--600);
    --dialog-button-edge-ok: var(--material-lime--500);
    --dialog-button-edge-cancel: var(--material-red--500);

    --informer-background: var(--material-blue-gray--700);
    --informer-text: var(--material-white);

    --error-header-background: var(--material-red--500);
    --error-content-background: var(--material-red--900);
    --error-text: var(--material-white);
}

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

body {
    margin: 0;
    padding: 0;
    background: #000000;
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--loading);
}

.loading {
    display: inline-block;
    width: 80px;
    height: 80px;
}

.loading:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6.4px solid currentColor;
    border-color: currentColor transparent currentColor transparent;
    animation: loading 1.2s linear infinite;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-width: 360px;
    min-height: 360px;
}

.panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: var(--tool-size);
    background: var(--panel-background);
}

.panel--palette {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: var(--panel-divider-size) solid var(--panel-divider);
}

.panel--toolbox {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: var(--panel-divider-size) solid var(--panel-divider);
}

.panel__pane {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.subpanel {
    display: flex;
    min-height: var(--tool-size);
    background: var(--subpanel-background);
}

.subpanel--palette {
    flex-direction: row;
    align-items: center;
    justify-content: start;
    position: absolute;
    top: var(--tool-size);
    right: 0;
    left: 0;
    border-bottom: var(--panel-divider-size) solid var(--subpanel-divider);
    padding-left: var(--subpanel-shift);
}

.subpanel--palette_chars {
    flex-direction: column;
    justify-content: center;
    padding: var(--panel-divider-size) 0;
}

.subpanel--palette_chars .tool {
    border: 1px solid var(--subpanel-separator);
}

.subpanel--palette_chars .tool + .tool {
    border-left: 0 none;
}

.subpanel--palette_chars .panel__pane + .panel__pane .tool {
    border-top: 0 none;
}

.subpanel--palette_selection {
    justify-content: end;
    padding-left: 0;
}

.subpanel--tools,
.subpanel--menu {
    position: absolute;
    right: 0;
    bottom: var(--tool-size);
    left: 0;
    border-top: var(--panel-divider-size) solid var(--subpanel-divider);
}

.subpanel--tools {
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

.subpanel--menu {
    flex-direction: column;
    align-items: end;
    justify-content: end;
}

.menu__item {
    position: relative;
    min-height: var(--tool-sm-size);
    padding: 0 var(--panel-divider-size);
    margin: calc((var(--tool-size) - var(--tool-sm-size)) / 2) var(--menu-offset);
    cursor: pointer;
}

.menu__item > .menu__item-text,
.menu__item > .menu__item-link {
    color: var(--menu-text);
    font-family: sans-serif;
    line-height: var(--tool-sm-size);
}

.menu__item > .menu__item-text {
    font-size: var(--menu-font-sm-size);
    opacity: 0.5;
}

.menu__item > .menu__item-link {
    font-size: var(--menu-font-size);
    text-decoration: underline;
}

.menu__item:active > .menu__item-link {
    text-decoration: none;
}

.menu__item-load {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
}

.layers {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
    position: absolute;
    top: var(--tool-size);
    right: 0;
    width: var(--layers-width);
    background: var(--subpanel-background);
    border-top: var(--panel-divider-size) solid var(--subpanel-background);
    border-bottom: var(--panel-divider-size) solid var(--subpanel-divider);
    max-height: calc(100vh - var(--tool-size) * 3);
}

.layers__items {
    min-height: var(--tool-sm-size);
    background: var(--panel-background);
    overflow-y: scroll;
    flex: 1;
}

@supports selector(::-webkit-scrollbar) {
    .layers__items::-webkit-scrollbar {
        -webkit-appearance: none;
    }

    .layers__items::-webkit-scrollbar:vertical {
        width: 15px;
    }

    .layers__items::-webkit-scrollbar-track {
        background-color: var(--layers-scrollbar-track);
    }

    .layers__items::-webkit-scrollbar-thumb {
        background-color: var(--layers-scrollbar-thumb);
        border-radius: 10px;
        border: 3px solid var(--layers-scrollbar-track);
    }
}

@supports not selector(::-webkit-scrollbar) {
    .layers__items {
        scrollbar-color: var(--layers-scrollbar-thumb) var(--layers-scrollbar-track);
    }
}

.layers__item {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--panel-divider-size) calc(var(--panel-divider-size) * 2);
    min-height: var(--tool-md-size);
    cursor: pointer;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

.layers__item--active {
    background: var(--layers-active);
}

.layers__preview {
    height: var(--tool-sm-size);
    border: 1px solid var(--panel-divider);
}

.layers__toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.tool {
    --tool-offset: calc(var(--tool-size) / 12);
    --tool-inner-size: calc((var(--tool-size) - var(--tool-offset) * 2) / 2);

    display: block;
    position: relative;
    cursor: pointer;
    width: var(--tool-size);
    height: var(--tool-size);
    outline: none !important;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

.tool--md {
    --tool-size: var(--tool-md-size);
}

.tool--sm {
    --tool-size: var(--tool-sm-size);
}

.tool--xs {
    --tool-size: var(--tool-xs-size);
}

.tool:active::after {
    display: block;
    position: absolute;
    content: " ";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--panel-focus);
    opacity: var(--panel-focus-opacity);
}

.tool--marker:active::after,
.tool--disabled:active::after {
    display: none;
}

.tool--disabled {
    opacity: 0.25;
}

.tool--active {
    background: var(--panel-active);
}

.tool--active::before {
    display: none;
    position: absolute;
    content: " ";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.panel--palette .tool--active::before {
    display: block;
    border-top: var(--panel-active-highlight-size) solid var(--panel-active-highlight);
}

.panel--toolbox .tool--active::before {
    display: block;
    border-bottom: var(--panel-active-highlight-size) solid var(--panel-active-highlight);
}

.subpanel--palette .tool--active::before {
    display: block;
    border-bottom: var(--panel-active-highlight-size) solid var(--subpanel-active-highlight);
}

.subpanel--tools .tool--active::before {
    display: block;
    border-top: var(--panel-active-highlight-size) solid var(--subpanel-active-highlight);
}

.layers .tool--active {
    background: var(--layers-tool-active);
}

.tool__icon--light {
    border: var(--tool-offset) solid transparent;
}

.tool__light > .tool__icon--light {
    display: none;
}

.tool__light--on > .tool__icon--light__on {
    display: block;
}

.tool__light--off > .tool__icon--light__off {
    display: block;
}

.tool__light--transparent > .tool__icon--light__transparent {
    display: block;
}

.tool__light--force_transparent > .tool__icon--light__force_transparent {
    display: block;
}

.tool--active > .tool__light {
    border-color: var(--panel-active);
}

.tool__icon {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tool-size);
    height: var(--tool-size);
}

.tool__color {
    position: absolute;
    top: var(--tool-offset);
    right: var(--tool-offset);
    bottom: var(--tool-offset);
    left: var(--tool-offset);
}

.tool__color_ink {
    --offset: calc((var(--tool-size) - var(--tool-inner-size)) / 2);

    position: absolute;
    top: var(--offset);
    left: var(--offset);
    width: var(--tool-inner-size);
    height: var(--tool-inner-size);
    overflow: hidden;
}

.tool__color_paper {
    position: absolute;
    top: var(--tool-offset);
    right: var(--tool-offset);
    bottom: var(--tool-offset);
    left: var(--tool-offset);
}

.tool__color_paper::after {
    --offset: calc((var(--tool-size) - var(--tool-inner-size)) / 2 - var(--tool-offset));

    content: " ";
    display: block;
    position: absolute;
    top: var(--offset);
    left: var(--offset);
    width: var(--tool-inner-size);
    height: var(--tool-inner-size);
    overflow: hidden;
    background: var(--panel-background);
}

.tool--active > .tool__color_paper::after {
    background: var(--panel-active);
}

.tool__char {
    --offset: calc((var(--tool-size) - var(--tool-char-size)) / 2);

    position: absolute;
    top: var(--offset);
    left: var(--offset);
    width: var(--tool-char-size);
    height: var(--tool-char-size);
    background-image: url(../drawable/specscii__24x24.png);
}

.tool__shape > .tool__icon {
    display: none;
}

.tool__shape--point > .tool__icon--shape__point {
    display: block;
}

.tool__shape--line > .tool__icon--shape__line {
    display: block;
}

.tool__shape--stroke_box > .tool__icon--shape__stroke_box {
    display: block;
}

.tool__shape--fill_box > .tool__icon--shape__fill_box {
    display: block;
}

.tool__shape--stroke_ellipse > .tool__icon--shape__stroke_ellipse {
    display: block;
}

.tool__shape--fill_ellipse > .tool__icon--shape__fill_ellipse {
    display: block;
}

.tool__mode > .tool__icon {
    display: none;
}

.tool__mode--edge > .tool__icon--mode__edge {
    display: block;
}

.tool__mode--center > .tool__icon--mode__center {
    display: block;
}

.tool__color > .tool__indicator,
.tool__color_paper > .tool__indicator,
.tool__color_ink > .tool__indicator,
.tool__char > .tool__indicator {
    display: none;
}

.tool__char--transparent,
.tool__char--force_transparent {
    background: none;
    top: var(--tool-offset);
    right: var(--tool-offset);
    bottom: var(--tool-offset);
    left: var(--tool-offset);
    width: auto;
    height: auto;
}

.tool__indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tool-md-size);
    height: var(--tool-md-size);
}

.subpanel .tool__indicator {
    border: var(--tool-offset) solid transparent;
}

.tool__color--transparent > .tool__indicator--transparent,
.tool__color_paper--transparent > .tool__indicator--transparent,
.tool__color_ink--transparent > .tool__indicator--transparent,
.tool__char--transparent > .tool__indicator--transparent {
    display: block;
}

.tool__color--force_transparent > .tool__indicator--force_transparent,
.tool__color_paper--force_transparent > .tool__indicator--force_transparent,
.tool__color_ink--force_transparent > .tool__indicator--force_transparent,
.tool__char--force_transparent > .tool__indicator--force_transparent {
    display: block;
}

.tool--xs > .tool__indicator {
    width: var(--tool-char-size);
    height: var(--tool-char-size);
    border-width: 0;
}

.tool__color--0,
.tool__color_ink--0,
.tool__color_paper--0 {
    background: var(--spec--0);
}

.tool__color--1,
.tool__color_ink--1,
.tool__color_paper--1 {
    background: var(--spec--1);
}

.tool__color--2,
.tool__color_ink--2,
.tool__color_paper--2 {
    background: var(--spec--2);
}

.tool__color--3,
.tool__color_ink--3,
.tool__color_paper--3 {
    background: var(--spec--3);
}

.tool__color--4,
.tool__color_ink--4,
.tool__color_paper--4 {
    background: var(--spec--4);
}

.tool__color--5,
.tool__color_ink--5,
.tool__color_paper--5 {
    background: var(--spec--5);
}

.tool__color--6,
.tool__color_ink--6,
.tool__color_paper--6 {
    background: var(--spec--6);
}

.tool__color--7,
.tool__color_ink--7,
.tool__color_paper--7 {
    background: var(--spec--7);
}

.drawing {
    position: absolute;
    overflow: hidden;

    top: calc(var(--tool-size) + var(--panel-divider-size));
    right: 0;
    bottom: calc(var(--tool-size) + var(--panel-divider-size));
    left: 0;
}

.drawing__sheet {
    pointer-events: none;
}

.drawing__sheet,
.drawing__areas {
    display: block;
    position: absolute;
    object-fit: contain;

    image-rendering: optimizeSpeed; /* Older versions of FF */
    image-rendering: -moz-crisp-edges; /* FF 6.0+ */
    image-rendering: -webkit-optimize-contrast; /* Safari */
    image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
    image-rendering: pixelated; /* Modern browsers */
    -ms-interpolation-mode: nearest-neighbor; /* IE */
}

.informer {
    position: absolute;
    top: calc(var(--tool-size) + var(--panel-divider-size));
    right: 0;
    left: 0;
    background: var(--informer-background);
    padding: var(--informer-padding-ver) var(--informer-padding-hor);
    color: var(--informer-text);
    font-family: sans-serif;
    font-size: var(--informer-font-size);
    line-height: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.informer > span {
    display: block;
}

.dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
}

.dialog__background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    cursor: pointer;
}

.dialog__content {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: var(--dialog-background);
    border-bottom: var(--dialog-divider-size) solid var(--dialog-divider);
    padding: var(--dialog-padding-ver) var(--dialog-padding-hor) var(--dialog-padding-ver) var(--dialog-padding-hor);
    min-height: var(--dialog-min-height);
    color: var(--dialog-text);
    font-family: sans-serif;
    font-size: var(--dialog-font-size);
    line-height: 1.2;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dialog__alert {
    cursor: pointer;
}

.dialog__confirm,
.dialog__prompt_content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.dialog__confirm_message,
.dialog__prompt_input {
    flex-grow: 1;
}

.dialog__prompt_content,
.dialog__prompt_hint {
    margin-top: 8px;
}

.dialog__prompt_input {
    height: var(--dialog-control-height);
    min-width: 96px;
    font-size: var(--dialog-font-size);
    padding-left: var(--dialog-input-padding-hor);
    padding-right: var(--dialog-input-padding-hor);
}

.dialog__prompt_hint {
    color: var(--dialog-prompt-hint-color);
}

.dialog__button {
    padding: var(--dialog-button-padding-ver) var(--dialog-button-padding-hor);
    margin-left: 16px;
    background: var(--dialog-button-background);
    height: var(--dialog-control-height);
    line-height: calc(var(--dialog-control-height) - var(--dialog-divider-size) - var(--dialog-button-padding-ver) * 2);
    cursor: pointer;
    border-bottom-width: var(--dialog-divider-size);
    border-bottom-style: solid;
}

.dialog__button:active {
    border-top-width: var(--dialog-divider-size);
    border-top-style: solid;
    border-bottom-width: 0;
    border-bottom-style: none;
}

.dialog__button--ok {
    border-top-color: var(--dialog-button-edge-ok);
    border-bottom-color: var(--dialog-button-edge-ok);
}

.dialog__button--cancel {
    border-top-color: var(--dialog-button-edge-cancel);
    border-bottom-color: var(--dialog-button-edge-cancel);
}

.error {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    color: var(--error-text);
}

.error__header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--error-header-size);
    padding: 0 var(--error-header-padding);
    font-size: var(--error-header-font-size);
    line-height: var(--error-header-size);
    background-color: var(--error-header-background);
    cursor: pointer;
    font-family: sans-serif;
}

.error__header::after {
    content: "×";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: var(--error-header-size);
    padding: 0 var(--error-header-padding);
    font-family: sans-serif;
    font-size: var(--error-cross-font-size);
    line-height: var(--error-header-size);
}

.error__content {
    display: block;
    position: absolute;
    top: var(--error-header-size);
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    background-color: var(--error-content-background);
    padding: var(--error-content-padding);
    font-size: var(--error-content-font-size);
    font-family: monospace;
    line-height: 1.2;
    overflow: auto;
}

.hidden {
    display: none;
}

@media screen and (orientation: landscape) {
    .panel {
        flex-direction: column;
        min-height: auto;
        min-width: var(--tool-size);
    }

    .panel__pane {
        flex-direction: column;
    }

    .subpanel--palette_chars {
        padding: 0 var(--panel-divider-size);
    }

    .subpanel--palette_chars > .panel__pane,
    .layers .panel__pane {
        flex-direction: row;
    }

    .panel--palette {
        top: 0;
        right: auto;
        bottom: 0;
        left: var(--tool-size);
        border-right: var(--panel-divider-size) solid var(--panel-divider);
        border-bottom: 0 none;
    }

    .panel--toolbox {
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        border-top: 0 none;
    }

    .subpanel {
        min-height: auto;
        min-width: var(--tool-size);
    }

    .subpanel--palette {
        justify-content: center;
        top: 0;
        right: auto;
        bottom: 0;
        left: calc(var(--tool-size) * 2);
        border-right: var(--panel-divider-size) solid var(--subpanel-divider);
        border-bottom: 0 none;
        padding-top: var(--subpanel-shift);
        padding-left: 0;
    }

    .subpanel--palette,
    .subpanel--tools {
        align-items: start;
    }

    .subpanel--palette_chars {
        align-items: center;
        justify-content: start;
        padding-top: var(--subpanel-shift);
    }

    .subpanel--palette_selection {
        align-items: end;
        padding-top: 0;
    }

    .subpanel--tools,
    .subpanel--menu {
        top: 0;
        right: auto;
        bottom: 0;
        left: var(--tool-size);
        border-right: var(--panel-divider-size) solid var(--subpanel-divider);
        border-top: 0 none;
    }

    .layers {
        top: auto;
        right: auto;
        bottom: 0;
        left: calc(var(--tool-size) * 2);
        border-bottom: 0 none;
        border-left: var(--panel-divider-size) solid var(--subpanel-background);
        max-height: 100vh;
    }

    .drawing {
        top: 0;
        right: 0;
        bottom: 0;
        left: calc(var(--tool-size) * 2 + var(--panel-divider-size));
    }

    .panel--palette .tool--active::before {
        border-top: 0 none;
        border-right:  var(--panel-active-highlight-size) solid var(--panel-active-highlight);
    }

    .panel--toolbox .tool--active::before {
        border-bottom: 0 none;
        border-left: var(--panel-active-highlight-size) solid var(--panel-active-highlight);
    }

    .subpanel--palette .tool--active::before {
        border-bottom: 0 none;
        border-right: var(--panel-active-highlight-size) solid var(--subpanel-active-highlight);
    }

    .subpanel--palette_chars .tool--active::before {
        border-bottom: var(--panel-active-highlight-size) solid var(--subpanel-active-highlight);
        border-right: 0 none;
    }

    .subpanel--tools .tool--active::before {
        border-top: 0 none;
        border-right: var(--panel-active-highlight-size) solid var(--subpanel-active-highlight);
    }

    .subpanel--menu {
        align-items: start;
    }

    .informer {
        top: 0;
        left: calc(var(--tool-size) * 2 + var(--panel-divider-size));
    }
}

@media screen and (((orientation: portrait) and (max-width: 431px))
    or ((orientation: landscape) and (max-height: 431px))) {

    :root {
        --tool-size: 40px;
        --tool-md-size: 32px;
        --tool-sm-size: 26px;
        --tool-xs-size: 20px;
        --menu-font-size: 18px;
        --dialog-divider-size: 3px;
        --informer-font-size: 14px;
    }

    .tool--xs > .tool__char,
    .tool--xs > .tool__indicator {
        top: -2.5px;
        left: -2.5px;
        transform: scale(0.8);
    }
}

@media screen and ((orientation: portrait) and (max-width: 431px)) {
    :root {
        --panel-active-highlight-size: 3px;
        --layers-width: 224px;
    }
}

@media screen and ((orientation: landscape) and (min-width: 432px)) {
    :root {
        --dialog-padding-ver: 16px;
        --dialog-padding-hor: 24px;
        --dialog-min-height: 80px;
        --dialog-font-size: 18px;
        --dialog-control-height: 48px;
        --dialog-input-padding-hor: 12px;
        --dialog-button-padding-hor: 16px;

        --informer-padding-hor: 10px;
        --informer-padding-ver: 8px;
    }
}