@font-face {font-family: "gg-regular"; src: url(_asset/gg-sans/regular.ttf)}
@font-face {font-family: "gg-medium"; src: url(_asset/gg-sans/medium.ttf)}
@font-face {font-family: "gg-semibold"; src: url(_asset/gg-sans/semibold.ttf)}
body {color: #dbdee1; font-family: gg-regular, sans-serif; background-color: #303338; height: 100vh; margin: 0; display: grid; grid-template: 1fr max-content / max-content 1fr; user-select: none; --accent: gray}
img {display: block}
::selection {background-color: #5d84ac}

button, input {all: unset; display: block}
button {cursor: pointer}
.panel {border-radius: 8px; box-shadow: 0 8px 16px #0000003d}
header {display: flex; align-items: center; padding: 8px 16px; border-bottom: 2px solid}
h2 {all: unset; font: 500 1em gg-semibold, sans-serif}
.desc {color: #b5bac0; font-size: 0.875em; padding-left: 16px; border-left: 1px solid #3e4147; margin-left: 16px}

/* workbench */
#workbench {display: flex; flex-direction: column; gap: 16px; min-width: 368px; padding: 24px 16px; background-color: #232428; background-repeat: no-repeat; grid-row: 1/3; position: relative; cursor: grab}
#workbench::before {content: ""; background-color: #00000040; backdrop-filter: blur(1px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none}
:is(:not(.entry) > button, #back) {color: white; font: 0.875em gg-medium, sans-serif; padding: 6px 16px; border-radius: 3px; background-color: #4e5058; transition: background-color 0.17s}
:is(:not(.entry) > button, #back):hover {background-color: #6d6f78}
:is(:not(.entry) > button, #back):active {background-color: #80848d}
:not(.entry) > button[disabled], input[disabled] {opacity: 0.5; cursor: not-allowed}

/* zooming */
#zoom {display: flex; margin-left: auto; cursor: auto; z-index: 1}
#zoom-in {border-top-right-radius: 0; border-bottom-right-radius: 0}
#zoom-out {border-top-left-radius: 0; border-bottom-left-radius: 0}
#zoom-value {all: unset; background-color: #1e1f22; width: 48px; padding: 10px; appearance: textfield}

/* crop */
#crop {width: 248px; aspect-ratio: 1; margin: auto; box-shadow: 0 0 0 4px white, 0 0 16px #0000003d; border-radius: 50%; background-repeat: no-repeat; pointer-events: none; z-index: 1}

/* io */
#io {background-color: #303338; padding: 12px 16px; border-radius: 8px; box-shadow: 0 8px 16px #0000003d; display: flex; gap: 8px; cursor: auto; z-index: 1}
#select {margin-right: auto}
#select-file {display: none}
#workbench #apply {background-color: #5865f2}
#workbench #apply:hover {background-color: #4652c0}
#workbench #apply:active {background-color: #3b45a2}


/* displays */
#displays {display: grid; grid-template: "title title" max-content "profile messages" 1fr / max-content 1fr; align-items: start; gap: 32px 64px; padding: 32px 64px; overflow-y: auto}
#displays header {border-bottom-color: #26292d; margin: -32px -64px 0; grid-column: 1/3}
.icon {aspect-ratio: 1; border-radius: 50%; user-select: none}
.color {color: var(--accent)}

/* profile */
#profile {width: 340px; background-color: #232428; grid-area: profile}
input {all: unset; display: block; width: 100%; box-sizing: border-box}

#profile-banner {contain: paint; height: 60px; border-top-left-radius: inherit; border-top-right-radius: inherit; cursor: pointer}
#profile-banner::-moz-color-swatch {border: none}
#profile-banner::-webkit-color-swatch {border: none}

#profile-icon {width: max-content; background-color: #232428; padding: 6px; border-radius: 50%; margin-top: -50px; margin-left: 16px; position: relative}
#profile .icon {width: 80px; cursor: pointer}
#profile .icon:hover {opacity: 0.675}
#profile-status {width: 16px; height: 16px; border: 6px solid #232428; border-radius: 50%; background-color: #23a55a; position: absolute; bottom: 4px; right: 4px}

#profile-body {padding: 12px; margin: 16px; border-radius: inherit; background-color: #111214}
#profile-name, #profile-user, #profile-title {color: #f2f3f5}
#profile-name {font: 500 1.25em/1.2 gg-semibold, sans-serif}
#profile-user {font: 500 0.875em/1.3 gg-medium, sans-serif}
#profile hr {height: 1px; background-color: #2e3035; margin: 12px 0; border: none}
#profile-title {font: 600 0.75em gg-medium, sans-serif; letter-spacing: 0.02em; margin-bottom: 6px}
#profile-text {color: #dbdee1; font-size: 0.875em; line-height: 1.125rem; margin-bottom: 10px}

/* messages */
#message-wrapper {padding: 17px; display: flex; flex-direction: column; gap: 17px; grid-area: messages}
.message {padding: 2px 48px 2px 16px; display: grid; grid-template-columns: max-content 1fr}
.message .icon {width: 40px; margin-right: 16px; margin-top: 2px; grid-row: 1/3}
.msg-header {font-family: gg-medium, sans-serif; font-weight: 500}
.msg-name {color: #f2f3f5; display: inline-block; margin-right: 4px}
.msg-date {color: #939ba3; font-size: 0.75em}
.name-replace {color: var(--accent)}

/* history */
#history {background-color: #2a2d31}
#history header {border-bottom-color: #1e2023}
#remember {margin-left: 16px}
#entries {display: flex; contain: inline-size; height: 80px; padding: 8px; overflow-x: auto}
.entry {position: relative}
.entry .icon {height: 64px; border: 8px solid transparent; cursor: pointer}
.entry:hover .icon {border-color: #35373c}
.entry button {display: none; font-size: 0.75em; justify-content: center; align-items: center; background-color: #dd373e; width: 1em; height: 1em; padding: 4px; border-radius: 50%; position: absolute; top: 0; right: 0}
.entry:hover button {display: flex}

/* back */
#back {text-decoration: none; box-shadow: 0 0 8px #0000003d; position: fixed; top: 16px; right: 16px}