:root {
    --mc-panel-w: 252px;
    --ink: #111111;
    --muted: #6b7280;
    --line: #d1d5db;
    --fill: #f4f6fa;
}

* { box-sizing: border-box; }

[hidden] {
    display: none !important;
}

.autofill-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@font-face {
    font-family: "Saira Extra Condensed";
    src: url("fonts/SairaExtraCondensed-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html, body {
    margin: 0;
    height: var(--mc-vvh, 100svh);
    max-height: var(--mc-vvh, 100svh);
    overflow: hidden;
    overscroll-behavior: none;
    background: #fff;
    color: var(--ink);
    font-family: Inter, -apple-system, system-ui, sans-serif;
}

.app {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.menubar {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 0;
    background: #fff;
}

.menubar__row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 8px 16px;
}

.menubar__row--brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    border-bottom: 1px solid var(--line);
    padding-top: 10px;
    padding-bottom: 8px;
}

.menubar__session {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    justify-self: start;
}

.app-title {
    grid-column: 2;
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.05;
    text-align: center;
}

.session-title {
    flex: 0 1 auto;
    min-width: 8.5rem;
    max-width: min(22rem, 100%);
    margin: 0;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.15px;
    line-height: 1.2;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-title:hover:not(:disabled):not(:focus) {
    background: #f4f6fa;
}

.session-title:focus {
    outline: none;
    border-color: var(--line);
    background: #fff;
    text-overflow: clip;
}

.session-title:disabled {
    color: var(--muted);
    cursor: default;
}

.menubar__row--toolbar {
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    row-gap: 8px;
    gap: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    background: #f6f7f9;
}

.menubar__row--tabs {
    position: relative;
    z-index: 1;
    align-items: stretch;
    gap: 0;
    min-height: 36px;
    padding: 4px 12px 0;
    background: #e8eaef;
    border-bottom: 1px solid var(--line);
}

.menubar__cluster {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.menubar__cluster--brand {
    flex: 0 0 auto;
}

.app-credit {
    position: absolute;
    left: 16px;
    bottom: 12px;
    z-index: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
    pointer-events: none;
}

.app-credit span {
    display: block;
}

.menubar__cluster--menus {
    flex: 0 1 auto;
    gap: 8px;
}

.menubar__cluster--file {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 8px;
}

.menubar__group,
.menubar__icons,
.menubar__export {
    display: flex;
    align-items: center;
    gap: 8px;
}

.menubar__row--toolbar > * + * {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--line);
}

.menubar__row--toolbar > .menubar__cluster--file {
    margin-left: auto;
    padding-left: 0;
    border-left: 0;
}

.menubar__break {
    display: none;
}

.menubar .add-menu-wrap .btn {
    width: auto;
}

.menubar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 11px;
    white-space: nowrap;
}

.menubar .btn[hidden] {
    display: none;
}

.menubar .btn--icon,
.menubar .add-menu-wrap .btn--icon {
    width: 38px;
    padding: 0;
}

.btn--icon .material-symbols-outlined {
    display: block;
    font-size: 20px;
    line-height: 1;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.btn--icon.is-on .material-symbols-outlined,
.btn--icon[aria-pressed="true"] .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.rows-panel input[type="range"],
.rows-panel input[type="number"] {
    touch-action: manipulation;
}


.hint-btn {
    appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1.5px solid var(--muted);
    border-radius: 50%;
    background: #fff;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    cursor: pointer;
}

.hint-btn:hover,
.hint-btn:focus-visible {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    outline: none;
}


.group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    padding: 10px 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.group legend {
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rule-label {
    margin: 6px 0 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.rule-label:first-of-type {
    margin-top: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.field--inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.field--inline span:first-child {
    min-width: 92px;
}

.field--inline .visually-hidden + input {
    width: 100%;
    flex: 1 1 auto;
}

.field input,
.field textarea,
.inspector input {
    width: 100%;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    font-weight: 500;
    color: var(--ink);
    background: #fff;
}

.field input[type="number"].is-replace {
    color: var(--muted);
}

.field input:disabled {
    color: var(--muted);
    background: #f3f3f3;
    cursor: not-allowed;
}

.field textarea {
    display: block;
    width: 100%;
    min-height: 160px;
    resize: vertical;
    line-height: 1.45;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
}

.name-modes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.modal__card.has-name-list {
    width: min(100%, 420px);
}

.modal__card.has-perc-row {
    width: min(100%, 720px);
}

.perc-row-edit {
    appearance: none;
    display: block;
    margin: -2px 0 0 26px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
}

.perc-row-edit:hover,
.perc-row-edit:focus-visible {
    color: var(--ink);
    text-decoration: underline;
}

.perc-row-picks {
    margin: 14px 0 0;
    padding: 0;
    max-height: min(62vh, 520px);
    overflow: auto;
    border: 0;
}

.perc-row-order {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.perc-row-hint {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

.perc-row-empty {
    margin: 0;
    flex: 1 1 100%;
    padding: 14px 12px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--muted);
}

.perc-pick--slot,
.perc-row-placeholder {
    box-sizing: border-box;
    width: 138px;
    min-height: 64px;
    border-radius: 8px;
}

.perc-pick--slot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #f7f7f7;
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.perc-pick--slot.is-timpani {
    width: min(100%, 292px);
}

.perc-pick--slot.is-dragging {
    display: none;
}

.perc-pick--ghost {
    position: fixed;
    z-index: 80;
    margin: 0;
    cursor: grabbing;
    pointer-events: none;
    box-shadow: 0 10px 28px rgba(17, 17, 17, 0.18);
}

.perc-row-placeholder {
    border: 1px dashed var(--line);
    background: #efefef;
}

.perc-pick__remove,
.perc-pick__add {
    appearance: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.perc-pick__remove:hover,
.perc-pick__add:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.perc-pick__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.perc-pick__name {
    min-width: 0;
    line-height: 1.25;
}

.perc-pick__bowls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.perc-pick__bowl {
    margin: 0;
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.perc-pick__bowl:has(input:checked) {
    border-color: var(--ink);
    background: #111;
    color: #fff;
}

.perc-pick__bowl input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.perc-pick__remove {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.perc-row-add-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.perc-row-add-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fafafa;
}

.perc-row-add-label {
    margin: 0 0 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.perc-row-add {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.perc-pick__add {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    line-height: 1.25;
}

.field--inline input {
    width: 64px;
    flex: 1;
}

.unit {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.room-depth {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
}

#fit-room {
    margin-top: 0;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-row .check {
    flex: 0 0 auto;
}

.check-row .field {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    border: 1px solid var(--ink);
    border-radius: 6px;
    overflow: hidden;
}

.seg--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.seg--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.seg--5 .seg__btn {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 11px;
}

.seg__btn {
    appearance: none;
    padding: 7px 8px;
    border: 0;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.seg__btn + .seg__btn {
    border-left: 1px solid var(--ink);
}

.seg__btn.is-on {
    background: var(--ink);
    color: #fff;
}

.row-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.field--row-count input[type="number"] {
    width: 64px;
    flex: 1 1 auto;
}

.field--row-count .lock-btn,
.field--with-lock .lock-btn {
    margin-left: auto;
}

.btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.group > .btn-row + .btn-row {
    margin-top: 8px;
}

.btn-row--objects {
    grid-template-columns: 1fr 1fr;
}

.btn-row--objects .btn,
.btn-row--align .btn {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 12px;
}

.add-menu-wrap {
    position: relative;
    min-width: 0;
    display: flex;
}

.add-menu-wrap .btn {
    width: 100%;
}

.add-menu {
    position: fixed;
    z-index: 75;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--ink);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.add-menu__btn {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.add-menu__item--sub > .add-menu__btn::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    margin-right: 2px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    background: none;
    -webkit-mask: none;
    mask: none;
    transform: rotate(-45deg);
}

.add-menu__btn:hover,
.add-menu__flyout button:hover {
    background: var(--ink);
    color: #fff;
}

.add-menu__btn:disabled,
.add-menu__flyout button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.add-menu__btn.is-on,
.add-menu__flyout button.is-on {
    background: var(--ink);
    color: #fff;
}

.add-menu--panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
    padding: 10px 12px 12px;
}

.add-menu--panel .rule-label {
    margin: 4px 0 0;
}

.add-menu--panel .rule-label:first-child {
    margin-top: 0;
}

.add-menu--panel .field--inline input {
    width: 56px;
    flex: 0 0 56px;
}

.save-status {
    margin: -2px 0 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.save-status.is-dirty {
    color: #b45309;
}

.save-status.is-saved {
    color: #16a34a;
}

.share-status {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    line-height: 1;
    cursor: default;
    pointer-events: auto;
}

.share-status:not([hidden]) {
    display: inline-flex;
}

.share-status:hover,
.share-status:focus,
.share-status:focus-visible {
    background: none;
    color: inherit;
    outline: none;
}

.share-status__stack {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.share-status .share-status__icon {
    font-size: 22px;
    line-height: 1;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.share-status .share-status__mark {
    position: absolute;
    top: 58%;
    left: 50%;
    font-size: 11px;
    line-height: 1;
    font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 20;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.share-status .share-status__mark[hidden] {
    display: none;
}

.share-status.is-saved {
    color: #16a34a;
}

.share-status.is-saved .share-status__icon {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.share-status.is-just-saved .share-status__stack {
    animation: share-status-pop 0.35s ease;
}

@keyframes share-status-pop {
    0% { transform: scale(0.55); }
    55% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.share-status.is-unsaved,
.share-status.is-readonly {
    color: var(--muted);
    opacity: 0.4;
}

.share-status.is-saving {
    color: var(--muted);
}

.share-status.is-saving .share-status__icon {
    animation: share-status-pulse 0.9s ease-in-out infinite;
}

@keyframes share-status-pulse {
    50% { opacity: 0.4; }
}

.share-status.is-error {
    color: #b45309;
}

/* Saved somewhere else: click to choose Load Latest or Keep Mine. */
.share-status.is-conflict {
    color: #c62828;
    cursor: pointer;
}

.open-charts {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    flex: 0 1 auto;
    max-width: calc(100% - 40px);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1px;
    margin-bottom: -1px;
    scrollbar-width: thin;
}

.open-charts[hidden] {
    display: none;
}

.open-charts__btn,
.open-charts__rename {
    appearance: none;
    display: block;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 220px;
    margin: 0;
    padding: 8px 18px;
    border: 1px solid #c5cad3;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: #d5d9e1;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}

.open-charts__btn {
    cursor: pointer;
}

.open-charts__name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.open-charts__btn:hover {
    background: #e2e5ec;
    color: var(--ink);
}

.open-charts__btn:focus-visible,
.open-charts__rename:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.open-charts__btn.is-on,
.open-charts__btn.is-on:hover,
.open-charts__rename.is-on {
    position: relative;
    z-index: 1;
    background: var(--fill);
    border-color: var(--line);
    border-bottom: 0;
    color: var(--ink);
    font-weight: 650;
}

.open-charts__btn.is-on::after,
.open-charts__rename.is-on::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: 1px;
    background: var(--fill);
    box-shadow:
        inset 1px 0 0 var(--line),
        inset -1px 0 0 var(--line);
    pointer-events: none;
}

.open-charts__rename {
    outline: none;
    background: #fff;
}

.open-charts__rename.is-on {
    box-shadow: none;
}

.open-charts__new {
    appearance: none;
    flex: 0 0 auto;
    align-self: center;
    width: 28px;
    height: 28px;
    margin: 0 0 4px 2px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.open-charts__new:hover,
.open-charts__new:focus-visible {
    background: rgba(255, 255, 255, 0.7);
    color: var(--ink);
    outline: none;
}

.add-menu__rule {
    height: 1px;
    margin: 4px 6px;
    background: var(--line);
}

.add-menu__rule--danger {
    background: #e11d48;
}

.add-menu__item {
    position: relative;
    width: 100%;
}

.add-menu__flyout {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    left: calc(100% + 2px);
    top: -4px;
    z-index: 76;
    min-width: 176px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--ink);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.add-menu__flyout--wide {
    min-width: 188px;
}

.add-menu__flyout::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 8px;
}

.add-menu__item--sub:hover > .add-menu__flyout,
.add-menu__item--sub:focus-within > .add-menu__flyout {
    visibility: visible;
    pointer-events: auto;
    z-index: 80;
}

.add-menu:has(> .add-menu__item--sub:hover) > .add-menu__item--sub:not(:hover) > .add-menu__flyout,
.add-menu__flyout:has(> .add-menu__item--sub:hover) > .add-menu__item--sub:not(:hover) > .add-menu__flyout {
    visibility: hidden;
    pointer-events: none;
}

.add-menu__flyout button {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.timp-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
}

.btn {
    appearance: none;
    padding: 8px 10px;
    border: 1px solid var(--ink);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn:hover {
    background: var(--ink);
    color: #fff;
}

.btn.is-on {
    background: var(--ink);
    color: #fff;
}

.btn.is-on:hover {
    background: #fff;
    color: var(--ink);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn:disabled:hover {
    background: #fff;
    color: var(--ink);
}

.btn--block { width: 100%; }

.btn[aria-haspopup="true"]:not(.btn--icon) {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.btn[aria-haspopup="true"]:not(.btn--icon)::after {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("icon-caret-down.png") center / contain no-repeat;
    mask: url("icon-caret-down.png") center / contain no-repeat;
}

.btn[aria-haspopup="true"][aria-expanded="true"]:not(.btn--icon)::after {
    transform: rotate(180deg);
}

.btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.btn--icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.btn-hint {
    position: fixed;
    z-index: 80;
    max-width: 220px;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.12);
}

.btn-row--tools {
    grid-template-columns: 1fr 1fr 1fr;
}

.btn-row--tools .add-menu-wrap {
    display: flex;
}

.btn-row--tools .add-menu-wrap .btn {
    width: 100%;
}

.color-palette {
    position: fixed;
    z-index: 70;
    width: var(--mc-panel-w);
    padding: 0 10px 10px;
    background: #fff;
    border: 1px solid var(--ink);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(17, 17, 17, 0.16);
}

.color-palette__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -10px 10px;
    padding: 8px 6px 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    cursor: grab;
    user-select: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.color-palette__bar.is-dragging {
    cursor: grabbing;
}

.color-palette__close {
    appearance: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.color-palette__close:hover {
    background: #111;
    color: #fff;
}

.color-palette__name {
    margin: 0 0 10px;
}

.color-palette__name input {
    font-weight: 500;
}

.rows-panel {
    width: var(--mc-panel-w);
    max-height: calc(var(--mc-vvh, 100svh) - 24px);
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

.rows-panel__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.tools-swatches {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
}

.tools-swatch {
    appearance: none;
    width: 100%;
    aspect-ratio: 1;
    min-height: 0;
    padding: 0;
    border: 1px solid #111;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
}

.tools-swatch:hover,
.tools-swatch.is-on {
    outline: 2px solid #111;
    outline-offset: 1px;
}

.tools-swatch:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.field--range {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.lock-btn {
    appearance: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #111;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.lock-btn:hover {
    background: #111;
    color: #fff;
}

.lock-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    display: none;
}

.lock-btn.is-locked .lock-icon--closed,
.lock-btn:not(.is-locked) .lock-icon--open {
    display: block;
}

.field--range input[type="range"] {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    accent-color: var(--ink);
}

.field--range input[type="number"] {
    width: 52px;
    flex: 0 0 52px;
    padding: 4px 6px;
    text-align: right;
}

.field--range .unit {
    min-width: 0;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #fff; color: var(--ink); }
.btn--ghost { border-color: var(--line); color: var(--muted); }
.btn--ghost:hover { border-color: var(--ink); color: #fff; background: var(--ink); }

.inspector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 14px;
    border-top: 1px solid var(--line);
}

.inspector h2 {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.hint {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
}

.dims {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
}

.stage-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 24px;
    overflow: hidden;
    background: var(--fill);
    border: 1px solid var(--line);
    margin-top: -1px;
    container-type: size;
}

.name-assign-hud {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 18px;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.22);
}

.name-assign-hud[hidden] {
    display: none;
}

.name-assign-hud strong {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.name-assign-hud span {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.72;
}

.page {
    position: relative;
    z-index: 1;
    /* Keep the side margins clear for the Row and Object Properties panels (8px inset each),
       but never shrink below 64% of the stage on narrow windows. */
    width: min(
        100%,
        calc(100cqh * 11 / 8.5),
        max(calc(100cqw - 2 * (var(--mc-panel-w) + 16px - 24px)), 64cqw)
    );
    max-height: 100%;
    aspect-ratio: 11 / 8.5;
    overflow: hidden;
    background: #fff;
    border: 1px solid #111;
    box-shadow: none;
    transform-origin: center center;
}

.page.is-zoomed {
    z-index: 2;
}

.plot-title {
    cursor: text;
}

#stage.is-placing .plot-title {
    cursor: text;
}

.plot-title-edit {
    position: absolute;
    left: 10%;
    width: 80%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #111;
    line-height: 1;
    z-index: 3;
    caret-color: #111;
}

.plot-title-edit:focus {
    outline: none;
}

#stage {
    display: block;
    width: 100%;
    height: 100%;
    cursor: default;
    user-select: none;
    touch-action: none;
}

#stage:focus {
    outline: none;
}

#stage.is-placing {
    cursor: crosshair;
}

#stage.is-placing .item {
    cursor: crosshair;
}

#stage.is-inserting,
#stage.is-inserting .item {
    cursor: copy;
}

.item.is-ghost.is-insert {
    opacity: 0.9;
}

#stage.is-lasso,
#stage.is-lasso .item {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 28 6.2 21.6 20.4 7.4l3.8 3.8L10 25.4z' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M20.4 7.4 22.8 5c.8-.8 2-.8 2.8 0l1.4 1.4c.8.8.8 2 0 2.8L24.2 11.2' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M4 28 6.2 21.6 20.4 7.4l3.8 3.8L10 25.4z' fill='%23111'/%3E%3Cpath d='M20.4 7.4 22.8 5c.8-.8 2-.8 2.8 0l1.4 1.4c.8.8.8 2 0 2.8L24.2 11.2z' fill='%23111'/%3E%3Cpath d='M6.2 21.6 10 25.4' fill='none' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E") 4 28, crosshair;
}

#stage.is-naming {
    cursor: pointer;
}

#stage.is-naming .item {
    cursor: pointer;
}

.chair-name.is-preview {
    opacity: 0.5;
}

.chair-name.is-preview.is-carry {
    opacity: 0.85;
}

.item,
.chair-name,
.chair-name text {
    cursor: pointer;
}

.item.is-movable,
.item.is-movable .chair-name text,
.chair-name.is-movable,
.chair-name.is-movable text {
    cursor: grab;
}

#stage.is-transferring,
#stage.is-transferring .item,
#stage.is-transferring .chair-name text,
#stage.is-moving,
#stage.is-moving .item,
#stage.is-moving .chair-name text {
    cursor: grabbing;
}

.transfer-ghost {
    opacity: 0.9;
}

.item.is-ghost { opacity: 0.4; }
.item.is-ghost.is-carry {
    opacity: 0.72;
}
.item.is-lifting,
.chair-name.is-lifting {
    opacity: 0.22;
}
.handle,
.group-rotate {
    cursor: grab;
}

#stage.is-pan-ready,
#stage.is-panning,
#stage.is-panning .item {
    cursor: grab;
}

#stage.is-panning,
#stage.is-panning .item {
    cursor: grabbing;
}

#stage.is-rotating,
#stage.is-rotating .item {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='translate(4 4)'%3E%3Cpath d='M15.55 5.55 11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45z' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M15.55 5.55 11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45z' fill='%23111'/%3E%3C/g%3E%3C/svg%3E") 16 16, grab;
}

.marquee,
.lasso-path {
    fill: rgba(17, 17, 17, 0.05);
    stroke: #111;
    stroke-width: 0.03;
    stroke-dasharray: 0.09 0.06;
    pointer-events: none;
}

.lasso-path {
    fill-rule: evenodd;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ctx-menu {
    position: fixed;
    z-index: 90;
    min-width: 168px;
    padding: 4px;
    background: #fff;
    border: 1px solid #111;
    border-radius: 6px;
}

.ctx-menu button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.ctx-menu button:hover {
    background: #111;
    color: #fff;
}

.ctx-sub {
    position: relative;
}

.ctx-sub > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ctx-sub > button::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    margin-right: 2px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    background: none;
    -webkit-mask: none;
    mask: none;
    transform: rotate(-45deg);
}

.ctx-submenu {
    position: absolute;
    left: 100%;
    top: -4px;
    z-index: 41;
    min-width: 112px;
    padding: 8px;
    background: #fff;
    border: 1px solid #111;
    border-radius: 6px;
}

.ctx-submenu--list {
    min-width: 0;
    width: max-content;
    padding: 4px;
}

.ctx-submenu--list button {
    white-space: nowrap;
}

.ctx-submenu.is-left {
    left: auto;
    right: 100%;
}

.ctx-swatches {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 5px;
}

.ctx-menu button.ctx-swatch {
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid #111;
    border-radius: 4px;
}

.ctx-menu button.ctx-swatch:hover,
.ctx-menu button.ctx-swatch.is-on {
    background: inherit;
    color: inherit;
    outline: 2px solid #111;
    outline-offset: 1px;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(17, 17, 17, 0.4);
}

.modal[hidden] {
    display: none;
}

.modal__card {
    width: min(100%, 360px);
    padding: 22px 20px 18px;
    background: #fff;
    border: 1px solid #111;
    border-radius: 8px;
}

.modal__card h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.modal__copy {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--muted);
    white-space: pre-line;
}

.modal__section-label {
    margin: 16px 0 0;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    color: inherit;
}

.name-modes.has-label {
    margin-top: 8px;
}

.modal__card .field {
    margin-top: 16px;
}

#modal-share-url {
    font-size: 13px;
    cursor: text;
}

.text-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.text-preview__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    max-height: 120px;
    padding: 12px 10px;
    overflow: auto;
    background: #f7f7f7;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.text-preview__sample {
    font-family: "Saira Extra Condensed", "Arial Narrow", sans-serif;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-shadow:
        -1px 0 #fff,
        1px 0 #fff,
        0 -1px #fff,
        0 1px #fff,
        -1px -1px #fff,
        1px -1px #fff,
        -1px 1px #fff,
        1px 1px #fff;
}

.modal-swatches {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 5px;
    margin-top: 6px;
}

.modal-swatch-spacer {
    aspect-ratio: 1;
}

.modal-swatch {
    appearance: none;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid #111;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
}

.modal-swatch:hover,
.modal-swatch.is-on {
    outline: 2px solid #111;
    outline-offset: 1px;
}

.modal__meta {
    margin: 10px 0 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--muted);
}

.modal__list {
    margin-top: 14px;
    max-height: 240px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.modal__list.is-pick {
    max-height: 320px;
}

/* Keyboard shortcuts (press ?) */
.modal__card.has-keys {
    width: min(100%, 480px);
}

.modal__list.is-keys {
    max-height: min(62vh, 520px);
    margin-top: 6px;
    border: 0;
    border-radius: 0;
}

.keys-group h3 {
    margin: 14px 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.keys-group:first-child h3 {
    margin-top: 4px;
}

.keys-row {
    display: grid;
    grid-template-columns: 10.5rem 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.4;
}

.keys-row:last-child {
    border-bottom: 0;
}

.keys-row__keys {
    color: var(--muted);
    font-size: 12px;
}

.keys-row kbd {
    display: inline-block;
    min-width: 1.5em;
    margin: 0 1px;
    padding: 1px 5px;
    border: 1px solid #c8c8c8;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #fafafa;
    color: var(--ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.modal__list .check {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
}

.modal__list .check:last-child {
    border-bottom: 0;
}

.modal__share-opt {
    margin-top: 14px;
}

.preset-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    padding: 8px 8px 8px 10px;
    border-bottom: 1px solid var(--line);
}

.preset-row--pick {
    grid-template-columns: auto minmax(0, 1fr);
    cursor: pointer;
}

.preset-row--pick input {
    margin: 0;
}

.preset-row__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.preset-row:last-child {
    border-bottom: 0;
}

.preset-row__load {
    appearance: none;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.preset-row__load:hover .preset-row__name,
.preset-row__load:focus-visible .preset-row__name {
    text-decoration: underline;
}

.preset-row__name {
    display: block;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preset-row__meta {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
}

.preset-row__delete {
    appearance: none;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}

.preset-row__delete:hover,
.preset-row__delete:focus-visible {
    border-color: var(--ink);
    color: var(--ink);
    outline: none;
}

.modal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
}

.modal__actions.is-single {
    grid-template-columns: 1fr;
}

.modal__actions.has-secondary {
    grid-template-columns: 1fr 1fr 1fr;
}

.modal__card:has(.modal__actions.has-secondary) {
    width: min(100%, 420px);
}

.modal__actions.has-secondary .btn {
    padding-left: 8px;
    padding-right: 8px;
}

.modal__actions .btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.noteman {
    position: fixed;
    right: 14px;
    bottom: 6px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}

body.is-touring .noteman {
    z-index: 55;
}

.tour {
    position: fixed;
    inset: 0;
    z-index: 46;
    pointer-events: none;
}

.tour[hidden] {
    display: none !important;
}

.tour__scrim {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
    pointer-events: auto;
}

.tour.is-step .tour__scrim {
    background: transparent;
}

/* The first-visit "quick tour?" offer is just Noteman's bubble: keep the page visible and usable. */
body.is-tour-invite .tour__scrim {
    display: none;
}

.tour__spot {
    position: fixed;
    z-index: 47;
    border-radius: 8px;
    pointer-events: auto;
    box-shadow:
        0 0 0 2px #2563eb,
        0 0 0 9999px rgba(17, 17, 17, 0.45);
    animation: tour-pulse 1.2s ease-in-out infinite;
}

.tour__spot[hidden] {
    display: none !important;
}

@keyframes tour-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 2px #2563eb,
            0 0 0 9999px rgba(17, 17, 17, 0.45);
    }
    50% {
        box-shadow:
            0 0 0 7px #2563eb,
            0 0 0 9999px rgba(17, 17, 17, 0.45);
    }
}

.tour__card {
    position: fixed;
    left: 50%;
    top: calc(50% + 28px);
    transform: translate(-50%, -50%);
    z-index: 50;
    width: min(360px, calc(100vw - 48px));
    padding: 22px 20px 18px;
    background: #fff;
    border: 1px solid #111;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(17, 17, 17, 0.18);
    pointer-events: auto;
}

.tour__card[hidden] {
    display: none !important;
}

.tour__close {
    appearance: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 18px;
    line-height: 22px;
    cursor: pointer;
}

.tour__close:hover,
.tour__close:focus-visible {
    color: var(--ink);
    outline: none;
}

.tour__step {
    margin: 0 24px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.tour__card h2 {
    margin: 6px 24px 0 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.tour__body {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--muted);
}

.tour__card .btn {
    width: 100%;
    margin-top: 18px;
}

.noteman__copy {
    min-width: 0;
    flex: 1;
}

.noteman.is-invite .noteman__bubble {
    max-width: 216px;
    padding: 10px 8px 10px 12px;
}

.noteman.is-invite .noteman__tip {
    font-size: 14px;
    line-height: 1.35;
}

.noteman__invite {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.noteman__invite .btn {
    flex: 1;
    padding: 6px 8px;
}

.noteman.is-guiding .noteman__bubble {
    display: none;
}

.noteman__bubble {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 2px;
    width: max-content;
    max-width: 184px;
    margin: 0 18px 10px 0;
    padding: 6px 6px 6px 9px;
    border: 1px solid var(--ink);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.12);
    pointer-events: auto;
}

.noteman__bubble::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    transform: rotate(45deg);
}

.noteman__tip {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.noteman__close {
    appearance: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: -1px -1px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    line-height: 16px;
    cursor: pointer;
}

.noteman__close:hover,
.noteman__close:focus-visible {
    color: var(--ink);
    outline: none;
}

.noteman__mascot {
    appearance: none;
    display: block;
    width: 104px;
    margin-top: -6px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
}

.noteman__mascot img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.noteman.is-quiet .noteman__bubble {
    display: none;
}

.noteman.is-quiet .noteman__mascot img {
    filter: brightness(0);
    opacity: 0.72;
}

.noteman.is-hover .noteman__bubble {
    max-width: 260px;
    padding: 6px 9px;
}

.noteman.is-hover .noteman__close {
    display: none;
}

.desktop-only-msg {
    display: none;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .menubar__row--brand {
        padding-top: 10px;
        padding-bottom: 8px;
    }

    .app-title {
        font-size: 28px;
    }

    .menubar__row--toolbar {
        align-items: center;
        column-gap: 8px;
        row-gap: 8px;
        padding: 8px 12px;
    }

    .menubar__row--toolbar > * {
        flex: 0 0 auto;
    }

    .menubar__row--toolbar > * + * {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .menubar__group,
    .menubar__icons {
        gap: 4px;
        padding: 3px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
    }

    .menubar .btn:not(.btn--icon) {
        flex-shrink: 0;
        padding: 0 10px;
    }

    .menubar__break {
        display: block;
        flex: 1 0 100%;
        width: 100%;
        height: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .menubar__cluster--file {
        flex: 1 1 auto;
        width: auto;
        min-width: min-content;
        margin-left: auto;
        justify-content: flex-end;
        gap: 8px;
    }

    .menubar__export {
        gap: 8px;
    }

    .hint-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
        line-height: 26px;
    }

    .add-menu {
        max-height: calc(100vh - 160px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .add-menu__btn,
    .add-menu__flyout button {
        min-height: 40px;
        padding: 10px 12px;
    }

    .add-menu__item--sub.is-open > .add-menu__btn::after {
        transform: rotate(45deg);
    }

    .add-menu__flyout {
        position: static;
        left: auto;
        top: auto;
        visibility: hidden;
        pointer-events: none;
        max-height: 0;
        min-width: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .add-menu__flyout::before {
        display: none;
    }

    .add-menu__item--sub:hover > .add-menu__flyout,
    .add-menu__item--sub:focus-within > .add-menu__flyout,
    .add-menu:has(> .add-menu__item--sub:hover) > .add-menu__item--sub:not(:hover) > .add-menu__flyout,
    .add-menu__flyout:has(> .add-menu__item--sub:hover) > .add-menu__item--sub:not(:hover) > .add-menu__flyout {
        visibility: hidden;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .add-menu__item--sub.is-open > .add-menu__flyout,
    .add-menu:has(> .add-menu__item--sub:hover) > .add-menu__item--sub.is-open > .add-menu__flyout,
    .add-menu__flyout:has(> .add-menu__item--sub:hover) > .add-menu__item--sub.is-open > .add-menu__flyout {
        visibility: visible;
        pointer-events: auto;
        max-height: none;
        overflow: visible;
        margin: 0 0 2px 8px;
        padding: 2px 0 4px;
        border: 0;
        border-left: 2px solid var(--line);
        box-shadow: none;
        background: transparent;
    }
}

@media (max-width: 767px) {
    html, body {
        height: 100%;
        overflow: hidden;
    }
    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .app,
    .ctx-menu,
    .modal,
    .noteman,
    .tour {
        display: none !important;
    }
    .desktop-only-msg {
        display: block;
        margin: 0;
        padding: 0 20px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.4;
        text-align: center;
        color: var(--ink);
    }
}