#app-loading {
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    gap: 100px;
    z-index: 103;

    width: 100dvw;
    height: 100dvh;

    background-color: var(--background);
}

#app-loading > .logo {
    position: relative;

    width: 64px;
    height: 64px;
}

#app-loading > .logo > * {
    display: block;

    width: 100%;
    height: 100%;
    object-fit: contain;
}

#app-loading > .logo > .logo-dark-mode { display: none; }

@media (prefers-color-scheme: dark) {
    #app-loading > .logo > .logo-light-mode { display: none; }
    #app-loading > .logo > .logo-dark-mode { display: block; }
}

#app-loading > i {
    font-size: 32px;
    color: var(--font);
}

#app-loading > p {
    margin-top: -80px;

    height: 24px;

    font-size: 16px;
    color: var(--font-content);
}

#app-loading-temporary {
    display: flex;
    position: relative;
    padding: 16px;
    z-index: 103;
    overflow: hideen;

    width: 100dvw;
    height: 100dvh;

    font-size: 14px;
    color: var(--font);
    background-color: var(--background);
}
px-dialog:has(.floating-sub-menu) > .wrap {
    grid-template-rows: repeat(2, minmax(0, auto));

    width: 240px;
}

px-dialog:has(.floating-sub-menu) > .wrap > .control { display: none; }

px-dialog:has(.floating-sub-menu) > .wrap > .grab {
    height: 30px;

    border-bottom: unset;
}

px-dialog:has(.floating-sub-menu) > .wrap > .body {
    padding: 10px;

    background-color: unset;
}

px-dialog:has(.floating-sub-menu) > .wrap > .body > .title { display: none; }

px-dialog:has(.color-palette.custom-highlight-mode) > .wrap { --dialog-background: var(--background); }

.floating-sub-menu > button.close-dialog {
    display: flex;
    position: absolute;
    right: 4px;
    top: 4px;
    align-items: center;
    justify-content: center;
    padding: 0 !important;

    min-width: unset;
    width: 22px;
    height: 22px;
}

.floating-sub-menu > .description {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 32px;
}

.floating-sub-menu > .description > .left > span { margin-left: 4px;}

.floating-sub-menu > .description > .right > span {
    font-size: 10px;
    color: var(--font-sub);
}

.floating-sub-menu > .partition {
    margin: 5px 0;

    width: 100%;
    height: 1px;

    background-color: var(--component-border);
}

.floating-sub-menu > .block {
    display: flex;
    position: relative;
    flex-direction: column;

    width: 100%;
    height: max-content;
}

.floating-sub-menu > .block > .row {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 32px;
}

.floating-sub-menu > .block > .row > button {
    --button-icon: var(--font);

    width: 100%;
    flex: 1;
}

.floating-sub-menu > .block > .row > button > span {
    display: inline-block;

    width: 100%;

    text-align: left;
}

.floating-sub-menu > .block > .row > .description {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: end;
    gap: 2px;

    width: 40px;
    height: 32px;

    font-size: 10px;
    color: var(--font-sub);
}

.floating-sub-menu > .block > .description {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: end;
    right: 0;
    top: 0;
    gap: 2px;

    width: 40px;
    height: 100%;

    font-size: 10px;
    color: var(--font-sub);
}

.floating-sub-menu > .color-palette-wrap {
    display: grid;
    position: relative;
    grid-template-columns: repeat(5, 32px);
    justify-content: space-between;
    row-gap: 7px;
}

.floating-sub-menu > .color-palette-wrap:not(:last-child) { margin-bottom: 20px; }
.floating-sub-menu > .color-palette-wrap:last-child { margin-bottom: 10px; }

.floating-sub-menu > .color-palette-wrap > button:is([data-btn-text-color], [data-btn-custom-text-color="true"]) {
    --button-label: var(--color);
    --button-icon: var(--color);
}
.floating-sub-menu > .color-palette-wrap > button:is([data-btn-bg-color], [data-btn-custom-bg-color="true"]) {
    --button-background: var(--color);
    --button-icon: oklch(from var(--white) l c h/0.4);
}
.floating-sub-menu > .color-palette-wrap > [data-btn-highlight-color] {
    --button-label: var(--text-color);
    --button-background: var(--bg-color);
}

.floating-sub-menu > .color-palette-wrap > button:is([data-btn-custom-text-color="true"], [ data-btn-custom-bg-color="true"]) > i.fa-regular.fa-droplet { display: none; }
.floating-sub-menu > .color-palette-wrap > button:is([data-btn-custom-text-color="false"], [ data-btn-custom-bg-color="false"]) > i.fa-solid.fa-droplet { display: none; }

/* default mode */
.color-palette:not(.custom-highlight-mode) > .color-palette-wrap:not(:has(button.temp-selected)) > button.selected { --button-border: var(--foreground); }

.color-palette:not(.custom-highlight-mode) > .color-palette-wrap > button.temp-selected { --button-border: var(--foreground); }

.color-palette:not(.custom-highlight-mode):has([data-btn-highlight-color].selected) > .color-palette-wrap > :is([data-btn-text-color-default], [data-btn-text-color], [data-btn-custom-text-color="true"], [data-btn-bg-color-default], [data-btn-bg-color], [data-btn-custom-bg-color="true"]).selected::before { border-style: dashed; }

.color-palette:not(.custom-highlight-mode) > .color-palette-wrap > button.current-selected > span::before {
    content: "";

    display: block;
    position: absolute;
    bottom: -10px;
    left: 14px;

    width: 4px;
    height: 4px;

    border-radius: 2px;
    background-color: oklch(from var(--foreground) l c h/0.2);
}

.color-palette:not(.custom-highlight-mode) > .description > .right > button { display: none; }

.color-palette:not(.custom-highlight-mode) [data-btn-custom-highlight-mode] > i.fa-xmark-large { display: none; }

/* custom highlight mode */
.color-palette.custom-highlight-mode > .color-palette-wrap > [data-btn-highlight-color].custom-selected { --button-border: var(--foreground); }

.color-palette.custom-highlight-mode > .color-palette-wrap > :is([data-btn-text-color-default], [data-btn-text-color], [data-btn-custom-text-color="true"], [data-btn-bg-color-default], [data-btn-bg-color], [data-btn-custom-bg-color="true"]).custom-selected { --button-border: var(--foreground); }
.color-palette.custom-highlight-mode > .color-palette-wrap > :is([data-btn-text-color-default], [data-btn-text-color], [data-btn-custom-text-color="true"], [data-btn-bg-color-default], [data-btn-bg-color], [data-btn-custom-bg-color="true"]).custom-selected::before { border-style: dashed; }

.color-palette.custom-highlight-mode > .color-palette-wrap > button.highlight { --button-border: var(--foreground); }

.color-palette.custom-highlight-mode > .color-palette-wrap > button.highlight::before { border-style: dashed; }

.color-palette.custom-highlight-mode [data-btn-custom-highlight-mode] {
    --button-icon: var(--background);
    --button-background: var(--font-content);
}
.color-palette.custom-highlight-mode [data-btn-custom-highlight-mode] > i.fa-palette { display: none; }

.color-palette.custom-highlight-mode > .description > .right > button {
    --button-label: var(--font-sub);

    grid-template-columns: 24px minmax(0, auto);
    padding-right: 8px;

    height: 24px;
}
.color-palette.custom-highlight-mode > .description > .right > button > i { font-size: 10px; }
.color-palette.custom-highlight-mode > .description > .right > button > span { font-size: 12px; }

.note-form-bar-dialog {
    align-items: start;
    justify-content: start;
    padding: 0px;
}

.note-form-bar-dialog > .wrap > :is(.grab, .control) { display: none; }
.note-form-bar-dialog > .wrap > .body > .title { display: none; }

.note-form-bar-dialog > .wrap {
    padding: 10px;

    min-width: unset;

    border: unset;
    background-color: unset;
    box-shadow: unset;
    backdrop-filter: unset;
}

.note-form-bar-dialog > .wrap > .body {
    padding: 0px;
    border: solid 1px var(--dialog-border);
    border-radius: 9px;
    /* background-color: oklch(from var(--dialog-background) l c h/var(--backdrop-blur-opacity)); */
    background-color: var(--dialog-background);
    box-shadow: 0 2px 6px var(--shadow);
    /* backdrop-filter: var(--backdrop-blur); */
}

.note-form-bar {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}

.note-form-bar > .partition {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 4px;
    height: 32px;
}

.note-form-bar > .partition::before {
    content: "";

    display: block;
    position: relative;

    width: 4px;
    height: 4px;

    border-radius: 2px;
    background-color: oklch(from var(--foreground) l c h/0.1);
}

[data-btn-open-formatting-menu] {
    display: flex;
    position: relative;
    align-items: center;
    gap: 10px;
}

[data-btn-open-formatting-menu] > .description {
    font-size: 11px;
    color: var(--font-sub);
}
/* new-group */
px-menu[data-type="new-group"] [data-btn-new-group] {
    display: flex;
    position: relative;
    align-items: start;
    gap: 8px;
    padding: 10px;

    width: 100%;
    height: max-content;
}

px-menu[data-type="new-group"] [data-btn-new-group] > i { margin-top: 4px; }

px-menu[data-type="new-group"] [data-btn-new-group] > .content {
    display: flex;
    position: relative;
    flex-direction: column;

    width: 100%;

    text-align: left;
}

px-menu[data-type="new-group"] [data-btn-new-group] > .content > p {
    width: 100%;

    font-size: 14px;
    color: var(--font);
}

px-menu[data-type="new-group"] [data-btn-new-group] > .content > span {
    font-size: 12px;
    color: var(--font-sub);
}

/* note menu */
px-menu:is([data-type^="block-"], [data-type="menu-more"]) .block {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;

    width: 100%;
    height: max-content;
}

px-menu:is([data-type^="block-"], [data-type="menu-more"]) .block > .row {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr) 70px;
    grid-template-rows: 32px;
    gap: 8px;

    width: 100%;
}

px-menu:is([data-type^="block-"], [data-type="menu-more"]) .block > .row:not(:has(> .description > *)) {
    grid-template-columns: minmax(0, 1fr) 0;
    gap: 0;
}

body.env-web px-menu[data-type="menu-more"] .block > .row:is(:has([data-btn-new-note]), :has([data-btn-duplicate-note])) {
    grid-template-columns: minmax(0, 1fr) 0;
    gap: 0;
}

px-menu:is([data-type^="block-"], [data-type="menu-more"]) .block > .row > .buttons {
    display: grid;
    position: relative;
    grid-template-columns: repeat(4, 32px);
    justify-content: space-between;
}

px-menu:is([data-type^="block-"], [data-type="menu-more"]) .block > .row > .description {
    display: flex;
    position: relative;
    align-items: center;

    width: 70px;
    height: 32px;

    user-select: none;
}

px-menu:is([data-type^="block-"], [data-type="menu-more"]) .block > .row > .description > div {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    left: 0;

    width: 18px;
    height: 20px;

    font-size: 10px;
    color: var(--font-sub);
    border-radius: 4px;
    background-color: oklch(from var(--foreground) l c h/0.1);
}

px-menu:is([data-type^="block-"], [data-type="menu-more"]) .block > .row > .description > span {
    position: absolute;
    right: 0;

    font-size: 10px;
    color: var(--font-sub);
}

px-menu:is([data-type^="block-"], [data-type="menu-more"]) .block > .description {
    display: flex;
    position: absolute;
    align-items: center;
    right: 0;
    top: 0;

    width: 70px;
    height: 100%;

    user-select: none;
}

px-menu:is([data-type^="block-"], [data-type="menu-more"]) .block > .description > div {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    left: 0;

    width: 18px;
    height: 20px;

    font-size: 10px;
    color: var(--font-sub);
    border-radius: 4px;
    background-color: oklch(from var(--foreground) l c h/0.1);
}

px-menu:is([data-type^="block-"], [data-type="menu-more"]) .block > .description > span {
    position: absolute;
    right: 0;

    font-size: 10px;
    color: var(--font-sub);
}

px-menu:is([data-type^="block-"], [data-type="menu-more"]) .block button > span {
    display: inline-block;

    width: 100%;

    text-align: left;
}

/* block-type */
px-menu[data-type="block-type"] [data-btn-list-type] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    padding-left: 0;
}

px-menu[data-type="block-type"] [data-btn-list-type] > span:first-child { text-align: center; }

/* block-formatting */
px-menu[data-type="block-formatting"] [data-btn-text-type="title"] > span {
    font-size: 24px;
    font-weight: 700;
}

px-menu[data-type="block-formatting"] [data-btn-text-type="heading"] > span {
    font-size: 20px;
    font-weight: 600;
}

px-menu[data-type="block-formatting"] [data-btn-text-type="subheading"] > span {
    font-size: 16px;
    font-weight: 600;
}

px-menu[data-type="block-formatting"] [data-btn-text-type="body"] > span {
    font-size: 14px;
    font-weight: 300;
}

px-menu[data-type="block-formatting"] [data-btn-text-quote] {
    grid-template-columns: 32px minmax(0, 1fr);
    padding-left: 0;
}

px-menu[data-type="block-formatting"] [data-btn-text-quote] > div {
    position: relative;
    margin: 0 15px;

    width: 2px;
    height: 20px;

    background-color: var(--font-sub);
}
#app {
    display: flex;
    position: fixed;
    z-index: 1;
    overflow: hidden;

    width: 100dvw;
    height: 100dvh;

    background-color: var(--background);
}
:root {
    --font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";

    --duration: 0.05s;
    --duration-short: 0.1s;
    --duration-medium: 0.25s;
    --duration-long: 0.5s;

    --backdrop-blur: blur(20px);
    --backdrop-blur-opacity: 0.7;
    --backdrop-blur-opacity-deep: 0.9;
}

:root.opaque {
    --backdrop-blur: blur(0px);
    --backdrop-blur-opacity: 1;
    --backdrop-blur-opacity-deep: 1;
}

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

    font-family: var(--font-family);
    line-height: 1.4;
    letter-spacing: -0.008em;
}

body {
    --sidebar-width: 250px;
    --note-list-width: 240px;
    
    background-color: var(--background);
}

.empty-wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    height: 100%;
    flex: 1;

    font-size: 14px;
    color: var(--font-sub);
}

span.loading-dots::before {
    content: ".";

    animation: steps(1, end) 3s infinite ani-loading-dots-1;
}

span.loading-dots::after {
    content: ".";

    animation: steps(1, end) 3s infinite ani-loading-dots-2;
}

@keyframes ani-loading-dots-1 {
    0% { font-size: 0; }
    33% { font-size: inherit; }
}

@keyframes ani-loading-dots-2 {
    0% { font-size: 0; }
    66% { font-size: inherit; }
}

div.loading-skeleton {
    position: relative;
    overflow: hidden;

    width: 32px;
    height: 32px;

    border-radius: 8px;
    background-color: var(--depth-9);
}

div.loading-skeleton::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background-image: linear-gradient(90deg, transparent, oklch(from var(--foreground) l c h/0.1), transparent);

    animation: linear 2s infinite ani-skeleton-sweep;
}

@keyframes ani-skeleton-sweep {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

body:not(:is(.os-ipados, .os-ios, .os-macos)) span.ctrl-or-cmd::before { content: "Ctrl"; }
body:is(.os-ipados, .os-ios, .os-macos) span.ctrl-or-cmd::before {
    content: "\e142";

    font-family: "Font Awesome 6 Pro";
}

body:not(:is(.os-ipados, .os-ios, .os-macos)) span.alt-or-option::before { content: "Alt"; }
body:is(.os-ipados, .os-ios, .os-macos) span.alt-or-option::before {
    content: "\e318";

    font-family: "Font Awesome 6 Pro";
}

body.env-web .show-on-app { display: none !important; }
body.env-electron .show-on-web { display: none !important; }

body::before {
    app-region: drag;

    content: "";
    
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 110;

    width: 100%;
    height: 20px;
}
/* common block */
nt-block {
    --indent: 26px;
    --dept: 0;
    --indent-depth: 0;

    display: block;
    position: relative;

    width: 100%;
    height: max-content;
}

/* indentation */
nt-block > .slot > * > .indent-wrap,
nt-block > .description-wrap > .indent-wrap {
    position: relative;

    max-width: calc(100% - 100px);
    width: calc(var(--depth) * var(--indent));
    flex-shrink: 0;
}

/* block background */
nt-block::before {
    content: "";

    display: block;
    position: absolute;
    left: -100dvw;
    top: 0;

    width: 300dvw;
    height: 100%;

    background-color: oklch(from var(--accent-5) l c h/0.1);
    opacity: 0;
    pointer-events: none;
}

/* block slot */
nt-block > .slot {
    position: relative;
    
    min-height: 22px;
}

nt-block > .slot:has(nt-link-block) { padding: 1px 0; }

/* description wrap */
nt-block > .description-wrap {
    display: flex;
    position: relative;

    width: 100%;
    height: max-content;

    user-select: none;
}

nt-block[data-block-level="root"] > .child-list nt-block > .description-wrap > .indent-wrap { width: calc(var(--depth) * var(--indent) + var(--indent)); }

nt-block:has(> .slot > :is(nt-table-block, nt-gallery-block, nt-code-block)):has(> .description-wrap > .wrap:not(:empty)) > .description-wrap {
    margin-bottom: 10px;
}

nt-block:has(> .slot > :is(nt-gallery-block, nt-media-block)) {
    margin-top: 5px;
    margin-bottom: 5px;
}

nt-block:has(> .slot > :is(nt-gallery-block, nt-media-block)):has(> .description-wrap > .wrap:not(:empty)) > .description-wrap {
    margin-top: 10px;
    margin-bottom: 10px;
}

nt-block > .description-wrap > .wrap:not(:empty) {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;

    width: 100%;
    height: max-content;
    flex: 1;

    font-size: 12px;
    color: var(--font-sub);
    border-radius: 8px;
    background-color: oklch(from var(--foreground) l c h/0.05);
}

nt-block > .description-wrap .row {
    display: flex;
    position: relative;
    padding: 0 10px;

    width: 100%;
    height: max-content;
}

nt-block > .description-wrap .row > .indent { width: calc(var(--depth) * 16px); }

nt-block > .description-wrap .row > p { min-width: 100px; }

nt-block > .description-wrap .media-trail {
    display: flex;
    position: relative;
    padding: 0 10px;
    overflow-y: hidden;
    scrollbar-width: none;

    width: 100%;
    height: 70px;

    mask-image: linear-gradient(90deg, transparent, white 10px, white calc(100% - 10px), transparent);
}

nt-block > .description-wrap .media-trail > .wrap {
    display: flex;
    position: relative;
    gap: 10px;

    width: max-content;
    height: 70px;
    flex-shrink: 0;
}

nt-block > .description-wrap .media-trail > .wrap > div {
    display: flex;
    position: relative;
    flex-direction: column;
    overflow: hidden;

    min-width: 70px;
    max-width: 70px;
    height: 70px;

    border-radius: 4px;
    background-color: oklch(from var(--foreground) l c h/0.1);
}

nt-block > .description-wrap .media-trail > .wrap > div > img {
    display: block;

    width: 100%;
    height: 100%;
    object-fit: cover;
}

nt-block > .description-wrap .media-trail > .wrap > div:has(img) { max-width: 140px; }

nt-block > .description-wrap .media-trail > .wrap > div > .icon {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    flex: 1;

    font-size: 18px;
}

nt-block > .description-wrap .media-trail > .wrap > div > .title {
    padding: 0 6px 4px;
    overflow: hidden;

    width: 100%;

    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* child list */
nt-block > .child-list { position: relative; }

/* control wrap */
nt-block > .control-wrap {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 0;

    user-select: none;
}

nt-block > .control-wrap > :is(.before-wrap, .after-wrap) {
    display: flex;
    position: absolute;
    align-items: center;
    top: 0;
    padding: 3px 20px;

    width: max-content;
    height: max-content;
}

nt-block > .control-wrap > .before-wrap { right: 100%; }
nt-block > .control-wrap > .after-wrap { left: 100%; }

nt-block > .control-wrap button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    min-width: unset;
    width: 22px;
    height: 22px;

    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}

nt-block > .control-wrap button > i { font-size: 12px; }

nt-block.control-target > .control-wrap button,
nt-block > .control-wrap:hover button { opacity: 1; }

nt-block > .control-wrap > .before-wrap > .child-indicator {
    position: absolute;
    right: 11px;

    width: 4px;
    height: 4px;

    border-radius: 2px;
    background-color: oklch(from var(--foreground) l c h/0.2);
    opacity: 0;
}

nt-block > .control-wrap.has-child-indicator > .before-wrap > .child-indicator { opacity: 1; }

nt-note:not(.with-description) nt-block > .control-wrap > .after-wrap > [data-btn-description] { display: none; }

/* block drag moving */
nt-block.drag-moving > * { opacity: 0.4; }

nt-note:not(.block-drag-moving) nt-block.drag-moving:has(> .slot > nt-gallery-block) > * {
    opacity: 1 !important;
}

nt-block::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;

    width: 100%;
    height: 2px;

    background-color: oklch(from var(--accent-5) l c h/0.2);
    opacity: 0;
}

nt-block.drag-moving-basis-before::before { opacity: 1; }
nt-block.drag-moving-basis-before::after {
    left: -100dvw;
    top: 0;

    width: 300dvw;

    opacity: 1 !important;
}

nt-block.drag-moving-basis-after::before { opacity: 1; }
nt-block.drag-moving-basis-after::after {
    left: -100dvw;
    bottom: 0;

    width: 300dvw;

    opacity: 1 !important;
}

nt-block.drag-moving-basis-inside::before { opacity: 1; }
nt-block.drag-moving-basis-inside > * > *::before { opacity: 1; }

nt-block.drag-moving-basis-top::after {
    left: -100dvw;
    top: 0;

    width: 300dvw;

    opacity: 1 !important;
}

nt-block.drag-moving-basis-bottom::after {
    left: -100dvw;
    bottom: 0;

    width: 300dvw;

    opacity: 1 !important;
}

/* rich-block: vertical spacing */
:is(nt-code-block, nt-divider-block, nt-progress-divider-block) {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* rich-block: hide the empty paired plain-block */
:is(nt-table-block, nt-gallery-block, nt-code-block, nt-media-block) + nt-plain-block:not(:has(> nt-input.filled)) {
    height: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* rich-block: selection border around the whole group (rich + plain + children) */
nt-block:has(> .slot > :is(nt-code-block, nt-media-block, nt-divider-block, nt-progress-divider-block)):focus-within {
    outline: 1px solid rgba(35, 131, 226, 0.6);
    border-radius: 8px;
}

nt-block:has(> .slot > :is(nt-divider-block, nt-progress-divider-block)):focus-within {
    border-radius: 0;
}

nt-block:has(> .slot > nt-code-block):focus-within {
    outline: none;
}

nt-block:has(> .slot > nt-code-block + nt-plain-block:focus-within) {
    outline: 1px solid rgba(35, 131, 226, 0.6);
    border-radius: 8px;
}

nt-block:has(> .slot > nt-table-block.block-selected) {
    outline: 1px solid rgba(35, 131, 226, 0.6);
    border-radius: 0;
}

nt-block:has(> .slot > nt-table-block.block-selected):has(> .description-wrap > .wrap:not(:empty)) {
    border-radius: 0 0 8px 8px;
}

nt-block:has(> .slot > nt-gallery-block.block-selected) {
    outline: 1px solid rgba(35, 131, 226, 0.6);
    border-radius: 12px;
}

/* rich-block: copy flash */
@keyframes copy-flash {
    0%   { background-color: rgba(35, 131, 226, 0.15); }
    100% { background-color: transparent; }
}

nt-block.copy-flash {
    animation: copy-flash 0.5s ease-out;
    border-radius: 8px;
}

/* block drag selection */
nt-block.block-drag-selected > .slot::before {
    content: "";

    display: block;
    position: absolute;
    left: -100dvw;
    top: 0;

    width: 300dvw;
    height: 100%;

    background-color: rgba(35, 131, 226, 0.14);
    pointer-events: none;
}

nt-note:not(.dragging) nt-block.block-drag-selected:has(> .slot > nt-gallery-block) > .slot::before {
    opacity: 0 !important;
}

/* callout block */
nt-block:has(> .slot > nt-callout-block) {
    --callout-inline-padding: 24px;
    --callout-trailing-padding: 14px;
    --callout-icon-size: 24px;
    --callout-column-gap: 12px;
    --callout-child-control-offset: calc(var(--callout-icon-size) + var(--callout-column-gap) + var(--callout-inline-padding));
}

nt-block:has(> .slot > nt-callout-block.block-selected) {
    outline: 1px solid rgba(35, 131, 226, 0.6);
    border-radius: 8px;
}

nt-callout-block {
    display: flex;
    position: relative;
    align-items: flex-start;
    justify-content: center;

    width: var(--callout-icon-size);
    min-width: var(--callout-icon-size);
    height: var(--callout-icon-size);
    margin-top: 1px;
}

nt-callout-block > .callout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    min-width: unset;
    width: var(--callout-icon-size);
    height: var(--callout-icon-size);

    border-radius: 6px;
}

nt-callout-block > .callout-icon:hover {
    background-color: oklch(from var(--foreground) l c h / 0.06);
}

nt-callout-block:focus,
nt-callout-block:focus-visible,
nt-callout-block > .callout-icon:focus,
nt-callout-block > .callout-icon:focus-visible,
nt-callout-block.block-selected > .callout-icon {
    outline: none;
    box-shadow: none;
}

nt-callout-block > .callout-icon > .media {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    font-size: 20px;
    line-height: 1;
}

nt-callout-block > .callout-icon > .media > span.emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

nt-block:has(> .slot > nt-callout-block) > .slot {
    display: grid;
    grid-template-columns: var(--callout-icon-size) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--callout-column-gap);
    padding: 12px var(--callout-trailing-padding) 12px var(--callout-inline-padding);

    border-radius: 8px;
    background-color: oklch(from var(--foreground) l c h / 0.05);
}

nt-block:has(> .slot > nt-callout-block) > .slot > nt-plain-block.callout-anchor {
    display: none;
}

nt-block:has(> .slot > nt-callout-block) > .slot > .callout-body {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

nt-block:has(> .slot > nt-callout-block) > .slot > .callout-body nt-block > .control-wrap > .before-wrap {
    transform: translateX(calc(-1 * var(--callout-child-control-offset)));
}

nt-block:has(> .slot > nt-callout-block) > .slot > .callout-body nt-block > .control-wrap > .after-wrap {
    transform: translateX(var(--callout-trailing-padding));
}

nt-block:has(> .slot > nt-callout-block):has(> .description-wrap > .wrap:not(:empty)) > .description-wrap {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* code block */
nt-code-block {
    --block-radius: 8px;
    --code-bg: #282c34;
    --code-border: oklch(from #282c34 calc(l + 0.08) c h);
    --code-fg: #abb2bf;
    --code-muted-fg: rgba(171, 178, 191, 0.82);
    --code-placeholder-fg: rgba(171, 178, 191, 0.46);
    --code-select-bg: oklch(from #282c34 calc(l + 0.04) c h);
    --code-select-border: oklch(from #282c34 calc(l + 0.12) c h);
    --code-select-hover: oklch(from #282c34 calc(l + 0.18) c h);
    --code-panel-bg: oklch(from #282c34 calc(l + 0.02) c h);
    --code-panel-border: oklch(from #282c34 calc(l + 0.12) c h);
    --code-field-bg: oklch(from #282c34 calc(l + 0.05) c h);
    --code-field-border: oklch(from #282c34 calc(l + 0.16) c h);
    --code-button-bg: oklch(from #282c34 calc(l + 0.08) c h);
    --code-button-hover: oklch(from #282c34 calc(l + 0.14) c h);
    --code-button-active: oklch(from #282c34 calc(l + 0.18) c h);
    --code-checkbox-bg: oklch(from #282c34 calc(l + 0.08) c h);
    --code-checkbox-border: oklch(from #282c34 calc(l + 0.18) c h);
    --code-focus-ring: rgba(35, 131, 226, 0.24);
    --code-accent: #2383e2;
    --code-close-hover: rgba(255, 255, 255, 0.08);

    display: grid;
    position: relative;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);

    min-height: 22px;
    width: 100%;
    height: max-content;

    user-select: none;
}

/* light theme overrides */
nt-code-block.light {
    --code-bg: var(--depth-10, #f5f5f5);
    --code-border: var(--depth-9, #e0e0e0);
    --code-fg: var(--depth-3, #444);
    --code-muted-fg: rgba(68, 68, 68, 0.78);
    --code-placeholder-fg: rgba(68, 68, 68, 0.44);
    --code-select-bg: var(--background, #fff);
    --code-select-border: var(--depth-8, #ccc);
    --code-select-hover: var(--depth-7, #aaa);
    --code-panel-bg: var(--depth-10, #f5f5f5);
    --code-panel-border: var(--depth-9, #e0e0e0);
    --code-field-bg: var(--background, #fff);
    --code-field-border: var(--depth-8, #ccc);
    --code-button-bg: var(--background, #fff);
    --code-button-hover: var(--depth-10, #f5f5f5);
    --code-button-active: var(--depth-9, #e0e0e0);
    --code-checkbox-bg: var(--background, #fff);
    --code-checkbox-border: var(--depth-8, #ccc);
    --code-focus-ring: rgba(35, 131, 226, 0.18);
    --code-close-hover: rgba(15, 23, 42, 0.06);
}

nt-code-block .code-inner {
    display: flex;
    position: relative;
    flex-direction: column;
    overflow: hidden;

    width: 100%;
    height: max-content;

    border-radius: var(--block-radius);
    background-color: var(--code-bg);
}

/* toolbar */
nt-code-block .code-toolbar {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;

    width: 100%;
    height: 36px;

    border-bottom: 1px solid var(--code-border);
}

nt-code-block .lang-select {
    display: flex;
    position: relative;
    align-items: center;
    padding: 0 8px;

    height: 26px;

    font-size: 12px;
    color: var(--code-fg);
    border: 1px solid var(--code-select-border);
    border-radius: 4px;
    background-color: var(--code-select-bg);
    outline: none;
    cursor: pointer;

    appearance: auto;
}

nt-code-block .lang-select:hover {
    border-color: var(--code-select-hover);
}

nt-code-block .lang-select:focus {
    border-color: #528bff;
}

nt-code-block .btn-copy {
    --button-radius: 4px;

    display: flex;
    align-items: center;
    padding: 0 8px !important;
    gap: 4px;

    height: 26px;

    font-size: 12px;
    color: var(--code-fg);
    opacity: 0.7;

    transition: opacity var(--duration, 0.15s) ease-in-out;
}

nt-code-block .btn-copy:hover {
    opacity: 1;
}

nt-code-block .btn-copy > i {
    font-size: 12px;
}

nt-code-block .btn-copy > span {
    white-space: nowrap;
}

/* editor area */
nt-code-block .code-editor {
    display: flex;
    position: relative;
    flex-direction: column;

    width: 100%;
    min-height: 60px;
}

nt-code-block .code-editor .cm-editor {
    width: 100%;
    height: 100%;
    outline: none;
}

nt-code-block .code-editor .cm-editor.cm-focused {
    outline: none;
}

nt-code-block .code-editor .cm-scroller {
    font-family: "SF Mono", "Fira Code", "Fira Mono", "Menlo", "Consolas", monospace;
    font-size: 13px;
    line-height: 1.5;
}

nt-code-block .code-editor .cm-gutters {
    border-right: none;
}

nt-code-block .code-editor .cm-content {
    padding: 8px 0;
}

nt-code-block .code-editor .cm-line {
    padding: 0 12px 0 4px;
}

nt-code-block .code-editor .cm-panels {
    background-color: transparent;
}

nt-code-block .code-editor .cm-panel.cm-search {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 48px 12px 12px;

    background-color: var(--code-panel-bg);
}

nt-code-block .code-editor .cm-panel.cm-search > * {
    min-width: 0;
}

nt-code-block .code-editor .cm-panel.cm-search::before {
    content: "";
    order: 2;
    flex-basis: 100%;
    width: 100%;
    height: 0;
}

nt-code-block .code-editor .cm-panel.cm-search br {
    order: 4;
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
}

nt-code-block .code-editor .cm-panel.cm-search :is(.cm-textfield, .cm-button, label, [name="close"]) {
    margin: 0;
    font-family: inherit;
}

nt-code-block .code-editor .cm-panel.cm-search input[name="search"] {
    order: 3;
    flex: 0 1 250px;
}

nt-code-block .code-editor .cm-panel.cm-search :is(button[name="next"], button[name="prev"], button[name="select"]) {
    order: 3;
}

nt-code-block .code-editor .cm-panel.cm-search input[name="replace"] {
    order: 5;
    flex: 0 1 250px;
}

nt-code-block .code-editor .cm-panel.cm-search :is(button[name="replace"], button[name="replaceAll"]) {
    order: 5;
}

nt-code-block .code-editor .cm-panel.cm-search .cm-textfield {
    box-sizing: border-box;
    width: 260px;
    max-width: 100%;
    height: 28px;
    padding: 0 12px;

    color: var(--code-fg);
    font-size: 12px;
    line-height: 28px;

    border: 1px solid var(--code-field-border);
    border-radius: 4px;
    background: var(--code-field-bg);
    box-shadow: none;
    outline: none;

    transition:
        border-color var(--duration, 0.15s) ease,
        box-shadow var(--duration, 0.15s) ease,
        background-color var(--duration, 0.15s) ease;
}

nt-code-block .code-editor .cm-panel.cm-search .cm-textfield::placeholder {
    color: var(--code-placeholder-fg);
}

nt-code-block .code-editor .cm-panel.cm-search .cm-textfield:hover {
    border-color: var(--code-select-hover);
}

nt-code-block .code-editor .cm-panel.cm-search .cm-textfield:focus {
    border-color: var(--code-accent);
    box-shadow: 0 0 0 3px var(--code-focus-ring);
}

nt-code-block .code-editor .cm-panel.cm-search .cm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 8px;

    color: var(--code-fg);
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;

    border: 1px solid var(--code-field-border);
    border-radius: 8px;
    background: var(--code-button-bg);
    background-image: none;
    box-shadow: none;
    cursor: pointer;

    transition:
        border-color var(--duration, 0.15s) ease,
        background-color var(--duration, 0.15s) ease,
        color var(--duration, 0.15s) ease;
}

nt-code-block .code-editor .cm-panel.cm-search .cm-button:hover {
    border-color: var(--code-select-hover);
    background: var(--code-button-hover);
}

nt-code-block .code-editor .cm-panel.cm-search .cm-button:active {
    background: var(--code-button-active);
}

nt-code-block .code-editor .cm-panel.cm-search label {
    display: inline-flex;
    order: 1;
    align-items: center;
    gap: 6px;
    width: max-content;

    color: var(--code-muted-fg);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

nt-code-block .code-editor .cm-panel.cm-search input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    border: 1px solid var(--code-checkbox-border);
    border-radius: 6px;
    background-color: var(--code-checkbox-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 8px;
    box-shadow: none;
    outline: none;
    cursor: pointer;

    transition:
        border-color var(--duration, 0.15s) ease,
        background-color var(--duration, 0.15s) ease,
        box-shadow var(--duration, 0.15s) ease;
}

nt-code-block .code-editor .cm-panel.cm-search input[type="checkbox"]:hover {
    border-color: var(--code-select-hover);
}

nt-code-block .code-editor .cm-panel.cm-search input[type="checkbox"]:checked {
    border-color: var(--code-accent);
    background-color: var(--code-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

nt-code-block .code-editor .cm-panel.cm-search input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px var(--code-focus-ring);
}

nt-code-block .code-editor .cm-panel.cm-search button[name="close"] {
    display: inline-flex;
    order: 1;
    margin-top: 5px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;

    color: var(--code-muted-fg);
    font-size: 20px;
    line-height: 1;

    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

nt-code-block .code-editor .cm-panel.cm-search button[name="close"]:hover {
    color: var(--code-fg);
    background: var(--code-close-hover);
}

nt-code-block .code-editor .cm-panel.cm-search button[name="close"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--code-focus-ring);
}


/* light theme: override CodeMirror default gutter color */
nt-code-block.light .code-editor .cm-gutters {
    background-color: var(--code-bg);
}

nt-code-block.light .code-editor .cm-activeLineGutter {
    background-color: oklch(from var(--code-bg) calc(l - 0.04) c h);
}

nt-code-block.light .code-editor .cm-selectionBackground,
nt-code-block.light .code-editor.cm-focused .cm-selectionBackground {
    background-color: rgba(35, 131, 226, 0.2) !important;
}

/* divider block */
:is(nt-divider-block, nt-progress-divider-block) {
    --block-button-size: 22px;
    --block-button-gap: 4px;
    --block-padding: 3px;

    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: visible;
    z-index: 0;

    width: 100%;
    height: 22px;
}

:is(nt-divider-block, nt-progress-divider-block)::after {
    content: "";

    display: block;
    position: relative;

    width: 100%;
    height: 2px;

    background-color: oklch(from var(--foreground) l c h/0.075);
    pointer-events: none;
}

:is(nt-divider-block, nt-progress-divider-block) + nt-plain-block {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    align-items: center;
    padding: 0;

    width: fit-content;
    max-width: 50%;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    background-color: var(--background);
}

:is(nt-divider-block, nt-progress-divider-block) + nt-plain-block::before {
    display: none;
}

:is(nt-divider-block, nt-progress-divider-block) + nt-plain-block > .indent-wrap {
    min-height: 0;
}

:is(nt-divider-block, nt-progress-divider-block) + nt-plain-block > nt-input {
    display: inline-flex;
    width: fit-content;
    min-height: 100%;
    min-width: 1px;
    max-width: 100%;
    flex: 0 1 fit-content;
    overflow: hidden;
    pointer-events: auto;
}

:is(nt-divider-block, nt-progress-divider-block) + nt-plain-block > nt-input > .placeholder {
    display: none;
}

:is(nt-divider-block, nt-progress-divider-block) + nt-plain-block > nt-input > .input {
    display: inline-block;
    padding-right: 0;
    overflow: hidden;

    width: fit-content;
    min-width: 1px;
    max-width: 100%;

    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: transparent;
}

:is(nt-divider-block, nt-progress-divider-block) + nt-plain-block > nt-input.filled > .input {
    padding-right: 10px;
}

:is(nt-divider-block, nt-progress-divider-block) + nt-plain-block:not(:focus-within):not(:has(> nt-input.filled)) {
    opacity: 0;
}

nt-block > .child-list > nt-block:not(:has(> .child-list > nt-block)) > * > :is(nt-divider-block, nt-progress-divider-block) > .indent-wrap { width: calc(var(--depth) * var(--indent) + var(--block-button-size) + var(--block-button-gap) - var(--indent)); }

nt-gallery-block {
    --gallery-gap: 16px;
    --gallery-frame-padding: 18px;
    --gallery-radius: 12px;
    --gallery-item-radius: 10px;
    --gallery-selection-stroke: 2px;
    --gallery-frame-background: rgb(120 120 120 / 0.045);
    --gallery-item-background: oklch(from var(--foreground) l c h / 0.07);
    --gallery-item-border: oklch(from var(--foreground) l c h / 0.08);
    --gallery-selected-color: #2383E2;
    --gallery-drop-target-fill: rgb(35 131 226 / 0.14);
    --gallery-handle-color: oklch(from var(--foreground) l c h / 0.34);
    --gallery-handle-hover: #2383E2;
    --gallery-side-handle-offset: 5px;
    --gallery-side-handle-width: 3px;
    --gallery-side-handle-hit-width: 14px;
    --gallery-side-handle-height: 50px;
    --gallery-drag-ghost-shadow:
        0 18px 34px oklch(from var(--foreground) l c h / 0.16),
        0 4px 12px oklch(from var(--foreground) l c h / 0.08);

    display: grid;
    position: relative;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);

    width: 100%;
    min-height: 22px;
}

nt-gallery-block > .indent-wrap {
    width: calc(var(--depth) * var(--indent));
    flex-shrink: 0;
}

nt-gallery-block > .gallery-frame {
    position: relative;
    overflow: visible;

    width: 100%;
    min-width: 0;
}

nt-gallery-block > .gallery-frame > .gallery-inner {
    display: flex;
    position: relative;
    margin: 0;
    padding: var(--gallery-frame-padding);
    overflow: visible;

    width: min(100%, var(--gallery-width, 100%));

    border-radius: calc(var(--gallery-radius) + 2px);
    background-color: var(--gallery-frame-background);
}

.slot:has(> nt-plain-block[data-text-align="center"]) > nt-gallery-block > .gallery-frame > .gallery-inner {
    margin-left: auto;
    margin-right: auto;
}

.slot:has(> nt-plain-block[data-text-align="right"]) > nt-gallery-block > .gallery-frame > .gallery-inner {
    margin-left: auto;
    margin-right: 0;
}

nt-gallery-block .gallery-grid {
    display: grid;
    position: relative;
    grid-template-columns: repeat(var(--gallery-column-count, 4), minmax(0, 1fr));
    gap: var(--gallery-gap);

    width: 100%;
    min-width: 0;
}

nt-gallery-block .gallery-item {
    display: flex;
    position: relative;
    z-index: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    border: 1px solid var(--gallery-item-border);
    border-radius: var(--gallery-item-radius);
    background-color: var(--gallery-item-background);
    color: var(--font-sub);
    box-shadow: none;
    isolation: isolate;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
    transition:
        transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 120ms ease,
        border-color 120ms ease,
        background-color 120ms ease;
}

nt-gallery-block .gallery-item::after {
    content: none;
}

nt-gallery-block .gallery-item:hover {
    border-color: oklch(from var(--foreground) l c h / 0.14);
}

nt-gallery-block .gallery-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background-color: var(--gallery-drop-target-fill);
    transition: opacity 120ms ease;
}

nt-gallery-block .gallery-item:is(:hover, :focus-visible, :active) {
    box-shadow: none;
}

nt-gallery-block .gallery-item:is(:focus, :focus-visible) {
    outline: none;
}

nt-gallery-block .gallery-item.selected {
    border-color: transparent;
    box-shadow: 0 0 0 var(--gallery-selection-stroke) var(--gallery-selected-color);
}

nt-gallery-block button.gallery-item.selected:not(:disabled),
nt-gallery-block button.gallery-item.selected:not(:disabled):is(:hover, :focus, :focus-visible, :active) {
    border-color: transparent;
    box-shadow: 0 0 0 var(--gallery-selection-stroke) var(--gallery-selected-color) !important;
}

nt-gallery-block.dragging-items .gallery-item.drag-source {
    opacity: 0;
    pointer-events: none;
    --gallery-item-scale: 0.98;
}

nt-gallery-block.dragging-items .gallery-item.preview-shifted {
    z-index: 2;
}

nt-gallery-block.dragging-items .gallery-item.drop-target,
nt-gallery-block.drop-upload-active .gallery-item.drop-target {
    border-color: transparent;
    box-shadow: 0 0 0 var(--gallery-selection-stroke) var(--gallery-selected-color);
}

nt-gallery-block.dragging-items .gallery-item.drop-target::before {
    opacity: 1 !important;
}

nt-gallery-block.drop-upload-active .gallery-item.drop-target::before {
    opacity: 0 !important;
}

nt-gallery-block .gallery-item > img {
    display: block;
    position: relative;
    z-index: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    pointer-events: none;
}

nt-gallery-block .gallery-item > .placeholder,
nt-gallery-block .gallery-item > .spinner {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    inset: 0;
    z-index: 2;

    font-size: 16px;
    color: oklch(from var(--foreground) l c h / 0.38);
    pointer-events: none;
}

nt-gallery-block .gallery-item > .placeholder > i,
nt-gallery-block .gallery-item > .spinner > i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
}

nt-gallery-block .gallery-item > .spinner {
    opacity: 0;
    font-size: 22px;
}

nt-gallery-block .gallery-item.filled > .placeholder {
    display: none;
}

nt-gallery-block .gallery-item.processing > img,
nt-gallery-block .gallery-item.processing > .placeholder {
    opacity: 0;
}

nt-gallery-block .gallery-item.processing > .spinner {
    opacity: 1;
}

nt-gallery-block .gallery-grow-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 6;
    opacity: 0;

    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: nwse-resize !important;
    touch-action: none;
    box-shadow: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transform: translate(0, 0);
    transition: opacity 120ms ease, transform 120ms ease;
}

nt-gallery-block .gallery-grow-handle::after {
    content: none;
}

nt-gallery-block .gallery-grow-handle::before {
    content: "";
    display: block;
    position: relative;

    width: 8px;
    height: 8px;

    border-radius: 999px;
    background-color: oklch(from var(--depth-8) l c h / 0.82);
    outline: solid 1px oklch(from var(--depth-3) l c h / 0.82);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.96);
}

nt-gallery-block:is(:hover, .resizing-grid) .gallery-grow-handle {
    opacity: 1;
}

nt-gallery-block .gallery-grow-handle:is(:hover, :focus-visible) {
    transform: scale(1.05);
}

nt-gallery-block .gallery-side-handle {
    position: absolute;
    top: 50%;
    z-index: 6;
    opacity: 0;

    width: var(--gallery-side-handle-width);
    min-width: var(--gallery-side-handle-width);
    height: min(var(--gallery-side-handle-height), 30%);
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: ew-resize !important;
    touch-action: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateY(-50%);
    transition: opacity 120ms ease;
}

nt-gallery-block .gallery-side-handle:is(:hover, :focus-visible, :active) {
    background: transparent;
    box-shadow: none;
}

nt-gallery-block .gallery-side-handle.left {
    left: var(--gallery-side-handle-offset);
    transform: translateY(-50%);
}

nt-gallery-block .gallery-side-handle.right {
    right: var(--gallery-side-handle-offset);
    transform: translateY(-50%);
}

nt-gallery-block .gallery-side-handle::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;

    width: var(--gallery-side-handle-hit-width);
    height: 100%;

    background: transparent;
    transform: translate(-50%, -50%);
}

nt-gallery-block .gallery-side-handle::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;

    width: var(--gallery-side-handle-width);
    height: 100%;

    border-radius: 999px;
    background-color: var(--gallery-handle-color);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.96);
    transform: translate(-50%, -50%);
    transition: background-color 120ms ease;
}

nt-gallery-block .gallery-side-handle.left::before {
    left: 50%;
}

nt-gallery-block .gallery-side-handle.right::before {
    left: 50%;
}

nt-gallery-block .gallery-side-handle:is(:hover, :focus-visible)::before,
nt-gallery-block.resizing-width .gallery-side-handle::before {
    background-color: var(--gallery-handle-hover);
}

nt-gallery-block:is(:hover, .resizing-width) .gallery-side-handle {
    opacity: 1;
}

nt-gallery-block .gallery-drag-ghost {
    position: absolute;
    left: var(--drag-ghost-left, 0px);
    top: var(--drag-ghost-top, 0px);
    z-index: 6;
    opacity: 0;
    pointer-events: none;

    width: var(--drag-ghost-width, 0px);
    height: var(--drag-ghost-height, 0px);

    transform: translate(-50%, -50%) scale(0.98);
    transition: opacity 120ms ease;
}

nt-gallery-block .gallery-drag-ghost.visible {
    opacity: 1;
}

nt-gallery-block .gallery-drag-ghost-shell {
    overflow: hidden;

    width: 100%;
    height: 100%;

    border-radius: var(--gallery-item-radius);
    box-shadow: var(--gallery-drag-ghost-shadow);
    background-color: var(--gallery-item-background);
}

nt-gallery-block .gallery-drag-ghost-shell > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

nt-gallery-block .gallery-drag-ghost-shell > .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    font-size: 24px;
    color: oklch(from var(--foreground) l c h / 0.38);
}

nt-gallery-block input {
    display: none;
}

nt-gallery-block button.gallery-item:not(:disabled),
nt-gallery-block button.gallery-grow-handle:not(:disabled),
nt-gallery-block button.gallery-side-handle:not(:disabled) {
    box-shadow: none !important;
}

nt-gallery-block button.gallery-item:not(:disabled)::after,
nt-gallery-block button.gallery-grow-handle:not(:disabled)::after,
nt-gallery-block button.gallery-side-handle:not(:disabled)::after {
    content: none !important;
    opacity: 0 !important;
}

nt-gallery-block button.gallery-item:not(:disabled):is(:hover, :focus, :focus-visible, :active),
nt-gallery-block button.gallery-grow-handle:not(:disabled):is(:hover, :focus, :focus-visible, :active),
nt-gallery-block button.gallery-side-handle:not(:disabled):is(:hover, :focus, :focus-visible, :active) {
    box-shadow: none !important;
}

nt-gallery-block button.gallery-item:not(:disabled),
nt-gallery-block button.gallery-item:not(:disabled):is(:hover, :focus, :focus-visible, :active) {
    transform:
        translate(var(--gallery-item-translate-x, 0px), var(--gallery-item-translate-y, 0px))
        scale(var(--gallery-item-scale, 1)) !important;
}

nt-gallery-block button.gallery-item:not(:disabled):is(:hover, :focus, :focus-visible, :active)::after,
nt-gallery-block button.gallery-grow-handle:not(:disabled):is(:hover, :focus, :focus-visible, :active)::after,
nt-gallery-block button.gallery-side-handle:not(:disabled):is(:hover, :focus, :focus-visible, :active)::after {
    content: none !important;
    opacity: 0 !important;
}

nt-gallery-block.block-selected .gallery-item,
nt-gallery-block.block-selected .gallery-item:is(:hover, :focus, :focus-visible, :active) {
    opacity: 1;
    filter: none;
    border-color: var(--gallery-item-border);
    box-shadow: none !important;
}

nt-gallery-block.block-selected .gallery-item::before,
nt-gallery-block.block-selected .gallery-item::after {
    opacity: 0 !important;
}

nt-gallery-block.file-picker-open .gallery-item,
nt-gallery-block.file-picker-open .gallery-item:is(:hover, :focus, :focus-visible, :active) {
    opacity: 1;
    filter: none;
}

nt-gallery-block:not(.dragging-items) .gallery-item:not(.drag-source),
nt-gallery-block:not(.dragging-items) .gallery-item:not(.drag-source):is(:hover, :focus, :focus-visible, :active),
nt-gallery-block:not(.dragging-items) .gallery-item:not(.processing) > img,
nt-gallery-block:not(.dragging-items) .gallery-item:not(.processing) > .placeholder {
    opacity: 1 !important;
    filter: none !important;
}

/* input wrap */
nt-input {
    display: flex;
    position: relative;

    min-height: 22px;
    width: 100%;
    height: max-content;

    cursor: text;
}

/* placeholder */
nt-input > .placeholder {
    grid-area: placeholder;
    
    position: absolute;
    z-index: 0;

    width: 100%;
    height: max-content;

    font-size: var(--block-text-size);
    font-weight: var(--block-text-weight);
    color: var(--font);
    overflow-wrap: break-word;
    opacity: 0.3;
    user-select: none;
    pointer-events: none;
}

nt-input.filled > .placeholder { display: none; }

/* input */
nt-input > .input {
    grid-area: input;

    position: relative;
    z-index: 1;

    min-width: 1px;
    width: 100%;
    height: max-content;

    font-size: var(--block-text-size);
    font-weight: var(--block-text-weight);
    color: var(--block-text-color);
    outline: unset;
    overflow-wrap: break-word;
    user-select: text;
}

/* explicit range background for visually empty blocks */
nt-input.range-empty-selected::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
    min-height: 22px;

    border-radius: 2px;
    background-color: rgba(35, 131, 226, 0.14);
    pointer-events: none;
}

/* link block */
nt-link-block {
    --block-text-size: 14px;
    --block-text-weight: 700;
    --block-text-color: var(--font);

    --block-button-size: 20px;
    --block-button-gap: 4px;
    --block-padding: 2px;

    display: grid;
    position: relative;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    padding: 6px 4px;
    gap: 6px;
    
    min-height: 22px;
    height: max-content;
}

nt-link-block::before {
    content: "";
    
    display: block;
    position: absolute;
    left: -6px;
    top: 0;
    box-sizing: border-box;

    width: calc(100% + 12px);
    height: 100%;

    border-radius: 8px;
    background-color: oklch(from var(--foreground) l c h/0.02);
}

nt-link-block::after {
    display: block;
    position: absolute;
    left: -6px;
    top: 0;
    box-sizing: border-box;
    z-index: 1;

    width: calc(100% + 12px);
    height: 100%;

    border-radius: 8px;
    background-color: var(--foreground);
    opacity: 0;
    pointer-events: none;

    transition: opacity var(--duration) linear;
}
nt-link-block:is(:hover, :focus-visible)::after { opacity: 0.1; }
nt-link-block:active::after { opacity: 0.2; }

body.ctrl-or-cmd-pressed nt-link-block { cursor: pointer; }
body.ctrl-or-cmd-pressed nt-link-block [contenteditable] { cursor: pointer; }
body.ctrl-or-cmd-pressed nt-link-block::after { content: ""; }

nt-link-block .media {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    font-size: 14px;
    color: var(--font-sub);
    text-align: center;
}

nt-link-block .media > img {
    display: block;
    position: relative;

    width: 16px;
    height: 16px;
    object-fit: contain;
}

nt-link-block > button {
    --button-label: var(--font-sub);

    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -4px;
    padding: 0 6px !important;
    gap: 3px;

    min-width: unset;
    height: 22px;
    flex-shrink: 0;

    border-radius: 4px;
}
body.ctrl-or-cmd-pressed nt-link-block > button { pointer-events: none; }

nt-link-block > button[data-btn-edit-link] {
    margin-right: 0;
    margin-left: -4px;
    padding: 0 !important;

    width: 22px;
    height: 22px;
}

nt-link-block .placeholder { line-height: 22px; }
nt-link-block .input { line-height: 22px; }
/* media block */
nt-media-block {
    --block-button-size: 22px;
    --block-button-gap: 4px;
    --block-radius: 8px;

    --block-background: oklch(from var(--foreground) l c h/0.075);
    --media-side-handle-offset: 5px;
    --media-side-handle-width: 3px;
    --media-side-handle-hit-width: 14px;
    --media-side-handle-height: 50px;
    --media-side-handle-color: oklch(from var(--foreground) l c h / 0.34);
    --media-side-handle-hover: #2383E2;

    display: grid;
    position: relative;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);

    min-height: 22px;
    width: 100%;
    height: max-content;

    user-select: none;
}

nt-media-block .media-inner {
    display: flex;
    position: relative;

    width: 100%;
    height: max-content;
}

nt-media-block .media-wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    max-width: 100%;
    max-height: inherit;
    width: fit-content;
}

nt-media-block input { display: none; }

/* resize-wrap */
nt-media-block .resize-wrap {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    right: 0;
    bottom: 0;
    padding: 8px;
    z-index: 1;

    opacity: 0;
    cursor: nwse-resize;
    touch-action: none;

    transition: opacity var(--duration) ease-in-out;
}

nt-media-block .resize-wrap::before {
    content: "";

    display: block;
    position: relative;

    width: 8px;
    height: 8px;

    outline: solid 1px oklch(from var(--depth-3) l c h/0.8);
    border-radius: 4px;
    background-color: oklch(from var(--depth-8) l c h/0.8);
}

nt-media-block:hover .resize-wrap { opacity: 1; }
nt-media-block .resize-wrap:active { cursor: grabbing; }

nt-media-block .media-side-handle {
    position: absolute;
    top: 50%;
    z-index: 2;
    opacity: 0;

    width: var(--media-side-handle-width);
    min-width: var(--media-side-handle-width);
    height: min(var(--media-side-handle-height), 30%);
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: ew-resize !important;
    touch-action: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateY(-50%);
    transition: opacity var(--duration) ease-in-out;
}

nt-media-block .media-side-handle::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;

    width: var(--media-side-handle-hit-width);
    height: 100%;

    background: transparent;
    transform: translate(-50%, -50%);
}

nt-media-block .media-side-handle::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;

    width: var(--media-side-handle-width);
    height: 100%;

    border-radius: 999px;
    background-color: var(--media-side-handle-color);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.96);
    transform: translate(-50%, -50%);
    transition: background-color var(--duration) ease-in-out;
}

nt-media-block .media-side-handle.left {
    left: var(--media-side-handle-offset);
}

nt-media-block .media-side-handle.right {
    right: var(--media-side-handle-offset);
}

nt-media-block .media-side-handle:is(:hover, :focus-visible, :active) {
    background: transparent;
    box-shadow: none;
}

nt-media-block:is([data-type="image"], [data-type="video"])[data-media-id]:is(:hover, .resizing-side) .media-side-handle {
    opacity: 1;
}

nt-media-block:is([data-type="image"], [data-type="video"])[data-media-id] .media-side-handle:is(:hover, :focus-visible)::before,
nt-media-block.resizing-side .media-side-handle::before {
    background-color: var(--media-side-handle-hover);
}

nt-media-block button.media-side-handle:not(:disabled) {
    transform: translateY(-50%) !important;
}

nt-media-block button.media-side-handle:not(:disabled)::after {
    background: transparent !important;
}

nt-media-block button.media-side-handle:not(:disabled):is(:hover, :focus, :focus-visible, :active) {
    transform: translateY(-50%) !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

nt-media-block button.media-side-handle:not(:disabled):is(:hover, :focus, :focus-visible, :active)::after {
    background: transparent !important;
    opacity: 1;
}

nt-media-block [data-media-name] {
    overflow: hidden;

    width: 100%;

    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--font-content);
}

nt-media-block [data-media-description] {
    overflow: hidden;

    width: 100%;

    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--font-sub);
}

/* image wrap */
nt-media-block .image-wrap {
    display: flex;
    overflow: hidden;

    border-radius: var(--block-radius);
}

nt-media-block .image-wrap > img {
    display: block;

    min-width: 70px;
    min-height: 70px;
    max-width: 100%;
    /* max-height: 600px; */
}

/* audio wrap */
nt-media-block .audio-wrap {
    overflow: hidden;

    width: 100%;

    border-radius: var(--block-radius);
}

nt-media-block .audio-wrap > audio {
    display: block;

    width: 100%;
}

/* video wrap */
nt-media-block .video-wrap {
    overflow: hidden;

    border-radius: var(--block-radius);
}

nt-media-block .video-wrap > video {
    display: block;

    min-width: 70px;
    min-height: 70px;
    max-width: 100%;
    max-height: 600px;
    object-fit: contain;

    background-color: var(--black);
}

/* generic wrap */
nt-media-block .generic-wrap {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    padding: 0 8px;
    gap: 8px;
    overflow: hidden;

    width: 100%;
    height: 50px;

    border-radius: var(--block-radius);
    background-color: var(--block-background);
}

nt-media-block .generic-wrap > .media {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    font-size: 16px;
    color: var(--font-sub);
}

nt-media-block .generic-wrap > .text {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, auto));
    padding-right: 26px;

    width: 100%;
}

nt-media-block .generic-wrap [data-btn-download-media] {
    --button-radius: 0px;

    display: flex;
    position: absolute;
    align-items: center;
    justify-content: end;
    left: 0;
    top: 0;
    padding: 0 8px;

    width: 100%;
    height: 100%;
}

nt-media-block .generic-wrap [data-btn-download-media] > i {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
}

/* upload button */
nt-media-block [data-btn-media-upload] {
    --button-radius: var(--block-radius);
    --button-label: var(--font-content);
    --button-background: var(--block-background);

    display: flex;
    align-items: center;
    padding: 0 8px !important;
    gap: 8px;

    width: 100%;
    height: 50px;
}

nt-media-block [data-btn-media-upload] > i {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
    flex-shrink: 0;

    font-size: 16px;
}

nt-media-block [data-btn-media-upload] > span {
    display: block;
    position: relative;
    overflow: hidden;

    width: 100%;

    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* progress wrap */
nt-media-block .progress-wrap {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    padding: 0 8px;

    width: 100%;
    height: 50px;

    border-radius: var(--block-radius);
    background-color: var(--block-background);
}

nt-media-block .progress-wrap > .media {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    font-size: 16px;
    color: var(--font-sub);
}

nt-media-block .progress-wrap > .text {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, auto));
    padding-left: 8px;

    width: 100%;
}

nt-media-block .progress-wrap > .control {
    display: flex;
    position: relative;
    align-items: center;
    padding-left: 8px;
}

nt-media-block .progress-wrap > .control:not(:has(> *)) { display: none; }

/* handle conditions */
nt-media-block[data-type="image"] :is(.audio-wrap, .video-wrap, .generic-wrap, [data-btn-media-upload]:not([data-btn-media-upload="image"])) { display: none; }
nt-media-block[data-type="audio"] :is(.image-wrap, .video-wrap, .generic-wrap, [data-btn-media-upload]:not([data-btn-media-upload="audio"])) { display: none; }
nt-media-block[data-type="video"] :is(.image-wrap, .audio-wrap, .generic-wrap, [data-btn-media-upload]:not([data-btn-media-upload="video"])) { display: none; }
nt-media-block[data-type="generic"] :is(.image-wrap, .audio-wrap, .video-wrap, [data-btn-media-upload]:not([data-btn-media-upload="generic"])) { display: none; }

nt-media-block:is([data-type="audio"], [data-type="generic"]) .resize-wrap { display: none; }

nt-media-block:not([data-media-id]) :is(.image-wrap, .audio-wrap, .video-wrap, .generic-wrap, .progress-wrap, .resize-wrap, .media-side-handle) { display: none; }
nt-media-block:not([data-media-id]) .media-wrap { width: 100%; }

nt-media-block[data-media-id] :is([data-btn-media-upload], .progress-wrap) { display: none; }
nt-media-block[data-media-id]:is([data-type="audio"], [data-type="generic"]) .media-wrap { width: 100%; }
nt-media-block[data-media-id]:not(:is([data-type="image"], [data-type="video"])) .media-side-handle { display: none; }

nt-media-block.processing :is(.image-wrap, .audio-wrap, .video-wrap, .generic-wrap, [data-btn-media-upload], .resize-wrap, .media-side-handle) { display: none; }
nt-media-block.processing .progress-wrap { display: grid; }

/* media alignment follows paired plain-block text-align */
.slot:has(> nt-plain-block[data-text-align="center"]) > nt-media-block .media-inner {
    justify-content: center;
}

.slot:has(> nt-plain-block[data-text-align="right"]) > nt-media-block .media-inner {
    justify-content: flex-end;
}

/* note area */
nt-note {
    --padding-left: 0px;
    --padding-right: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;

    container: note-container / inline-size;

    display: block;
    position: relative;
    padding: 0 0 50px 0;
    overflow-x: hidden;

    width: 100%;
    height: 100%;

    transition: padding var(--duration) ease-in-out;
}

nt-note > .note-inner {
    display: block;
    position: relative;

    width: 100%;
    height: max-content;
}

nt-note > button { display: none; }

nt-note.dragging > .note-inner > .note-wrap > * { pointer-events: none; }

/* note cover wrap */
nt-note > .note-inner > .cover-wrap {
    position: relative;
    overflow: hidden;

    width: 100%;
    height: 200px;

    border-bottom: solid 1px var(--border);
}

nt-note > .note-inner > .cover-wrap > img {
    display: block;

    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* note main wrap */
nt-note > .note-inner > .note-wrap {
    position: relative;
    margin: 0 auto;
    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);

    max-width: 100%;
    width: 660px;
    height: max-content;
}

/* drag-sort */
nt-note.block-drag-moving nt-block {
    pointer-events: none;
}

/* drag-select box */
nt-note > .drag-select-box {
    position: absolute;
    z-index: 10;

    border: 1px solid rgba(35, 131, 226, 0.3);
    background-color: rgba(35, 131, 226, 0.08);
    pointer-events: none;
}

/* note style buttons */
nt-note .note-style-buttons {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    top: -30px;
    left: 40px;

    width: 100%;

    transition: opacity var(--duration-medium) ease-in-out;
}

nt-note .note-style-buttons > .wrap {
    position: relative;

    max-width: 660px;
    width: 100%;
}

nt-note .note-style-buttons button { --button-label: var(--font-sub); }

nt-note:has(nt-title-block > .media > *) .note-style-buttons [data-btn-add-icon] { display: none; }
nt-note:not(:has(nt-title-block > .media > *)) .note-style-buttons button:is([data-btn-change-icon], [data-btn-remove-icon]) { display: none; }

nt-note:has(.cover-wrap > *) .note-style-buttons [data-btn-add-cover] { display: none; }
nt-note:not(:has(.cover-wrap > *)) .note-style-buttons button:is([data-btn-change-cover], [data-btn-remove-cover]) { display: none; }

nt-note .note-style-buttons input { display: none; }

/* fade note-style-buttons when title not focused and not hovered */
nt-note:not(:has(nt-title-block nt-input .input:focus)):not(:has(.note-style-buttons:hover)) .note-style-buttons {
    opacity: 0;
    pointer-events: none;
}
@property --task-percentage {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

/* plain block */
nt-plain-block {
    --block-text-size: 14px;
    --block-text-weight: 400;
    --block-text-color: var(--font);

    --block-root-task-mark: var(--font-content);
    --block-root-tree-mark: var(--font-content);
    --block-sub-task-mark: var(--depth-8);
    --block-sub-tree-mark: var(--depth-8);

    --block-button-size: 20px;
    --block-button-gap: 4px;
    --block-padding: 2px;

    --task-total: 1;
    --task-completed: 0;

    --row-index: 1;
    --row-index-string: "1";

    display: flex;
    position: relative;
    padding: var(--block-padding) 0;

    min-height: 22px;
    height: max-content;

    transition: --task-percentage var(--duration-medium) ease-in-out;
}

nt-plain-block[data-text-type="subheading"] {
    --block-text-size: 16px;
    --block-text-weight: 600;
}

nt-plain-block[data-text-type="heading"] {
    --block-text-size: 20px;
    --block-text-weight: 700;
}

nt-plain-block[data-text-type="title"] {
    --block-text-size: 24px;
    --block-text-weight: 700;
}

nt-plain-block[data-text-align="center"] {
    text-align: center;
}

nt-plain-block[data-text-align="right"] {
    text-align: right;
}

nt-plain-block[data-text-align="justify"] {
    text-align: justify;
}

/* block background */
nt-plain-block::before {
    content: "";

    display: block;
    position: absolute;
    left: -100dvw;
    top: 0;

    width: 300dvw;
    height: 100%;

    background-color: oklch(from var(--accent-5) l c h/0.2);
    opacity: 0;
    pointer-events: none;
}

nt-plain-block.completed {
    --task-total: 1 !important;
    --task-completed: 1 !important;
}

/* quote wrap */
nt-plain-block>.quote-wrap {
    width: 15px;
}

nt-plain-block>.quote-wrap::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;

    width: 2px;
    height: 100%;

    background-color: var(--font-sub);
}

/* tree wrap */
nt-plain-block .tree-wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-right: var(--block-button-gap);
    z-index: 2;

    width: var(--block-button-size);
    height: 20px;
    flex-shrink: 0;

    font-size: 12px;
    color: var(--block-root-tree-mark);
    cursor: pointer;
}

nt-plain-block .tree-wrap>* {
    pointer-events: none;
}

nt-plain-block .tree-wrap>input {
    display: none !important;
}

nt-plain-block .tree-wrap>input:not(:checked)~i.fa-caret-down {
    display: none;
}

nt-plain-block .tree-wrap>input:checked+i.fa-caret-right {
    display: none;
}

nt-plain-block .tree-wrap::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    border-radius: 11px;
    background-color: var(--foreground);
    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}

nt-plain-block .tree-wrap:is(:hover, :focus-visible)::after {
    opacity: 0.1;
}

nt-plain-block .tree-wrap:active::after {
    opacity: 0.2;
}

nt-block[data-tree-collapsed]>.child-list {
    display: none;
}

nt-block[data-block-level="root"] > .slot > nt-plain-block[data-mode="task"] .tree-wrap {
    position: absolute;

    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}

nt-block[data-block-level="root"] > .slot > nt-plain-block[data-mode="task"] .tree-wrap:is(:hover, :focus-visible, :active) {
    opacity: 1;
}

nt-block[data-block-level="root"] > .slot > nt-plain-block[data-mode="task"] > .tree-wrap:is(:hover, :focus-visible, :active) ~ .task-wrap {
    opacity: 0;
}

nt-block[data-block-level="child"] > .slot > nt-plain-block .tree-wrap {
    color: var(--block-sub-tree-mark);
}

/* indentation */
nt-block>.child-list>nt-block:not(.has-children)>*>*>.indent-wrap {
    width: calc(var(--depth) * var(--indent) + var(--block-button-size) + var(--block-button-gap));
}

nt-block>.slot>nt-plain-block[data-mode="task"]>.indent-wrap {
    width: calc(var(--depth) * var(--indent) - var(--block-button-size) - var(--block-button-gap));
}

nt-block>.child-list>nt-block:not(.has-children)>.slot>nt-plain-block[data-mode="task"]>.indent-wrap {
    width: calc(var(--depth) * var(--indent) + 0px);
}

/* input area placeholder */
nt-plain-block:not(:focus-within)>nt-input>.placeholder {
    opacity: 0;
}

/* task area */
nt-plain-block>.task-wrap {
    display: flex;
    position: relative;
    align-items: center;

    width: max-content;
    height: 22px;
    flex-shrink: 0;
}

/* root task mark */
nt-plain-block .task-mark {
    --task-percentage: calc(var(--task-completed) / var(--task-total) * 100%);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: var(--block-button-gap);

    min-width: unset;
    width: var(--block-button-size);
    height: 20px;

    opacity: 1;

    transition: opacity var(--duration) ease-in-out;
}

nt-plain-block .task-mark>.mark {
    position: absolute;
    left: 0;
    top: 0;
    margin: 1px;

    width: 18px;
    height: 18px;

    border: solid 1px var(--block-root-task-mark);
    border-radius: 11px;
    background-image: conic-gradient(var(--block-root-task-mark) var(--task-percentage), transparent var(--task-percentage));

    transition: --task-percentage var(--duration-medium) ease-in-out;
}

nt-plain-block .task-mark>i {
    position: absolute;

    font-size: 12px;
    color: var(--background);
    opacity: 0;

    transition: opacity var(--duration-medium) ease-in-out;
}

nt-plain-block.completed .task-mark>i {
    opacity: 1;
}

nt-block[data-block-level="child"] > .slot > nt-plain-block .task-mark {
    display: none;
}

/* sub task mark */
nt-plain-block .subtask-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: var(--block-button-gap);

    min-width: unset;
    width: var(--block-button-size);
    height: 22px;
}

nt-plain-block .subtask-mark i {
    font-size: 16px;
    color: var(--block-sub-task-mark);
}

nt-plain-block:not(:is(.indeterminated, .completed)) .subtask-mark i:not(.fa-square) {
    display: none;
}

nt-plain-block.indeterminated .subtask-mark i:not(.fa-square-minus) {
    display: none;
}

nt-plain-block.completed .subtask-mark i:not(.fa-square-check) {
    display: none;
}

nt-block[data-block-level="root"] > .slot > nt-plain-block .subtask-mark {
    display: none;
}

/* list mark */
nt-plain-block>.list-wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: max-content;
    height: max-content;
    flex-shrink: 0;

    user-select: none;
}

nt-plain-block>.list-wrap::before {
    display: block;
    font-size: var(--block-text-size);
    font-weight: var(--block-text-weight);
    color: var(--block-text-color);
}

nt-plain-block[data-list-type="bulleted"]>.list-wrap::before {
    content: "•";
    width: 1em;
    aspect-ratio: 1/1;
    text-align: center;
}

nt-plain-block[data-list-type="dashed"]>.list-wrap::before {
    content: "-";
    width: 1em;
    aspect-ratio: 1/1;
    text-align: center;
}

nt-plain-block[data-list-type="numbered"]>.list-wrap::before {
    content: var(--row-index-string) ".";
    margin: 0 0.3em;
}

nt-progress-divider-block {
    --progress-offset: 0px;
    --progress-ratio: 0;
    --progress-badge-left: 0px;
}

nt-progress-divider-block > .progress-wrap {
    display: block;
    position: absolute;
    left: var(--progress-offset);
    right: 0;
    top: 50%;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-50%);
}

nt-progress-divider-block > .progress-wrap > .progress-fill {
    width: 100%;
    height: 100%;
    background-color: var(--foreground);
    transform: scaleX(var(--progress-ratio));
    transform-origin: left center;
    transition: transform var(--duration-medium) ease-in-out;
}

nt-progress-divider-block > .progress-badge {
    display: inline-flex;
    position: absolute;
    left: var(--progress-badge-left);
    top: 50%;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: oklch(from var(--foreground) l c h / 0.7);
    color: var(--background);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition:
        opacity var(--duration-fast) ease-in-out,
        left var(--duration-medium) ease-in-out,
        transform var(--duration-fast) ease-in-out;
}

nt-progress-divider-block:not(.has-progress) > .progress-wrap {
    opacity: 0;
}

nt-progress-divider-block.has-progress > .progress-badge {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 1px));
}

nt-table-block {
    --block-text-size: 14px;
    --block-text-weight: 400;
    --block-text-color: var(--font);
    --table-selection-color: #2383E2;
    --table-copy-flash-color: rgb(35 131 226 / 0.18);
    --table-selection-stroke: 2px;
    --table-selection-outline-offset: -1px;
    --table-border: oklch(from var(--foreground) l c h / 0.12);
    --table-handle-idle: oklch(from var(--foreground) l c h / 0.36);
    --table-handle-hover: #2383E2;
    --table-handle-surface: rgb(250 250 250 / 0.96);
    --table-handle-border: oklch(from var(--foreground) l c h / 0.08);
    --table-handle-grip: oklch(from var(--foreground) l c h / 0.42);
    --table-handle-outline: rgb(255 255 255 / 0.96);
    --table-handle-shadow: 0 1px 3px oklch(from var(--foreground) l c h / 0.12);
    --table-drag-ghost-fill: rgb(255 255 255 / 0.68);
    --table-drag-ghost-border: oklch(from var(--table-selection-color) l c h / 0.34);
    --table-drag-ghost-shadow:
        0 10px 24px oklch(from var(--foreground) l c h / 0.06),
        0 1px 2px oklch(from var(--foreground) l c h / 0.08);
    --table-menu-shadow: 0 14px 36px oklch(from var(--foreground) l c h / 0.12);

    display: flex;
    position: relative;
    align-items: flex-start;

    width: 100%;
    font-size: var(--block-text-size);
    font-weight: var(--block-text-weight);
    color: var(--block-text-color);
}

nt-table-block:focus {
    outline: none;
}

nt-table-block > .indent-wrap {
    width: calc(var(--depth) * var(--indent));
    flex-shrink: 0;
}

nt-table-block > .table-frame {
    position: relative;
    padding: 0;
    overflow-x: clip;
    overflow-y: visible;

    width: 100%;
    min-width: 0;
}

nt-block:has(> .description-wrap > .wrap:not(:empty)) > .slot > nt-table-block > .table-frame {
    padding-bottom: 10px;
}

nt-table-block > .table-frame > .table-wrap {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;

    width: 100%;
}

nt-table-block > .table-frame > .table-wrap::-webkit-scrollbar {
    height: 6px;
    background: transparent;
}

nt-table-block > .table-frame > .table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

nt-table-block > .table-frame > .table-wrap::-webkit-scrollbar-thumb {
    background: oklch(from var(--foreground) l c h / 0.25);
    border-radius: 3px;
}

nt-table-block > .table-frame > .table-wrap::-webkit-scrollbar-thumb:hover {
    background: oklch(from var(--foreground) l c h / 0.4);
}

nt-table-block table.table-grid {
    border-collapse: collapse;
    table-layout: fixed;

    width: auto;
    min-width: 0;
}

nt-table-block table.table-grid td {
    position: relative;
    min-width: 30px;
    height: auto;
    padding: 0;
    vertical-align: top;

    border: 1px solid var(--table-border);
    background-color: var(--cell-background-color, var(--background));
    transition:
        background-color 120ms ease,
        border-color 120ms ease;
}

nt-table-block table.table-grid td::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    opacity: 0;
    pointer-events: none;
    background-color: transparent;
}

@keyframes table-copy-flash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

nt-block.copy-flash:has(> .slot > nt-table-block) {
    animation: none;
    background-color: transparent;
}

nt-block.copy-flash:has(> .slot > nt-table-block) nt-table-block table.table-grid td::after {
    background-color: var(--table-copy-flash-color);
    animation: table-copy-flash 0.5s ease-out;
}

nt-table-block table.table-grid td.active {
    z-index: 1;
}

nt-table-block .table-cell-shell {
    position: relative;
    z-index: 2;
    box-sizing: border-box;

    width: 100%;
    height: 100%;
    min-height: 36px;
    padding: 8px;
}

nt-table-block .table-cell-shell > nt-input {
    display: block;
    width: 100%;
    min-height: 0;
    height: auto;
}

nt-table-block .table-cell-shell > nt-input > .placeholder {
    display: none;
}

nt-table-block .table-cell-shell > nt-input > .input {
    min-height: 0;
    padding: 0;

    white-space: pre-wrap;
    word-break: break-word;
}

nt-table-block .table-cell-shell > nt-input > .input:focus {
    outline: none;
}

nt-table-block .column-resizer {
    position: absolute;
    top: -1px;
    right: -4px;
    z-index: 5;

    width: 8px;
    height: calc(var(--table-grid-height, 100%) + 2px);

    cursor: col-resize;
}

nt-table-block .column-resizer::before {
    content: none;
}

nt-table-block .table-column-resize-guide {
    position: absolute;
    left: var(--resize-guide-left, 0px);
    top: var(--resize-guide-top, 0px);
    z-index: 8;
    width: 2px;
    height: var(--resize-guide-height, 0px);
    opacity: 0;
    pointer-events: none;
    background-color: var(--table-selection-color);
    transform: translateX(-1px);
    transition: opacity 120ms ease;
}

nt-table-block .table-column-resize-guide.visible {
    opacity: 1;
}

nt-table-block .table-selection-outline {
    position: absolute;
    left: var(--selection-left, 0px);
    top: var(--selection-top, 0px);
    z-index: 3;

    width: var(--selection-width, 0px);
    height: var(--selection-height, 0px);
    border: 0;
    border-radius: 2px;
    box-sizing: border-box;

    pointer-events: none;
    opacity: 0;
}

nt-table-block .table-selection-outline::before {
    content: "";
    position: absolute;
    inset: var(--table-selection-outline-offset);
    border: solid var(--table-selection-stroke) var(--table-selection-color);
    border-radius: calc(2px + (var(--table-selection-stroke) * 0.5));
    box-sizing: border-box;
}

nt-table-block .table-selection-outline.visible {
    opacity: 1;
}

nt-table-block .table-selection-outline.block-selected::before {
    border-color: transparent;
}

nt-table-block > .table-frame:is(.dragging-rows, .dragging-columns) .table-selection-outline.visible {
    opacity: 0.18;
}

nt-table-block .table-grow-handle {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    left: var(--grow-left, 0px);
    top: var(--grow-top, 0px);

    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    transform: translate(-100%, -100%);
    transition: opacity 120ms ease, transform 120ms ease;
    touch-action: none;
    cursor: nwse-resize !important;
    box-shadow: none;
}

nt-table-block .table-grow-handle.visible {
    opacity: 1;
    pointer-events: auto;
}

nt-table-block .table-grow-handle::before {
    content: "";

    display: block;
    position: relative;

    width: 8px;
    height: 8px;

    outline: solid 1px oklch(from var(--depth-3) l c h/0.8);
    border-radius: 4px;
    background-color: oklch(from var(--depth-8) l c h/0.8);
}

nt-table-block .table-grow-handle::after,
nt-table-block .table-selection-handle::after,
nt-table-block .table-grow-handle::before,
nt-table-block .table-selection-handle::before {
    box-shadow: none;
}

nt-table-block .table-grow-handle::before {
    box-shadow: 0 0 0 1px var(--table-handle-outline);
}

nt-table-block .table-grow-handle::after,
nt-table-block .table-selection-handle::after {
    content: none;
}

nt-table-block .table-grow-handle:is(:hover, :focus-visible) {
    transform: translate(-100%, -100%) scale(1.05);
}

nt-table-block .table-selection-handle {
    position: absolute;
    left: var(--handle-left, 0px);
    top: var(--handle-top, 0px);
    z-index: 7;
    opacity: 0;
    pointer-events: none;

    margin: 0;
    min-width: 24px;
    min-height: 24px;
    border: 0;
    padding: 0;
    background: transparent;
    overflow: visible;
    transform: translate(-50%, -50%) translateZ(0);
    box-shadow: none;
}

nt-table-block .table-selection-handle.visible {
    opacity: 1;
    pointer-events: auto;
}

nt-table-block .table-selection-handle > .handle-core {
    position: relative;
    display: block;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--table-handle-outline);
    color: var(--table-handle-grip);
}

nt-table-block .table-selection-handle > .handle-core::before,
nt-table-block .table-selection-handle > .handle-core::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0;
}

nt-table-block .table-selection-handle.column-handle {
    width: 24px;
    height: 24px;
}

nt-table-block .table-selection-handle.column-handle > .handle-core {
    width: 16px;
    height: var(--table-selection-stroke);
    margin: 11px -2px;
    background-color: var(--table-handle-idle);
}

nt-table-block .table-selection-handle.column-handle > .handle-core::before {
    width: 12px;
    height: 8px;
    background-image:
        radial-gradient(circle, currentColor 1px, transparent 1px),
        radial-gradient(circle, currentColor 1px, transparent 1px),
        radial-gradient(circle, currentColor 1px, transparent 1px),
        radial-gradient(circle, currentColor 1px, transparent 1px),
        radial-gradient(circle, currentColor 1px, transparent 1px),
        radial-gradient(circle, currentColor 1px, transparent 1px);
    background-position:
        0 0,
        50% 0,
        100% 0,
        0 100%,
        50% 100%,
        100% 100%;
    background-repeat: no-repeat;
    background-size: 4px 4px;
}

nt-table-block .table-selection-handle.row-handle {
    width: 24px;
    height: 24px;
}

nt-table-block .table-selection-handle.row-handle > .handle-core {
    width: var(--table-selection-stroke);
    height: 16px;
    margin: -2px 11px;
    background-color: var(--table-handle-idle);
}

nt-table-block .table-selection-handle.row-handle > .handle-core::before {
    width: 8px;
    height: 12px;
    background-image:
        radial-gradient(circle, currentColor 1px, transparent 1px),
        radial-gradient(circle, currentColor 1px, transparent 1px),
        radial-gradient(circle, currentColor 1px, transparent 1px),
        radial-gradient(circle, currentColor 1px, transparent 1px),
        radial-gradient(circle, currentColor 1px, transparent 1px),
        radial-gradient(circle, currentColor 1px, transparent 1px);
    background-position:
        0 0,
        0 50%,
        0 100%,
        100% 0,
        100% 50%,
        100% 100%;
    background-repeat: no-repeat;
    background-size: 4px 4px;
}

nt-table-block .table-selection-handle.menu-handle {
    width: 24px;
    height: 24px;
}

nt-table-block .table-selection-handle.menu-handle > .handle-core {
    width: var(--table-selection-stroke);
    height: 16px;
    margin: -2px 11px;
    background-color: var(--table-handle-idle);
}

nt-table-block .table-selection-handle.menu-handle > .handle-core::before {
    width: 8px;
    height: 12px;
    background-image:
        radial-gradient(circle, currentColor 1.2px, transparent 1.2px),
        radial-gradient(circle, currentColor 1.2px, transparent 1.2px),
        radial-gradient(circle, currentColor 1.2px, transparent 1.2px);
    background-position: center 0, center 50%, center 100%;
    background-repeat: no-repeat;
    background-size: 4px 4px;
}

nt-table-block .table-selection-handle:is(:hover, :focus-visible) > .handle-core,
nt-table-block .table-wrap.dragging-rows .row-handle > .handle-core,
nt-table-block .table-wrap.dragging-columns .column-handle > .handle-core,
nt-table-block .table-frame.dragging-rows .row-handle > .handle-core,
nt-table-block .table-frame.dragging-columns .column-handle > .handle-core {
    background-color: var(--table-handle-surface);
    box-shadow:
        0 0 0 1px var(--table-handle-outline),
        0 0 0 2px var(--table-handle-border),
        var(--table-handle-shadow);
}

nt-table-block .table-selection-handle.column-handle:is(:hover, :focus-visible) > .handle-core,
nt-table-block .table-wrap.dragging-columns .column-handle > .handle-core,
nt-table-block .table-frame.dragging-columns .column-handle > .handle-core {
    width: 28px;
    height: 18px;
    margin: 3px -2px;
}

nt-table-block .table-selection-handle:is(.row-handle, .menu-handle):is(:hover, :focus-visible) > .handle-core,
nt-table-block .table-wrap.dragging-rows .row-handle > .handle-core,
nt-table-block .table-frame.dragging-rows .row-handle > .handle-core {
    width: 18px;
    height: 28px;
    margin: -2px 3px;
}

nt-table-block .table-selection-handle.menu-handle:is(:hover, :focus-visible) > .handle-core {
    background-color: var(--table-handle-hover);
    color: white;
    box-shadow: 0 0 0 1px var(--table-handle-outline), var(--table-handle-shadow);
}

nt-table-block .table-selection-handle:is(:hover, :focus-visible) > .handle-core::before,
nt-table-block .table-wrap.dragging-rows .row-handle > .handle-core::before,
nt-table-block .table-wrap.dragging-columns .column-handle > .handle-core::before,
nt-table-block .table-frame.dragging-rows .row-handle > .handle-core::before,
nt-table-block .table-frame.dragging-columns .column-handle > .handle-core::before {
    opacity: 1;
}

nt-table-block .table-drop-indicator {
    position: absolute;
    z-index: 9;
    display: none;
    pointer-events: none;
    background-color: var(--table-selection-color);
}

nt-table-block .table-drop-indicator.visible {
    display: block;
}

nt-table-block .row-drop-indicator {
    left: var(--drop-left, 0px);
    width: var(--drop-width, 0px);
    top: var(--drop-top, 0px);
    height: 2px;
}

nt-table-block .column-drop-indicator {
    top: var(--drop-top, 0px);
    height: var(--drop-height, 0px);
    left: var(--drop-left, 0px);
    width: 2px;
}

nt-table-block .table-drag-ghost {
    position: absolute;
    left: var(--drag-ghost-left, 0px);
    top: var(--drag-ghost-top, 0px);
    z-index: 8;
    display: none;
    width: var(--drag-ghost-width, 0px);
    height: var(--drag-ghost-height, 0px);
    pointer-events: none;
    opacity: 0;
    transform:
        translate(var(--drag-ghost-translate-x, 0px), var(--drag-ghost-translate-y, 0px))
        translateZ(0);
    overflow: hidden;
    border-radius: 3px;
}

nt-table-block .table-drag-ghost.visible {
    display: block;
    opacity: 1;
}

nt-table-block .table-drag-ghost::before {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: 1.5px solid var(--table-drag-ghost-border);
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.58)),
        var(--table-drag-ghost-fill);
    box-shadow: var(--table-drag-ghost-shadow);
}

nt-table-block .table-drag-ghost > .table-drag-ghost-grid {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

nt-table-block .table-drag-ghost-cell {
    position: relative;
    min-width: 0;
    min-height: 0;
    background-color: var(--ghost-cell-background-color, transparent);
}

nt-table-block .table-drag-ghost-cell:not(.last-column) {
    border-right: 1px solid oklch(from var(--table-selection-color) l c h / 0.12);
}

nt-table-block .table-drag-ghost-cell:not(.last-row) {
    border-bottom: 1px solid oklch(from var(--table-selection-color) l c h / 0.12);
}

nt-table-block .table-drag-ghost-cell-shell {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 36px;
    padding: 7px;
}

nt-table-block .table-drag-ghost-cell-content {
    min-height: 0;
    color: oklch(from var(--foreground) l c h / 0.9);
    white-space: pre-wrap;
    word-break: break-word;
}

nt-table-block .table-drag-ghost-cell-content > span {
    color: inherit;
}

/* title block */
nt-title-block {
    --block-text-size: 30px;
    --block-text-weight: 800;
    --block-text-color: var(--font);

    display: flex;
    position: relative;
}

nt-block:has(> .slot > nt-title-block) {
    margin-top: 115px;
    margin-bottom: 8px;
}

nt-note:has(.cover-wrap > *) nt-block:has(> .slot > nt-title-block) { margin-top: 70px; }

/* media */
nt-title-block > .media {
    position: relative;

    width: 42px;
    height: 42px;
    object-fit: contain;

    font-size: 30px;
    color: var(--font);
    user-select: none;
}

nt-title-block > .media > * { pointer-events: none; }

nt-title-block > .media:not(:has(> *)) { display: none; }

nt-title-block > .media > img {
    display: block;
    
    width: 100%;
    height: 100%;
    object-fit: contain;
}

nt-title-block:has(> .media > *) { gap: 10px; }

/* input */
nt-title-block > nt-input > .input { min-height: 42px; }
px-avatar {
    --avatar-size: 32px;
    --avatar-initial: "G";
    --avatar-initial-color: var(--white);
    --avatar-background: var(--depth-8);

    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: var(--avatar-size);
    height: var(--avatar-size);

    border-radius: calc(var(--avatar-size) / 2);
    background-color: var(--avatar-background);
}

px-avatar::before {
    content: var(--avatar-initial);

    font-size: calc(var(--avatar-size) / 1.6);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    color: var(--avatar-initial-color);
}

px-avatar::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    border: solid 1px oklch(from var(--black) l c h/0.1);
    border-radius: inherit;
}

px-avatar.with-image::before { content: unset; }
button {
    --button-label: var(--font);
    --button-icon: var(--font-sub);
    --button-radius: 8px;
    --button-border: transparent;
    --button-background: var(--background);
    --button-shadow: transparent;

    display: inline-grid;
    position: relative;
    place-items: center;
    padding: 0 10px;

    appearance: none;
    -webkit-appearance: none;

    min-width: 32px;
    height: 32px;

    border: unset;
    border-radius: var(--button-radius);
    background-color: var(--button-background);
    box-shadow: 0 1px 2px var(--button-shadow);
    outline: none;

    transition: box-shadow var(--duration) ease-in-out;
}

button:focus,
button:focus-visible {
    outline: none;
}

button:has(span):not(:has(i)) {
    grid-template-columns: minmax(0, auto);
    padding: 0 12px;
}
button:has(i):not(:has(span)) {
    grid-template-columns: 32px;
    padding: 0;
}
button:has(i:first-child + span):not(:has(i:last-child)) {
    grid-template-columns: 32px minmax(0, auto);
    padding: 0 11px 0 0;
}
button:has(span:first-child + i) {
    grid-template-columns: minmax(0, auto) 32px;
    padding: 0 0 0 11px;
}
button:has(i:first-child + span + i:last-child) {
    grid-template-columns: 32px minmax(0, auto) 32px;
    padding: 0 0 0 0;
}
button:has(i:first-child + span + i.slim:last-child) {
    grid-template-columns: 32px minmax(0, auto) 24px;
    padding: 0 2px 0 0;
}

button:not(:disabled) { cursor: pointer; }
button:disabled {
    --button-label: var(--font-lowest);
    --button-icon: var(--font-lowest);

    cursor: no-drop;
}

button > span {
    font-size: 14px;
    color: var(--button-label);
}

button > i {
    font-size: 14px;
    color: var(--button-icon);
}

button::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    border: solid 1px var(--button-border);
    border-radius: inherit;
}

button::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    border-radius: inherit;
    background-color: var(--foreground);
    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}

button:not(:disabled):is(:hover, :focus-visible) { --button-shadow: oklch(from var(--black) l c h/0.05); }
button:not(:disabled):is(:hover, :focus-visible)::after { opacity: 0.1 }

button:not(:disabled):active { --button-shadow: oklch(from var(--black) l c h/0.1); }
button:not(:disabled):active::after { opacity: 0.2 }

button:not(:disabled).active { --button-icon: var(--button-font); }
button:not(:disabled).active::after { opacity: 0.05; }
button:not(:disabled).active:is(:hover, :focus-visible)::after { opacity: 0.15; }
button:not(:disabled).active:active::after { opacity: 0.25; }

button.circle { --button-radius: 16px; }
button.bordered { --button-border: oklch(from var(--foreground) l c h/0.15); }
button.no-shadow { box-shadow: unset; }

button.transparent { --button-background: transparent; }
button.accent {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--accent-5);
}
button.tint {
    --button-icon: var(--accent-5);
    --button-background: var(--tint-background);
}
button.tint.bordered { --button-border: var(--tint-border); }
button.black {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--dark);
}
button.white {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--white);
}
button.red {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--red);
}
button.orange {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--orange);
}
button.yellow {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--yellow);
}
button.green {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--green);
}
button.lightgreen {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--lightgreen);
}
button.mint {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--mint);
}
button.deepblue {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--deepblue);
}
button.blue {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--blue);
}
button.sky {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--sky);
}
button.deeppurple {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--deeppurple);
}
button.purple {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--purple);
}
button.pink {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--pink);
}
button.sun {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--sun);
}
button.moon {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--moon);
}
button.mercury {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--mercury);
}
button.venus {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--venus);
}
button.earth {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--earth);
}
button.mars {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--mars);
}
button.jupiter {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--jupiter);
}
button.saturn {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--saturn);
}
button.uranus {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--uranus);
}
button.neptune {
    --button-label: var(--white);
    --button-icon: var(--white);
    --button-background: var(--neptune);
}
button.pluto {
    --button-label: var(--dark);
    --button-icon: var(--dark);
    --button-background: var(--pluto);
}
button.information {
    --button-label: var(--information-foreground);
    --button-icon: var(--information-foreground);
    --button-background: var(--information-background);
}
button.alert {
    --button-label: var(--alert-foreground);
    --button-icon: var(--alert-foreground);
    --button-background: var(--alert-background);
}
button.warning {
    --button-label: var(--warning-foreground);
    --button-icon: var(--warning-foreground);
    --button-background: var(--warning-background);
}
button.critical {
    --button-label: var(--critical-foreground);
    --button-icon: var(--critical-foreground);
    --button-background: var(--critical-background);
}

px-calendar {
    --date-width: 32px;
    --date-height: 32px;
    --date-radius: 16px;
    --date-label: var(--font);
    --date-label-sunday: var(--red);
    --date-label-other: var(--font-lowest);
    --date-label-selected: var(--white);
    --date-background: transparent;
    --date-selected: var(--accent-5);
    --row-gap: 2px;
    --calendar-radius: 8px;
    --calendar-border: var(--depth-9);
    --calendar-background: var(--background);
    --calendar-shadow: oklch(from var(--foreground) l c h/0);

    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    min-width: 244px;
    min-height: 256px;
    width: fit-content;
    height: fit-content;

    border: solid 1px var(--calendar-border);
    border-radius: var(--calendar-radius);
    background-color: var(--calendar-background);
}

px-calendar .calendar-wrap {
    display: grid;
    position: relative;
    grid-template-columns: calc(var(--date-width) * 7);
    grid-template-rows: var(--date-height) calc(var(--date-height) * 6 + var(--row-gap) * 5);
    gap: var(--row-gap);
    padding: 10px;
    z-index: 1;
    
    border-radius: calc(var(--calendar-radius) - 1px);
    background-color: var(--calendar-background);
    box-shadow: 0 2px 6px var(--calendar-shadow);
}

px-calendar *:is(.calendar-header, .calendar-row) {
    display: grid;
    position: relative;
    grid-template-columns: repeat(7, var(--date-width));
    grid-template-rows: var(--date-height);
}

px-calendar .calendar-main {
    display: grid;
    position: relative;
    grid-template-columns: calc(var(--date-width) * 7);
    grid-template-rows: repeat(6, var(--date-height));
    gap: var(--row-gap);
}

px-calendar *:is(.calendar-head, [data-btn-date]) {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: var(--date-width);
    height: var(--date-height);

    font-size: 14px;
    text-align: center;
    color: var(--date-label);
    border-radius: var(--date-radius);
    cursor: pointer;
    user-select: none;
}

px-calendar [data-btn-date] > * { pointer-events: none; }

px-calendar .calendar-head { font-size: 11px; }
px-calendar [data-btn-date].sunday { color: var(--date-label-sunday); }
px-calendar [data-btn-date].other { color: var(--date-label-other); }
px-calendar [data-btn-date]:is(.selected, .selected-start, .selected-end) {
    color: var(--date-label-selected);
    background-color: var(--date-selected);
}

px-calendar [data-btn-date].today::after {
    content: "";

    display: block;
    position: absolute;
    bottom: 6px;

    width: 2px;
    height: 2px;

    border-radius: 100%;
    background-color: var(--date-label);
}
px-calendar [data-btn-date].today.sunday::after { background-color: var(--date-label-sunday); }
px-calendar [data-btn-date].today.other::after { background-color: var(--date-label-other); }
px-calendar [data-btn-date].today:is(.selected, .selected-start, .selected-end)::after { background-color: var(--date-label-selected); }

px-calendar [data-btn-date]::before {
    display: block;
    position: absolute;
    z-index: 0;

    width: 100%;
    height: 100%;

    background-color: oklch(from var(--date-selected) l c h/0.2);
}

px-calendar [data-btn-date]:first-child::before { border-radius: var(--date-radius) 0 0 var(--date-radius); }
px-calendar [data-btn-date]:last-child::before { border-radius: 0 var(--date-radius) var(--date-radius) 0; }

px-calendar.range-selected [data-btn-date].selected-start::before {
    content: "";

    border-radius: var(--date-radius) 0 0 var(--date-radius);
}

px-calendar.range-selected [data-btn-date].selected-end::before {
    content: "";

    border-radius: 0 var(--date-radius) var(--date-radius) 0;
}


px-calendar.range-selected [data-btn-date].between::before { content: ""; }

px-calendar.range-selected [data-btn-date].selected-start.selected-end::before { border-radius: var(--date-radius); }

px-calendar:not(.range-selected) [data-btn-date]:is(.selected-start, .selected-end) {
    color: var(--date-selected);
    background-color: transparent;
}

px-calendar:not(.range-selected) [data-btn-date]:is(.selected-start, .selected-end)::before {
    content: "";
    
    border-radius: var(--date-radius);
}

px-calendar:not(.range-selected) [data-btn-date]:is(.selected-start, .selected-end)::after { background-color: var(--date-selected); }

px-calendar [data-btn-date] > span { position: relative; }

px-calendar.locked { pointer-events: none; }
input[type="checkbox"]:not(.toggle) {
    --checkbox-radius: 4px;
    --checkbox-border: var(--accent-6);
    --checkbox-background: var(--background);
    --checkbox-shadow: transparent;

    appearance: none;

    display: inline-grid;
    position: relative;
    place-items: center;
    
    width: 16px;
    height: 16px;

    border: solid 1px var(--checkbox-border);
    border-radius: var(--checkbox-radius);
    background-color: var(--checkbox-background);
    box-shadow: 0 1px 2px var(--checkbox-shadow);
    outline: none;

    transition: var(--duration) ease-in-out;
    transition-property: border-color, background-color, box-shadow;
}

input[type="checkbox"]:not(.toggle):focus,
input[type="checkbox"]:not(.toggle):focus-visible {
    outline: none;
}

input[type="checkbox"]:not(.toggle):not(:disabled) { cursor: pointer; }
input[type="checkbox"]:not(.toggle):disabled { cursor: no-drop; }

input[type="checkbox"]:not(.toggle)::after {
    content: "";

    display: block;
    position: absolute;
    left: -1px;
    top: -1px;
    z-index: 1;
    box-sizing: border-box;

    width: calc(100% + 2px);
    height: calc(100% + 2px);

    border-radius: inherit;
    background-color: var(--black);
    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}

input[type="checkbox"]:not(.toggle):not(:disabled):is(:hover, :focus-visible) { --checkbox-shadow: oklch(from var(--foreground) l c h/0.05); }
input[type="checkbox"]:not(.toggle):not(:disabled):is(:hover, :focus-visible)::after { opacity: 0.1 }

input[type="checkbox"]:not(.toggle):not(:disabled):active { --checkbox-shadow: oklch(from var(--foreground) l c h/0.1); }
input[type="checkbox"]:not(.toggle):not(:disabled):active::after { opacity: 0.2 }

input[type="checkbox"]:not(.toggle):is(:checked, :indeterminate) {
    --checkbox-border: var(--accent-4);
    --checkbox-background: var(--accent-5);
}

input[type="checkbox"]:not(.toggle):checked::before {
    content: "";

    display: block;
    position: absolute;
    box-sizing: border-box;

    width: 10px;
    height: 5px;

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

    transform: rotate(-45deg) translate(0.5px, -0.5px);
}

input[type="checkbox"]:not(.toggle):indeterminate::before {
    content: "";
    
    display: block;
    position: absolute;
    box-sizing: border-box;

    width: 10px;
    height: 2px;

    background-color: var(--white);
}

input[type="checkbox"]:not(.toggle):disabled:not(:is(:checked, :indeterminate)) { --checkbox-border: var(--font-lowest); }
input[type="checkbox"]:not(.toggle):disabled:is(:checked, :indeterminate) {
    --checkbox-border: var(--font-lowest);
    --checkbox-background: var(--font-lowest);
}

.chip {
    --chip-label: var(--font);
    --chip-background: oklch(from var(--chip-label) l c h/0.1);

    display: inline-grid;
    position: relative;
    grid-template-columns: repeat(2, minmax(0, auto));
    place-items: center;
    gap: 4px;
    padding: 0 8px;
    overflow: hidden;

    height: 20px;

    font-size: 14px;
    color: var(--chip-label);
    border-radius: 10px;
    background-color: var(--chip-background);
}

.chip > * { line-height: 1; }

.chip:not(:has(> *:nth-child(2))) { grid-template-columns: minmax(0, auto); }

.chip.accent {
    --chip-label: var(--white);
    --chip-background: var(--accent-6);
}
.chip.tint { --chip-label: var(--accent-5); }
.chip.red { --chip-label: var(--red); }
.chip.orange { --chip-label: var(--orange); }
.chip.yellow { --chip-label: var(--yellow); }
.chip.green { --chip-label: var(--green); }
.chip.lightgreen { --chip-label: var(--lightgreen); }
.chip.mint { --chip-label: var(--mint); }
.chip.deepblue { --chip-label: var(--deepblue); }
.chip.blue { --chip-label: var(--blue); }
.chip.sky { --chip-label: var(--sky); }
.chip.deeppurple { --chip-label: var(--deeppurple); }
.chip.purple { --chip-label: var(--purple); }
.chip.pink { --chip-label: var(--pink); }
.chip.sun { --chip-label: var(--sun); }
.chip.moon { --chip-label: var(--moon); }
.chip.mercury { --chip-label: var(--mercury); }
.chip.venus { --chip-label: var(--venus); }
.chip.earth { --chip-label: var(--earth); }
.chip.mars { --chip-label: var(--mars); }
.chip.jupiter { --chip-label: var(--jupiter); }
.chip.saturn { --chip-label: var(--saturn); }
.chip.uranus { --chip-label: var(--uranus); }
.chip.neptune { --chip-label: var(--neptune); }
.chip.pluto { --chip-label: var(--pluto); }
.chip.information {
    --chip-label: var(--information-foreground);
    --chip-background: var(--information-background);
}
.chip.alert {
    --chip-label: var(--alert-foreground);
    --chip-background: var(--alert-background);
}
.chip.warning {
    --chip-label: var(--warning-foreground);
    --chip-background: var(--warning-background);
}
.chip.critical {
    --chip-label: var(--critical-foreground);
    --chip-background: var(--critical-background);
}
px-color-picker {
    --color-picker-radius: 16px;
    --color-picker-border: var(--component-border);
    --color-picker-background: var(--sub-area-background);
    --color-picker-body-background: var(--background);
    --color-picker-backdrop: oklch(from var(--background) l c h/0.7);
    --color-picker-current: rgba(0, 0, 255, 50%);
    --color-picker-current-opaque: rgb(0, 0, 255);

    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    padding: 16px;
    z-index: 101;
    overflow: hidden;

    width: 100dvw;
    height: 100dvh;

    pointer-events: none;
}

px-color-picker > .wrap {
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    z-index: 1;
    overflow: hidden;

    max-width: 100%;
    max-height: 100%;
    width: 486px;
    height: max-content;

    border: solid 1px var(--color-picker-border);
    border-radius: var(--color-picker-radius);
    background-color: oklch(from var(--color-picker-background) l c h/var(--backdrop-blur-opacity));
    box-shadow: 0 2px 6px var(--shadow);
    backdrop-filter: var(--backdrop-blur);
    pointer-events: auto;
}

px-color-picker > .wrap > .grab {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;

    border-bottom: solid 1px var(--color-picker-border);
    cursor: grab;
    touch-action: none;
}

px-color-picker > .wrap > .grab::before {
    content: "";

    display: block;
    position: relative;

    width: 40px;
    height: 4px;

    border-radius: 2px;
    background-color: oklch(from var(--foreground) l c h/0.1);
}

px-color-picker > .wrap > .grab:active { cursor: grabbing; }

px-color-picker > .wrap > .body {
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 30px;
    padding: 15px;
    overflow-x: hidden;

    background-color: var(--color-picker-body-background);
}

px-color-picker > .wrap > .control {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 15px 15px;

    border-top: solid 1px var(--color-picker-border);
}

px-color-picker > .wrap > .control > button {
    min-width: fit-content;
    min-height: 32px;
    width: 100%;
    flex: 1;
}

px-color-picker > .wrap > .control > button > span {
    overflow: hidden;

    width: 100%;

    white-space: nowrap;
    text-overflow: ellipsis;
}

px-color-picker > .backdrop {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    background-color: var(--color-picker-backdrop);
    backdrop-filter: var(--backdrop-blur);
    cursor: pointer;
    pointer-events: auto;

    transition: var(--duration-medium) ease-in-out;
    transition-property: background-color, backdrop-filter;
}

px-color-picker.locked { pointer-events: auto; }
px-color-picker.locked > * { pointer-events: none; }

px-color-picker .preview-area {
    display: flex;
    position: relative;
    margin-bottom: -10px;
    overflow: hidden;

    width: 100%;
    height: 48px;

    border-radius: calc(var(--color-picker-radius) / 2);
}

px-color-picker .preview-area::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    border: solid 1px oklch(from var(--black) l c h/0.2);
    border-radius: inherit;
    pointer-events: none;
}

px-color-picker .preview-area > * {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    flex: 1;
}

px-color-picker .preview-area > *::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background: repeat top left/4px 4px repeating-conic-gradient(oklch(from var(--foreground) l c h/0.3) 0 25%, oklch(from var(--foreground) l c h/0.1) 0 50%);
}

px-color-picker .preview-area > *::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background-color: var(--color-picker-preview-color);
}

px-color-picker .preview-area > .preview-current::after { background-color: var(--color-picker-current); }

px-color-picker .preview-area > * > button {
    display: none;
    z-index: 1;
}

px-color-picker .preview-area > *:hover > button { display: inline-grid; }

px-color-picker .preset-list {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10px;

    width: 100%;
    height: max-content;
}

px-color-picker .preset-list > span {
    font-size: 14px;
    color: var(--font-sub);
    user-select: none;
}

px-color-picker .preset-list > .list {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
}

px-color-picker .color-area {
    display: grid;
    position: relative;
    grid-template-columns: minmax(271px, 1fr) minmax(0, auto);
    grid-template-rows: minmax(0, 1fr);
    gap: 40px;
}

px-color-picker .color-area > *:is(.left, .right) {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 20px;

    width: 100%;
    height: 100%;
}

px-color-picker .color-panel {
    position: relative;

    width: 100%;
    height: 100%;
    flex: 1;

    touch-action: none;
}

px-color-picker .color-panel > .gradient {
    position: relative;
    overflow: hidden;

    width: 100%;
    height: 100%;

    border-radius: calc(var(--color-picker-radius) / 2);
    background-image:
        linear-gradient(transparent, var(--gray-6)),
        linear-gradient(90deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%));
}

px-color-picker .color-panel > .gradient::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    border: solid 1px oklch(from var(--black) l c h/0.2);
    border-radius: inherit;
}

px-color-picker .color-panel > .thumb-position {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;

    width: 1px;
    height: 1px;

    background-color: black;
}

px-color-picker .color-panel > .thumb-position > .thumb {
    position: absolute;

    width: 15px;
    height: 15px;

    border: solid 2px var(--color-picker-body-background);
    border-radius: 100%;
    background-color: var(--color-picker-current-opaque);
    box-shadow: 0 2px 6px var(--shadow);
}

px-color-picker .color-slider {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 1px;

    width: 100%;
    height: 17px;
    
    border-radius: 100px;
}

px-color-picker .color-slider::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    border: solid 1px oklch(from var(--foreground) l c h/0.2);
    border-radius: inherit;
}

px-color-picker .color-slider.brightness::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    background-image: linear-gradient(90deg, var(--black), var(--color-picker-current-opaque), var(--white));
}

px-color-picker .color-slider.alpha::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(90deg, transparent, var(--color-picker-current-opaque)),
        repeat top left/4px 4px repeating-conic-gradient(oklch(from var(--foreground) l c h/0.3) 0 25%, oklch(from var(--foreground) l c h/0.1) 0 50%);
}

px-color-picker .color-slider > input[type="range"] {
    appearance: none;

    position: relative;
    z-index: 1;

    width: 100%;
    height: 100%;

    background-color: unset;
}

px-color-picker .color-slider > input[type="range"]::-moz-range-thumb {
    appearance: none;

    display: block;
    box-sizing: border-box;
    
    width: 15px;
    height: 15px;

    border: solid 2px var(--color-picker-body-background);
    border-radius: 100%;
    background-color: var(--color-picker-current-opaque);
    box-shadow: 0 2px 6px var(--shadow);
}

px-color-picker .color-slider > input[type="range"]::-webkit-slider-thumb {
    appearance: none;

    display: block;
    box-sizing: border-box;
    
    width: 15px;
    height: 15px;

    border: solid 2px var(--color-picker-body-background);
    border-radius: 100%;
    background-color: var(--color-picker-current-opaque);
    box-shadow: 0 2px 6px var(--shadow);
}

px-color-picker .value-row {
    display: grid;
    position: relative;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    width: 100%;
    height: 32px;
}

px-color-picker .value-row > span {
    font-size: 14px;
    font-weight: 600;
    color: var(--font);
    user-select: none;
}

px-color-picker .value-row > input {
    padding: 0 11px;

    width: 100px;
    height: 32px;

    color: var(--font);
    border: solid 1px var(--color-picker-border);
    border-radius: calc(var(--color-picker-radius) / 2);
    background-color: var(--color-picker-body-background);
}

px-color-picker .value-row > input:focus-visible {
    border-color: var(--accent-6);
    outline: unset;
}

px-color-picker:not(.include-alpha) *:is(.color-slider:has([data-range-value="a"]), .value-row:has([data-input-value="a"])) { display: none !important; }

@media screen and (max-width: 600px) {
    px-color-picker > .backdrop { display: block; }

    px-color-picker .color-area {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    px-color-picker .color-area > .left { min-height: 240px; }

    px-color-picker .value-row:is(:has([data-input-value="r"]), :has([data-input-value="g"]), :has([data-input-value="b"]), :has([data-input-value="a"])) { display: none; }

    px-color-picker .value-row { width: 100%; }

    px-color-picker .value-row > input { width: 100%; }

    px-color-picker .preset-list > .list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, auto));
        justify-content: initial;
        gap: 10px;
    }

    px-color-picker .preset-list > .list > button { width: 100%;}
}

body.dialog-peeking px-color-picker > .backdrop {
    background-color: transparent;
    backdrop-filter: blur(0px);
}
px-datetime-picker {
    --datetime-picker-radius: 16px;
    --date-label: var(--font);
    --date-label-sunday: var(--red);
    --date-label-selected: var(--white);
    --date-selected: var(--accent-5);
    --date-selected-between: oklch(from var(--accent-5) l c h/0.2);
    --datetime-picker-border: var(--component-border);
    --datetime-picker-background: var(--sub-area-background);
    --datetime-picker-body-background: var(--background);
    --datetime-picker-backdrop: oklch(from var(--background) l c h/0.7);

    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    padding: 16px;
    z-index: 100;
    overflow: hidden;

    width: 100dvw;
    height: 100dvh;

    pointer-events: none;
}

px-datetime-picker > .wrap {
    display: grid;
    position: absolute;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, auto);
    left: 0;
    top: 0;
    z-index: 1;
    overflow: hidden;

    max-width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    width: max-content;
    height: max-content;

    border: solid 1px var(--datetime-picker-border);
    border-radius: var(--datetime-picker-radius);
    background-color: oklch(from var(--datetime-picker-background) l c h/var(--backdrop-blur-opacity));
    box-shadow: 0 2px 6px var(--shadow);
    backdrop-filter: var(--backdrop-blur);
    pointer-events: auto;
}

px-datetime-picker > .wrap > .control {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 15px 15px;

    border-top: solid 1px var(--datetime-picker-border);
}

px-datetime-picker > .wrap > .body {
    display: flex;
    position: relative;
    /* gap: 1px; */

    width: max-content;
    /* height: 100%; */
}

px-datetime-picker > .wrap > .control > button {
    min-width: fit-content;
    min-height: 32px;
    width: 100%;
    flex: 1;
}

px-datetime-picker > .wrap > .control > button > span {
    overflow: hidden;

    width: 100%;

    white-space: nowrap;
    text-overflow: ellipsis;
}

px-datetime-picker .date-picker {
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, auto) minmax(0, 1fr);

    width: 253px;
    height: 100%;
}

px-datetime-picker .time-picker {
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, auto) minmax(0, 1fr);

    width: 253px;
    height: 100%;
}

px-datetime-picker *:is(.date-picker, .time-picker) > .top {
    display: flex;
    position: relative;
    align-items: center;
    gap: 10px;
    padding: 15px 15px 10px;

    width: 100%;
    height: 57px;

    border-bottom: solid 1px var(--datetime-picker-border);
}

px-datetime-picker *:is(.date-picker, .time-picker) > .main {
    width: 100%;
    height: 100%;

    background-color: var(--datetime-picker-body-background);
}

px-datetime-picker:has(.slot-view.active) .date-picker > .bottom { display: none; }

px-datetime-picker .date-picker > .bottom {
    display: flex;
    position: relative;
    gap: 1px;

    width: 100%;
    height: max-content;

    border-top: solid 1px var(--datetime-picker-border);
    background-color: var(--datetime-picker-border);
}

px-datetime-picker .date-picker > .bottom > div {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 5px;
    padding: 5px;

    width: 100%;
    height: 100%;
    flex: 1;

    background-color: var(--datetime-picker-body-background);
}

px-datetime-picker .date-picker > .bottom > div > span {
    font-size: 12px;
    color: var(--font-sub);
    user-select: none;
}

px-datetime-picker .date-picker > .bottom > div > span { margin-left: 5px; }

px-datetime-picker :is([data-time-preview], [data-date-preview]) {
    margin-right: 42px;

    width: 100%;
    flex: 1;

    font-size: 14px;
    text-align: center;
    color: var(--font);
    user-select: none;
}

px-datetime-picker:not(:has(.slot-view.active)) [data-date-preview] { display: none;}

px-datetime-picker:has(.time-picker-1.disabled) .date-picker > .bottom > .time-1 { display: none; }
px-datetime-picker:has(.time-picker-2.disabled) .date-picker > .bottom > .time-2 { display: none; }
px-datetime-picker:has(.time-picker-2.disabled) .date-picker > .bottom > .time-1 > span { display: none; }

px-datetime-picker:is(:has(.time-picker-1.active), :has(.time-picker-2.active)) .date-picker {
    overflow: hidden;
    width: 0px;
}
px-datetime-picker .time-picker-1.active { display: grid !important; }
px-datetime-picker .time-picker-2.active { display: grid !important; }

px-datetime-picker .date-picker .top > [data-btn-slot] { width: 100%; flex: 1; }
px-datetime-picker .date-picker .top:not(:has(+ .main .slot-view.active)) > [data-btn-back] { display: none; }
px-datetime-picker .date-picker .top:has(+ .main .slot-view.active) > *:not(:is([data-btn-back], [data-date-preview])) { display: none; }
px-datetime-picker .date-picker .main:has(.slot-view.active) .calendar-view { display: none; }
px-datetime-picker .date-picker .slot-view { display: none; }
px-datetime-picker .date-picker .slot-view.active { display: grid; }
/* px-datetime-picker .date-picker:not(.disabled):has(+ .time-picker:not(.disabled))::after {
    content: "";

    display: block;
    position: absolute;
    right: -1px;
    top: 0;

    width: 1px;
    height: 100%;

    background-color: var(--datetime-picker-border);
} */

px-datetime-picker .date-picker > .main > * {
    width: 100%;
    height: 100%;
}

px-datetime-picker .time-picker.disabled { display: none; }

px-datetime-picker .calendar-view {
    overflow-x: hidden;
}

px-datetime-picker px-calendar {
    --calendar-radius: 0;

    width: 100%;
    height: 100%;

    border: unset;
    touch-action: none;
}

px-datetime-picker px-calendar .calendar-wrap {
    padding: 10px 14px;

    width: 100%;
    height: 100%;
}

px-datetime-picker .slot-view {
    display: none;
    position: relative;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
}

px-datetime-picker .time-picker > .main {
    display: grid;
    position: relative;
    /* grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr); */
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
}

px-datetime-picker px-slot {
    --slot-width: 100%;
    --slot-size: 3;
    --slot-radius: 0;

    height: 256px;

    border: unset;
}

px-datetime-picker:has(.time-picker-1:not(.disabled)) px-slot { height: 299px; }
px-datetime-picker:has(.time-picker-2:not(.disabled)) px-slot { height: 321px; }

px-datetime-picker .partition {
    width: 1px;
    height: 100%;

    background-color: var(--datetime-picker-border);
}

px-datetime-picker > .backdrop {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    background-color: var(--datetime-picker-backdrop);
    backdrop-filter: var(--backdrop-blur);
    cursor: pointer;
    pointer-events: auto;

    transition: var(--duration-medium) ease-in-out;
    transition-property: background-color, backdrop-filter;
}

@media screen and (max-width: 600px) {
    px-datetime-picker > .backdrop { display: block; }

    px-datetime-picker > .wrap {
        left: unset;
        top: unset;

        width: 100%;
    }

    px-datetime-picker > .wrap > .body {
        flex-direction: column;

        width: 100%;
    }

    /* px-datetime-picker .time-picker > .top { display: none; } */

    px-datetime-picker :is(.date-picker, .time-picker) { width: 100%; }

    px-datetime-picker .calendar-wrap { justify-content: center; }

    /* px-datetime-picker .date-picker:not(.disabled):has(+ .time-picker:not(.disabled))::after {
        content: "";

        display: block;
        position: absolute;
        right: unset;
        top: unset;
        left: 0;
        bottom: -1px;

        width: 100%;
        height: 1px;

        background-color: var(--datetime-picker-border);
    } */
}
px-dialog {
    --dialog-radius: 16px;
    --dialog-border: var(--component-border);
    --dialog-background: var(--sub-area-background);
    --dialog-body-background: var(--background);
    --dialog-backdrop: oklch(from var(--background) l c h/0.7);

    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    padding: 16px;
    z-index: 100;
    overflow: hidden;

    width: 100dvw;
    height: 100dvh;

    pointer-events: none;
}

px-dialog > .wrap {
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    z-index: 1;
    overflow: hidden;
    
    max-width: 100%;
    min-width: 200px;
    width: max-content;
    height: max-content;

    border: solid 1px var(--dialog-border);
    border-radius: var(--dialog-radius);
    background-color: oklch(from var(--dialog-background) l c h/var(--backdrop-blur-opacity));
    box-shadow: 0 2px 6px var(--shadow);
    backdrop-filter: var(--backdrop-blur);
    pointer-events: auto;
}

px-dialog > .wrap > .grab {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;

    border-bottom: solid 1px var(--dialog-border);
    cursor: grab;
    touch-action: none;
}

px-dialog > .wrap > .grab::before {
    content: "";

    display: block;
    position: relative;

    width: 40px;
    height: 4px;

    border-radius: 2px;
    background-color: oklch(from var(--foreground) l c h/0.1);
}

px-dialog > .wrap > .grab:active { cursor: grabbing; }

px-dialog > .wrap > .body {
    padding: 15px;

    background-color: var(--dialog-body-background);
}

px-dialog > .wrap > .body > .title {
    font-size: 18px;
    font-weight: 600;
    color: var(--font-title);
    user-select: none;
}

px-dialog > .wrap > .body > .title:has(+ *) { margin-bottom: 10px; }

px-dialog > .wrap > .body > .content {
    max-width: 600px;
    
    font-size: 14px;
    color: var(--font-content);
    user-select: none;
}

px-dialog > .wrap > .body > .content b {
    font-weight: 600;
    color: var(--font);
}

px-dialog > .wrap > .control {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 15px 15px;

    border-top: solid 1px var(--dialog-border);
}

px-dialog > .wrap > .control.vertical {
    flex-direction: column;

    height: max-content;
}

px-dialog > .wrap > .control > button {
    min-width: fit-content;
    min-height: 32px;
    width: 100%;
    flex: 1;
}

px-dialog > .wrap > .control > button > span {
    overflow: hidden;

    width: 100%;

    white-space: nowrap;
    text-overflow: ellipsis;
}

px-dialog > .backdrop {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    background-color: var(--dialog-backdrop);
    backdrop-filter: var(--backdrop-blur);
    cursor: pointer;
    pointer-events: auto;

    transition: var(--duration-medium) ease-in-out;
    transition-property: background-color, backdrop-filter;
}

px-dialog.locked { pointer-events: auto; }
px-dialog.locked > * { pointer-events: none; }

body.dialog-peeking px-dialog > .backdrop {
    background-color: transparent;
    backdrop-filter: blur(0px);
}
px-icon-picker {
    --icon-picker-radius: 16px;
    --icon-picker-border: var(--component-border);
    --icon-picker-background: var(--sub-area-background);
    --icon-picker-body-background: var(--background);
    --icon-picker-backdrop: oklch(from var(--background) l c h/0.7);

    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    padding: 16px;
    z-index: 101;
    overflow: hidden;
    
    width: 100dvw;
    height: 100dvh;

    pointer-events: none;
}

px-icon-picker > .wrap {
    display: grid;
    position: absolute;
    grid-template-columns: 1fr;
    grid-template-rows: 63px minmax(0, auto);
    left: 0;
    top: 0;
    z-index: 1;
    overflow: hidden;

    max-width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    min-width: 322px;
    width: 388px;
    height: max-content;

    border: solid 1px var(--icon-picker-border);
    border-radius: var(--icon-picker-radius);
    background-color: oklch(from var(--icon-picker-background) l c h/var(--backdrop-blur-opacity));
    box-shadow: 0 2px 6px var(--shadow);
    backdrop-filter: var(--backdrop-blur);
    pointer-events: auto;
}

px-icon-picker .icon-picker-header {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;

    width: 100%;
    height: 100%;

    border-bottom: solid 1px var(--icon-picker-border);
}

px-icon-picker .icon-picker-header > .left {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 4px;

    height: 100%;
}

px-icon-picker .icon-picker-header > .right {
    display: flex;
    position: relative;
    gap: 8px;
}

px-icon-picker .icon-picker-header > .left > div {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: max-content;
    height: 100%;
}

px-icon-picker .icon-picker-header > .left > div.disabled { display: none !important; }

px-icon-picker .icon-picker-header > .left > div:has(button.bordered.tint)::after {
    content: "";

    display: flex;
    position: absolute;
    left: 0;
    bottom: -1px;
    box-sizing: border-box;

    width: 100%;
    height: 5px;

    border: solid 1px var(--icon-picker-border);
    border-bottom: unset;
    border-radius: 5px 5px 0 0;
    background-color: var(--icon-picker-body-background);
}

px-icon-picker .preview {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    color: var(--font);
    border-radius: 8px;
    background-color: oklch(from var(--foreground) l c h/0.1);
    user-select: none;
}

px-icon-picker .preview * {
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain !important;

    font-size: 14px !important;
    line-height: 1 !important;
}

px-icon-picker > .wrap > .body {
    display: flex;
    position: relative;
    padding: 15px 0;
    overflow: hidden;
    
    width: 100%;
    height: max-content;

    background-color: var(--icon-picker-body-background);
}

px-icon-picker .tab {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 20px;

    width: 100%;
    height: max-content;
}

px-icon-picker .tab.disabled { display: none !important; }

px-icon-picker .tab-header {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10px;

    width: 100%;
    height: max-content;
}

px-icon-picker .sub-tab-list {
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 0 15px;

    width: 100%;
}

px-icon-picker px-input-box { margin: 0 15px; }

px-icon-picker .icon-style-list {
    display: flex;
    position: relative;
    align-items: center;
    gap: 10px;
    padding: 0 15px;

    width: 100%;
}

px-icon-picker .icon-style-list > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
}

px-icon-picker .icon-color-list {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;

    width: 100%;
    height: 32px;
}

px-icon-picker .icon-color-list > button {
    width: 32px;
    height: 32px;

    border-radius: 16px;
}

px-icon-picker .tab-body {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;

    width: 100%;
    height: max-content;
}

px-icon-picker :is([data-emoji-list], [data-icon-list]) {
    position: relative;
    
    height: 100%;
}

px-icon-picker :is([data-emoji-list], [data-icon-list]) > .wrap {
    display: grid;
    position: relative;
    grid-template-columns: repeat(10, 32px);
    justify-content: center;
    gap: 4px;

    height: 100%;

    user-select: none;
    touch-action: none;
}

px-icon-picker [data-emoji-list] > .wrap { grid-template-rows: repeat(5, 32px); }
px-icon-picker [data-icon-list] > .wrap { grid-template-rows: repeat(4, 32px); }

px-icon-picker :is([data-emoji-list], [data-icon-list]) > .wrap:has(.empty-wrap) {
    display: flex;
    position: relative;
    padding-top: 15px;

    width: 100%;
    height: 50px;
}

px-icon-picker :is([data-btn-emoji], [data-btn-icon]) {
    padding: 0;

    width: 100%;
    height: 32px;

    border-radius: 16px;
    box-shadow: unset;
    user-select: none;
}

px-icon-picker :is([data-btn-emoji], [data-btn-icon]) > span {
    font-size: 20px;
    color: var(--font-content);
    user-select: none;
}

px-icon-picker :is([data-emoji-category], [data-icon-category]) {
    font-size: 16px;
    font-weight: 500;
    color: var(--font);
    user-select: none;
}

px-icon-picker .pagination-wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 32px;
}

px-icon-picker .pagination {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    padding: 0 15px;
    overflow-y: hidden;
    scrollbar-width: none;

    max-width: 100%;
    width: max-content;
}

px-icon-picker .pagination-wrap::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    width: 15px;
    height: 100%;

    background-image: linear-gradient(90deg, var(--icon-picker-body-background), transparent);
}

px-icon-picker .pagination-wrap::after {
    content: "";

    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;

    width: 15px;
    height: 100%;

    background-image: linear-gradient(90deg, transparent, var(--icon-picker-body-background));
}

px-icon-picker .tab-emoji > .tab-body { height: 209px; }
px-icon-picker .tab-emoji .empty-wrap { height: 170px; }

px-icon-picker .tab-icon > .tab-body { height: 173px; }
px-icon-picker .tab-icon .empty-wrap { height: 140px; }

px-icon-picker .tab-image input { display: none; }

px-icon-picker .icon-dropper {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 15px;

    width: 100%;
    height: 200px;

    border: solid 1px var(--icon-picker-border);
    border-radius: calc(var(--icon-picker-radius) / 2);
    user-select: none;
}

px-icon-picker .icon-dropper > i {
    font-size: 32px;
    color: var(--font);
}

px-icon-picker .icon-dropper > p {
    font-size: 14px;
    color: var(--font);
}

px-icon-picker .icon-dropper > span {
    position: absolute;
    bottom: 10px;

    font-size: 12px;
    color: var(--font-sub);
}

px-icon-picker .icon-result {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    height: 200px;
}

px-icon-picker .icon-result > .plate {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 131px;
    height: 131px;

    border: solid 1px var(--icon-picker-border);
    border-radius: calc(var(--icon-picker-radius) / 2);
    background-color: var(--icon-picker-body-background);
    box-shadow: 0 2px 6px var(--shadow);
}

px-icon-picker .icon-result > .plate > * {
    max-width: 100px !important;
    max-height: 100px !important;
    object-fit: contain !important;
}

px-icon-picker .icon-result > p {
    font-size: 12px;
    color: var(--font-sub);
}

px-icon-picker .icon-result > .buttons {
    display: flex;
    position: relative;
    gap: 10px;
}

px-icon-picker .tab-image .loading-wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 200px;

    font-size: 32px;
    color: var(--font-content);
}

px-icon-picker .tab-image > .tab-body { height: 200px; }

px-icon-picker > .backdrop {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    background-color: var(--color-picker-backdrop);
    backdrop-filter: var(--backdrop-blur);
    cursor: pointer;
    pointer-events: auto;

    transition: var(--duration-medium) ease-in-out;
    transition-property: background-color, backdrop-filter;
}

@media screen and (max-width: 500px) {
    px-icon-picker > .backdrop { display: block; }

    px-icon-picker > .wrap {
        left: unset;
        top: unset;

        width: 100%;
    }

    px-icon-picker :is([data-emoji-list], [data-icon-list]) > .wrap { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    px-icon-picker [data-emoji-list] > .wrap { grid-template-rows: repeat(3, 32px); }
    px-icon-picker [data-icon-list] > .wrap { grid-template-rows: repeat(3, 32px); }

    px-icon-picker .tab-emoji > .tab-body { height: 137px; }
    px-icon-picker .tab-emoji .empty-wrap { height: 110px; }

    px-icon-picker .tab-icon > .tab-body { height: 140px; }
    px-icon-picker .tab-icon .empty-wrap { height: 110px; }
}

px-icon-picker.locked .wrap * { pointer-events: none; }

px-icon-variations {
    --icon-picker-border: var(--component-border);
    --icon-picker-body-background: var(--background);

    display: flex;
    position: fixed;
    align-items: center;
    justify-content: start;
    left: 0;
    top: 0;
    gap: 5px;
    padding: 5px;
    z-index: 101;
    overflow-y: hidden;
    scrollbar-width: none;

    max-width: calc(100% - 32px);
    width: max-content;
    height: 44px;

    border: solid 1px var(--icon-picker-border);
    border-radius: 27px;
    background-color: oklch(from var(--icon-picker-body-background) l c h/var(--backdrop-blur-opacity));
    box-shadow: 0 2px 6px var(--shadow);
    backdrop-filter: var(--backdrop-blur);
}

px-icon-variations > button {
    --button-radius: 16px;
    --button-background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    width: 32px;
    height: 32px;

    font-size: 20px;
    box-shadow: none;
}

px-icon-variations.locked * { pointer-events: none; }
px-input-box {
    --px-input-box-radius: 8px;
    --px-input-box-border: var(--component-border);
    --px-input-box-background: var(--background);
    --px-input-box-autofill-background: color-mix(in srgb, var(--background) 88%, var(--accent-9) 12%);
    --px-input-box-autofill-border: color-mix(in srgb, var(--component-border) 72%, var(--accent-7) 28%);
    --px-input-box-autofill-icon: var(--accent-6);

    display: inline-grid;
    position: relative;
    grid-template-columns: repeat(3, minmax(0, auto));
    overflow: hidden;

    height: 32px;

    border-radius: var(--px-input-box-radius);
    background-color: var(--px-input-box-background);
}

px-input-box:not(:has(> *:nth-child(2))) { grid-template-columns: repeat(1, minmax(0, auto)); }
px-input-box:not(:has(> *:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, auto)); }

px-input-box > * {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}

px-input-box > .before { border-right: solid 1px var(--px-input-box-border); }
px-input-box > .after { border-left: solid 1px var(--px-input-box-border); }

px-input-box > * > .partition {
    width: 1px;
    height: 100%;

    background-color: var(--px-input-box-border);
}

px-input-box > *:is(.before, .after) > button { --button-radius: 0px; }

px-input-box::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    border: solid 1px var(--px-input-box-border);
    border-radius: inherit;

    pointer-events: none;
}

px-input-box > label {
    gap: 4px;
    padding: 0 4px;

    width: 100%;
    height: 100%;
}

px-input-box > label > i {
    margin-left: 5px;

    font-size: 14px;
    color: var(--font-sub);
}

px-input-box > label > input {
    width: 100%;
    height: 100%;
    flex: 1;

    font-size: 14px;
    color: var(--font);
    border: unset;
    background-color: transparent;
}

px-input-box > label > input:-webkit-autofill,
px-input-box > label > input:-webkit-autofill:hover,
px-input-box > label > input:-webkit-autofill:focus,
px-input-box > label > input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--font);
    caret-color: var(--font);
    border-radius: calc(var(--px-input-box-radius) - 1px);
    -webkit-box-shadow: 0 0 0 100px var(--px-input-box-autofill-background) inset;
    box-shadow: 0 0 0 100px var(--px-input-box-autofill-background) inset;
    transition: background-color 999999s ease-out 0s;
}

px-input-box:has(> label > input:-webkit-autofill) {
    --px-input-box-border: var(--px-input-box-autofill-border);
    --px-input-box-background: var(--px-input-box-autofill-background);
}

px-input-box > label:has(> input:-webkit-autofill) > i {
    color: var(--px-input-box-autofill-icon);
}

px-input-box > label > input:focus-visible { outline: unset; }

px-input-box > label > input::placeholder {
    font-size: 14px;
    font-style: italic;
    color: var(--font-lowest);
}

px-input-box > label > .clear-button {
    --button-radius: 12px;

    padding: 0;

    min-width: unset;
    width: 24px;
    height: 24px;
}

px-input-box > label > .clear-button::before {
    content: "\f00d";

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    right: unset;
    top: unset;

    width: 24px;
    height: 24px;

    font-size: 13px;
    font-family: "Font Awesome 6 Pro";
    font-weight: bold;
    color: var(--button-icon);
}

px-input-box:has(> label > input:focus-visible) { --px-input-box-border: var(--accent-6); }

px-input-box > label:has(> input:focus-visible) > i { color: var(--accent-6); }

px-t {
    display: inline;

    font: inherit;
}
.key {
    --key-radius: 4px;
    --key-foreground: var(--depth-6);
    --key-background: var(--depth-9);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 0 3px;

    height: 18px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    color: var(--key-foreground);
    border: solid 1px var(--key-foreground);
    border-bottom-width: 2px;
    border-radius: var(--key-radius);
    background-color: var(--key-background);
}

body:not(:is(.os-ipados, .os-ios, .os-macos)) .key.ctrl-or-cmd::before { content: "Ctrl"; }
body:is(.os-ipados, .os-ios, .os-macos) .key.ctrl-or-cmd::before {
    content: "\e142";

    font-family: "Font Awesome 6 Pro";
}

body:not(:is(.os-ipados, .os-ios, .os-macos)) .key.alt-or-option::before { content: "Alt"; }
body:is(.os-ipados, .os-ios, .os-macos) .key.alt-or-option::before {
    content: "\e318";

    font-family: "Font Awesome 6 Pro";
}

body:not(:is(.os-ipados, .os-ios, .os-macos)) .key.key-mac { display: none; }
body:is(.os-ipados, .os-ios, .os-macos) .key.key-other { display: none; }
px-menu-toggle { display: none; }

px-menu {
    --menu-width: 0px;
    --menu-radius: 16px;
    --menu-border: var(--component-border);
    --menu-background: var(--sub-area-background);
    --menu-backdrop: oklch(from var(--background) l c h/0.7);

    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    padding: 16px;
    z-index: 101;
    overflow: hidden;

    width: 100dvw;
    height: 100dvh;

    pointer-events: none;
}

px-menu > .wrap {
    display: grid;
    position: absolute;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 10px;
    z-index: 1;

    min-width: var(--menu-width);
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    width: max-content;
    height: max-content;

    pointer-events: auto;
}

px-menu > .wrap > .top {
    display: none;
    position: relative;
    align-items: center;
    justify-content: end;

    width: 100%;
    height: 44px;
}

px-menu > .wrap > .top > button {
    --button-icon: var(--font);
    --button-border: var(--menu-border);
    --button-background: var(--menu-background);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    width: 44px;
    height: 44px;

    box-shadow: 0 2px 6px var(--shadow);
}

px-menu > .wrap > .body {
    position: relative;
    overflow-x: hidden;
    scrollbar-width: none;

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

    border: solid 1px var(--menu-border);
    border-radius: var(--menu-radius);
    background-color: oklch(from var(--menu-background) l c h/var(--backdrop-blur-opacity));
    backdrop-filter: var(--backdrop-blur);
    box-shadow: 0 2px 6px var(--shadow);
}

px-menu .menu-wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 10px;

    width: 100%;
    height: max-content;
}

px-menu .menu-wrap > .loading-wrap {
    display: none;
    position: absolute;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    font-size: 24px;
    color: var(--font-sub);
}
px-menu .menu-wrap.loading > .loading-wrap { display: flex; }
px-menu .menu-wrap.loading > :not(.loading-wrap) {
    opacity: 0;
    pointer-events: none;
}

px-menu .menu-wrap > .description {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 0 6px;

    max-width: 100%;
    width: max-content;
    height: 32px;

    font-size: 14px;
    color: var(--font-sub);
    user-select: none;
}

px-menu .menu-wrap > .description-block {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 6px;

    width: 100%;
    height: 32px;

    font-size: 12px;
    color: var(--font-sub);
    user-select: none;
}

px-menu .menu-wrap > .description-block button {
    --button-label: var(--font-sub);

    margin-right: -6px;
}

px-menu .menu-wrap > .description-block button > span { font-size: 12px; }

px-menu .menu-wrap button:not(:disabled) { --button-icon: var(--font); }
px-menu .menu-wrap button.keyboard-active:not(:disabled) { --button-shadow: oklch(from var(--black) l c h/0.05); }
px-menu .menu-wrap button.keyboard-active:not(:disabled)::after { opacity: 0.1; }

px-menu .menu-wrap > button {
    background-color: transparent;
    box-shadow: unset;
}

px-menu .menu-wrap > button > span {
    display: block;

    width: 100%;

    text-align: left;
}

px-menu .menu-wrap > .partition {
    margin: 5px 0;

    width: 100%;
    height: 1px;

    background-color: var(--menu-border);
}

px-menu > .backdrop {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    background-color: var(--menu-backdrop);
    backdrop-filter: var(--backdrop-blur);
    cursor: pointer;
    pointer-events: auto;

    transition: var(--duration-medium) ease-in-out;
    transition-property: background-color, backdrop-filter;
}

px-menu button > * { pointer-events: none; }

@media screen and (max-width: 600px) {
    px-menu > .backdrop { display: block; }

    px-menu > .wrap {
        grid-template-rows: 44px minmax(0, 1fr);
        left: 16px;
        bottom: 16px;

        width: 100%;
    }
    px-menu > .wrap > .top { display: flex; }

    px-menu .menu-wrap > button { height: 52px; }
    px-menu .menu-wrap > button > span {
        display: inline-block;

        width: 100%;

        text-align: left;
    }
}

px-menu.locked > .wrap * { pointer-events: none; }

body.env-web px-menu .hide-on-web { display: none !important; }

px-progress {
    --progress-size: 6px;
    --progress-radius: calc(var(--progress-size) / 2);
    --progress-background: var(--depth-9);
    --progress-bar-color: var(--accent);

    --current: 0;
    --total: 0;
    --percentage: calc(var(--current) / var(--total) * 100%);

    display: block;
    position: relative;
    overflow: hidden;

    width: 100%;
    height: var(--progress-size);

    border-radius: var(--progress-radius);
    background-color: var(--progress-background);
}

px-progress > div {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;

    width: 100%;
    height: 100%;

    background-color: var(--progress-bar-color);

    transform: translateX(calc(-100% + var(--percentage)));
    transition: transform var(--duration-medium) ease-out;
}

px-progress > div::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background-image: linear-gradient(90deg, transparent, oklch(from var(--white) l c h/0.4), transparent);
    
    animation: linear 2s infinite ani-progress-bar-ambient;
}

@keyframes ani-progress-bar-ambient {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}
input[type="radio"] {
    --radio-radius: 8px;
    --radio-border: var(--accent-6);
    --radio-background: var(--background);
    --radio-shadow: transparent;

    appearance: none;

    display: inline-grid;
    position: relative;
    place-items: center;

    width: 16px;
    height: 16px;

    border: solid 1px var(--radio-border);
    border-radius: var(--radio-radius);
    background-color: var(--radio-background);
    box-shadow: 0 1px 2px var(--radio-shadow);

    transition: var(--duration) ease-in-out;
    transition-property: border-color, background-color, box-shadow;
}

input[type="radio"]:not(:disabled) { cursor: pointer; }
input[type="radio"]:disabled { cursor: no-drop; }

input[type="radio"]::after {
    content: "";

    display: block;
    position: absolute;
    left: -1px;
    top: -1px;
    z-index: 1;
    box-sizing: border-box;

    width: calc(100% + 2px);
    height: calc(100% + 2px);

    border-radius: inherit;
    background-color: var(--black);
    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}

input[type="radio"]:not(:disabled):is(:hover, :focus-visible) { --radio-shadow: oklch(from var(--foreground) l c h/0.05); }
input[type="radio"]:not(:disabled):is(:hover, :focus-visible)::after { opacity: 0.1 }

input[type="radio"]:not(:disabled):active { --radio-shadow: oklch(from var(--foreground) l c h/0.1); }
input[type="radio"]:not(:disabled):active::after { opacity: 0.2 }

input[type="radio"]:checked {
    --radio-border: var(--accent-4);
    --radio-background: var(--accent-5);
}

input[type="radio"]:checked::before {
    content: "";

    display: block;
    position: absolute;
    box-sizing: border-box;

    width: 6px;
    height: 6px;

    border-radius: inherit;
    background-color: var(--white);
}

input[type="radio"]:disabled:not(:checked) { --radio-border: var(--font-lowest); }
input[type="radio"]:disabled:checked {
    --radio-border: var(--font-lowest);
    --radio-background: var(--font-lowest);
}
px-select {
    --select-label: var(--font);
    --select-icon: var(--font-sub);
    --select-radius: 8px;
    --select-border: transparent;
    --select-background: var(--background);
    --select-shadow: transparent;

    display: inline-grid;
    position: relative;
    place-items: center;
    padding: 0 10px;

    min-width: 32px;
    height: 32px;

    border: unset;
    border-radius: var(--select-radius);
    background-color: var(--select-background);
    box-shadow: 0 1px 2px var(--select-shadow);

    transition: box-shadow var(--duration) ease-in-out;
}

px-select:has(span):not(:has(i)) {
    grid-template-columns: minmax(0, auto);
    padding: 0 12px;
}
px-select:has(i):not(:has(span)) {
    grid-template-columns: 32px;
    padding: 0;
}
px-select:has(i:first-child + span):not(:has(i:last-child)) {
    grid-template-columns: 32px minmax(0, auto);
    padding: 0 11px 0 0;
}
px-select:has(span:first-child + i) {
    grid-template-columns: minmax(0, auto) 32px;
    padding: 0 0 0 11px;
}
px-select:has(i:first-child + span + i:last-child) {
    grid-template-columns: 32px minmax(0, auto) 32px;
    padding: 0 0 0 0;
}
px-select:has(i:first-child + span + i.slim:last-child) {
    grid-template-columns: 32px minmax(0, auto) 24px;
    padding: 0 2px 0 0;
}

px-select:not([disabled]) { cursor: pointer; }
px-select[disabled] {
    --select-label: var(--font-lowest);
    --select-icon: var(--font-lowest);

    cursor: no-drop;
}

px-select > span {
    display: inline-block;

    width: 100%;
    
    font-size: 14px;
    color: var(--select-label);
}

px-select > i {
    font-size: 14px;
    color: var(--select-icon);
}

px-select::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    border: solid 1px var(--select-border);
    border-radius: inherit;
}

px-select::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    border-radius: inherit;
    background-color: var(--foreground);
    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}

px-select:not([disabled]):is(:hover, :focus-visible) { --select-shadow: oklch(from var(--black) l c h/0.05); }
px-select:not([disabled]):is(:hover, :focus-visible)::after { opacity: 0.1 }

px-select:not([disabled]):active { --select-shadow: oklch(from var(--black) l c h/0.1); }
px-select:not([disabled]):active::after { opacity: 0.2 }

px-select:not([disabled]).active { --button-icon: var(--button-font); }
px-select:not([disabled]).active::after { opacity: 0.05; }
px-select:not([disabled]).active:is(:hover, :focus-visible)::after { opacity: 0.15; }
px-select:not([disabled]).active:active::after { opacity: 0.25; }

px-select.circle { --select-radius: 16px; }
px-select.bordered { --select-border: oklch(from var(--foreground) l c h/0.15); }
px-select.no-shadow { box-shadow: unset; }

px-select.transparent { --select-background: transparent; }
px-select.accent {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--accent-5);
}
px-select.tint {
    --select-icon: var(--accent-5);
    --select-background: var(--tint-background);
}
px-select.tint.bordered { --select-border: var(--tint-border); }
px-select.black {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--dark);
}
px-select.white {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--white);
}
px-select.red {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--red);
}
px-select.orange {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--orange);
}
px-select.yellow {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--yellow);
}
px-select.green {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--green);
}
px-select.lightgreen {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--lightgreen);
}
px-select.mint {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--mint);
}
px-select.deepblue {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--deepblue);
}
px-select.blue {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--blue);
}
px-select.sky {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--sky);
}
px-select.deeppurple {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--deeppurple);
}
px-select.purple {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--purple);
}
px-select.pink {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--pink);
}
px-select.sun {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--sun);
}
px-select.moon {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--moon);
}
px-select.mercury {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--mercury);
}
px-select.venus {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--venus);
}
px-select.earth {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--earth);
}
px-select.mars {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--mars);
}
px-select.jupiter {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--jupiter);
}
px-select.saturn {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--saturn);
}
px-select.uranus {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--uranus);
}
px-select.neptune {
    --select-label: var(--white);
    --select-icon: var(--white);
    --select-background: var(--neptune);
}
px-select.pluto {
    --select-label: var(--dark);
    --select-icon: var(--dark);
    --select-background: var(--pluto);
}
px-select.information {
    --select-label: var(--information-foreground);
    --select-icon: var(--information-foreground);
    --select-background: var(--information-background);
}
px-select.alert {
    --select-label: var(--alert-foreground);
    --select-icon: var(--alert-foreground);
    --select-background: var(--alert-background);
}
px-select.warning {
    --select-label: var(--warning-foreground);
    --select-icon: var(--warning-foreground);
    --select-background: var(--warning-background);
}
px-select.critical {
    --select-label: var(--critical-foreground);
    --select-icon: var(--critical-foreground);
    --select-background: var(--critical-background);
}

px-select > option { display: none; }
px-slot {
    --slot-size: 1;
    --slot-width: 80px;
    --slot-option-height: 32px;
    --slot-radius: 8px;
    --slot-title: var(--font-sub);
    --slot-label: var(--font);
    --slot-border: var(--component-border);
    --slot-background: var(--background);
    --slot-selected-border: var(--tint-border);
    --slot-selected-background: var(--tint-background);

    display: block;
    position: relative;
    overflow: hidden;

    width: var(--slot-width);
    height: calc(var(--slot-option-height) * (var(--slot-size) * 2 + 1));

    border: solid 1px var(--slot-border);
    border-radius: var(--slot-radius);
    background-color: var(--slot-background);
    touch-action: none;
}

px-slot > * { user-select: none; }

px-slot > p {
    position: absolute;
    left: 0;
    top: 0;
    padding: 7px 0;
    z-index: 1;

    width: 100%;

    font-size: 14px;
    text-align: center;
    color: var(--slot-title);
}

px-slot .slot-inner {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    z-index: 0;

    width: 100%;
    height: 100%;
}

px-slot .slot-inner::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    width: 100%;
    height: calc(var(--slot-option-height) * var(--slot-size));

    background-image: linear-gradient(var(--slot-background) 20%, transparent);
}

px-slot .slot-inner::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;

    width: 100%;
    height: calc(var(--slot-option-height) * var(--slot-size));

    background-image: linear-gradient(transparent, var(--slot-background) 80%);
}

px-slot .slot-wrap {
    position: relative;
    z-index: 0;
    
    width: 100%;
    height: var(--slot-option-height);

    outline: solid 1px var(--slot-selected-border);
    background-color: var(--slot-selected-background);
}

px-slot .slot-list {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: max-content;
}

px-slot option {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: var(--slot-option-height);

    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--slot-label);
}
px-toast {
    --toast-radius: 21px;
    --toast-text: var(--background);
    --toast-background: var(--foreground);

    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    padding: 16px;
    z-index: 102;
    overflow: hidden;

    width: 100dvw;
    height: 100dvh;

    pointer-events: none;
    
    transition: var(--duration-short) ease-out;
    transition-property: transform, opacity;
}

px-toast > .wrap {
    display: grid;
    position: absolute;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
    top: 16px;
    padding: 10px 15px;
    gap: 10px;
    z-index: 1;

    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    width: max-content;
    height: max-content;

    font-size: 14px;
    color: var(--toast-text);
    border: solid 1px oklch(from var(--black) l c h/0.2);
    border-radius: var(--toast-radius);
    background-color: oklch(from var(--toast-background) l c h/var(--backdrop-blur-opacity-deep));
    box-shadow: 0 2px 6px var(--shadow);
    backdrop-filter: var(--backdrop-blur);
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
}

px-toast > .wrap:has(i:first-child) { grid-template-columns: minmax(0, auto) minmax(0, 1fr);}

px-toast > .wrap > i { line-height: 20px; }

#toast-layer > px-toast:not(:last-child) { display: none; }
input[type="checkbox"].toggle {
    --toggle-width: 42px;
    --toggle-height: 24px;
    --toggle-padding: 2px;
    --toggle-border-width: 1px;
    --toggle-border: var(--accent-5);
    --toggle-background: var(--background);
    --toggle-thumb: var(--accent-6);
    --toggle-shadow: transparent;

    appearance: none;

    position: relative;
    padding: var(--toggle-padding);

    width: var(--toggle-width);
    height: var(--toggle-height);

    border: solid var(--toggle-border-width) var(--toggle-border);
    border-radius: calc(var(--toggle-height) / 2);
    background-color: var(--toggle-background);
    box-shadow: 0 1px 2px var(--toggle-shadow);

    transition: var(--duration) ease-in-out;
    transition-property: border-color, background-color, box-shadow;
}

input[type="checkbox"].toggle:not(:disabled) { cursor: pointer; }
input[type="checkbox"].toggle:disabled { cursor: no-drop; }

input[type="checkbox"].toggle::after {
    content: "";

    display: block;
    position: absolute;
    left: -1px;
    top: -1px;
    z-index: 1;
    box-sizing: border-box;

    width: calc(100% + 2px);
    height: calc(100% + 2px);

    border-radius: inherit;
    background-color: var(--black);
    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}

input[type="checkbox"].toggle:not(:disabled):is(:hover, :focus-visible) { --checkbox-shadow: oklch(from var(--foreground) l c h/0.05); }
input[type="checkbox"].toggle:not(:disabled):is(:hover, :focus-visible)::after { opacity: 0.1 }

input[type="checkbox"].toggle:not(:disabled):active { --checkbox-shadow: oklch(from var(--foreground) l c h/0.1); }
input[type="checkbox"].toggle:not(:disabled):active::after { opacity: 0.2 }
input[type="checkbox"].toggle:not(:disabled):active::before { width: calc(var(--toggle-height) - (var(--toggle-border-width) * 2) - (var(--toggle-padding) * 2) + 5px); }
input[type="checkbox"].toggle:not(:disabled):checked:active::before { left: calc(var(--toggle-width) - (calc(var(--toggle-height) - (var(--toggle-border-width) * 2) - (var(--toggle-padding) * 2))) - var(--toggle-padding) * 2 - 5px); }

input[type="checkbox"].toggle:checked {
    --toggle-border: var(--accent-4);
    --toggle-background: var(--accent-5);
    --toggle-thumb: var(--accent-9);
}

input[type="checkbox"].toggle::before {
    content: "";

    display: block;
    position: absolute;
    left: var(--toggle-padding);
    top: var(--toggle-padding);
    box-sizing: border-box;

    width: calc(var(--toggle-height) - (var(--toggle-border-width) * 2) - (var(--toggle-padding) * 2));
    height: calc(var(--toggle-height) - (var(--toggle-border-width) * 2) - (var(--toggle-padding) * 2));

    border: solid var(--toggle-border-width) var(--toggle-border);
    border-radius: inherit;
    background-color: var(--toggle-thumb);

    transition: var(--duration-short) ease-out;
    transition-property: left, border-color, background-color, width;
}

input[type="checkbox"].toggle:checked::before { left: calc(var(--toggle-width) - (calc(var(--toggle-height) - (var(--toggle-border-width) * 2) - (var(--toggle-padding) * 2))) - var(--toggle-padding) * 2); }

input[type="checkbox"].toggle:disabled:not(:is(:checked, :indeterminate)) {
    --toggle-border: var(--font-lowest);
    --toggle-thumb: var(--font-lowest);
}
input[type="checkbox"].toggle:disabled:is(:checked, :indeterminate) {
    --toggle-border: var(--font-lowest);
    --toggle-background: var(--font-lowest);
    --toggle-thumb: var(--background);
}
px-tooltip { display: none; }

.tooltip {
    --tooltip-radius: 8px;
    --tooltip-text: var(--background);
    --tooltip-background: var(--foreground);

    position: fixed;
    left: 0;
    top: 0;
    padding: 6px 10px;
    z-index: 101;

    max-width: calc(100dvw - 32px);
    max-height: calc(100dvh - 32px);
    width: max-content;
    height: max-content;

    font-size: 14px;
    color: var(--tooltip-text);
    border: solid 1px oklch(from var(--black) l c h/0.2);
    border-radius: var(--tooltip-radius);
    background-color: oklch(from var(--tooltip-background) l c h/var(--backdrop-blur-opacity-deep));
    opacity: 0;
    box-shadow: 0 2px 6px var(--shadow);
    backdrop-filter: var(--backdrop-blur);
    pointer-events: none;
}

.tooltip .key {
    --key-foreground: oklch(from var(--tooltip-text) l c h/0.5);
    --key-background: transparent;
}
:root, :root.light {
    --background: var(--white);
    --foreground: var(--dark);

    --depth-10: var(--gray-10);
    --depth-9: var(--gray-9);
    --depth-8: var(--gray-8);
    --depth-7: var(--gray-7);
    --depth-6: var(--gray-6);
    --depth-5: var(--gray-5);
    --depth-4: var(--gray-4);
    --depth-3: var(--gray-3);
    --depth-2: var(--gray-2);
    --depth-1: var(--gray-1);
    --depth-0: var(--gray-0);

    --accent-10: var(--accent-depth-10);
    --accent-9: var(--accent-depth-9);
    --accent-8: var(--accent-depth-8);
    --accent-7: var(--accent-depth-7);
    --accent-6: var(--accent-depth-6);
    --accent-5: var(--accent-depth-5);
    --accent-4: var(--accent-depth-4);
    --accent-3: var(--accent-depth-3);
    --accent-2: var(--accent-depth-2);
    --accent-1: var(--accent-depth-1);
    --accent-0: var(--accent-depth-0);

    --tint-border: oklch(from var(--accent-8) calc(l + 0.05) c h);
    --tint-background: oklch(from var(--accent-9) calc(l + 0.05) c h);

    --font: var(--dark);
    --font-title: var(--dark);
    --font-sub-title: var(--depth-4);
    --font-content: var(--depth-5);
    --font-sub: var(--depth-6);
    --font-lowest: var(--depth-8);

    --border: oklch(from var(--depth-9) calc(l + 0.03) c h);
    --border-active: var(--accent-9);
    
    --component-border: var(--depth-9);

    --shadow: oklch(from var(--foreground) l c h/0.1);

    --sub-area-background: oklch(from var(--depth-9) calc(l + 0.08) c h);

    --information-background: var(--information-light);
    --information-foreground: var(--information-deep);
    --alert-background: var(--alert-light);
    --alert-foreground: var(--alert-deep);
    --warning-background: var(--warning-light);
    --warning-foreground: var(--warning-deep);
    --critical-background: var(--critical-light);
    --critical-foreground: var(--critical-deep);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: var(--dark);
        --foreground: var(--white);

        --depth-10: var(--gray-0);
        --depth-9: var(--gray-1);
        --depth-8: var(--gray-2);
        --depth-7: var(--gray-3);
        --depth-6: var(--gray-4);
        --depth-5: var(--gray-5);
        --depth-4: var(--gray-6);
        --depth-3: var(--gray-7);
        --depth-2: var(--gray-8);
        --depth-1: var(--gray-9);
        --depth-0: var(--gray-10);

        --accent-10: oklch(from var(--accent-depth-0) calc(l + 0.2) calc(c - 0.09) h);
        --accent-9: oklch(from var(--accent-depth-1) calc(l + 0.18) calc(c - 0.08) h);
        --accent-8: oklch(from var(--accent-depth-2) calc(l + 0.16) calc(c - 0.07) h);
        --accent-7: oklch(from var(--accent-depth-3) calc(l + 0.14) calc(c - 0.06) h);
        --accent-6: oklch(from var(--accent-depth-4) calc(l + 0.12) calc(c - 0.05) h);
        --accent-5: oklch(from var(--accent-depth-5) calc(l + 0.10) calc(c - 0.04) h);
        --accent-4: oklch(from var(--accent-depth-6) calc(l + 0.08) calc(c - 0.03) h);
        --accent-3: oklch(from var(--accent-depth-7) calc(l + 0.06) calc(c - 0.02) h);
        --accent-2: oklch(from var(--accent-depth-8) calc(l + 0.04) calc(c - 0.01) h);
        --accent-1: oklch(from var(--accent-depth-9) calc(l + 0.02) c h);
        --accent-0: oklch(from var(--accent-depth-10) l c h);

        --tint-border: var(--accent-8);
        --tint-background: var(--accent-9);

        --font: var(--white);
        --font-title: var(--white);
        --font-sub-title: var(--depth-4);
        --font-content: var(--depth-3);
        --font-sub: var(--depth-5);
        --font-lowest: var(--depth-6);

        --border: oklch(from var(--depth-1) calc(l + 0.03) c h);
        --border-active: var(--accent-1);
        
        --component-border: var(--depth-7);

        --shadow: oklch(from var(--black) l c h/0.3);

        --sub-area-background: oklch(from var(--depth-9) calc(l + 0.08) c h);

        --information-background: var(--information-deep);
        --information-foreground: var(--information-light);
        --alert-background: var(--alert-deep);
        --alert-foreground: var(--alert-light);
        --warning-background: var(--warning-deep);
        --warning-foreground: var(--warning-light);
        --critical-background: var(--critical-deep);
        --critical-foreground: var(--critical-light);
    }
}

:root.dark {
    --background: var(--dark);
    --foreground: var(--white);

    --depth-10: var(--gray-0);
    --depth-9: var(--gray-1);
    --depth-8: var(--gray-2);
    --depth-7: var(--gray-3);
    --depth-6: var(--gray-4);
    --depth-5: var(--gray-5);
    --depth-4: var(--gray-6);
    --depth-3: var(--gray-7);
    --depth-2: var(--gray-8);
    --depth-1: var(--gray-9);
    --depth-0: var(--gray-10);

    --accent-10: var(--accent-depth-0);
    --accent-9: var(--accent-depth-1);
    --accent-8: var(--accent-depth-2);
    --accent-7: var(--accent-depth-3);
    --accent-6: var(--accent-depth-4);
    --accent-5: var(--accent-depth-5);
    --accent-4: var(--accent-depth-6);
    --accent-3: var(--accent-depth-7);
    --accent-2: var(--accent-depth-8);
    --accent-1: var(--accent-depth-9);
    --accent-0: var(--accent-depth-10);

    --tint-border: var(--accent-8);
    --tint-background: var(--accent-9);

    --font: var(--white);
    --font-title: var(--white);
    --font-sub-title: var(--depth-4);
    --font-content: var(--depth-3);
    --font-sub: var(--depth-5);
    --font-lowest: var(--depth-6);

    --border: oklch(from var(--depth-1) calc(l + 0.03) c h);
    --border-active: var(--accent-1);
    
    --component-border: var(--depth-7);

    --shadow: oklch(from var(--black) l c h/0.3);

    --sub-area-background: oklch(from var(--depth-9) calc(l + 0.08) c h);

    --information-background: var(--information-deep);
    --information-foreground: var(--information-light);
    --alert-background: var(--alert-deep);
    --alert-foreground: var(--alert-light);
    --warning-background: var(--warning-deep);
    --warning-foreground: var(--warning-light);
    --critical-background: var(--critical-deep);
    --critical-foreground: var(--critical-light);
}
:root {
    --white: oklch(1 0 0);
    --dark: oklch(0.2 0 0);
    --black: oklch(0 0 0);

    --gray-10: oklch(1 0 0);
    --gray-9: oklch(0.9 0 0);
    --gray-8: oklch(0.8 0 0);
    --gray-7: oklch(0.7 0 0);
    --gray-6: oklch(0.6 0 0);
    --gray-5: oklch(0.5 0 0);
    --gray-4: oklch(0.4 0 0);
    --gray-3: oklch(0.3 0 0);
    --gray-2: oklch(0.2 0 0);
    --gray-1: oklch(0.1 0 0);
    --gray-0: oklch(0 0 0);

    /* --accent: oklch(0.6 0.22 257);
    --accent-depth-10: oklch(from var(--accent) calc(l + 0.36) calc(c - 0.09) h);
    --accent-depth-9: oklch(from var(--accent) calc(l + 0.3) c h);
    --accent-depth-8: oklch(from var(--accent) calc(l + 0.2) c h);
    --accent-depth-7: oklch(from var(--accent) calc(l + 0.1) c h);
    --accent-depth-6: var(--accent);
    --accent-depth-5: oklch(from var(--accent) calc(l - 0.1) c h);
    --accent-depth-4: oklch(from var(--accent) calc(l - 0.2) c h);
    --accent-depth-3: oklch(from var(--accent) calc(l - 0.3) c h);
    --accent-depth-2: oklch(from var(--accent) calc(l - 0.4) c h);
    --accent-depth-1: oklch(from var(--accent) calc(l - 0.5) c h);
    --accent-depth-0: oklch(from var(--accent) calc(l - 0.6) c h); */

    --accent: hsl(211 100 50);
    --accent-depth-10: hsl(from var(--accent) h s calc(l + 50));
    --accent-depth-9: hsl(from var(--accent) h s calc(l + 40));
    --accent-depth-8: hsl(from var(--accent) h s calc(l + 30));
    --accent-depth-7: hsl(from var(--accent) h s calc(l + 20));
    --accent-depth-6: hsl(from var(--accent) h s calc(l + 10));
    --accent-depth-5: var(--accent);
    --accent-depth-4: hsl(from var(--accent) h s calc(l - 10));
    --accent-depth-3: hsl(from var(--accent) h s calc(l - 20));
    --accent-depth-2: hsl(from var(--accent) h s calc(l - 30));
    --accent-depth-1: hsl(from var(--accent) h s calc(l - 40));
    --accent-depth-0: hsl(from var(--accent) h s calc(l - 50));

    --red: oklch(0.61 0.22 26.25);
    --orange: oklch(0.73 0.17 48.52);
    --yellow: oklch(0.94 0.18 113.08);
    --green: oklch(0.63 0.2 143.89);
    --lightgreen: oklch(0.84 0.23 144.27);
    --mint: oklch(0.87 0.14 189.87);
    --deepblue: oklch(0.4 0.2 269.1);
    --blue: oklch(0.55 0.23 265.74);
    --sky: oklch(0.74 0.13 253);
    --deeppurple: oklch(0.47 0.21 329.01);
    --purple: oklch(0.61 0.28 311.06);
    --pink: oklch(0.86 0.11 333.03);

    --sun: oklch(0.83 0.16 78.48);
    --moon: oklch(0.91 0.14 95.48);
    --mercury: oklch(0.63 0.08 50);
    --venus: oklch(0.81 0.08 19.98);
    --earth: oklch(0.69 0.16 141.69);
    --mars: oklch(0.57 0.2 29.61);
    --jupiter: oklch(0.75 0.1 63.45);
    --saturn: oklch(0.86 0.08 78.91);
    --uranus: oklch(0.68 0.17 257.76);
    --neptune: oklch(0.45 0.2 268.73);
    --pluto: oklch(0.83 0.03 76.17);

    --information-deep: oklch(0.4 0.2 269.1);
    --information-light: oklch(0.85 0.07 281.18);
    --alert-deep: oklch(0.26 0.06 114.05);
    --alert-light: oklch(0.98 0.08 110.85);
    --warning-deep: oklch(0.69 0.2 42.5);
    --warning-light: oklch(0.88 0.07 53.91);
    --critical-deep: oklch(0.57 0.23 28);
    --critical-light: oklch(0.87 0.06 17.01);
}
#note-list {
    --mac-traffic-lights-height: 40px;

    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    z-index: 1;
    
    width: var(--note-list-width);
    height: 100%;

    color: var(--font);

    border-right: solid 1px var(--border);
}

#note-list > .wrap {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);

    width: 100%;
    height: 100%;
}

#note-list > .wrap > .top {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 0;

    width: 100%;
    
    user-select: none;
}

#note-list > .wrap > .top > :is(.left, .center, .right) {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#note-list > .wrap > .top > .center {
    position: relative;

    width: 100%;
    height: 100%;
    flex: 1;
}

#note-list > .wrap > .top > .center > p {
    overflow: hidden;

    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--font);
}

#note-list > .wrap > .list {
    position: relative;
    overflow-x: hidden;
    scrollbar-width: none;

    width: 100%;
    height: 100%;

    mask-image: linear-gradient(transparent, white 10px, white calc(100% - 10px), transparent);
}

body.env-electron.os-macos #sidebar-home[style*="none;"] + #note-list > .wrap > .list { padding-top: var(--mac-traffic-lights-height); }

#note-list > .wrap > .list > .wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 25px 15px 25px 0;

    width: 100%;
    height: max-content;

    transition: padding var(--duration-medium) ease-in-out;
}

#note-list > .wrap > .list > .wrap > :is(.empty-wrap, .loading-wrap) {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    height: 100%;
    flex: 1;

    font-size: 12px;
    text-align: center;
    color: var(--font-sub);
    user-select: none;
}
#note-list > .wrap > .list > .wrap > :is(.empty-wrap, .loading-wrap) > i { font-size: 16px; }
#note-list > .wrap > .list > .wrap:is(:not(:has(.list-item)), .loading) { height: 100%; }
#note-list > .wrap > .list > .wrap:not(:has(.list-item)) > .empty-wrap { display: flex; }
#note-list > .wrap > .list > .wrap:not(:has(.list-item)) > :not(.empty-wrap) { display: none; }
#note-list > .wrap > .list > .wrap.loading > .loading-wrap { display: flex; }
#note-list > .wrap > .list > .wrap.loading > :not(.loading-wrap) { display: none; }

#note-list > .wrap > .list > .wrap > .partition {
    position: relative;

    width: 100%;
    height: 1px;

    background-color: var(--border);
}

#note-list > .wrap > .list > .wrap:not(:has(> .list-group.system.pinned > .list-item)) > .list-group.system.pinned { display: none; }
#note-list > .wrap > .list > .wrap:not(:has(> .list-group.system.pinned > .list-item)) > .partition { display: none; }
#note-list > .wrap > .list > .wrap > .list-group.system.favorites { display: none; }

#note-list > .wrap > .bottom {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 10px;

    width: 100%;
    height: max-content;
}

#note-list > .wrap > .bottom > *:is(.left, .right) {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}

#note-list .list-group {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 100%;
    height: max-content;
}

#note-list .list-title {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    margin-bottom: 5px;
    padding: 0 10px;
    overflow: hidden;

    width: 100%;

    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--font-content);
    user-select: none;
}

body.env-electron #note-list .list-title {
    app-region: drag;
}

body.env-electron #note-list .list-title button {
    app-region: no-drag;
}

#note-list .list-group > label {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    right: 0;
    top: -3px;
    overflow: hidden;

    width: 24px;
    height: 24px;

    font-size: 12px;
    color: var(--font-sub);
    border-radius: 12px;
    cursor: pointer;
}

#note-list .list-group > label > * { pointer-events: none; }
#note-list .list-group > label > input { display: none; }
#note-list .list-group > label:has(input:checked) > i.fa-caret-right { display: none; }
#note-list .list-group > label:has(input:not(:checked)) > i.fa-caret-down { display: none; }
#note-list .list-group:has(label > input:not(:checked)) > .list-item { display: none; }

#note-list .list-group > label::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    background-color: var(--foreground);
    opacity: 0;

    transition: opacity var(--duration) linear;
}
#note-list .list-group > label:is(:hover, :focus-visible)::after { opacity: 0.1; }
#note-list .list-group > label:active::after { opacity: 0.2; }

#note-list .list-item {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-rows: 40px;
    padding: 10px 15px;
    overflow: hidden;

    width: 100%;

    border-radius: 8px;
    cursor: pointer;
}

#note-list .list-item > .left {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 17px 14px;
    place-content: center;
    gap: 4px;

    width: 100%;
}

#note-list .list-item > .left > .title {
    overflow: hidden;

    width: 100%;

    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--font);
    user-select: none;
}

#note-list .list-item > .left > .title > i {
    margin-right: 2px;

    font-size: 12px;
    color: var(--font-sub);
}

#note-list .list-item > .left > .description {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-rows: 100%;

    width: 100%;
}

#note-list .list-item > .left > .description > .gauge {
    --percentage: 0%;

    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 4px;

    width: 40px;
    height: 14px;

    border-radius: 7px;
    background-color: oklch(from var(--foreground) l c h/0.3);
    user-select: none;
}

#note-list .list-item > .left > .description > .gauge::before {
    content: "";
    
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    width: var(--percentage);
    height: 100%;

    background-color: oklch(from var(--foreground) l c h/0.3);

    transition: width var(--duration-medium) ease-in-out;
}

#note-list .list-item > .left > .description > .gauge > span {
    position: relative;

    font-size: 11px;
    font-weight: 700;
    color: var(--background);
}

#note-list .list-item > .left > .description > .datetime {
    overflow: hidden;

    width: 100%;

    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--font-sub);
    user-select: none;
}

#note-list .list-item > .right {
    position: relative;
    overflow: hidden;

    width: 40px;
    height: 40px;

    font-size: 14px;
    color: var(--font-sub);
    border-radius: 4px;
    background-color: oklch(from var(--foreground) l c h/0.05);
}

#note-list .list-item > .right img {
    display: block;

    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;

    user-select: none !important;
}

#note-list .list-item > .right:has(> img) { margin-left: 8px; }
#note-list .list-item > .right:not(:has(> img)) { display: none; }

#note-list .list-item > .after {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: -10px;

    width: 40px;
    height: 40px;
}

#note-list .list-item:hover > .right { display: none; }
#note-list .list-item:hover > .after { display: flex; }

#note-list .list-item::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background-color: var(--foreground);
    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}

#note-list .list-item:is(:hover, :focus-visible)::after { opacity: 0.075; }
#note-list .list-item:active::after { opacity: 0.12; }

#note-list:not(:has(.multi-selected)) .list-item.selected { background-color: oklch(from var(--foreground) l c h/0.1); }

#note-list .list-item.multi-selected { background-color: oklch(from var(--accent) l c h/0.1); }
#note-list .list-item.selected.multi-selected { background-color: oklch(from var(--accent) l c h/0.2); }

#note-list .list-item.temp-selected { background-color: oklch(from var(--foreground) l c h/0.1); }
#note-list:has(.temp-selected) .list-item:not(.temp-selected) { background-color: transparent !important; }

#note-list .resize-handle {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    right: 0;
    top: 0;
    padding: 0 4px;

    width: max-content;
    height: 100%;

    opacity: 0;
    cursor: ew-resize;
    touch-action: none;
}

#note-list .resize-handle::before {
    content: "";

    display: block;
    position: relative;

    width: 2px;
    height: 40px;

    border-radius: 1px;
    background-color: var(--foreground);
}

#note-list .resize-handle:active { cursor: grabbing; }

#note-list:hover .resize-handle { opacity: 0.1; }
#note-list:hover .resize-handle:is(:hover, :focus-visible) { opacity: 0.2; }
#note-list:hover .resize-handle:active { opacity: 0.3; }

body[data-desktop-sidebar="off"] #note-list > .wrap > .list > .wrap { padding: 25px 7.5px; }

#note-list.trash [data-btn-toggle-trash] {
    --button-icon: var(--background);
    --button-background: var(--font-sub);
}

#note-list > .wrap > .bottom {
    position: absolute;
    right: 6px;
    top: 20px;

    pointer-events: none;
}

#note-list > .wrap > .bottom button { 
    app-region: no-drag;
    pointer-events: auto;
}
#note-main {
    --mac-traffic-lights-width: 80px;

    container: note-main-container / inline-size;

    position: relative;
    overflow-x: hidden;
    scrollbar-width: none;
    z-index: 0;

    width: 100%;
    height: 100%;
    flex: 1;
}

#note-main > input { display: none; }

#note-main > .control {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: space-between;
    left: 0;
    top: 0;
    padding: 15px 15px 0;
    z-index: 1;

    width: 100%;

    pointer-events: auto;
    app-region: drag;

    transition: opacity var(--duration-medium) ease-in-out;
}

#note-main > .control > *:is(.left, .center, .right) {
    --menu-backdrop-opacity: 1;

    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 5px;

    width: max-content;
    height: max-content;
    flex-shrink: 0;

    pointer-events: auto;
    app-region: no-drag;
}

#note-main > .control > *:is(.left, .center, .right)::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    box-sizing: border-box;
    
    width: 100%;
    height: 100%;

    /* border: solid 1px var(--border); */
    border-radius: 1000px;
    background-color: oklch(from var(--background) l c h/var(--backdrop-blur-opacity));
    /* box-shadow: 0 2px 6px var(--shadow); */
    opacity: var(--menu-backdrop-opacity);
    backdrop-filter: var(--backdrop-blur);
}

#note-main > .control > .center > button.active-toolbar-menu {
    --button-icon: var(--font);
}

#note-main > .control > .center > button.active-toolbar-menu > i {
    opacity: 1;
}

#note-main > .control > .right > [data-btn-save] {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 32px;
    height: 32px;
}

#note-main > .floating {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    left: 0;
    bottom: 0;
    padding: 0 0 10px 10px;
    z-index: 1;

    width: max-content;
    height: max-content;

    transition: opacity var(--duration-medium) ease-in-out;
}

#note-main > .body {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    z-index: 0;
    overflow-x: hidden;

    width: 100%;
    height: 100%;
}

/* #note-main > .body > .cover {
    position: relative;
    overflow: hidden;

    width: 100%;
    height: 200px;
}

#note-main > .body > .cover > img {
    display: block;
    position: relative;

    width: 100%;
    height: 100%;
    object-fit: cover;

    border-bottom: solid 1px var(--border);
}

#note-main > .body > .cover::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    width: 10px;
    height: 100%;

    background-image: linear-gradient(90deg, var(--background), transparent);
    opacity: 0;

    transition: opacity var(--duration-medium) ease-in-out;
}

#note-main > .body > .wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;

    max-width: 100%;
    width: 780px;
    height: max-content;

    color: var(--font);
} */

/* .note-wrap .placeholder {
    position: absolute;
    z-index: 0;

    opacity: 0.2;
}

.note-wrap .placeholder * { pointer-events: none; } */

.note-wrap .input-area {
    position: relative;
    z-index: 1;

    width: 100%;
    height: max-content;

    overflow-wrap: break-word;
}

.note-wrap .input-area:focus-visible { outline: unset; }

.note-wrap > .row {
    position: relative;

    width: 100%;
    height: max-content;
}

#note-main > .body > nt-note > .note-inner > .cover-wrap:not(:has(> img)) { display: none; }

#note-main > .body:has(> nt-note > .note-inner > .cover-wrap > img) > .wrap { padding-top: 70px; }
#note-main:has(> .body > nt-note > .note-inner > .cover-wrap > img) > .control > *:is(.left, .center, .right) { --menu-backdrop-opacity: 1; }
#note-main:has(> .body > nt-note > .note-inner > .cover-wrap > img) > .control > *:is(.left, .center, .right)::before {
    border: solid 1px var(--border);
    box-shadow: 0 2px 6px var(--shadow);
}

/* body[data-desktop-note-list="on"] #note-main [data-btn-show-list] { display: none; } */

/* macOS: offset left icons past traffic light buttons (trafficLightPosition x:29, ~81px wide) */
body.env-electron.os-macos #sidebar-home[style*="none;"] + #note-list[style*="none;"] + #note-main > .control > .left { padding-left: var(--mac-traffic-lights-width); }

/* Windows: offset right buttons away from titlebar overlay buttons (~138px from right) */
/* body.env-electron.os-windows #note-main > .control > .right { margin-right: 130px; } */

/* control peeking */
body[data-desktop-sidebar="off"][data-desktop-note-list="off"] #note-main:not(.peek-control) > *:is(.control, .floating) {
    opacity: 0;
    pointer-events: none;
}
body[data-desktop-sidebar="off"][data-desktop-note-list="off"] #note-main:not(.peek-control) .note-style-buttons {
    opacity: 0;
    pointer-events: none;
}

body[data-desktop-sidebar="off"][data-desktop-note-list="off"] #note-main.top-menu-open > .control {
    opacity: 1;
    pointer-events: auto;
}

body[data-desktop-sidebar="off"][data-desktop-note-list="off"] #note-main.top-menu-open > .control > .center {
    opacity: 1;
    pointer-events: auto;
}

/* editor padding */
#note-main > .body > nt-note {
    --padding-left: 50px;
    --padding-right: 50px;
}

/* narrow layout: hide .right, move .center to right */
@container note-main-container (max-width: 479px) {
    #note-main > .control > .right { display: none; }
    #note-main > .control > .center { margin-left: auto; }
}

#note-main > .ambient-light {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;

    width: 100%;
    height: 50px;

    background-image: linear-gradient(oklch(from var(--accent) l c h/0.1), transparent);
    opacity: 0;
    pointer-events: none;
}

#note-main > .body > nt-note > .save-indicator-wrap {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    margin-top: 60px;
    z-index: 10;

    width: 100%;
    height: max-content;

    pointer-events: none;
}

#note-main > .body:has(> nt-note > .note-inner > .cover-wrap > img) > nt-note > .save-indicator-wrap { margin-top: 210px; }

#note-main > .body > nt-note > .save-indicator-wrap > * { pointer-events: auto; }

#note-main > .body > nt-note > .save-indicator-wrap button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    height: max-content;

    background-color: oklch(from var(--background) l c h/var(--backdrop-blur-opacity));
    backdrop-filter: var(--backdrop-blur);
}

#note-main > .body > nt-note > .save-indicator-wrap button > div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;

    height: max-content;
}

#note-main > .body > nt-note > .save-indicator-wrap button > * {
    font-size: 12px;
    color: var(--font-sub);
}

#note-main > .body > nt-note > .save-indicator-wrap button.deleted { background-color: oklch(from var(--red) l c h/0.1); }
#note-main > .body > nt-note > .save-indicator-wrap button.deleted > * { color: var(--red); }

#note-main > .body > nt-note > .save-indicator-wrap button .ellipsis { margin: 0 3px; }
#note-main > .body > nt-note > .save-indicator-wrap button .ellipsis::before { content: "/"; }
#note-main > .body > nt-note > .save-indicator-wrap button.ellipsis > .ellipsis::before { content: "/ ... /"; }
#note-main > .body > nt-note > .save-indicator-wrap button .partition { margin: 0 6px; }

#note-main > .control [data-btn-app-menu] {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;

    user-select: none;
}
#note-main > .control [data-btn-app-menu] > img[alt="Notetrix"] {
    width: 16px;
    height: 16px;
    
    opacity: 0.4;
}
body.env-electron.os-windows #note-main > .control [data-btn-app-menu] { display: flex; }

#note-main > .scroll-cover {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    width: 100%;
    height: 100px;

    background-image: linear-gradient(oklch(from var(--background) l c h/0.9) 5%, transparent);
    opacity: 0;
    pointer-events: none;

    transition: opacity var(--duration-medium) linear;
}

#note-main.scrolled > .scroll-cover { opacity: 1; }

#note-main > .control > .right > .window-control {
    display: none;
    position: relative;
    align-items: center;
    margin-left: 10px;
    padding-left: 13px;
}

#note-main > .control > .right > .window-control::before {
    content: "";

    display: block;
    position: absolute;
    left: 0;

    width: 3px;
    height: 10px;

    border-radius: 1.5px;
    background-color: oklch(from var(--foreground) l c h/0.1);
}

#note-main > .control > .right > .window-control > button > i { font-size: 10px; }

body.env-electron.os-windows #note-main > .control > .right > .window-control { display: flex; }

body:not(.window-maximized) #note-main > .control > .right > .window-control > [data-btn-window-restore] { display: none; }
body.window-maximized #note-main > .control > .right > .window-control > [data-btn-window-maximize] { display: none; }

#note-main > .floating-previous-note-wrap {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 60px;
    padding: 0 10px;
    z-index: 11;

    width: 100%;
    height: max-content;

    pointer-events: none;
}

#note-main > .floating-previous-note-wrap > button {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    justify-content: center;
    gap: 10px;
    padding: 0 15px !important;

    height: 40px;

    text-align: left;
    border-radius: 20px;
    background-color: oklch(from var(--foreground) l c h/var(--backdrop-blur-opacity));
    backdrop-filter: var(--backdrop-blur);
    pointer-events: auto;
}

#note-main > .floating-previous-note-wrap > button * { color: var(--background); }
#sidebar-home {
    --mac-traffic-lights-height: 30px;

    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 15px;
    z-index: 2;

    width: var(--sidebar-width);
    height: 100%;

    color: var(--font);
}

#sidebar-home::after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;

    width: 1px;
    height: 100%;

    background-color: var(--border);
}

/* #sidebar-home:has(+ #note-list[style*="none"])::after { content: ""; } */

#sidebar-home > .wrap {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, auto);

    width: 100%;
    height: 100%;

    border: solid 1px var(--border);
    border-radius: 8px;
    background-color: var(--sub-area-background);
    box-shadow: 0 2px 6px var(--shadow);
}

#sidebar-home > .wrap > .list {
    position: relative;
    overflow-x: hidden;
    scrollbar-width: none;

    width: 100%;
    height: 100%;

    mask-image: linear-gradient(transparent, white 10px, white calc(100% - 10px), transparent);
}

body.env-electron.os-macos #sidebar-home > .wrap > .list { padding-top: var(--mac-traffic-lights-height); }

#sidebar-home > .wrap > .list > .wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;

    width: 100%;
    height: max-content;
}

#sidebar-home > .wrap > .bottom {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 10px;

    width: 100%;
    height: max-content;
}

#sidebar-home > .wrap > .bottom > *:is(.left, .right) {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}

#sidebar-home .list-control {
    display: flex;
    position: relative;
    align-items: center;
    padding: 0 11px 0 18px;

    width: 100%;
}

body.env-electron #sidebar-home .list-control {
    app-region: drag;
}

#sidebar-home .list-control > label {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    width: 24px;
    height: 24px;

    font-size: 14px;
    color: var(--font);
    border-radius: 24px;
    cursor: pointer;
    
    transition: opacity var(--duration) ease-in-out;
}

body.env-electron #sidebar-home .list-control > label {
    app-region: no-drag;
}

#sidebar-home .list-control > label * { pointer-events: none; }

#sidebar-home .list-control > label > input { display: none; }
#sidebar-home .list-control > label:not(:has(input:checked)) i.fa-chevron-up { display: none; }
#sidebar-home .list-control > label:has(input:checked) i.fa-chevron-down { display: none; }

#sidebar-home .list-control:has(label > input:checked) { margin-bottom: -10px; }

#sidebar-home .list-control:not(:has(label > input:checked)) ~ .list-group.system { display: none; }

#sidebar-home .list-control > label::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background-color: var(--foreground);
    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}

#sidebar-home .list-control > label:is(:hover, :focus-visible)::after { opacity: 0.1; }
#sidebar-home .list-control > label:active::after { opacity: 0.2; }

#sidebar-home .list-group {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: max-content;
}

#sidebar-home .list-title {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: 8px;
    padding: 0 15px 0 11px;

    width: 100%;
}

#sidebar-home .list-title > .title {
    display: grid;
    grid-template-columns: minmax(0, auto) max-content;
    gap: 8px;
    padding-left: 11px;

    max-width: 100%;
    width: max-content;

    user-select: none;
}

#sidebar-home .list-title > .title > p {
    position: relative;
    overflow: hidden;

    max-width: 100%;
    width: max-content;

    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--font-content);
}

#sidebar-home .list-title > .title > div {
    display: flex;
    position: relative;
    align-items: center;

    font-size: 12px;
    color: var(--font-sub);
}

#sidebar-home .list-title > .after {
    display: flex;
    position: relative;
    align-items: center;
}

#sidebar-home .list-title > .after > button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    min-width: unset;
    min-height: unset;
    width: 24px;
    height: 24px;
}

#sidebar-home .list-group > [data-btn-folder-trash] { order: 9999999; }
#sidebar-home:not(.trash) .list-group > [data-btn-folder-trash] { display: none; }

#sidebar-home .sidebar-page {
    --depth: 1;

    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 40px minmax(0, auto);

    width: 100%;
}

#sidebar-home .sidebar-page > .wrap {
    display: grid;
    position: relative;
    grid-template-columns: 24px minmax(0, 1fr) minmax(24px, auto);
    place-content: center;
    align-items: center;
    padding: 0 15px 0 18px;

    width: 100%;

    cursor: pointer;
}

#sidebar-home .sidebar-page > .wrap > .media-wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
}

#sidebar-home .sidebar-page > .wrap > .media-wrap > .media {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    width: 24px;
    height: 24px;
    
    transition: opacity var(--duration) ease-in-out;
}

#sidebar-home .sidebar-page > .wrap > .media-wrap > .media * {
    font-size: 16px !important;
    color: var(--font);
}

#sidebar-home .sidebar-page > .wrap > .media-wrap > .media *:is(div, img) {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}

#sidebar-home .sidebar-page[data-btn-sign-in][data-authenticated="true"] > .wrap > .media-wrap > .media > .auth-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px !important;
    font-weight: 700;
    color: white !important;
    border-radius: 999px;
    background: linear-gradient(135deg, #4f7cff, #2ac6ff);
}

#sidebar-home .sidebar-page > .wrap > .media-wrap > label {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    width: 24px;
    height: 24px;

    font-size: 14px;
    color: var(--font);
    border-radius: 24px;
    cursor: pointer;
    
    transition: opacity var(--duration) ease-in-out;
}

#sidebar-home .sidebar-page > .wrap > .media-wrap > label * { pointer-events: none; }

#sidebar-home .sidebar-page > .wrap > .media-wrap > label > input { display: none; }
#sidebar-home .sidebar-page > .wrap > .media-wrap > label:not(:has(input:checked)) i.fa-caret-down { display: none; }
#sidebar-home .sidebar-page > .wrap > .media-wrap > label:has(input:checked) i.fa-caret-right { display: none; }

#sidebar-home .sidebar-page > .wrap > .media-wrap > label::after {
    content: "";

    display: block;
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background-color: var(--foreground);
    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}

#sidebar-home .sidebar-page > .wrap > .media-wrap > label:is(:hover, :focus-visible)::after { opacity: 0.1; }
#sidebar-home .sidebar-page > .wrap > .media-wrap > label:active::after { opacity: 0.2; }

#sidebar-home .sidebar-page > .wrap > .title {
    position: relative;
    padding-left: 6px;
    overflow: hidden;

    width: 100%;

    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--font-content);
    user-select: none;
}

#sidebar-home .sidebar-page > .wrap > .after {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: max-content;
    height: 24px;
}

#sidebar-home .sidebar-page > .wrap > .after > span {
    display: inline-block;
    padding: 0 8px;

    min-width: 24px;

    font-size: 11px;
    text-align: center;
    color: var(--font-content);
    user-select: none;
}

#sidebar-home .sidebar-page > .child-list {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: max-content;
}
#sidebar-home .sidebar-page:has(> .child-list > .sidebar-page) > .wrap::before {
    content: "";

    display: block;
    position: absolute;
    left: 10px;

    width: 4px;
    height: 4px;

    border-radius: 2px;
    background-color: oklch(from var(--foreground) l c h/0.2);
}

#sidebar-home .sidebar-page:not(:has(> .child-list > .sidebar-page)) > .wrap > .media-wrap > label { display: none; }

#sidebar-home .sidebar-page:has(> .child-list > .sidebar-page) > .wrap > .media-wrap > label { opacity: 0; }
#sidebar-home .sidebar-page:has(> .child-list > .sidebar-page) > .wrap:hover > .media-wrap > label { opacity: 1; }
#sidebar-home .sidebar-page:has(> .child-list > .sidebar-page) > .wrap:hover > .media-wrap > .media { opacity: 0; }

#sidebar-home .child-list .sidebar-page > .wrap { padding-left: calc(34px * var(--depth)); }

#sidebar-home .sidebar-page:not(:has(> .wrap > .media-wrap > label > input:checked)) .child-list { display: none; }

#sidebar-home .sidebar-page *:not(label, .wrap, button) { pointer-events: none; }
#sidebar-home .sidebar-page *:is(label, .wrap, button) { pointer-events: auto; }

#sidebar-home .sidebar-page.selected > .wrap { background-color: oklch(from var(--foreground) l c h/0.075); }

#sidebar-home .sidebar-page > .wrap button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    min-width: unset;
    min-height: unset;
    width: 24px;
    height: 24px;
}

#sidebar-home .sidebar-page[data-btn-folder] > .wrap:not(:hover) > .after > button { display: none; }
#sidebar-home .sidebar-page[data-btn-folder] > .wrap:hover > .after > span { display: none; }

#sidebar-home .resize-handle {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    right: 15px;
    top: 0;
    padding: 0 4px;

    width: max-content;
    height: 100%;

    opacity: 0;
    cursor: ew-resize;
    touch-action: none;
}

#sidebar-home .resize-handle::before {
    content: "";

    display: block;
    position: relative;

    width: 2px;
    height: 40px;

    border-radius: 1px;
    background-color: var(--foreground);
}

#sidebar-home .resize-handle:active { cursor: grabbing; }

#sidebar-home:hover .resize-handle { opacity: 0.1; }
#sidebar-home:hover .resize-handle:is(:hover, :focus-visible) { opacity: 0.2; }
#sidebar-home:hover .resize-handle:active { opacity: 0.3; }

/* hints */
#sidebar-home :is(.info-no-groups, .info-no-folders, .info-no-deleted) {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    order: 999999;

    min-height: 200px;
    width: 100%;
    height: 100%;
    flex: 1;

    font-size: 12px;
    text-align: center;
    color: var(--font-content);
    user-select: none;
}

#sidebar-home:not(:has(.list-group[data-group-id])) .info-no-groups { display: flex; }
#sidebar-home:not(:has(.list-group[data-group-id])) i.fa-regular.fa-arrow-down.fa-bounce { display: inline-block; }
#sidebar-home:has(.list-group[data-group-id]):not(:has([data-btn-folder])) .info-no-folders { display: flex; }

#sidebar-home .info-no-folders > i.fa-regular.fa-arrow-up.fa-bounce {
    position: absolute;
    right: 21px;
    top: 7px;

    font-size: 14px;
    color: var(--font-sub);
    user-select: none;
    pointer-events: none;
}

#sidebar-home i.fa-regular.fa-arrow-down.fa-bounce {
    display: none;
    position: absolute;
    left: 11px;
    top: -17px;

    font-size: 14px;
    color: var(--font-sub);
    user-select: none;
    pointer-events: none;
}

#sidebar-home.trash [data-btn-toggle-trash] {
    --button-icon: var(--background);
    --button-background: var(--font-sub);
}

#sidebar-home.trash:not(:has(.list-group[data-group-id])) .info-no-deleted { display: flex; }
#sidebar-home.trash :is(.info-no-groups, .info-no-folders) { display: none !important; }

.tree-list-wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    overflow-x: hidden;
    scrollbar-width: none;
}

.tree-list-wrap > .loading-wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    min-height: 100px;
    width: 100%;
    height: 100%;

    font-size: 24px;
    color: var(--font-sub);
}

.tree-list-wrap:has(.loading-wrap) > :not(.loading-wrap) { display: none; }

.tree-list-wrap .tree-item {
    display: flex;
    position: relative;
    flex-direction: column;

    width: 100%;
    height: max-content;
    flex-shrink: 0;

    cursor: pointer;
}

.tree-list-wrap .tree-item > .wrap {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 24px) minmax(0, 24px) minmax(0, 1fr) minmax(0, auto);
    grid-template-rows: 30px;
    align-items: center;
    gap: 6px;
    padding-right: 3px;

    width: 100%;
    height: 30px;
}

.tree-list-wrap .tree-item > .wrap::before {
    display: block;
    position: absolute;
    left: -100%;
    top: 0;
    box-sizing: border-box;
    
    width: 300%;
    height: 100%;
    
    border: solid 1px oklch(from var(--accent) l c h/0.1);
    background-color: oklch(from var(--accent) l c h/0.1);
}
.tree-list-wrap .tree-item.selected > .wrap::before { content: "";}

.tree-list-wrap .tree-item > .wrap > label {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    width: 24px;
    height: 24px;

    font-size: 14px;
    color: var(--font-sub);
    cursor: pointer;
}

.tree-list-wrap .tree-item > .wrap > label > input { display: none; }
.tree-list-wrap .tree-item > .wrap > label:has(input:checked) > i.fa-caret-right { display: none; }
.tree-list-wrap .tree-item > .wrap > label:has(input:not(:checked)) > i.fa-caret-down { display: none; }

.tree-list-wrap .tree-item > .wrap > label::after {
    content: "";
    
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    border-radius: 12px;
    background-color: var(--foreground);
    opacity: 0;

    transition: opacity var(--duration) linear;
}
.tree-list-wrap .tree-item > .wrap > label:is(:hover, :focus-visible)::after { opacity: 0.1; }
.tree-list-wrap .tree-item > .wrap > label:active::after { opacity: 0.2; }

.tree-list-wrap:not(:has(.child-list > .tree-item)) .tree-item > .wrap { grid-template-columns: minmax(0, 24px) minmax(0, 1fr) minmax(0, auto); }
.tree-list-wrap .tree-item:not(:has(> .child-list > .tree-item)) > .wrap > label,
.tree-list-wrap:not(:has(.child-list > .tree-item)) .tree-item > .wrap > label {
    width: 0px;

    opacity: 0;
}

.tree-list-wrap .tree-item:not(:has(> .wrap > label > input:checked)) > .child-list { display: none; }

.tree-list-wrap .tree-item > .wrap > .media {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    font-size: 14px;
    text-align: center;
    color: var(--font-sub);
}

.tree-list-wrap .tree-item > .wrap > .media img {
    display: block !important;

    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}

.tree-list-wrap .tree-item > .wrap > .title {
    position: relative;
    overflow: hidden;

    font-size: 14px;
    line-height: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--font-content);
}

.tree-list-wrap .tree-item > .wrap > .description {
    position: relative;
    overflow: hidden;
    
    font-size: 12px;
    line-height: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--font-sub);
}

.tree-list-wrap .tree-item > .wrap { pointer-events: none; }
.tree-list-wrap .tree-item > .wrap > label { pointer-events: auto; }

.tree-list-wrap .tree-item > .child-list {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    padding-left: 10px;

    width: 100%;
    height: max-content;
    flex-shrink: 0;
}
px-dialog:has(#popover-edit-description) {
    align-items: end;
    justify-content: end;
    padding: 10px;
}

px-dialog:has(#popover-edit-description) > .wrap {
    grid-template-rows: minmax(0, 1fr);

    width: 400px;
    height: calc(100% - 50px);

    border-radius: 21px 21px 8px 21px;
}

px-dialog:has(#popover-edit-description) > .wrap > *:is(.grab, .control) { display: none; }

px-dialog:has(#popover-edit-description) > .wrap > .body { padding: 0; }

px-dialog:has(#popover-edit-description) > .wrap > .body > .title { display: none; }

px-dialog:has(#popover-edit-description) > .wrap > .body > .content { height: 100%; }

#popover-edit-description {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, auto)) minmax(0, 1fr);

    width: 100%;
    height: 100%;
}

#popover-edit-description > .top {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 15px;

    width: 100%;
}

#popover-edit-description > .top > *:is(.left, .right) {
    display: flex;
    position: relative;
}

#popover-edit-description > .top > .left > button:first-child { border-radius: var(--button-radius) 0 0 var(--button-radius); }
#popover-edit-description > .top > .left > button:last-child { border-radius: 0 var(--button-radius) var(--button-radius) 0; }
#popover-edit-description > .top > .left > button:not(:is(:first-child, :last-child)) { border-radius: 0; }
#popover-edit-description > .top > .left > button:not(:is(:first-child, :last-child))::before {
    border-left: unset;
    border-right: unset;
}

#popover-edit-description > .top > .left > button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    width: 40px;
}

#popover-edit-description > .middle {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 0 15px 12px;

    width: 100%;

    border-bottom: solid 1px var(--border);
}

#popover-edit-description > .middle > .row-preview {
    --block-text-size: 14px;
    --block-weight: 400;
    --block-text: var(--font);

    --block-root-task-mark: var(--font-content);
    --block-sub-task-mark: var(--font-sub);

    --task-total: 2;
    --task-completed: 1;

    display: grid;
    position: relative;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-rows: minmax(0, auto);

    min-height: 22px;
    width: 100%;
}

#popover-edit-description > .middle > .row-preview > .check-mark {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-right: 8px;

    width: 22px;
    height: 22px;

    cursor: pointer;
}

#popover-edit-description > .middle > .row-preview > .check-mark > .task-mark {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border: solid 1px var(--block-root-task-mark);
    border-radius: 11px;
    pointer-events: none;
}

#popover-edit-description > .middle > .row-preview > .check-mark > .task-mark::before {
    --task-percentage: calc(var(--task-completed) / var(--task-total) * 100%);

    content: "";

    display: block;
    position: absolute;
    left: 0;
    z-index: 0;

    width: inherit;
    height: inherit;

    border-radius: inherit;
    background-image: conic-gradient(var(--block-root-task-mark) var(--task-percentage), transparent var(--task-percentage));

    transition: --task-percentage var(--duration-medium) ease-in-out;
}

#popover-edit-description > .middle > .row-preview > .check-mark > .task-mark > i {
    position: relative;
    margin-top: 2px;

    font-size: calc(22px / 1.65);
    color: var(--background);

    transition: opacity var(--duration) ease-in-out;
}

#popover-edit-description > .middle > .row-preview:not(.completed) > .check-mark > .task-mark > i { display: none; }

#popover-edit-description > .middle > .row-preview > .check-mark > .subtask-mark {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: inherit;
    height: inherit;

    font-size: 14px;
    color: var(--block-sub-task-mark);
}

#popover-edit-description > .middle > .row-preview:not(.indeterminated, .completed) > .check-mark > .subtask-mark > i:not(.fa-square) { display: none; }
#popover-edit-description > .middle > .row-preview.indeterminated > .check-mark > .subtask-mark > i:not(.fa-square-minus) { display: none; }
#popover-edit-description > .middle > .row-preview.completed > .check-mark > .subtask-mark > i:not(.fa-square-check) { display: none; }

#popover-edit-description > .middle > .row-preview > .check-mark > * { pointer-events: none; }
#popover-edit-description > .middle > .row-preview > .check-mark::after {
    content: "";

    display: block;
    position: absolute;

    width: 22px;
    height: 22px;

    border-radius: 11px;
    background-color: var(--foreground);
    opacity: 0;

    transition: opacity var(--duration) ease-in-out;
}
#popover-edit-description > .middle > .row-preview > .check-mark:is(:hover, :focus-visible)::after { opacity: 0.1; }
#popover-edit-description > .middle > .row-preview > .check-mark:active::after { opacity: 0.2; }

#popover-edit-description > .middle > .row-preview > .input-area {
    padding: 1px 0;

    font-size: var(--block-text-size);
    font-weight: var(--block-weight);
    overflow-wrap: break-word;
    color: var(--block-text);
    outline: unset;
}

#popover-edit-description > .middle > .row-preview[data-text-type="subheading"] {
    --block-max-size: 29px;
    --block-text-size: 16px;
    --block-weight: 600;
}

#popover-edit-description > .middle > .row-preview[data-text-type="heading"] {
    --block-max-size: 34px;
    --block-text-size: 20px;
    --block-weight: 700;
}

#popover-edit-description > .middle > .row-preview[data-text-type="title"] {
    --block-max-size: 40px;
    --block-text-size: 24px;
    --block-weight: 700;
}

#popover-edit-description > .middle > .row-preview[data-type="text"] { grid-template-columns: minmax(0, 1fr); }
#popover-edit-description > .middle > .row-preview[data-type="text"] > .check-mark { display: none; }
#popover-edit-description > .middle > .row-preview[data-task-type="root"] > .check-mark > .subtask-mark { display: none; }
#popover-edit-description > .middle > .row-preview[data-task-type="child"] > .check-mark > .task-mark { display: none; }

#popover-edit-description > .bottom {
    position: relative;
    overflow-x: hidden;
    scrollbar-width: none;
}

#popover-edit-description > .bottom > nt-note > .note-inner > .note-wrap {
    padding-left: 48px;
    padding-top: 20px;
}

#popover-edit-description > .bottom > nt-note nt-block > .control-wrap button { opacity: 1; }
#popover-edit-description > .bottom > nt-note nt-block > .control-wrap > .after-wrap { display: none; }

#popover-edit-description > .not-editable-wrap {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;

    width: 100%;
    height: 100%;

    font-size: 14px;
    color: var(--font-sub);
}

#popover-edit-description > .not-editable-wrap > i { font-size: 24px; }

#popover-edit-description > .not-editable-wrap > button {
    position: absolute;
    right: 15px;
    top: 15px;
}

#popover-edit-description.not-editable { display: flex; }
#popover-edit-description.not-editable > .not-editable-wrap { display: flex; }
#popover-edit-description.not-editable > *:not(.not-editable-wrap) { display: none; }

nt-plain-block:is(:not([data-quote]), .preview-in-description) > .quote-wrap { display: none; }

nt-plain-block.preview-in-description { padding-left: 4px; }

nt-plain-block.preview-in-description .tree-wrap { display: none; }

nt-plain-block.preview-in-description:not(.root) .task-mark { display: none !important; }

nt-plain-block.preview-in-description.root .subtask-mark { display: none !important; }

#popover-edit-description > .bottom > nt-note nt-block > .control-wrap > :is(.before-wrap, .after-wrap) { padding: 3px 10px; }
.edit-link-wrap .tree-list-wrap {
    max-height: 100%;
    width: 100%;
    height: 200px;

    border: solid 1px var(--border);
    border-radius: 8px;
}

.edit-link-wrap > .tabs {
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 15px;
    gap: 4px;

    width: 100%;
}

.edit-link-wrap > .tab {
    display: none;
    position: relative;
    flex-direction: column;
    gap: 8px;

    width: 100%;
}

.edit-link-wrap:has([data-btn-tab="tab-note"].tint) > .tab-note { display: flex; }
.edit-link-wrap:has([data-btn-tab="tab-web"].tint) > .tab-web { display: flex; }

.edit-link-wrap px-input-box { display: flex; }
.note-export-options {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10px;

    width: 100%;
    height: max-content;
}

.note-export-options > .buttons {
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: 10px;

    width: 100%;
    height: max-content;
}

.note-export-options > .buttons > button {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;

    width: 100%;
    height: 100%;
}

.note-export-options > .buttons > button > i {
    margin-bottom: 6px;

    font-size: 32px;
}
.note-export-options > .buttons > button > .title {
    font-size: 14px;
    color: var(--button-font);
}
.note-export-options > .buttons > button > .description {
    font-size: 12px;
    color: var(--font-sub);
}
.rename-dialog [data-btn-open-icon-picker] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    width: 38px;
}
.note-move > .tree-list-wrap {
    margin-top: 10px;

    min-height: 100px;
    max-height: 100%;
    width: 100%;
    height: max-content;

    border: solid 1px var(--border);
    border-radius: 8px;
}
.note-restore > .tree-list-wrap {
    margin-top: 10px;
    
    min-height: 100px;
    max-height: 100%;
    width: 100%;
    height: max-content;

    border: solid 1px var(--border);
    border-radius: 8px;
}
px-dialog.preview-browser-dialog > .wrap > :is(.grab, .control) { display: none; }
px-dialog.preview-browser-dialog > .wrap > .body > .title { display: none; }
px-dialog.preview-browser-dialog > .wrap > .body { padding: 0; }

px-dialog.preview-browser-dialog {
    padding: 0;

    background-color: oklch(from var(--black) l c h/0.5);
    backdrop-filter: var(--backdrop-blur);
}

px-dialog.preview-browser-dialog > .wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    border: unset;
    border-radius: unset;
    /* background-color: oklch(from var(--black) l c h/0.5); */
    background-color: transparent;
    backdrop-filter: none;
}

px-dialog.preview-browser-dialog > .wrap > .body {
    width: 100%;
    height: 100%;

    background-color: unset;
}

px-dialog.preview-browser-dialog > .wrap > .body > .content {
    max-width: unset;
    width: 100%;
    height: 100%;
}

.preview-browser-wrap {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    
    width: 100%;
    height: 100%;
}

.preview-browser-wrap > .left {
    position: relative;

    height: 100%;
}

.preview-browser-wrap > .right {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

.preview-browser-wrap .loading-wrap {
    display: none;
    position: absolute;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    font-size: 32px;
    color: var(--white);
}
.preview-browser-wrap.loading > .loading-wrap { display: flex; }
.preview-browser-wrap.loading > :not(.loading-wrap) { display: none; }

.preview-browser-wrap > .right.loading > .loading-wrap { display: flex; }
.preview-browser-wrap > .right.loading > .preview-wrap { display: none; }

.preview-browser-wrap .preview-wrap {
    position: relative;

    width: 100%;
    height: 100%;
}

.preview-browser-wrap .control-wrap {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    left: 0;
    bottom: 0;
    gap: 10px;
    padding: 10px;

    width: 100%;
    height: max-content;

    pointer-events: none;
}

.preview-browser-wrap .control-wrap > .wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    width: max-content;
    height: max-content;

    border: solid 1px var(--border);
    border-radius: 8px;
    background-color: var(--sub-area-background);
    box-shadow: var(--shadow);

    pointer-events: auto;
}

.preview-browser-wrap .control-wrap > .wrap > button {
    --button-radius: 0;
    --button-icon: var(--foreground);
}
.preview-browser-wrap .control-wrap > .wrap > button:disabled {
    opacity: 0.3;
    pointer-events: none;
}

.preview-browser-wrap .control-wrap > .wrap > .partition {
    position: relative;
    margin: 0 5px;

    width: 1px;
    height: 32px;

    background-color: var(--border);
}

.preview-browser-wrap .control-wrap > .wrap > [data-btn-zoom-reset] { width: 65px; }

/* swiper */
.preview-browser-wrap .swiper,
.preview-browser-wrap .swiper-wrapper,
.preview-browser-wrap .swiper-slide,
.preview-browser-wrap .swiper-zoom-container {
    width: 100%;
    height: 100%;
}

.preview-browser-wrap .swiper-wrapper img {
    display: block;
    position: relative;

    width: 100%;
    height: 100%;
    object-fit: contain;
}
px-dialog:has(.popup-progress-dialog) > .wrap > :is(.grab, .control) { display: none; }
px-dialog:has(.popup-progress-dialog) > .wrap > .body > .title { display: none; }
px-dialog:has(.popup-progress-dialog) > .wrap > .body { padding: 0; }

.popup-progress-dialog {
    display: flex;
    position: relative;
    align-items: center;
    gap: 20px;
    padding: 20px;

    width: 100%;
}

.popup-progress-dialog > .left {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    
    font-size: 20px;
    color: var(--font);
}

.popup-progress-dialog > .right {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10px;

    width: 100%;
    height: max-content;
    flex: 1;
}

.popup-progress-dialog > .right > span {
    font-size: 14px;
    color: var(--font);
}
px-dialog.sign-in-dialog > .wrap > :is(.grab, .control) { display: none; }
px-dialog.sign-in-dialog > .wrap > .body > .title { display: none; }
px-dialog.sign-in-dialog > .wrap > .body { padding: 0; }

.sign-in-wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 70px 40px 90px;
    overflow: hidden;

    width: 100%;
    height: 100%;
}

.sign-in-wrap > .close-dialog {
    position: absolute;
    right: 8px;
    top: 8px;
}

.sign-in-wrap > .logo-wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;

    width: 100%;
    height: max-content;
}

.sign-in-wrap > .logo-wrap > .symbol {
    display: block;
    width: 40px;
    height: 40px;
}
.sign-in-wrap > .logo-wrap > .logotype { height: 27px; }

:root .sign-in-wrap > .logo-wrap > .symbol.for-dark { display: none; }

/* dark mode logo */
@media (prefers-color-scheme: dark) {
    :root .sign-in-wrap > .logo-wrap > .symbol { display: none; }
    :root .sign-in-wrap > .logo-wrap > .symbol.for-dark { display: block; }
    :root .sign-in-wrap > .logo-wrap > .logotype { filter: invert(1); }
}
:root.dark .sign-in-wrap > .logo-wrap > .symbol { display: none; }
:root.dark .sign-in-wrap > .logo-wrap > .symbol.for-dark { display: block; }
:root.dark .sign-in-wrap > .logo-wrap > .logotype { filter: invert(1); }

/* light mode logo */
:root.light .sign-in-wrap > .logo-wrap > .symbol { display: block; }
:root.light .sign-in-wrap > .logo-wrap > .symbol.for-dark { display: none; }
:root.light .sign-in-wrap > .logo-wrap > .logotype { filter: unset; }

.sign-in-wrap > .middle-wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10px;

    width: 100%;
    height: max-content;
}

.sign-in-wrap .social-login-button-wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    height: 74px;
}

.sign-in-wrap .social-login-button-wrap > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 !important;

    width: 100%;
}

.sign-in-wrap .social-login-button-wrap > button > img {
    display: block;

    width: 13px;
    height: 13px;
}

.sign-in-wrap .social-login-button-wrap > button > i { color: var(--font); }

.sign-in-wrap .account-info-wrap {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-rows: 74px;
    align-items: center;
    gap: 10px;

    width: 100%;
    height: 74px;
}

.sign-in-wrap .account-info-wrap > .right {
    position: relative;

    width: 100%;
    height: 100%;
}


.sign-in-wrap .account-info-wrap > .right > .account {
    display: flex;
    position: relative;
    align-items: center;
    gap: 10px;

    width: 100%;
    height: 74px;
}

.sign-in-wrap .account-info-wrap > .right > .account > .right > .username { color: var(--font); }
.sign-in-wrap .account-info-wrap > .right > .account > .right > .email { color: var(--font-sub); }

.sign-in-wrap .account-info-wrap > .right > .welcome {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    height: 74px;
}

.sign-in-wrap .account-info-wrap > .right > .welcome > p {
    font-size: 16px;
    color: var(--font);
}
.sign-in-wrap .account-info-wrap > .right > .welcome > .email { color: var(--font-sub); }

.sign-in-wrap .bottom-alert {
    position: absolute;
    bottom: -47px;

    width: 100%;
}
.sign-in-wrap .bottom-alert > p {
    font-size: 12px;
    text-align: center;
}
.sign-in-wrap .bottom-alert > :has(i.fa-triangle-exclamation) { color: var(--critical-foreground); }

.sign-in-wrap > .partition {
    position: relative;

    margin: 25px 0;

    width: 100%;
    height: 1px;

    background-color: var(--border);
}

.sign-in-wrap > .input-wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    height: max-content;
}

.sign-in-wrap > .input-wrap > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 !important;

    width: 100%;
}

.sign-in-wrap > .terms-wrap {
    position: absolute;
    bottom: 10px;

    font-size: 12px;
    text-align: center;
    color: var(--depth-7);
}
.sign-in-wrap > .terms-wrap > a { color: var(--depth-6); }

/* loading */
.sign-in-wrap:not(.loading) [data-btn-loading] { display: none; }
.sign-in-wrap.loading button:has(~ [data-btn-loading]) { display: none; }

/* phase - email */
.sign-in-wrap[data-phase="email"] :is(.account-info-wrap, [data-password-box], [data-btn-sign-in], [data-btn-sign-out]) { display: none !important; }
.sign-in-wrap[data-phase="email"] [data-btn-reset-password] { content-visibility: hidden !important; }

/* phase - password */
.sign-in-wrap[data-phase="password"] :is(.social-login-button-wrap, [data-email-box], [data-btn-continue]) { display: none !important; }
.sign-in-wrap[data-phase="pin"] :is(.social-login-button-wrap, [data-email-box], [data-btn-continue]) { display: none !important; }
.sign-in-wrap[data-phase="pin"] [data-btn-peek-password] { display: none !important; }

.sign-in-wrap:not([data-phase="email"], [data-phase="password"], [data-phase="pin"]) > * { display: none !important; }